/* General body styles */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #F5F5F5 !important; /* Page background */
    color: #0B3041 !important; /* Default text color */
    margin: 0;
    padding: 0;
}

.ets-blog-wrapper-detail {
    background-color: #f6f6f6;
    padding: 30px;
    margin-bottom: 30px;
    float: left;
    width: 100%;
}

.ets_blog_img_wrapper img, .blog-product-list img {
    max-width: 70%;
    display: block; /* Ensures it behaves as a block element */
    margin: 0 auto; /* Centers it horizontally */
}

.ets-blog-wrapper-detail h1.page-heading.product-listing {
    font-family: 'Open Sans', sans-serif !important; /* Change font to Open Sans */
    font-size: 24px !important; /* Adjust size as needed */
    font-weight: normal !important; /* Ensure normal weight */
    text-transform: none !important; /* Remove capitalisation */
    background-color: transparent !important; /* Keep background clear */
    color: #003041 !important; /* Match site theme */
}

.blog-extra {
    display: none !important;
}

.page_home, .page_home_gallery {
    background-color: #f6f6f6;
    display: block;
    clear: both;
    margin-bottom: 60px;
    padding: 15px;
    width: 100%;
}


    .col-xl-4, .col-xl-5 {
        float: left;
        width: 25%;
    }
    
    .col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right:10px;
    padding-left:10px;
    }

#main .page-content, #main .page-footer, #main .page-header {
    margin-bottom: 1.563rem;
}
#pagenotfound .page-not-found, #products .page-not-found {
    max-width: 570px;
    padding: 1rem;
    margin: 0 auto;
    overflow: auto;
    font-size: .875rem;
    color: #7a7a7a;
    background: none;
}

#custom-text {
    padding:0;
    margin-bottom: 1.5rem;
    text-align: center;
    background: #fff;
    border-radius: 2px
}

.paypal-logo {  
    width: 200px;  /* Adjust to your desired size */
    height: auto;
    background: none;
    
}

.paypal-banner {  
    display: flex;
    justify-content: flex-end;  /* Moves the banner to the right */
    padding-right:50px;
}

.row.paypal-row {
    background-color: #F5F5F5;  /* Light grey background */
    padding: 10px 0;  /* Adds spacing above & below */
}


p {
    font-family: 'Open Sans', sans-serif;
    background-color: #F5F5F5 !important; /* Page background */
    color:#0B3041 !important; /* Default text color */
    margin: 0;
    padding: 0;
}

/* HEADER */

.header-logo {
    display: flex;
    align-items: center; /* Aligns the text and logo vertically */
    gap: 15px; /* Space between the logo and text */
   /* height: 75px;  Adjust logo size if needed */
    width: 300px;
}

.header-logo img {
    width: 100%; /* Adjust logo size if needed */
    
}

.header-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #F5F5F5; /* Matches theme */
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    white-space: nowrap; /* Prevents text from wrapping */
}

/* Top bar (e.g., contact us area) */
.header-top {
    background-color: #35B1AE !important; /* Black background */
    color: #F5F5F5 !important; /* White text */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Ensure text alignment is centered */
}

.header-top .container {
    background-color: transparent !important; /* Transparent container background */
    color: #F5F5F5 !important; /* White text */
    text-align: right; /* Center align text inside container */
}

/* Style for links in header-top */
.header-top a {
    color: #F5F5F5 !important; /* White links */
    text-decoration: none;
}

.header-top a:hover {
    color: #FFA500 !important; /* Orange hover effect for links */
}

/* Section Titles */
.links .link-item {
    font-family: 'Major Mono Display', monospace !important; /* Major Mono Display font */
    color: #0B3041 !important; /* Dark blue color */
    font-weight: bold; /* Make it bold if desired */
    font-size: 1.1em; /* Adjust font size if needed */
    text-align: center; /* Center the text */
}

/* Optional: Add hover effect */
.links .link-item:hover {
    font-family: 'Major Mono Display', monospace !important; /* Major Mono Display font */
    color: #FFA500 !important; /* Change to orange on hover */
    transition: color 0.3s ease; /* Smooth transition */
}

.popover {
    position: absolute !important; /* Position it relative to the page */
    top: calc(100% + 20px) !important; /* Start just below the header-top */
    left: 0 !important; /* Align to the left edge of the page */
    width: 100% !important; /* Make it span the full width */
    z-index: 1000 !important; /* Ensure it appears above other elements */
    background-color: #F5F5F5 !important; /* Light background */
    color: #0B3041 !important; /* Dark blue text */
    border: 1px solid #0B3041 !important; /* Optional: Add a dark blue border */
    padding: 10px !important; /* Adjust padding as needed */
    margin: 0 !important; /* Remove any margins */
    border-radius: 0 !important; /* Remove border radius for a flush design */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Optional: Add a subtle shadow */
}

#wrapper + .popover {
    top: calc(100% + 10px) !important; /* Place it just below the wrapper */
    position: relative !important; /* If wrapper has a different structure */
}

/* Style text inside the popover */
.popover h1, .popover h2, .popover h3, 
.popover h4, .popover h5, .popover h6, 
.popover p, .popover li, .popover span {
    color: #0B3041 !important; /* Ensure all text inside is dark blue */
}

/* Optional: Add hover effects for links inside */
.popover a {
    color: #0B3041 !important; /* Default link color */
    text-decoration: none; /* Remove underline */
}

.popover a:hover {
    color: #FFA500 !important; /* Coral hover effect for links */
    text-decoration: underline; /* Optional: Add underline on hover */
}

/* Base Carousel Styling */
#carousel {
    background: none;
    left: auto;
    width: 100%; /* Full width */
    height: auto;
    max-width: 100%; /* Ensure responsiveness */
    margin: 0 auto; /* Center horizontally */
    padding-bottom: 0;
    position: relative; /* Allow absolute positioning of elements inside */
    overflow: hidden; /* Prevent overflow issues */
    display: flex; /* Use flexbox */
    align-items: flex-start;
    justify-content: center;
}

/* Position carousel arrows beside the image */
.carousel-control-prev,
.carousel-control-next {
    width: auto; /* Make the arrow container width minimal */
    position: relative;
    transform: translateY(-50%);
    z-index: 2;
}

.carousel-control-prev {
    left: 5px; /* Adjust spacing from the left edge */
}

.carousel-control-next {
    right: 5px; /* Adjust spacing from the right edge */
}

/* Adjust arrow icons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px; /* Set width for the arrow icon */
    height: 20px; /* Set height for the arrow icon */
    background-size: contain; /* Ensure the arrows fit properly */
}

/* Carousel Inner */
.carousel-inner {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 100%; /* Full width */
}

/* Carousel Images */
#carousel img {
    max-width: 90%; /* Slightly reduce image size for mobile */
    max-height: auto; /* Ensure proportional scaling */
    object-fit: contain; /* Maintain aspect ratio */
    padding: 0;
    margin: 0 auto; /* Center horizontally */
    display: block; /* Block-level for spacing */
}

/* Remove extra gap below the carousel image */
.carousel-item img {
    margin-bottom: 0; /* Remove unnecessary bottom margin */
    display: block; /* Ensure block-level rendering */
    object-fit: contain; /* Maintain aspect ratio */
}
@media (min-width: 768px) {
    .col-md-2, .col-md-3 {
        float: left;
        width: 25%;
    }
}

/* Fix for Mobile Viewport
@media (max-width: 768px) {
    #carousel {
        padding: 0;
        margin: 0 auto;
        width: 90%;
        display:block;
    }

    #carousel img {
        max-width: 100%;
        max-height: auto;
        margin: 0 auto;
    }

    .carousel-inner {
        justify-content: center;
        align-items: center;
    }
} */

/* Fix for Larger Breakpoints */
@media (min-width: 769px) {
    #carousel {
        max-width: 950px;
        margin: 0 auto;
    }
    
        .links .collapse.in,.links .title[aria-expanded=true] .collapse-icons .remove {
        display: block
    }
    
        .footer-container .links ul {
        margin-bottom: 0;
        background-color: #003041;
    }

    .footer-container .links ul>li {
        margin-bottom: 0;
        background-color: #003041;
        
    }
}*/

