.products_section_con {
	/*display: flex;*/
	gap: 24px;
    padding-top: 20px;
}

.products_filters_con {
	/*flex-shrink: 0;
	width: 300px;
	max-width: 100%;*/
	display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #D4DAE1;
    margin-bottom: 45px;
    padding-bottom: 22px;
}

/* filters */
.product_filters{
    align-content: center;
}

/*.product_filters {
	border: 1px solid #e0e1e4;
}
.product_filters > .s1 {
	background: #fcfcfc;
	border-bottom: 1px solid #e0e1e4;
	padding: 6px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
} 
.product_filters > .s2 {
	padding: 5px 18px 30px;
}*/


.product_filters .open_filters_btn:before,
.filters_popup .filter-heading span:before{
	content: '';
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
	background: url(/wp-content/themes/thom/images/svg/z-icofilter.svg);
}

.open_filters_btn{
	cursor: pointer;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
}

.filters_popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: flex-start;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filters_popup.active {
    visibility: visible;
    opacity: 1;
}

.filters_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.filters_popup.active .filters_overlay {
    opacity: 1;
}

.filters_popup .filter-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    /* Safety net only. The row is sized to fit, but if the title or link ever
       grows, "Clear All" drops to its own line rather than overlapping the title
       - which is what happened when the right padding was set too wide. */
    flex-wrap: wrap;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    background: #EEF1F8;
    /* Right padding = close button reach (6 offset + 44 wide = 50px) + 6px gap,
       so "Clear All" stops short of the button instead of butting against it.
       Keep in step with .filters_close. */
    padding: 26px 56px 18px 20px;
}
/* Never let the link be the thing that breaks - it stays whole and the title
   gives way first. */
.filters_popup .filter-heading > span {
    min-width: 0;
}

.filters_popup .clear_filters {
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	flex: 0 0 auto;
	white-space: nowrap;
}

.filters_popup .toggle_con .toggle_content {
    display: none;
}

.filters_popup .toggle_con.active .toggle_content {
    display: block;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInUpShort;
    animation-name: fadeInUpShort;
}

.filters_popup .toggle_trigger:after {
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 400;
	font-size: 24px;
	transition: transform 0.3s ease;
}
.filters_popup .active .toggle_trigger:after {
	transform: rotate(180deg);
}

.filters_popup .toggle_trigger{
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    border-bottom: 1px solid #D4DAE1;
    padding-bottom: 5px;
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}
.filters_content {
    position: relative;
    width: 300px; 
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
    box-shadow: -4px 0 12px rgba(0,0,0,0.15);
}

.filters_content .s2 {
    padding: 30px 20px;
}

.filters_popup.active .filters_content {
    transform: translateX(0);
}

/* Bigger tap target for the close control. It sits absolutely over the heading,
   which is why .filter-heading reserves extra right padding above - without that
   the "Clear All" link runs right up against it and the two are easy to mis-tap. */
/* Sits absolutely inside .filters_content (the panel), not inside .filter-heading,
   so it cannot be centred with top:50% - that would centre it on the whole panel.
   The offset below centres it on the heading instead:

     heading height = 26 top pad + 22 (line) + 18 bottom pad = 66px
     centre 33px, minus half this button (22px) = 11px

   If the heading's padding or line-height changes, re-derive this. */
