@import url('../../_globals/css/style.min.css');

/*------------------------------------------------------------
    TABLE OF CONTENTS
--------------------------------------------------------------

    GENERAL
        =01= VARIABLES
        =02= GLOBAL STYLES
        =03= TYPOGRAPHY
    ELEMENTS
        =04= FORMS & INPUT
        =05= DROPDOWNS
        =06= PAYMENT METHODS
        =07= TRUST LOGOS
        =08= GOOGLE TRANSLATE
        =08= SIDEBAR
    TEMPLATE
        =09= TEMPLATE SKIP NAVIGATION
        =10= TEMPLATE PROMOTIONS
        =11= TEMPLATE HEADER
        =12= TEMPLATE PANE
        =13= TEMPLATE BODY
        =14= TEMPLATE PAGE HEADER
        =15= TEMPLATE BREADCRUMBS
        =16= TEMPLATE SUBFOOTER
        =17= TEMPLATE FOOTER
        =18= TEMPLATE COOKIE POLICY
    PAGE CONTENT
        =19= LOGIN
        =20= MY ACCOUNT
        =21= HERO
        =21= HOMEPAGE
        =21= EVENTS
        =21= WHERE TO FIND
        =21= CONTACT
        =22= PRODUCT / PRICE
        =23= PRODUCT / RATING
        =24= PRODUCT / QUANTITY INPUT
        =25= PRODUCT LIST
        =26= PRODUCT DETAILS
        =27= CART
        =28= CHECKOUT
        =29= BLOG LIST
        =30= BLOG SINGLE POST
        =31= COMMENTS


------------------------------------------------------------*/


/*------------------------------------------------------------
    =01= VARIABLES
------------------------------------------------------------*/