/* Style the search widget container */
#search_widget {
    display: flex;
    align-items: center; /* Vertically center contents */
    justify-content: flex-start; /* Horizontally align contents */
    padding: 0; /* Zero padding */
    margin: 10px; /* Adjust margin as needed */
    background-color: #F5F5F5; /* Black background */
    border: 0 solid #FFF; /* Simple square border */
    border-radius: 0; /* Ensure sharp corners */
    overflow: visible; /* Allow content to overflow */
}

/* Style the input box inside the search widget */
#search_widget input[type="text"] {
    font-size: 0.8em; /* Set font size */
    padding: 0px; /* Adjust padding for the input */
    margin: 0; /* Remove default margin */
    margin-top: 10px !important;
    border: 1px solid #F5F5F5; /* Simple border for the input */
    border-radius: 0; /* Remove rounded corners */
    background-color: #F5F5F5; /* Input background color */
    width: 100%; /* Set width to 175% of the container */
    /*transform: translateX(-30%);  Center the input box visually */
    box-sizing: border-box; /* Include padding and border in width */
}

#search_widget form i {
    position: relative;
    padding: .5rem;
}

/* Style the search icon */
#search_widget i.material-icons.search {
    font-size: 1em; /* Increase size of the search icon */
    color: #F5F5F5; /* Icon color (white for contrast) */
    margin-right: 0; /* Spacing between icon and search box */
    line-height: 1em; /* Align icon vertically */
    display: inline-flex; /* Ensure the icon stays inline with the input */
    align-items: center; /* Align icon within its own box */
    display: none; /* Ensure the icon is visible */
}

/* Ensure clear icon is hidden */
#search_widget .material-icons.clear {
    display: none !important; /* Completely hide the clear icon */
}

/* Add hover effect to the search and clear icons */
#search_widget .material-icons:hover {
    color: #F5F5F5; /* Change icon color on hover */
}

/* Optional: Add focus effect to the input box */
#search_widget input[type="text"]:focus {
    border-color: #F5F5F5; /* Highlight border on focus */
    /*outline: none;  Remove default focus outline */
}

/* Main logo and navigation area */
#header .header-nav {
    background-color: #0B3041 !important; /* Black background */
    color: #F5F5F5 !important; /* White text */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Drop shadow */
    border-bottom: 2px solid #f6f6f6; /* Optional border */
}

#header .header-nav a {
    color: #F5F5F5 !important; /* White menu links */
    text-decoration: none;
    font-weight: 600; /* Semi-bold */
    font-size: 0.8em;
}

#header .header-nav a:hover {
    color: #FFA500 !important; /* Orange hover effect */
}

/* MAIN BODY */
#wrapper {
    background-color: #F5F5F5 !important; /* Blue background */
    color: #0B3041 !important; /* White text */
}
/* Wrapper and main content */
#wrapper .container,
#wrapper .row,
.page-wrapper,
.content-wrapper {
    background-color: #F5F5F5 !important; /* Blue background for the main body */
    color: #0B3041 !important; /* White text */
}

/* Resize the banner image */
a.banner img {
    width: 750px; /* Set the width to 500px */
    height: auto; /* Automatically adjust height to maintain aspect ratio */
    display: block; /* Ensure no inline spacing issues */
    margin: 0 auto; /* Optional: Center the banner if needed */
}

.product-information{
    color: #0B3041 !important; /* Set font color to white */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    font-size: 1em !important; /* Set font size */
}

.product-information p, 
.product-information ul, 
.product-information li {
    color: #0B3041 !important; /* Ensure all text elements within are white */
}

#tab-content {
    font-family: 'Open Sans', sans-serif !important; /* Set font to Open Sans */
    font-size: 1em; /* Optional: Adjust font size */
    color: #0B3041 !important; /* Ensure text color is white */
    line-height: 1.5; /* Optional: Improve readability */
}

#tab-content p,
#tab-content li {
    font-family: 'Open Sans', sans-serif !important; /* Apply Open Sans to paragraph and list items */
    color: #0B3041 !important; /* Ensure text color is white */
}

.tabs {background-color: #F5F5F5; /* White background */
    border: 1px solid #E0E0E0; /* Light border */
    padding: 10px;
    color: #0B3041 !important;
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: inline-block;

}

/* Make subcategory images invisible and remove borders */
.subcategory-image {
    visibility: hidden; /* Makes the image invisible */
    border: none !important; /* Removes any borders */
    background: none !important; /* Removes any background */
    padding: 0 !important; /* Removes padding if any */
    margin: 0 !important; /* Removes margin if any */
    height: 0 !important; /* Ensures no height is taken up */
    width: 0 !important; /* Ensures no width is taken up */
}

/* Adjust height settings */
.block-category.card.card-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    height: auto !important; /* Reset predefined height */
    min-height: 0 !important; /* Reset minimum height */
}

/* Ensure no flexbox gaps */
.block-category-inner {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important; /* Ensure no predefined height */
}

/* For parent containers using flexbox */
#js-product-list-header {
    margin-bottom: 0 !important; /* Remove any bottom margin */
    height: auto !important; /* Reset any height or minimum height */
}

/* For general spacing between sections */
section {
    margin: 10px !important;
    padding: 0 !important;
}

/* Target the comment content */
.comment-content {
    color: #0B3041 !important; /* Set text color to white */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    font-size: 1em !important; /* Set font size */
    background-color: transparent !important; /* Optional: Make the background transparent */
}

/* Target the entire div background */
#empty-product-comment {
    background-color: #F5F5F5 !important; /* Match your page background color */
}

/* Target the button background */
#empty-product-comment .btn-comment {
    background-color: #0B3041 !important; /* Match the surrounding color */
    border: none !important; /* Remove any border */
    box-shadow: none !important; /* Remove shadow, if any */
}

/* Optional: Style the button text for better contrast */
#empty-product-comment .btn-comment i {
    color: #F5F5F5 !important; /* Darker text color for better readability */
}

/* Ensure headings inside comment content are also white */
.comment-content h4 {
    color: #F5F5F5 !important; /* Ensure headings are white */
    font-weight: bold; /* Optional: Make headings bold */
}

/* Optional: Style the paragraph inside the comment content */
.comment-content p {
    color: #0B3041 !important; /* Set paragraph text to white */
}

.thumbnail-container {
    background-color: #FFFFFF !important;
    font-family: 'Open Sans', sans-serif;
    color: #0B3041 !important;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
    
}

img.img-fluid.manufacturer-logo {
    border: none !important; /* Remove any borders */
    padding: 0 !important; /* Remove any padding */
    background-color: transparent !important; /* Ensure no background color is applied */
}
/* Reduce padding and margin for the block-category element */
.block-category.card.card-block {
    margin-bottom: 0 !important; /* Remove any bottom margin */
    padding-bottom: 0 !important; /* Remove any bottom padding */
}

div.card-block {
    background-color: #F5F5F5 !important; /* Blue background */
    color: #0B3041 !important; /* White text */
}

.cart-summary-products .js-show-details {
    color: #0B3041 !important; /* Replace with your desired color */
    font-size: 1rem; /* Adjust the size if needed */
    font-weight: bold; /* Optional: Make it stand out */
    text-decoration: none; /* Remove underline if present */
}

.cart-summary-products .js-show-details:hover {
    text-decoration: underline; /* Optional hover effect */
}

/* Fix product titles inside the show details dropdown */
#cart-summary-product-list .media-body .product-name a {
    color: #0B3041 !important; /* Apply the correct color */
    font-size: .85rem !important; /* Adjust font size */
    text-decoration: none !important; /* Remove underline */
}

/* Optional: Add hover effect for product titles */
#cart-summary-product-list .media-body .product-name a:hover {
    color: #FFA500 !important; /* Highlight on hover */
    text-decoration: underline !important; /* Add underline on hover */
}

.card-block.cart-summary-subtotals-container,
.card-block.cart-summary-totals {
    background-color: #F5F5F5 !important; /* Blue background */
    color: #0B3041 !important; /* White text */

    padding: 10px; /* Optional: Add some spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect dimensions */
}

