/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/**
 * Simple Mega Menu subcategories background */
@media (min-width: 769px) {
    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex;
        flex-wrap: wrap;
        column-gap: 1.25%;
    }
}
@media (min-width: 769px) {
    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 19%;
    }
}
@media (min-width: 769px) {
    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
        background-color: #1c1b1e !important;
		margin: 5px;
		padding: 5px;
    }
}
/** Fix for second nav mobile menu issues */
@media(max-width: 768px) {
    nav#secondary-navigation .secondary-menu-toggle {
        position: relative;
        min-height: 40px;
    }

    nav#secondary-navigation .secondary-menu-toggle .icon-menu-bars {
        position: absolute;
        right: 1px;
        bottom: 15px;
    }

    nav#secondary-navigation.toggled {
        position: fixed;
        width: 100%;
    }

    .mobile-menu-open body {
        overflow: hidden !important;
    }

    nav#secondary-navigation.toggled {
        height: calc(100vh - 56px);
        overflow: auto !important;
        padding-bottom: 50px;
    }

    
}
/** Fixing the off canvas filter menu width */
@media screen and (max-width: 768px) {
    :root {
        --gp-slideout-width: 40vw !important;
    }
}
@media screen and (max-width: 640px) {
    :root {
        --gp-slideout-width: 100vw !important;
    }
}
@media screen and (min-width: 1024px) {
:root {
    --gp-slideout-width: 20vw !important;
   }
}
/* Custom CSS for WooCommerce Customer Order Cancel Button */
a.woocommerce-button.button.cancel {
    margin-left: 10px; /* Adjust padding */
	margin-top: 5px; /* Adjust padding */ 
}
/* Custom CSS for WooCommerce Customer Order Again Button */
a.woocommerce-button.button.order-again {
    margin-left: 10px; /* Adjust padding */
	margin-top: 5px; /* Adjust padding */ 
}
/** Fixing the results text in archives */
.woocommerce .woocommerce-result-count {
    float: right;
    margin-right: 20px;
}
/**
 * Change Font for Dropdown Options */
.woocommerce-ordering select {
    font-family: Overused Grotesk Roman; /* Change to your desired font */
	text-transform: uppercase;
    max-width: 160px;
}
.woocommerce-ordering select option {
    font-family: 'Jost', sans-serif !important; /* Ensure the font matches the dropdown */
    text-transform: uppercase;             /* Maintain uppercase text if desired */
    
}
/** Vezi tot menu button customization */
.vezitotmeniu {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
	background-color: #1c1b1e ;
}
/**
 *  Specific selector for the cart count */
.number-of-items {
	border-radius: 50%; /* Make it circular */
    padding: 1px 6px; /* Add some padding */
	background-color: red;

}
/**
 * Woocommerce message system font */
.woocommerce-message {
	font-family: 'Gobold Lowplus'; /* Change to your desired font family */
}
/**
 * My Account CSS */
/* Change font for My Account section */
.woocommerce-MyAccount-content {
    font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 16px; /* Adjust font size as needed */
}

.woocommerce-MyAccount-title {
    font-family: Overused Grotesk Roman; /* Change to your desired font */
}
/* Change font for My Account buttons */
.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-content a.button {
    font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 14px; /* Adjust font size as needed */
    font-weight: bold; /* Change font weight if desired */
}

.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-content a.button:hover {
    color: var(--dop-2); /* Change text color on hover */
    background-color: var(--dop-1); /* Change background color on hover */
}
/**
 *  Define the Up down svg animation  */
@keyframes updown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Move up */
    }
    100% {
        transform: translateY(0); /* Move back down */
    }
}
/**
 *  Apply the animation to the updownsvg class */
.updownsvg {
    animation: updown 1s ease-in-out infinite; /* Adjust duration and timing function as needed */
}
/**
 *  Front Page Product Category CSS **/
.woocommerce ul.products li.product .woocommerce-loop-category__title {
    text-align: center;
	text-transform: uppercase;
	padding: 5px; /* Add some padding for better visibility */
    color: var(--dop-1);
	transition: color 0.3s ease; /* Smooth transition for color change */
}
.woocommerce ul.products li.product .woocommerce-loop-category__title:hover {
    color: var(--dop-5); /* Change to your desired hover color */
	/*background-color: var(--dop-1); /* Change to your desired hover background color with transparency */
    text-decoration: underline;  Optional: add underline on hover
}
/**
 *  Targeting the WooCommerce brand list */
