/*import css files*/
@import 'header.css';
@import 'homepage.css';
@import 'catalog.css';
@import 'checkout.css';
@import 'footer.css';

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}


/*TLS var*/
:root{
    /* colors */
    --primary-color: #0b042b;
    --secondary-color: #D30986;
    --third-color: #001B28;
    --accent-color: #82204A;
    --white-color: #FFFFFF;
    /* backgrounds */
    --bg-gr-i: linear-gradient(180deg, #FFFFFF 10%, #F3F2FF 70%);
    --bg-gr-ii: linear-gradient(273.2deg, #D30986 0%, #F2B4DA 42.5%, #F9E0F0 87.5%, #FFFFFF 100%);
    --bg-magnolia: #F3F2FF;
    --bg-lavander: #ECEBFF;
    --bg-white: #FFFFFF;
    /* shadow */
    --shadow-dark: 0 5px 10px -3px #0B042B2B;
    --shadow-med:0 0 15px 5px #0B042B2B;
    /*border color*/
    --border-dark: #0B042B2B;
    /* fonts */
    --font-family: 'Poppins';
    /* -- */
    --radius: 1rem;

}
html{
    font-size: 16px;
}

/*body*/
body{
    font-size: 1rem;
    font-family: var(--font-family);
    color: var(--third-color);
    line-height: 1.5;
}

body .page-wrapper{
    background: var(--bg-gr-i);
    background-repeat: no-repeat;
}
/*customs*/
body p{
    font-size: 1rem;
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--third-color);
    line-height: 1.5;
}
body h1, .h1{
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.5;
}
body h1 span.base{
    font-size: clamp(2rem, 4vw, 2.5rem);
}
body h2, .h2{
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.5;
}
body h3, .h3{
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.5;
}
body h4, .h4{
    font-size: clamp(1rem, 4vw, 1.6rem);
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.5;
}
body h5, .h5{
    font-size: clamp(1rem, 4vw, 1.3rem);
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.5;
}
body h6, .h6{
    font-size: 1rem;
    font-family: var(--font-family);
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1.5;
}
h2.tls-style{
    color: var(--bg-lavander);
    font-weight: 700;
    -webkit-text-stroke: 1px var(--primary-color);
    margin: 0;
}
body a{
    font-size: 1rem;
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--secondary-color);
    line-height: 1.5;
}
body a:active, body a:hover{
    color: var(--accent-color);
    text-decoration: none;
}
body a:visited{
    color: var(--secondary-color);
}
body a.action span {
    font-weight: 500;
}
body button.primary, 
body button.action.primary,
body button.action-primary,
body a.action.primary {
    background: var(--secondary-color);
    color: var(--white-color);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    padding: 0.25rem 1rem;
    border: none;
    box-shadow: var(--shadow-dark);
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    align-items: center;
}
body button.action.primary:focus,
body button.action-primary:focus, 
body button.action.primary:active, 
body button.action-primary:active {
    background: var(--accent-color);
    color: var(--white-color);
    border: 1px solid var(--accent-color);
}

body button.primary:hover, 
body button.action.primary:hover,
body button.action-primary:hover,
body a.action.primary:hover {
    background: var(--accent-color);
    color: var(--white-color);
    font-family: var(--font-family);
    font-size: 1rem;
    padding: 0.25rem 1rem;
    border: none;
    box-shadow: none;
    border-radius: var(--radius);
    transition: all 0.2s ease-in-out;
}
body button, 
body button.secondary, 
body a.button{
    background: var(--bg-white);
    color: var(--primary-color);
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0.5rem 2rem;
    border: 1px solid var(--secondary-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-dark);
}
body button:hover, 
body button.secondary:hover, 
body a.button:hover{
    background: var(--bg-magnolia);
    color: var(--primary-color);
    font-family: var(--font-family);
    font-size: 1rem;
    padding: 0.5rem 2rem;
    border: 1px solid var(--secondary-color);
    box-shadow: var(--shadow-dark);
    border-radius: var(--radius);
    text-decoration: none;
    box-shadow: none;
    transition: all 0.2s ease-in-out;
}
body button:focus, 
body button:active {
    background: var(--bg-white);
    border: 1px solid var(--secondary-color);
    color: var(--primary-color);
    outline: none;
}

ol ul.slick-dots li.slick-active button, ol ul.slick-dots li.slick-active button:active{
    background: var(--secondary-color);
}
ol ul.slick-dots li button:hover{
    background: var(--accent-color);
    padding: 0;
}

[data-content-type="row"][data-appearance="full-width"] > .row-full-width-inner{
    max-width: 1440px; 
}

@media (max-width: 768px){
    body button.secondary, 
    body a.button{
        padding: 0.25rem 2rem;
    }
    body button.secondary:hover, 
    body a.button:hover{
        padding: 0.25rem 2rem;
    }
}