/* Style text inside the container */
.card-block.cart-summary-subtotals-container td,
.card-block.cart-summary-totals td {
    color: #0B3041 !important; /* White text for table rows */
    text-align: left; /* Align text to the left */
}

.card-block.cart-summary-subtotals-container table {
    border-collapse: collapse !important; /* Ensure no extra space between cells */
    border: none !important; /* Remove the outer table border */
    background: transparent !important; /* Remove any background color */
}

.card-block.cart-summary-subtotals-container table td,
.card-block.cart-summary-subtotals-container table th {
    border: none !important; /* Remove all borders from the cells */
    box-shadow: none !important; /* Ensure no shadow appears */
    background: transparent !important; /* Remove cell backgrounds */
}

.card-block.cart-summary-subtotals-container table td {
    padding: 5px !important; /* Add padding for neat spacing (optional) */
}


div.col-md-12.summary-selected-carrier {
    background-color: #ffffff !important; /* Set the background to blue */
    color: #0B3041 !important; /* Set text color to white */
    padding: 10px; /* Optional: Add some spacing */
    border: 0 solid #0B3041 !important; /* Single white border */
    border-radius: 5px !important; /* Rounded corners */
   
}

.order-confirmation-table {
    background-color: #ffffff !important;
    color: #0B3041 !important;
    padding: 10px;
    border: 0 solid #0B3041 !important; /* Single white border */
    border-radius: 5px !important; /* Rounded corners */
}

#order-confirmation-table .order-line row {
    background-color: #ffffff !important;
    color: #0B3041 !important;
    padding: 10px;
    border: 0 solid #0B3041 !important;
}

tr.total-value.font-weight-bold {
    background-color: #ffffff !important;
    color: #0B3041 !important;
    border: 0 solid #0B3041 !important; /* Single white border */
    border-radius: 5px !important; /* Rounded corners */
}

tr.total-value.font-weight-bold td {
 
    padding: 10px;
    border: 0 solid #0B3041 !important; /* Single white border */
    border-radius: 5px !important; /* Rounded corners */
}

/* Footer */
/* Footer container and rows */
#footer .container,
#footer .row {
    background-color: #0B3041 !important;
    color: #F5F5F5 !important;
}

footer p.h3 {
    font-family: 'Major Mono Display', monospace !important; /* Keep consistent font */
    background-color: #0B3041 !important; /* Black background */
    color: #F5F5F5 !important; /* White text */
    font-size: 1.1em !important; /* Set font size */
    padding: 0; /* Optional: Add padding for spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
}

footer p.h4 {
    font-family: 'Major Mono Display', monospace !important; /* Keep consistent font */
    background-color: #0B3041 !important; /* Black background */
    color: #F5F5F5 !important; /* White text */
    font-size: 1.1em !important; /* Set font size */
    padding: 0; /* Optional: Add padding for spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
}

footer p.text-sm-center {
    font-family: 'Open Sans', sans-serif !important; /* Keep consistent font */
    background-color: #0B3041 !important; /* Black background */
    color: #F5F5F5 !important; /* White text */
    font-size: 0.7em !important; /* Set font size */
    padding: 0; /* Optional: Add padding for spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
}

a {
    color: #007AD6 !important; /* White footer links */
    text-decoration: none;
}

#cart-summary-product-list .product-price {
    color: #0B3041 !important; /* Change the price text color to light white */
    font-weight: bold; /* Optional: Make the price stand out */
}

footer a {
    color: #F5F5F5 !important; /* White footer links */
    text-decoration: none;
}

footer a:hover {
    color: #FFA500 !important; /* Orange hover effect for footer links */
}

/* Footer panels */
footer .block,
footer .footer-container,
footer .footer-top,
footer .footer-bottom {
    background-color: #0B3041 !important; /* Black background */
    color: #F5F5F5 !important; /* White text */
}

/* Footer newsletter widget */
.footer-newsletter,
.footer-newsletter input,
.footer-newsletter button {
    background-color: #0B3041 !important; /* Black background */
    color: #F5F5F5 !important; /* White text */
    margin: 15px;
}

.footer-newsletter input {
    border: 1px solid #0B3041; /* White border */
    color: #F5F5F5; /* Blue text */
}

.footer-newsletter button {
    background-color: #0B3041 !important; /* Blue button */
    color: #F5F5F5 !important; /* White text */
}

.footer-newsletter form {
    background-color: #0B3041 !important; /* Blue button */
    color: #F5F5F5 !important; /* White text */
}

.tax-shipping-delivery-label {
    display: none !important; /* Completely hide the element */
    visibility: hidden !important; /* Ensure it's not visible */
}

#blockcart-modal .cart-content .page-content.page-cms ul.product-total, #blockcart-modal .cart-content p.product-total, .page-content.page-cms #blockcart-modal .cart-content ul.product-total {
    padding: .5rem;
    background-color: #F5F5F5;
}

.product-description span {
    background-color: #35B1AE  !important; /* Blue background */
    color: #f5f5f5; /* White text */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    /*font-size: 1em !important;  Set the font size to 16px */
    padding: 5px; /* Optional: Add padding */
    display: block; /* Ensure it behaves like a block element */
    border-radius: 5px; /* Optional: Rounded corners */
}

.product-description {
    background-color: none !important; /* Background color */
    color: #0B3041 !important; /* Text color */
    font-family: 'Open Sans', sans-serif !important;
    overflow: visible !important;
   
}

.product-miniature .product-price-and-shipping {
    color: #fffff;
    background-color: #35b1ae;
    border-radius: 5px;
    text-align: center
}

.product-miniature .product-price-and-shipping .regular-price {
    color: #0B3041;
    text-align: center
}

.product-miniature .product-price-and-shipping .price {
    font-weight: 700;
    color: #fff;
    text-align: center
}

.product-prices {
    background-color: #f5f5f5 !important; /* Background color */
    color: #35B1AE !important; /* Text color */
    font-family: 'Open Sans', sans-serif !important;
    overflow: visible !important;
   
}

.page-content.page-cms {
    padding: 1.25rem;
    text-align: justify;
    background: #f5f5f5;
}


/* Product price styling */
.product-prices .current-price {
    color: #35B1AE !important; /* Text color */
    font-weight: bold; /* Ensure bold for price */
}

h1 {
    font-family: 'Major Mono Display', monospace !important; /* Major Mono Display font */
    background-color: transparent !important;
    color: #0B3041 !important; /* White text */
    font-size: 2em; /* Adjust size if needed */
}

.current-price {
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    background-color: #F5F5F5 !important; /* Page background */
    font-size: 1.3em;
    color: #0B3041 !important; /* Default text color */
}

.breadcrumb {
    color: #0B3041 !important; /* Default text color (white) */
}

.breadcrumb a {
    color: #0B3041 !important; /* White text for first-level links */
    text-decoration: none;
}

.breadcrumb a + span {
    color: #0B3041 !important; /* Black text for second level */
}

.breadcrumb a:hover {
    color: #FFA500 !important; /* Optional: Orange hover effect */
}

.breadcrumb li {
    color: #0B3041 !important; /* Black text for breadcrumb list items */
}

