/* Lato is loaded from templates/headers/includes/head.template.html (non-blocking) instead of @import. */
body {
	font-family: -apple-system, BlinkMacSystemFont, "Lato", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" /*{body-font-family}*/;
	font-size: 14px /*{body-font-size}*/;
	color: rgba(0, 0, 0, 1) /*{body-font-colour}*/;
	background-image: none /*{body-background-image}*/;
	background-color: #ffffff /*{body-background-colour}*/;
	max-width: 100%;
  	overflow-x: hidden;
}
a, .btn-link{
	color: rgba(242, 152, 1, 1) /*{link-text-colour}*/;
}
a:hover, a:active, a:focus, .btn-link:hover{
	color: rgba(212, 134, 0, 1) /*{link-text-hover-colour}*/;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: -apple-system, BlinkMacSystemFont, "Lato", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" /*{headers-font-family}*/;
	color: rgba(0, 0, 0, 1) /*{headers-colour}*/;
}
.carousel-caption h3, .carousel-caption h2,.carousel-caption .h3,.carousel-caption p {
	color: #ffffff /*{carousel-text-colour}*/;
}
.carousel-caption{
	display:none!important;
}
h1, .h1 {
	font-size: 34px /*{header-1-font-size}*/;
	text-align: center;
}
h2, .h2 {
	font-size: 28px /*{header-2-font-size}*/;
}
h3, .h3 {
	font-size: 24px /*{header-3-font-size}*/;
}
h4, .h4 {
	font-size: 18px /*{header-4-font-size}*/;
}
h5, .h5 {
	font-size: 16px /*{header-5-font-size}*/;
}
/* Secondary button */
.btn-outline-secondary, .btn-default {
	color: rgba(242, 152, 1, 1) /*{buttons | btn-default-text-colour}*/;
	background-color: #ffffff /*{buttons | btn-default-background-colour}*/;
	border-color: #cccccc /*{buttons | btn-default-border-colour}*/;
}
.btn-outline-secondary:hover, .btn-default:hover{
	color: #333333 /*{buttons | btn-default-text-colour-hover}*/;
	background-color: #ebebeb /*{buttons | btn-default-background-colour-hover}*/;
	border-color: #adadad /*{buttons | btn-default-border-colour-hover}*/;
}
.btn-outline-secondary.disabled, .btn-default:disabled {
	color: #333333 /*{buttons | btn-default-text-colour-hover}*/;
	background-color: #ebebeb /*{buttons | btn-default-background-colour-hover}*/;
	border-color: #adadad /*{buttons | btn-default-border-colour-hover}*/;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active, .show > .btn-outline-secondary.dropdown-toggle,
.btn-default:not(:disabled):not(.disabled):active, .btn-default:not(:disabled):not(.disabled).active, .show > .btn-default.dropdown-toggle {
	color: #333333 /*{buttons | btn-default-text-colour-hover}*/;
	background-color: #ebebeb /*{buttons | btn-default-background-colour-hover}*/;
	border-color: #adadad /*{buttons | btn-default-border-colour-hover}*/;
}
/* Primary button */
.btn-primary {
	color: #ffffff /*{buttons | btn-primary-text-colour}*/;
	background-color: rgba(242, 152, 1, 1)!important /*{buttons | btn-primary-background-colour}*/;
	border-color: rgba(242, 152, 1, 1)!important /*{buttons | btn-primary-border-colour}*/;
	width: 100%;
}
.btn-primary:hover {
	color: #ffffff /*{buttons | btn-primary-text-colour-hover}*/;
	background-color: rgba(212, 134, 0, 1)!important /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: rgba(212, 134, 0, 1)!important /*{buttons | btn-primary-border-colour-hover}*/;
}
.btn-primary.disabled, .btn-primary:disabled {
	color: #ffffff /*{buttons | btn-primary-text-colour-hover}*/;
	background-color: rgba(212, 134, 0, 1) /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: rgba(212, 134, 0, 1) /*{buttons | btn-primary-border-colour-hover}*/;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
	color: #ffffff /*{buttons | btn-primary-text-colour-hover}*/;
	background-color: rgba(212, 134, 0, 1) /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: rgba(212, 134, 0, 1) /*{buttons | btn-primary-border-colour-hover}*/;
}
/* Warning button */
.btn-warning {
	color: #ffffff /*{buttons | btn-warning-text-colour}*/;
	background-color: #ffc107 /*{buttons | btn-warning-background-colour}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour}*/;
}
.btn-warning:hover {
	color: #ffffff /*{buttons | btn-warning-text-colour-hover}*/;
	background-color: #e0a800 /*{buttons | btn-warning-background-colour-hover}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour-hover}*/;
}
.btn-warning.disabled, .btn-warning:disabled {
	color: #ffffff /*{buttons | btn-warning-text-colour-hover}*/;
	background-color: #e0a800 /*{buttons | btn-warning-background-colour-hover}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour-hover}*/;
}
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active, .show > .btn-warning.dropdown-toggle {
	color: #ffffff /*{buttons | btn-warning-text-colour-hover}*/;
	background-color: #e0a800 /*{buttons | btn-warning-background-colour-hover}*/;
	border-color: #ffc107 /*{buttons | btn-warning-border-colour-hover}*/;
}
/* Danger button */
.btn-danger {
	color: #ffffff /*{buttons | btn-danger-text-colour}*/;
	background-color: #dc3545 /*{buttons | btn-danger-background-colour}*/;
	border-color: #dc3545 /*{buttons | btn-danger-border-colour}*/;
	width: 100%;
}
.btn-danger:hover {
	color: #ffffff /*{buttons | btn-danger-text-colour-hover}*/;
	background-color: #c82333 /*{buttons | btn-danger-background-colour-hover}*/;
	border-color: #bd2130 /*{buttons | btn-danger-border-colour-hover}*/;
}
.btn-danger.disabled, .btn-danger:disabled {
	color: #ffffff /*{buttons | btn-danger-text-colour-hover}*/;
	background-color: #c82333 /*{buttons | btn-danger-background-colour-hover}*/;
	border-color: #bd2130 /*{buttons | btn-danger-border-colour-hover}*/;
}
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active, .show > .btn-danger.dropdown-toggle {
	color: #ffffff /*{buttons | btn-danger-text-colour-hover}*/;
	background-color: #c82333 /*{buttons | btn-danger-background-colour-hover}*/;
	border-color: #bd2130 /*{buttons | btn-danger-border-colour-hover}*/;
}
/* Success button */
.btn-success {
	background-color: #F29801 !important;
	border-color: #F29801 !important;
	color: #fff !important;
}
.btn-success:hover {
	color: #ffffff /*{buttons | btn-success-text-colour-hover}*/;
	background-color: #D98800 !important;
  	border-color: #D98800 !important;
}
.btn-success.disabled, .btn-success:disabled {
	color: #ffffff /*{buttons | btn-success-text-colour-hover}*/;
	background-color: rgba(212, 134, 0, 1) /*{buttons | btn-success-background-colour-hover}*/;
	border-color: rgba(212, 134, 0, 1) /*{buttons | btn-success-border-colour-hover}*/;
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
	color: #ffffff /*{buttons | btn-success-text-colour-hover}*/;
	background-color: rgba(212, 134, 0, 1) /*{buttons | btn-success-background-colour-hover}*/;
	border-color: rgba(212, 134, 0, 1) /*{buttons | btn-success-border-colour-hover}*/;
}
/* Info button */
.btn-info {
	color: #ffffff /*{buttons | btn-info-text-colour}*/;
	background-color: #17a2b8 /*{buttons | btn-info-background-colour}*/;
	border-color: #17a2b8 /*{buttons | btn-info-border-colour}*/;
}
.btn-info:hover {
	color: #ffffff /*{buttons | btn-info-text-colour-hover}*/;
	background-color: #138496 /*{buttons | btn-info-background-colour-hover}*/;
	border-color: #117a8b /*{buttons | btn-info-border-colour-hover}*/;
}
.btn-info.disabled, .btn-info:disabled {
	color: #ffffff /*{buttons | btn-info-text-colour-hover}*/;
	background-color: #138496 /*{buttons | btn-info-background-colour-hover}*/;
	border-color: #117a8b /*{buttons | btn-info-border-colour-hover}*/;
}
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active, .show > .btn-info.dropdown-toggle {
	color: #ffffff /*{buttons | btn-info-text-colour-hover}*/;
	background-color: #138496 /*{buttons | btn-info-background-colour-hover}*/;
	border-color: #117a8b /*{buttons | btn-info-border-colour-hover}*/;
}
.breadcrumb-section, #n_customer_account .breadcrumb {
	background-color: #f6f6f6 /*{breadcrumb-background-colour}*/;
}
.breadcrumb-item + .breadcrumb-item::before {
	color: #6c6c6c /*{breadcrumb-text-colour}*/;
}
.breadcrumb > .active,
.breadcrumb a {
	color: #6c6c6c /*{breadcrumb-text-colour}*/;
}
.pagination .page-link{
	color: #ffffff /*{pagination-text-colour}*/;
	background-color: rgba(242, 152, 1, 1) /*{pagination-bg-colour}*/;
	border-color: rgba(255, 255, 255, 1) /*{pagination-border-colour}*/;
}
.pagination .page-link:hover,
.pagination .page-link:focus{
	color: #ffffff /*{pagination-text-colour-hover}*/;
	background-color: rgba(200, 29, 36, 1) /*{pagination-bg-colour-hover}*/;
	border-color: rgba(200, 29, 36, 1) /*{pagination-border-colour-hover}*/;
}
.pagination .active .page-link,
.pagination .active .page-link:hover,
.pagination .active .page-link:focus {
	color: #ffffff /*{pagination-text-colour-active}*/;
	background-color: rgba(237, 178, 76, 1) /*{pagination-bg-colour-active}*/;
	border-color: rgba(237, 178, 76, 1) /*{pagination-border-colour-active}*/;
}
.badge-secondary {
	background-color: #ebebeb /*{label-default-bg}*/;
}
.badge-primary {
	background-color: #006ff5 /*{label-primary-bg}*/;
}
.badge-success {
	background-color: #28a745 /*{label-success-bg}*/;
}
.badge-info {
	background-color: #17a2b8 /*{label-info-bg}*/;
}
.badge-warning {
	background-color: #212529 /*{label-warning-text-colour}*/;
	background-color: #ffc107 /*{label-warning-bg}*/;
}
.badge-danger {
	background-color: #dc3545 /*{label-danger-bg}*/;
}
.card {
	border-color: rgba(9, 43, 65, 1) /*{panel-border-colour}*/;
}
.card-header {
	background-color: #e39e57 /*{panel-header-bg-colour}*/;
	border-color: #e39e57 /*{panel-header-border-colour}*/;
}
.card-header, .card-header *, body .card-header *:hover {
	color: rgba(255, 255, 255, 1) /*{panel-header-text-colour}*/;
}
.productsave {
	color: #d9534f /*{sale-colour}*/;
}
.wrapper-header .navbar-toggler,
#header-call .fa,
#header-cart .fa {
	color: #f29801 /*{header-icon-colour}*/;
}
.wrapper-header .menu-section, .wrapper-header .header-topbar {
	background-color: rgba(35, 31, 32, 1) /*{navbar-default-bg-colour}*/;
}
.wrapper-header .navbar {
	background-color: rgba(255, 255, 255, 0) ;
}
.wrapper-header .navbar .navbar-nav .nav-link,
.wrapper-header .header-topbar .nav-link,
.wrapper-header .header-topbar .nav-link,
.wrapper-header .header-topbar .nav-item i {
	color: rgba(255, 255, 255, 1) /*{navbar-default-link-colour}*/;
}
.wrapper-header .navbar-nav .nav-link:hover,
.wrapper-header .navbar-nav .nav-link:focus,
.wrapper-header .header-topbar .nav-link:hover,
.wrapper-header .header-topbar .nav-link:focus,
.wrapper-header .header-topbar .nav-item i:hover,
.wrapper-header .header-topbar .nav-item i:focus {
	color: rgba(242, 152, 1, 1) /*{navbar-default-link-colour-hover}*/;
	font-weight: 700;
}
.wrapper-header .navbar-nav .show > .nav-link,
.wrapper-header .navbar-nav .active > .nav-link,
.wrapper-header .navbar-nav .nav-link.show,
.wrapper-header .navbar-nav .nav-link.active{
	color: rgba(200, 29, 36, 1) /*{navbar-default-link-colour-active}*/;
	font-weight: 700;
}
.dropdown-menu,
.mega-menu>li.nav-item:last-child a {
	background-color: rgba(35, 31, 32, 1) /*{dropdown-menu-bg}*/;
	border-color: rgba(35, 31, 32, 1) /*{dropdown-menu-border-colour}*/;
}
.dropdown-item,
#cartcontents,
#cartcontents a,
.mega-menu>li.nav-item:last-child a {
	color: #ffffff /*{dropdown-menu-link-colour}*/;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active,
.mega-menu>li.nav-item:last-child a:hover,
.mega-menu>li.nav-item:last-child a:focus,
.mega-menu>li.nav-item:last-child a:active {
	color: #ffffff /*{dropdown-menu-link-colour-hover}*/;
	background-color: rgba(200, 29, 36, 1) /*{dropdown-menu-link-bg-hover}*/;
}
/* Theme Colour */
body, * {
	--theme-colour-primary: #231F20 /*{theme-primary-colour}*/; 
	--theme-colour-secondary: #F29801 /*{theme-secondary-colour}*/; 
}
/* Categorybox Homepage */
.dah_homecategories .thumbnail .caption h5>a:active,
.dah_homecategories .thumbnail .caption h5>a:focus,
.dah_homecategories .thumbnail .caption h5>a:hover,
.dah_homecategories .thumbnail:hover .caption h5>a,
.dah_homecategories .thumbnail .caption h5>a {
	color: #ffffff /*{category-box-heading-colour}*/;
}
.dah_homecategories .thumbnail .caption a.btn {
	color: #ffffff /*{category-box-button-colour}*/;
	background-color: rgba(200, 29, 36, 1) /*{category-box-button-background-colour}*/;
}
.dah_homecategories .thumbnail .caption a.btn:hover,
.dah_homecategories .thumbnail .caption a.btn:focus,
.dah_homecategories .thumbnail .caption a.btn:active {
	color: #ffffff /*{category-box-button-hover-colour}*/;
	background-color: rgba(9, 43, 65, 1) /*{category-box-button-hover-background-colour}*/;
}
.dah_homecategories .thumbnail .caption {
	background-color: #231F2040;
}
.dah_homecategories .thumbnail:hover .caption {
	background-color:  #F2980140;
}
/* Footer section */
.wrapper-footer {
	background-color: #071620 /*{footer-background-colour}*/;
}
.wrapper-footer p {
	color: #b3babf /*{footer-font-colour}*/;
}
.wrapper-footer a {
	color: #b3babf /*{footer-link-colour}*/;
}
.wrapper-footer a:hover,
.wrapper-footer a:focus {
	color: #f29801 /*{footer-link-colour-hover}*/;
}
.wrapper-footer nav h4.nav-link, .wrapper-footer nav h4.nav-link:hover, .wrapper-footer nav h4.nav-link:focus {
    color: #ffffff /*{footer-heading-colour}*/;
}
.wrapper-product-title{
	padding-top: 20px;
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
  .fq-image{
  	width: 45%!important;
  }
  .fq-title{
   	font-size: 15px;
   }
   
   .wrapper-product-title h1{
   	text-align: center!important;
   }
   .wrapper-product-title{
   	text-align: center!important;
   }
   .form-control{
   	text-align: center;
   }
   .h1{
   	text-align: center;
   }
   #shipbox button.btn {
   	font-size: 16px!important;
   }
   
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
	}
  .fq-image{
   	width: 45%!important;
   }
   .fq-title{
   	font-size: 15px;
   }

}