/*forms*/
body select{
    font-size: 0.9rem;
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--third-color);
    line-height: 1.5;
    border: 1px solid rgba(11, 4, 43, 0.2);
    border-radius: 0.5rem;
}
body label{
    font-size: 1rem;
    font-family: var(--font-family);
    font-weight: 400;
    color: var(--third-color);
    line-height: 1.5;
}
body label input, 
body input, body form .field input, 
body form .field textarea {
    padding: 4px 16px;
    font-size: 0.9rem;
    border: 1px solid rgba(11, 4, 43, 0.2);
    font-family: var(--font-family);
    height: auto;
    border-radius: 0.5rem;
}

body input[type="text"],
body input[type="password"],
body input[type="url"],
body input[type="tel"],
body input[type="search"],
body input[type="number"],
body input[type*="date"],
body input[type="email"]{
    padding: 4px 16px;
    font-size: 0.9rem;
    border: 1px solid rgba(11, 4, 43, 0.2);
    font-family: var(--font-family);
    height: auto;
    border-radius: 0.5rem;
}


body ._keyfocus :focus, 
body input:not([disabled]):focus, 
body textarea:not([disabled]):focus, 
body select:not([disabled]):focus {
    box-shadow: var(--shadow-dark);
}

.login-container form .fieldset::after{
    font-size: 1rem;
}
form .field-tooltip .field-tooltip-content {
    border-radius: var(--radius);
    box-shadow: var(--shadow-med);
    background: var(--bg-white);
}
body form input[type="checkbox"] {
    margin: 0 5px 0 0;
    position: relative;
    top: 50%;
    left: 0%;
    transform: translate(0%, 0%);
}


/*uncateg-----------*/

body .block-collapsible-nav .item.current a, 
body .block-collapsible-nav .item.current > strong {
    border-color: var(--secondary-color);
    color: var(--primary-color);
    font-weight: 600;
}
body .block-collapsible-nav .item a {
    font-weight: 500;
}

body .block-collapsible-nav .content {
    background: var(--bg-magnolia);
    padding: 15px 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-dark);
}
body .block-collapsible-nav .item a:hover {
    background: var(--bg-lavander);
    color: var(--third-color);
}
body.account .legend > strong, 
body.account .legend > span, 
body.account .column.main .block:not(.widget) .block-title > strong, 
body.account .column.main .block:not(.widget) .block-title > span {
    font-size: 1.2rem;
    font-weight: 600;
}
body.account .column.main .block:not(.widget) .box-title > span{
    font-size: 1rem;
}
body .page-wrapper .abs-account-block-font-size, 
body .page-wrapper .block-addresses-list address, 
body .page-wrapper .box-billing-address .box-content, 
body .page-wrapper .box-shipping-address .box-content, 
body .page-wrapper .box-address-billing .box-content, 
body .page-wrapper .box-address-shipping .box-content, 
body .page-wrapper .box-information .box-content, 
body .page-wrapper .block-balance-giftcard .block-content, 
body .page-wrapper .block-reviews-dashboard .product-name {
        font-size: 1rem;
} 
body .page-wrapper .abs-button-l, 
body .page-wrapper #store-selector .form-continue .actions-toolbar .action.primary, 
body .page-wrapper .order-review-form .action.primary, 
body .page-wrapper .bundle-actions .action.primary.customize, 
body .page-wrapper .bundle-options-container .block-bundle-summary .box-tocart .action.primary, 
body .page-wrapper .box-tocart .action.tocart, 
body .page-wrapper .cart-summary .checkout-methods-items .action.primary.checkout, 
body .page-wrapper .block-minicart .block-content > .actions > .primary .action.primary, 
body .page-wrapper .methods-shipping .actions-toolbar .action.primary, 
body .page-wrapper .block-authentication .action.action-register, 
body .page-wrapper .block-authentication .action.action-login, 
body .page-wrapper .checkout-payment-method .payment-method-content > .actions-toolbar > .primary .action.primary, 
body .page-wrapper .form-address-edit .actions-toolbar .action.primary, 
body .page-wrapper .box-tocart .action.instant-purchase, 
body .page-wrapper .multicheckout .action.primary {
    line-height: 1.5rem;
    font-size: 1rem;
    padding: 0.25rem 1rem;
}
body .page-wrapper .abs-block-items-counter,
body .page-wrapper .block-compare .counter,
body .page-wrapper .block-wishlist .counter{
    font-size: 0.9rem;
}

/*messages----*/
body .page.messages .messages{
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 1rem;
}
body .page.messages .messages div.message,
body .columns div.message{
    background: var(--bg-gr-i);
    box-shadow: var(--shadow-dark);
    border-radius: var(--radius);
    font-size: 0.9rem;
    width: 100%;
    max-width: 1000px;
    color: var(--third-color);
}
body .messages div.message a{
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: 500;
}
body .messages div.message a:hover{
    color: var(--accent-color);
    text-decoration: none;
}

body .mage-error{
    font-size: 0.9rem;
}