/* Center the wishlist icon inside the button */
.wishlist-button-add {
    display: flex; /* Enable flexbox for centering */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    padding: 0; /* Remove unnecessary padding */
    border: none; /* Remove button border */
    background-color: #0B3041; /* Default circular background (white) */
    border-radius: 50%; /* Ensure circular shape */
    width: 25px; /* Set width for circular button */
    height: 25px; /* Set height for circular button */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Style the heart icon inside the button */
.wishlist-button-add .material-icons {
    font-size: 20px; /* Adjust icon size */
    color: #F5F5F5; /* Default heart icon color (white) */
}

/* Change circular background to orange on hover while keeping the heart white */
.wishlist-button-add:hover {
    background-color: #F5F5F5 !important; /* Change circular background to orange */
    color: #0B3041 !important;
    transition: all 0.3s ease;
}

.wishlist-button-add:hover .material-icons {
    /* Keep the heart icon white */
    background-color: #F5F5F5 !important; /* Change circular background to orange */
    color: #0B3041 !important;
    transition: all 0.3s ease;
}

/* General styling for the cart preview */
.blockcart.cart-preview {
    background-color: #F5F5F5 !important; /* Default to blue background */
    color: #0B3041 !important; /* Default to white text */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    font-size: 1em !important; /* Ensure consistent font size */
    border: none; /* Optional: Remove border */
    padding: 15px; /* Optional: Add padding for spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
    display: flex; /* Align content properly */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    
}

/* Styling for empty cart (inactive) */
.blockcart.cart-preview.inactive {
    background-color: #0B3041 !important; /* Black background for empty cart */
    color: #F5F5F5 !important; /* White text for contrast */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    font-size: 14px !important; /* Ensure consistent font size */
}

/* Styling for cart with items (active) */
.blockcart.cart-preview:not(.inactive) {
    background-color: #0B3041 !important; /* Blue background for cart with items */
    color: #F5F5F5 !important; /* White text for contrast */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    font-size: 14px !important; /* Ensure consistent font size */
}

/* Style links inside the cart */
.blockcart.cart-preview a {
    color: #F5F5F5 !important; /* White text for links */
    text-decoration: none;
}

/* Hover effect for links */
.blockcart.cart-preview a:hover {
    color: #FFA500 !important; /* Optional: Change link color on hover */
}

/* Cart Container Styling */
.card.cart-container {
    background-color: #F5F5F5 !important; /* Set blue background */
    color: #0B3041 !important; /* Set white text */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    font-size: 14px !important; /* Ensure consistent font size */
    padding: 15px; /* Optional: Add some spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
}

.media .product-name {
    color: #0B3041 !important; /* Set text color to para-text */
    font-size: 1rem; /* Optional: Adjust font size */
    font-weight: normal; /* Optional: Adjust font weight */
    text-decoration: none; /* Remove underline if any */
}

.media .product-name:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}


/* Cart Summary Styling */
.card.cart-summary {
    background-color: #F5F5F5 !important; /* Set blue background */
    color: #0B3041 !important; /* Set white text */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    padding: 15px; /* Optional: Add some spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
}

/* JavaScript-Driven Cart Element Styling */
.card.js-cart {
    background-color: #F5F5F5 !important; /* Set blue background */
    color: #0B3041 !important; /* Set white text */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */

    padding: 15px; /* Optional: Add some spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
}

a.label {
    background-color: #F5F5F5; /* Adjust to your desired background color */
    color: #0B3041; /* Adjust to your desired text color */
    padding: 5px 10px; /* Add padding for a better appearance */
    border-radius: 3px; /* Add rounded corners */
    text-decoration: none; /* Remove underline */
    font-size: 1rem; /* Adjust font size */
    display: inline-block; /* Ensure proper alignment */
    transition: all 0.3s ease; /* Add a hover transition effect */
}

a.label:hover {
    background-color: #9FC9BF; /* Background color on hover */
    color: #0B3041; /* Text color on hover */
}


/* Checkout Step Styling */
body#checkout section.checkout-step {
    padding: .625rem;
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
    background-color: #F5F5F5 !important; /* Set blue background */
    color: #0B3041 !important; /* Set white text */
}

.contact-form{
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    width: 100% !important;
    background-color: #F5F5F5 !important;
    color: #0B3041 !important;
}

.category h1.h1 {
    margin-bottom: 0 !important; /* Adjust this value to reduce the spacing */
    padding-bottom: 0 !important; /* Ensure no padding is added */
}

.category-header {
    margin-bottom: 0 !important; /* Ensure no additional margin below the header */
    padding-bottom: 0 !important; /* Ensure no additional padding below the header */
}
#left-column {
    display: none !important;
}


/* Buttons */
button,
.btn {
    background-color: #35b1ae !important;
    color: #F5F5F5 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    /*text-transform: uppercase;*/
    font-weight: 400;
    padding: 10px 15px;
    cursor: pointer;
}

button:hover,
.btn:hover {
    background-color: #F5F5F5 !important;
    color: #35b1ae !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Drop shadow */
    border-radius: 5px;
}
.featured-products h2.products-section-title {
    display: none !important;
}

/* Remove the ::after pseudo-element */
.block-category.card.card-block::after {
    content: none !important;
    display: none !important;
}

/* Remove margins and paddings causing spacing */
.block-category.card.card-block {
    margin: 0 !important;
    padding: 0 !important;
}

/* Adjust the inner container to ensure no extra spacing */
.block-category-inner {
    margin: 0 !important;
    padding: 0 !important;
}

/* Adjust the js-product-list-header for proper alignment */
#js-product-list-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}



#content-wrapper {
    width: 100% !important; /* Make the content-wrapper span the full width */
    max-width: 100% !important; /* Remove any predefined max-width */
    margin: 0 auto !important; /* Center align the content */
    padding: 0 !important; /* Remove extra padding */
}


/* Target and minimize the padding below the block category */
#products {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Remove any leftover space between sections */
.section {
    margin: 0 !important;
    padding: 0 !important;
}

/* General tab styling for better visibility */
.nav-tabs .nav-item .nav-link { 
background-color: #F5F5F5;
    color: #0B3041;
    border: 1px solid #E0E0E0;
    padding: 10px 15px;
    font-weight: bold;
    text-transform: uppercase;
    border: none !important;
}

/* Ensure inactive tabs text is visible */
.nav-tabs .nav-item .nav-link:not(.active) {
    color: #0B3041 !important; /* Light gray/white text for inactive tabs */
    background-color: #F5F5F5 !important; /* Dark blue background */
    border: none !important; /* Optional: remove border for a cleaner look */
}

/* Change the selected tab color on hover */
.nav-tabs .nav-item .nav-link:hover {
    background-color: #F5F5F5;
    color: #0B3041;
 /*    border-bottom: 2px solid #FFA500; Highlight with orange */

}

/* Keep the active tab highlighted with orange when selected */
.nav-tabs .nav-item .nav-link.active {
    
    background-color: #F5F5F5; /* Dark blue */
    color: #0B3041;
    border-bottom: 2px solid #FFA500;
    /* 
    background-color: #FFA500 !important; 
    color: #F5F5F5 !important; 
    border: none !important; 
}


/* Style the dropdown list container */
.select-dropdown, .dropdown-menu, .form-control {
    color: #0B3041 !important; /* Dark blue text */
    background-color: #F5F5F5 !important; /* White background for contrast */
    font-family: 'Open Sans', sans-serif !important; /* Ensure font consistency */
}

/* Style each dropdown item */
.dropdown-menu .dropdown-item {
    color: #0B3041 !important; /* Dark blue text */
    background-color: transparent !important; /* Transparent background */
}

/* Style hovered or focused dropdown items */
.dropdown-menu .dropdown-item:hover, 
.dropdown-menu .dropdown-item:focus {
    background-color: #FFA500 !important; /* Coral background on hover */
    color: #0B3041 !important; /* White text on hover */
}

/* Style the active/selected dropdown item */
.dropdown-menu .dropdown-item.active {
    background-color: #0B3041 !important; /* Dark blue background for selected */
    color: #0B3041 !important; /* White text for selected item */
}

/* Style the dropdown toggle button */
button.dropdown-toggle, 
.form-control {
    color: #0B3041 !important; /* Dark blue text */
    background-color: #F5F5F5 !important; /* White background */
    border: 1px solid #0B3041 !important; /* Add a border for visibility */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font */
}

a.quick-view.js-quick-view {
    display: none !important; /* Hides the Quick View button */
}

a.quick-view.js-quick-view, 
a.quick-view.js-quick-view i.material-icons, 
a.quick-view.js-quick-view::before, 
a.quick-view.js-quick-view::after {
    display: none !important; /* Completely hide the Quick View link and icons */
    visibility: hidden !important; /* Ensure it's not clickable */
}

.highlighted-informations.no-variants {
    display: none !important; /* Hide the entire highlighted-informations container */
}


/* Product Titles */

/* Product Card Container */
.js-product {
    background-color: #F5F5F5 !important; /* Light grey background for product cards */
    color: #0B3041 !important; /* Dark blue text for all text inside */
    border-radius: 5px !important; /* Optional: Add rounded corners */
    padding: 0 !important; /* Optional: Add spacing inside the card */
    margin: 19px !important; /* Reduce margin for tighter spacing */
    width: 17% !important; /* Set the width to fit four cards per row */
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1) !important; /* Optional: Add a subtle shadow for a modern look */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Optional: Smooth hover effect */
    display: flex !important; /* Enable flexbox for the card */
    flex-direction: column !important; /* Stack children vertically */
    justify-content: space-between !important; /* Push content to the top and bottom */
    align-items: center !important;
    height: 100% !important; /* Ensure the card takes up the full height */
    vertical-align: top !important; /* Align cards properly */
    flex: 1 1 22% !important; /* Adjust card width, e.g., 4 cards per row with a gap */
    max-width: 20% !important; /* Ensure max width matches flex-basis */
    box-sizing: border-box !important; /* Include padding and border in width */
    overflow: visible !important;

}

