/* ========================================== */
/* SWUP WooCommerce CSS - Versie 1.8          */
/* ========================================== */

/* 
 * TABLE OF CONTENTS
 * 1. General WooCommerce Styles
 * 2. Pagination Styling
 * 3. My Account Menu
 * 4. Checkout Page
 * 5. Product Page Specific
 * 6. Product Tabs
 * 7. Product Search
 * 8. WooCommerce Overrides
 * 9. Legacy Styles
 */


/* ========================================== */
/* 1. GENERAL WOOCOMMERCE STYLES              */
/* ========================================== */

/* Product variation table styling */
table.variations {
    text-align: left;
}

/* Cart buttons layout in Elementor */
.elementor-menu-cart__footer-buttons {
    grid-template-columns: inherit !important;
}

/* Product attributes table styling */
.woocommerce-product-attributes {
    text-align: left;
}


/* ========================================== */
/* 2. PAGINATION STYLING                      */
/* ========================================== */

.woocommerce .page-numbers {
    border-radius: 30px;
}

/* Current page number styling */
.woocommerce span.page-numbers {
    line-height: 7px !important;
    padding: 1.2em !important;
}

/* Page number links styling */
.woocommerce a.page-numbers {
    border: 2px solid;
    margin: 0 0.3em !important;
    line-height: 9px !important;
    padding: 1em !important;
}

/* Page number hover effect */
a.page-numbers:hover {
    border: 2px solid #8A8A8A !important;
}


/* ========================================== */
/* 3. MY ACCOUNT MENU                         */
/* ========================================== */

/* Base icon styling for account menu items */
nav.woocommerce-MyAccount-navigation a:before {
    font-family: 'Font Awesome 5 free';
    display: inline-block;
    width: 1.3em;
    margin-bottom: 10px;
    margin-right: 5px;
}

/* Dashboard menu item icon */
.woocommerce-MyAccount-navigation-link--dashboard a:before {
    content: "\f0db";
    font-weight: 900;
}

/* Orders menu item icon */
.woocommerce-MyAccount-navigation-link--orders a:before {
    content: "\f291";
    font-weight: 900;
}

/* Downloads menu item icon */
.woocommerce-MyAccount-navigation-link--downloads a:before {
    content: "\f019";
    font-weight: 900;
}

/* Addresses menu item icon */
.woocommerce-MyAccount-navigation-link--edit-address a:before {
    content: "\f015";
    font-weight: 900;
}

/* Account details menu item icon */
.woocommerce-MyAccount-navigation-link--edit-account a:before {
    content: "\f007";
    font-weight: 900;
}

/* Logout menu item icon */
.woocommerce-MyAccount-navigation-link--customer-logout a:before {
    content: "\f011";
    font-weight: 900;
}


/* ========================================== */
/* 4. CHECKOUT PAGE                           */
/* ========================================== */

/* Billing address field emphasis */
#billing_address_1_field {
    font-weight: bold;
}


/* ========================================== */
/* 5. PRODUCT PAGE SPECIFIC                   */
/* ========================================== */

/* PhotoSwipe zoom background */
.pswp__bg {
    background: rgba(0, 0, 0, 0.3);
}

/* Price slider handle styling */
.ui-slider .ui-slider-handle {
    border: 1px solid rgba(0, 0, 0, 0.25);
    cursor: pointer;
    background: #e7e7e7;
    background: linear-gradient(#FEFEFE,#e7e7e7);
}

/* SKU metadata icon */
span.sku_wrapper:before {
    font-family: "Font Awesome 5 Free";
    content: "\f02a";
    font-weight: 900;
    margin-right: 10px;
}

/* Categories metadata icon */
span.posted_in:before {
    font-family: "Font Awesome 5 Free";
    content: "\f0e8";
    font-weight: 900;
    margin-right: 10px;
}

/* Tags metadata icon */
span.tagged_as:before {
    font-family: "Font Awesome 5 Free";
    content: "\f02c";
    font-weight: 900;
    margin-right: 10px;
}

/* Category images styling */
li.product-category img {
    border-radius: 30px !important;
}


/* ========================================== */
/* 6. PRODUCT TABS                            */
/* ========================================== */

/* Star ratings styling */
.woocommerce-tabs .comment-form-rating .stars a.star-1 {
    width: 15px;
}

.woocommerce-tabs .comment-form-rating .stars a {
    float: left;
}

/* Base star rating styling */
.woocommerce .star-rating, 
.woocommerce-page .woocommerce-product-rating .star-rating, 
.woocommerce .comment-text .star-rating, 
.widget_recent_reviews .star-rating, 
.widget_top_rated_products .star-rating, 
.woocommerce-tabs .comment-form-rating .stars a {
    overflow: hidden;
    position: relative;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    width: 70px;
    color: #f5be15 !important;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

/* Individual star styling */
.woocommerce-tabs .comment-form-rating .stars a {
    display: block;
    line-height: 16px;
    font-size: 16px;
    text-align: center;
    text-indent: -9000px;
    position: relative;
    margin-bottom: 5px;
    padding: 10px 20px 10px 30px;
    border-right: 1px solid #eaeaea;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* Tab icons styling */
li#tab-title-description a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f07a";
    margin-right: 10px;
    font-weight: 900;
    color: #515151;
}

li#tab-title-additional_information a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    margin-right: 10px;
    font-weight: 900;
}

li#tab-title-reviews a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f2bb";
    margin-right: 10px;
}

/* Active tab styling */
li.description_tab.active,
li.additional_information_tab.active,
li.reviews_tab.active {
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
}

/* Review form adjustments */
.comment-form-comment {
    clear: both;
}

/* Tab headings styling */
#tab-description h2,
#tab-additional_information h2,
#comments h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 1em;
}

/* Attributes table styling */
.woocommerce table.shop_attributes {
    border-top: none;
}

/* Tab navigation styling */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border-bottom: 1px solid #e0e0e0;
}

.woocommerce-tabs .tabs > li {
    text-align: center;
    background-color: transparent;
    color: #444;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    text-transform: uppercase;
    padding: 0;
    cursor: pointer;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 33.33333333333333%;
    border-top: 1px solid #ffffff;
}

.woocommerce-tabs .tabs > li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e0e0e0;
}

.woocommerce-tabs .tabs > li.active:before {
    width: 100% !important;
    height: 100% !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    position: absolute !important;
    content: '';
    display: block;
    top: 0;
    left: 0;
}

.woocommerce-tabs .tabs > li.active:after {
    background-color: transparent !important;
}

.woocommerce-tabs .tabs > li.active {
    border-top: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
}


/* ========================================== */
/* 7. PRODUCT SEARCH                          */
/* ========================================== */

/* Search input styling */
.woocommerce-product-search input {
    background-color: #fff;
    padding: 0.5em;
    border-radius: 5px;
    margin-bottom: 0;
    border: 2px solid #c9c9c9;
    width: 100%;
}

/* Search button styling */
.woocommerce-product-search button {
    color: white;
    background: linear-gradient(to right,#0071c3 9%,#00a8eb 55%);
    background-size: 200%;
    border-radius: 30px;
    transition: ease-in-out 0.5s;
    border: none;
    margin-top: 0.5em;
}


/* ========================================== */
/* 8. WOOCOMMERCE OVERRIDES                  */
/* ========================================== */

/* Tab list item styling override */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background-color: transparent;
    border-radius: 0;
}


/* ========================================== */
/* 9. LEGACY STYLES                           */
/* ========================================== */

/* Notification messages styling */
.woocommerce-error, 
.woocommerce-info, 
.woocommerce-message { 
    border-radius: 3px; 
}