@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {display: none!important;}
  .fq-image{width: 40%!important;}
  .wrapper-product-title h1{text-align: left;}
}

@media (min-width: 1200px) {
  .hidden-lg {display: none!important;}
  .wrapper-product-title h1{text-align: left!important;}
}

@media(max-width: 575px) {
  .blog-title {
    font-size:14px!important;
    padding: 5px!important;
  }
  

 }



.hr-sect {
    display: flex
;
    flex-basis: 100%;
    align-items: center;
    color: #ef9725;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 32px;
}
.hr-sect::before, .hr-sect::after {
    content: "";
    flex-grow: 1;
    background: #ef9725;
    height: 1px;
    font-size: 0;
    line-height: 0;
    margin: 0 15px;
}

.nCrossSellItem label {
    cursor: pointer;
    display: flex;
    max-height: 150px;
    margin: auto;
}
.nCrossSellItem .img-responsive {
    padding: 10px;
    max-height: 100%;
}
.nCrossSellItem .row {
    max-height	: 150px;
    border-color: #ddd;
    border-style: solid;
    border-width: 1px;
}
.img-slider{
	width: 90%;
	margin: auto;
}

.author-profile {
        display: flex;
        align-items: center;
        margin: 20px;
    }
    
    .profile-pic {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
    }
    
    .author-name {
        font-size: 1.5em;
        color: #333;
    }

    @media (max-width: 600px) {
        .profile-pic {
            width: 80px;
            height: 80px;
        }
        
        .author-name {
            font-size: 1.2em;
        }
    }
    
    .menu-section{
        margin-bottom:0px!important;
    }

    .pagination{
    	justify-content: center!important;
    }