.wishlist-toast.success {
    background-color: #f5f5f5 !important;
    border-color: #24b9d7 !important;
    color: #F5F5F5 !important;
}

.col-lg-5 {
    display:none !important;
}

/* Adjust the container to flex layout */
#js-product-list-top {
    display: flex; /* Enable flexbox */
    justify-content: flex-end; /* Align content to the right */
    align-items: left; /* Vertically align items */
    width: 100%; /* Ensure it spans the full width */
    padding: 0; /* Remove unnecessary padding */
    margin: 0; /* Reset margins */
    box-sizing: border-box; /* Include padding and borders */
}

/* Ensure the inner sort-by-row is properly aligned */
.row.sort-by-row {
    display: flex; /* Enable flexbox */
    justify-content: flex-end; /* Align content to the right */
    align-items: center; /* Vertically center items */
    flex-grow: 1; /* Ensure it takes up available space */
    gap: 10px; /* Add spacing between "Sort by" text and dropdown */
}

/* Style for the "Sort by" text */
.row.sort-by-row span {
    font-size: 0.9rem; /* Adjust font size */
    color: #0B3041; /* Dark blue color */
    margin-right: 5px; /* Space between text and dropdown */
}

/* Target the dropdown container */
.row.sort-by-row .dropdown {
    min-width: 250px; /* Adjust to fit content */
    width: auto;
    background-color: #F5F5F5 !important;
    color: #0B3041 !important;
}

/* Style the dropdown button */
.row.sort-by-row .dropdown button {
    background-color: #F5F5F5 !important;
    color: #0B3041 !important;
    font-size: 0.8rem; /* Adjust font size */
    border: 1px solid #0B3041 !important; /* Optional: Add border for contrast */
    border-radius: 5px; /* Optional: Rounded corners */
    padding: 5px 10px; /* Adjust padding for spacing */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover effects */
}

/* Style the dropdown menu */
.row.sort-by-row .dropdown-menu {
    background-color: #F5F5F5 !important;
    font-size: 0.8rem; /* Adjust font size */
    color: #0B3041 !important;
    border: 1px solid #0B3041 !important; /* Optional: Add border for contrast */
    border-radius: 5px; /* Optional: Rounded corners */
}





/* Style dropdown items */
.row.sort-by-row .dropdown-menu .dropdown-item {
    background-color: #F5F5F5 !important; /* Light background */
    color: #0B3041 !important; /* Dark text */
    font-size: 0.9rem; /* Adjust font size */
}

/* Hover effect for dropdown items */
.row.sort-by-row .dropdown-menu .dropdown-item:hover {
    background-color: #FFA500 !important; /* Orange hover background */
    color: #F5F5F5 !important; /* White text on hover */
}



/* Hover Effect for Product Cards */
.js-product:hover {
    transform: translateY(-5px); /* Slightly lift the card on hover */
}

.products.row {
    display: flex !important;
    flex-wrap: wrap !important; /* Allow wrapping to new rows */
    justify-content: center !important; /* Even spacing between cards */
    gap: 20px;
    align-items: stretch !important; /* Align items to the top */
    margin: 0 auto !important; /* Center container */
}

html body .products.row .js-product .product-title {
    all: unset !important; /* Reset all inherited styles */
    font-family: 'Open Sans', sans-serif !important;
    color: #0B3041 !important;
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.2em !important;
    text-align: center !important;
    word-break: break-word !important;
    height: auto !important;
    max-width: 100% !important;
}

#product-modal .modal-content .modal-body .js-modal-product-cover.product-cover-modal {
    width: 650px !important;
    height: auto !important; /* Ensure it scales proportionally */
    max-width: 100%; /* Prevent overflow on smaller screens */
}

.product-cover .layer .zoom-in {
    font-size: 1rem;
    color: #fff;
}

.js-product .thumbnail-container {
    background-color: #F5F5F5 !important; /* Remove any background */
    margin-bottom: 0 !important; /* Add some spacing below the title */
    padding: 10px !important; /* Remove any padding */
    min-height: 350px !important;
    height: auto !important;
}

.js-product .thumbnail-top {
    background: none !important; /* Remove any background */
    margin-bottom: 0 !important; /* Add some spacing below the title */
    padding: 10px !important; /* Remove any padding */
    height: auto !important;
}

.js-product .product-price-and-shipping {
    display: flex;
    justify-content: space-evenly;
    align-items: center;/* Adjust spacing between RRP and sale price */
    flex-wrap: nowrap; /* Prevent wrapping */

}
/* Ensure the original price (RRP) stays inline and is crossed out */
.product-price-and-shipping .regular-price {
    display: inline-block; /* Prevent breaking onto a new line */
    text-decoration: line-through;
    color: #888;
    font-size: 0.7em;
    font-weight: normal;
    margin-right: 0;
    white-space: nowrap;
}

/* Ensure the sale price stays inline and is properly formatted */
.product-price-and-shipping .price {
    display: inline-block;
    font-weight: bold;
    font-size: 1em;
    background: none !important; /* Remove background color if it's styled as a button */
    padding: 0 !important;
    white-space: nowrap;
}


/* Optional: Reset inherited styles that might affect the color */
.js-product .product-title a {
    color: inherit !important; /* Ensure links inherit the color */
    text-decoration: none; /* Remove underline for cleaner appearance */
}

/* Price Text */
.js-product .price {
    color: #0B3041 !important; /* Dark blue for product price */
    font-weight: bold !important; /* Make the price stand out */
    font-size: 0.9em !important; /* Slightly larger font for better emphasis */
    padding: 5px !important;
}

/* Customer rating adjustment */
.js-product .product-list-reviews {
    display: none !important;
}

.js-product .product-description {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center "important";
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Buttons (e.g., Wishlist, Add to Cart) */
.js-product button,
.js-product .btn {
    background-color: #0B3041 !important; /* Dark blue background for buttons */
    color: #F5F5F5 !important; /* Light grey text for buttons */
    border: none !important; /* Remove button border */
    padding: 5px 10px !important; /* Adjust button padding */
    border-radius: 5px !important; /* Optional: Add rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
}

.js-product button:hover,
.js-product .btn:hover {
    background-color: #F5F5F5 !important; /* Coral color on hover */
    color: #0B3041 !important; /* White text on hover */
}

/* Optional: New Tag Styling */
.js-product .product-flags .new {
    background-color: #FFA500 !important; /* Coral background for 'NEW' tag */
    color: #F5F5F5 !important; /* White text for 'NEW' tag */
    border-radius: 2px !important; /* Optional: Add rounded corners to the tag */
    font-weight: bold !important; /* Make the text bold */
}
/* Remove margin and padding around the entire category section
.block-category.card.card-block {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important; /* Remove any border adding visual spacing
}*/

/* Adjust spacing for the product list header */
#js-product-list-header {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    line-height: normal !important; /* Reset line-height */
}

/* Style for dropdown menu links */
a.select-list.js-search-link {
    color: #0B3041 !important; /* Dark blue text */
    background-color: #FFFFFF !important; /* White background for the dropdown items */
    font-family: 'Open Sans', sans-serif !important; /* Ensure consistent font family */
    padding: 5px 10px; /* Add padding for better readability */
    text-align: left; /* Align text to the left */
    display: block; /* Ensure links span the full width */
}