:root {
    /* Font families */
    --font-header: 'Montserrat';
    --font-body: 'Lora';
    --font-code: 'Source Code Pro';
    /* HSL Variants */
    --lightest: 12.5%;
    --lighter: 25.0%;
    --light: 37.5%;
    --dark: 12.5%;
    --darker: 24.0%;
    --darkest: 36.5%;
    /* Colors */
    --custom-1-h: 36;
    --custom-1-s: 96%;
    --custom-1-l: 62%;
    --custom-1: hsl(var(--custom-1-h), var(--custom-1-s), var(--custom-1-l));
    --custom-1-light: hsl(var(--custom-1-h), var(--custom-1-s), calc(var(--custom-1-l) + var(--lightest)));
    --custom-1-lighter: hsl(var(--custom-1-h), var(--custom-1-s), calc(var(--custom-1-l) + var(--lighter)));
    --custom-1-lightest: hsl(var(--custom-1-h), var(--custom-1-s), calc(var(--custom-1-l) + var(--light)));
    --custom-1-dark: hsl(var(--custom-1-h), var(--custom-1-s), calc(var(--custom-1-l) - var(--dark)));
    --custom-1-darker: hsl(var(--custom-1-h), var(--custom-1-s), calc(var(--custom-1-l) - var(--darker)));
    --custom-1-darkest: hsl(var(--custom-1-h), var(--custom-1-s), calc(var(--custom-1-l) - var(--darkest)));
    --custom-1-50: hsl(var(--custom-1-h), var(--custom-1-s), var(--custom-1-l), 50%);
    --custom-1-75: hsl(var(--custom-1-h), var(--custom-1-s), var(--custom-1-l), 75%);
    --custom-2-h: 352;
    --custom-2-s: 96%;
    --custom-2-l: 65%;
    --custom-2: hsl(var(--custom-2-h), var(--custom-2-s), var(--custom-2-l));
    --custom-2-light: hsl(var(--custom-2-h), var(--custom-2-s), calc(var(--custom-2-l) + var(--lightest)));
    --custom-2-lighter: hsl(var(--custom-2-h), var(--custom-2-s), calc(var(--custom-2-l) + var(--lighter)));
    --custom-2-lightest: hsl(var(--custom-2-h), var(--custom-2-s), calc(var(--custom-2-l) + var(--light)));
    --custom-2-dark: hsl(var(--custom-2-h), var(--custom-2-s), calc(var(--custom-2-l) - var(--dark)));
    --custom-2-darker: hsl(var(--custom-2-h), var(--custom-2-s), calc(var(--custom-2-l) - var(--darker)));
    --custom-2-darkest: hsl(var(--custom-2-h), var(--custom-2-s), calc(var(--custom-2-l) - var(--darkest)));
    --custom-2-50: hsl(var(--custom-2-h), var(--custom-2-s), var(--custom-2-l), 50%);
    --custom-2-75: hsl(var(--custom-2-h), var(--custom-2-s), var(--custom-2-l), 75%);
    --bs-primary-h: 217;
    --bs-primary-s: 80%;
    --bs-primary-l: 58%;
    --bs-primary: hsl(var(--bs-primary-h), var(--bs-primary-s), var(--bs-primary-l));
    --bs-primary-light: hsl(var(--bs-primary-h), var(--bs-primary-s), calc(var(--bs-primary-l) + var(--lightest)));
    --bs-primary-lighter: hsl(var(--bs-primary-h), var(--bs-primary-s), calc(var(--bs-primary-l) + var(--lighter)));
    --bs-primary-lightest: hsl(var(--bs-primary-h), var(--bs-primary-s), calc(var(--bs-primary-l) + var(--light)));
    --bs-primary-dark: hsl(var(--bs-primary-h), var(--bs-primary-s), calc(var(--bs-primary-l) - var(--dark)));
    --bs-primary-darker: hsl(var(--bs-primary-h), var(--bs-primary-s), calc(var(--bs-primary-l) - var(--darker)));
    --bs-primary-darkest: hsl(var(--bs-primary-h), var(--bs-primary-s), calc(var(--bs-primary-l) - var(--darkest)));
    --bs-primary-50: hsl(var(--bs-primary-h), var(--bs-primary-s), var(--bs-primary-l), 50%);
    --bs-primary-75: hsl(var(--bs-primary-h), var(--bs-primary-s), var(--bs-primary-l), 75%);
    --bs-secondary-h: 208;
    --bs-secondary-s: 7%;
    --bs-secondary-l: 46%;
    --bs-secondary: hsl(var(--bs-secondary-h), var(--bs-secondary-s), var(--bs-secondary-l));
    --bs-secondary-light: hsl(var(--bs-secondary-h), var(--bs-secondary-s), calc(var(--bs-secondary-l) + var(--lightest)));
    --bs-secondary-lighter: hsl(var(--bs-secondary-h), var(--bs-secondary-s), calc(var(--bs-secondary-l) + var(--lighter)));
    --bs-secondary-lightest: hsl(var(--bs-secondary-h), var(--bs-secondary-s), calc(var(--bs-secondary-l) + var(--light)));
    --bs-secondary-dark: hsl(var(--bs-secondary-h), var(--bs-secondary-s), calc(var(--bs-secondary-l) - var(--dark)));
    --bs-secondary-darker: hsl(var(--bs-secondary-h), var(--bs-secondary-s), calc(var(--bs-secondary-l) - var(--darker)));
    --bs-secondary-darkest: hsl(var(--bs-secondary-h), var(--bs-secondary-s), calc(var(--bs-secondary-l) - var(--darkest)));
    --bs-secondary-50: hsl(var(--bs-secondary-h), var(--bs-secondary-s), var(--bs-secondary-l), 50%);
    --bs-secondary-75: hsl(var(--bs-secondary-h), var(--bs-secondary-s), var(--bs-secondary-l), 75%);
    --bs-success-h: 141;
    --bs-success-s: 48%;
    --bs-success-l: 52%;
    --bs-success: hsl(var(--bs-success-h), var(--bs-success-s), var(--bs-success-l));
    --bs-success-light: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) + var(--lightest)));
    --bs-success-lighter: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) + var(--lighter)));
    --bs-success-lightest: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) + var(--light)));
    --bs-success-dark: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) - var(--dark)));
    --bs-success-darker: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) - var(--darker)));
    --bs-success-darkest: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) - var(--darkest)));
    --bs-success-50: hsl(var(--bs-success-h), var(--bs-success-s), var(--bs-success-l), 50%);
    --bs-success-75: hsl(var(--bs-success-h), var(--bs-success-s), var(--bs-success-l), 75%);
    --bs-success-h: 141;
    --bs-success-s: 48%;
    --bs-success-l: 52%;
    --bs-success: hsl(var(--bs-success-h), var(--bs-success-s), var(--bs-success-l));
    --bs-success-light: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) + var(--lightest)));
    --bs-success-lighter: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) + var(--lighter)));
    --bs-success-lightest: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) + var(--light)));
    --bs-success-dark: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) - var(--dark)));
    --bs-success-darker: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) - var(--darker)));
    --bs-success-darkest: hsl(var(--bs-success-h), var(--bs-success-s), calc(var(--bs-success-l) - var(--darkest)));
    --bs-success-50: hsl(var(--bs-success-h), var(--bs-success-s), var(--bs-success-l), 50%);
    --bs-success-75: hsl(var(--bs-success-h), var(--bs-success-s), var(--bs-success-l), 75%);
    --bs-info-h: 198;
    --bs-info-s: 74%;
    --bs-info-l: 47%;
    --bs-info: hsl(var(--bs-info-h), var(--bs-info-s), var(--bs-info-l));
    --bs-info-light: hsl(var(--bs-info-h), var(--bs-info-s), calc(var(--bs-info-l) + var(--lightest)));
    --bs-info-lighter: hsl(var(--bs-info-h), var(--bs-info-s), calc(var(--bs-info-l) + var(--lighter)));
    --bs-info-lightest: hsl(var(--bs-info-h), var(--bs-info-s), calc(var(--bs-info-l) + var(--light)));
    --bs-info-dark: hsl(var(--bs-info-h), var(--bs-info-s), calc(var(--bs-info-l) - var(--dark)));
    --bs-info-darker: hsl(var(--bs-info-h), var(--bs-info-s), calc(var(--bs-info-l) - var(--darker)));
    --bs-info-darkest: hsl(var(--bs-info-h), var(--bs-info-s), calc(var(--bs-info-l) - var(--darkest)));
    --bs-info-50: hsl(var(--bs-info-h), var(--bs-info-s), var(--bs-info-l), 50%);
    --bs-info-75: hsl(var(--bs-info-h), var(--bs-info-s), var(--bs-info-l), 75%);
    --bs-warning-h: 35;
    --bs-warning-s: 75%;
    --bs-warning-l: 60%;
    --bs-warning: hsl(var(--bs-warning-h), var(--bs-warning-s), var(--bs-warning-l));
    --bs-warning-light: hsl(var(--bs-warning-h), var(--bs-warning-s), calc(var(--bs-warning-l) + var(--lightest)));
    --bs-warning-lighter: hsl(var(--bs-warning-h), var(--bs-warning-s), calc(var(--bs-warning-l) + var(--lighter)));
    --bs-warning-lightest: hsl(var(--bs-warning-h), var(--bs-warning-s), calc(var(--bs-warning-l) + var(--light)));
    --bs-warning-dark: hsl(var(--bs-warning-h), var(--bs-warning-s), calc(var(--bs-warning-l) - var(--dark)));
    --bs-warning-darker: hsl(var(--bs-warning-h), var(--bs-warning-s), calc(var(--bs-warning-l) - var(--darker)));
    --bs-warning-darkest: hsl(var(--bs-warning-h), var(--bs-warning-s), calc(var(--bs-warning-l) - var(--darkest)));
    --bs-warning-50: hsl(var(--bs-warning-h), var(--bs-warning-s), var(--bs-warning-l), 50%);
    --bs-warning-75: hsl(var(--bs-warning-h), var(--bs-warning-s), var(--bs-warning-l), 75%);
    --bs-danger-h: 2;
    --bs-danger-s: 64%;
    --bs-danger-l: 58%;
    --bs-danger: hsl(var(--bs-danger-h), var(--bs-danger-s), var(--bs-danger-l));
    --bs-danger-light: hsl(var(--bs-danger-h), var(--bs-danger-s), calc(var(--bs-danger-l) + var(--lightest)));
    --bs-danger-lighter: hsl(var(--bs-danger-h), var(--bs-danger-s), calc(var(--bs-danger-l) + var(--lighter)));
    --bs-danger-lightest: hsl(var(--bs-danger-h), var(--bs-danger-s), calc(var(--bs-danger-l) + var(--light)));
    --bs-danger-dark: hsl(var(--bs-danger-h), var(--bs-danger-s), calc(var(--bs-danger-l) - var(--dark)));
    --bs-danger-darker: hsl(var(--bs-danger-h), var(--bs-danger-s), calc(var(--bs-danger-l) - var(--darker)));
    --bs-danger-darkest: hsl(var(--bs-danger-h), var(--bs-danger-s), calc(var(--bs-danger-l) - var(--darkest)));
    --bs-danger-50: hsl(var(--bs-danger-h), var(--bs-danger-s), var(--bs-danger-l), 50%);
    --bs-danger-75: hsl(var(--bs-danger-h), var(--bs-danger-s), var(--bs-danger-l), 75%);
    --bs-dark-h: 0;
    --bs-dark-s: 0%;
    --bs-dark-l: 0%;
    --bs-dark: hsl(var(--bs-dark-h), var(--bs-dark-s), var(--bs-dark-l));
    --bs-dark-light: hsl(var(--bs-dark-h), var(--bs-dark-s), calc(var(--bs-dark-l) + var(--lightest)));
    --bs-dark-lighter: hsl(var(--bs-dark-h), var(--bs-dark-s), calc(var(--bs-dark-l) + var(--lighter)));
    --bs-dark-lightest: hsl(var(--bs-dark-h), var(--bs-dark-s), calc(var(--bs-dark-l) + var(--light)));
    --bs-dark-dark: hsl(var(--bs-dark-h), var(--bs-dark-s), calc(var(--bs-dark-l) - (var(--dark) - 5%)));
    --bs-dark-darker: hsl(var(--bs-dark-h), var(--bs-dark-s), calc(var(--bs-dark-l) - (var(--darker) - 10%)));
    --bs-dark-darkest: hsl(var(--bs-dark-h), var(--bs-dark-s), calc(var(--bs-dark-l) - (var(--darkest) - 7%)));
    --bs-dark-50: hsl(var(--bs-dark-h), var(--bs-dark-s), var(--bs-dark-l), 50%);
    --bs-dark-75: hsl(var(--bs-dark-h), var(--bs-dark-s), var(--bs-dark-l), 75%);
    --bs-light-h: 217;
    --bs-light-s: 50%;
    --bs-light-l: 97%;
    --bs-light: hsl(var(--bs-light-h), var(--bs-light-s), var(--bs-light-l));
    --bs-light-dark: hsl(var(--bs-light-h), var(--bs-light-s), calc(var(--bs-light-l) - var(--dark)));
    --bs-light-darker: hsl(var(--bs-light-h), var(--bs-light-s), calc(var(--bs-light-l) - var(--darker)));
    --bs-light-darkest: hsl(var(--bs-light-h), var(--bs-light-s), calc(var(--bs-light-l) - var(--darkest)));
    --bs-light-50: hsl(var(--bs-light-h), var(--bs-light-s), var(--bs-light-l), 50%);
    --bs-light-75: hsl(var(--bs-light-h), var(--bs-light-s), var(--bs-light-l), 75%);
    --bs-borders: #ced4da;
    --bs-borders-50: rgba(206, 212, 218, 0.5);
    /* Sizes */
    --height-header: 6rem;
    --width-sidebar: 15rem;
    --border-radius-sm: .25rem;
    --border-radius-md: .50rem;
    --border-radius-lg: .75rem;
    --border-radius-xl: 1rem;
}