#launcher{
	bottom: 50px;
}

@media only screen and (max-width: 767px) {
	#n_product .extra-options form.buying-options .btn {
        width: 100%
    }

}

@media only screen and (max-width: 576px) {
	 .sku{width: 65%;margin: auto!important; min-height:72px;word-break: break-all; }
	 
}

.thumbnail.card-body .card-title {min-height: 60px;}
.sku{min-height: 60px;}

.stock-container {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
}

.thumbnail.card-body .stock-container span.stock-label {
    display: flex;
    color: #fff;
    font-size: 9px;
    position: relative;
    width: auto;
    float: left;
    z-index: 10;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #dc3545;
    padding: 1px 5px;
    border-radius: 2px;

}

.price-cart{
	border:1px solid rgba(0, 0, 0, .125);
}

.col-12{
	padding-top: 10px;
	padding-bottom: 10px;
}

.payment-container{
	padding: 10px;
    background: ##efefef00;
    border-radius: 3px;
}

.section-heading{
	text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;
    background-color: #231f20;
    padding: 5px;
    color: white;
    font-size: 20px!important;
}

.btn-green{
	color: #ffffff!important;
    background-color: #6B8E23;
    border-color: #6B8E23;
    width: 100%!important;

}

.btn-green:hover{
	background-color: #4F6F52!important;
	border-color: #4F6F52!important;
	color: color: #ffffff!important;
}

.productprice{
	color: #6B8E23!important;
}


/* Product Image Hover */
/* Product thumbnails are square (400x400). The photo box is reserved as a  */
/* square before the image loads, so product cards (category pages, homepage */
/* deal sliders, related products) don't grow and shift when photos arrive.  */
/* object-fit: contain shows a non-square photo whole, never cropped.        */
.thumbnail-image {
  position: relative;
  display: block;
}

