:root{
    --white:#ffffff;
    --blue:#4e74b3;
    --very-light-blue:#7190C2;
    --light-blue:#6082BB;
    --dark-blue:#4668A1;
    --very-dark-blue:#3E5D8F;
    --red:#cc3f2d;
    --very-light-red:#DC6A53;
    --light-red:#D45540;
    --dark-red:#B63A29;
    --very-dark-red:#A33224;
    --grey:#d1cfd1;
    --very-light-grey:#DAD9DA;
    --light-grey:#D6D4D6;
    --dark-grey:#BCBABC;
    --very-dark-grey:#A7A6A7;
    --black:#272D30;
    --very-light-black:#525759;
    --light-black:#3D4245;
    --dark-black:#23292B;
    --very-dark-black:#1F2426;
    --green:#2dcc3f;
    --dim-x05:3px;
    --dim-x1:6px;
    --dim-x2:12px;
    --dim-x3:18px;
    --dim-x4:24px;
    --dim-x5:30px;
    --dim-x8:48px;
    --btn-dim:40px;
    /*--w-col-1:100%;
    --w-col-2:calc((100% / 2) - ((var(--gap) * 1) / 2));
    --w-col-3:calc((100% / 3) - ((var(--gap) * 2) / 3));
    --w-col-4:calc((100% / 4) - ((var(--gap) * 3) / 4));
    --w-col-5:calc((100% / 5) - ((var(--gap) * 4) / 5));
    --w-col-6:calc((100% / 6) - ((var(--gap) * 5) / 6));
    --very-light-blue:color-mix(in srgb, white 20%, var(--blue));
    --light-blue:color-mix(in srgb, white 10%, var(--blue));
    --dark-blue:color-mix(in srgb, black 10%, var(--blue));
    --very-dark-blue:color-mix(in srgb, black 20%, var(--blue));
    --very-light-red:color-mix(in srgb, white 20%, var(--red));
    --light-red:color-mix(in srgb, white 10%, var(--red));
    --dark-red:color-mix(in srgb, black 10%, var(--red));
    --very-dark-red:color-mix(in srgb, black 20%, var(--red));
    --very-light-grey:color-mix(in srgb, white 20%, var(--grey));
    --light-grey:color-mix(in srgb, white 10%, var(--grey));
    --dark-grey:color-mix(in srgb, black 10%, var(--grey));
    --very-dark-grey:color-mix(in srgb, black 20%, var(--grey));
    --very-light-black:color-mix(in srgb, white 20%, var(--black));
    --light-black:color-mix(in srgb, white 10%, var(--black));
    --dark-black:color-mix(in srgb, black 10%, var(--black));
    --very-dark-black:color-mix(in srgb, black 20%, var(--black));*/
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font:inherit;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}

