#main-header .lg-search .search-form-wrapper .input-group {
    display:flex;
    flex-direction: row-reverse !important;

}

/* #main-header .search-form-wrapper form has padding: 0 5px 0 23px (child-theme.css)
   - a desktop-only rule never adjusted for mobile. The outer .search-form-wrapper
   already sits equally inset on mobile, so this asymmetric left/right padding
   on the form pushes the visible #dinputme input 18px further right than left. */
@media (max-width: 767.98px) {
    #main-header .search-form-wrapper form {
        padding-left: 5px;
        padding-right: 5px;
    }
}


main#page-contents {
    background: #F5F5F5;
}

/**
Blog templates (archive.php, single.php) never got the same #F5F5F5
background as page.php/#page-contents and the WooCommerce templates
(#woocommerce-wrapper, #main-product-content), so posts and post archives
(e.g. Information & Advice) rendered on plain white instead. Matching it
here for consistency across templates.
 */
#archive-wrapper,
#single-wrapper {
    background: #F5F5F5;
}

/**
Related-products Add to Cart button (blog post single-product upsell)
woocommerce/single-product/up-sells.php swaps out the normal add-to-cart
button (rendered via woocommerce/loop/add-to-cart.php, wrapped in
.add-to-cart-container, which is what gets the round icon styling below)
for its own plain <a>/<button class="ajax_add_to_cart"> to support the
size-variant popup - but that replacement has no icon/label, so it showed
as a blank blue bar. This recreates the same round icon button directly on
that element instead, scoped to .related-products so it doesn't affect the
normal add-to-cart button elsewhere.
 */
.related-products .ajax_add_to_cart {
    position: absolute !important;
    right: 12px !important;
    bottom: 12px !important;
    width: 57px !important;
    height: 57px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("/wp-content/themes/specialistsales/img/icons/icon-add-to-cart-new-pressed.png") no-repeat center / contain !important;
    opacity: 0.5;
    cursor: pointer;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
}
.related-products .ajax_add_to_cart:hover {
    opacity: 0.7;
}
.related-products .ajax_add_to_cart:active {
    opacity: 1;
}


#main-header .lg-search form, #main-header .lg-search input {
    padding: 0;
}

#main-header .lg-search input {
    max-height: 48px;
}

#main-header .lg-search .search-form-wrapper {
    /*border: 1px solid #1B75BC;*/
    /*border-radius: 5px;*/
    width: 100% ;
    max-width: unset !important;
    position: initial !important;

}

/**
Sticky header
 */



#main-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #fff !important;
}

#main-header .top-header {
    padding: 27px 0 24px;
}

#dinputme {
    border-radius: 0;

    background-image: url("/wp-content/themes/specialistsales/img/icons/icon-search.jpg");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 18px 18px;
    padding-left: 36px;
    border-radius: 6px;
    border: 1px solid #1B75BC;
}

@media (min-width: 1024px) {
    #page {
        overflow: visible !important;
    }
    #static-promo-b img {
        width: 1240px;
        object-fit: cover;
    }
    #static-promo-a img {
        width:823px;
        object-fit: cover;
    }
}

.desktop-search-form-wrapper {
    display: none !important;
}

.navbar .navbar-nav>li.dropdown {
    cursor: pointer;
}


.navbar .navbar-nav>li.dropdown .nav-link.dropdown-toggle:before {
    content: "";
    display: inline-block;
    /*font-family: FontAwesome;*/
    /*font-size: 26px;*/
    /*font-weight: 400;*/
    border: 0;
    margin-right: 12px;
    vertical-align: middle;
    width:28px;
    height: 28px;
    background: url("/wp-content/themes/specialistsales/img/icons/Menu-Icon.svg") no-repeat center / contain;

}


/*.show-dropdown .second-level-menu>li.has-children:hover .third-level-menu {*/
/*    visibility: visible;*/
/*    opacity: 100;*/
/*}*/