.filters_close {
    position: absolute;
    top: 11px;
    right: 6px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.filters_popup .toggle_con{
    margin-bottom: 20px;
}


.filter_radio .option {
	cursor: pointer;
    position: relative;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.filter_radio .option:hover {
	text-decoration: underline;
}
.filter_radio .option:before {
	content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    border: 1px solid #37456E;
    border-radius: 4px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 7px;
}
.filter_radio .option:after {
	content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    right: 3px;
    top: 10px;
    border-radius: 2px;
    background: none;
}
.filter_radio .option.active:after {
	background: #9ccb3b;
}

.option[data-filter=""] {
    font-weight: 600;
}

.products_loop_con {
    width: 100%;
}
.products_loop {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
    position: relative;
    grid-auto-flow: row dense;
}

/* In-grid promotional banner
   The tile is just a grid-placement wrapper; all visual content is built in
   Elementor (referenced by template ID). Spans are driven by CSS custom
   properties set inline per banner so editors can change col/row span (and
   mobile span) without touching this file. */
.grid_banner {
    grid-column: span var(--cspan, 1);
    grid-row: span var(--rspan, 1);
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    min-height: 0;
    display: flex;
    align-self: stretch;  /* match the row height (= product item height) */
    height: 100%;         /* force the tile to the grid row track height */
}

/* Background image for term-driven banners. Set as --gb-image by grid-banner.php
   from the term's ACF field, because Elementor compiles section backgrounds into
   a per-template CSS file that one shared template cannot vary per term. */
.grid_banner.has-bg {
    background-image: var(--gb-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Make the embedded Elementor template fill the tile's full (row) height.
   Elementor's own wrappers don't inherit height, so push 100% down the chain:
   .grid_banner_elementor → .elementor → .elementor-section. */
.grid_banner_elementor,
.grid_banner_elementor > .elementor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.grid_banner_elementor > .elementor > * {            /* section or flexbox container */
    flex: 1 1 auto;
    width: 100%;
}
.grid_banner_elementor .elementor-container {        /* classic section inner */
    height: 100%;
}




/* loading */
.products_loop.loading:before {
    content: '';
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:#fff;
    opacity: .7;
}
.products_loop.loading:after {
	content: '';
	width: 40px;
	height: 40px;
	border: 5px solid #37456E;
	border-bottom-color: #9CCB3B;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
	position: absolute;
	top: 10px;
	right: 50%;
    z-index: 110;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.no_results {
	background: #37456e;
	grid-column: span 3;
	padding: 15px 30px;
	color: #fff;
	border-radius: 3px;
	font-size: 18px;
}

/* pagination */
.ff_pagination {
    display: flex;
	gap: 10px;
	margin-top: 30px;
	justify-content: center;
}
.ff_pagination button {
    padding: 0;
	width: 35px;
	height: 35px;
	border-radius: 3px;
}
.ff_pagination button.active {
    pointer-events: none;
    background: #37456E;
    color: #fff;
}

/* Background scroll lock while the quick view popup is open. Mobile only - the
   popup fits a phone screen, so the page scrolling behind it is just noise.
   overview.js adds the class and stashes the scroll offset in `top`; pinning the
   body is what actually stops mobile Safari scrolling underneath. */
@media (max-width: 767px){
    body.quick-view-open {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
        overflow: hidden;
    }
}

/* Quick View Popup */

.quick_view_popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quick_view_popup.active {
    visibility: visible;
    opacity: 1;
}

.quick_view_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quick_view_popup.active .quick_view_overlay {
    opacity: 1;
}

.quick_view_content {
    position: relative;
    width: 590px;
    max-width: 90%;
    height: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.4s ease;
    overflow-y: auto;
    box-shadow: -4px 0 12px rgba(0,0,0,0.15);
    padding: 20px;
    border-radius: 0;
}

.quick_view_popup.active .quick_view_content {
    transform: translateX(0);
}

.quick_view_close {
    position: absolute;
    top: 0px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 999;
}

.quick_view_popup .quick_view_icons{
	display: flex;
    gap: 10px;
    flex-wrap: wrap;
	margin-bottom:12px;
}

.quick_view_popup .quick_view_image{
	position:relative;
}

.quick_view_popup .quick_view_image .multibuy-badge{
    position: absolute;
    top: 8px;
    left: 8px;
}
.quick_view_popup .quick_view_image img{
	border-radius: 12px;
	margin-bottom: 8px;
	border: 1px solid rgba(2, 6, 19, 0.06);
	/* Contain, don't crop. The image now comes from the uncropped
	   woocommerce_single size (600x600) rather than image_size_quick_view,
	   which hard-cropped a 519x327 landscape frame out of square packshots and
	   cut the top and bottom off the product — see modules/products/functions.php:31.
	   The box is pinned to the ratio it has always had so the rest of the panel
	   does not move: quick view already requires scrolling to reach Add to Cart
	   on some products, and a taller image box would make that worse. */
	display: block;
	width: 100%;
	aspect-ratio: 519 / 327;
	object-fit: contain;
}

.quick_view_popup .quick_view_awdr .awdr_discount_bar{
    border-radius: 44px;
    border: 1px solid #9CCB3B;
    background: #DAECB6 !important;
    padding: 5px;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 15px;
    color: #37456E !important;
    text-align: center;
    /* Full width of the Quick View section, by client request 7 Sep 2026.
       Was 100%, reduced to 70% on request, now reverted to full width.
       The mobile override below is now the same value and left in place. */
    max-width: 100%;
    margin: 0 auto 10px auto;
}


.quick_view_popup .product_title{
	font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 10px;
}

.quick_view_popup .quick_view_price_rating_con{
    display: flex;
}

.quick_view_popup .quick_view_price span.price{
	font-size: 24px !important;
    font-style: normal;
    font-weight: 700;
    line-height: 34px;
    display: flex;          
    align-items: center;    
    gap: 0.25em;
	margin-bottom: 22px;            
    color: #37456E !important;
}

.quick_view_popup .quick_view_price span.price del {
    order: 2; 
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px; 
	text-decoration-line: line-through;              
}

.quick_view_popup .quick_view_price span.price ins {
    order: 1;  
	text-decoration:none;             
}

.quick_view_popup .quick_view_save_badge{
    padding: 5px 10px;
}

.quick_view_popup .quick_view_save_badge .save-badge{
    display: flex;
    padding: 5px 4px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #37456E;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.quick_view_popup .quick_view_rating{
    margin-left: auto;
}

.quick_view_popup .quick_view_description{
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20.2px;
	margin-bottom: 10px;
}

.quick_view_popup .quick_view_link{
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 21.2px;
	text-decoration-line: underline;
	margin-bottom: 22px;
}

.quick_view_popup .custom-listing-item{
	display: inline-flex;
    padding: 0px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.quick_view_popup .variations{
	width: 100%;
	margin-bottom: 10px;
}
.quick_view_popup .variation{
	display: block;
}
.quick_view_popup .variations label{
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #37456E;
	margin-bottom: 8px;
}
/* WooCommerce injects a "Clear" link once a variation is chosen; hide it in the
   popup (it otherwise shows as a stray dash on the search page). */
.quick_view_popup .reset_variations{
	display: none !important;
}
.quick_view_popup select{
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #37456E;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 13px 3em 13px 16px;
    background: #FFF url(/wp-content/themes/thom/images/svg/select-toggle.svg) no-repeat calc(100% - 12px) 50% / 11px !important;
    text-align: center;
    color: #37456E;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px; /* select-centering-normalize */
    height: auto;
}
.quick_view_popup select option{
    color: #37456E;
    font-size: 14px;
    font-weight: 600;
}

.quick_view_popup .free-shipping, 
.quick_view_popup .free-shipping-orders-49,
.quick_view_popup .free-shipping-orders-69, 
.quick_view_popup .free-shipping-orders-99{
	background-color: #C1DDF7;
}


.quick_view_popup .in-stock, 
.quick_view_popup .back-order{
	background-color: #DAECB6;
}

.quick_view_popup .low-stock{
	background: #F7DCC1;
}

.quick_view_popup .out-of-stock{
	background-color: #FFC6C6;
}

.quick_view_popup .required, 
.quick_view_popup .appointment-required,
.quick_view_popup .teleconsult-required {
	/*background: #6e376d;*/
	background-color: #CFAED3;
}

.quick_view_popup .discontinued{
	/*background-color: #363638;*/
	background-color: #BDBCC1;
}

.quick_view_popup .qty-add{
	display: flex;
	gap: 24px;
}

.quick_view_popup .qty-add .quantity-field{
	display: flex;
	max-width: 137px;
	height: 45px;
	box-sizing: border-box;
	padding: 0px 8px;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
	border-radius: 4px;
	border: 1px solid #37456E;
	background: #FFF;
}

.quick_view_popup .qty-add .quantity-field input[type=number]::-webkit-outer-spin-button,
.quick_view_popup .qty-add .quantity-field input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quick_view_popup .qty-add .quantity-field input[type=number] {
    -moz-appearance: textfield;
	padding:0;
    text-align: center;
    border: none;
	height: 100%;
}

.quick_view_popup .qty-add .quantity-field .qty-minus,
.quick_view_popup .qty-add .quantity-field .qty-plus{
	width: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 500;
    transition: background .1s ease, color .1s ease;
    flex: 1;
}

.quick_view_popup .qty-add button.button{
	display: flex;
    width: 100%;
    height: 45px;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 60px;
    background: #9CCB3B;
    border: none;
}

.quick_view_popup .multi-buy-section{
	display: flex;
    align-items: center;
    gap: 12px;
	margin-bottom: 22px;
}

.quick_view_popup .multi-buy-item{
	display: flex;
    border-radius: 6px;
    flex-wrap: wrap;
    text-align: center;
	max-width: auto;
    width: 100%;
	background:  #EEF1F8;
}

.quick_view_popup .multi-buy-item span{
    color: #37456E !important;
	flex: 0 0 100%;
	font-size: 12px !important;
    line-height: 18px;
}

.quick_view_popup .multi-buy-item span.price{
    font-weight: 600;
}

.quick_view_popup .multi-buy-item.highlighted {
    background-color: #DAECB6;
    border: 2px solid #9CCB3B;
    cursor: pointer;
}

/* Multi-buy: tighter on phones only, so the popup still fits one screen. The
   rules above are base level and apply at every width - these overrides must stay
   inside this media query or they change desktop too. */
@media (max-width: 767px){
    .quick_view_popup .multi-buy-section{
        gap: 5px;
    }
    .quick_view_popup .multi-buy-item span{
        font-size: 10px !important;
        line-height: 14px;
    }
}
.quick_view_popup .multi-buy-item { cursor: pointer; }


.quick_view_popup .autoship-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.quick_view_popup  input[type="radio"]{
    height: 20px;
    width: 20px;
    margin: 0;
}

.quick_view_popup input[type="radio"]:checked{
    accent-color: #37456E; 
}


.quick_view_popup .autoship-info-link-wrapper{
    text-align: right;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
}

.quick_view_popup .autoship-info-link-wrapper .autoship-info-link i{
    margin-left: 5px;
}

.quick_view_popup .autoship-type{
    padding: 12px;
    border: 1px solid #E0E1E4;
    border-radius: 4px;
    margin-bottom: 10px;
}

.quick_view_popup .autoship-type.selected{
    border: 1px solid #37456E;
}

.quick_view_popup .autoship-type.autoship-yes.selected{
    margin-bottom: 0;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
}

.quick_view_popup .autoship-frequency.active{
    padding: 0 12px 12px;
    border: 1px solid #37456E;
    border-radius: 0 0 4px 4px;
    border-top: none;
}

.quick_view_popup .autoship-badges{
    display: inline-block;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
}

.quick_view_popup .autoship-badges span{
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20.2px; 
    border-radius: 4px;
    background: #37456E;
    padding: 2px 10px;
}

.quick_view_popup .autoship-schedule-options select{
    border-radius: 4px;
    color: #37456E;
}

.quick_view_popup .autoship-price-display{
    display: none !important;
}


/*.quick-view-loader .spinner {
    width: 50px;
    height: 50px;
    border-top-color: #9CCB3B;
    border: 5px solid #ccc; 
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}*/
@media only screen and ( max-width:1280px ){
    .filters_content{
        width: 280px;;
    }
}

@media only screen and ( max-width:479px ){
	.products_section_con {
		display: block;
		padding-top: 0;
	}
	
	.products_filters_con {
		width: 100%;
    	margin-bottom: 20px;
	}
    .products_filters_con .product_filters .s1{
        justify-content: center;
        display: flex;
    }

    .open_filters_btn{
        font-size: 12px;
        font-weight: 600;
        line-height: 21.2px;
    }

    .quick_view_content{
        padding: 15px;
    }

    .quick_view_popup .custom-listing-item{
        font-size: 8px;
    }
    .quick_view_popup .quick_view_icons{
        margin-bottom: 8px;
        gap:8px;
    }
    .quick_view_popup .qty-add .quantity-field,
    .quick_view_popup .qty-add button.button{
        height: 40px;
    }
    .quick_view_popup .qty-add .quantity-field .qty-minus, 
    .quick_view_popup .qty-add .quantity-field .qty-plus{
        font-size: 20px;
    }

	.products_loop{
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    	gap: 15px;
	}

    .grid_banner {
        grid-column: span var(--cspan-m, 2);
        grid-row: span var(--rspan-m, 1);
    }

    .quick_view_popup .product_title{
        line-height: 22px;
    }

    .quick_view_popup .quick_view_awdr .awdr_discount_bar{
        font-size: 11px;
        max-width: 100%;
    }
    .quick_view_popup .yotpo-sr-bottom-line-summary {
        align-items: center !important;
        flex-direction: column !important;
        gap:3px;
    }
    .yotpo-sr-bottom-line-summary > span:first-child > span {
        height: 10px !important;
    }

    .quick_view_popup .yotpo-sr-bottom-line-summary svg{
        margin-inline-end:0 !important;
        height: 10px;
        width: 10px;
    }

    .quick_view_popup .yotpo-sr-bottom-line-button .yotpo-sr-bottom-line-text{
        font-size: 10px !important;
        line-height: 12px !important;
    }

    .quick_view_popup .quick_view_description{
        font-size: 10px;
        line-height: 16px;
        margin-bottom: 5px;
    }

    .quick_view_popup .autoship-badges span{
        font-size: 10px;
    }

    .quick_view_popup .autoship-info-link-wrapper .autoship-info-link{
        font-size: 10px;
    }
    .quick_view_popup .autoship-label{
        font-size: 12px;
        gap:5px;
    }
    .quick_view_popup .quick_view_save_badge{
        padding: 5px;
    }
    .quick_view_popup .quick_view_price span.price{
        margin-bottom: 0px;
    }
    .quick_view_popup .quick_view_save_badge .save-badge{
        font-size: 10px;
    }
    .quick_view_popup select, .quick_view_popup .autoship-type{
        height: 34px;
        padding:5px;
        font-size: 12px;
    }
    .quick_view_popup input[type="radio"]{
        height: 14px;
        width: 14px;
    }
    .quick_view_popup .quick_view_link, .quick_view_popup .variations{
        margin-bottom: 5px !important; 
        font-size: 10px;
    }
    .quick_view_popup .autoship-schedule-options{
        margin: 10px 0 !important;
    }

    .quick_view_popup .quick_view_price span.price del{
        font-size: 16px;
    }
    .quick_view_popup .quick_view_price span.price{
        font-size: 22px !important;
    }
    .quick_view_popup .variations label{
        font-size: 12px;
    }
    .item_product .quick_view_btn{
        top: 10px;
        right: 10px;
    }
    .item_product .quick_view_btn i{
        width: 24px;
        height: 24px;
    }
    .item_product .quick_view_btn .quick_view_trigger{
        width: 50px;
        height: 50px;
    }
    .item_product .title{
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 0;
        line-height: 21.2px;
    }
    .item_product .yotpo-bottom-line-scroll-panel .yotpo-sr-bottom-line-button span{
        align-self: center;
    }
    .item_product .yotpo-sr-bottom-line-summary svg{
        height: 16px;
        width: 16px;
        margin-inline-end: 3px;
    }
    .item_product .yotpo-sr-bottom-line-summary,
    .item_product .yotpo-sr-bottom-line-summary span{
        font-size: 14px !important;
        line-height: 20.2px;
    }
    .item_product .price_con{
        font-size: 18px;
        line-height: 28px;
    }
    .item_product .price_con del{
        font-size: 16px;
    }
    .item_product .popup-section,
    .item_product .popup-section .btn{
        padding: 10px;
        font-size: 11px;
    }
}

@media only screen and ( max-width:320px ){
    .quick_view_popup .custom-listing-item, 
    .quick_view_popup .quick_view_save_badge .save-badge{
        font-size: 8px;
    }
    .quick_view_popup .product_title {
        line-height: 18px;
        font-size: 16px;
    }
    .quick_view_popup .quick_view_price span.price{
        font-size: 16px !important;
    }
    .quick_view_popup .quick_view_price span.price del{
        font-size: 12px;
    }
    .quick_view_popup .quick_view_link, 
    .quick_view_popup .variations, 
    .quick_view_popup .variations label,
    .quick_view_popup select, 
    .quick_view_popup .autoship-type, 
    .quick_view_popup .autoship-label
    {
        font-size: 10px;
    }
    .quick_view_popup .yotpo-sr-bottom-line-button .yotpo-sr-bottom-line-text {
        font-size: 10px !important;
        line-height: 14px !important;
    }
    .quick_view_popup .qty-add .quantity-field{
       max-width: 100px; 
    }
    
    .quick_view_popup .qty-add button.button,
    .quick_view_popup .qty-add .quantity-field .qty-minus,
    .quick_view_popup .qty-add .quantity-field .qty-plus{
        font-size: 14px;
    }
    .quick_view_popup select, .quick_view_popup .autoship-type{
        height: 30px;
    }
    .quick_view_popup input[type="radio"]{
        height: 12px;
        width: 12px;
    }
    .quick_view_popup .quick_view_icons,
    .quick_view_popup .product_title,
    .quick_view_popup .quick_view_link, 
    .quick_view_popup .variations{
        margin-bottom: 5px;
    }
    .quick_view_content{
        padding: 10px;
    }

}


/* Category / Brand information tabs - read more truncation.
   The tabs come from get-category-information-tabs.php / get-brand-information-tabs.php.
   Base clamp truncates the collapsed text; .is-expanded removes the clamp. */
.tab-content-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.elementor-tab-content.is-expanded .tab-content-text {
    -webkit-line-clamp: unset;
    display: block;
}
.tab-read-more {
    background: none;
    border: none;
    color: #86B22C;
    font-weight: normal;
    font-size: 16px;
    font-family: "Work Sans";
    line-height: 25px;
    padding: 0;
    cursor: pointer;
}

/* Categories with no information tabs render the plain term description instead
   (Elementor "Archive Description" tag, wrapped by the get_the_archive_description
   filter in woocommerce/shop-overview-customizations.php). Reuse the same clamp —
   .tab-content-text above already carries it — and mirror the expanded state. */
.ff-cat-desc.is-expanded .tab-content-text {
    -webkit-line-clamp: unset;
    display: block;
}
/* Term descriptions are multi-paragraph. Inside a -webkit-box the default <p>
   margins collapse unpredictably, so state them explicitly and drop the outer
   ones to keep the collapsed block flush with the heading and the button. */
.ff-cat-desc .tab-content-text p {
    margin: 0 0 1em;
}
.ff-cat-desc .tab-content-text p:last-child {
    margin-bottom: 0;
}
/* Hidden by overview.js when the text is short enough to have nothing to reveal. */
.tab-read-more[hidden] {
    display: none;
}

/* Availability switch (availability-toggle.php) - sits beside Sort, outside the
   filter popup. Two-state: In Stock (left, default) / Out of Stock (right).
   .products_filters_right groups it with the sort dropdown so .products_filters_con
   keeps its space-between split: Filter Products on the left, these on the right. */
.products_filters_right {
    display: flex;
    align-items: center;
    /* Wide enough that the switch reads as its own control rather than part of
       the sort dropdown sitting next to it. */
    gap: 44px;
}
/* Pill switch with the label inside the track, opposite the knob - the ON/OFF
   pattern. The knob position and the fill colour both carry the state, so the
   label can name what you are looking at without being read as an instruction.
   Green = In Stock (available), grey = Out of Stock. */
.products_availability {
    display: inline-flex;
    align-items: center;
}
/* Every selector below is deliberately prefixed with .products_availability to
   raise its specificity one level.

   This file is pulled in TWICE: enqueued in <head> with a ?v= cache key, and again
   as a raw unversioned <link> echoed in the body by sub-category-products.php /
   brand-products.php / the search module. The unversioned copy is cached for a
   year and loads LAST, so at equal specificity a stale copy of these rules beats
   the fresh one and the switch renders with whatever styling was current when the
   browser first cached it. The extra class makes the fresh rules win on
   specificity instead of source order.

   Once those raw links carry ?v=filemtime() the prefixes are redundant, but they
   are harmless - leave them unless the duplicate <link> itself is removed. */
.products_availability {
    display: inline-flex;
    align-items: center;
}
.products_availability .availability_switch {
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    /* inline-grid, with both labels stacked in the same cell (see below). The
       track then sizes to whichever label is wider, so it stays exactly the same
       width in both states without hard-coding a number - and it still adapts if
       the strings are ever translated. */
    display: inline-grid;
    align-items: center;
    /* Centres the label within the padding box, i.e. in the space beside the knob
       rather than against the edge. The shorter label also centres inside the
       cell, which is sized to the longer one. */
    justify-items: center;
    margin: 0;
    /* .is-on mirrors this so the label sits the same distance from the edge in
       both states. */
    padding: 0 28px 0 10px;
    border: none;
    width: auto;
    height: 28px;
    border-radius: 14px;
    background: #9CCB3B;
    cursor: pointer;
    overflow: hidden;
    flex: 0 0 auto;
    transition: background .25s ease;
}
.products_availability .availability_switch.is-on {
    padding: 0 10px 0 28px;
}
.products_availability .availability_switch.is-on {
    background: #8A93A6;
}
/* The theme fills every button navy on hover, which would wipe out the state
   colour - hold the track colour through every interaction state. */
.products_availability .availability_switch:hover,
.products_availability .availability_switch:focus,
.products_availability .availability_switch:active {
    background: #9CCB3B !important;
    box-shadow: none !important;
}
.products_availability .availability_switch.is-on:hover,
.products_availability .availability_switch.is-on:focus,
.products_availability .availability_switch.is-on:active {
    background: #8A93A6 !important;
}
.products_availability .availability_switch:focus-visible {
    outline: 2px solid #37456e;
    outline-offset: 2px;
}
/* Both labels occupy the SAME grid cell, so they overlap rather than stack and
   the track sizes to the wider one. In normal flow, not absolute - an absolutely
   positioned label contributes nothing to the track's width. */
.products_availability .availability_switch_label {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    font-family: "Work Sans", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
}
/* visibility, NOT display:none - a hidden label must keep reserving its width or
   the track would shrink back to whichever label is showing. */
.products_availability .availability_switch .availability_switch_label[data-for="outofstock"],
.products_availability .availability_switch.is-on .availability_switch_label[data-for="instock"] {
    visibility: hidden;
}
.products_availability .availability_switch.is-on .availability_switch_label[data-for="outofstock"] {
    visibility: visible;
}
/* Positioned with `left` rather than a transform, because the track width is no
   longer a known constant - calc() off 100% follows whatever the label needs, and
   still animates. In Stock parks the knob right (like ON). */
.products_availability .availability_switch .availability_knob {
    position: absolute;
    top: 4px;
    left: calc(100% - 24px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: left .25s ease;
    pointer-events: none;
}
.products_availability .availability_switch.is-on .availability_knob {
    left: 4px;
}
@media (max-width: 767px){
    /* The panel is 280px here, so the title + "Clear All" + the close button only
       just fit on one row. Trimming the title a touch and tightening the side
       padding buys the ~5px of slack that keeps them on one line instead of
       wrapping. Available width: 280 - 16 - 54 = 210px. */
    .filters_popup .filter-heading{
        font-size: 15px;
        gap: 10px;
        padding: 24px 54px 16px 16px;
    }
    /* heading height 24 + 22 + 16 = 62, centre 31, minus half the button = 9 */
    .filters_close {
        top: 9px;
    }

    .products_filters_right {
        gap: 18px;
    }
    .products_availability .availability_switch {
        height: 24px;
        border-radius: 12px;
        padding: 0 24px 0 10px;   /* right pad clears the 16px knob (4 + 16 + 4) */
    }
    .products_availability .availability_switch.is-on {
        padding: 0 10px 0 24px;
    }
    .products_availability .availability_switch_label {
        font-size: 10px;
        letter-spacing: .2px;
    }
    .products_availability .availability_switch .availability_knob {
        width: 16px;
        height: 16px;
        top: 4px;                 /* (24 - 16) / 2 */
        left: calc(100% - 20px);  /* 100% - (16 + 4) */
    }
    .products_availability .availability_switch.is-on .availability_knob {
        left: 4px;
    }
}

/* Sort control: custom dropdown — muted "Sort" label + selected value + a
   styled options panel (matches Figma; replaces the native <select>). */
.products_sort_dropdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.products_sort_dropdown .sort_label {
    color: #37456e;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}
.products_sort_dropdown .sort_select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    outline: none;
}
.products_sort_dropdown .sort_current {
    color: #37456e;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
}
.products_sort_dropdown .sort_arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #37456e;
    border-bottom: 2px solid #37456e;
    transform: rotate(45deg);
    transition: transform .2s ease;
    margin-top: -4px;
}
.products_sort_dropdown .sort_select.open .sort_arrow {
    transform: rotate(-135deg);
    margin-top: 4px;
}
.products_sort_dropdown .sort_options {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    min-width: 280px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(2, 6, 19, 0.14);
    padding: 0 0 8px;
    overflow: hidden;
    z-index: 50;
    display: none;
}
.products_sort_dropdown .sort_select.open .sort_options {
    display: block;
}
.products_sort_dropdown .sort_options_header {
    color: #37456e;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    padding: 12px 24px;
    background: #f4f6f9;
}
.products_sort_dropdown .sort_option {
    color: #37456e;
    font-size: 16px;
    line-height: 22px;
    padding: 12px 24px;
    cursor: pointer;
    transition: background .1s ease;
}
.products_sort_dropdown .sort_option:hover {
    background: #f4f6f9;
}

/* Mobile: sort control sized to match the filter (12px). Placed AFTER the
   desktop sort rules above so it wins the cascade at this breakpoint. */
@media only screen and ( max-width:479px ){
    .products_sort_dropdown .sort_label,
    .products_sort_dropdown .sort_current,
    .products_sort_dropdown .sort_options_header,
    .products_sort_dropdown .sort_option{
        font-size: 12px;
        line-height: 21.2px;
    }
}

/* Kill the global button:hover navy background — keep it a plain green text link. */
.tab-read-more:hover,
.tab-read-more:focus,
.tab-read-more:active{background:none !important;color:#86B22C;box-shadow:none !important;outline:none}

/* sticky filter popup, no overlay */
.filters_overlay{display:none !important}
.filters_popup{pointer-events:none}
.filters_content{pointer-events:auto}

/* quick view add-to-cart navy label */
.quick_view_popup .qty-add button.button{color:#fff !important}

/* autoship gap normalize */
.quick_view_popup .variations{margin-bottom:10px !important}
.quick_view_popup .autoship-schedule-options{margin-top:0 !important}
.quick_view_popup .autoship-type{margin-top:0 !important;margin-bottom:10px !important}

/* ...but the selected "Setup Repeat Delivery" box must stay flush against the
   schedule panel below it, so the two read as a single control. The blanket
   !important above outranks the margin-bottom:0 in the joined-state rule
   further up this file, which is what re-opened the gap. */
.quick_view_popup .autoship-type.autoship-yes.selected{
    margin-bottom: 0 !important;
}

/* desktop docked filter sidebar */
@media (min-width: 1025px){
  .products_loop_con{transition:margin-left .35s cubic-bezier(.2,.7,.2,1),width .35s cubic-bezier(.2,.7,.2,1)}
  /* Gap between the docked filter panel and the product grid.
     The panel is position:fixed against the viewport edge, but the grid is pushed
     by a container-relative margin. A hard-coded margin therefore makes the visible
     gap equal the content container's left offset - which is why it had to be
     hand-calculated to match the right-hand spacing, and why it drifts as the
     viewport changes. overview.js already measures that offset as --dock-left;
     subtracting it pins the gap to --filters-gap at any width, so the only number
     to tune is the one below. max() keeps the grid inside its container on very
     wide screens, where its natural position already clears the panel. */
  .products_section_con{--filters-panel-w:300px;--filters-gap:45px}
  .products_section_con.filters-open{--loop-shift:max(0px,calc(var(--filters-panel-w) + var(--filters-gap) - var(--dock-left, 0px)))}
  .products_section_con.filters-open .products_loop_con{margin-left:var(--loop-shift);width:calc(100% - var(--loop-shift))}
  .products_section_con.filters-open .products_loop{grid-template-columns:repeat(3,1fr)}
}

/* The panel itself narrows to 280px below 1281px (see .filters_content above);
   keep the gap maths in step. Must stay after the min-width:1025px block so it
   wins in the 1025-1280 overlap. */
@media only screen and (max-width:1280px){
  .products_section_con{--filters-panel-w:280px}
}

/* docked panel card sizing */
@media (min-width: 1025px){
  .filters_popup.active .filters_content{margin-left:0}
}

/* Category information tabs — one Read More on mobile, not two.
   ----------------------------------------------------------------------------
   shop-overview-customizations.php wraps the term description in .ff-cat-desc
   with its own clamp and Read More button. Its docblock assumes a category with
   ACF `category_information` rows never prints that description, but nothing
   enforces it — the Secondary template's Archive Description widget renders
   regardless. So a category holding BOTH gets two clamped blocks, each with its
   own button: description + Read More, then the tabs + Read More.

   On mobile the tabs own the single Read More, so the description above them is
   shown in full without a clamp or a button of its own. The copy stays in the
   page rather than being suppressed, which matters because these are indexed
   category descriptions.

   Scoped by :has(.elementor-tabs) so it only touches categories that actually
   render tabs. .ff-cat-desc exists only on product_cat archives (the filter
   guards on is_tax), and brand archives are deliberately excluded from that
   filter, so the pairing occurs on exactly two terms today: 112 Custom-Fit
   Packages and 237 Disclosing. Categories with tabs but no description, and
   those with a description but no tabs, are unaffected.
   ---------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body:has(.elementor-tabs) .ff-cat-desc .tab-content-text {
        -webkit-line-clamp: unset;
        display: block;
    }
    body:has(.elementor-tabs) .ff-cat-desc .tab-read-more {
        display: none;
    }
}