.woocommerce .brands-grid {
    font-family: 'Gobold Lowplus'; /* Change to your desired font family */
    color: var(--dop-1); /* Change to your desired font color */
	text-transform: uppercase;
    font-size: 16px; /* Set the font size */
    line-height: 1.5; /* Set the line height for better readability */
}
/**
 *  Specific styles for brand items */
.woocommerce .brand-item {
    color: #2c3e50; /* Darker color for brand items */
    font-weight: bold; /* Set the font weight for brand names */
}
/**
 *  Styling for hover effect */
.woocommerce .brand-item:hover {
    color: var(--dop-5); /* Change color on hover */
    text-decoration: underline; /* Underline on hover */
}
/**
 *  Product Archive Design **/
.woocommerce ul.products li.product {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    height: 100%; /* Ensure all items take the same height */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 60px; /* Set a minimum height for the title */
    margin-bottom: auto; /* Push the button to the bottom */
}

.woocommerce ul.products li.product .button {
    margin-top: 10px; /* Add space above the button */
    align-self: stretch; /* Make the button stretch to the full width */
}
/**
 *  Targeting the New Arrivals section specifically */
.new-arrivals ul.products li.product {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    height: 100%; /* Ensure all items take the same height */
}

.new-arrivals ul.products li.product .woocommerce-loop-product__title {
    min-height: 60px; /* Set a minimum height for the title */
    margin-bottom: auto; /* Push the button to the bottom */
}

.new-arrivals ul.products li.product .button {
    margin-top: 10px; /* Add space above the button */
    align-self: stretch; /* Make the button stretch to the full width */
}
/**
 *  Targeting the Handpicked Products section specifically */
.handpicked-products ul.products li.product {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    height: 100%; /* Ensure all items take the same height */
}

.handpicked-products ul.products li.product .woocommerce-loop-product__title {
    min-height: 60px; /* Set a minimum height for the title */
    margin-bottom: auto; /* Push the button to the bottom */
}

.handpicked-products ul.products li.product .button {
    margin-top: 10px; /* Add space above the button */
    align-self: stretch; /* Make the button stretch to the full width */
}
/**
 *  Makes premium shop text appear only once on mobile devices */
@media (max-width:769px){
.premiummobile {
    display: none;
}
}
/**
 *  Center new products for mobile view */
@media (max-width: 768px) {
    .products {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* One column layout */
        justify-items: center; /* Center items horizontally */
        padding: 0; /* Remove default padding */
        margin: 0; /* Remove default margin */
    }

    .product {
        text-align: center; /* Center text inside product */
        margin-bottom: 20px; /* Space between products */
    }
}
/**
 *  Limit WooCommerce product title to one line in archives */
.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    white-space: nowrap; /* Prevents text from wrapping */
    overflow: hidden;    /* Hides overflow text */
    text-overflow: ellipsis; /* Adds ellipsis (...) for overflow text */
}
/**
 *  Simple Mega Menu CSS */
@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
		font-family: 'Overused Grotesk Roman';
    }

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
		padding: 20px;
        left: 0 !important;
        display: flex;
        flex-wrap: wrap;
		font-family: 'Overused Grotesk Roman';
		background-color: var(--dop-1);
    }

    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
		color: var(--dop-2);
    }

    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
		color: var(--dop-2);
    }

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
		text-decoration:underline;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
		font-family: 'Gobold Lowplus';
		font-size: 9px;
		color: var(--dop-1);
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}
/**
 * CSS for Brand List Index Page */
#mainbrandsro {
    /* background-color: var(--dop-1);  Change this to your desired background color */
    padding: 20px; /* Adjust padding as needed */
    border-radius: 5px; /* Optional: adds rounded corners */
}

#mainbrandsro h3, /* Targeting the heading inside the brand list */
#mainbrandsro h2, /* Targeting the heading inside the brand list */
#mainbrandsro p, /* Targeting paragraphs inside the brand list */
#mainbrandsro a { /* Targeting links inside the brand list */
    font-family: 'Gobold Lowplus', sans-serif; /* Change to your desired font family */
    font-size: 16px; /* Adjust font size as needed */
    color: #ffffff; /* Change text color */
    text-decoration: none; /* Remove underline from links */
}