/**
Mega menu panels (Shop Our Range) scroll instead of cropping
The 3rd/4th level panels are position:absolute inside a position:sticky
header and were hard-coded to height:100vh with overflow visible. Since the
header stays pinned on scroll, any entries pushed past the bottom of the
screen (e.g. Turf & Domestic's 16 items) were permanently unreachable, not
just visually clipped - scrolling the page did nothing. Capping each panel's
height to the viewport below the header and scrolling internally fixes this
for any list length. --sm-header-height is kept in sync with the header's
real height by js/layout.js. (second-level-menu is left untouched: it's a
short, fixed category list that never overflows, and giving it overflow-y
would force overflow-x to clip too - see below.)

Overflow-y and overflow-x can't be set independently when one is 'visible'
(the UA forces the visible axis to 'auto' too), so a panel can't scroll
vertically while still letting its own child flyout escape sideways via
right:-370px the way third-level-menu normally hosts fourth-level-menu.
js/layout.js works around this by reparenting each fourth-level-menu to be
a sibling of second/third-level-menu (under the same li.dropdown) instead
of nesting it inside third-level-menu, positioned at the fixed 3rd column
(left:740px) - so it's no longer clipped by third-level-menu's own scroll.
min-height:0 overrides child-theme.css's unrelated 798px floor on
fourth-level-menu, which was otherwise clamping this height calc back up.
 */
.third-level-menu:not(.mobile-submenu),
.fourth-level-menu:not(.mobile-submenu) {
    height: calc(100vh - var(--sm-header-height, 174px)) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.third-level-menu:not(.mobile-submenu) {

    /*transform: translateX(-25px);*/
    /*transition:*/
    /*        transform 0.35s ease,*/
    /*        opacity 0.25s ease,*/
    /*        visibility 0s linear 0.35s;*/

    pointer-events: none;

}
.third-level-menu:not(.mobile-submenu).active-menu  {
    visibility: visible;
    opacity: 1;
    /*transform: translateX(0);*/
    /*transition:*/
    /*        transform 0.35s ease,*/
    /*        opacity 0.25s ease,*/
    /*        visibility 0s;*/
    display: unset;
    pointer-events: auto;
}


.fourth-level-menu:not(.mobile-submenu)  {

    /*transform: translateX(-25px);*/
    /*transition:*/
    /*        transform 0.35s ease,*/
    /*        opacity 0.25s ease,*/
    /*        visibility 0s linear 0.35s;*/



}
.fourth-level-menu:not(.mobile-submenu).active-menu-3 {
    visibility: visible;
    opacity: 1;
    /*transform: translateX(0);*/
    /*transition:*/
    /*        transform 0.35s ease,*/
    /*        opacity 0.25s ease,*/
    /*        visibility 0s;*/
    display: unset;

    pointer-events: auto;
}

.navbar .navbar-nav>li.dropdown.show-dropdown .nav-link.dropdown-toggle:before {
    content: "";
    display: inline-block;
    /*font-family: FontAwesome;*/
    /*font-size: 26px;*/
    /*font-weight: 400;*/
    border: 0;
    margin-right: 12px;
    vertical-align: middle;
    width:28px;
    height: 28px;
    background: url("/wp-content/themes/specialistsales/img/icons/Menu-Icon-active.svg") no-repeat center / contain;

}


.navbar .navbar-nav>li.dropdown .nav-link.dropdown-toggle:after {
    content: '' !important;
}

.navbar .navbar-nav>li.dropdown .nav-link.dropdown-toggle {
    pointer-events: none;
}

/* product tiles  */
.wc-ctm-price {
    line-height: 1.2;
}

.wc-ctm-price .start-price {
    font-size: 14px;
    color: #000 !important;
    display: block;
}

.wc-ctm-price .amount {
    font-size: 1.7rem;
    font-weight: 700;
    color: #525252;
}

.wc-ctm-price del {
    font-size:1.7rem;
}

.wc-ctm-price .tax {
    font-size: 12px;
    color:  #1B75BC;
}

.navbar .navbar-nav>li.dropdown .nav-link.dropdown-toggle:after {
    content: '' !important;
}

.single-product .single-product-slider .item {
    background: #fff !important;
}

.wc-ctm-price .out-of-stock {
    display: block;
    font-size: 13px;
    color: #EB5757;
    font-weight: 600;
}

span.cents {
    font-size: 12px;

    position: relative;
    bottom: 9px;  /* @todo better options*/
}

.regular-price .cents {
    display: none;
}

.add-to-cart-container {
    all: unset !important;
}


.add-to-cart-container a {
    all: unset !important;
}

.add-to-cart-container a:after  {
    content: "";
    display: inline-block;
    position: absolute;
    right: 12px;
    bottom: 12px;
    border: 0;
    opacity: 0.5;
    vertical-align: middle;
    width:57px;
    height: 57px;
    background: url("/wp-content/themes/specialistsales/img/icons/icon-add-to-cart-new-pressed.png") no-repeat center / contain;
    cursor: pointer;

}

.add-to-cart-container a:hover::after {
    opacity: 0.7;
}

.add-to-cart-container a:active::after {
    opacity: 1;
}

li.product price {
    position: absolute;
    bottom: 0 ;
    display: inline-block;
}

#woocommerce-wrapper {
    background : #F5F5F5;
    /*padding-top: 2em;*/
}



