/* APPLIED FONTS CSS */
h1 {font-family: TiemposFine Light !important; } 
.prod_info .prod_title .value {font-family: TiemposFine Light !important; } 
button:not(.variation-button), a.btn {font-family: Sons Semibold !important; } 
.main_nav li, .main_nav .row a {font-family: Sons Medium !important; font-size: 16.0px !important; } 
h2 {font-family: Sons Medium !important; } 
h3 {font-family: Sons Medium !important; } 
h4 {font-family: Sons Medium !important; } 
body, label[for="tandc"] {font-family: Sons Regular !important; } 
p:not(.alert p) {font-family: Sons Regular !important; } 
li {font-family: Sons Regular !important; } 


/* APPEARANCE EDITOR CSS */
header img.logo {height: 30px;}
#footer_logo div.site-logo {width: 210px !important; max-width:95%;}
header {background-color: #FFFFFF; border-bottom: 1px #918F8F33 solid;}
.header-icon svg, .search-svg svg, header .nav-item {color: #0C0C0C;}
header input.rounded-pill, header button.rounded-pill, header .account-balance.rounded-pill {border-color: #9A9A9A28 !important; color: #0C0C0C !important;}
header .basket-counter {background-color: #8F5A39 !important; color: #FFFFFF !important;}
header .tree-counter {background-color: #F2EDEB !important; color: #000000 !important;}
html, footer {background-color: #FFFFFF;}
footer #footer_top a:hover {color: #8F5A39;}
footer #footer_top, footer #footer_top a, footer #footer_bottom p {color: #000000;}
footer {border-top: 1px #CDCDCD solid;}
footer .footer-hr {color: #CDCDCD;}
.main_nav a {color: #000000; text-transform: None; text-decoration: none;}
.main_nav a:hover {color: #8F5A39; text-transform: None; text-decoration: none !important;}
.sidebar span.category-name.current {color: #8F5A39;}
.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 {color: #010000; background-color: #A6D7F0; border: 1px solid #A6D7F0;}
.btn.btn-dark:hover {color: #A6D7F0 !important; background-color: #010000 !important; border: 1px solid #010000 !important;}
.btn.btn-outline-dark {color: #8F5A39; background-color: #FFFFFF; border: 1px solid #010000;}
.btn.btn-outline-dark:hover {color: #FFFFFF !important; background-color: #010000 !important; border: 1px solid #010000 !important;}
.btn.btn-dark, .btn.btn-outline-dark {border-radius: 100px !important;}
.overlay {background-color: #000000E6;}
.overlay a {color: #FFFFFF;}
.pagination_container > strong {color: #FFFFFF !important; background-color: #2F2F2F !important;}

/* CUSTOM CSS */
.col.fw-bold.stock {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin-top: 0.5rem;
  background: transparent;            /* no fill */
  color: #202020;                     /* text colour */
  font-weight: 600;
  font-size: 0.8rem;
  padding: 8px 10px !important;
  border: 1px solid #202020;          /* outline */
  border-radius: 999px;
  line-height: 1;
}


/* GAP BETWEEN HEADER ICONS */
ul.navbar-nav {
    gap: 25px;
}

/* CATEGORY BOLD */
.left-panel-menu a.depth-0,
.categories a.depth-0 {
  font-weight: 700 !important;
}

header img.logo {
    height: 30px;
    margin-left: 1rem;
    margin-top: 1rem;
}

.header-container-upper {
  position: relative; /* ensure positioning context */
}

.header-container-upper::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: linear-gradient(266deg, #6f3d1e 39.15%, #a36848 62.81%, #6f3d1e 90.77%);
}

/* BUTTON/LINK HEIGHT */
.btn.btn-dark, .btn.btn-outline-dark {
    border-radius: 100px !important;
    height: 50px;
}

/* 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);
}

/* MORE FOR YOU IMAGE WRAP */
img.product-image, img.product_image, #related_products_content img, div#product_image_container, .basket-item-row img {
    border-radius: 10px !important;
    BACKGROUND: WHITE;
}

/* 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);
}



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

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

/* FOOTER HEADING SIZE */
footer .footer_menu_heading,
.footer_menu_heading {
    font-size: 1.3rem !important;
}



/* BANNER BUTTON POSITION TO LEFT*/
.banner_callout a.opt-right {
        right: UNSET;
        left: 0PX;
    }
}





/* 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);
}

/* FOOTER MARGIN */
#footer_logo .footer_logo_img {
    max-width: none;
    width: 100%;
    max-height: none;
    height: 100%;
    margin-bottom: 50px;
}

/* HOVER ON ROW 8 CURRENTLY 4 TILES */

/* 1) Apply only within that specific row */
.row.row_8.pagebuilder.container.mx-auto .img-img {
  transition: transform 0.3s ease-in-out;
  overflow: hidden; /* hide any overflow from the scale */
}

/* 2) On hover, scale the entire .img-img block */
.row.row_8.pagebuilder.container.mx-auto .img-img:hover {
  transform: scale(1.03);
}

/* FILTERS STYLING */
.filter-category-heading {
    font-size: 18px;
 
}

#left_panel .filter-list label {
    font-weight: normal;
    FONT-SIZE: 18PX;
    MARGIN-LEFT: 18PX;
}

ul.filter-list .form-check-input[type=checkbox] {
    border-radius: .25em;
    margin-top: 7px;
}

/* STOCK LEVEL STYLING */
.variation-button {
    text-decoration: none;
    display: inline-block;
    border-radius: 20px;
    font-size: 14px;
    border-color: WHITE;
    border-width: 2px;
    border-style: solid;
    BACKGROUND: #f5f5f5!important;
    BORDER-WIDTH: 1PX;
    PADDING: 5PX;
    MARGIN-TOP: -10PX;
}

/* HIDE VARIATION TITLES */
.col-auto.variation_title_col {
  display: none;
}

/* NO SCALE ON LIGHBOX IMAGE */
.carousel-inner img,
.carousel-inner .product-image,
.carousel-inner .product_image,
.carousel-inner #related_products_content img,
.carousel-inner div#product_image_container img,
.carousel-inner .basket-item-row img,
.carousel-inner .product-listing-image {
  transition: none !important;
  transform: none !important;
}

.carousel-inner img:hover,
.carousel-inner .product-image:hover,
.carousel-inner .product_image:hover,
.carousel-inner #related_products_content img:hover,
.carousel-inner div#product_image_container img:hover,
.carousel-inner .basket-item-row img:hover,
.carousel-inner .product-listing-image:hover {
  transition: none !important;
  transform: none !important;
}

/*STOCK LEVEL */
/* Target stocklevel buttons that are also variation-button */
.variation-button.variation-stocklevel {
    border-width: 1px !important;
    background: white !important;
    BORDER-COLOR: #e9e9e9 !important;
}

/* LEADTIME BOLD */
p.leadtime {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #000000;
    background-color: #f4f0e7;
    border: 5px solid #f4f0e7;
    border-radius: 5px;
    padding: 0.25rem 0.5rem;
    display: inline-block;
}


/* CYCLE PAGER */
.cycle-pager span {
    font-size: 50px;
    width: 26px;
    height: 26px;
    color: #cf2c2c;
    display: inline-block;
    cursor: pointer;
    background: transparent;
    border: 1px solid #000000;
    border-radius: 20px;
    margin: 0 2px;
}

a.cycle-pager-active span {
    background-color: #a8d5f3;
}