/*------------------------------------------------------------
    =02= GLOBAL STYLES
------------------------------------------------------------*/

* {
    outline: 0 !important;
    font-variant-ligatures: none !important;
}

html {
    font-size: 16px;
}

body {
    color: #606060;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--bs-dark-dark);
}

a {
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

a:focus-visible,
button:focus-visible,
[role=button]:focus-visible,
[type=submit]:focus-visible,
[data-bs-toggle]:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
input:not(.form-control):not(.form-select):focus-visible,
select:not(.form-control):not(.form-select):focus-visible,
textarea:not(.form-control):not(.form-select):focus-visible {
    outline: 3px solid darkorange !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
}

code {
    font-family: var(--font-code);
}

hr.hr-theme {
    height: 3px;
    width: 100%;
    max-width: 20rem;
    background-color: var(--bs-primary);
    opacity: 1;
}

section {
    padding-top: 3rem;
    padding-right: 0;
    padding-bottom: 3rem;
    padding-left: 0;
}

@media (min-width: 992px) {
    section {
        padding-top: 5rem;
        padding-right: 0;
        padding-bottom: 5rem;
        padding-left: 0;
    }
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.sticky-top {
    top: calc(var(--height-header) + 4rem);
}


/*------------------------------------------------------------
    =03= TYPOGRAPHY
------------------------------------------------------------*/

h1,
h2,
h3,
h4 {
    margin-bottom: .5em;
    color: var(--bs-dark);
    font-family: var(--font-header);
}

h1 span,
h2 span,
h3 span,
h4 span {
    display: block;
    margin-top: .5rem;
    color: var(--custom-2);
    font-size: 1.6rem;
    font-weight: 300;
}

h1 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }
}

h2 {
    font-size: 1.8rem;
    font-weight: 600;
}

h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

h4 {
    color: var(--custom-2);
    font-size: 1.2rem;
    font-weight: 500;
}

.subheader {
    color: var(--bs-primary);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.underline {
    position: relative;
    margin-bottom: 3rem;
}

.underline:after {
    content: '';
    position: absolute;
    bottom: calc(-1.5rem + -1px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 20rem;
    height: 0.2rem;
    background-color: #dfdfdf;
}


/*------------------------------------------------------------
    =04= FORMS & INPUT
------------------------------------------------------------*/


/* Verification code */

.verification-code {
    display: flex;
    justify-content: center;
}

.verification-code input {
    margin: 0 .5rem;
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
}

.verification-code .form-control.is-invalid,
.verification-code .form-control.is-valid,
.verification-code .was-validated .form-control:invalid,
.verification-code .was-validated .form-control:valid {
    padding: .375rem .75rem;
    background-image: none !important;
}

.verification-code input::-webkit-outer-spin-button,
.verification-code input::-webkit-inner-spin-button {
    margin: 0;
    text-align: center;
    -webkit-appearance: none;
}


/* Color swatches */

.color-swatches {
    padding-bottom: 2px;
}

.color-swatches .check-swatch,
.color-swatches .check-swatch input,
.color-swatches .check-swatch label {
    position: relative;
    width: 2rem;
    height: 2rem;
}

.color-swatches .check-swatch {
    margin-right: .5rem;
}

.color-swatches .check-swatch .badge {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 0 0 0;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--bs-yellow);
    font-size: 1rem;
}

.color-swatches .check-swatch input {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}

.color-swatches .check-swatch label {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
    box-shadow: 0 0 0 2px transparent;
    -webkit-box-shadow: 0 0 0 2px transparent;
    -moz-box-shadow: 0 0 0 2px transparent;
    border: 2px solid transparent;
    transition: border .2s ease, box-shadow .2s ease;
    -webkit-transition: border .2s ease, box-shadow .2s ease;
    -moz-transition: border .2s ease, box-shadow .2s ease;
}

.color-swatches .check-swatch input:checked+label {
    box-shadow: 0 0 0 2px #202020;
    -webkit-box-shadow: 0 0 0 2px #202020;
    -moz-box-shadow: 0 0 0 2px #202020;
    border: 2px solid #fff;
}


/*------------------------------------------------------------
    =05= DROPDOWNS
------------------------------------------------------------*/

.dropdown-menu .dropdown-item:hover {
    color: var(--bs-primary);
    background-color: inherit;
}

.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus {
    color: var(--bs-primary);
    background-color: var(--bs-light);
}

.dropdown-menu .dropdown-item.active {
    color: #fff;
    text-decoration: none;
    background-color: var(--bs-primary);
}


/*------------------------------------------------------------
    =06= PAYMENT METHODS
------------------------------------------------------------*/

.payment-methods {
    display: flex;
    margin: 0 -.2rem;
}

.payment-methods .method-icon {
    margin: 0 .2rem;
    height: 2rem;
}


/*------------------------------------------------------------
    =07= TRUST LOGOS
------------------------------------------------------------*/

.trust-logos {
    margin-top: 1.5rem;
    text-align: center
}

.trust-logos .row {
    justify-content: space-around;
}

.trust-logos .seal:hover,
.trust-logos .seal:active,
.trust-logos .seal:focus {
    opacity: .7;
}

.trust-logos .seal img {
    width: 100%;
    max-width: 10rem;
}


/*------------------------------------------------------------
    =08= GOOGLE TRANSLATE
------------------------------------------------------------*/

body>.skiptranslate,
#google-translate .goog-logo-link {
    display: none !important;
}

#google-translate .skiptranslate {
    margin: 1rem 0;
    color: var(--bs-dark-dark);
}