.woocommerce-loop-product__title {
    min-height: 105px;
    font-family: Open Sans;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0%;

}

.woocommerce ul.products li.product:active  {
    outline: rgba(86, 155, 208, 1) solid 1.5px; !important;
    box-shadow:
            0 4px 4px -4px rgba(12, 12, 13, 0.05),
            0 16px 16px -8px rgba(12, 12, 13, 0.1);
}
.woocommerce ul.products li.product:hover {
    outline: #8CBCE1 solid 1px;
    box-shadow:
            0 4px 4px -4px rgba(12, 12, 13, 0.05),
            0 16px 16px -8px rgba(12, 12, 13, 0.1);
}




.woocommerce ul.products li.product {
    height: 419px;
    max-height: 419px;

}

/*
Exlude sliders
 */
.woocommerce ul.products li.product:not(.owl-item *) {
    max-width: 299px;
    width:299px;
}


.woocommerce ul.products li.product {
    padding: 1em;
}

.woocommerce ul.products li.product .onsale {
    top: 15px !important;
    right: 15px  !important;
    margin: 0 !important;
}

.woocommerce ul.products li.product {
    padding-top: 5px;
}

.woocommerce ul.products li.product {
    margin: 0 !important;
    margin-left: 10px !important;
    margin-top: 10px !important;
}

.woocommerce ul.products .owl-item li.product {
    margin: 0 !important;
    margin-left: 0px !important;
    margin-top: 5px !important;
}

.home .owl-stage-outer {
    padding-bottom: 10px; /* space for box shadow */
    padding-right: 0;
    padding-left: 0;
}

.ul.products li.product {
    justify-content: end !important;
}