#mainbrandsro h3 { /* Targeting the heading inside the brand list */
text-transform: uppercase; /* Converts text to uppercase */
}
#mainbrandsro a:hover {
    color: var(--dop-3); /* Change link color on hover */
    text-decoration: underline; /* Optional: underline on hover */
}

ul.brands_index li a, ul.brands_index li span {
	font-family: 'Gobold Lowplus', sans-serif; /* Change to your desired font family */
}
/**
 *  Back to top button styling  */

.generate-back-to-top,
.generate-back-to-top:visited {
	  border-radius: 50px 0px 0px 50px;
	  border-top: 0.5px solid #222222;
	  border-bottom: 0.5px solid #222222;
	  border-left: 0.5px solid #222222;
	  bottom: 30px;
	  position: fixed;
    z-index: 99999;
    bottom: 125px;
    right: 0px;
	  font-size: 30px;
    padding: 5px;
	  cursor: pointer;
	  box-shadow: 0 2px 2px rgb(0 0 0/30%);
    
}
/** if you donțt want to show it on mobile 
@media (max-width: 768px) {
.generate-back-to-top,
.generate-back-to-top:visited {
    display: none;
	  transition: all 0.2s ease-in;
      }
}
*/
.generate-back-to-top:hover {
    box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
}
/**
 *  Mobile Action Bar  */
.mobile-action-bar {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 999999;
}
/**
 *  Change Woo Breadcrumb Fonts */
.woocommerce-breadcrumb a {
    font-size: 14px; /* Change to your desired size */
    font-family: Overused Grotesk Roman; /* Change to your desired font */
    color: #333; /* Change to your desired color */
	text-transform: uppercase; /* Make product title uppercase */
}
/**
 *  Change Woo Shortdescription Fonts */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
	font-weight: lighter;
}	
/**
 *  Change Woo Price Fonts */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
}
/**
 *  Change Woo product meta section */
.woocommerce div.product .product_meta {
    display: none; /* Hides the entire product meta section, which includes SKU and categories */
}
/**
 *  Change Woo Sticky Menu Product Title Fonts */
.woocommerce div.product-title {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
}
/**
 *  Change Woo Full Description Fonts */
.woocommerce div.product .woocommerce-Tabs-panel--description {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
	font-weight: lighter;
}
/**
 *  Change Woo Reviews Description Fonts 
.woocommerce div.product .woocommerce-review {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    border: 1px solid #ddd; /* Add a border around each review */
    padding: 15px; /* Add padding inside each review */
    margin-bottom: 20px; /* Add space between reviews */
    background-color: #f9f9f9; /* Optional: Add a background color */
    border-radius: 5px; /* Optional: Add rounded corners */
} 
/**
 * Aditional information */