#google-translate .goog-te-gadget .goog-te-combo {
    margin-top: 1rem;
    padding: 0 1rem;
    width: 100%;
    height: 2.5rem;
    color: #fff;
    border: 0;
    background: var(--bs-dark);
    border-radius: .25em;
}

#google-translate .skiptranslate>span {
    display: none;
}


/*------------------------------------------------------------
    =09= SIDEBAR
------------------------------------------------------------*/

.sidebar .sidebar-link.active {
    color: #ffff !important;
    background-color: var(--custom-1);
}

.sidebar .sidebar-link:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: -10px;
    height: 50%;
    margin-top: -14px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid var(--custom-1);
    opacity: 0;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
}


/*------------------------------------------------------------
    =09= TEMPLATE SKIP NAVIGATION
------------------------------------------------------------*/

#template-skip-nav {
    position: fixed;
    z-index: 1036;
    top: -3rem;
    display: flex;
    width: 100%;
}

#template-skip-nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    height: 3rem;
    color: #fff;
    text-align: center;
    background: var(--bs-primary-dark);
    transform: translateY(0%);
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    -moz-transition: transform 0.3s;
}

#template-skip-nav a:focus {
    transform: translateY(100%);
}


/*------------------------------------------------------------
    =10= TEMPLATE PROMOTIONS
------------------------------------------------------------*/

.promo-show #template-promotions {
    display: flex;
}

#template-promotions {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1033;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    color: #fff;
    background-color: var(--bs-dark);
}

#template-promotions .carousel-item {
    align-items: center;
    justify-content: center;
    height: 3rem;
    background-size: cover;
    background-position: 50%;
    background-color: var(--bs-primary);
}

#template-promotions .carousel-item>a {
    display: block;
    text-align: center;
    text-decoration: none;
}

#template-promotions .carousel-content {
    padding: .7em 3rem .7rem;
}

#template-promotions .btn-close {
    position: absolute;
    top: .75rem;
    right: 1rem;
}

#template-promotions .carousel-control>a:hover,
#template-promotions .carousel-control>a:active,
#template-promotions .carousel-control>a:focus {
    opacity: 1;
}

#template-promotions .carousel-control>a:first-of-type {
    left: 4rem;
}

#template-promotions .carousel-control>a:last-of-type {
    right: 4rem;
}


/* Make the carouel scroll vertically */

#template-promotions .carousel-item-next.carousel-item-start,
#template-promotions .carousel-item-prev.carousel-item-end {
    transform: translate3d(0, 0, 0);
}

#template-promotions .carousel-item-next,
#template-promotions .active.carousel-item-end {
    transform: translate3d(0, 100%, 0);
}

#template-promotions .carousel-item-prev,
#template-promotions .active.carousel-item-start {
    transform: translate3d(0, -100%, 0);
}


/*------------------------------------------------------------
    =11= TEMPLATE HEADER
------------------------------------------------------------*/

#template-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1031;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    width: 100%;
    min-height: var(--height-header);
    background-color: #ffffff;
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
}

@media (min-width: 768px) {
    #template-header {
        padding: 0 4rem;
    }
}

.header-trans #template-header {
    background-color: transparent;
}

.header-trans #template-header.fixed {
    background-color: var(--bs-dark);
}

#template-header .navbar {
    position: initial;
}

@media (max-width: 767px) {
    #template-header .navbar #navbarCollapse {
        position: absolute;
        top: var(--height-header);
        left: 0;
        width: 100%;
        background-color: #fff;
        border-top: 1px solid #dfdfdf;
    }
}

#template-header .navbar .navbar-nav {
    justify-content: center;
    align-items: center;
    width: 100%;
}

@media (min-width: 1200px) {
    #template-header .navbar .navbar-nav {
        margin-right: 1rem;
    }
}

.promo-show #template-header {
    top: 3rem;
}


/* Header Logo */

#template-header .navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
    width: 4rem;
}

#template-header .navbar-brand>img {
    width: 100%;
}


/* Social media */

#template-header .social-media span {
    padding-right: 1rem;
}

#template-header .social-media .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 0 .2rem;
    width: auto;
    height: auto;
    color: var(--custom-1);
    font-size: 1.2rem;
    text-decoration: none;
}

#template-header .social-media .social-icon:hover,
#template-header .social-media .social-icon:active,
#template-header .social-media .social-icon:focus {
    color: var(--custom-dark);
}


/* Navbar Links & Buttons */

#template-header .navbar {
    height: var(--height-header);
}

#template-header .navbar:first-of-type {
    margin-left: 2rem;
    margin-right: auto;
}

#template-header .navbar .nav-item {
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    #template-header .navbar .nav-item {
        width: auto;
    }
}

#template-header .navbar .nav-link,
#template-header .dropdown-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    color: #909090;
    width: 100%;
    height: 3rem;
    font-family: var(--font-header);
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .1em;
    border-radius: var(--border-radius-sm);
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
}

@media (min-width: 768px) {
    #template-header .navbar .nav-link,
    #template-header .dropdown-item {
        padding: 0.5rem 1.5rem;
        width: auto;
    }
}

#template-header .navbar .nav-link:hover,
#template-header .navbar .nav-link:active,
#template-header .navbar .nav-link:focus,
#template-header .dropdown-item:hover,
#template-header .dropdown-item:active,
#template-header .dropdown-item:focus {
    color: var(--bs-dark);
}

#template-header .navbar .active .nav-link {
    color: var(--bs-dark);
}

@media (min-width: 768px) {
    #template-header .navbar .nav-item.active:after {
        content: '';
        position: absolute;
        bottom: -1.5rem;
        left: 0;
        display: block;
        width: 100%;
        height: 0.25rem;
        background-color: var(--custom-1);
    }
}

#template-header .navbar .nav-link i {
    font-size: 1.5rem;
}

#template-header .navbar .nav-link .badge {
    position: absolute;
    top: 50%;
    right: -0.5rem;
    transform: translateY(20%);
}

#template-header #primary-nav .nav-item .btn {
    margin: 0 1rem;
    text-transform: uppercase;
}

#template-header .user-photo {
    display: block;
    width: 3rem;
    height: 3rem;
    background-color: var(--bs-dark-light);
    background-position: 50%;
    background-size: cover;
    border: 0;
    border-radius: var(--border-radius-sm);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
}

#template-header .user-photo:hover {
    box-shadow: inset 0 0 0 2px var(--bs-primary);
    -webkit-box-shadow: inset 0 0 0 2px var(--bs-primary);
    -moz-box-shadow: inset 0 0 0 2px var(--bs-primary);
}


/* Navbar Primary - Custom toggler */

#template-header .navbar-primary .navbar-toggler {
    position: fixed;
    top: 1.4rem;
    right: 1rem;
    z-index: 1;
    padding: 0;
    border: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#template-header .navbar-primary .custom-toggle {
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3rem;
    text-align: center;
    transform: rotate(0);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    cursor: pointer;
}

#template-header .navbar-primary .custom-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 30px;
    background: #9f9f9f;
    opacity: 1;
    left: 10px;
    transform: rotate(0deg);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
}

.navbar-toggler:hover .custom-toggle span {
    background: #ffffff
}