.mob-owl .owl-item {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/**
Shop By Category mobile carousel (sneak peek + larger icon/text)
The <li class="category-pill col-4 col-md-2..."> keeps its desktop col-4
(33%) width even inside the mobile owl-carousel's items:1 slide, so the
icon/label were flex-centered in the middle third of the slide with dead
space on both sides. Overriding to fill the (stagePadding-inset) slide
width lets .category-pill img grow up to its existing 162px cap (a real
size increase, not just a wider empty box), and the label gets a bigger,
more legible size to match. stagePadding itself (js/layout.js) reveals a
sliver of the next/prev category so users can see there's more to swipe.
 */
.mob-owl.owl-carousel .category-pill a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
.mob-owl.owl-carousel .category-pill {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.mob-owl.owl-carousel .category-pill span {
    font-size: 18px !important;
    margin-top: 0.5rem;
    display: inline-block;
}

.page .page-title {
    font-family: Open Sans;
    font-weight: 700;
    font-style: Bold;
    font-size: 28px;
    color: #2777BB;
    line-height: 100%;
    letter-spacing: 0%;

}

.page #page-title img {
    max-width: 135px;
}



.woocommerce-products-header h1 {
    font-size: 1.75rem;
    color: #2777BB;
    font-weight: 800;
    margin: 0px !important;
    font-family: Open Sans;
    font-weight: 700;
    font-size: 28px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.woocommerce-products-header .row .col-md-10 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.woocommerce ul.products li.product .star-rating {
    color:  #FFBB00;
    font-size: 1.025rem;
}

.nav-icons-wrapper {
    padding-right: 2.5rem;
}

.second-level-menu:not(.mobile-submenu)>li:hover {
    background: #193250 !important;
}
.second-level-menu:not(.mobile-submenu) a {
    line-height: 66px;

}

.nav-icons .cart>a {
    background: #3283C3 !important;
}

img.menu-item-icon {
    margin-right: 1rem;
    filter: brightness(0) invert(1);
}

.second-level-menu:not(.mobile-submenu) a {
    display: flex;
    align-items: center;
}

.category-pill img {
    background: #fff;
    border-radius: 50%;
    max-width: 162px;
    box-shadow:
            0px 4px 4px -4px rgba(12, 12, 13, 0.05),
            0px 16px 16px -8px rgba(12, 12, 13, 0.10);
}
.category-pill:hover img {
    border: #8CBCE1 solid 1px;
}

.category-pill:active img {
    outline: rgba(86, 155, 208, 1) solid 1.5px;
}

.category-pill:focus img {
    outline: rgba(86, 155, 208, 1) solid 1.5px;
}

/*.category-pill:active img {*/
/*    border: #569BD0 solid 1px;*/
/*}*/

.category-pill {
    margin-bottom: 2em;
}

.category-pill a span  {
    /*font-family: Open Sans !important;*/
    /*font-weight: 600 ;*/
    /*font-style: SemiBold;*/
    /*font-size: 20px;*/
    /*leading-trim: NONE;*/
    /*line-height: 100%;*/
    /*letter-spacing: 0%;*/
    /*text-align: center;*/
    /*text-transform: capitalize;*/

}
.category-pill a {
    color: #525252 !important;
}

#main-contents {
    background: #f5f5f5;
    padding-top: 2em;
}



.ss-right-banner .owl-stage-outer {
    padding: 0 !important;
}
.ss-right-banner {
    padding-left: 5px !important;
    min-height: 491px !important;
    height: 100% !important;
    min-height: unset !important;
    width: unset;
    min-width: unset;
    max-width: unset;
    float: unset;
    height: 491px !important;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* HOME PAGE Banners */

.page-banners .row {
    align-items: flex-start;
}

.page-banners .ss-left-banner,
.page-banners .ss-right-banner {
    display: block;
}

.page-banners .ss-aspect-3-2,
.page-banners .ss-aspect-1-1 {
    position: relative;
    width: 100%;
    overflow: hidden;

}

.page-banners .ss-aspect-1-1 {
    min-heigth: 100% !important;
}

.page-banners .ss-aspect-3-2 {
    aspect-ratio: 5 / 3;
}

.page-banners .ss-aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.page-banners .banner,
.page-banners .owl-carousel,
.page-banners .owl-stage-outer,
.page-banners .owl-stage,
.page-banners .owl-item,
.page-banners .item,
.page-banners .br-overlay {
    height: 100%;
}

.page-banners .banner,
.page-banners .item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.owl-carousel {
    padding: 1px !important;
    width: 100.5% !important; /* fix hidden left and right outline  */
}

body.home .page-banners .banner-right {
    min-height: 100% ;
}
.banner-right .owl-stage-outer {
    height: 100% !important;
}

body.page #content {
    padding-top:2em;
}

section.daily-deals {
    margin-bottom: 2em;
}

/* Gap between the static-promo-b banner and the "Today's Daily Deals"
   heading that follows it - was ~26px (2em in this context), bumped to 48px. */
section.promo-banner-full-width {
    margin-bottom: 48px;
}

#subscription_popup_btn {
    font-size: 0.75rem;
    padding: 0 10px;
    height: 60px;
    line-height: 56px;
    border: 2px solid #1b75bc;
    border-radius: 30px;
    width: auto;
    max-width: none;
    min-width: 348px;
}

.nav-link.active {
    opacity: 60%;
}

.navbar-nav .dropdown.active:hover, .dropdown.show-dropdown {
    background: rgba(25, 50, 80, 1);
}

.third-level-menu:not(.mobile-submenu)  {
    /*overflow: scroll;*/
    /*scrollbar-width: none;*/
    /*-ms-overflow-style: none;*/
}
.third-level-menu:not(.mobile-submenu)::-webkit-scrollbar,
.fourth-level-menu:not(.mobile-submenu)::-webkit-scrollbar  {
    display: none;
}