.thumbnail-image .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Swap only once the hover photo has actually loaded (the header script adds   */
/* .hover-ready). Until then the main photo stays put, so there's never a blank box. */
.thumbnail-image.hover-ready:hover .hover-img {
  opacity: 1;
  transform: scale(1.05); /* optional zoom */
}

.thumbnail-image .img1 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.thumbnail-image.hover-ready:hover .img1 {
  opacity: 0;
}

/* Product Image Hover end */
/* hover-animate */
.hover-animate {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.hover-animate:hover {
  transform: scale(1.05);
}
/* hover-animate end*/

.sticky {
      position: sticky;
      top: 0;                 /* stick to top of viewport */
      z-index: 1000;          /* keep above other content */
    }

.accordion-toggle .fa-chevron-down {
	transition: transform 0.2s ease-in-out;
}

/* Rotate when expanded */
.accordion-toggle[aria-expanded="true"] .fa-chevron-down {
	transform: rotate(180deg);
}

/* Remove underline styling */
.accordion-toggle,
.accordion-toggle:focus,
.accordion-toggle:hover,
.accordion-toggle:active {
	text-decoration: none !important;
	outline: none;
	box-shadow: none;
}

.productdetails img {
    max-width:400px!important;
}

.productdetails h1, h2, h3, h4, h5, h6 {
    color:#F29801;
}

.productdetails p span {
    color:black !important;
}

.productdetails p a span{
    color:#F29801 !important;
}

.productdetails .table {
    width:100% !important;
}
.productdetails .table p{
    margin-top:1em !important;
    margin-bottom:1em !important;
}

/* Breadcrumb – force single line on mobile */

@media (max-width: 767px) {
  .breadcrumb {
    display: inline-flex;   /* IMPORTANT: inline-flex prevents parent expansion */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100vw;       /* viewport bound */
    -webkit-overflow-scrolling: touch;
  }

  .breadcrumb-item {
    flex: 0 0 auto;
  }

  .breadcrumb::-webkit-scrollbar {
    display: none;
  }
}


/* Footer Accordion - Mobile Only */
@media (max-width: 767px) {

    /* Footer columns reset */
    .footer-accordion .col-12.col-md-4 {
        padding: 0;
        margin: 0;
    }

    /* Accordion headings */
    .footer-accordion h4.nav-link {
        display: flex;
        justify-content: space-between; /* text left, arrow right */
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 16px 20px; /* padding for spacing */
        cursor: pointer;
        font-size: 1rem;
        transition: padding 0.3s ease, background 0.3s ease;
    }

    /* Arrow */
    .footer-accordion h4.nav-link::after {
        content: "\25BC"; /* down arrow */
        font-size: 0.9rem;
        transition: transform 0.3s ease;
    }

    /* Rotate arrow when open */
    .footer-accordion .nav-item.active > h4.nav-link::after {
        transform: rotate(180deg);
    }

    /* Sub-items container */
    .footer-accordion .nav.flex-column > li.nav-item:not(:first-child) {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease, padding 0.5s ease;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Show expanded sub-items */
    .footer-accordion .nav-item.active > li.nav-item {
        max-height: 500px; /* adjust if needed */
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Sub-item links */
    .footer-accordion .nav-item .nav-link {
        padding: 6px 20px;
        margin: 0;
        text-align: left;
        font-size: 0.95rem;
    }

}

/* 1. Modal pop up - INITIAL HIDDEN STATE (This prevents it from showing on load) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dim background */
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Crucial: Hide by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 2. THE VISIBLE STATE (Triggered by JS) */
.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 3. THE POP-UP BOX */
.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  max-width: 550px;
  width: 90%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  /* Animation: scale up from 80% to 100% */
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.is-visible .modal-content {
  transform: scale(1);
}

/* 4. TEXT STYLING */
.modal-content h2 {
  margin-top: 0;
  color: #222;
  border-bottom: 2px solid #e67e22;
  padding-bottom: 10px;
}

.modal-body {
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.6;
  color: #444;
  text-align: left;
  padding-right: 10px;
}

.highlight-box {
  background-color: #fff9f4;
  border-left: 4px solid #e67e22;
  padding: 15px;
  margin: 15px 0;
  font-style: italic;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  color: #aaa;
}

.close-btn:hover {
  color: #000;
}

/* Scrollable Menu */
.dropdown-menu.p-lg-3.show {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
}

.npopup-continue{
	visibility: hidden;
}

/* Reviews Thumbnails */
.nReviewsBlock {
    margin: 0px;
    min-height: 25px;
}
.nReviewsBlock .fa-star { color: #6B8E23; }
.nReviewsBlock .fa-star-o { color: #ccc; }
.nReviewsBlock .no-rating { color: #999; }

/* Reviews Product Header */
.prReviewSummary { margin: 8px 0 16px; }
.prStars { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.prStars .fas.fa-star { color: #6B8E23; }
.prStars .far.fa-star { color: #6B8E23; }
.prRatingText { font-size: 14px; color: var(--color-black); margin-left: 4px; }
.prReviewCount, .prNoRating { font-size: 14px; color: var(--color-black); text-decoration: underline; }
.prSrOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* Google "Top Quality Store" badge: Google sets its wrapper to a fixed 400px width, which is wider
   than most phone screens and let the whole page be swiped sideways. Keep it inside the screen. */
#google-merchantwidget-iframe-wrapper {
    max-width: calc(100vw - 8px) !important;
}


/* Search panel buttons (Add to Cart, Special Order, Out Of Stock...): keep the label on one line.
   On tablets the cards get narrow, and a label that wraps doubles the button height and pushes
   the cards out of line. Slimmer side padding leaves room for the longest label, and if a label
   still doesn't fit it ends in "..." instead of breaking onto a second line. */
.ais-Hits-item .buying-options .btn,
.pd-search-results .buying-options .btn {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ======================================================================== */
/* 2026-10 HOMEPAGE + PRODUCT CARD REFRESH (Asana "Website tweaks")         */
/* Everything for this round lives in this block. Colours and fonts are     */
/* tokens, so a palette or font change is a one-line edit here.             */
/* ======================================================================== */
:root {
	--bsr-orange: #F29801;
	--bsr-orange-dark: #D98800;
	--bsr-black: #231F20;
	--bsr-bg: #F7F3EC;          /* warm off-white page background */
	--bsr-card: #FFFFFF;
	--bsr-line: #E4DCCD;        /* card borders on the beige background */
	--bsr-muted: #5F5853;
	--bsr-instock: #3F6B45;     /* olive: passes contrast on white */
	--bsr-lowstock: #9A3412;    /* rust */
	--bsr-star: #6B8E23;        /* moss, matches product page stars */
	--bsr-star-empty: #D9D2C5;
	--bsr-radius: 12px;
	--bsr-font-card: "Barlow", Arial, Helvetica, sans-serif;
}

/* General: beige background, wider desktop page */
body { background-color: var(--bsr-bg); }
@media (min-width: 1400px) {
	.container { max-width: 1360px; }
}

/* ---------- Header: search, call, cart ---------- */
.bsr-header-tools { gap: 20px; }
.bsr-header-tools .header-search { flex: 1 1 auto; max-width: 640px; }
/* Search: field and button are both a fixed 48px and share one rounded outline.
   The search plugin's CSS (pd-search.css) loads after this file and uses !important,
   so these rules double the ID (#pd-main-searchbox#pd-main-searchbox) to outrank it
   no matter which file loads last. */
#pd-main-searchbox#pd-main-searchbox .input-group {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	height: 48px !important;
	margin: 0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background-color: #fff !important;
}
#pd-main-searchbox#pd-main-searchbox .input-group:focus-within { box-shadow: 0 0 0 3px rgba(242, 152, 1, 0.6) !important; }
#pd-main-searchbox#pd-main-searchbox input,
#pd-main-searchbox#pd-main-searchbox input.form-control {
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-size: 16px !important;
	line-height: 48px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: #fff !important;
}
#pd-main-searchbox#pd-main-searchbox .input-group-append {
	display: flex !important;
	height: 48px !important;
	margin: 0 !important;
}
#pd-main-searchbox#pd-main-searchbox button,
#pd-main-searchbox#pd-main-searchbox .bsr-search__btn {
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	height: 48px !important;
	min-height: 48px !important;
	margin: 0 !important;
	padding: 0 20px !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	color: var(--bsr-black) !important;           /* charcoal on orange: white text fails contrast */
	background-color: var(--bsr-orange) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	white-space: nowrap;
}
#pd-main-searchbox#pd-main-searchbox button:hover,
#pd-main-searchbox#pd-main-searchbox button:focus {
	background-color: var(--bsr-orange-dark) !important;
	color: var(--bsr-black) !important;
}
#pd-main-searchbox#pd-main-searchbox button .fa { color: var(--bsr-black) !important; }

.bsr-header-tools #header-call { flex: 0 0 auto; }

#header-cart.bsr-cart .bsr-cart__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	font-weight: 700;
	font-size: 15px;
	color: var(--bsr-black);
	background-color: var(--bsr-orange);
	border: 0;
	border-radius: 8px;
	white-space: nowrap;
}
#header-cart.bsr-cart .bsr-cart__btn:hover,
#header-cart.bsr-cart .bsr-cart__btn:focus { background-color: var(--bsr-orange-dark); color: var(--bsr-black); }
#header-cart.bsr-cart .bsr-cart__btn::after { display: none; }   /* no dropdown caret */
#header-cart.bsr-cart .bsr-cart__btn .fa { color: var(--bsr-black); font-size: 18px; }
#header-cart.bsr-cart #header-subtotal { font-weight: 400; }
#header-cart.bsr-cart .bsr-cart__count {
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
	color: #fff;
	background-color: var(--bsr-black);
}

/* ---------- Header on phones: slim bar after scrolling ---------- */
/* Works with the small script after </header> in headers/template.html. */
@media (max-width: 767.98px) {
	header.wrapper-header.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1030;
	}
	header.wrapper-header .logo-section,
	header.wrapper-header .logo-section .row > .col-12,
	header.wrapper-header .logo-section img.logo { transition: padding 0.2s ease, max-height 0.2s ease; }
	header.wrapper-header.is-compact .logo-section { padding-top: 4px !important; padding-bottom: 4px !important; }
	header.wrapper-header.is-compact .logo-section .row > .col-12 { padding-top: 4px !important; padding-bottom: 4px !important; }
	header.wrapper-header.is-compact .logo-section img.logo { max-height: 40px; width: auto; }
	header.wrapper-header.is-compact .menu-section { margin-bottom: 0 !important; }
	header.wrapper-header.is-compact #searchMobile { display: none !important; }
	header.wrapper-header.is-compact.search-open #searchMobile { display: block !important; }
	/* A long menu opened from the fixed header can scroll on its own */
	header.wrapper-header #navbarMainMenu.show {
		max-height: calc(100vh - 70px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ---------- Homepage: section headings centred ---------- */
/* Shop by Category, Best Sellers, Our Brands (and any other .section-title) */
#n_home .section-title { text-align: center; margin-left: auto !important; margin-right: auto !important; }
.bsr-section-sub { margin: -4px 0 20px; font-size: 16px; text-align: center; color: var(--bsr-muted); }
/* Phones: the theme shrinks section titles to 18px; bring them up to 28px so they
   read as headings. "Shop by Category" still fits on one line at 360px wide. */
@media (max-width: 767px) {
	#n_home .section-title {
		font-size: 28px !important;
		line-height: 1.15;
		margin-bottom: 12px;
	}
}

/* ---------- Homepage: USPs under the banner ---------- */
.bsr-usps {
	background-color: #fff;
	border-bottom: 1px solid var(--bsr-line);
}
.bsr-usps__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));   /* mobile: 2 x 2 */
	gap: 4px 12px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
}
@media (min-width: 768px) {
	.bsr-usps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 0; }   /* desktop: one row */
}
.bsr-usps__item a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	color: var(--bsr-black);
	font-size: 13px;
	line-height: 1.25;
	text-decoration: none;
}
.bsr-usps__item a:hover strong { color: var(--bsr-orange-dark); }
.bsr-usps__item .fas { flex: 0 0 auto; font-size: 20px; color: var(--bsr-orange); }
.bsr-usps__item strong { display: block; font-size: 14px; }
@media (min-width: 768px) {
	.bsr-usps__item a { justify-content: center; font-size: 14px; }
	.bsr-usps__item strong { font-size: 15px; }
}

/* Same band in the footer on every other page */
.bsr-usps--footer {
	clear: both;          /* sits below any floated page content, never beside it */
	margin-top: 40px;
	border-top: 1px solid var(--bsr-line);
}
/* The theme's .footer-divider adds a 45px gap above the sign-up band; not needed after this band */
.bsr-usps--footer + .footer-divider { margin-top: 0 !important; }

/* ---------- Homepage: Shop by category on one row (desktop) ---------- */
@media (min-width: 992px) {
	.bsr-cat-row { flex-wrap: nowrap; }
	.bsr-cat-row .bsr-cat-item { flex: 1 1 0; max-width: none; min-width: 0; }
	.bsr-cat-row .caption .headline { font-size: 13px; }
	.bsr-cat-row .caption a.btn { display: none; }      /* tiles are too small for a button; the whole tile links */
}

/* ---------- Homepage: hottest deals without the red background ---------- */
.bsr-deals { background-color: transparent; padding-top: 24px; }

/* Heading bar: title on the left; "Shop all deals" and the carousel's round
   prev/next buttons on the right; orange rule underneath. Same width as the
   carousel below it, so the edges line up. */
.bsr-deals__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 auto 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--bsr-orange);
}
@media (min-width: 768px) { .bsr-deals__head { max-width: 755px; } }
@media (min-width: 1200px) { .bsr-deals__head { max-width: 1010px; } }
.bsr-deals__title {
	margin: 0;
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: left;
	color: var(--bsr-black) !important;     /* a theme rule turns every h2 orange */
}
.bsr-deals__title span { color: var(--bsr-orange); }
.bsr-deals__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bsr-deals__all {
	font-family: var(--bsr-font-card);
	font-size: 15px;
	font-weight: 700;
	color: #9A5800 !important;              /* darker orange: readable as small text on beige */
	white-space: nowrap;
}
.bsr-deals__all:hover, .bsr-deals__all:focus { color: var(--bsr-black) !important; text-decoration: underline; }
@media (max-width: 767px) {
	.bsr-deals__title { font-size: 28px; }
	.bsr-deals__all { margin-right: auto; }
	.bsr-deals__actions { width: 100%; }        /* link on its own line under the title */
}