#template-header .navbar-primary .custom-toggle span:nth-child(1) {
    top: 17px;
    width: 20px;
}

#template-header .navbar-primary .custom-toggle span:nth-child(2),
#template-header .navbar-primary .custom-toggle span:nth-child(3),
#template-header .navbar-primary .navbar-toggler[aria-expanded="true"] .custom-toggle span:nth-child(1),
#template-header .navbar-primary .navbar-toggler[aria-expanded="true"] .custom-toggle span:nth-child(4) {
    top: 24px;
}

#template-header .navbar-primary .custom-toggle span:nth-child(4) {
    top: 31px;
    width: 24px;
}

#template-header .navbar-primary .navbar-toggler[aria-expanded="true"] .custom-toggle {
    left: 24.5px;
}

#template-header .navbar-primary .navbar-toggler[aria-expanded="true"] .custom-toggle span:nth-child(1) {
    width: 0%;
    left: 50%;
}

#template-header .navbar-primary .navbar-toggler[aria-expanded="true"] .custom-toggle span:nth-child(2) {
    transform: rotate(45deg);
}

#template-header .navbar-primary .navbar-toggler[aria-expanded="true"] .custom-toggle span:nth-child(3) {
    transform: rotate(-45deg);
}

#template-header .navbar-primary .navbar-toggler[aria-expanded="true"] .custom-toggle span:nth-child(4) {
    width: 0%;
    left: 50%;
}


/* Navbar Primary - Dropdown Menu */

#template-header .navbar .nav-link {}

#template-header .dropdown-item:hover,
#template-header .dropdown-item:active,
#template-header .dropdown-item:focus {}


/*------------------------------------------------------------
    =12= TEMPLATE PANE
------------------------------------------------------------*/

#template-pane {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 1036;
    display: block;
    width: 100%;
    height: 100vh;
    color: #909090;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    background-color: var(--bs-dark-darker);
    box-shadow: 0 0 0 rgb(0 0 0 / 30%);
    -webkit-box-shadow: 0 0 0 rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 0 0 rgb(0 0 0 / 30%);
}

@media (min-width: 992px) {
    #template-pane {
        right: -25rem;
        max-width: 25rem;
    }
}

#template-pane.open {
    right: 0;
    box-shadow: -1rem 0 5rem rgb(0 0 0 / 30%);
    -webkit-box-shadow: -1rem 0 5rem rgb(0 0 0 / 30%);
    -moz-box-shadow: -1rem 0 5rem rgb(0 0 0 / 30%);
}

#template-pane .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

#template-pane .pane-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#template-pane a:not(.btn) {
    color: rgba(255, 255, 255, .7);
}

#template-pane a:not(.btn):hover,
#template-pane a:not(.btn):active,
#template-pane a:not(.btn):focus {
    color: #fff;
}

#template-pane .pane-header .row {
    align-items: center;
}

#template-pane .pane-header .user-photo {
    border-radius: var(--border-radius-md);
}

#template-pane .pane-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    border-bottom: 1px solid rgba(125, 125, 125, .2);
}

#template-pane .pane-header small {
    font-size: .5em;
    text-transform: uppercase;
    letter-spacing: .2em;
    opacity: .6;
}

#template-pane .pane-body {
    height: 100%;
    overflow-y: auto;
}

#template-pane .nav-link {
    padding: .8rem 0;
    font-size: 1.2rem;
}

#template-pane .nav-link i {
    color: var(--bs-primary);
    font-size: 1.4rem;
}


/* Shopping Cart pane */

#template-pane.cart-pane .line {
    position: relative;
    display: flex;
    margin: .5rem 0;
}

#template-pane.cart-pane .line-info {
    padding: 0 2rem 0 1.5rem;
    color: #ffffff;
}

#template-pane.cart-pane .line-thumb {
    position: relative;
    margin: 0;
    padding-top: 4rem;
    width: 4rem;
}

#template-pane.cart-pane .line-qty {
    position: absolute;
    top: 0.6rem;
    right: -0.5rem;
    z-index: 1;
    background-color: var(--bs-primary);
}

#template-pane.cart-pane .line-price {
    color: #a0a0a0;
}


/* User pane */

#template-pane.user-pane .btn {
    width: 228px;
}


/*------------------------------------------------------------
    =13= TEMPLATE BODY
------------------------------------------------------------*/

#template-body {
    padding-top: var(--height-header);
    background-color: var(--bs-light);
}

.promo-show:not(.no-header) #template-body {
    padding-top: calc(var(--height-header) + 3rem);
}

.home:not(.no-header) #template-body,
.no-header #template-body {
    padding-top: 0;
}


/*------------------------------------------------------------
    =14= TEMPLATE PAGE HEADER
------------------------------------------------------------*/

#template-page-header {
    color: #fff;
    text-align: center;
    background-color: var(--bs-dark);
    background-image: url(../img/bg-hero.jpg);
    background-position: 50%;
    background-size: cover;
}


/* #template-page-header .container,
#template-page-header .container-fluid {
    margin-top: var(--height-header);
} */

#template-page-header h1 {
    margin-bottom: 0;
    color: inherit;
}

#template-page-header p {
    margin-bottom: 0;
    color: #afafaf;
}


/* Map header */

#template-map-header,
#template-map-header .container-fluid {
    padding: 0;
}

#template-map-header #map-canvas {
    width: 100%;
    height: 100%;
    min-height: 30rem;
    background-color: var(--bs-secondary);
}


/*------------------------------------------------------------
    =15= TEMPLATE BREADCRUMBS
------------------------------------------------------------*/

#template-breadcrumbs {
    display: flex;
    align-items: center;
    padding: .2rem 1rem 0;
    height: 2.5rem;
    font-size: .9rem;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

#template-breadcrumbs .container {
    margin-top: 0;
    margin-bottom: 0;
}

#template-breadcrumbs li {
    display: inline-flex;
    list-style: none;
}

#template-breadcrumbs a {
    display: inline-block;
    max-width: 9rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #a0a0a0;
    text-decoration: none;
}

@media (min-width: 992px) {
    #template-breadcrumbs a {
        max-width: initial;
        overflow: initial;
        white-space: initial;
        text-overflow: initial;
    }
}

#template-breadcrumbs a:hover,
#template-breadcrumbs a:active,
#template-breadcrumbs a:focus {
    color: #606060;
    text-decoration: underline;
    text-decoration: none;
}

#template-breadcrumbs a.active {
    color: #cc0000 !important;
}

#template-breadcrumbs .crumb-divider {
    color: #afafaf;
    margin: 0 .6rem;
}

#template-breadcrumbs .crumb-divider:last-of-type {
    display: none;
}


/*------------------------------------------------------------
    =16= TEMPLATE SUBFOOTER
------------------------------------------------------------*/

#template-subfooter {
    padding: 2rem 0;
    color: #afafaf;
    background-color: var(--bs-dark);
    font-size: .8rem;
}

#template-subfooter h5 {
    color: #fff;
}

#template-subfooter .payment-methods .method-icon {
    height: 2.95rem;
}


/*------------------------------------------------------------
    =17= TEMPLATE FOOTER
------------------------------------------------------------*/

#template-footer {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3rem 0;
    background-color: var(--bs-dark);
}

