/* Hide popup by default */
.fullscreen-menu {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: 9998;
  overflow-y: auto;
}

/* Show menu when active */
.fullscreen-menu.active {
  display: flex !important;
  flex-direction: column;
}

/* Style for open and close icons if needed */
.products-menu-toggle.active {
  color: black; /* or change color */
}
/* === FIXED HEADER — ALL PAGES === */
.sticky-header {
  position: fixed;
  width: 100%;
  top: 0; /* default */
  left: 0;
  z-index: 9999;
  background-color: white;
  transition: background-color 0.3s ease;
  opacity: 0;
  animation: fadeInHeader 1s ease-out forwards;
}


/* === HOMEPAGE OVERRIDE === */
body.home .sticky-header {
  background-color: transparent;
  top: 10px; /* push header down by strip height */
}

body.home main {
  padding-top: 105px; /* header height (100px) + strip (10px) */
}

body.home .sticky-header h2,
body.home .sticky-header .elementor-nav-menu a,
body.home .sticky-header .elementor-icon,

}

/* === OTHER PAGES === */
body:not(.home) main {
  padding-top: 100px; /* Adjust to match header height */
}

body:not(.home) .sticky-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Very soft shadow */
  top: 0; /* stays at very top */
}

.top-strip {
  position: relative;
  width: 100%;
  background: #F2F0EB; /* strip background color */
  color: #000;          /* text color */
  font-size: 8px;       /* very small font */
  text-align: center;
  height: 10px;         /* fixed height of strip */
  line-height: 10px;    /* vertically center text */
  padding: 0;           /* remove extra spacing */
  z-index: 1;
  overflow: hidden;     /* ensures text doesn't push height */
}