@media (max-width: 1190px) {
    .ss-left-banner {
        margin: auto;
        clear: both;
        margin-bottom: 10px;
    }

    .ss-right-banner {
        margin: auto;
        clear: both;
    }

    .page-banners>.container {
        padding-left: 0 !important;
        padding-right: 0!important;
    }

}
@media (min-width: 1190px) {
    .ss-left-banner {
        padding-right: 5px !important;
    }
}

@media (min-width: 768px) {
    .mobile-owl {
        display: flex;
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .page-banners .row {
        flex-direction: column;
    }

    .page-banners .ss-left-banner,
    .page-banners .ss-right-banner {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .page-banners .ss-left-banner {
        margin-bottom: 1rem;
    }
}

@media (max-width: 767px) { }

@supports not (aspect-ratio: 1 / 1) {
    .page-banners .ss-aspect-3-2::before,
    .page-banners .ss-aspect-1-1::before {
        content: "";
        display: block;
    }

    .page-banners .ss-aspect-3-2::before {
        padding-top: 66.6667%;
    }

    .page-banners .ss-aspect-1-1::before {
        padding-top: 100%;
    }

    .page-banners .ss-aspect-3-2 > *,
    .page-banners .ss-aspect-1-1 > * {
        position: absolute;
        inset: 0;
    }
}

@media (max-width: 767px) {

    .banner-right.ss-aspect-1-1 {
        width: 100vw;
        height: 100vw;
        padding: 0;
        margin: 0;
    }
}

/* END HOME PAGE Banners */


.owl-item li.product {
    width: 100% !important;
}

.home .owl-nav button {
    width: 48px;
    height: 48px;
}
.home .owl-nav button:before {
    content: "" !important;
}

.owl-nav button {
    width: 48px;
    height: 48px;
}
.owl-nav button:before {
    content: "" !important;
}

/* child-theme.css's base .owl-carousel .owl-nav button rule sets width:24px
   (2 classes + type), which beats the .owl-nav button override above (1
   class + type) on specificity regardless of source order - squeezing every
   circular SVG nav icon (e.g. the Information & Advice featured-post slider,
   related products on single posts) down from its native 47x47 into a 24px
   box instead of the full 48px square used elsewhere (e.g. home page). */
.owl-carousel .owl-nav button {
    width: 48px;
}

.owl-prev {
    left: -12px;
}
.owl-next {
    right:-25px;
}

.home .product-carousel .owl-prev {
    left: -25px;
}
.home .product-carousel .owl-next {
    right:-25px;
}

.mob-owl .owl-prev {
    left: 6px;
}
.mob-owl .owl-next {
    right: 6px;
}

@media (max-width: 767.98px) {
    .home .product-carousel .owl-prev {
        left: -8px;
    }
    .home .product-carousel .owl-next {
        right: -8px;
    }
    .home .product-carousel .owl-nav {
        top: calc(50% - 106px);
    }
}

.single-product .owl-nav button {
    width: 48px;
    height: 48px;
}
.single-product .owl-nav button:before {
    content: "" !important;
}
.single-product .product-carousel .owl-prev {
    left: -12px;
}
.single-product .product-carousel .owl-next {
    right:-25px;
}

.ss-upsell button.ss-open-upsell-modal {
    background: #fff !important;
    color: #fff !important;
}

footer .owl-carousel .owl-item img {
    /*object-fit: scale-down;*/
    height: 197px;
    width: 197px;
}

footer .owl-carousel .owl-item {
    /*background: #072F6B;*/
    min-height: 197px;
    width: 197px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    /*padding: 5px;*/
}

.single-product .up-sells .ajax_add_to_cart {
    border: none !important;
    background:none !important;
    outline: none !important;
}

.single-product .up-sells .ajax_add_to_cart:after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 12px;
    bottom: 12px;
    border: 0;
    opacity: 0.5;
    vertical-align: middle;
    width: 57px;
    height: 57px;
    background: url(/wp-content/themes/specialistsales/img/icons/icon-add-to-cart-new-pressed.png) no-repeat center / contain;
    cursor: pointer;
}

.footer-logos .d-flex {
    height: 197px;
    width:197px;
}

.single-product .up-sells .heading-line {
    margin-bottom: 0 !important;
    padding-left: 6px;
}

.single-product .up-sells .heading-line:before {
    left: 6px;
}

.home  .product-carousel {
    padding-top: 0;
}

.product-carousel .owl-item {
    padding: 1px !important; /* ensures outline */

}

.owl-light-green {
    background: #00E47C
}
.owl-dark-green {
    background: #00833D
}

.owl-light-blue {
    background: #0073D4;
}
.owl-ultra-light-blue {
    background: #0045E9;
}
.owl-dark-blue {
    background: #072F6B;
}

.header-icons li {
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 5px;
    width: 100% ;
    font-family: Open Sans;
    font-weight: 700;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    border-right: 1px solid #EAEAEA;
}

.header-icons li:last-child {
    border: none !important;
}

.header-icons {
    width: 100% !important;
    max-width:unset !important;
    padding:10px;
    background: #fff;

}
.home .customer-review{
    min-height:537px!important;
    background: #fff;
}

/* Read reviews button sits right at the card's bottom edge - give it more
   breathing room below. Matches the .btn rule's exact selectors
   (child-theme.css) so this wins on cascade order (layout.css loads last)
   rather than fighting over specificity. */
.wpcf7 body.home .daily-deals .customer-review input[type=submit],
body.home .daily-deals .customer-review .btn,
body.home .daily-deals .customer-review .wpcf7 input[type=submit] {
    margin-bottom: 32px;
}

/* child-theme.css shifts .carousel-control-next out to right:-1em but never
   gave .carousel-control-prev the matching left:-1em, so prev sat flush at
   left:0 - off-centering the review content between the two arrows. */
body.home .daily-deals .customer-review .carousel-control-prev {
    left: -1em;
}

.header-icons ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.header-icons img {
    filter: brightness(0) invert(32%)
}
.header-icons ul * {
    color: #525252 !important;
}

.single-product #page-title {
    background: #fff !important;
    margin: 0  !important;
}

