/* APPLIED FONTS CSS */
body, label[for="tandc"] {font-family: Roboto Flex Latin !important; } 
p:not(.alert p) {font-family: Roboto Flex Latin !important; font-size: 14.0px !important; color: #6A6A6A; } 
.main_nav li, .main_nav .row a {font-family: Roboto Flex Latin !important; font-weight: bold; font-size: 16.0px !important; } 
li {font-family: Roboto Flex Latin !important; } 
a {font-family: Roboto Flex Latin !important; } 
button:not(.variation-button), a.btn {font-family: Roboto Flex Latin !important; } 
h1 {font-family: Roboto Flex Latin !important; font-size: 30.0px !important; color: #0085AD; } 
h2 {font-family: Roboto Flex Latin !important; color: #0085AD; } 
h3 {font-family: Roboto Flex Latin !important; font-size: 18.0px !important; } 
h4 {font-family: Roboto Flex Latin !important; } 
h5 {font-family: Roboto Flex Latin !important; } 
h6 {font-family: Roboto Flex Latin !important; } 
.prod_info .prod_title .value {font-family: Roboto Flex Latin !important; } 
body #left_panel, .sidebar .categories li a {font-family: Roboto Flex Latin !important; font-size: 18.0px !important; color: #212529; } 
.listing_product .name {font-family: Roboto Flex Latin !important; } 
.listing_product .price h2 {font-family: Roboto Flex Latin !important; font-size: 14.0px !important; color: #6A6A6A; } 
.listing_product .stock {font-family: Roboto Flex Latin !important; } 
.carousel-title {font-family: Roboto Flex Latin !important; } 


/* APPEARANCE EDITOR CSS */
header img.logo {height: 50px;}
#footer_logo div.site-logo {width: 165px !important; max-width:95%;}
header {background-color: #0086AC; border-bottom: 1px #918F8F33 solid;}
.header-icon svg, .search-svg svg, header .nav-item {color: #FFFFFF;}
header input.rounded-pill, header button.rounded-pill, header .account-balance.rounded-pill {border-color: #00000028 !important; color: #FFFFFF !important;}
header .basket-counter {background-color: #52BDC3 !important; color: #FFFFFF !important;}
header .tree-counter {background-color: #43DE6D !important; color: #FFFFFF !important;}
html, footer {background-color: #003F51;}
footer #footer_top a:hover {color: #FFFFFF;}
footer #footer_top, footer #footer_top a, footer #footer_bottom p {color: #FFFFFF;}
footer {border-top: 1px #003F51 solid;}
footer .footer-hr {color: #1C9AC0;}
.main_nav a {color: #FFFFFF; text-transform: None; text-decoration: none;}
.main_nav a:hover {color: #FFFFFF; text-transform: None; text-decoration: underline !important; text-decoration-color: #FFFFFFFF !important; text-decoration-thickness: 2px !important; text-underline-offset: 8px !important;}
.sidebar span.category-name.current {color: #0085AD;}
.favourite_product.favourited i.fa-heart {color: #FE2D56;}
.variation-button.variation-text:hover:not(.variation-button-active) {border-color: #838383 !important;}
.variation-button-active.variation-button-colour {outline-color: #444444 !important;} .variation-button-active:not(.variation-button-colour) {border-color: #444444; !important}
#main_content {background-color: #FFFFFF;}
a {color: #003F51;}
.btn.btn-dark {color: #FFFFFF; background-color: #0086AC; border: 1px solid #0086AC;}
.btn.btn-dark:hover {color: #FFFFFF !important; background-color: #003F51 !important; border: 1px solid #003F51 !important;}
.overlay {background-color: #000000E6;}
.overlay a {color: #FFFFFF;}
.pagination_container > strong {color: #FFFFFF !important; background-color: #2F2F2F !important;}

/* CUSTOM CSS */
/* HIDE PROJECT CATEGORY IN SIDE BAR */
/* Hide the Project category in the left sidebar */
#left_panel .category-list.depth-0 > li > a[href="/Project"],
#left_panel .category-list.depth-0 > li:has(a[href="/Project"]) {
    display: none !important;
}

/* CHECKBOX CONSISTENCY & STYLING*/
/* 1. FORCE FLEX ON ALL LIST ITEMS */
.filter-list li {
    display: flex !important;
    flex-direction: row;      /* Ensures side-by-side layout */
    align-items: center;      /* Vertically centers box with text */
    margin-bottom: 10px;      /* Spacing between rows */
    padding: 0;
    list-style: none;
}

/* 2. THE CHECKBOX STYLING */
.filter-list input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    
    /* Fixed Size */
    width: 12px;
    height: 12px;
    flex-shrink: 0;           /* CRITICAL: Stops the box from squishing */
    margin: 0 10px 0 0;       /* Right margin creates the gap to text */
    
    /* Border Styling */
    border: 2px solid #777777;
    border-radius: 3px;
    
    /* Internal Centering for the Tick */
    display: grid;
    place-content: center;
    cursor: pointer;
}

/* 3. ENSURE LABELS DON'T WRAP WRONGLY */
.filter-list label, 
.filter-list .form-check-label {
    margin: 0;
    cursor: pointer;
    line-height: 1;           /* Prevents extra height from the font */
    white-space: nowrap;      /* Forces text to stay on one line */
}

/* 4. THE TICK MARK */
.filter-list input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #007bff; /* Color of the tick */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.filter-list input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* HOVER EFFECT ON CAROUSEL - AUTOSLIDEPAUSES */
.img-fluid {
  /* make sure the image is responsive */
  display: block;
  max-width: 100%;
  height: auto;

  /* smooth transition for the transform */
  transition: transform 0.2s ease-in-out;
  backface-visibility: hidden;
}

.img-fluid:hover {
  /* scale up slightly on hover */
  transform: scale(1.04);
}

/* HOVER EFFECT ON PRODUCT PAGE IMAGE */
.product-listing-image {
  display: block;
  max-width: 100%;
  height: auto;

  transition: transform 0.4s ease; /* slower + smoother */
  backface-visibility: hidden;
  will-change: transform;
}

.product-listing-image:hover {
  transform: scale(1.03);
}

/* Add the same hover effect to other product images */
img.product-image,
img.product_image,
#related_products_content img,
div#product_image_container img,
.basket-item-row img {
  border-radius: 10px !important;
  background: #fff;

  display: block;
  max-width: 100%;
  height: auto;

  transition: transform 0.4s ease;
  backface-visibility: hidden;
  will-change: transform;
}

img.product-image:hover,
img.product_image:hover,
#related_products_content img:hover,
div#product_image_container img:hover,
.basket-item-row img:hover {
  transform: scale(1.03);
}


/* SIDEBAR */
.sidebar .categories a:hover, .sidebar .categories li.current.children a:hover {color: #0085AD}

.sidebar .categories li a {
    font-size: 16px;
}


/* HEADER CURRENCY AND SEARCH DROPDOWN */
header #dropdown_currency {
    color: #000000 !important;
}