/* APPLIED FONTS CSS */
.main_nav li, .main_nav .row a {font-family: Aeonik Medium !important; font-size: 16.0px !important; } 
button:not(.variation-button), a.btn {font-family: Aeonik Medium !important; font-size: 16.0px !important; } 
body #left_panel, .sidebar .categories li a {font-family: Aeonik Medium !important; font-size: 16.0px !important; color: #6B665F; } 
h1 {font-family: SeasonMix Regular !important; } 


/* APPEARANCE EDITOR CSS */
header img.logo {height: 50px;}
#footer_logo div.site-logo {width: 165px !important; max-width:95%;}
header {background-color: #191919; 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: #FFFFFF28 !important; color: #FFFFFF !important;}
header .basket-counter {color: #FFFFFF !important;}
header .tree-counter {color: #FFFFFF !important;}
html, footer {background-color: #191919;}
footer {border-top: 1px #818181 solid;}
footer .footer-hr {color: #FFFFFF;}
.main_nav a {color: #FFFFFF; text-transform: None; text-decoration: none;}
.main_nav a:hover {color: #0131FF; text-transform: None; text-decoration: none !important;}
.sidebar span.category-name.current {color: #0131FF;}
.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: #000000;}
.btn.btn-dark {background-color: #000000; border: 1px solid #000000;}
.btn.btn-dark:hover {background-color: #3F59E4 !important; border: 1px solid #FFFFFF !important;}
.btn.btn-dark, .btn.btn-outline-dark {border-radius: 8px !important;}
.overlay {background-color: #000000E6;}
.overlay a {color: #FFFFFF;}
.pagination_container > strong {color: #FFFFFF !important; background-color: #2F2F2F !important;}

/* CUSTOM CSS */
/* HOVER EFFECT ON HAV BAR*/
/* 1. The default state */
.nav-link {
    color: #000000; 
    /* Increase the second number (left/right) to define the oval length */
    padding: 5px 20px !important; 
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: transparent;
    border: 2px solid transparent;

    /* KEY FIXES BELOW: */
    display: inline-block !important; /* Prevents it from taking up the whole row */
    width: auto !important;           /* Overrides Bootstrap's width: 100% */
    flex: none !important;            /* Stops the flexbox from stretching the link */
}

/* 2. The hover state */
.nav-link:hover {
    background-color: #0131ff !important;
    color: #FFFFFF !important;
    text-decoration: none;
    /* Ensure padding stays the same on hover so the pill doesn't "jump" */
    padding: 5px 20px !important; 
}

/* 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: #0131ff}

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

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