@media (max-width: 1023.98px) {
    #page-title .mt-3 {
        margin-top: 0 !important;
    }

    #ss-products-result tbody tr {
        margin-bottom: 25px;
    }
}

.woocommerce-cart .cross-sells {
    padding-right: 5px;
    padding-left: 5px;
}
.cross-sells li.product {
    width: 46% !important;
}

.up-sells li.product .price {
    text-align: left !important;
}


.kb-card:hover {
    outline: #8CBCE1 solid 1px !important;
    box-shadow:
            0 4px 4px -4px rgba(12, 12, 13, 0.05),
            0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

.kb-card:active {
    outline: rgba(86, 155, 208, 1) solid 1px;
    box-shadow:
            0 4px 4px -4px rgba(12, 12, 13, 0.05),
            0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

.recommended-reading .col-12, .footer-logos .col-12 {
    padding: 0 !important;

}

.recommended-reading .row>div {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 767.98px) {
    .recommended-reading .col-12,
    .footer-logos .col-12 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

#main-footer {
    background: #f5f5f5;
}

.footer-logos {
    margin-top: 0 !important;
}


.recommended-reading .owl-stage-outer {
    padding-bottom: 20px !important;
}

/**
Product tiles (New to Our Range / Today's Daily Deals carousels) get a hover
outline + box-shadow (0 16px 16px -8px, .woocommerce ul.products li.product:hover),
which reaches ~24px below the tile. .home .owl-stage-outer only reserves
10px of padding-bottom, so the shadow's lower edge was clipped by the
carousel's overflow:hidden instead of fading out.
 */
.recommended-products .owl-stage-outer {
    padding-bottom: 28px !important;
}

/**
The Specialist Advice carousel cards (.kb-card) get a hover outline +
box-shadow, but .owl-stage-outer clips overflow with no horizontal padding,
so the leftmost/rightmost visible card sits flush against the clip edge -
their hover outline/shadow render entirely outside that boundary and get
cut off completely (asymmetric vs. middle cards, which have room on both
sides). Padding .owl-stage-outer itself doesn't work here: owl-carousel
sizes the stage/items from the stage-outer's border-box width (unaffected
by adding padding, since it's box-sizing:border-box), so that padding just
shifts the whole track sideways instead of shrinking it - it fixed the left
edge but pushed the last card's real content off the right edge instead.
.owl-item is also border-box with a JS-set inline width, so padding there
insets each card without touching that width calculation at all - the same
proven pattern already used by .product-carousel .owl-item below ("ensures
outline").
 */
.recommended-reading .owl-item {
    padding: 1px !important;
}

@media (max-width: 767.98px) {
    .recommended-reading .owl-prev {
        left: 20px;
    }
    .recommended-reading .owl-next {
        right: 20px;
    }
}

.breadcrumb-wrapper {
    background: #F5F5F5 !important;
}

#main-product-content {
    background: #f5f5f5 ;
    padding:2em;
    position: relative;
}

#main-product-content .onsale {
    top: auto;
    left: auto;
}