#template-footer .container .row>div:not(:last-of-type) {
    border-right: 2px solid #1C1B1C;
}

#template-footer .container .row>div {
    padding: 0 2rem;
}

#template-footer .logo {
    display: block;
    width: 100px;
}

#template-footer h4 {
    margin: 0.5rem 0;
    color: #606060;
    font-family: 'Montserrat';
    font-size: .8rem;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 2px;
}

#template-footer p {
    font-size: 1.3rem;
    color: #afafaf;
}

#template-footer a:not(.btn) {
    color: var(--custom-1);
    text-decoration: none;
}

#template-footer a:hover,
#template-footer a:active,
#template-footer a:focus {
    color: #ffffff;
    text-decoration: none;
}

#template-footer .social-media {
    display: block;
}

#template-footer .social-media .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem 0 .2rem;
    width: auto;
    height: auto;
    font-size: 1.2rem;
    text-decoration: none;
}

#template-footer a.login {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    color: #808080;
}

#template-footer a.login:hover,
#template-footer a.login:active,
#template-footer a.login:focus {
    color: #fbaf40;
}


/*------------------------------------------------------------
    =18= TEMPLATE COOKIE POLICY
------------------------------------------------------------*/

#template-cookie-policy {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1022;
    padding: 2rem;
    width: 100%;
    max-width: 30rem;
    height: auto;
    color: #fff;
    background-color: var(--bs-dark);
    box-shadow: 0 0 10rem rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 10rem rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 10rem rgba(0, 0, 0, .5);
}

#template-cookie-policy .cookie-policy-header {
    margin-bottom: .5rem;
    font-family: var(--font-header);
    font-size: 1.2rem;
}


/*------------------------------------------------------------
    =19= LOGIN
------------------------------------------------------------*/

.logged-in-info {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: var(--bs-light);
    border: 1px solid var(--bs-borders);
    border-radius: var(--border-radius-sm);
}

.login #template-body {
    height: 100vh;
}

.login section,
.login .container-fluid,
.login .container-fluid .row,
.login .container-fluid .row>div {
    height: 100vh;
}

.login section {
    padding: 0;
    background-color: #fff;
}

.login .row>div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login .row>div:last-child {
    display: none;
    background-color: var(--bs-secondary);
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.webp .login .row>div:last-child {
    background-image: url(../img/bg/login.webp);
}

.no-webp .login .row>div:last-child {
    background-image: url(../img/bg/login.jpg);
}

@media (min-width: 992px) {
    .login .row>div:last-child {
        display: flex;
    }
}

.login form .logo {
    display: block;
    margin: 0 auto 2rem;
    width: 80%;
}

.login form {
    max-width: 100%;
    width: 20rem;
}


/*------------------------------------------------------------
    =20= MY ACCOUNT
------------------------------------------------------------*/

.my-account h1 {
    margin: 0;
    font-size: 1.75rem;
}

.my-account h1>i {
    margin-right: 1rem;
    color: var(--bs-primary);
}

.my-account .my-code {
    padding: 1rem 2rem;
    background-color: #ffffff;
    border-radius: var(--border-radius-md);
}


/*------------------------------------------------------------
    =21= HERO
------------------------------------------------------------*/

#hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8rem;
    padding-bottom: 8rem;
    width: 100%;
    color: #fff;
    text-align: center;
    background-color: var(--bs-dark-dark);
    background-image: url('../img/bg-hero.jpg');
    background-position: 50%;
    background-size: cover;
    border-bottom: .5rem solid var(--custom-1);
    box-shadow: inset 0 1000px rgb(1 20 63 / 60%);
    -webkit-box-shadow: inset 0 1000px rgb(1 20 63 / 60%);
    -moz-box-shadow: inset 0 1000px rgb(1 20 63 / 60%);
}

.home #hero {
    padding: calc(var(--height-header) + 6rem) 3rem 6rem;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

@media (min-width: 768px) {
    .home #hero {
        padding: calc(var(--height-header) + 12rem) 3rem 12rem;
    }
}

#hero img {
    width: 100%;
    max-width: 25rem;
}

#hero h1 {
    margin: 0;
    color: inherit;
    font-size: 3rem;
}


/*------------------------------------------------------------
    =22= HOMEPAGE
------------------------------------------------------------*/

.parallax {
    height: 30rem;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

.brewcon {
    margin: 0 .5rem;
    opacity: .3;
    pointer-events: none;
}

.brewcon.available {
    opacity: 1;
    pointer-events: initial;
}


/*------------------------------------------------------------
    =22= EVENTS
------------------------------------------------------------*/


/* Event cards. */

.card-event .card-body {
    position: relative;
}

.card-event .badge {
    position: absolute;
    left: 0;
    top: calc(-2rem - 1px);
    height: 2rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    border-radius: 0;
}


/*------------------------------------------------------------
    =22= WHERE TO FIND
------------------------------------------------------------*/

.card-wtf table {
    width: 100%;
}

.card-wtf table tr {
    border: 0;
}

.card-wtf table tr td:last-child {
    text-align: right;
}


/*------------------------------------------------------------
    =22= CONTACT
------------------------------------------------------------*/

#google-map {
    padding: 0;
}

#google-map #map-container {
    width: 100%;
    height: 450px;
    background-color: #e0e0e0;
}

#google-map .row>div {
    margin-top: -450px;
}


/*------------------------------------------------------------
    =22= PRODUCT / PRICE
------------------------------------------------------------*/

.product-price {
    display: flex;
    align-items: baseline;
    color: #606060;
    font-family: var(--font-header);
}

.product-price:not(.on-sale)>.price-normal {
    font-size: 1.2em;
    font-weight: 600;
}

.product-price.on-sale>.price-normal-strike {
    margin-right: .5rem;
    color: #a0a0a0;
    text-decoration: line-through;
}

.product-price>.price-sale {
    color: var(--bs-danger);
    font-size: 1.2em;
    font-weight: 700;
}

.product-price>.price-currency {
    font-size: .7em;
    margin-left: .2rem;
}


/*------------------------------------------------------------
    =23= PRODUCT / RATING
------------------------------------------------------------*/

.product-rating i.empty {
    color: var(--bs-borders);
}


/* .product-rating i.half {
    --fa-primary-color: gold;
    --fa-secondary-color: #efefef;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
} */

.product-rating i.full,
.product-rating i.half {
    color: gold;
}


/*------------------------------------------------------------
    =24= PRODUCT / QUANTITY INPUT
------------------------------------------------------------*/

.product-quantity {
    display: flex;
}

.product-quantity .input-group {
    margin-right: .5rem;
    max-width: 10rem;
}

.product-quantity .input-group>* {
    text-align: center;
    border: 0;
    background-color: var(--bs-light);
}

.product-quantity input:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.product-quantity .btn-spinner {
    padding: 0 1rem;
    height: 100%;
    font-size: 1.2rem;
    font-weight: 300;
}

.product-quantity .btn-spinner:hover,
.product-quantity .btn-spinner:active,
.product-quantity .btn-spinner:focus {
    box-shadow: inset 0 5rem 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 5rem 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: inset 0 5rem 0 rgba(0, 0, 0, .1);
}