/* ---------- Homepage: our brands ---------- */
/* The logos grow 5% on hover, but the carousel window cuts off anything outside
   it, so the circles lost their top and bottom. Room above and below fixes it. */
.brand_carousel .slick-list {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

/* ---------- Homepage carousel arrows (hottest deals + best sellers) ---------- */
/* One style for both: a 40px round button, brand orange with a charcoal chevron
   (charcoal on orange is easy to see; white on orange isn't). The chevron is drawn
   with CSS borders, so it doesn't depend on Slick's icon font loading.
   On every screen the arrow sits level with the lower edge of the product photos
   (its bottom 2px above the photo's bottom), clear of the brand and name below.
   Desktop/tablet: outside the cards. Phones: just over the card edges.
   The height is worked out from the carousel's width (cqw), because the photos
   are square and as wide as the cards: photo bottom = card width - 8px. */
.deal-carousel.slick-initialized,
.bs-carousel.slick-initialized { container-type: inline-size; }
.deal-carousel .slick-arrow,
.bs-carousel .slick-arrow {
	position: absolute;
	top: 215px !important;                          /* older browsers: 4 full-size cards */
	top: calc(100cqw / 4 - 40px) !important;        /* 4 cards per row (1200px+) */
	bottom: auto !important;
	z-index: 20;
	width: 40px !important;
	height: 40px !important;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background-color: var(--bsr-orange) !important;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(35, 31, 32, 0.25);
	transform: translateY(-50%) !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.deal-carousel .slick-arrow:hover,
.bs-carousel .slick-arrow:hover,
.deal-carousel .slick-arrow:focus-visible,
.bs-carousel .slick-arrow:focus-visible { background-color: var(--bsr-orange-dark) !important; }
.deal-carousel .slick-arrow:focus-visible,
.bs-carousel .slick-arrow:focus-visible { outline: 2px solid var(--bsr-black); outline-offset: 2px; }
.deal-carousel .slick-arrow::before,
.bs-carousel .slick-arrow::before {
	content: "" !important;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	font-size: 0 !important;
	opacity: 1 !important;
	border-top: 3px solid var(--bsr-black);
	border-right: 3px solid var(--bsr-black);
}
.deal-carousel .slick-prev::before,
.bs-carousel .slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.deal-carousel .slick-next::before,
.bs-carousel .slick-next::before { transform: translate(-65%, -50%) rotate(45deg); }
.deal-carousel .slick-prev,
.bs-carousel .slick-prev { left: -50px !important; right: auto !important; }
.deal-carousel .slick-next,
.bs-carousel .slick-next { right: -50px !important; left: auto !important; }
@media (min-width: 768px) and (max-width: 1199px) {
	.deal-carousel .slick-arrow,
	.bs-carousel .slick-arrow { top: calc(100cqw / 3 - 40px) !important; }   /* 3 cards per row */
}

@media (max-width: 767px) {
	/* Two cards per row: the photo's bottom edge sits half the carousel's width
	   down, less about 16px for the card border and padding. The arrow is
	   lifted a further 20px so it sits fully on the photo, just above its bottom
	   edge, and never touches the brand or product name. */
	.deal-carousel .slick-arrow,
	.bs-carousel .slick-arrow {
		top: calc((100vw - 16px) / 2 - 36px) !important;   /* older browsers */
		top: calc(50cqw - 36px) !important;
		width: 36px !important;
		height: 36px !important;
	}
	.deal-carousel .slick-arrow::before,
	.bs-carousel .slick-arrow::before { width: 9px; height: 9px; }
	.deal-carousel .slick-prev,
	.bs-carousel .slick-prev { left: -4px !important; }
	.deal-carousel .slick-next,
	.bs-carousel .slick-next { right: -4px !important; }
}

/* ---------- Homepage: best sellers tabs ---------- */
.bsr-bestsellers { padding-top: 24px; }
.bsr-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	padding: 2px 2px 8px;
	overflow-x: auto;                   /* swipeable on phones */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.bsr-tabs::-webkit-scrollbar { display: none; }
/* Centre the tab row under the centred heading. Auto margins (rather than
   justify-content: center) keep the first tab reachable when the row is wider
   than the screen and scrolls sideways on phones. */
.bsr-tabs > .bsr-tab:first-child { margin-left: auto; }
.bsr-tabs > .bsr-tab:last-child { margin-right: auto; }
.bsr-tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 18px;
	font-family: var(--bsr-font-card);
	font-weight: 600;
	font-size: 15px;
	color: var(--bsr-black);
	background-color: #fff;
	border: 1px solid var(--bsr-line);
	border-radius: 999px;
	white-space: nowrap;
	cursor: pointer;
}
.bsr-tab:hover { border-color: var(--bsr-black); }
.bsr-tab.is-active { color: #fff; background-color: var(--bsr-black); border-color: var(--bsr-black); }
.bsr-tab:focus-visible { outline: 3px solid var(--bsr-orange); outline-offset: 2px; }

/* ---------- Homepage: reviews band ---------- */
.bsr-reviews {
	margin-top: 32px;
	padding: 40px 0;
	background-color: #fff;
}
.bsr-reviews__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: stretch;
}
@media (min-width: 768px) {
	.bsr-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bsr-reviews__intro { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
	.bsr-reviews__grid { grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 1fr)); gap: 16px; }
	.bsr-reviews__intro { grid-column: auto; padding-right: 48px; align-self: center; }
}
.bsr-reviews__stars { display: block; margin-bottom: 8px; font-size: 26px; letter-spacing: 2px; line-height: 1; color: #E08A00; }
.bsr-reviews__title {
	margin: 0 0 12px;
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 42px;
	font-weight: 700;
	line-height: 1.05;
	text-align: left;
	color: var(--bsr-black) !important;     /* a theme rule turns every h2 orange */
}
.bsr-reviews__sub,
#n_home .bsr-reviews__sub {
	margin: 0 0 16px;
	font-family: var(--bsr-font-card);
	font-size: 16px;
	line-height: 1.6;
	color: var(--bsr-muted);
}
.bsr-reviews__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; }
.bsr-reviews__links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-family: var(--bsr-font-card);
	font-size: 15px;
	font-weight: 700;
	color: var(--bsr-black) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.bsr-reviews__links a:hover { color: var(--bsr-orange-dark) !important; }
.bsr-review {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 22px;
	background-color: var(--bsr-bg);
	border-radius: var(--bsr-radius);
}
.bsr-review__stars { margin-bottom: 12px; font-size: 15px; letter-spacing: 1px; line-height: 1; color: #E08A00; }
.bsr-review__quote {
	flex: 1 1 auto;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-family: var(--bsr-font-card);
	font-size: 15px;
	line-height: 1.6;
	color: var(--bsr-black);
}
.bsr-review__by {
	font-family: var(--bsr-font-card);
	font-size: 13px;
	line-height: 1.5;
	color: var(--bsr-muted);
}
.bsr-review__by strong { color: var(--bsr-black); }
.bsr-review__by a { color: var(--bsr-muted) !important; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 767px) {
	.bsr-reviews { padding: 32px 0; }
	.bsr-reviews__title { font-size: 34px; }
}

/* ---------- Homepage: not sure where to start ---------- */
.bsr-guide { padding: 48px 0 24px; }
.bsr-guide__title {
	margin: 0 0 6px;
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.05;
	text-align: left;
	color: var(--bsr-black) !important;     /* a theme rule turns every h2 orange */
}
.bsr-guide__sub,
#n_home .bsr-guide__sub {
	margin: 0 0 24px;
	font-family: var(--bsr-font-card);
	font-size: 16px;
	color: var(--bsr-muted);
}
.bsr-guide__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));   /* phones: 2 x 2 */
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 992px) {
	.bsr-guide__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
.bsr-guide__grid > .bsr-guide__card {
	margin: 0 !important;
	padding: 0 !important;          /* a theme rule pads every list item by 24px */
}
.bsr-guide__card {
	overflow: hidden;
	background-color: #fff;
	border: 1px solid var(--bsr-line);
	border-radius: var(--bsr-radius);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bsr-guide__card:hover { box-shadow: 0 6px 18px rgba(35, 31, 32, 0.12); transform: translateY(-2px); }
.bsr-guide__link { display: block; height: 100%; text-decoration: none !important; }
.bsr-guide__link:focus-visible { outline: 3px solid var(--bsr-orange); outline-offset: -3px; }
.bsr-guide__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;          /* the guide images are 3:2 with their title in the top corner */
	object-fit: cover;
	background-color: #EAE2D6;
}
.bsr-guide__body { display: block; padding: 16px 18px 20px; }
.bsr-guide__name {
	display: block;
	margin-bottom: 6px;
	font-family: var(--bsr-font-card);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--bsr-black);
}
.bsr-guide__desc {
	display: block;
	font-family: var(--bsr-font-card);
	font-size: 15px;
	line-height: 1.5;
	color: var(--bsr-muted);
}
@media (prefers-reduced-motion: reduce) {
	.bsr-guide__card, .bsr-guide__card:hover { transition: none; transform: none; }
}
@media (max-width: 575px) {
	.bsr-guide__title { font-size: 32px; }
	.bsr-guide__body { padding: 12px; }
	.bsr-guide__name { font-size: 16px; }
	.bsr-guide__desc { font-size: 14px; }
}