ul.wc-tabs a {
    background: #f5f5f5 !important;
}

ul.wc-tabs li {
    background: #f5f5f5 !important; ;
}


#accordionCheckout .card {
    background: #f5f5f5;
}


.product.type-product {
    background: #f5f5f5;
}
div.woocommerce-Tabs-panel .custom-style {
    background: #f5f5f5 !important;
}


div.woocommerce-Tabs-panel:before, div.woocommerce-Tabs-panel:after, div.woocommerce-Tabs-panel {
    background:#f5f5f5 !important;
}

.footer-logos img {
    border-radius: 8px  !important;
}

.owl-stage-outer {
    /*padding: 10px;*/
}
.mob-owl .owl-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*search page */

#ss-products-result tbody tr {
    width: 32%;
    margin-right: 7px;
    margin-bottom: 7px;

}

#ss-products-result tbody tr:active  {
    box-shadow: 0 4px 4px -4px rgba(12, 12, 13, 0.05), 0 16px 16px -8px rgba(12, 12, 13, 0.1);
    outline: rgba(86, 155, 208, 1) solid 1.5px; !important;

}
#ss-products-result tbody tr:hover {
    outline: #8CBCE1 solid 1px;
    box-shadow:
            0 4px 4px -4px rgba(12, 12, 13, 0.05),
            0 16px 16px -8px rgba(12, 12, 13, 0.1);
}

.ss-search-img  {
    outline: none;
    min-height: 196px;
    min-width: 196px;
}

.ss-product {
    align-items: flex-start !important;
}

.product-tile {
    /*min-height: 419px*/
    height: 419px;

}

.banner-left, .banner-right  {
    border-radius: 4px !important;
}



#search-wrapper, #search-tabs {
    background: #f5f5f5;
}

.product-tile .ss-title a {
    font-family: Open Sans !important;
    font-weight: 600;
    font-size: 17px;
    text-align : left;
    line-height: 100%;
    letter-spacing: 0%;
}

.ss-category-filter {
    background: #f5f5f5 !important;
}
.search-results .select2-container--default .select2-selection--single {
    background: #F5F5F5 !important;
}

/*search page */







/*
Menu
 */

/*.second-level-menu {*/
/*    height: 100vh;*/
/*    background: #2777BB !important;*/
/*}*/

@media (min-width: 1500px) {

    .page-banners .container {
        min-width: 1440px;
    }
    .search-results .container#content {
        min-width: 1440px !important;
    }
}

@media (min-width: 1024px) {
    body.search-results .container {
        max-width: 1360px;
    }
}

@media (min-width: 1024px) {
    #main-header .top-header .container {
        max-width: unset !important;
        width: 100%


    }
    .woocommerce.columns-4 .woocommerce ul.products li.product {
        max-width: 24.5%

    }

    .navbar-wrapper .container {
        max-width: unset !important;
        padding: 0 !important;
    }

    .products.columns-3 {
        min-width: 975px;
    }
}

/*@media (max-width: 900px) {*/

/*        .category-pill {*/
/*        -ms-flex: 0 0 49%;*/
/*        flex: 0 0 49%;*/
/*        max-width: 49%;*/
/*    }*/


/*    }*/
@media (max-width: 1099px) {
    .header-icons {
        display: none !important;
    }
}


/* banners v2 */
.ss-home-banners-v2 {
    margin-bottom: 1.5rem;
}