.product-quantity input::-webkit-outer-spin-button,
.product-quantity input::-webkit-inner-spin-button {
    margin: 0;
    text-align: center;
    -webkit-appearance: none;
}

.product-quantity input[type=number] {}


/*------------------------------------------------------------
    =25= PRODUCT LIST
------------------------------------------------------------*/

#product-filters {
    display: flex;
    margin-left: auto;
}

#product-filters>* {
    margin-left: .5rem;
}

#product-filters button {
    width: 3rem;
    height: 3rem;
    color: #606060;
    background: transparent;
    border: 1px solid var(--bs-borders);
    border-radius: var(--border-radius-sm);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
}

#product-filters button:not(:last-child) {
    margin-right: .2rem;
}

#product-filters button:hover,
#product-filters button:active,
#product-filters button:focus {
    background-color: var(--bs-light);
}

.product {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.product .product-tags {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 1;
    display: flex;
}

.product .product-tags>.badge {
    margin-right: .3rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}

.product .product-tags>.badge>i {
    margin-right: .3rem;
}

.product .product-category {
    color: #afafaf;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.product .product-name {
    margin: 0;
    color: var(--bs-dark);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}


/* .product .product-shipping {
    color: var(--bs-gray);
    font-size: .8rem;
    letter-spacing: .1em;
} */

.product .product-rating {
    color: #d0d0d0;
    font-size: 0.8em;
}


/*------------------------------------------------------------
    =26= PRODUCT DETAILS
------------------------------------------------------------*/

.single-product .product-details {
    background-color: #ffffff;
}

@media (max-width: 991px) {
    .single-product .product-details {
        padding-top: 0;
    }
}


/* Product image gallery */

.single-product .product-gallery {
    margin: 0 -1.75rem;
    border-radius: none;
}

@media (min-width: 992px) {
    .single-product .product-gallery {
        margin: 0;
    }
}

.single-product .product-gallery .thumb {
    border-radius: var(--border-radius-md);
}

.single-product .carousel-indicators {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    background: #fff;
}

.single-product .carousel-indicators .thumb {
    display: flex;
    margin: 1rem .2rem;
    padding: 1rem;
    width: 6rem;
    height: 2rem;
    background-size: cover;
    border: 2px solid var(--bs-borders);
    border-radius: var(--border-radius-sm);
    transition: border .3s ease;
    -webkit-transition: border .3s ease;
    -moz-transition: border .3s ease;
}

@media (min-width: 768px) {
    .single-product .carousel-indicators .thumb {
        height: 4rem;
    }
}

@media (min-width: 992px) {
    .single-product .carousel-indicators .thumb {
        height: 5rem;
    }
}

@media (min-width: 1200px) {
    .single-product .carousel-indicators .thumb {
        height: 4rem;
    }
}

.single-product .carousel-indicators .thumb.active {
    border-color: var(--bs-info);
}


/* Product meta */

.single-product .product-meta {
    margin-top: 1.5rem;
}

.single-product .product-name {
    color: var(--bs-dark);
    font-family: var(--font-header);
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.single-product .product-rating {
    margin-bottom: 1rem;
}

.single-product .product-description {
    margin-bottom: 1.5rem;
}

.single-product .product-perks {
    margin-bottom: 1rem;
}


/* Promotional gift selection */

.single-product .promo-gifts .gift-option {
    position: relative;
    display: flex;
    align-items: center;
}

.single-product .promo-gifts .gift-option input {
    position: absolute;
    left: 1.5rem;
    z-index: 2;
}

.single-product .promo-gifts .gift-option label {
    margin-bottom: -2px;
    padding: 1rem 1.5rem 1rem 3.5rem;
    width: 100%;
    background-color: #f8f8f8;
    border: 2px solid #fff;
}

.single-product .promo-gifts .gift-option :checked~label {
    z-index: 1;
    background-color: #fff;
    border: 2px solid var(--bs-info);
    border-radius: var(--border-radius-sm);
}

.single-product .promo-gifts .gift-option>*:first-child {
    margin-right: 1rem;
}

.single-product .promo-gifts .twi-block>img.twi-icon {
    margin-top: auto;
    width: 4rem;
}

.single-product .promo-gifts .twi-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.single-product .promo-gifts .gift-name {
    color: var(--bs-dark);
    font-size: 1.2rem;
}

.single-product .promo-gifts .product-price {
    font-size: 1rem;
}

.single-product .product-add-to-cart {
    margin-bottom: 1rem;
}


/* Stock messages */

.stock-messages .message {
    position: relative;
    display: flex;
    margin: 2px 0;
    padding: .5rem .5em .5em 2.5rem;
    min-height: 2rem;
    color: #fff;
    background-color: var(--bs-info);
    border-radius: var(--border-radius-sm);
}

.stock-messages .message:last-of-type {
    margin-bottom: 1.5rem;
}

.stock-messages .message i {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 2rem;
    height: 100%;
    background-color: rgba(0, 0, 0, .15);
}

.stock-messages .message strong {
    margin-right: .4em;
}


/* Product perks */

.single-product .product-perks {
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
}

.single-product .product-perks .perk {
    display: flex;
    flex-direction: column;
    padding: 0 .5rem;
    font-size: .8rem;
    text-transform: uppercase;
    text-align: center;
}

.single-product .product-perks .perk>i {
    margin-bottom: .5rem;
    color: var(--bs-primary);
    font-size: 1.7rem;
}


/* Social media buttons */

.single-product .product-details .social-media {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}


/* Product Tabs */

.product-tabs {
    background-color: #ffffff;
}

.product-tabs .nav-link {
    position: relative;
    padding-bottom: 1rem;
    color: var(--bs-secondary);
    font-size: 1.3rem;
    font-weight: 600;
    border: 0;
    border-radius: 0;
}

.product-tabs .nav-link:hover,
.product-tabs .nav-link:active,
.product-tabs .nav-link:focus {
    color: var(--bs-dark);
}

.product-tabs .nav-link.active {
    color: var(--bs-dark);
    box-shadow: inset 0 -4px 0 var(--bs-primary);
    -webkit-box-shadow: inset 0 -4px 0 var(--bs-primary);
    -moz-box-shadow: inset 0 -4px 0 var(--bs-primary);
}

.product-tabs .nav-link.active:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    border-top: 10px solid var(--bs-primary);
    border-right: 10px solid transparent;
    border-bottom: 0;
    border-left: 10px solid transparent;
}

.product-reviews {
    background-color: var(--bs-light);
}


/*------------------------------------------------------------
    =27= CART
------------------------------------------------------------*/

.shopping-cart-items .cart-empty {
    padding: 4rem;
    font-size: 1.2rem;
    text-align: center;
    border: 1px solid var(--bs-borders);
}


/* Line Items */

.shopping-cart-items .shopping-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--bs-borders);
}

.shopping-cart-items .line-item {
    display: flex;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bs-borders);
}

.modal .shopping-cart-items .line-item {
    margin-bottom: 1rem;
    padding: 0 1rem 1rem;
}

.shopping-cart-items .line-item-thumb {
    position: relative;
    margin-right: 1.5rem;
    padding-top: 6rem;
    width: 6rem;
    background-size: 90%;
}