input[type='color'],
input[type='datetime-local'],
input[type='email'],
input[type='file'],
input[type='hidden'],
input[type='image'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='range'],
input[type='reset'],
input[type='search'],
input[type='submit'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea{
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    -webkit-appearance:none;
    appearance:none;
    border-radius:0;
}

input,
button,
select,
textarea{
    font-size: 100%;
    font:inherit;
}

input,
button,
select{
    background:var(--white);
    border:1px solid var(--grey);
    border-radius:0;
    color:var(--black);
    display:inline-block;
    height:var(--btn-dim);
    line-height:calc(var(--btn-dim) - 2px);
    margin:0;
    padding:0 var(--dim-x2);
}

input[type=radio]:hover,
input[type=checkbox]:hover,
input[type=submit]:hover,
button:hover,
select:hover{
    cursor:pointer
}

input:hover,
button:hover,
select:hover,
textarea:hover{
    border:1px solid var(--grey);
    border-radius:0;
    box-shadow:none;
}

input:focus,
button:focus,
select:focus,
textarea:focus{
    border:1px solid var(--grey);
    border-radius:0;
    box-shadow:none;
}

input:active,
button:active,
select:active,
textarea:active{
    border:1px solidvar(--grey);
    border-radius:0;
    box-shadow:none;
}

input[type='radio'],
input[type='radio']:hover,
input[type='radio']:active,
input[type='radio']:focus,
input[type='checkbox'],
input[type='checkbox']:hover,
input[type='checkbox']:active,
input[type='checkbox']:focus{
    background:transparent;
    border:0;
    box-shadow:none;
    height:1rem;
    text-decoration:none;
    width:auto;
}

select option:hover{
    cursor:pointer;
}

strong{
    color:var(--blue);
}

img{
    max-width:100%;
    height:auto;
    vertical-align:middle;
    font-style:italic;
    background-repeat:no-repeat;
    background-size:cover;
    shape-margin:0.8rem;
}

html,
body{
    font-size:16px;
    line-height:1.5rem;
    cursor: default;
}

html{
    -webkit-overflow-scrolling:touch;
    overflow-x:hidden;
    overflow-y:scroll
}

body{
    min-height:100vh;
    font-family:'Didact Gothic', sans-serif;
    position:relative;
    color: var(--black);
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-weight:400;
    line-height:1em;
    text-wrap:balance;
}

h1{
    font-size:3rem;
}

h2{
    font-size:2rem;
}

h3{
    font-size:1.5rem;
}

h4,
h5,
h6{
    font-size:1rem;
}

p{
    text-wrap:pretty;
    margin:0 0 1.5em 0
}

li{
    text-wrap:pretty;
}

a,
a:hover{
    text-decoration:none;
}

.font-tiny,
.font-small,
.font-medium,
.font-medium-large,
.font-large,
.font-xlarge,
.font-xxlarge,
.font-xxxlarge,
.font-jumbo{
    line-height:1em;
}

.font-tiny{
    font-size:0.6rem!important;
}

.font-small{
    font-size:0.8rem!important;
}

.font-medium{
    font-size:1rem!important;
}

.font-medium-large{
    font-size:1.125rem!important;
}

.font-large{
    font-size:1.5rem!important;
}

.font-xlarge{
    font-size:2rem!important;
}

.font-xxlarge{
    font-size:2.5rem!important;
}

.font-xxxlarge{
    font-size:3rem!important;
}

.font-jumbo{
    font-size:4rem!important;
}

.font-awsome{
    font-family:FontAwesome;
}

.animate-left{
    position:relative;
    animation:animateleft .4s
}

@keyframes animateleft{
    from{
        left:-300px;opacity:0
    }

    to{
        left:0;opacity:1
    }
}

.full-width{
    width:100%;
}

*{
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    border-style:none;
}

table {
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.responsive-table{
    overflow-x: auto;
    margin:var(--dim-x2) 0 var(--dim-x4) 0;
}

.responsive-table table{
    width:100%;
}

.responsive-table tr:first-child{
    border-bottom:1px solid var(--grey)
}

.responsive-table td{
    white-space:nowrap;
    height:var(--btn-dim);
    padding:0 var(--dim-x2);
    width:1px;
}

.responsive-table th{
    font-size:1.125rem;
    line-height:1em;
    height:var(--btn-dim);
    padding:0 var(--dim-x2);
    letter-spacing:1px;
    color:var(--blue)
}

.responsive-table input[type="submit"]{
    border:none;
    padding:0;
    margin:0;
    color:var(--blue);
}

.responsive-table input[type="submit"]:hover{
    cursor:pointer;
    color:var(--dark-blue);
}
.responsive-table select{
    padding:0 var(--dim-x2);
    width:var(--dim-x8);
    height:var(--dim-x4);
    line-height:calc(var(--dim-x4) - 2px);
    text-align:center
}

#page-blocker{
    display:none;
    z-index:9999;
    background:url(https://vedicsystem.com/repository/css/spin.gif) no-repeat center;
    background-size:75px;
    text-align:center;
    min-width:100%;
    min-height:100%;
    position:absolute
}

.hpslide{
    display:none
}

input[type="submit"],
input[type="button"],
input[type="text"],
input[type="password"],
input[type="email"],
textarea{
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    -o-appearance:none;
    appearance:none;
    border-radius:0;
}

select{
    border-radius:0;
    padding:0 var(--dim-x2);
}

textarea{
    border-radius:0;
    padding:var(--dim-x2);
    border:1px solid var(--grey);
    resize:none;
    display:block;
    width:100%
}

.link,
.link:hover,
.link-red,
.link-red:hover,
.link-red-to-white,
.link-red-to-white:hover,
.link-blue,
.link-blue:hover,
.link-white,
.link-white:hover,
.link-grey,
.link-grey:hover{
    text-decoration:none;
    transition:color .125s
}

.link{
    color:var(--blue);
}

.link:hover{
    color:var(--dark-blue);
}

.link-red{
    color:var(--red);
}

.link-red:hover{
    color:var(--dark-red);
}

.link-red-to-white{
    color:var(--red);
}

.link-red-to-white:hover{
    color:var(--white);
}

.link-blue{
    color:var(--blue);
}

.link-blue:hover{
    color:var(--dark-blue);
}

.link-white{
    color:var(--white);
}

.link-white:hover{
    color:var(--red);
}

.link-grey{
    color:var(--grey);
}

.button{
    color:var(--white);
    background-color:var(--blue);
    border:none;
    font-weight:400;
    transition:background .125s;
    padding:0 var(--dim-x4);
    height:var(--btn-dim);
    line-height:var(--btn-dim);
    display:block;
    width:max-content;
    text-align:center;
}

.button:hover{
    color:var(--white);
    background-color:var(--dark-blue);
    border:none;
    cursor:pointer
}

.button-red{
    color:var(--white);
    background-color:var(--red);
    border:none;
    font-weight:400;
    transition:background .125s;
    padding:0 var(--dim-x4);
    height:var(--btn-dim);
    line-height:var(--btn-dim);
    display:block;
    width:max-content;
    text-align:center;
}

.button-red:hover{
    color:var(--white);
    background-color:var(--dark-red);
    border:none;
    cursor:pointer
}

.button-white{
    color:var(--blue);
    background-color:var(--white);
    border:1px solid var(--blue);
    font-weight:400;
    transition:background .125s;
    padding:0 var(--dim-x4);
    height:var(--btn-dim);
    line-height:calc(var(--btn-dim) - 2px);
    display:block;
    width:max-content;
    text-align:center;
}

.button-white:hover{
    color:var(--white);
    background-color:var(--dark-blue);
    border:none;
    line-height:var(--btn-dim);
    cursor:pointer
}

@media (max-width:480px){
    .button,
    .button-white{
        width:100%;
    }
}

.button,
.button-red,
.button-white{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/*NEW*/

.form-label{
    margin:0 0 var(--dim-x1) 0;
    color:var(--grey)
}

.form-list input,
.form-list select{
    display:block;
    width:100%;
}

.form-list input,
.form-list select
{
    margin:0 0 var(--dim-x2) 0!important;
}

.form-list > *:last-child
{
    margin:0!important
}

.sort-container{
    --gap:var(--dim-x4);
    --w-col-1:100%;
    --w-col-2:calc((100% / 2) - ((var(--gap) * 1) / 2));

    display:flex;
    gap:var(--dim-x2) var(--gap);
    margin:0 0 var(--dim-x4) 0
}

@media (max-width:480px){
    .sort-container{
        flex-direction:column;
    }
}

.sort-element{
    width:var(--w-col-2);
}

@media (max-width:480px){
    .sort-element{
        width:var(--w-col-1);
    }
}

.sort-element select{
    width:100%
}

.contact-form input:not(:last-child){
    width:100%;
    margin:0 0 var(--dim-x2) 0
}

.multiple-buttons-container{
    margin:var(--dim-x2) 0 0 0;
    display:flex;
    flex-direction:row;
    gap:var(--dim-x2) var(--dim-x4);
    justify-content: space-between;
}

@media (max-width:480px){
    .multiple-buttons-container{
        flex-direction:column;
    }

    .multiple-buttons-container .button,
    .multiple-buttons-container .button-red{
        width:100%;
    }
}

.form-product{
    display:flex;
    justify-content: flex-end;
}

@media (max-width:480px){
    .form-product input[type="submit"]{
        width:100%
    }
}

.width-full{
    width:100%!important;
}

.width-auto {
    width:auto!important;

}

.prompt-red,
.prompt-grey,
.prompt-blue{
    vertical-align: top;
    padding:0 var(--dim-x4);
    height:var(--btn-dim);
    line-height:calc(var(--btn-dim) - 2px);
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display:block;
    width:max-content;
}

.prompt-red{
    color:var(--red);
    border:1px solid var(--red);
}

.prompt-grey{
    color:var(--grey);
    border:1px solid var(--grey);
}

.prompt-blue{
    color:var(--blue);
    border:1px solid var(--blue);
}

@media (max-width:480px){
    .prompt-red,
    .prompt-grey,
    .prompt-blue{
        width:100%;
    }
}

.flex{
    display:flex!important;
}

.flex-column{
    display:flex!important;
    flex-direction:column!important;
}

.flex-break {
    flex-basis: 100%;
    content: '';
    height: 0;
}

.grid-equal-colums{
    margin:var(--dim-x4) 0 0 0;
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap:var(--dim-x4);
}

@media (max-width:480px){
    .grid-equal-colums{
        display:flex;
        flex-direction:column;
        gap:0;
    }
}

.ellipsis{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.line-separator{
    height:1px;
    background-color:var(--grey);
    margin:var(--dim-x2) 0;
}

.scroll-top-button{
    display:none;
    padding:0;
    position:fixed;
    bottom:var(--dim-x2);
    right:var(--dim-x2);
    z-index:9997;
    width:36px;
    height:36px;
    line-height:36px;
    color:var(--white);
    background-color:rgba(0,0,0,0.8);
    cursor:pointer;
    border:none!important;
    transition:background .125s;
}

.scroll-top-button:hover{
    background-color:var(--dark-black);
}

.author-container{
    margin-bottom:var(--dim-x4);
    display:flex;
    gap:var(--dim-x4);
    width:100%
}

@media (max-width:480px){
    .author-container{
        flex-direction:column;
    }
}

.author-container p{
    margin-bottom:var(--dim-x2);
}

.author-container p:last-child{
    margin:0;
}

.author-image-wrapper{
    width:240px;
    /*aspect-ratio: 1/1;*/
}

@media (max-width:480px){
    .author-image-wrapper{
        width:100%;
    }
}

.author-image-wrapper img{
    display: block;
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.picture-description-container{
    --gap:var(--dim-x2);
    --w-col-3:calc((100% / 3) - ((var(--gap) * 2) / 3));
    --w-col-4:calc((100% / 4) - ((var(--gap) * 3) / 4));
    --w-col-6:calc((100% / 6) - ((var(--gap) * 5) / 6));

    display:grid;
    grid-template-columns: repeat(auto-fill, var(--w-col-4));
    gap:var(--gap);
    margin-top:var(--dim-x2)
}

@media (max-width:480px){
    .picture-description-container{
        grid-template-columns: repeat(auto-fill, var(--w-col-3));
    }
}

@media (min-width:1025px){
    .picture-description-container{
        grid-template-columns: repeat(auto-fill, var(--w-col-6));
    }
}

.picture-description-element{
    aspect-ratio: 4/3;
    border:1px solid var(--grey);
    padding:5px;
}

.picture-description-element img{
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
    cursor:pointer
}

.modal-language-wrapper{
    display:none;
    justify-content: center;
    align-items: center;
    position:fixed;
    transition:0.5s;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.25);
    z-index:9998;
    padding:var(--dim-x4);
}

.picture-wrapper{
    cursor:zoom-in;
}

.picture-wrapper img{
    width:100%;
    height:100%;
    display: block;
    object-fit: cover;
}

.modal-full-size-image-wrapper{
    display:none;
    justify-content: center;
    align-items: center;
    position:fixed;
    transition:0.5s;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#000;
    z-index:9997;
    background-repeat: no-repeat;
    background-position: center;
    cursor:zoom-out;
}

.modal-content-wrapper{
    display:flex;
    max-width:100%;
    max-height:100%;
    overflow:hidden;
}

.modal-content{
    background-color:transparent;
    max-width:100%;
    max-height:100%;
    object-fit: contain;
}

.modal-language-select-container{
    background-color:var(--white);
    border:1px solid var(--grey);
    max-width:100%;
    max-height:100%;
    padding:var(--dim-x4);
    display:flex;
    flex-flow:column;
    justify-content:flex-start;
}

.navigation-select-language{
    align-self: center;
    flex:1;
    text-align: right
}

.modal-menu-wrapper{
    display:none;
    justify-content: center;
    align-items: center;
    position:fixed;
    transition:0.5s;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.25);
    z-index:9998;
    padding:var(--dim-x4);
}

.modal-menu-select-container{
    background-color:var(--white);
    border:1px solid var(--grey);
    max-width:100%;
    max-height:100%;
    padding:var(--dim-x4);
    display:flex;
    flex-flow:column;
    justify-content:flex-start;
}

.text-center{
    text-align: center!important; }

.text-left{
    text-align: left!important;
}

.text-right{
    text-align: right!important;
}

.color-grey{
    color:var(--grey);
}

.color-blue{
    color:var(--blue);
}

.color-red{
    color:var(--red);
}

.color-black{
    color:var(--black);
}

.paragraph-list p{
    margin:0 0 var(--dim-x2) 0;
}

.paragraph-list p:last-child{
    margin:0!important;
}

.paragraph-list ul{
    margin:0 0 var(--dim-x2) 0;
}

.paragraph-list li{
    margin:0 0 0 var(--dim-x5)
}

.pagination-container{
    display: flex;
    gap:0 var(--dim-x1);
    justify-content: flex-end;
    margin:0 0 var(--dim-x4) 0;
}

.pagination-container:nth-of-type(1){
    justify-content: flex-start;
}

@media (max-width:480px){
    .pagination-container{
        justify-content: center;
    }
}

.pagination-element{
    border:1px solid var(--blue);
    height:40px;
    min-width:40px;
    line-height:38px;
    display:block;
    color:var(--blue);
    text-align:center
}

a.pagination-element:hover {
    border:1px solid var(--dark-blue);
    background-color: var(--dark-blue);
    color:var(--white)
}

.pagination-element-current{
    border:1px solid var(--dark-blue);
    height:40px;
    min-width:40px;
    line-height:38px;
    display:block;
    background-color: var(--dark-blue);
    color:var(--white);
    text-align:center
}

.search-item-wrapper{
    display:flex;
    margin-bottom:var(--dim-x2);
    gap:var(--dim-x2)
}

.search-item-wrapper .button{
    font-family:FontAwesome;
    min-width:var(--btn-dim);
    padding:0;
    min-width:40px;
    width:40px;
}

.search-item-wrapper input[type="text"],
.search-item-wrapper input[type="number"]{
    width:100%;
}

.master-container{
    padding-bottom:var(--dim-x2);
    margin:0 auto;
    max-width:1248px;
    padding:0 var(--dim-x4);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header-top-container{
    display:flex;
    flex-wrap:wrap-reverse;
    justify-content: space-between;
    gap:var(--dim-x4) var(--dim-x8);
    padding:var(--dim-x4) 0;
}

@media (max-width:480px){
    .header-top-container{

    }
}

.header-top-logo{
    align-self: center;
}

.header-top-info{
    display:flex;
    flex:1;
    flex-direction:column;
    gap:var(--dim-x2);
}

.header-bottom-container{
    display:flex;
    justify-content: space-between;
    gap:var(--dim-x2) 0;
    padding:var(--dim-x2) 0;
    border:1px solid var(--grey);
    border-left:none;
    border-right:none;
}

@media (max-width:480px){
    .header-bottom-container{
        flex-direction:column;
    }
}

.header-bottom-search-container{
    display:flex;
    flex-wrap:wrap;
    text-align: left;
    padding-left:0;
}

.header-bottom-search-input {
    white-space:nowrap;
    margin:0 var(--dim-x2) 0 0;
}

@media (max-width:480px){
    .header-bottom-search-input{
        width:100%;
        margin:0;
    }
}

.header-bottom-search-input input[type="text"] {
    border:1px solid var(--grey);
    height:32px;
    line-height:30px;
    display:block;
    margin:0 var(--dim-x2) 0 0;
    padding:0 var(--dim-x2)
}

@media (max-width:480px){
    .header-bottom-search-input input{
        width:100%;
    }
}

.header-bottom-search-input input[type="submit"] {
    font-family:FontAwesome;
    width:32px;
    min-width:32px;
    height:32px;
    line-height:30px;
    padding:0;
    display:block;
}

.header-bottom-search-advanced-search{
    display:block;
    height:32px;
    line-height:32px;
    margin:0 0 0 var(--dim-x2);
}

.header-bottom-search-advanced-search a{
    letter-spacing:1px;
}

.header-bottom-cart-container{
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-end;
    text-align: right;
    white-space:nowrap;
    letter-spacing:1px;
}

@media (max-width:768px){
    .header-bottom-cart-container{
        flex-direction:column
    }
}

.header-bottom-cart-container a{
    display:flex;
    justify-content: flex-end;
    height:32px;
    line-height:32px;
}

.header-bottom-cart-item-count{
    margin-left:var(--dim-x2);
    border:1px solid;
    border-color:currentColor;
    height:32px;
    width:32px;
    line-height:30px;
    text-align:center;
    border-radius:50%
}

.header-bottom-cart-amount{
    margin-left:var(--dim-x4);
    height:32px;
    line-height:32px;
}

.main-container{
    background-color:var(--white)!important;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    display:flex;
    flex-direction:column;
    gap:0 var(--dim-x4);
    width:100%;
    max-width:100%;
    flex:1;
}

.main-hero{
    max-width:100%;
}

.hero-container{
    border:1px solid var(--grey);
    min-height:312px;
    padding:var(--dim-x2);
    overflow:hidden;
    margin:0 0 var(--dim-x4) 0

}

.hero-content{
    display:flex;
    flex-direction:row;
    gap:var(--dim-x2);
}

@media (max-width:768px){
    .hero-content{
        display:flex;
        flex-direction:column;

    }
}

.hero-info-container{
    display:flex;
    flex-direction:row;
    flex:1;
    gap:var(--dim-x2);
}

@media (max-width:480px){
    .hero-info-container{
        flex-direction:column;
    }
}

.hero-image-wrapper{
    height: 286px;
    /*missing*/
}

@media (max-width:768px){
    .hero-image-wrapper{
        height:auto;
        width:100%;
        aspect-ratio: 4/3;
    }
}

.hero-image-wrapper img{
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.hero-info-wrapper{
    display:flex;
    flex-direction:column;
    flex:1;
}

@media (max-width:480px){
    .hero-info-wrapper{
        display:none;
    }
}

.hero-info-wrapper-mobile{
    display:none;
}

@media (max-width:480px){
    .hero-info-wrapper-mobile{
        display:flex;
        flex-direction:column;
        flex:1;
        text-align: left;
    }
}

.product-price-wrapper{
    display:flex;
    flex-direction:column;
    text-align: right;
}

@media (max-width:480px){
    .product-price-wrapper{
        text-align: right;
    }
}

.product-price-sale{
    display:inline-block;
    margin-bottom:var(--dim-x2);
    padding:0 var(--dim-x2);
    height:var(--btn-dim);
    line-height:var(--btn-dim);
    background-color:var(--red);
    color:var(--white);
}

.product-buttons-wrapper{
    display:flex;
    gap:var(--dim-x2);
    justify-content: space-between;
}

@media (max-width:480px){
    .product-buttons-wrapper{
        flex-direction: column;
    }
}

.price-sale{
    display:inline-block;
    margin-bottom:var(--dim-x1);
    padding:var(--dim-x1);
    background-color:var(--red);
    color:var(--white);
}

.price-discounted {
  position: relative;
  display: inline-block;
  margin:0;
  color:var(--red);
}

.price-discounted::after {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 100%;
  border-bottom: solid 1px var(--red);
}

.navigation{
    margin:var(--dim-x2) 0;
    display:flex;
    justify-content: space-between;
    gap:var(--dim-x2) var(--dim-x4);
}

@media (max-width:768px){
    .navigation{
        flex-direction: column-reverse;
    }
}

.navigation-main-menu{
    display: none;
    font-size:2rem;
    line-height: 1em;
    color:var(--blue);
    letter-spacing:2px;
}

@media (max-width:768px){
    .navigation-main-menu{
        display: block;
        cursor:pointer
    }
}

.navigation-main-menu-select-language{
    display:flex;
    justify-content: flex-end;
    flex:1;
    gap:0 var(--dim-x2);
}

@media (max-width:768px){
    .navigation-main-menu-select-language{
        justify-content: space-between;
        flex-wrap:wrap-reverse;
    }
}

.select-language{
    cursor:pointer
}

.main-menu{

}

@media (max-width:768px){
    .main-menu{
        display:none;
    }
}

.main-menu-header{
    font-size:2rem;
    line-height:1em;
    padding:var(--dim-x2) 0;
    margin-bottom:var(--dim-x2);
    letter-spacing:2px;
    display:flex;
    gap:var(--dim-x4);
    color:var(--blue)
}

@media (max-width:768px){
    .main-menu-header{
        padding:0;
    }
}

.contact-detail-header{
    font-size: 2rem;
    line-height: 1em;
    padding: var(--dim-x2) 0;
    margin-bottom: var(--dim-x2);
    letter-spacing: 2px;
    color:var(--blue);
    display: table-caption;
}

@media (max-width:768px){
    .contact-detail-header{
        display:block;
    }
}

.contact-detail-header:after{
    content: "\a";
    white-space: pre;
}

.main-menu-button{
    display:block;
    align-self: center;
    font-size:1rem;
    line-height:1em;
}

@media (min-width:769px){
    .main-menu-button{
        display:none;
    }
}

.main-menu-button button{
    display:block;
    height:var(--dim-x4)!important;
    line-height:var(--dim-x4)!important;
    padding:0;
    background-color:var(--white)!important
}

.main-menu-container{
    margin-bottom:var(--dim-x4);
}

@media (max-width:768px){
    .main-menu-container{
        display:none
    }
}

@media (min-width:769px){
    .main-menu-container{
        display:block;
    }
}

.main-menu-container a{
    display:block;
}

.main-menu-container a:not(:last-child){
    margin:0 0 var(--dim-x1) 0;
}

.main-menu-link-parrent{
    font-size:1.5rem;
    line-height:1em;
    letter-spacing:1px;
}

.extended-menu-wrapper{
    display:none;
}

.main-wrapper{
    display:flex;
    flex-direction:row;
    gap:var(--dim-x8);
    width:100%;
}

@media (max-width:768px){
    .main-wrapper{
        flex-direction:column;
        gap:0;
    }
}

.main-content{
    flex:1;
}

.sign-in-container{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 2fr 1fr;
    gap:24px;
}

@media (max-width:480px){
    .sign-in-container{
        display: flex;
        flex-direction:column;
    }
}

.sign-in-main-element{
    display: flex;
    flex-direction:column;
    gap:24px;
}

.sign-in-element p{
    margin:0 0 var(--dim-x2) 0
}

.sign-in-element p:last-child{
    margin:0
}

.form select,
.form input{
    width:100%;
    margin:0 0 var(--dim-x2) 0
}

.form input[type="radio"],
.form input[type="checkbox"],
.form input[type="submit"]{
    width:auto!important;
    margin:0;
}

.form .multiple-buttons-container{
    margin:0;
}

.main-header{
    font-size:2rem;
    line-height:1em;
    margin:0 auto var(--dim-x4) auto;
    color:var(--blue);
    padding:var(--dim-x2) 0;
    border-top:1px solid var(--grey);
    border-bottom:1px solid var(--grey);
    letter-spacing:2px;
    text-align: left;
    border-image:linear-gradient(to left, rgba(255, 255, 255, 1) 1%, rgba(221, 221, 221, 1) 100%);
    border-image-slice: 1;
}

.product-list-container{
    --gap:var(--dim-x4);
    --w-col-1:100%;
    --w-col-2:calc((100% / 2) - ((var(--gap) * 1) / 2));
    --w-col-3:calc((100% / 3) - ((var(--gap) * 2) / 3));

    display:flex;
    flex-wrap:wrap;
    gap:var(--gap);
    margin:0 0 var(--dim-x4) 0
}

.product-list-item{
    width:100%;
    display:flex;
    flex-direction: column;
}

@media (min-width:481px){
    .product-list-item{
        width:var(--w-col-2);
    }

}

@media (max-width:768px) and (min-width:481px){
    .product-list-item:nth-child(3n){
        width:var(--w-col-1);
    }
}

@media (min-width:769px){
    .product-list-item{
        width:var(--w-col-3);
    }
}

.product-list-item-wrapper{
    flex:1;
}

.product-list-item-wrapper a{
    display:block;
    width: 100%;
    aspect-ratio: 4/3;
}

.product-list-item-wrapper img{
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.product-list-item-button-wrapper{
    display:flex;
    flex-direction:column;
}

.product-list-item-button-wrapper *{
    align-self: flex-end;
}

.product-list-item-info{
    margin:var(--dim-x2) 0 var(--dim-x2) 0;
    color:var(--black);
    text-align:center;
}

.product-list-item-info div:not(:last-child) {
    margin-bottom:var(--dim-x1);
}

.product-info-label{
    color:var(--blue);
    letter-spacing:1px;
}

.product-list-item-info-price-wrapper{
    margin:0 0 var(--dim-x2) 0;
}

.product-list-item-info-price-label{
    font-size:1.5rem!important;
    line-height:1em;
    letter-spacing:1px;
}

.product-list-item-info-price{
    font-size:1.5rem!important;
    line-height:1em;
    white-space:nowrap;
}

.product-list-item-info-price span:not(:nth-last-of-type(-n+2)){
    font-size:2rem!important;
    line-height:1em;
}

.product-description p:not(:last-child){
    margin:0 0 var(--dim-x1) 0;
}

.product-description p:last-child{
    margin:0;
}

.product-colors-prompt{
     font-size:0.8rem;
     line-height:1.5em;
     color:var(--grey);
     margin:var(--dim-x4) 0;
}

.checkout-summary-info{

}

.checkout-summary-info p:not(:last-child){
    margin:0 0 var(--dim-x1) 0;
}

.checkout-summary-info p:last-child{
    margin:0;
}

.checkout-container{
    display:flex;
    flex-direction:column;
    gap:var(--dim-x4)
}

.checkout-form-container{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap:var(--dim-x4);
}

@media (max-width:480px){
    .checkout-form-container{
        display:flex;
        flex-direction:column;
    }
}

.checkout-form-container-inner{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap:var(--dim-x4);
}

@media (max-width:768px){
    .checkout-form-container-inner{
        display:flex;
        flex-direction:column;
    }
}

.checkout-form-item{
    display:flex;
    flex-direction:column;
}

@media (max-width:480px){
    .checkout-form-item{
        width:100%
    }
}

.checkout-form-item .button{
    margin-top:var(--dim-x2);
}

.checkout-form-item textarea{
    height:100%;
}

.checkout-form-item select{
    margin:var(--dim-x1) 0;
}
.checkout-form-item select,
.checkout-form-item input[type="submit"]{
    width:100%
}

.radio-container{
    display:flex;
    align-items: center;
}

.radio-label{
    padding:0 0 0 var(--dim-x2);
}

.checkbox-container{
    display:flex;
    align-items: flex-start;
    margin:0 0 var(--dim-x2) 0;
}

.checkbox-container:nth-last-of-type(2){
    margin:0 0 var(--dim-x4) 0;
}

.checkbox-container input[type="checkbox"]{
    width:auto;
    margin:0;
    height:1.5rem;
    line-height:1.5rem;
}

.checkbox-label{
    padding:0 0 0 var(--dim-x2);
    flex:1;
}

.order-details-container{
    margin:var(--dim-x4) 0 0 0;
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap:var(--dim-x4);
}

@media (max-width:480px){
    .order-details-container{
        display:flex;
        flex-direction:column
    }
}

.order-details-container p{
    margin:0 0 var(--dim-x1) 0;
}

.order-details-container .font-medium-large:first-child{
    margin:0 0 var(--dim-x1) 0;
}

.order-details-container .font-medium-large:not(:first-child){
    margin:var(--dim-x4) 0 var(--dim-x1) 0;
}

.order-details-element p{
    margin:0;
}

.footer-container{
    margin:var(--dim-x4) 0;
}

.footer-helpline{
    padding:0 0 var(--dim-x2) 0;
    border-bottom:1px solid var(--grey);
    color:var(--blue)
}

.footer-info-container{
    --gap:var(--dim-x4);
    --w-col-1:100%;
    --w-col-2:calc((100% / 2) - ((var(--gap) * 1) / 2));
    --w-col-4:calc((100% / 4) - ((var(--gap) * 3) / 4));

    display:flex;
    flex-wrap:wrap;
    gap:var(--gap);
    margin:var(--dim-x4) 0
}

.footer-info-item{
    width:var(--w-col-1);
    text-align:center
}

@media (min-width:481px){
    .footer-info-item{
        width:var(--w-col-2);
        text-align: left
    }
}

@media (min-width:769px){
    .footer-info-item{
        width:var(--w-col-4);
        text-align: left
    }
}

.footer-info-item a{
    display:block;
}

.footer-info-item a:not(:last-child){
    margin:0 0 var(--dim-x1) 0;
}

.footer-info-item-header{
    font-size:1.5rem!important;
    line-height:1em;
    margin:0 0 var(--dim-x4) 0;
}

.footer-info-item-logo-wrapper{
    display:flex;
    flex:1;
    justify-content: center;
    gap:var(--dim-x2);
}

@media (min-width:481px){
    .footer-info-item-logo-wrapper{
        justify-content: flex-start;
    }
}

.footer-info-item-logo-wrapper a{
    margin:0;
}

.footer-legal-info{
    text-align:center;
    color:var(--grey);
    font-size:0.8rem;
    line-height:1.5em;
    margin:var(--dim-x2) 0;
}

.footer-legal-info p{
    margin:0;
}

.footer-copyright-container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:var(--dim-x05) var(--dim-x4);
    font-size:0.8rem!important;
    justify-content: center;
}

@media (max-width:360px){
    .footer-copyright-container{
        flex-direction:column;
        text-align: center;
    }
}

.display-info-container{
    bottom:0;
    font-size:.7rem;
    left:0;
    overflow:hidden;
    padding:var(--dim-x4);
    position:fixed;
    width:300px;
    z-index:999;
}
.display-info-inner-container{
    background:var(--black);
    border:1px solid var(--black);
    border-radius:2px;
    box-shadow:0 0 var(--dim-x4) 1px var(--black);
    color:var(--green);
    font-family:'Lucida Console','Lucida Sans Typewriter',Monaco,'Bitstream Vera Sans Mono',monospace;
    line-height:12px;
    opacity:.75;
    overflow:hidden;
    padding:var(--dim-x2);
}
.display-info-sessions{
    color:var(--red);
    margin-bottom:var(--dim-x1);
}
.display-info-sript-url{
    color:var(--red);
    margin:var(--dim-x1) 0;
}
.display-info-data{
    color:var(--blue);
}