.ss-home-banners-v2__layout {
    display: grid;
    grid-template-columns: minmax(0, 892fr) minmax(0, 536fr);
    align-items: start;
    gap: 8px;
    width: 100%;
}

.ss-home-banners-v2__panel .owl-stage-outer  {
    padding: 0 !important;
    border-radius: 4px;
}
.ss-home-banners-v2__panel {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.ss-home-banners-v2__panel--static .banner-left {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 892 / 536 !important;
    overflow: hidden;
}

.ss-home-banners-v2__panel--slider .banner-right {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
}

.ss-home-banners-v2__panel--slider .owl-carousel {
    padding: 0 !important;
    width: 100% !important;
}

.ss-home-banners-v2__panel .banner,
.ss-home-banners-v2__panel .item {
    width: 100%;
    height: 100% !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ss-home-banners-v2__panel--slider .owl-carousel,
.ss-home-banners-v2__panel--slider .owl-stage-outer,
.ss-home-banners-v2__panel--slider .owl-stage,
.ss-home-banners-v2__panel--slider .owl-item {
    height: 100% !important;
}

@media (max-width: 767.98px) {
    .ss-home-banners-v2__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .ss-home-banners-v2__panel {
        width: 100%;
    }
}
/* banners v2 */

/* .home-page-extra (SEO copy, footer.php) is echoed straight into a
   Bootstrap .row with no .col wrapper, so it has none of the padding a
   .col-12 would normally add back to offset the row's -15px negative
   margins - it bleeds 15px past the container's own padding and sits flush
   against the screen edge instead of aligning with the rest of the page's
   content. */
.home-page-extra {
    padding: 0 15px;
}

.ss-results tr.odd, .ss-results tr.even {
    background: #fff !important;
    padding: 1px;
}

/* Single post page (loop-templates/content-single.php): table of contents box.
   #ss-contents's own background:#FAFAFB is set via a <style> tag embedded in
   the post body, so it renders after layout.css in document order - same
   ID specificity there means it would otherwise win regardless of this
   file's cascade position, hence !important. */
#ss-contents {
    background: #fff !important;
}

/* Single post page (includes/authorWidget.php): "About the author" box.
   .author-bio-container has a border/shadow but no declared background,
   so the page's grey shows through it. */
.author-bio-container {
    background: #fff;
}

/* Related-article tiles (.kb-card, used on single posts and the home page's
   Specialist Advice section) - the card itself is white but its text body
   uses a slightly grey #f9f9f9 (child-theme.css), which reads as a mismatched
   seam against the white photo area above it. */
.kb-card-body {
    background-color: #fff;
}

/* Related products on single post pages: #single-wrapper .related-products
   (sass/.../_posts.scss) sets an off-white #fbfbfb that mismatches the
   #F5F5F5 background everywhere else on the page (#single-wrapper), reading
   as an odd tinted box. Made transparent so the page's own grey shows
   through consistently instead. */
#single-wrapper .related-products {
    background-color: transparent;
}

/* Our Team page member popup: child-theme.css sets background-color: #fff
   (desktop) and #f0f0f0 (max-width:767px) on .member_popup_info_inner -
   both removed per request. */
.member_popup_info_inner {
    background-color: transparent;
}

/* Product category pages (woocommerce/archive-product.php): hide the
   category icon above the title on mobile. */
@media (max-width: 767.98px) {
    .woocommerce-products-header .col-md-2 {
        display: none;
    }
}

/* Product category pages: the mobile Filters button (.col-12.px-4, a
   !important 24px each side, overriding the col's own 15px gutter
   entirely) and the Default sorting dropdown (child-theme.css: 15px col
   gutter + its own 0 0 0 .625rem = 25px left/15px right) don't line up.
   Matching the dropdown's own padding to 9px each side (24px target - 15px
   gutter it sits in) aligns both edges with the Filters button. */
@media (max-width: 575.98px) {
    .woocommerce .woocommerce-ordering {
        padding: 0 9px;
    }
}

/* Home page "Don't miss our deals" sign-up button (front-page.php): the
   .mt-6 utility (4.5rem, !important) left too much space above it - halved. */
.subscription-cta.mt-6 {
    margin-top: 2.25rem !important;
}