@charset "UTF-8";
/*
Theme Name: Cosmetic Ecommerce Store
Author: TheMagnifico52
Theme URI: https://www.themagnifico.net/products/ecommerce-store-wordpress-theme
Author URI: https://www.themagnifico.net/
Description: The Cosmetic ECommerce Store theme presents an appealing and user-friendly design tailored for online beauty businesses that offer a range of cosmetics, including skincare, makeup, and hair care products. With a clean and elegant layout, this theme emphasizes beauty items through high-quality images, detailed descriptions, and well-organized product sections that boost customer engagement and confidence in purchasing. It features vital eCommerce functionalities like product listings, shopping carts, secure checkout, and integrated payment options to ensure a smooth shopping experience from browsing to buying. Fully responsive and mobile-friendly, the theme adapts seamlessly across desktops, tablets, and smartphones, allowing customers to shop conveniently anytime and anywhere. Customizable color schemes, layouts, typography, and branding elements help store owners establish a unique identity that mirrors their brand's personality. Additionally, the theme is optimized for performance and SEO, enhancing online visibility and ensuring fast loading speeds for an effortless browsing experience. Combining aesthetics with usability and a conversion-focused design, the Cosmetic ECommerce Store theme provides a robust digital platform that enables beauty brands to showcase their products effectively and grow a successful online business.
Version: 1.9.3
Tested up to: 7.0
Requires PHP: 7.2
Requires at least: 5.0
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: fashion-estore
Text Domain: cosmetic-ecommerce-store
Tags: custom-logo, one-column, two-columns, wide-blocks, block-styles, editor-style, sticky-post, custom-background, custom-colors, custom-header, custom-menu, footer-widgets, featured-images, flexible-header, full-width-template, threaded-comments, theme-options, rtl-language-support, left-sidebar, right-sidebar, grid-layout, blog, e-commerce, food-and-drink

Cosmetic Ecommerce Store WordPress Theme has been created by TheMagnifico52(themagnifico.net), 2023.
Cosmetic Ecommerce Store WordPress Theme is released under the terms of GNU GPL
*/


/*--------------------------------------------------------------
# Global Color
--------------------------------------------------------------*/

:root {
  --first-color: #003d48;
}

body,.main_header{
    background: #fff7f1;
}