/* Hover and focus state */
a.select-list.js-search-link:hover,
a.select-list.js-search-link:focus {
    background-color: #FFA500 !important; /* Coral background on hover */
    color: #FFFFFF !important; /* White text on hover */
}

/* Active/selected state */
a.select-list.js-search-link.active {
    background-color: #F5F5F5 !important; /* Dark blue background for active link */
    color: #FFFFFF !important; /* White text for active link */
}

/* Quantity Increment/Decrement Buttons */
.btn-touchspin {
    background-color: #F5F5F5 !important; /* Dark blue background */
    color: #0B3041 !important; /* Light gray/white text */
    border: 1px solid #0B3041 !important; /* Border color matching the background */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
}

.btn-touchspin:hover {
    background-color: #F5F5F5 !important; /* Orange on hover */
    color: #FFA500 !important; /* White text */
}

/* Quantity Input Box */
.input-group input#quantity_wanted {
    background-color: #F5F5F5 !important; /* Light gray/white background */
    color: #0B3041 !important; /* Dark blue text */
    border: 1px solid #0B3041 !important; /* Border color matching the theme */
    border-radius: 5px !important; /* Rounded corners */
    padding: 5px !important; /* Add spacing for better appearance */
    text-align: center; /* Center the text inside the input */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
    transition: border-color 0.3s ease, background-color 0.3s ease; /* Smooth transitions */
}

/* Style the touchspin buttons */
.bootstrap-touchspin .btn {
    background-color: #F5F5F5 !important; /* Use a custom background color */
    color: #0B3041 !important; /* Use a custom text color */
    border: none !important; /* Remove borders */
    border-radius: 0 !important; /* Optional: remove rounded corners */
    padding: 5px 10px !important; /* Adjust button padding */
    font-weight: bold; /* Make the text bold */
    box-shadow: none !important; /* Remove any shadow */
}

/* Style the quantity input box */
.bootstrap-touchspin .form-control {
    background-color: #F5F5F5 !important; /* Use a custom background color */
    color: #0B3041 !important; /* Use a custom text color */
    border: 1px solid #0B3041 !important; /* Add a border */
    padding: 5px !important; /* Adjust padding */
    text-align: center; /* Center-align the quantity number */
    box-shadow: none !important; /* Remove any shadow */
}

/* Ensure spacing and alignment in the cart area */
.cart-grid .qty {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center-align horizontally */
    gap: 10px; /* Add spacing between elements */
}


/* Add to Cart Button */
.btn-primary.add-to-cart {
    background-color: #0B3041 !important; /* Dark blue background */
    color: #F5F5F5 !important; /* Light gray/white text */
    border: none !important; /* Remove border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
}

.btn-primary.add-to-cart:hover {
    background-color: #F5F5F5 !important; /* Orange background on hover */
    color: #FFA500 !important; /* White text */
}

/* Ensure no extra margin or padding in parent containers */
#main {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix spacing between the products section and header */
#products {
    margin-top: -20px !important; /* Use negative margin to manually pull it closer */
    padding-top: 0 !important;
}

/* Adjust styling for order summary headers */
#order-items .card-title {
    font-size: 1rem !important; /* Smaller font size */
    font-weight: 600 !important; /* Keep bold but lighter */
    text-transform: uppercase !important; /* Ensure uppercase text */
    color: #0B3041 !important; /* Use appropriate text color */
    margin-bottom: 0.25rem !important; /* Reduce spacing */
    text-align: center; /* Center align text */
}

/* Optional: Add a border or spacing for better aesthetics */
#order-items .row {
    background-color: #ffffff !important; /* Blue background */
    border-bottom: 1px solid #ddd; /* Subtle border between rows */
    padding: 0.5rem 0; /* Add some vertical padding */
}


#content {
    background-color: #F5F5F5 !important; /* Blue background */
    text-align: left !important; /* Force left alignment for H1 elements */
    color: #0B3041 !important; /* White text */
    padding: 20px; /* Optional: Add padding for spacing */
    border-radius: 5px; /* Optional: Rounded corners */
}

#content p {
    color: #0B3041 !important; /* White text */
    font-size: 1.1em !important; /* Set font size */
    text-align: left !important; /* Force left alignment for H1 elements */
    line-height: 1.6; /* Optional: Improve readability with line spacing */
}

#content .category-title {
    margin-bottom: 10px !important; /* Reduce the bottom margin of the category title */
}

#content .category-description {
    margin-bottom: 10px !important; /* Reduce the bottom margin of the category description */
}

#content .products-container {
    margin-top: 0 !important; /* Remove any top margin from the products container */
    padding-top: 0 !important; /* Remove any top padding if present */
}

.products.row {
    display: flex;
    justify-content: space-between; /* Ensures even spacing between cards */
    flex-wrap: wrap; /* Allows cards to wrap if needed */
    gap: 20px; /* Optional: Adjust the gap between cards */
}


section.page-content.page-cms.page-cms-3 {
    color: #0B3041 !important; /* Set default text color to white */
}

section.page-content.page-cms.page-cms-3 p, 
section.page-content.page-cms.page-cms-3 ul li {
    color: #0B3041 !important; /* Ensure paragraphs and list items have white text */
}

section.page-content.page-cms.page-cms-3 hr {
    border-color: #0B3041 !important; /* Optional: Change horizontal rule color to white */
}

section.page-content.page-cms.page-cms-2 {
    color: #0B3041 !important; /* Set default text color to white */
}

section.page-content.page-cms.page-cms-2 p, 
section.page-content.page-cms.page-cms-2 ul li {
    color: #0B3041 !important; /* Ensure paragraphs and list items have white text */
}

section.page-content.page-cms.page-cms-2 hr {
    border-color: #0B3041 !important; /* Optional: Change horizontal rule color to white */
}



/* TABLES */

table {
    border-collapse: collapse;
    width: 100%;
}

table th,
table td {
    border: 0 solid #0B3041 !important; /* White borders */
    padding: 10px;
    text-align: left;
    color: #0B3041 !important; /* White text */
}

table th {
    background-color: #F5F5F5 !important; /* Blue table header */
    font-weight: 600;
}

/* RESPONSIVENESS 

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}*/

/* Quick View Container */
.quick-view-container {
    background-color: #F5F5F5 !important; /* Set the background to your blue color */
    color: #0B3041 !important; /* Set the default text color to your dark blue */
    padding: 20px; /* Add some padding for spacing */
    border-radius: 10px; /* Optional: Add rounded corners */
}

/* Quick View Header */
.quick-view-container h1,
.quick-view-container h2,
.quick-view-container h3,
.quick-view-container h4,
.quick-view-container h5,
.quick-view-container h6 {
    color: #F5F5F5 !important; /* Set header text color to light white */
    font-weight: bold; /* Ensure headers are bold */
    margin-bottom: 15px; /* Add spacing below headers */
}

/* Quick View Body Text */
.quick-view-container p,
.quick-view-container span,
.quick-view-container li {
    color: #0B3041 !important; /* Set body text color to dark blue */
    font-size: 1em; /* Adjust font size for readability */
}