/* Shared link with an arrow */
.bsr-link-arrow { font-weight: 700; }
.bsr-link-arrow::after { content: " \2192"; }

/* ---------- Homepage: Spit Finder quiz banner (in "Not sure where to start?") ---------- */
.bsr-quiz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin: 0 0 20px;
	padding: 20px 24px;
	font-family: var(--bsr-font-card);
	color: #fff !important;
	text-decoration: none !important;
	background-color: var(--bsr-black);
	border-radius: var(--bsr-radius);
	transition: background-color 0.2s ease;
}
.bsr-quiz:hover, .bsr-quiz:focus { background-color: #000; }
.bsr-quiz:focus-visible { outline: 3px solid var(--bsr-orange); outline-offset: 3px; }
.bsr-quiz__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	font-size: 24px;
	color: var(--bsr-black);
	background-color: var(--bsr-orange);
	border-radius: 50%;
}
.bsr-quiz__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.bsr-quiz__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bsr-orange);
}
.bsr-quiz__title {
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}
.bsr-quiz__desc { font-size: 15px; line-height: 1.4; color: #E9E4DC; }
.bsr-quiz__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 22px;
	font-size: 16px;
	font-weight: 700;
	color: var(--bsr-black);
	background-color: var(--bsr-orange);
	border-radius: 8px;
}
.bsr-quiz:hover .bsr-quiz__btn { background-color: var(--bsr-orange-dark); }
@media (max-width: 575.98px) {
	.bsr-quiz { padding: 18px; }
	.bsr-quiz__icon { width: 44px; height: 44px; font-size: 20px; }
	.bsr-quiz__title { font-size: 24px; }
	.bsr-quiz__btn { width: 100%; justify-content: center; }
}

/* ---------- Homepage: family owned ---------- */
.bsr-family { padding: 48px 0; }
.bsr-family__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}
@media (min-width: 992px) {
	.bsr-family__grid { grid-template-columns: minmax(0, 49%) minmax(0, 1fr); gap: 56px; }
}
.bsr-family__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;            /* matches the 600 x 400 team photo, so no one gets cropped */
	object-fit: cover;
	border-radius: var(--bsr-radius);
	background-color: #EAE2D6;      /* shows while the photo loads */
}
.bsr-eyebrow,
#n_home .bsr-eyebrow {
	margin: 0 0 10px;
	font-family: var(--bsr-font-card);
	font-size: 14px !important;             /* a theme rule sets homepage paragraphs to 16px */
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9A5800;                 /* darker orange: brand orange fails contrast as small text on beige */
}
.bsr-family__title {
	margin: 0 0 16px;
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.05;
	text-align: left;
	color: var(--bsr-black) !important;     /* a theme rule turns every h2 orange */
}
.bsr-family__body {
	max-width: 620px;
	margin: 0 0 20px;
	font-family: var(--bsr-font-card);
	font-size: 16px;
	line-height: 1.7;
	color: var(--bsr-muted);
}
.bsr-family__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bsr-btn-dark,
.bsr-btn-outline {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 20px;
	font-family: var(--bsr-font-card);
	font-size: 16px;
	font-weight: 700;
	border-radius: 6px;
	text-decoration: none !important;
}
.bsr-btn-dark { color: #fff !important; background-color: var(--bsr-black); border: 2px solid var(--bsr-black); }
.bsr-btn-dark:hover, .bsr-btn-dark:focus { color: #fff !important; background-color: #000; border-color: #000; }
.bsr-btn-outline { color: var(--bsr-black) !important; background-color: transparent; border: 2px solid var(--bsr-black); }
.bsr-btn-outline:hover, .bsr-btn-outline:focus { color: #fff !important; background-color: var(--bsr-black); }
@media (max-width: 767px) {
	.bsr-family { padding: 32px 0; }
	.bsr-family__title { font-size: 34px; }
}
.bsr-btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 24px;
	font-weight: 700;
	color: var(--bsr-black);
	background-color: var(--bsr-orange);
	border: 0;
	border-radius: 8px;
}
.bsr-btn:hover, .bsr-btn:focus { color: var(--bsr-black); background-color: var(--bsr-orange-dark); }

/* ---------- Product cards (every product grid on the site) ---------- */
.thumbnail.card-body.bsr-tile {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 12px;
	text-align: left;
	font-family: var(--bsr-font-card);
	background-color: var(--bsr-card);
	border: 1px solid var(--bsr-line);
	border-radius: var(--bsr-radius);
}
.bsr-tile__media { position: relative; margin-bottom: 10px; }
.bsr-tile__badges {
	position: absolute;
	top: 6px;
	right: 6px;                      /* top-right corner of the photo */
	left: auto;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	pointer-events: none;            /* clicks still reach the product link */
}
/* Badges fade out while the mouse is over the photo, so the product is fully
   visible. Mouse/trackpad only: on phones the badges always stay. */
.bsr-tile__badges { transition: opacity 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
	.bsr-tile__media:hover .bsr-tile__badges { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bsr-tile__badges { transition: none; }
}
.bsr-badge {
	display: inline-block;
	padding: 5px 8px;
	font-family: var(--bsr-font-card);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	border-radius: 4px;
}
.bsr-badge--save { color: var(--bsr-black); background-color: var(--bsr-orange); }
.bsr-badge--dark { color: #fff; background-color: var(--bsr-black); }
/* Free gift badge: sized like the Save badge. The theme sizes every image inside a
   product card to full width, so this needs the extra specificity and !important. */
.thumbnail.card-body.bsr-tile .bsr-badge--gift { width: auto !important; line-height: 0; }
.thumbnail.card-body.bsr-tile .bsr-badge--gift img {
	display: block;
	width: auto !important;
	height: 26px !important;
	max-width: 110px !important;
	object-fit: contain;
}

.bsr-tile__brand {
	margin: 0 0 2px;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bsr-muted);
}
.thumbnail.card-body.bsr-tile .card-title {
	min-height: 2.5em;                /* always reserve two lines so cards line up */
	margin: 0 0 6px;
	font-family: var(--bsr-font-card);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.25;
	text-align: left;
}
.bsr-tile__name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--bsr-black);
}
.bsr-tile__name a:hover { color: var(--bsr-orange-dark); }

.nReviewsBlock.bsr-tile__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 20px;
	margin: 0 0 6px;
}
.bsr-tile__rating-text { font-size: 13px; color: var(--bsr-muted); }

/* Star rating: grey stars with a moss overlay sized to the score (e.g. 4.7 = 94%) */
.bsr-stars {
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--bsr-star-empty);
	white-space: nowrap;
}
.bsr-stars::before { content: "\2605\2605\2605\2605\2605"; }
.bsr-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--bsr-star);
}
.bsr-stars__fill::before { content: "\2605\2605\2605\2605\2605"; }
.bsr-stars--lg { font-size: 22px; }

/* Reserve the same space for RRP + price + Afterpay on every card, so the stock
   line and button sit at the same height even when a card has no RRP or Afterpay. */