body,h1,h2,h3,h4,h5,h6{
    font-family: 'Jost', sans-serif;
}
a.added_to_cart.wc-forward{
    margin:0 auto;
    margin-top: 10px;
}
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained,button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained,a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained,.sidebar h5, .sidebar .wp-block-search .wp-block-search__label, .sidebar .widget h2.wp-block-heading,input.search-submit.btn.btn-primary,.main-navigation .menu li.page_item_has_children ul.children,.sidebar h5, span.cart-value, .sticky .entry-title::before, #button, .sidebar input[type="submit"], .sidebar button[type="submit"], .comment-respond input#submit, .post-navigation .nav-previous a:hover, .post-navigation .nav-next a:hover, .posts-navigation .nav-previous a:hover, .posts-navigation .nav-next a:hover, .pro-button a, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .woocommerce-ordering select, .woocommerce-account .woocommerce-MyAccount-navigation ul li, .wp-block-button__link, .sidebar .tagcloud a:hover, a.added_to_cart.wc-forward,.top-info,.navigation_header,#shop_services,span.onsale, .load hr, .navigation.pagination .nav-links a.current, .navigation.pagination .nav-links a:hover, .navigation.pagination .nav-links span.current, .navigation.pagination .nav-links span:hover{
    background: var(--first-color);
}
button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained,button.wc-block-components-button.wp-element-button.wc-block-components-totals-coupon__button.contained,a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained{
    border:0px;
    color: #ffffff;
}
.entry-content .wp-block-woocommerce-cart.alignwide{
    margin-left: 0px !important;
    margin-right: 0px !important;
}
a,.home_product_cat h4:hover a,.woocommerce-message::before, .woocommerce-info::before, #colophon a:focus,.sidebar ul li a:hover,.call-info i,p.price, .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price {
    color: var(--first-color);
}
#colophon a:hover, #colophon a:focus{
    color: #e4c09c !important;
}
.footer-column .wp-block-heading{
    color: #fff;
}
.woocommerce-message, .woocommerce-info,.post-navigation .nav-previous a:hover, .post-navigation .nav-next a:hover, .posts-navigation .nav-previous a:hover, .posts-navigation .nav-next a:hover, .navigation.pagination .nav-links a.current, .navigation.pagination .nav-links a:hover, .navigation.pagination .nav-links span.current, .navigation.pagination .nav-links span:hover{
    border-color: var(--first-color);
}
.wp-block-quote, .wp-block-quote:not(.is-large):not(.is-style-large), .wp-block-pullquote{
    border-color: var(--first-color) !important;
}
.wp-block-button__link{
    background: var(--first-color) !important;
}
.social-link i,.menu_cat i, .menu_cat,.main-navigation .menu > li > a{
    color: #fff;
}
.navbar-brand h1.site-title, p.site-title{
    font-size: 25px;
}
.top-info{
    border: none;
}
a.account-btn {
    background: #000;
}
a.account-btn:hover{
    background: #e4c09c;
}
.social-link i:hover{
    color: #e4c09c;
}
.pro_search,.home_product_cat, .product_cat,.product-box,.sidebar section,.article-box,.woocommerce ul.products li {
    border: none;
    background: #fff;
}
.wp-block-quote, .wp-block-quote:not(.is-large):not(.is-style-large), .wp-block-pullquote{
    background: #fff !important;
}
.menu_cat i, .menu_cat {
    background: transparent;
    padding: 0;
}
.home_product_cat h4 a {
    font-size: 18px;
    text-transform: none;
    font-weight: normal;
}
.main-navigation .menu > li {
    font-size: 16px;
    font-weight: 500;
}
.main-navigation .menu > li > a{
    font-weight: bold;
}
#mySidenav.nav {
    justify-content: flex-end;
}
.main-navigation .menu > li > a:hover, #site-navigation .menu ul li a:hover{
    color: #e4c09c;
}
.main-navigation ul.sub-menu > li > a:hover, .main-navigation ul.sub-menu > li > a:focus {
    background: #e4c09c;
    color: var(--first-color) !important;
}
#site-navigation .menu ul li a{
    color: #fff;
}
.slider-inner-box {
    right: 35%;
    left: 5%;
    clip-path: none;
    background: transparent;
    padding: 0;
    text-align: left;
}
.slider-inner-box h2 {
    color: #000;
    font-size: 50px;
    text-transform: none;
    font-weight: 500;
}
.slide-btn a{
    background: #fff;
    color: var(--first-color);
    text-transform: capitalize;
}
.services-box i {
    font-size: 40px;
    color: #fff;
}
.services-box h4 {
    font-size: 22px;
    color: #fff;
}
.services-box p {
    font-size: 15px;
    color: #fff;
}
.product-box h4 {
    font-size: 16px;
    font-weight: 500;
}
.woocommerce ul.products li{
    box-shadow: none;
}
.sidebar ul li a:hover{
    color: #e4c09c;
}
.sidebar section {
    padding: 10px;
}
@media screen and (min-width: 320px) and (max-width: 720px){
    .slider-inner-box {
        right: 5%;
        text-align: center;
    }
    .slider-inner-box h2{
        font-size: 20px;
    }
    #shop_services {
        text-align: center;
    }
}

@media screen and (min-width: 721px) and (max-width: 999px){
    .slider-inner-box h2 {
        font-size: 25px;
    }
}

@media screen and (max-width: 1000px){
    .main-navigation .sub-menu > li > a, .main-navigation .sub-menu > li > .menu-item-link-return,.main-navigation .menu > li > a{
        color: #fff !important;
    }
    .sidenav .closebtn, .toggle-nav i{
        background: #e4c09c;
    }
    .main-navigation ul.sub-menu > li > a:hover, .main-navigation ul.sub-menu > li > a:focus, .main-navigation .menu > li > a:hover {
        background: transparent;
        color: #e4c09c !important;
    }
    body.admin-bar .sidenav {
        margin-top: 46px;
    }
}