.shopping-cart-items .line-item-inner {
    flex: auto;
}

.shopping-cart-items .line-item-details {
    display: flex;
    align-items: center;
    padding-top: .5rem;
    width: 100%;
}

.shopping-cart-items .line-item-name {
    color: var(--bs-dark);
    font-size: 1.2rem;
    font-weight: 800;
}

.shopping-cart-items .line-item-variant {
    font-size: .9rem;
    font-style: italic;
}

.shopping-cart-items .product-quantity {
    margin-left: auto;
}

.shopping-cart-items .product-quantity.badge {
    position: absolute;
    top: .6rem;
    right: -.3rem;
    z-index: 1;
    background-color: var(--bs-dark);
}

.shopping-cart-items .line-item-value,
.shopping-cart-items .line-item-extras,
.shopping-cart-items .remove-line-item {
    margin-left: 4rem;
}

.shopping-cart-items .remove-line-item,
.shopping-cart-summary .remove-coupon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: -.1em;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--bs-danger);
    font-family: initial;
    font-weight: 600;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
    background: transparent;
    border: 0;
}

.shopping-cart-items .line-warranty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: .5rem 1rem;
    border: 2px dashed var(--bs-borders);
}


/* Cart Summary */

.shopping-cart-summary {
    background-color: var(--bs-light);
}

.shopping-cart-summary .summary-line {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.shopping-cart-summary .summary-value {
    margin-left: auto;
}

.shopping-cart-summary .remove-coupon {
    margin-right: auto;
    margin-left: .5rem;
}


/*------------------------------------------------------------
    =28= CHECKOUT
------------------------------------------------------------*/

body.checkout {
    background-color: #fff;
}

.checkout #checkout-form>.row>div:first-child>div {
    position: relative;
}

.checkout .shipmethod-empty {
    padding: 2rem 2rem 1.8rem;
    border: 1px solid var(--bs-borders);
    border-radius: var(--border-radius-sm);
}

.checkout .shipping-method-list.error {
    box-shadow: 0 0 0 2px var(--bs-danger);
    -webkit-box-shadow: 0 0 0 2px var(--bs-danger);
    -moz-box-shadow: 0 0 0 2px var(--bs-danger);
    border-radius: var(--border-radius-sm);
}

.checkout .shipping-method-list .radio {
    position: relative;
    display: flex;
    align-items: center;
    padding: .7rem 1rem .5rem;
    margin-bottom: -1px;
}

.checkout .shipping-method-list .radio input[type="radio"] {
    margin: 0 1rem 0 0;
}

.checkout .shipping-method-list .radio label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--bs-borders);
    cursor: pointer;
}

.checkout .shipping-method-list .radio:first-of-type label {
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.checkout .shipping-method-list .radio:last-of-type label {
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}

.checkout .shipping-method-list .radio :checked~label {
    z-index: 1;
    border: 1px solid var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
    -webkit-box-shadow: 0 0 0 1px var(--bs-primary);
    -moz-box-shadow: 0 0 0 1px var(--bs-primary);
}

.checkout .shipping-method-list .radio .option-price {
    margin-left: auto;
}

.checkout .payment-methods {
    margin-bottom: 1rem;
}

.checkout .checkout-review {
    margin-top: 0;
}

@media (min-width: 768px) {
    .checkout .checkout-review {
        box-shadow: 56rem 0 0 60rem var(--bs-light);
        -webkit-box-shadow: 56rem 0 0 60rem var(--bs-light);
        -moz-box-shadow: 56rem 0 0 60rem var(--bs-light);
    }
}


/* Checkout Form */

#checkout-form .line-item-thumb {
    position: relative;
    padding-top: 5rem;
    width: 5rem;
}

#checkout-form .line-item-qty {
    position: absolute;
    top: .6rem;
    right: -.3rem;
    z-index: 1;
    background-color: var(--bs-dark);
}

#checkout-form .line-item-name {
    font-size: 1rem;
}

#checkout-form .line-item-value {
    margin: 0;
}

#checkout-form .line-item-secondary {
    display: flex;
    justify-content: space-between;
    padding-bottom: .2rem;
}

#checkout-form .line-item-secondary .line-item-value {
    text-align: right;
}

#checkout-form .line-item-secondary .line-item-value small {
    font-size: .6em;
}

#checkout-form .grand-total-line {
    margin-top: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--bs-borders);
}

#checkout-form .grand-total-line>* {
    font-size: 1.4rem;
}


/*------------------------------------------------------------
    =29= BLOG LIST
------------------------------------------------------------*/

.blog-list .blog-post-date,
.blog-list .blog-post-author {
    margin-right: 1rem;
    font-size: .9rem;
}

.blog-list .thumb {
    position: relative;
}

.blog-list .blog-post-date {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem 1rem;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    background-color: var(--bs-primary);
}

.blog-list .blog-post-date-m,
.blog-list .blog-post-date-y {
    font-size: .8rem;
}

.blog-list .blog-post-date-d {
    font-size: 1.6rem;
}

.blog-list .blog-post-author {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 1.5rem;
    font-weight: 600;
}

.blog-list .blog-post-author .author-photo {
    display: block;
    margin-right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    background-size: cover;
    background-position: 50%;
    border-radius: 1000rem;
}


/*------------------------------------------------------------
    =30= BLOG SINGLE POST
------------------------------------------------------------*/

.single-post .post-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 30rem;
    color: #fff;
    background-position: 50%;
    background-size: cover;
    box-shadow: inset 0 0 0 50rem rgb(16 16 16 / 50%);
}

.single-post .post-header h1 {
    color: inherit;
}

.single-post .post-author {
    background: var(--bs-light);
}

@media (min-width: 998px) {
    .single-post .post-author .row {
        align-items: center;
    }
}

.single-post .post-author {
    background: var(--bs-light);
}

.single-post .post-author .thumb {
    width: 100%;
    border-radius: 100rem;
}

.single-post .post-author .author-name {
    color: var(--bs-dark);
    font-weight: 600;
    font-size: 1.4rem;
}

.single-post .post-content,
.single-post .post-comments {
    background-color: #ffffff;
}


/*------------------------------------------------------------
    =31= COMMENTS
------------------------------------------------------------*/


/* Parent  comments */

.comment {
    position: relative;
    margin-top: 2rem;
    padding-left: 5rem;
}

.comment .comment-meta {
    display: flex;
    align-items: baseline;
    margin-bottom: .5rem;
    padding-top: .5rem;
}

.comment .comment-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 4rem;
    background-color: var(--bs-light);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    border: .1rem solid var(--bs-borders);
    border-radius: 100rem;
}

.comment .comment-name {
    font-size: 1.2rem;
    font-weight: 600;
}

.comment .comment-date {
    margin-left: 1rem;
    font-size: .8rem;
}

.comment .comment-buttons {
    margin-top: 1rem;
}


/* Child comments */

.comment.reply {
    margin: 0 0 0 7rem;
    padding: 1rem 0 1rem 3rem;
    border-left: .1rem solid var(--bs-borders);
}

.comment.reply .comment-photo {
    top: 1rem;
    left: -2rem;
}