.bsr-tile__price { min-height: 84px; }
.bsr-tile__price p { margin: 0; }
.bsr-tile__rrp { font-size: 13px; color: var(--bsr-muted); }
.bsr-tile__now { margin: 2px 0 !important; font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--bsr-black); }
.bsr-tile__afterpay { margin-bottom: 4px !important; font-size: 14px; color: var(--bsr-black); }
.bsr-tile__stock { min-height: 21px; margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.bsr-stock--in { color: var(--bsr-instock); }
.bsr-stock--low { color: var(--bsr-lowstock); }
.bsr-stock--muted { color: var(--bsr-muted); }

.bsr-tile .buying-options { margin-top: auto; justify-content: flex-start; }
/* Stock line + button sit together at the bottom of every card */
.bsr-tile .bsr-tile__stock { margin-top: auto; }
.bsr-tile .bsr-tile__stock ~ .buying-options { margin-top: 0; }
.bsr-tile .buying-options .btn { width: 100%; min-height: 44px; font-weight: 700; border-radius: 8px; }

/* Carousels (homepage deals and best sellers): Slick lays slides out at their own
   height. Make every slide in a row the same height, so all cards line up and the
   buttons sit along one line at the bottom. */
.products-row.slick-initialized .slick-track { display: flex !important; }
/* Each slide is the card's <article>, which carries Bootstrap column classes
   (col-6 col-lg-3). In a flex row those would size it as a share of the whole
   track, so hand sizing back to the width Slick sets. */
.products-row.slick-initialized .slick-slide {
	flex: 0 0 auto !important;
	max-width: none !important;
	height: auto !important;
	float: none;
}
.products-row.slick-initialized .slick-slide > .bsr-tile,
.products-row.slick-initialized .slick-slide > div { height: 100%; }

/* Homepage carousels (hottest deals, best sellers): cards no wider than the
   category page cards (245px). Still four per row on desktop and three on
   tablets: the carousel is narrowed to fit them (card + 10px gap each) and
   centred, so the gaps match the category pages. Phones keep two full-width
   cards per row, like the category pages. */
@media (min-width: 768px) {
	.deal-carousel .bsr-tile,
	.bs-carousel .bsr-tile {
		max-width: 245px;
		margin-left: auto;
		margin-right: auto;
	}
	.products-row.deal-carousel,
	.products-row.bs-carousel {
		max-width: 765px;             /* 3 × 255px */
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width: 1200px) {
	.products-row.deal-carousel,
	.products-row.bs-carousel {
		max-width: 1020px;            /* 4 × 255px */
	}
}

/* Phones: two cards per row, so scale type down to fit */
@media (max-width: 575px) {
	.thumbnail.card-body.bsr-tile { padding: 10px; }
	.thumbnail.card-body.bsr-tile .card-title { font-size: 15px; }
	.bsr-tile__now { font-size: 21px; }
	.bsr-tile__afterpay, .bsr-tile__stock { font-size: 13px; }
	.bsr-tile__brand { font-size: 11px; }
	.bsr-tile__price { min-height: 72px; }
	.bsr-tile__stock { min-height: 19px; }
	.thumbnail.card-body.bsr-tile .bsr-badge--gift img { height: 22px !important; }
}
/* ---------- Footer sign-up: orange band ---------- */
/* Tested against the live Klaviyo form (SDyF4V) on bbqspitrotisseries.com.au, 19 Oct 2026. */
.bsr-signup {
	clear: both;              /* .footer-divider above is floated left; without this the band's
	                             contents get squeezed to 0px wide and the band balloons */
	display: flow-root;
	padding: 42px 0;
	background-color: var(--bsr-orange);
}
.bsr-signup__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 48px;
}
.bsr-signup__text { flex: 1 1 360px; }
.bsr-signup__title {
	margin: 0 0 4px;
	font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--bsr-black) !important;     /* a theme rule turns every h2 orange */
}
.bsr-signup__sub {
	margin: 0;
	font-family: var(--bsr-font-card);
	font-size: 16px;
	line-height: 1.4;
	color: var(--bsr-black);
}
.bsr-signup__form {
	flex: 0 1 660px;
	min-height: 52px;                        /* holds the space while Klaviyo loads, so nothing jumps */
}

/* Klaviyo form, laid out as one row: email field + button.
   The form is built in Klaviyo as a tall stack (intro text, email, button, "Trusted by
   20,000+ grill masters"). In this band Klaviyo's text rows are hidden; the band's own
   heading and line say it instead. The button is made charcoal: Klaviyo's orange button
   disappears on the orange band. Klaviyo's data-testid attributes are used rather than its
   generated class names, which change. */
.bsr-signup .klaviyo-form-SDyF4V [data-testid="form-row"]:has(.klaviyo-form-richtext) { display: none !important; }
.bsr-signup .klaviyo-form-SDyF4V form > div { flex-direction: row !important; align-items: stretch !important; gap: 8px; }
.bsr-signup .klaviyo-form-SDyF4V [data-testid="form-row"] { flex: 1 1 auto; min-width: 0; }
.bsr-signup .klaviyo-form-SDyF4V [data-testid="form-component"] { padding: 0 !important; }
.bsr-signup .klaviyo-form-SDyF4V [data-testid="form-row"]:has(input) [data-testid="form-component"] {
	flex: 1 1 auto !important;
	width: 100% !important;
	min-width: 0 !important;
}
.bsr-signup .klaviyo-form-SDyF4V [data-testid="form-row"]:has(button),
.bsr-signup .klaviyo-form-SDyF4V [data-testid="form-row"]:has(button) [data-testid="form-component"] {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
}
.bsr-signup .klaviyo-form-SDyF4V input[type="email"] {
	height: 52px !important;
	padding: 0 16px !important;
	font-family: var(--bsr-font-card) !important;
	font-size: 16px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: #fff !important;
}
.bsr-signup .klaviyo-form-SDyF4V button {
	width: auto !important;
	min-width: 0 !important;
	height: 52px !important;
	padding: 0 26px !important;
	font-family: var(--bsr-font-card) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border-radius: 8px !important;
	color: #fff !important;
	background-color: var(--bsr-black) !important;
	white-space: nowrap;
}
.bsr-signup .klaviyo-form-SDyF4V button:hover { background-color: #000 !important; }

footer.wrapper-footer { padding-top: 48px; }   /* the old box overlapped the footer; this band doesn't */
@media (max-width: 767px) {
	.bsr-signup { padding: 28px 0; }
	.bsr-signup__title { font-size: 30px; }
	.bsr-signup__sub { font-size: 15px; }
	.bsr-signup .klaviyo-form-SDyF4V button { padding: 0 14px !important; font-size: 14px !important; }
}

/* The footer's mobile USP slider repeats the USP band now under the homepage banner */
#n_home .footer-usps { display: none !important; }

/* ---------- Product pages on the beige background ---------- */
/* These boxes had no background of their own, so the beige page showed through
   inside their borders. White keeps the buy box, tabs and add-ons clean. */
.price-cart,
.tab-content,
.nCrossSellItem .row { background-color: #fff; }
/* Bootstrap's green stock text fails contrast; use the olive from the design spec */
.text-success { color: var(--bsr-instock) !important; }

/* ---------- Product pages: rounded sections ---------- */
/* Same 12px corners as the image card and product cards, so the page reads as
   one set of cards. Dark heading bars ("Shipping calculator", "Don't forget
   these") round off at the top and join the box under them, which rounds off
   at the bottom. */
#n_product .price-cart {
	border: 1px solid var(--bsr-line);
	border-radius: var(--bsr-radius);
}
#n_product .section-heading {
	margin-top: 16px;
	padding: 8px 12px;
	border-radius: var(--bsr-radius) var(--bsr-radius) 0 0;
}
#n_product .section-heading + .price-cart {
	border-top: 0;
	border-radius: 0 0 var(--bsr-radius) var(--bsr-radius);
	overflow: hidden;              /* keeps the add-on grid lines inside the corners */
}
/* Buttons in the buy box and add-ons: same 8px corners as the card buttons */
#n_product .price-cart .btn { border-radius: 8px; }

/* Description / videos / warranty tabs */
#n_product .nav-tabs { border-bottom: 0; }
#n_product .nav-tabs .nav-link { border-radius: 8px 8px 0 0; }
#n_product .tab-content {
	border-radius: 0 var(--bsr-radius) var(--bsr-radius) var(--bsr-radius);   /* square where the first tab joins */
	overflow: hidden;
}
@media (max-width: 767px) {
	#n_product .tab-content { border-radius: var(--bsr-radius); }
}

/* ---------- Product pages: title, section bars, photo arrows ---------- */
/* Phones: smaller, left-aligned title in normal case, so the price and
   Add to Cart come up sooner. */
@media (max-width: 767px) {
	#n_product .wrapper-product-title h1 {
		font-size: 22px !important;
		line-height: 1.25;
		text-align: left !important;
		text-transform: none !important;
	}
	#n_product .wrapper-product-title,
	#n_product .wrapper-product-title p { text-align: left !important; }
}
/* "Don't forget these" is now a real section heading (h2) and "Shipping calculator"
   a plain label; keep both looking like the dark bars they were. */