/* Quick View Links */
.quick-view-container a {
    color: #0B3041 !important; /* Default link color to dark blue */
    text-decoration: none; /* Remove underline for links */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/* Quick View Hover Links */
.quick-view-container a:hover {
    color: #FFA500 !important; /* Set hover link color to coral */
    text-decoration: underline; /* Optional: Underline on hover */
}

/* Quick View Buttons */
.quick-view-container button,
.quick-view-container .btn {
    background-color: #FFA500 !important; /* Coral button background */
    color: #F5F5F5 !important; /* White button text */
    border: none; /* Remove borders */
    padding: 10px 15px; /* Adjust padding for buttons */
    border-radius: 5px; /* Optional: Rounded corners for buttons */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.quick-view-container button:hover,
.quick-view-container .btn:hover {
    background-color: #0B3041 !important; /* Dark blue hover background */
    color: #F5F5F5 !important; /* White hover text */
}

/* Quick View Images */
.quick-view-container img {
    max-width: 100%; /* Ensure images are responsive */
    border-radius: 5px; /* Optional: Add rounded corners */
    margin-bottom: 15px; /* Spacing below images */
}

/* Quick View Borders and Dividers */
.quick-view-container hr {
    border-color: #F5F5F5; /* Light white for horizontal lines */
    margin: 15px 0; /* Spacing for horizontal lines */
}

/* Quick View Input Fields */
.quick-view-container input,
.quick-view-container textarea {
    background-color: #F5F5F5 !important; /* Light white background for inputs */
    color: #0B3041 !important; /* Dark blue text for inputs */
    border: 1px solid #0B3041; /* Dark blue border */
    padding: 10px; /* Padding for better spacing */
    border-radius: 5px; /* Optional: Rounded corners */
}

.quick-view-container input:focus,
.quick-view-container textarea:focus {
    outline: none; /* Remove default focus outline */
    border-color: #FFA500; /* Coral border on focus */
}

/* General Hover Effects */
.quick-view-container:hover {
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3); /* Subtle shadow effect */
}

/* Modal Background */
.modal-content {
    background-color: #F5F5F5 !important; /* Blue background */
    color: #0B3041 !important; /* Dark blue text for contrast */
    border-radius: 10px; /* Optional: Add rounded corners */
    padding: 20px; /* Optional: Add padding for better spacing */
}

/* Modal Header */
.modal-header {
    background-color: #F5F5F5 !important; /* Blue background */
    color: #0B3041 !important; /* Dark blue text for contrast */
    border-bottom: none; /* Remove bottom border */
    font-weight: bold; /* Optional: Make text bold */
}

.modal-title {
    background-color: #F5F5F5 !important; /* Blue background */
    color: #0B3041 !important; /* Dark blue text for contrast */
    border-bottom: none; /* Remove bottom border */
    font-weight: bold; /* Optional: Make text bold */
}

h6.product-name {    
    background-color: #0B3041 !important; /* Keep dark blue background */
    color: #FFFFFF !important; /* White text */
    border-bottom: none; /* Remove bottom border */
    font-weight: bold; /* Optional: Make text bold */
}

.cart-container .label {
    background-color: #F5F5F5; /* Change this to your desired background color */
    color: #0B3041; /* Change this to your desired text color */
    padding: 10px 20px; /* Add padding for a better look */
    border-radius: 5px; /* Add rounded corners */
    text-decoration: none; /* Remove underline */
    font-size: 1rem; /* Adjust font size */
    display: inline-block; /* Ensure it behaves like a button */
    transition: all 0.3s ease; /* Add a smooth hover effect */
}

.cart-container .label:hover {
    background-color: #F5F5F5; /* Change this to the hover background color */
    color: #FFA500; /* Change this to the hover text color */
}
.product-line-info a {
    color: #0B3041 !important; /* Apply the desired text color */
    font-weight: bold; /* Optional: Make the title bold */
    text-decoration: none; /* Remove underline if present */
}

/* Optional: Change color on hover */
.product-line-info a:hover {
    color: #FFA500 !important; /* Use a different color for hover */
    text-decoration: underline; /* Optional: Add underline on hover */
}


/* Item Name in Modal */
.modal-body .product-line-info {
    color: #0B3041 !important; /* White text for the item name */
    font-weight: bold; /* Optional: Make item name bold */
}

/* Optional: Adjust for links inside modal */
.modal-body .product-line-info a {
    background-color: #F5F5F5 !important; /* Keep dark blue background */
    color: #0B3041 !important; /* Ensure any links are also white */
    text-decoration: none; /* Remove underline from links */
}

.modal-body .product-line-info a:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
}

/* Optional: Style for buttons in the modal */
.modal-footer .btn {
    background-color: #FFA500 !important; /* Coral button background */
    color: #0B3041 !important; /* White text on buttons */
    border: none; /* Remove border */
    padding: 10px 15px; /* Add padding for better spacing */
    border-radius: 5px; /* Add rounded corners */
}

.modal-footer .btn:hover {
    background-color: #0B3041 !important; /* Dark blue hover background */
    color: #0B3041 !important; /* White text on hover */
}

/* Style for GDPR blocks to match the main wrapper background */
.col-xs-12.psgdprinfo17 {
    background-color: #F5F5F5 !important; /* Use the primary color variable for consistency */
    border: none; /* Remove any borders if they exist */
    box-shadow: none; /* Remove shadows for a flat design */
    padding: 20px; /* Add padding for spacing, adjust as necessary */
    color: #F5F5F5; /* Adjust text color for readability */
}

#custom-text {
    background: transparent; /* Ensure no background color */
    display: flex; /* Enable flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: auto; /* Set height to fill the viewport */
    width: 100%; /* Make the wrapper take the full width */
    text-align: center; /* Align text if any */
    margin: 0 auto; /* Center the container itself */
    padding: 0; /* Remove any padding */
    box-sizing: border-box; /* Ensure padding doesn’t affect dimensions */
}
#custom-text img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    border: none; /* Remove border from the image */
    display: block; /* Ensure no inline spacing */
    margin: auto; /* Remove any margin from the image */
}



.block_newsletter {
    float: inherit !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 50rem !important;
    clear: both !important;
    font-size: .875rem !important;
    background-color: #F5F5F5 !important;
    background: #F5F5F5  !important;
    padding: 20px 0 !important;
}

.cookie-popup {
    position: fixed;
    bottom: 30px;
    left: 20px;
    background: #35B1AE; /* Background color */
    color: #ffffff; /* White text */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 1em;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 400px;
}

.cookie-popup p {
    margin: 0;
    padding: 0;
    background: transparent !important; /* Ensure no background */
    color: #ffffff; /* White text */
    flex: 1;
}

.cookie-popup button {
    background: #F8B400; /* Button background */
    color: #ffffff; /* White text */
    border: none;
    padding: 10px 15px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 3px;

}

.cookie-popup button:hover {
    background: #d99a00; /* Darker shade on hover */
}

/* MOBILE STYLES */
@media (max-width: 767px) {
    

        .footer-container .links ul {
        margin-bottom: 0;
        background-color: #003041 !important;
    }

    .footer-container .links ul>li {
        margin-bottom: 0;
        background-color: #003041 !important;
        
    }
    
    .footer-container .links .h3 {
        font-size: 1rem;
        line-height: 1.5;
        background-color: #003041;
    }
}
.footer-container .h3, .footer-container .h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
}
    
    body {
        font-size: 16px; /* Slightly larger for readability */
        padding: 0;
    }

    .header-top {
        position: relative; /* Ensure proper placement */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto; /* Allow natural height */
        padding: 10px 0; /* Add padding for spacing */
    }

    .header-top .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .header-top img {
        max-width: 100%; /* Resize for mobile */
        height: auto;
        margin: 0 auto; /* Ensure it remains centered */
        display: block;
        position: relative; /* Prevent unexpected shifts */
    }

    .links .link-item {
        font-size: 1em;
    }

    .popover {
        position: relative !important;
        width: auto !important;
    }



    .tabs {
        font-size: 1em;
        padding: 8px;
    }

    button, .btn {
        font-size: 1em;
        padding: 10px 12px;
    }

    footer {
        text-align: center;
        padding: 10px;
    }

    footer a, footer p, footer h3, footer .title.clearfix.hidden-md-up, footer .title.clearfix, footer .title {
        color: #F5F5F5 !important; 
        background-color: #003041 !important;
    }

    .footer-container .title.clearfix.hidden-md-up span,
    .footer-container .title.clearfix span,
    .footer-container .title span {
        background-color: #003041 !important;
        color: #F5F5F5 !important;
    }

    /* Ensure footer submenus have dark blue background */
    .footer-container .popover.sub-menu.js-sub-menu,
    .footer-container .sub-menu,
    .footer-container .sub-menu ul,
    .footer-container .sub-menu li {
        background-color: #003041 !important;
    }

    /* Ensure footer submenu text remains light gray */
    .footer-container .popover.sub-menu.js-sub-menu a,
    .footer-container .sub-menu a {
        background-color: #003041 !important;
        color: #F5F5F5 !important;
        font-weight: bold;
    }
    


    .product-information {
        font-size: 1em;
        padding: 5px;
    }

    .product-description {
        font-size: 1em;
        padding: 5px;
    }
    
    .js-product .thumbnail-top {
    background: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.product-flags {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: none;
    display: none !important;
}
    
.product-miniature .thumbnail-container .product-thumbnail {
    position: relative;
    height: 100% !important;
}

.product-miniature .thumbnail-container .product-thumbnail img {
    position: relative;
    display: block;
    max-width: 100%;
    height: 100% !important;
    margin: 0 !important;
}

    .products.row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }

    .js-product {
        width: 48% !important; /* Ensures two products per row */
        max-width: 200px !important;
        margin: 10px !important;
        border-radius: 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    .js-product .thumbnail-container {
        width: 100% !important;
        height: auto !important;
        min-height: 285px !important;
    }
    
    .js-product .price {
    color: #0B3041 !important;
    font-weight: bold !important;
    font-size: 0.9em !important;
    padding: 5px !important;
    align-self: flex-end;
}

    .js-product .product-description {
        width: 100% !important;
        white-space: normal !important; /* Prevents text from stacking */
        text-align: center !important;
        min-height: 140px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Pushes .price to the bottom */
        height: 100%; /* Ensures the parent has a defined height */
    }

    .js-product .product-title {
        display: block !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    .js-product .product-price-and-shipping {
        width: 100% !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-evenly;
            /*justify-content: space-between;  Pushes .price to the bottom */
        height: 100%; /* Ensures the parent has a defined height */
    }

    /* If items are disabled, prevent changes */
    .mobile-menu a[disabled],
    .mobile-menu span[disabled] {
        color: #ccc !important;
    }

    /* Hide unnecessary elements */
    #left-column, .sidebar, .extra-widgets {
        display: none !important;
    }

    .cart-summary, .cart-container {
        width: 100%;
        padding: 10px;
    }
}