.woocommerce div.product .woocommerce-Tabs-panel--additional_information {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 16px; /* Adjust font size */
    color: #333; /* Change text color */
    line-height: 1.6; /* Adjust line height for better readability */
    margin-top: 20px; /* Add space above the extra information */
    padding: 15px; /* Add padding for better spacing */
    background-color: #f9f9f9; /* Optional: Add a background color */
    border: 1px solid #ddd; /* Optional: Add a border */
    border-radius: 5px; /* Optional: Add rounded corners */
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information table {
    width: 100%; /* Make the table full width */
    border-collapse: collapse; /* Collapse table borders */
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information th,
.woocommerce div.product .woocommerce-Tabs-panel--additional_information td {
    padding: 10px; /* Add padding to table cells */
    border: 1px solid #ddd; /* Add border to table cells */
	font-weight: normal; /* Make table headers bold */
	font-family: Overused Grotesk Roman; /* Change to your desired font */
}

.woocommerce div.product .woocommerce-Tabs-panel--additional_information th {
    background-color: #f1f1f1; /* Optional: Add background color to table headers */
    font-weight: bold; /* Make table headers bold */
	font-family: Overused Grotesk Roman; /* Change to your desired font */
}
/** Customize Woo Tabs on Single Product Page */
.woocommerce div.product .woocommerce-tabs .tabs li a {
    font-family: Overused Grotesk Roman; /* Change to your desired font */
}
/* General styles for the Add to Cart button */
.woocommerce div.product .button {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
}
/**
 * CSS for Variations in Woo Single Product Page */
/* Styles for the variation select dropdowns */
.woocommerce div.product .variations select {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 16px; /* Adjust font size */
    color: #333; /* Change text color */
    padding: 10px; /* Add padding for better spacing */
    border: 1px solid #ddd; /* Add border */
    border-radius: 5px; /* Add rounded corners */
    background-color: #f9f9f9; /* Change background color */
}

/* Styles for the variation labels */
.woocommerce div.product .variations label {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
	text-transform: uppercase; /* Make product title uppercase */
    font-weight: bold; /* Make labels bold */
    color: #333; /* Change label color */
    margin-bottom: 5px; /* Add space below labels */
    display: block; /* Ensure labels are block elements */
}

/* Styles for the selected variation */
.woocommerce div.product .variations .variation {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 16px; /* Adjust font size for selected variation */
    color: #d9534f; /* Change color for selected variation */
    font-weight: bold; /* Make selected variation bold */
}

/* Styles for the variation price */
.woocommerce div.product .variation-price {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 18px; /* Adjust font size for variation price */
    color: #d9534f; /* Change color for variation price */
    font-weight: bold; /* Make variation price bold */
}

/* Styles for the variation out of stock message */
.woocommerce div.product .variation.out-of-stock {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    color: #999; /* Change color for out of stock variations */
    text-decoration: line-through; /* Add strikethrough for out of stock */
}
/* Styles for the variation select dropdowns */
.woocommerce div.product .variations select {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 16px; /* Adjust font size */
    color: #333; /* Change text color */
    padding: 10px; /* Add padding for better spacing */
    border: 1px solid #ddd; /* Add border */
    border-radius: 5px; /* Add rounded corners */
    background-color: #f9f9f9; /* Change background color */
    appearance: none; /* Remove default dropdown arrow */
    -webkit-appearance: none; /* Remove default dropdown arrow for Safari */
    -moz-appearance: none; /* Remove default dropdown arrow for Firefox */
}
/* Add a custom arrow for the dropdown */
.woocommerce div.product .variations select::after {
    content: '▼'; /* Custom arrow */
    position: absolute; /* Position it absolutely */
    right: 10px; /* Position from the right */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for vertical centering */
    pointer-events: none; /* Prevent interaction with the arrow */
}
/* Styles for the cancel link */
.woocommerce div.product .variations .reset_variations {
	font-family: Overused Grotesk Roman; /* Change to your desired font */
    font-size: 14px; /* Adjust font size for the cancel link */
    
    text-decoration: underline; /* Underline the link */
    cursor: pointer; /* Change cursor to pointer */
    margin-top: 5px; /* Add space above the cancel link */
}
/* Hover effect for the cancel link */
.woocommerce div.product .variations .reset_variations:hover {
    color: var(--dop-3); /* Change color on hover */
}
/** CSS for Order Status Page */

/* Styles for error messages */
.woocommerce .woocommerce-error {
	font-family: Gobold Lowplus; /* Change to your desired font */
}
/**
 * Style for woocommerce notices wrapper */
.woocommerce-notices-wrapper {
	font-family: Gobold Lowplus; /* Change to your desired font */
}
/**
 * Style for woocommerce notices wrapper */
.woocommerce-info {
	font-family: Gobold Lowplus; /* Change to your desired font */
}
/** CSS for the bascket pre-orders append on items */
.backorder-text {
	font-family: Overused Grotesk Roman;
    background-color: var(--dop-3); /* Blue background color */
    color: var(--dop-2); /* White text color */
    padding: 2px 5px; /* Add some padding */
    font-weight: bold; /* Make the text bold */
	text-transform: uppercase;
}
/** CSS ofr Thank You page */
.woocommerce-thankyou .thankyou-message {
	font-family: Overused Grotesk Roman;
}
.woocommerce-thankyou .order-details {
    font-family: Overused Grotesk Roman; /* Change to your desired font */
}
.woocommerce-thankyou .billing-address,
.woocommerce-thankyou .shipping-address {
    font-family: Overused Grotesk Roman; /* Change to your desired font */
/**
 * Customizing off-canvas inside 
.slideout-navigation.do-overlay .inside-navigation {
    width: 50%;
}
/** hide off canvas in menu 
    .menu-bar-item .slideout-toggle {
        display: none;
    }
}