#n_product .section-heading {
	font-family: var(--bsr-font-card);
	font-size: 20px !important;
	font-weight: 700;
	line-height: 1.3;
	color: #fff !important;               /* a theme rule turns every h2 orange */
}
#n_product .fq-title { margin: 0 0 6px; }
/* Photo strip arrows: 40px round buttons (they were 20px, too small to tap) in the
   same style as the homepage carousel arrows. */
#n_product .img-slider { position: relative; }
#n_product .img-slider .slick-arrow {
	position: absolute;
	top: 50% !important;
	z-index: 5;
	width: 40px !important;
	height: 40px !important;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background-color: var(--bsr-orange) !important;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(35, 31, 32, 0.25);
	transform: translateY(-50%) !important;
	cursor: pointer;
}
#n_product .img-slider .slick-arrow:hover,
#n_product .img-slider .slick-arrow:focus-visible { background-color: var(--bsr-orange-dark) !important; }
#n_product .img-slider .slick-arrow:focus-visible { outline: 2px solid var(--bsr-black); outline-offset: 2px; }
#n_product .img-slider .slick-arrow::before {
	content: "" !important;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	font-size: 0 !important;
	opacity: 1 !important;
	border-top: 3px solid var(--bsr-black);
	border-right: 3px solid var(--bsr-black);
}
#n_product .img-slider .slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
#n_product .img-slider .slick-next::before { transform: translate(-65%, -50%) rotate(45deg); }
#n_product .img-slider .slick-prev { left: -6px !important; right: auto !important; }
#n_product .img-slider .slick-next { right: -6px !important; left: auto !important; }
#n_product .img-slider .slick-arrow.slick-disabled { opacity: 0.35; cursor: default; }

/* ---------- Product pages: buy box ---------- */
/* Tighter stack so Add to Cart is on screen without scrolling on a laptop:
   price + old price on one line, savings and sale end on one line, the selling
   points as a compact icon row under the button, SKU at the bottom. */
#n_product .bsr-buy-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 4px;
}
#n_product .bsr-buy-price__now {
	margin: 0 !important;
	font-family: var(--bsr-font-card);
	font-size: 36px !important;
	font-weight: 700;
	line-height: 1.1;
	text-align: left !important;
	color: var(--bsr-black) !important;
}
#n_product .bsr-buy-price__was {
	margin: 0;
	font-family: var(--bsr-font-card);
	font-size: 16px;
	font-weight: 400;
	color: var(--bsr-muted);
}
#n_product .bsr-buy-sale {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 6px 0 10px;
	font-family: var(--bsr-font-card);
	font-size: 14px;
}
#n_product .bsr-buy-sale__save {
	padding: 4px 8px;
	font-weight: 700;
	line-height: 1;
	color: var(--bsr-black);
	background-color: var(--bsr-orange);
	border-radius: 4px;
}
#n_product .bsr-buy-sale__ends { font-weight: 600; color: var(--bsr-lowstock); }
#n_product .wrapper-pricing .font-weight-bold { font-size: 15px; }       /* stock line */
#n_product .buying-options .btn-stack { margin-top: 12px; }
#n_product .buying-options .btn-stack > .col-12 { padding-top: 0; padding-bottom: 0; }
/* Add to Cart: full width of the buy box (a theme rule had shrunk it to its text) */
#n_product .buying-options .btn-stack .btn-lg {
	display: block;
	width: 100% !important;
	min-height: 52px;
	font-size: 18px;
	font-weight: 700;
	border-radius: 8px;
}
#n_product .bsr-buy-wishlist { min-height: 44px; margin-top: 8px; text-align: center; }   /* the link loads a moment after the page; its space is held */
/* Afterpay and PayPal "Pay in 4" messages load after the page. Hold their space
   (as measured on the live page) so the stock line, Add to Cart and everything
   below don't jump down when they arrive. Only where the price is within their
   $2,000 limit (class set in buying_options.template.html). */
#n_product .bsr-paylater square-placement { display: block; min-height: 38px; margin: 16px 0; }   /* the Afterpay script adds 16px margins */
#n_product .bsr-paylater #paypal-paylater-message { min-height: 47px; }
@media (max-width: 575.98px) {
	#n_product .bsr-paylater square-placement { min-height: 67px; }   /* wraps to two lines on phones */
}
#n_product .bsr-buy-wishlist a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;                    /* comfortable tap target */
	padding: 0 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bsr-muted) !important;
	text-decoration: none;
}
#n_product .bsr-buy-wishlist a:hover,
#n_product .bsr-buy-wishlist a:focus { color: var(--bsr-black) !important; text-decoration: underline; }
#n_product .bsr-buy-points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 8px 0 0;
	padding: 12px 0 0;
	list-style: none;
	border-top: 1px solid var(--bsr-line);
}
#n_product .bsr-buy-points li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 0 !important;               /* the theme pads every li by 24px */
	font-family: var(--bsr-font-card);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--bsr-black);
}
#n_product .bsr-buy-points i { font-size: 18px; color: var(--bsr-instock); }
#n_product .bsr-buy-pay__title {
	margin: 16px 0 0;
	font-family: var(--bsr-font-card);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--bsr-muted);
}
#n_product .bsr-buy-sku {
	margin: 8px 0 0;
	font-size: 12px;
	text-align: center;
	color: var(--bsr-muted);
}
@media (min-width: 992px) {
	/* Payment logos on one row on desktop (8 across) instead of two rows of 4 */
	#n_product ul[aria-label="Accepted payment methods"] { max-width: 100% !important; }
	#n_product ul[aria-label="Accepted payment methods"] > li { flex: 0 0 12.5%; max-width: 12.5%; padding: 0 6px !important; }
}

/* ---------- Product pages: image gallery ---------- */
/* Product photos are shot on white. On the beige page they showed as hard-edged
   white rectangles of different sizes. Each photo now sits in a white card with
   the same soft border and rounded corners as the product cards, and the main
   photo keeps a square frame so the page doesn't jump while it loads.
   The brand charcoal (#231F20) marks the thumbnail you're on and the one under
   the mouse; a charcoal border on every photo would be too heavy and pull the
   eye away from the product. */
#n_product .main-image {
	position: relative;
	padding: 16px;
	background-color: #fff;
	border: 1px solid var(--bsr-line);
	border-radius: var(--bsr-radius);
}
#n_product .main-image .zoom { display: block; }
#n_product .main-image #main-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0 auto;
}
/* Free gift badge sits on the photo's top-left corner instead of above it */
#n_product .main-image .stock-container {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	width: 110px;
	pointer-events: none;
}
#n_product .main-image .stock-container img { width: 100% !important; height: auto; }

/* Thumbnails: white squares, light border; charcoal for the current one and on hover */
#n_product .img-slider { width: 100%; margin-top: 4px; }
#n_product .img-slider a {
	display: block;
	overflow: hidden;
	background-color: #fff;
	border: 2px solid var(--bsr-line);
	border-radius: 8px;
	transition: border-color 0.2s ease;
}
#n_product .img-slider a:hover,
#n_product .img-slider a:focus-visible,
#n_product .img-slider a.dahactive { border-color: var(--bsr-black); }
#n_product .img-slider .product-image-small {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6px;
}
#n_product .img-slider .slick-slide > div > div,
#n_product .img-slider > div { padding: 0 4px; }
@media (max-width: 767px) {
	#n_product .main-image { padding: 10px; }
	#n_product .main-image .stock-container { width: 84px; }
}

/* ---------- Search results (Algolia) ---------- */
/* js/pd-search.js draws the same .bsr-tile card as the category pages, so the
   product card rules above style it. These lines only undo the search plugin's
   own card styling and the theme's list-item padding inside the results. */
.pd-search-results .ais-Hits-item.bsr-search-col { padding: 5px !important; }
.pd-search-results .ais-Hits-item > .thumbnail.card-body.bsr-tile {
	text-align: left !important;
	border: 1px solid var(--bsr-line) !important;
}
.pd-search-results .bsr-tile .card-title {
	margin: 0 0 6px !important;
	font-family: var(--bsr-font-card) !important;
	font-size: 18px !important;
	text-align: left !important;
}
.pd-search-results .bsr-tile .thumbnail-image { display: block; padding: 0 !important; }
.pd-search-results .bsr-tile .thumbnail-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
@media (max-width: 575px) {
	.pd-search-results .bsr-tile .card-title { font-size: 15px !important; }
}

/* ======================== end 2026-10 refresh ========================= */