@media (max-width: 600px) {
    
        .col-xl-4, .col-xl-5 {
        float: left;
        width: 40%;
    }

    body {
        font-size: 16px; /* Slightly larger for readability */
        padding: 0;
    }

    .header-top {
        position: relative; /* Ensure proper placement */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto; /* Allow natural height */
        padding: 10px 0; /* Add padding for spacing */
    }

    .header-top .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .header-top img {
        max-width: 100%; /* Resize for mobile */
        height: auto;
        margin: 0 auto; /* Ensure it remains centered */
        display: block;
        position: relative; /* Prevent unexpected shifts */
    }

    .links .link-item {
        font-size: 1em;
    }

    .popover {
        position: relative !important;
        width: auto !important;
    }



    .tabs {
        font-size: 1em;
        padding: 8px;
    }

    button, .btn {
        font-size: 1em;
        padding: 10px 12px;
    }

    footer {
        text-align: center;
        padding: 10px;
    }

    footer a, footer p, footer h3, footer .title.clearfix.hidden-md-up, footer .title.clearfix, footer .title {
        color: #F5F5F5 !important; /* Set footer text and headers to light gray */
        background-color: #003041 !important;
    }

    /* Ensure footer headers remain light gray */
    .footer-container .title.clearfix.hidden-md-up span,
    .footer-container .title.clearfix span,
    .footer-container .title span {
        background-color: #003041 !important;
        color: #F5F5F5 !important;
    }

    /* Ensure footer submenus have dark blue background */
    .footer-container .popover.sub-menu.js-sub-menu,
    .footer-container .sub-menu,
    .footer-container .sub-menu ul,
    .footer-container .sub-menu li {
        background-color: #003041 !important;
        color: #f5f5f5;
    }

    /* Ensure footer submenu text remains light gray */
    .footer-container .popover.sub-menu.js-sub-menu a,
    .footer-container .sub-menu a {
        background-color: #003041 !important;
        color: #F5F5F5 !important;
        font-weight: bold;
    }
@media (max-width: 600px) {
    #mobile_top_menu_wrapper {
        padding: 10px !important;
        background-color: #35B1AE !important;
    }
    body #mobile_top_menu_wrapper {
    padding: 10px;
    background: #35B1AE
    }

    /* Ensure hamburger menu submenus have turquoise background */
    #mobile_top_menu_wrapper .popover.sub-menu.js-sub-menu,
    #mobile_top_menu_wrapper .sub-menu {
        background-color: #35B1AE !important;
        border: none !important; /* Remove border from submenu */
    }

    /* Ensure hamburger menu text remains light gray */
    #mobile_top_menu_wrapper .popover.sub-menu.js-sub-menu a,
    #mobile_top_menu_wrapper .sub-menu a {
        color: #F5F5F5 !important;
        font-weight: bold;
    }

    /* Ensure the main menu background remains consistent */
    #mobile_top_menu_wrapper {
        background-color: #35B1AE !important;
    }

    .product-information {
        font-size: 1em;
        padding: 5px;
    }

    .product-description {
        font-size: 1em;
        padding: 5px;
    }
    
    
.product-flags {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: none;
    display: none !important;
}
    
    .js-product .thumbnail-top {
    background: none !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    height: auto !important;
}
        .js-product .price {
    color: #0B3041 !important;
    font-weight: bold !important;
    font-size: 0.9em !important;
    padding: 5px !important;
    text-align: center !important;
    white-space: nowrap;
    
}

    .product-miniature .thumbnail-container .product-thumbnail {
    position: relative;
    width: 100% !important;
    height: auto !important;
    }  
    
    .product-miniature .thumbnail-container .product-thumbnail img {
    position: relative;
    display: block;
    max-width: 100%;
    height: 100% !important;
    margin: 0 !important;
    }

    .products.row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 5px !important;
    }

    .js-product {
        width: 48% !important;
        max-width: 200px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    .js-product .thumbnail-container {
        width: 100% !important;
        height: auto !important;
        min-height: 285px !important;

    }

    .js-product .product-description {
        width: 100% !important;
        white-space: normal !important; /* Prevents text from stacking */
        text-align: center !important;
        min-height: 140px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Pushes .price to the bottom */
        height: 100%; /* Ensures the parent has a defined height */
    }

    .js-product .product-title {
        display: block !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    .js-product .product-price-and-shipping {
        width: 100% !important;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Pushes .price to the bottom */
        height: 75%; /* Ensures the parent has a defined height */
    }

    /* If items are disabled, prevent changes */
    .mobile-menu a[disabled],
    .mobile-menu span[disabled] {
        color: #ccc !important;
    }

    /* Hide unnecessary elements */
    #left-column, .sidebar, .extra-widgets {
        display: none !important;
    }

    .cart-summary, .cart-container {
        width: 100%;
        padding: 10px;
    }
    
        .products-selection .showing {
        padding-top: 0.1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    
            .col-xl-4, .col-xl-5 {
        float: left;
        width: 40%;
    }
    
    .products.row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        
    }

.product-miniature, .product-miniature .product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    align-items: baseline;
}

.product-miniature .product-price-and-shipping {
    font-weight: 400;
    display: flex;
    justify-content: space-evenly;
    color: #fffff;
    text-align: center
}

    .js-product {
        /*width: 48% !important;*/
        max-width: 180px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        overflow: hidden;
    }

    .js-product .thumbnail-container {
        width: 100% !important;
        height: auto !important;
    }

    .js-product .product-description {
        width: 100% !important;
        white-space: normal !important; /* Prevents text from stacking */
        text-align: center !important;
    }

    .js-product .product-title {
        display: block !important;
        white-space: normal !important;
        text-align: center !important;
        font-size: 14px !important;
    }

    .js-product .product-price-and-shipping {
        width: 98% !important;    
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        justify-content: center;
        /*gap: 8px;  Adjust spacing between RRP and sale price */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
}

@media (max-width: 991px) {
    .carousel {
        left: auto !important; 
        width: 100vw;
        padding-bottom: .5rem;
        margin: 0 auto;
        background-color: #f6f6f6;
        -webkit-box-shadow: none;
        box-shadow: none;
        display: block;
    }
}

@media (max-width: 767px) {

    .footer-container .links ul {
        margin-bottom: 0;
        background-color: #003041 !important;
    }

    .footer-container .links ul > li {
        margin-bottom: 0;
        background-color: #003041 !important;
    }
        
}