@keyframes fadeInHeader {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.required-parts h2 {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 15px;
}

.required-parts ul.products {
    margin-top: 10px;
}
.compatible-products {
    margin-top: 40px;
}

.compatible-products h2 {
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.woocommerce .upsells.products ul.products li.product {
    box-shadow: none;
    border: none;
    background: none;
    padding: 0;
    margin-bottom: 30px;
}

.woocommerce .upsells.products h2 {
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}


/* Related products grid on single product page */
.woocommerce .related ul.products,
.woocommerce .related ul {
  display: grid !important;
  grid-template-columns: repeat(4, 2fr); /* 4 in a row on desktop */
  gap: 20px;
}

/* Mobile: 2 per row */
@media (max-width: 768px) {
  .woocommerce .related ul.products,
  .woocommerce .related ul {
    grid-template-columns: repeat(2, 2fr); /* 2 columns on mobile */
  }
}

/* 🎯 Wishlist Styling Fix */

/* Hide the date/time */
.woosw-item--time {
  display: none !important;
}

/* Product title */
.woosw-list table.woosw-items .woosw-item .woosw-item--name a {
  font-size: 14px !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
  color: #2c2c2b !important;
  text-decoration: none !important;
}


/* Add to basket button inside .woosw-item--atc */
.woosw-item--atc .add_to_cart_button {
  display: inline-block !important;
  padding: 10px 20px !important;
  background: transparent !important;
  border: 1px solid #9e856f !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  color: #2c2c2b !important;
}

/* Hover effect */
.woosw-item--atc .add_to_cart_button:hover {
  background: #2c2c2b !important;
  color: #fff !important;
}

/* Remove related products from cart page */
.woocommerce-cart .related,
.woocommerce-cart .wt-related-products,
.woocommerce-cart .wt-related-products.products,
.woocommerce-cart .wt-related-products ul.products {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}





/* Proceed to Checkout — default black text, hover fills with accent */
.woocommerce-cart .checkout-button.button.alt,
.woocommerce-checkout .checkout-button.button.alt {
  background: #F2F0EB !important;
  border: 1px solid #9E856F !important;
  border-radius: 25px !important;
  color: #000 !important;               /* <- default text: black */
  padding: 12px 28px !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

/* Hover / focus / active */
.woocommerce-cart .checkout-button.button.alt:hover,
.woocommerce-checkout .checkout-button.button.alt:hover,
.woocommerce-cart .checkout-button.button.alt:focus,
.woocommerce-checkout .checkout-button.button.alt:focus,
.woocommerce-cart .checkout-button.button.alt:active,
.woocommerce-checkout .checkout-button.button.alt:active {
  background: #9E856F !important;
  color: #fff !important;               /* white on dark hover */
  border-color: #9E856F !important;
}


/* Make coupon code input bigger on cart page */
.woocommerce-cart .coupon input#coupon_code {
    width: 65% !important;       /* fill available space */
    max-width: none !important;   /* remove any theme restrictions */
    height: 35px !important;      /* approx double height */
    padding: 0 20px !important;   /* inner padding for text */
    font-size: 16px !important;   /* bigger text */
    border: 1px solid #9E856F !important; /* match your style */
    border-radius: 25px !important;       /* rounded corners */
    background: #F2F0EB !important;       /* background color to match buttons/cards */
    box-sizing: border-box;
}

/* Adjust the Apply Coupon button to match style */
.woocommerce-cart .coupon button.button {
    height: 35px !important;
    border-radius: 25px !important;
    border: 1px solid #9E856F !important;
    background: #F2F0EB !important;
    color: #9E856F !important;
    font-weight: 400;
    padding: 0 px;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

/* Hover effect for Apply Coupon button */
.woocommerce-cart .coupon button.button:hover {
    background: #9E856F !important;
    color: #fff !important;
    border-color: #9E856F !important;
}

/* Make cart product images bigger */
.woocommerce-cart .cart_item .product-thumbnail img,
.woocommerce-cart .cart_item .product-thumbnail a img {
    width: 120px !important;  /* increase width */
    height: auto !important;  /* maintain aspect ratio */
    max-width: none !important;
    object-fit: contain;
}

/* Optional: add some spacing around image */
.woocommerce-cart .cart_item .product-thumbnail {
    padding: 15px 15px 15px 15px;
}
/* Make cart remove “×” button black */
.woocommerce-cart .cart_item a.remove {
    color: #000 !important;          /* black color */
    font-size: 20px;                 /* adjust size if needed */
    font-weight: 600;
    opacity: 0.7;                     /* subtle, optional */
    transition: opacity 0.2s ease;
}

/* Hover effect */
.woocommerce-cart .cart_item a.remove:hover {
    color: #000 !important;
    opacity: 1;
    text-decoration: none;
}
/* Cart product name style */
.woocommerce-cart .cart_item .product-name a {
    color: #000 !important;        /* black text */
    font-size: 14px !important;    /* adjust if needed */
    font-weight: 300 !important;   /* medium-bold */
    text-decoration: none !important; /* remove underline */
}

/* Hover effect for link */
.woocommerce-cart .cart_item .product-name a:hover {
    color: #9E856F !important;     /* optional hover color to match accent */
    text-decoration: underline;    /* optional underline on hover */
}

/* Center product image vertically */
.woocommerce-cart .cart_item .product-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Make product image a bit larger and centered */
.woocommerce-cart .cart_item .product-thumbnail img {
    max-width: 120px;   /* adjust as needed */
    height: auto;
    margin: 0 auto;
}

/* Make all secondary grey texts black */
.woocommerce-cart,
.woocommerce-cart .cart_item,
.woocommerce-cart .cart_item .product-name,
.woocommerce-cart .cart_totals,
.woocommerce-cart .cart_totals tr td,
.woocommerce-cart .cart_totals tr th,
.woocommerce-cart .cart_totals small,
.woocommerce-cart .product-subtotal small {
    color: #000 !important;
}

/* Style VAT and subtotal notes */
.woocommerce-cart small,
.woocommerce-cart .includes_tax,
.woocommerce-cart .tax_label {
    color: #000 !important;
    font-size: 11px !important; /* slightly smaller */
    font-weight: 300;
}
/* Update Basket button */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart button[name="update_cart"].button {
    background-color: #F2F0EB !important;
    border: 1px solid #9E856F !important;
    border-radius: 25px !important;
    color: #000 !important; /* black text */
    font-weight: 300 !important;
    padding: 12px 28px !important;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

/* Hover effect */
.woocommerce-cart button[name="update_cart"]:hover,
.woocommerce-cart button[name="update_cart"].button:hover {
    background-color: #9E856F !important;
    color: #fff !important;
    border-color: #9E856F !important;
}

/* CHECKOUT Style Place Order button */
.wc-block-components-checkout-place-order-button {
    background-color: #F2F0EB !important;
    border: 1px solid #9E856F !important;
    border-radius: 25px !important;
    color: #000 !important;
    font-weight: 600;
    padding: 12px 28px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Make sure the text inside also inherits color */
.wc-block-components-checkout-place-order-button__text {
    color: #000 !important;
    text-transform: uppercase;
}

/* Hover effect */
.wc-block-components-checkout-place-order-button:hover {
    background-color: #9E856F !important;
    border-color: #9E856F !important;
}

.wc-block-components-checkout-place-order-button:hover 
.wc-block-components-checkout-place-order-button__text {
    color: #fff !important;
}


/* 🎯 Completely flatten WooCommerce variation selects */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart .variations select:hover,
.woocommerce div.product form.cart .variations select:focus,
.woocommerce div.product form.cart .variations select:active {
    background-color: #F2F0EB !important;
    border: 1px solid #dcd7d2 !important; /* soft fixed border */
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    transition: none !important; /* remove animation / movement */
}

/* In case Elementor or theme wraps select in a div */
.woocommerce div.product form.cart .variations td.value,
.elementor-widget select,
.elementor-field-group select,
.select2-container--default .select2-selection--single {
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    background-color: #F2F0EB !important;
    border: 1px solid #dcd7d2 !important;
}

/* Remove focus ring or shadow from Select2 dropdown */
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--single:active,
.select2-container--default .select2-selection--single:hover {
    outline: none !important;
    box-shadow: none !important;
    border-color: #dcd7d2 !important;
}
/* 🎯 Completely flat & stable variation dropdowns */
.variations select,
.variations select:hover,
.variations select:focus,
.variations select:active {
    background-color: #F2F0EB !important;
    border: 1px solid #F2F0EB !important; /* same as background, visually borderless */
    color: #333 !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    transition: none !important;
}

/* Optional: if wrapper is adding hover or border */
.woocommerce div.product form.cart .variations td.value,
.elementor-widget select,
.elementor-field-group select,
.select2-container--default .select2-selection--single {
    background-color: #F2F0EB !important;
    border: 1px solid #F2F0EB !important;
    box-shadow: none !important;
    outline: none !important;
    transition: none !important;
}

/* Remove any hover/focus highlight on Select2 */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--single:focus {
    border-color: #F2F0EB !important;
    box-shadow: none !important;
}
/* 🌿 Elegant hover effect for variation dropdowns */
.variations select,
.variations select:hover,
.variations select:focus,
.variations select:active {
    background-color: #F2F0EB !important;
    border: 1px solid #F2F0EB !important;
    color: #333 !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    transition: background-color 0.25s ease;
}

/* Subtle hover / focus feedback */
.variations select:hover,
.variations select:focus {
    background-color: #F5F3EE !important; /* slightly lighter beige */
}

/* Optional — ensure same feel if wrapped in Elementor or Select2 */
.select2-container--default .select2-selection--single {
    background-color: #F2F0EB !important;
    border: 1px solid #F2F0EB !important;
    transition: background-color 0.25s ease;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--single:focus {
    background-color: #F5F3EE !important;
}

.single-product .variations_form:not([data-product_variations]) {
  display: none !important;
}


/* --- Neutral / brand success message (override theme/plugin styles) --- */
body.woocommerce .woocommerce-notices-wrapper,
body.woocommerce-page .woocommerce-notices-wrapper {
  background: transparent !important;
  box-shadow: none !important;
}

body.woocommerce .woocommerce-message,
body.woocommerce-page .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce-page .woocommerce-info {
  background-color: #f2f0eb !important;    /* neutral background */
  border-left: 4px solid #9E856F !important;/* warm accent */
  color: #1a1a1a !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 16px 20px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  margin: 0 0 20px 0 !important;
}

/* remove default icon / punctuation styling from pseudo-element */
body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-info::before,
body.woocommerce-page .woocommerce-message::before,
body.woocommerce-page .woocommerce-info::before {
  display: none !important;
  content: none !important;
}

/* style the "View basket" button/link */
body.woocommerce .woocommerce-message a.button.wc-forward,
body.woocommerce-page .woocommerce-message a.button.wc-forward {
  background: transparent !important;
  color: #9E856F !important;
  border: 1px solid #9E856F !important;
  border-radius: 25px !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
}

/* a small hover state */
body.woocommerce .woocommerce-message a.button.wc-forward:hover,
body.woocommerce-page .woocommerce-message a.button.wc-forward:hover {
  background-color: #f2f0eb !important;
  color: #7D6D5C !important;
}

/* --- Hide old focus outline --- */
.woocommerce div.product .woocommerce-product-gallery__trigger:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .woocommerce div.product div.images {
        border-radius: 10px;
        box-shadow: none;
        background: #F7F6F4;
    }
    .woocommerce div.product .woocommerce-product-gallery__trigger {
        width: 36px;
        height: 36px;
        top: 10px;
        right: 10px;
    }
}
/* General BodyText override (catches inline style on the span) */
span.BodyText,
span.BodyText[style] {
  font-size: 12px !important;
  line-height: 20px !important;
}

/* Short description (WooCommerce) */
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description .BodyText {
  font-size: 12px !important;
  line-height: 20px !important;
}

/* Main / long description (tab panel) */
.woocommerce-Tabs-panel--description,
.woocommerce-Tabs-panel--description .BodyText {
  font-size: 12px !important;
  line-height: 20px !important;
}

/* Extra safety for product content areas */
.product .entry-summary,
.product .entry-summary .BodyText,
.product .entry-content,
.product .entry-content .BodyText {
  font-size: 12px !important;
  line-height: 20px !important;
}


/* 1. Target the button/container that holds the image and the label */
.jet-color-image-list__button {
    /* Use Flexbox to manage the layout */
    display: flex;
    
    /* Crucial change: Stack the elements vertically */
    flex-direction: column;
    
    /* Center the image and label text horizontally */
    align-items: center;
    text-align: center;
}

/* 2. Add some spacing between the image and the label for better readability */
.jet-color-image-list__label {
    margin-top: 5px; /* Adjust this value (e.g., 5px, 10px) as needed for spacing */
    
    /* Ensure the label has the necessary display property if it's interfering with centering */
    display: block; 
}

/* 1. Target the actual image for the zoom effect (KEEP THIS) */
.jet-color-image-list__item .jet-color-image-list__image img {
    transition: transform 0.3s ease-in-out;
}

/* 2. Apply the zoom effect when the WHOLE item is hovered (KEEP THIS) */
.jet-color-image-list__item:hover .jet-color-image-list__image img {
    transform: scale(1.05);
}

/* 3. Ensure the zoom is clipped (KEEP THIS) */
.jet-color-image-list__decorator {
    overflow: hidden; 
    transition: all 0.3s ease-in-out; 
}


/* 4. UPDATED: Add a white/milky overlay (lighter appearance) on hover */
.jet-color-image-list__item:hover .jet-color-image-list__decorator::before {
    /* This creates a pseudo-element to act as the overlay */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ******** CHANGE IS HERE ********* */
    /* Adjust this RGBA color for the white/milky effect */
    background-color: rgba(255, 255, 255, 0.2); /* White tint with 50% opacity */
    /* You can try 0.3 for a lighter effect, or 0.6 for a stronger one */
    /* ********************************* */
    
    z-index: 2; 
}

/* --- Mobile / Responsive Adjustments --- */

/* Mobile specific single product adjustments (max-width: 768px) */
@media (max-width: 768px) {
    .single-product .product {
        padding: 0 16px;
    }

    .woocommerce div.product .product_title {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 10px;
        font-family: 'Inter', sans-serif !important;
    }

    .woocommerce div.product p.price,
    .woocommerce div.product span.price {
        font-size: 14px;
        margin-bottom: 12px;
        font-family: 'Inter', sans-serif !important;
    }

    .woocommerce div.product .summary {
        margin-top: 20px;
    }

    /* Add space below variation price */
    .woocommerce-variation-price {
        margin-bottom: 12px;
    }

    /* Style the variation dropdown */
    .variations_form select {
        display: block;
        box-sizing: border-box;
        width: 100% !important;       /* full width of its container */
        max-width: 100% !important;   /* prevent overflow */
        margin-top: 8px;
        margin-bottom: 16px;
        padding: 10px;
        font-family: 'Inter', sans-serif !important;
    }

    /* Stack buttons cleanly (Add to cart, Request Quote) */
    form.cart {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }


    form.cart .quantity {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}

 .woocommerce span.onsale,
.woocommerce .wc-label,
.woocommerce .product-badge,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale,
.woocommerce ul.products li.product .badge,
.woocommerce div.product .badge {
    display: none !important;
}