/* ==========================================================================
   House of Mouth — Single Product modules (2024 redesign)
   Design tokens: SECONDARY/BASE #37456E, PRIMARY #9CCB3B, dark-green #86B22C,
   light-green #DAECB6, stroke #D4DAE1, Neutral BG #EEF1F8 / #F9FAFC.
   Base font: "Work Sans". Built section by section.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumbs  (module: single-product/breadcrumbs.php)
   -------------------------------------------------------------------------- */
.sp-breadcrumbs {
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 28px;
	text-transform: uppercase;
	color: rgba(55, 69, 110, 0.5); /* #37456E @ 50% opacity */
}
.sp-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.sp-breadcrumbs a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Product Gallery  (JetWoo — styling only)
   Rounded main image + thumbnails, active-thumb highlight, and a "Save With
   MultiBuy" badge overlaid top-left (injected by single-product.js when the
   product has MultiBuy tiers — mirrors the quick view).
   -------------------------------------------------------------------------- */
.jet-woo-product-gallery__content {
	position: relative;
}

/* Main image */
.jet-woo-product-gallery__image img {
	border-radius: 12px;
	border: 1px solid #D4DAE1;
	display: block;
}

/* Space between the main slider and the thumbnail strip. */
.jet-gallery-swiper-thumb {
	margin-top: 20px;
}

/* Gallery nav arrows sit at left/right: -50px (desktop gutter); below desktop the
   gallery is full-width so the right arrow spills past the viewport (horizontal
   overflow). Hide on tablet+mobile — swipe + thumbnails/dots handle nav. */
@media (max-width: 1024px) {
	.jet-woo-product-gallery .jet-swiper-nav,
	.jet-woo-product-gallery .jet-swiper-button-prev,
	.jet-woo-product-gallery .jet-swiper-button-next { display: none !important; }
}

/* --------------------------------------------------------------------------
   What's Included  (module: whats-included.php → ACF Flexible Content blocks)
   Blocks render in the editor's chosen order; styling is shared/consistent.
   -------------------------------------------------------------------------- */
/* More Details v2 = stacked Sections. Each Section is a full-width band with an
   optional background; content is a 1- or 2-column (50/50) stack of blocks. */
.sp-mds {
	font-family: "Work Sans", sans-serif;
	color: #37456E;
}
.sp-mds-section {
	position: relative;   /* positioning context for the full-bleed bg */
	padding: 48px 0;
}
/* Full-bleed background: a 100vw band centered behind the section, so the bg
   stretches the whole row while the content keeps its container width. */
.sp-mds--neutral::before,
.sp-mds--page::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	z-index: 0;
	pointer-events: none;
}
.sp-mds--neutral::before {
	background: #F9FAFC;   /* Neutral BG2 */
}
.sp-mds--page::before {
	background: #EEF1F8;   /* Page BG */
}
.sp-mds-inner {
	position: relative;    /* keep content above the full-bleed bg */
	z-index: 1;
	margin: 0 auto;
}
.sp-mds-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;   /* 50 / 50 */
	gap: 40px;
}
.sp-mds-col,
.sp-mds-single {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
@media (max-width: 768px) {
	.sp-mds-cols {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.sp-breadcrumbs{
		line-height: 20px;
	}
	.sp-attributes{
		gap: 12px !important;
	}
	.sp-tabs{
		padding: 16px;
	}
}
.sp-wi-title {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: #37456E;
	margin: 0;
}
.sp-wi-subtitle {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #86B22C;
	margin: 0;
}
.sp-wi-heading {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
	color: #37456E;
	margin: 0;
}
.sp-wi-text {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}
.sp-wi-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sp-wi-list li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 12px;
	color: #37456E;
	font-size: 14px;
	line-height: 1.5;
}
.sp-wi-list li:last-child {
	margin-bottom: 0;
}
/* Checkmark marker: 20x20 light-green circle + #495056 tick (10x8). Shared with
   the Inclusions block. */
.sp-wi-list li::before,
.sp-wi-inclusions li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #DAECB6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4.3 3.6 6.8 9 1.2' stroke='%23495056' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 8px;
}
.sp-wi-list a {
	color: #37456E;
	text-decoration: underline;
}

/* Icons row */
.sp-wi-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	width: 100%;
}
.sp-wi-icon {
	flex: 1 1 0;
	min-width: 90px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sp-wi-icon-img img {
	height: 56px;
	width: auto;
	display: block;
	margin-bottom: 8px;
}
.sp-wi-icon-label {
	font-weight: 700;
	font-size: 14px;
	color: #37456E;
}
.sp-wi-icon-sub {
	font-style: italic;
	font-size: 13px;
	color: #37456E;
}

/* Listed inclusions (green checkmark) */
.sp-wi-inclusions {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sp-wi-inclusions li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 14px;
	color: #37456E;
}
.sp-wi-inclusions li:last-child {
	margin-bottom: 0;
}
/* checkmark marker shared with .sp-wi-list (defined above) */

/* Media */
.sp-wi-media {
	margin: 0;
	width: 100%;
}
.sp-wi-media img,
.sp-wi-media video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}
/* Responsive embed (YouTube/Vimeo via oEmbed iframe) — 16:9 */
.sp-wi-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
}
.sp-wi-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Button (outline pill) */
.sp-wi-button {
	display: inline-block;
	padding: 12px 28px;
	border: 1px solid #37456E;
	border-radius: 60px;
	font-weight: 700;
	font-size: 14px;
	color: #37456E;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.sp-wi-button:hover {
	background: #37456E;
	color: #FFFFFF;
}

/* Segments (cards) block — image #97 */
.sp-md-segments {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}
.sp-md-segment {
	background: #F1F4F9;
	border-radius: 8px;
	padding: 16px 20px;
}
.sp-md-segment.is-important {
	background: #D9E6F7;
}
.sp-md-seg-title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	color: #37456E;
	margin-bottom: 4px;
}
.sp-md-seg-body {
	font-size: 14px;
	line-height: 1.6;
	color: #37456E;
}

/* --------------------------------------------------------------------------
   Tabs  (module: shipping-faq-tabs.php) — Shipping / FAQs
   -------------------------------------------------------------------------- */
.sp-tabs {
	font-family: "Work Sans", sans-serif;
	background: #F9FAFC;             /* neutral BG2 */
	border-radius: 12px;
	padding: 20px 40px;
}
.sp-tabs-nav {
	display: flex;
	gap: 0;                          /* tabs sit side by side; underlines contiguous */
	border-bottom: 1px solid rgba(55, 69, 110, 0.2); /* secondary @ 20% (inactive underline) */
}
.sp-tab-title {
	width: 160px;
	text-align: center;
	background: none !important;   /* no theme button fill — only the bottom border */
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0 !important;   /* theme button radius curves the underline — force straight */
	box-shadow: none !important;
	margin-bottom: -1px;
	padding: 8px 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;   /* semibold */
	line-height: 22px;
	color: rgba(55, 69, 110, 0.5);   /* inactive: muted navy */
	cursor: pointer;
}
.sp-tab-title:hover,
.sp-tab-title:focus,
.sp-tab-title:active {
	background: none !important;
	background-color: transparent !important;
	color: #37456E;
	outline: none;
	box-shadow: none !important;
}
.sp-tab-title.active {
	color: #37456E;                  /* active: full navy */
	border-bottom-color: #9CCB3B;    /* primary underline on the active tab */
}
.sp-tabs-panels {
	padding-top: 8px;
}

/* Accordion (native <details>/<summary>) — shared by the Shipping/FAQ tabs AND
   the What's Included accordion block (both output .sp-acc-item).
   Each item: bottom divider only — no box, no radius. */
.sp-acc-item {
	border: 0;
	border-bottom: 1px solid #D4DAE1;
	border-radius: 0;
	margin-bottom: 0;
}
.sp-acc-item > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;   /* semibold */
	color: #37456E;
	cursor: pointer;
}
.sp-acc-item > summary::-webkit-details-marker {
	display: none;
}
.sp-acc-item > summary::before {
	content: "\25B6";   /* right-pointing triangle */
	font-size: 10px;
	color: #37456E;
	transition: transform .15s ease;
}
.sp-acc-item[open] > summary::before {
	transform: rotate(90deg);
}
.sp-acc-item > *:not(summary),
.sp-acc-item .sp-acc-body {
	padding: 0 20px 16px;
	color: #37456E;
}
/* Trailing note (content after the last accordion section, e.g. the shipping "Note:"). */
.sp-tab-panel .sp-acc-note {
	padding: 16px 0 0;
	color: #37456E;
	font-size: 14px;
	line-height: 20px;
}

/* Thumbnails (item 9, client feedback 18 Sep 2026)
   "product thumbnails should show full image, they are being constricted".

   They were: the slide was forced to a LANDSCAPE aspect-ratio of
   167.58 / 105.84 and the image set to object-fit:cover, so a square product
   photo was cropped top and bottom. Measured before the change: natural
   1080x1080 (AR 1.000) rendered into 163x103 (AR 1.584) - about 37% of the
   image height discarded.

   The box is now square, matching the product photos, and the image is
   contained rather than cropped. A non-square source letterboxes inside the
   square box instead of losing anything. */
.jet-woo-swiper-control-thumbs__item-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
}
.jet-woo-swiper-control-thumbs__item-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	display: block;
	border: 0;
	border-radius: 8px;
}

/* Pagination dots (if shown) */
.jet-woo-product-gallery .swiper-pagination-bullet-active {
	background: #37456E;
}

/* Custom bullet dots shown alongside the thumbnails (injected by JS). */
.sp-gallery-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}
.sp-gallery-dots .sp-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	box-sizing: border-box;
	border: 1.5px solid #37456E;   /* outlined ring for inactive */
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .12s ease;
}
.sp-gallery-dots .sp-dot:hover {
	background: rgba(55, 69, 110, 0.3);
}
.sp-gallery-dots .sp-dot.active {
	background: #37456E;            /* solid navy fill for active */
}

/* "Save With MultiBuy" badge overlay */
.sp-gallery-multibuy {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	pointer-events: none;
}
.sp-gallery-multibuy img {
	display: block;
	border: 0;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   Title + Price row
   (native woocommerce-product-title widget + price.php module)
   -------------------------------------------------------------------------- */
.sp-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 8px;
	white-space: nowrap;
	font-family: "Work Sans", sans-serif;
	font-weight: 700;
	font-size: 24px;   /* final / sale price */
	line-height: 34px;
	color: #37456E;
}
.sp-price-amounts {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	white-space: nowrap;
}
/* WooCommerce wraps the amounts in <span class="price"><del>..</del><ins>..</ins>.
   Make it flex so the order below reorders sale before struck. */
.sp-price .price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.sp-price .amount,
.sp-price ins {
	color: #37456E;
	text-decoration: none;
}
.sp-price ins {
	order: 1;          /* sale / final price first (bold, 24/34) */
	font-size: 24px;
	line-height: 34px;
	font-weight: 700;
}
.sp-price del {
	order: 2;          /* original struck price second (18/28) */
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: rgba(55, 69, 110, 0.5); /* #37456E @ 50% */
}
.sp-price del .amount {
	color: inherit;
}
.sp-save-badge {
	align-self: center;
	font-family: "Red Hat Text", sans-serif;
	font-size: 12px;
	line-height: 1;
	font-weight: 500;
	color: #FFFFFF;
	background: #37456E;
	padding: 5px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Reviews row  (single_product_star → Yotpo bottom-line rating)
   "X Reviews" count text: semibold 12 / 21.2 (stars left untouched)
   -------------------------------------------------------------------------- */
.sp-reviews {
	text-align: left;
}
.sp-reviews .yotpo-sr-bottom-line-summary {
	justify-content: flex-start !important;
}
.sp-reviews .yotpo-sr-bottom-line-summary,
.sp-reviews .yotpo-sr-bottom-line-summary span,
.sp-reviews .yotpo-sr-bottom-line-text {
	font-size: 12px !important;
	line-height: 21.2px !important;
	font-weight: 600 !important;
}
/* "X Reviews" text — larger + bolder (desktop + mobile) */
.sp-reviews .yotpo-sr-bottom-line-text {
	font-size: 14px !important;
	font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Yotpo reviews widget — Reviews / Q&A tabs  (design ref: image 112)
   New Yotpo widget markup (.ugc-storefront-widgets-tabs-container). Two equal,
   centered tabs spanning the width; active = navy bold + green underline,
   inactive = navy + grey underline.
   -------------------------------------------------------------------------- */
.yotpo-main-widget-tabs.ugc-storefront-widgets-tabs-container {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 500px !important;
	margin: 0 auto !important;
}
/* Each tab (inactive / default) */
.yotpo-main-widget-tabs .ugc-storefront-widgets-tabs-container__tab {
	flex: 1 1 0 !important;
	border: 0 !important;
	border-bottom: 2px solid #e0e1e4 !important;
	background: transparent !important;
	color: #37456e !important;
	font-family: "Work Sans", sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 27px !important;
	text-align: center !important;
	padding: 14px 25px !important;
	margin: 0 !important;
	min-width: 150px;
	cursor: pointer;
}
/* Active / selected tab */
.yotpo-main-widget-tabs .ugc-storefront-widgets-tabs-container__tab.selected,
.yotpo-main-widget-tabs .ugc-storefront-widgets-tabs-container__tab[aria-selected="true"] {
	border-bottom: 2px solid #9ccb3b !important;
	font-weight: 700 !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Custom Listing  (module: shipping-options.php)
   Product label + dynamic stock badges. Styling mirrors the quick view.
   -------------------------------------------------------------------------- */
.custom-listing-section {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: "Work Sans", sans-serif;
}
.custom-listing-item {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #37456E;
}
.custom-listing-item.free-shipping,
.custom-listing-item.free-shipping-orders-49,
.custom-listing-item.free-shipping-orders-69,
.custom-listing-item.free-shipping-orders-99 {
	background-color: #C1DDF7;
}
.custom-listing-item.in-stock,
.custom-listing-item.back-order {
	background-color: #DAECB6;
}
.custom-listing-item.low-stock {
	background-color: #F7DCC1;
}
.custom-listing-item.out-of-stock {
	background-color: #FFC6C6;
}
.custom-listing-item.required,
.custom-listing-item.appointment-required,
.custom-listing-item.teleconsult-required {
	background-color: #CFAED3;
}

/* --------------------------------------------------------------------------
   Add to Cart  (module: add-to-cart.php → WooCommerce default form)
   One row: Variation Select (grows) + qty stepper + green pill button.
   -------------------------------------------------------------------------- */

/* Hide theme/plugin extras + native bits the design omits.
   .single_variation = inline price/availability (shown in the top price module
   instead); .label = "Select Option:"; .reset_variations = "Clear". */
.sp-atc .cuw-add-to-cart,
.sp-atc .cuw-add-to-cart-force,
.sp-atc .add-to-cart-images,
.sp-atc .multi-buy-discount,
.sp-atc .reset_variations,
.sp-atc .variations .label,
.sp-atc .single_variation {
	display: none !important;
}

/* One-row form. nowrap forces variation + qty + button onto a single line
   (variation shrinks); !important beats woocommerce.css / theme rules. */
.sp-atc,
.sp-atc form.cart {
	width: 100%;
}
.sp-atc form.cart {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0 !important;
	align-items: flex-start;
}
/* Spacing via margins (not gap): the native variable form has extra/empty flex
   nodes (e.g. #yith-wapo-container) that would get gap rendered around them,
   causing space before the select / after the button. margin-left on qty +
   button gives exactly: variation — 16 — qty — 16 — button, no outer space. */
.sp-atc .quantity { margin: 0px 16px !important; }
.sp-atc .single_add_to_cart_button { margin: 0 !important; }
.sp-atc #yith-wapo-container { margin: 0 !important; padding: 0 !important; }

/* Variation select — grows to fill the row. Native markup is a <table>, so it
   must be display:block to behave as a growing flex item (a <table> flex item
   shrink-wraps to its content, leaving empty space on both sides). */
.sp-atc .variations {
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
}
.sp-atc .variations tbody,
.sp-atc .variations tr,
.sp-atc .variations td,
.sp-atc .variations td.value {
	display: block !important;
	width: auto !important;
	padding: 0 !important;
}
/* Multiple variation attributes → stacked selects: 10px gap between each. */
.sp-atc .variations tr + tr {
	margin-top: 10px !important;
}
.sp-atc .variations select,
.sp-atc .select-container select {
	width: 100% !important;
	max-width: none !important;
	height: 45px !important;
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 40px 0 16px !important;
	border: 1px solid #37456E !important;
	border-radius: 8px !important;
	background: #FFFFFF url(/wp-content/themes/thom/images/svg/select-toggle.svg) no-repeat right 14px center / 12px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color: #37456E;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	cursor: pointer;
}
.sp-atc .select-container { display: block; width: 100%; position: relative; }
.sp-atc .select-container:after { display: none; }

/* Flatten the native wrappers so qty + button become direct flex children of
   form.cart. This gives exactly: variation — 16px — qty — 16px — button, with
   no wrapper-induced spacing on the outer edges. */
.sp-atc .single_variation_wrap,
.sp-atc .woocommerce-variation-add-to-cart {
	display: contents !important;
}

/* Quantity stepper — native <input> + JS-injected +/- buttons */
.sp-atc .quantity {
	display: inline-flex !important;
	align-items: center;
	width: 94px;
	height: 45px;
	box-sizing: border-box;
	border: 1px solid #37456E;
	border-radius: 8px;
	overflow: hidden;
	flex: 0 0 auto;
	float: none !important;
}
.sp-atc .quantity .sp-qty-minus,
.sp-atc .quantity .sp-qty-plus {
	flex: 0 0 28px;
	height: 100%;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: #37456E;
	padding: 0;
}
.sp-atc .quantity input.qty {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	border: 0 !important;
	background: none;
	text-align: center;
	color: #37456E;
	font-weight: 600;
	font-size: 16px;
	margin: 0;
	padding: 0;
	-moz-appearance: textfield;
}
.sp-atc .quantity input.qty::-webkit-outer-spin-button,
.sp-atc .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Add to Cart button (green pill) — Figma: min-w 147, h 45, radius 60, pad 10/20 */
.sp-atc .single_add_to_cart_button,
.sp-atc button.single_add_to_cart_button {
	flex: 0 0 auto;
	min-width: 147px;
	height: 45px;
	padding: 10px 20px !important;
	border: 0 !important;
	border-radius: 60px !important;
	background: #9CCB3B !important;
	color: #FFFFFF !important;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background .15s ease;
}
.sp-atc .single_add_to_cart_button:hover {
	background: #86B22C !important;
}
.sp-atc .single_add_to_cart_button.disabled,
.sp-atc .single_add_to_cart_button[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

/* ---- Back In Stock Notifier submit button -------------------------------------
   The notifier form renders on this page whenever a variation is out of stock, and
   the theme had no rule for its button at all - it was showing the plugin default.
   Green to match the Add to Cart pill above, with the same #86B22C hover, so the
   page has one green action rather than two treatments of it.

   Note woocommerce/css/woo-product-single.css carries an older, fuller block of
   .cwginstock-subscribe-form rules. That file is NOT enqueued - its wp_enqueue_style
   is commented out at woocommerce/woo-functions.php:44 for the single-product
   rebuild - so those rules are inert and this is the one that applies. Confirmed by
   listing the stylesheets a product page actually emits.

   !important on the colours for the same reason the Add to Cart rule above uses it:
   the plugin ships its own CSS and Bootstrap for this button. */
.cwginstock-subscribe-form .cwgstock_button {
	padding: 5px;
	background: #9CCB3B !important;
	border: 1px solid #9CCB3B !important;
	color: #FFFFFF !important;
	font-size: 13px;
	font-weight: 700;
	transition: background .15s ease, border-color .15s ease;
}
.cwginstock-subscribe-form .cwgstock_button:hover,
.cwginstock-subscribe-form .cwgstock_button:focus {
	background: #86B22C !important;
	border-color: #86B22C !important;
	color: #FFFFFF !important;
}

/* ---- Back In Stock Notifier, reinstated as its own box ------------------------
   The rebuild hides .single_variation (see the rule above), and the notifier form
   lives inside it, which is why it disappeared from this page. initStockNotifier()
   in single-product.js lifts the form out of the variation payload and drops it in
   a .sp-stock-notifier box placed between the add-to-cart panel and Payment
   Options.

   Panel styling is ported from woocommerce/css/woo-product-single.css - the
   stylesheet production still renders - so both environments show the same
   navy-bordered box and this does not become a second visual treatment. */
.sp-stock-notifier {
	margin: 16px 0 0;
}

/* Mobile: decrease the gap under the add-to-cart panel. ---------------------
   The box is a child of Elementor’s .e-con-inner, which is display:flex /
   flex-direction:column with row-gap:16px already applied between its children.
   The margin-top above is therefore a second helping, and the visible gap under
   the add-to-cart panel measures 32px. Dropping the margin on mobile puts the
   notifier back on the same 16px rhythm as every other block in that column.
   Measured in Blink at 390px: 32px -> 16px. Desktop is left at 32px; it has the
   same double-count and can be changed the same way if wanted.
   (sp-stock-notifier gap, mobile) */
@media (max-width: 768px) {
	.sp-stock-notifier {
		margin-top: 0;
	}
}
.sp-stock-notifier:empty {
	display: none;
}
.sp-stock-notifier .cwginstock-subscribe-form {
	display: block;
}
.sp-stock-notifier .panel {
	margin: 0;
	border: 1px solid #37456E;
	border-radius: 4px;
	box-shadow: none;
	background: #FFFFFF;
	overflow: hidden;
}
/* Heading bar in the site navy, white text, centred.

   !important is required, not stylistic: Bootstrap ships with the plugin and its
   .panel-primary>.panel-heading rule (#337ab7) has the same specificity as this
   selector, so the tie is decided by source order and Bootstrap was winning it.
   The border-bottom goes with it - it was there to separate a white heading from a
   white body, and a navy bar separates itself. */
.sp-stock-notifier .cwginstock-panel-heading {
	padding: 12px 20px;
	background: #37456E !important;
	border-bottom: 0;
	border-radius: 0;
	color: #FFFFFF !important;
}
.sp-stock-notifier .cwginstock-panel-heading h4 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	color: #FFFFFF !important;
	/* The plugin sets style="text-align: center" inline on this h4 already, but the
	   earlier rule overrode it to left; stated explicitly so intent is readable. */
	text-align: center !important;
}
.sp-stock-notifier .cwginstock-panel-body {
	padding: 12px 20px;
}

/* Bootstrap's grid ships with the plugin and nests .col-md-12 inside .col-md-12,
   which stacks 30px of padding inside a negative-margin row. Reset both. */
.sp-stock-notifier .row,
.sp-stock-notifier [class*="col-md-"] {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
	float: none;
}

/* Name and email side by side, as on the product page today. */
.sp-stock-notifier .form-group {
	display: flex;
	margin: 0 -5px 10px;
}
.sp-stock-notifier .form-group input[type="text"],
.sp-stock-notifier .form-group input[type="email"] {
	margin: 0 5px;
}
.sp-stock-notifier input[type="text"],
.sp-stock-notifier input[type="email"],
.sp-stock-notifier input[type="number"] {
	box-sizing: border-box;
	height: 40px;
	padding: 10px;
	border: 1px solid #37456E;
	border-radius: 3px;
	text-align: left !important;
}
.sp-stock-notifier p {
	margin: 0 0 10px;
}
.sp-stock-notifier .form-group br {
	display: none;
}
.sp-stock-notifier .cwgstock_button {
	width: 100%;
	border-radius: 60px;
}
.sp-stock-notifier .cwgstock_output:empty {
	display: none;
}


/* Small screens: allow wrapping so it doesn't overflow */
@media (max-width: 768px) {
	/* Variation select + qty share row 1; Add to Cart drops to its own full-width row below (design). */
	.sp-atc form.cart { flex-wrap: wrap; }
	.sp-atc .variations {
		flex: 0 0 calc(100% - 110px) !important;
		width: calc(100% - 110px) !important;
		min-width: 0 !important;
		margin: 0 !important;
	}
	.sp-atc .quantity { margin: 0 0 0 16px !important; }
	.sp-atc .single_add_to_cart_button,
	.sp-atc button.single_add_to_cart_button {
		flex: 1 0 100% !important;
		width: 100% !important;
		margin: 16px 0 0 0 !important;
	}
}

/* --------------------------------------------------------------------------
   Primary Attributes  (module: primary-attributes.php)
   Equal-width cards that auto-adjust to the number of items (flex: 1 1 0).
   -------------------------------------------------------------------------- */
.sp-attributes {
	display: flex;
	align-items: stretch;
	gap: 30px;
	font-family: "Work Sans", sans-serif;
}
.sp-attr-item {
	flex: 1 1 0;          /* equal share of the row — width adjusts to item count */
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-sizing: border-box;
	padding: 24px 12px;
	background: #F8FFEA;
	border: 1px solid #37456E;
	border-radius: 8px;
	color: #37456E;
}
.sp-attr-icon {
	display: block;
	color: #37456E;
	margin-bottom: 12px;
	line-height: 0;
}
.sp-attr-icon svg,
.sp-attr-icon img {
	width: 45px;
	height: 32px;
	display: block;
}
.sp-attr-label {
	font-weight: 400;
	font-size: 13px;
	line-height: 18px;
	white-space: nowrap; /* keep the label on a single line (e.g. "Existing Tooth Sensitivity") */
}
/* Short mobile label (6 Oct 2026, client request: drop "Tooth" on mobile).
   primary-attributes.php prints both; the full one shows above Elementor's
   767px mobile breakpoint, the short one at and below it. */
.sp-attr-label-mobile {
	display: none;
}
@media (max-width: 767px) {
	.sp-attr-label-full {
		display: none;
	}
	.sp-attr-label-mobile {
		display: inline;
	}
}
.sp-attr-value {
	font-weight: 600;
	font-size: 13px;
	line-height: 18px;
	margin-top: 2px;
}

/* Superseded 1 Oct 2026 — client wants the cards in one row on mobile, as on desktop.
   In practice this stacked them one per row, not 2-up: the nowrap label made
   "Existing Tooth Sensitivity" too wide for half a row.
@media (max-width: 480px) {
	.sp-attributes {
		flex-wrap: wrap;
	}
	.sp-attr-item {
		flex: 1 1 calc(50% - 5px);
	}
}
*/

/* One row at every width (1 Oct 2026). The label is allowed to wrap below 768px,
   because three nowrap labels don't fit a phone-width row. gap needs !important
   to beat the 12px !important in the 768px block near the top of this file.
   (primary attributes one row, mobile) */
@media (max-width: 768px) {
	.sp-attr-label {
		white-space: normal;
	}
}
@media (max-width: 480px) {
	.sp-attributes {
		flex-wrap: nowrap;
		gap: 8px !important;
	}
	.sp-attr-item {
		flex: 1 1 0;
		padding: 14px 6px;
	}
	.sp-attr-icon {
		margin-bottom: 8px;
	}
	.sp-attr-icon svg,
	.sp-attr-icon img {
		width: 36px;
		height: 26px;
	}
	.sp-attr-label,
	.sp-attr-value {
		font-size: 12px;
		line-height: 16px;
	}
}

/* --------------------------------------------------------------------------
   MultiBuy  (module: multibuy.php) — tiers synced with the variation select
   -------------------------------------------------------------------------- */
.sp-multibuy {
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid #37456E;
	border-radius: 8px;
	padding: 8px 12px;
	font-family: "Work Sans", sans-serif;
}
.sp-multibuy-label {
	flex: 0 0 auto;
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: #37456E;
}
.sp-multibuy-items {
	display: flex;
	gap: 8px;
	flex: 1 1 auto;
	justify-content: flex-end;
}
.sp-multibuy-item {
	flex: 1 1 0;
    max-width: 88px;
    text-align: center;
    padding: 0;
	border: 2px solid transparent; /* 2px so active state doesn't shift layout */
	border-radius: 6px;
	background: #EEF1F8;
	color: #37456E;
	line-height: 1.25;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
.sp-multibuy-item:hover {
	border-color: #D4DAE1;
}
.sp-multibuy-item.active {
	background: #DAECB6;
	border-color: #9CCB3B;
}
.sp-multibuy-item .sp-mb-qty {
	display: block;
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
}
.sp-multibuy-item .sp-mb-value {
	display: block;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
}

@media (max-width: 480px) {
	.sp-multibuy {
		flex-direction: column;
		align-items: stretch;
	}
	/* Stacked layout only: align-items:stretch makes the label a full-width row
	   above the tiers, so its text needs centring explicitly. Deliberately inside
	   this query - above 480px .sp-multibuy is a row and the label box shrink-wraps
	   its own text, so the rule would be a no-op there anyway.
	   (sp-multibuy-label centred, mobile) */
	.sp-multibuy-label {
		text-align: center;
	}
	.sp-multibuy-items {
		justify-content: space-between;
	}
}

/* --------------------------------------------------------------------------
   Auto Delivery (One-time Purchase / Auto Delivery)
   The autoship plugin renders its options INSIDE the add-to-cart form so the
   subscription choice submits with Add to Cart. Styling mirrors the quick view
   (re-scoped from .quick_view_popup to .sp-atc): each option is its own bordered
   box, selected = navy border, frequency dropdown attaches under the Auto
   Delivery box. Behaviour (info icon + .selected toggle) is in single-product.js.
   -------------------------------------------------------------------------- */

/* Break the autoship block onto its own full-width row below the
   variation/qty/button line (variation shrinks via min-width:0 so those stay
   on line 1). */
.sp-atc form.cart {
	flex-wrap: wrap;
}
.sp-atc .autoship-schedule-options {
	flex: 0 0 100%;
	order: 99;
	width: 100%;
	margin-top: 16px;
	margin-bottom: 0px;
}

/* Keep Variation Select + qty + Add to Cart on ONE row (desktop).

   The autoship block above needs flex-wrap:wrap on the form so it can take its
   own full-width line. But wrap changes how the row is measured: with nowrap an
   oversized item SHRINKS to fit, whereas with wrap the browser breaks it onto a
   new line instead - line-breaking is decided on each item's flex-basis, before
   any shrinking is applied.

   .sp-atc .variations is flex:1 1 auto, so its basis is its content width (as
   wide as the longest option, e.g. "8 x 2.4gram Syringes"). That overflowed the
   row and pushed the button down. Giving it a zero basis means it claims no width
   when lines are computed - so all three fit on row 1 - then it grows to absorb
   whatever is left over. The autoship block still wraps, because flex:0 0 100%
   cannot share a line.

   Scoped to >=769px on purpose: below that the max-width:768px block above puts
   the button on its own full-width row, which is the intended mobile design. */
@media (min-width: 769px) {
	.sp-atc .variations {
		flex: 1 1 0 !important;
	}
	/* A <select> has an intrinsic min-content width of its longest option, which
	   would otherwise stop the shrink above from taking effect. */
	.sp-atc .variations select,
	.sp-atc .select-container select {
		min-width: 0 !important;
	}
	.sp-atc .single_add_to_cart_button,
	.sp-atc button.single_add_to_cart_button {
		flex: 0 0 auto !important;
	}
}

.sp-atc .autoship-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	color: #37456E;
}

.sp-atc input[type="radio"] {
	height: 20px;
	width: 20px;
	margin: 0;
}
.sp-atc input[type="radio"]:checked {
	accent-color: #37456E;
}

.sp-atc .autoship-info-link-wrapper {
	text-align: right;
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
}
.sp-atc .autoship-info-link-wrapper .autoship-info-link i {
	margin-left: 5px;
}

/* “What is Auto Delivery?” — client feedback 21 Sep 2026: too dominating.
   The link inherited 14px/600 from .autoship-label, exactly matching the label and
   the SAVE and price figures beside it, so nothing marked it as secondary. Dropped
   one step at each breakpoint; the fa-info-circle icon inherits and follows.
   Weight left at 600 on purpose - only size was asked for, and dropping the weight
   as well is the obvious next step if it is still too loud.
   Measured: 14px -> 12px at 950 and 1440, 12px -> 11px at 390.
   (autoship info link size) */
.sp-atc .autoship-info-link {
	font-size: 12px;
}
@media (max-width: 768px) {
	.sp-atc .autoship-info-link {
		font-size: 11px;
	}
}

.sp-atc .autoship-type {
	padding: 12px;
	border: 1px solid #E0E1E4;
	border-radius: 4px;
	margin-bottom: 10px;
}
.sp-atc .autoship-type.selected {
	border: 1px solid #37456E;
}

.sp-atc .autoship-type.autoship-yes{
	margin-bottom: 0;
}
.sp-atc .autoship-type.autoship-yes.selected {
	margin-bottom: 0;
	border-radius: 4px 4px 0 0;
	border-bottom: none;
}
.sp-atc .autoship-frequency {
	display: none;
}
.sp-atc .autoship-frequency.active {
	display: block;
	padding: 0 12px 12px;
	border: 1px solid #37456E;
	border-radius: 0 0 4px 4px;
	border-top: none;
}

/* Info link (icon-only from the plugin) + trailing ? icon, appended by JS */
.sp-atc .autoship-info-link i {
	margin-left: 5px;
}

.sp-atc .autoship-badges {
	display: inline-block;
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
}
.sp-atc .autoship-badges span {
	color: #FFF;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 20.2px;
	border-radius: 4px;
	background: #37456E;
	padding: 2px 10px;
}

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

/* Client feedback 21 Sep 2026: centre the Every X Months dropdown, MOBILE ONLY.
   Only the select is centred - the “Delivery Schedule” label above it stays left,
   and desktop is left alone entirely. Stated on the select itself rather than on
   a parent, so nothing else in the block is affected, and because browsers differ
   on whether a form control inherits text-align.
   The arrow stays at the right edge; only the selected text moves. The native
   option list is drawn by the OS and its alignment is not ours to set.
   Measured at 390: select text-align start -> center, desktop unchanged at start.
   (delivery schedule select centred, mobile) */
@media (max-width: 768px) {
	.sp-atc .autoship-frequency select {
		text-align: center;
	}
}
.sp-atc .autoship-price-display {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Payment Options row  (native Heading + HTML widgets)
   -------------------------------------------------------------------------- */
/* Keep the payment row on a single line: label left, logos right. */
.sp-payment-card {
	flex-wrap: nowrap !important;
}
.sp-payment-logos {
	flex-wrap: nowrap !important;
}
.sp-payment-logos img {
	height: 24px;
	width: auto;
	display: inline-block;
}

/* --------------------------------------------------------------------------
   Discount Bar  (module: discount-bar.php → AWDR bar, shown only on discount)
   Mirrors the quick-view discount bar styling, but full width.
   -------------------------------------------------------------------------- */

/* The AWDR plugin also auto-renders the bar inside the add-to-cart form
   (setting: "Discount bar location: after add to cart form"). Hide that
   instance so only our positioned/styled module bar shows — avoids the
   duplicate. Scoped to .sp-atc so our bar (.sp-discount-bar) and the quick
   view bar (.quick_view_popup) are untouched. */
.sp-atc .awdr_discount_bar {
	display: none !important;
}

/* Collapse module/shortcode widgets that render nothing (e.g. discount bar with
   no active discount, multibuy/attributes with no ACF data). Elementor still
   outputs an empty <div class="elementor-shortcode"></div>, so we key off that
   being :empty — and also collapse the wrapping container (.e-con) when its only
   child is that empty shortcode, since the container is the actual flex item
   taking the space. This CSS only loads on single-product pages.

   IMPORTANT: the empty .elementor-shortcode must be the :only-child of its
   container. Some shortcodes ECHO their markup instead of returning it (e.g.
   [ff_cart_icon] in the header); Elementor puts a shortcode's RETURN value inside
   .elementor-shortcode, so an echoing shortcode leaves .elementor-shortcode empty
   while its real output sits alongside as a sibling node. Without :only-child this
   rule would wrongly hide those widgets (cart icon, etc). :only-child means we only
   collapse widgets whose container holds nothing but the truly-empty shortcode. */
.elementor-widget-shortcode:has(> .elementor-widget-container > .elementor-shortcode:only-child:empty) {
	display: none !important;
}
.e-con:has(> .elementor-widget-shortcode:only-child > .elementor-widget-container > .elementor-shortcode:only-child:empty) {
	display: none !important;
}

.sp-discount-bar .awdr_discount_bar {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border-radius: 44px;
	border: 1px solid #9CCB3B;
	background: #DAECB6 !important;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #37456E !important;
	text-align: center;
}
/* Elementor image widgets wrap the <img>; keep each logo tight to its content. */
.sp-payment-logos .elementor-widget-image {
	width: auto;
	margin: 0;
}
.sp-payment-logos .elementor-widget-image .elementor-image,
.sp-payment-logos .elementor-widget-image figure {
	margin: 0;
	line-height: 0;
}

/* ==========================================================================
   Frequently Bought Together  (Flycart CUW plugin — [cuw_fbt], template-1.php)
   Design ref: image 127. Scoped to .cuw-fbt-products; overrides the plugin's
   inline styles. All cuw-* hooks are preserved so the plugin JS keeps working.
   ========================================================================== */
.cuw-fbt-products {
	padding: 0 !important;
	margin: 40px 0 !important;
	border: 0 !important;
	font-family: "Work Sans", sans-serif;
}

/* Title — centered navy, moderate size */
.cuw-fbt-products .cuw-template-title {
	margin: 0 0 24px !important;
	text-align: center;
	font-size: 28px !important;
	line-height: 1.2;
	font-weight: 700 !important;
	color: #37456E !important;
}

/* Only the desktop grid renders (mobile form disabled in template-1.php to avoid
   the plugin double-counting its duplicate checkboxes). */
.cuw-fbt-products .mobile-fbt { display: none !important; }
.cuw-fbt-products .desktop-fbt { display: flex !important; }

/* Row: four EQUAL-width columns (3 product cards + total card) */
.cuw-fbt-products .desktop-fbt .cuw-gird {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	justify-content: center;
	gap: 24px;
	width: 100%;
}
.cuw-fbt-products .desktop-fbt .cuw-product {
	flex: 1 1 0 !important;
	min-width: 0;
	max-width: 295px;
	margin: 0 !important;
}
.cuw-fbt-products .desktop-fbt .cuw-product-wrapper {
	display: block !important;
	height: 100%;
}
/* --- "+" separators between the product cards (item 7, 18 Sep 2026) --------
   "Add ++signs to connect them up so it is obvious all are included?"

   The plugin ALREADY renders a literal "+" for each product except the last,
   and correctly renders none before the buy card. The theme was hiding them
   here under the comment "No + separators in this design", so this item is an
   un-hide plus repositioning, not new markup.

   THE TRAP: the separator is NOT a sibling of the cards in the row. It lives
   INSIDE .cuw-product-wrapper, after .cuw-product-card:

       .cuw-gird > .cuw-column.cuw-product > .cuw-product-wrapper > .cuw-product-card
                                                                  > .cuw-product-separator

   and the theme forces that wrapper to display:block - so simply un-hiding the
   separator stacks it UNDERNEATH its own card rather than placing it between
   two cards. Confirmed by DOM probe: .cuw-gird has 5 children (4 products plus
   the buy card) and no separators among them.

   It is therefore positioned absolutely into the 24px row gap, centred on the
   right edge of the card and vertically centred against it. */
.cuw-fbt-products .desktop-fbt .cuw-product-wrapper { position: relative; }
.cuw-fbt-products .desktop-fbt .cuw-product-separator {
	display: flex !important;
	position: absolute;
	top: 50%;
	right: -18px;
	transform: translateY(-50%);
	width: 12px;
	height: auto;
	margin: 0 !important;
	padding: 0;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	font-weight: 700;
	color: #7A8699;
	user-select: none;
	pointer-events: none;
	z-index: 1;
}
/* Mobile: the row wraps to two columns, so the separator belonging to a
   right-hand card would sit OUTSIDE the row. Measured at 390: gird right edge
   370, that separator at x=376 - hanging off the side pointing at nothing.

   Only one separator is ever affected. With four products the plugin emits
   three separators, on cards 1, 2 and 3; of those only card 2 is an even child
   and therefore in the right-hand column. It is rotated to the bottom edge so
   it links DOWN to the next row rather than off the side, which also keeps the
   two rows visually connected - the point of the client request. */
@media (max-width: 768px) {
	/* The base offset of -18px centres the separator in the DESKTOP 24px gap
	   (card edge + 12 = gap centre, + half the 12px glyph = 18). The mobile gap
	   is 16px, so the same offset sits 4px right of centre and the in-row
	   separators did not line up with the row-linking one below. */
	.cuw-fbt-products .desktop-fbt .cuw-gird > .cuw-column:nth-child(odd) .cuw-product-separator {
		right: -14px;
	}
	.cuw-fbt-products .desktop-fbt .cuw-gird > .cuw-column:nth-child(even) .cuw-product-separator {
		top: auto;
		right: auto;
		bottom: -15px;
		/* -8px is the centre of the 16px column gap, i.e. the horizontal centre
		   of the row - so this separator lines up vertically with the in-row
		   ones. left:50% centred it under the right-hand card instead, which
		   read as misaligned against the others. */
		left: -8px;
		right: auto;
		transform: translateX(-50%);
	}
}
/* Client feedback 29 Sep 2026: "Remove both + in top and bottom row (Mobile).
   This makes it cleaner on mobile when we tested and if there was only 3
   products in total." Hides every separator under 768px, whatever the product
   count. The positioning rules above are kept as history; desktop keeps its +. */
@media (max-width: 768px) {
	.cuw-fbt-products .desktop-fbt .cuw-product-separator {
		display: none !important;
	}
}


/* Product card — 1px stroke border, 10px radius, 20px padding */
.cuw-fbt-products .desktop-fbt .cuw-product-card {
	width: auto !important;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid #D4DAE1;
	border-radius: 10px;
	padding: 16px 20px; /* vertical trimmed from 20 to hit the 473 card height */
	box-shadow: 0 1px 3px rgba(55, 69, 110, 0.06);
}
/* Reorder card contents: image → price → title → rating → toggle */
.cuw-fbt-products .desktop-fbt .cuw-product-image { order: 1; }
.cuw-fbt-products .desktop-fbt .cuw-product-price { order: 2; }
.cuw-fbt-products .desktop-fbt .cuw-product-title { order: 3; }
/* margin-top:auto pushes the review row to the bottom of the card. Cards are
   equal height (.cuw-gird align-items:stretch + .cuw-product-card height:100%),
   so this lands every review row on the same line regardless of whether the
   title above it runs three lines or four. Without it the row floats wherever
   the title happens to end. */
.cuw-fbt-products .desktop-fbt .cuw-product-rating { order: 4; margin: auto 0 12px; text-align: center; }
.cuw-fbt-products .desktop-fbt .cuw-product-actions { order: 5; }

/* Image — full card width */
.cuw-fbt-products .desktop-fbt .cuw-product-image {
	width: 100% !important;
	height: auto !important;
	margin-bottom: 12px;
}
.cuw-fbt-products .desktop-fbt .cuw-product-image img {
	width: 100%;
	height: 215px;
	max-height: 215px;
	object-fit: contain;
	object-position: center;
	display: block;
	border-radius: 8px;
}

/* Price — green, 18/28 semibold, centred (was left; client feedback 18 Sep 2026).
   Current price first, struck second. */
.cuw-fbt-products .cuw-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin: 0 0 6px !important;
	text-align: center !important;
	color: #86B22C;
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
}
.cuw-fbt-products .cuw-product-price ins { order: 1; color: #86B22C; text-decoration: none; font-weight: 600; }
.cuw-fbt-products .cuw-product-price del { order: 2; color: #9AA3B2; font-weight: 400; margin: 0; }
.cuw-fbt-products .cuw-product-price .screen-reader-text { position: absolute; left: -9999px; }

/* Title — navy 16/24 semibold, centred (was left; client feedback 18 Sep 2026).
   (mock said 16/44 — a 44px line-height
   leaves large gaps; 24px matches the design's tight 2-line title) */
.cuw-fbt-products .cuw-product-title {
	margin: 0 0 12px !important;
	text-align: center !important;
	color: #37456E;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
}
.cuw-fbt-products .cuw-product-title a { color: #37456E; text-decoration: none; }

/* Review text (Yotpo bottom-line) — 14/20.2 regular, Work Sans (Yotpo uses Open Sans) */
/* Yotpo review row - centred to match the rest of the card (item 1, 22 Sep 2026).
   TWO nested flex containers have to be centred, not one:
     .yotpo-reviews-star-ratings-widget   declared display:flex by a <style>
                                          block Yotpo INJECTS into the page
     .yotpo-bottom-line-scroll-panel      inline display:flex on the element
   Neither sets justify-content, so both default to flex-start. Centring only
   the inner one leaves the row pinned left, because the outer one is what
   positions it. text-align cannot reach either. !important throughout: one is
   an inline style, the other comes from a stylesheet injected after ours. */
.cuw-fbt-products .cuw-product-rating .yotpo-reviews-star-ratings-widget,
.cuw-fbt-products .cuw-product-rating .yotpo-bottom-line-scroll-panel {
	justify-content: center !important;
	align-items: center !important;
}
/* The button itself is flex-direction:row with align-items:flex-start inline,
   which is what leaves "7 Reviews" sitting above the star baseline. */
.cuw-fbt-products .cuw-product-rating .yotpo-sr-bottom-line-summary {
	align-items: center !important;
}
.cuw-fbt-products .cuw-product-rating .yotpo-sr-bottom-line-text {
	font-family: "Work Sans", sans-serif !important;
	font-size: 14px !important;
	line-height: 20.2px !important;
	font-weight: 400 !important;
}

/* Toggle switch (40×20) from the include checkbox, pinned to card bottom-left */
/* margin-top was auto here; moved to .cuw-product-rating above. With auto on
   both, the free space splits between them and neither row aligns. */
.cuw-fbt-products .desktop-fbt .cuw-product-actions { position: static !important; margin-top: 0; }
.cuw-fbt-products .desktop-fbt .cuw-product-actions > div { position: static !important; text-align: center; }
.cuw-fbt-products .cuw-product-checkbox {
	-webkit-appearance: none;
	appearance: none;
	float: none !important;
	margin: 0 !important;
	position: relative;
	width: 40px;
	height: 20px;
	border-radius: 999px;
	background: #C9D2DE;
	cursor: pointer;
	transition: background .2s;
	vertical-align: middle;
}
.cuw-fbt-products .cuw-product-checkbox::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	transition: transform .2s;
}
.cuw-fbt-products .cuw-product-checkbox:checked { background: #9CCB3B; }
.cuw-fbt-products .cuw-product-checkbox:checked::after { transform: translateX(20px); }

/* --- Toggled OFF (client feedback 18 Sep 2026, item 2) ----------------------
   Kim, 22 Sep: the toggle carries the signal, plus the card contents go
   GREYSCALE (not faded). A 40% opacity + grayscale version was rejected as too
   strong, then a .7 opacity fade was tried and replaced by greyscale alone -
   it reads as "not included" without dimming the card into looking disabled.
   The toggle itself is deliberately excluded: darkened, never greyed, since it
   is the control you click to re-enable.
   The plugin adds no class on uncheck, so :has() is the hook. */
.cuw-fbt-products .desktop-fbt .cuw-product:has(.cuw-product-checkbox:not(:checked)) .cuw-product-image,
.cuw-fbt-products .desktop-fbt .cuw-product:has(.cuw-product-checkbox:not(:checked)) .cuw-product-price,
.cuw-fbt-products .desktop-fbt .cuw-product:has(.cuw-product-checkbox:not(:checked)) .cuw-product-title,
.cuw-fbt-products .desktop-fbt .cuw-product:has(.cuw-product-checkbox:not(:checked)) .cuw-product-rating {
	filter: grayscale(1);
	transition: filter .2s;
}
/* Off-state switch darkened from #C9D2DE so it reads unmistakably as off. */
.cuw-fbt-products .cuw-product-checkbox { background: #7A8699; }

/* --- Primary product is not optional (client feedback 18 Sep 2026, item 2) ----
   is_main is plugin-provided and already on the first cell. */
/* visibility:hidden, NOT display:none. The toggle must keep its layout box or
   the primary card has nothing below its review row, and the row drops lower
   than the other cards - which is what display:none caused. Hidden elements are
   still not clickable and are still submitted with the form, so the primary
   product keeps counting toward the total. */
.cuw-fbt-products .desktop-fbt .cuw-product.is_main .cuw-product-checkbox { visibility: hidden !important; }

/* --- "THIS PRODUCT" treatment on the primary card (item 6, 18 Sep 2026) -----
   "First Product, bold thick border, navy shaded colour at top with small
   writing: THIS PRODUCT or ribbon with THIS PRODUCT ... forget colours etc,
   just concept."

   is_main is plugin-provided and already sits on the first cell, so this needs
   no PHP and no template change.

   The band is a ::before rather than the plugin's .cuw-badge: that badge exists
   and is already navy-on-white, but it carries the plugin's own savings text
   ("Save $3"), and CSS cannot replace an element's text content. A pseudo-
   element gives the exact wording the client asked for.

   The card is display:flex/column with its children explicitly ordered 1-5, so
   ::before (order 0 by default) lands above the image without touching them.
   Negative margins pull it through the card's 16/20 padding to sit flush and
   full-bleed; the top radius is 8px to sit inside the card's 10px outer radius
   without the square corners poking out. */
.cuw-fbt-products .desktop-fbt .cuw-product.is_main .cuw-product-card {
	/* "bold thick border" - the client did NOT specify a colour, and their
	   "navy shaded colour at top" describes the ribbon, not the border.
	   Kim, 22 Sep: keep the SAME colour as every other card and let the extra
	   weight alone carry the emphasis. Two earlier attempts (navy, then a
	   darker grey) both invented a colour the brief never asked for. */
	border: 2px solid #D4DAE1;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	/* The other cards carry 0 1px 3px rgba(55,69,110,.06). Lifting the primary
	   card well clear of that reads as "this one is different" without adding a
	   colour the brief never asked for - the same reasoning that took the
	   border back to #D4DAE1. */
	box-shadow: 0 6px 20px rgba(55, 69, 110, 0.18);
}
/* Corner ribbon, the second of the two options the client offered
   ("...or ribbon with THIS PRODUCT"). Absolutely positioned and rotated across
   the top-left corner, clipped by overflow:hidden on the card.

   Being out of flow it does NOT push the card contents down, unlike the
   full-width band it replaces - so the primary card lines up with the others
   without relying on the rating margin to absorb a shift. */
.cuw-fbt-products .desktop-fbt .cuw-product.is_main .cuw-product-card::before {
	content: "THIS PRODUCT";
	position: absolute;
	top: 16px;
	left: -45px;
	width: 150px;
	padding: 3px 0;
	transform: rotate(-45deg);
	background: #37456E;
	color: #fff;
	font-size: 9px;
	line-height: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	z-index: 2;
	pointer-events: none;
}
/* Cards are 167px wide at 390, so the ribbon is scaled down to match. */
@media (max-width: 768px) {
	.cuw-fbt-products .desktop-fbt .cuw-product.is_main .cuw-product-card::before {
		top: 12px;
		left: -38px;
		width: 124px;
		font-size: 8px;
		line-height: 12px;
		letter-spacing: .04em;
	}
}
/* The plugin ALSO toggles the checkbox on image click (template.js:267), so
   hiding the switch alone would leave the primary product silently
   deselectable with no visible control. Block the click as well. */
.cuw-fbt-products .desktop-fbt .cuw-product.is_main .cuw-product-image { pointer-events: none; }

/* Total price card — navy, EQUAL width to product cards, content centered */
.cuw-fbt-products .desktop-fbt .cuw-buy-section {
	flex: 1 1 0 !important;
	max-width: 295px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
}
/* .cuw-actions carries an inline display:none until the plugin JS clears it, so
   this display:flex (no !important) only takes effect once the card is shown. */
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions {
	flex: 1;
	width: 100%;
	background: #37456E;
	border-radius: 16px;
	padding: 32px 24px;
	color: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* "Total Price" pill — 18/28 bold, 7px radius */
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions > div:first-of-type {
	display: block !important;
	margin: 0 0 12px !important;
}
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions > div:first-of-type > span:not(.cuw-total-price) {
	display: inline-block;
	margin-bottom: 12px;
	padding: 6px 18px;
	border-radius: 7px;
	background: #fff;
	color: #37456E;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
}
/* Prices — struck 18/28 regular white, final 24/34 bold white */
.cuw-fbt-products .desktop-fbt .cuw-total-price { display: block; }
.cuw-fbt-products .desktop-fbt .cuw-total-price del {
	display: block;
	color: #fff;
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
}
.cuw-fbt-products .desktop-fbt .cuw-total-price ins {
	display: block;
	color: #fff;
	font-size: 24px;
	line-height: 34px;
	font-weight: 700;
	text-decoration: none;
}

/* --- Total card pricing (client feedback 18 Sep 2026, item 3) ---------------
   "Green Price - price with FBT discount. Strikethrough price - current
   website purchase price, before FBT discount."
   Read as a presentation instruction: the price the customer pays goes green,
   and the before price moves underneath it. The numbers themselves are
   unchanged. Green matches the CTA button and the savings capsule (#9CCB3B),
   which reads better on the navy card than the #86B22C used on white cards. */
.cuw-fbt-products .desktop-fbt .cuw-total-price {
	display: flex !important;
	flex-direction: column;
	align-items: center;
}
.cuw-fbt-products .desktop-fbt .cuw-total-price ins { order: 1; color: #9CCB3B; }
.cuw-fbt-products .desktop-fbt .cuw-total-price del { order: 2; }

/* Savings badge — 12/25, navy text on primary green, 4px radius */
.cuw-fbt-products .desktop-fbt .cuw-total-savings {
	display: inline-block;
	margin: 8px 0 16px;
	padding: 2px 10px;
	border-radius: 4px;
	background: #9CCB3B;
	color: #37456E;
	font-weight: 700;
	font-size: 12px;
	line-height: 25px;
}
.cuw-fbt-products .desktop-fbt .cuw-total-savings ins { color: #37456E; text-decoration: none; }

/* --- Total card: savings capsule above the price (item 4) -------------------
   "Place strike through underneath actual price and X% off capsule above the
   discounted price."
   .cuw-total-savings is a SIBLING of the label/price div, not a child of it
   (theme template-1.php line 104) - so ordering inside div:first-of-type never
   reached it, and an order value there pushed it below the button instead.
   display:contents dissolves that wrapper so the label, the capsule, the price
   and the button are all flex children of .cuw-actions and can be ordered as
   one set. Same technique as the Autoship row on production, 22 Sep. */
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions > div:first-of-type {
	display: contents !important;
}
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions > div:first-of-type > span:not(.cuw-total-price) { order: 1; }
.cuw-fbt-products .desktop-fbt .cuw-total-savings { order: 2; margin: 0 0 12px !important; }
.cuw-fbt-products .desktop-fbt .cuw-total-price { order: 3; margin-bottom: 16px; }
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions > div:last-of-type { order: 4; width: 100%; }

/* Add-to-cart — green pill, 18/22 bold, max-height 46 */
.cuw-fbt-products .cuw-add-to-cart {
	width: 100% !important;
	padding: 12px 20px !important;
	max-height: 46px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #9CCB3B !important;
	color: #fff !important;
	font-family: "Work Sans", sans-serif !important; /* theme's .button forces Arial otherwise */
	font-weight: 600 !important;
	font-size: 18px !important;
	line-height: 22px !important;
	text-transform: none !important;
}
.cuw-fbt-products .cuw-add-to-cart:hover { background: #86B22C !important; }

/* --- Cart icon on the FBT button (client feedback 18 Sep 2026, item 5) ------
   "Add to cart icon need icon on it (like on current website)."
   Kim, 22 Sep: use the HEADER trolley icon, images/svg/cart-icon.svg - the one
   rendered by ff_render_cart_icon() in woo-functions.php line 112. An earlier
   pass used /wp-content/uploads/2021/03/wpi-cart.svg, the tooth-cart that
   production puts on its own add-to-cart button, which was the wrong one.

   The source SVG is a single path filled #37456E (navy), which would be near
   unreadable on the green button. It is therefore applied as a MASK with a
   white background-color rather than as a background-image, so it recolours to
   #fff without editing the asset or adding a second copy of it.

   Path is relative to this stylesheet (modules/products/single-product/), so it
   resolves on any install without assuming a /wp-content prefix.

   The button is a flex row so the icon is a sibling of the label and cannot
   wrap onto its own line, which is what a plain ::after + margin did.
   Scoped to .cuw-buy-section so the modal footer button is left alone.
   ::after is safe against the plugin rewriting the label from data-text. */
/* One-line label. The room comes from three places at once, because no single
   one is enough: the plugin caps the buy card at 256px inline, the theme pads
   .cuw-actions 32/24, and the button pads 12/16. Widening the card to 295px
   matches the product cards so the row stays even.

   DESKTOP ONLY. These rules sit after the max-width:768px block, so without
   the min-width guard they would override the mobile rule that drops the buy
   card to a 50% column. */
@media (min-width: 769px) {
	.cuw-fbt-products .desktop-fbt .cuw-buy-section {
		max-width: 295px !important;
	}
	.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions {
		padding: 32px 14px !important;
	}
	.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-add-to-cart {
		white-space: nowrap;
		font-size: 15px !important;
		line-height: 20px !important;
		padding: 13px 10px !important;
	}
}
/* Flex row at every width so the icon stays beside the label. */
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-add-to-cart {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
/* Below 769px the cell is half-width, so the label must be free to wrap again -
   nowrap there would overflow the button. */
@media (max-width: 768px) {
	.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-add-to-cart {
		white-space: normal;
	}
}
.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-add-to-cart::after {
	content: "";
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	background-color: #fff;
	-webkit-mask: url("../../../images/svg/cart-icon.svg") no-repeat center center;
	        mask: url("../../../images/svg/cart-icon.svg") no-repeat center center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

/* Responsive: stack the single grid on smaller screens (no mobile form now) */
@media (max-width: 768px) {
	.cuw-fbt-products .desktop-fbt .cuw-gird {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 16px !important;
	}
	/* Kill the plugin's per-cell margin-bottom:8px so row gap == column gap. */
	.cuw-fbt-products.cuw-mobile-responsive .desktop-fbt .cuw-gird .cuw-column { margin-bottom: 0 !important; }
	.cuw-fbt-products.cuw-mobile-responsive .desktop-fbt .cuw-product-wrapper { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
	.cuw-fbt-products.cuw-mobile-responsive .desktop-fbt .cuw-product-card { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; }
	.cuw-fbt-products.cuw-mobile-responsive .desktop-fbt .cuw-buy-section .cuw-actions { margin: 0 !important; }
	/* Lone buy card (even product count) keeps a substantial height */
	.cuw-fbt-products.cuw-mobile-responsive .desktop-fbt .cuw-buy-section { min-height: 340px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-product,
	.cuw-fbt-products .desktop-fbt .cuw-buy-section {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		margin: 0 !important;
	}
	/* Shrink contents to fit the narrow 2-col cells */
	.cuw-fbt-products .cuw-template-title { font-size: 22px !important; margin-bottom: 16px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-product-card { padding: 12px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-product-image { margin-bottom: 8px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-product-image img { height: 140px !important; max-height: 140px !important; }
	.cuw-fbt-products .cuw-product-price { font-size: 15px !important; line-height: 22px !important; }
	.cuw-fbt-products .cuw-product-title { font-size: 14px !important; line-height: 19px !important; margin-bottom: 8px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions { padding: 16px 12px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions > div:first-of-type > span:not(.cuw-total-price) { font-size: 14px !important; line-height: 20px !important; padding: 5px 12px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-total-price ins { font-size: 20px !important; line-height: 26px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-total-price del { font-size: 14px !important; line-height: 20px !important; }
	.cuw-fbt-products .cuw-add-to-cart { font-size: 14px !important; line-height: 18px !important; padding: 10px 14px !important; max-height: none !important; }
	/* Buy card fills its row height; navy box + content (incl. Add-to-cart) centered */
	.cuw-fbt-products .desktop-fbt .cuw-buy-section { align-self: stretch !important; }
	.cuw-fbt-products .desktop-fbt .cuw-buy-section .cuw-actions { height: 100% !important; justify-content: center !important; padding: 16px 12px !important; }
}
/* ---------------------------------------------------------------------------
   Item 8 (client feedback 18 Sep 2026) - mobile reflow of the add-to-cart card
   "If there are 4 products (3 FBT it runs over to a 3rd line), in that case:
    increase width to equivalent to two columns / decrease height to about half
    its current height / place above the FBT products, below the FBT title."

   The condition is "4 products", which in the DOM means the row has FIVE
   children (4 products + the buy card). :has(> :nth-child(5)) expresses exactly
   that, so a 2- or 3-product FBT is left on the existing layout untouched.
   :has() is already relied on elsewhere in this file.

   23 Sep 2026 (Kim): the gate is REMOVED - every FBT on mobile now gets the
   full-width card above the products, whatever the product count. The old
   selector prefix was .cuw-gird:has(> .cuw-column:nth-child(5)); every rule
   below now uses plain .cuw-gird. Restore from .bak-20260923f to re-gate.

   This block sits AFTER the main max-width:768px block on purpose: the rules it
   overrides there carry !important at equal specificity, so source order is
   what decides.

   "Below the FBT title" needs nothing - the title is a sibling of the form and
   sits outside .cuw-gird, so order:-1 places the card first inside the row and
   therefore still under the title.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section {
		order: -1;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		min-height: 0 !important;
		align-self: auto !important;
	}
	/* Half height comes mostly for free: at full width the CTA label stops
	   wrapping to three lines, which was ~33px of the old height on its own. */
	/* Half height is not reachable by tightening the vertical stack - label,
	   capsule, price, struck price and CTA come to ~190px however hard the
	   padding is squeezed, against a 340px original. Measured 220px stacked.

	   At full width there is room to put the CTA BESIDE the pricing instead.
	   .cuw-actions becomes a grid; the label/price wrapper is still
	   display:contents from item 4, so the label and price are grid items in
	   their own right alongside the capsule and the button, and item 4 vertical
	   order (label, capsule, price, struck beneath) is preserved down the left
	   column. */
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-actions {
		display: grid !important;
		/* Equal columns so the pricing block and the CTA read as a balanced
		   pair. minmax(0,1fr) auto gave the button its natural 222px and left
		   the text column only 82px, which looked lopsided. */
		/* grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"label  btn"
			"cap    btn"
			"price  btn"; */
		/* 23 Sep 2026 (Kim): one column, as on desktop - label, capsule, price
		   with struck price beneath, then the CTA full width underneath. Kept
		   short by the tightened pill/capsule/CTA sizes below rather than by
		   putting the CTA beside the pricing. */
		grid-template-columns: 100%;
		grid-template-areas:
			"label"
			"cap"
			"price"
			"btn";
		align-items: center;
		justify-items: center;
		column-gap: 14px;
		row-gap: 5px;
		padding: 14px 16px !important;
	}
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-actions > div:first-of-type > span:not(.cuw-total-price) { grid-area: label; margin: 0 !important; white-space: nowrap; }
	/* The "Total Price" pill inherits padding:5px 12px / font-size:14px from the
	   main mobile block, which makes it 98px wide against a ~90px grid column -
	   it broke out to x=4 against a 16px padding edge. Trimmed here, and the
	   CTA trimmed slightly too, so column one has the room it needs. */
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-actions > div:first-of-type > span:not(.cuw-total-price) {
		font-size: 13px !important;
		line-height: 18px !important;
		/* padding: 4px 10px !important; */
		/* 23 Sep 2026 pass 3 (Kim): tighter pill on mobile. */
		padding: 2px 8px !important;
	}
	/* The capsule ships as 12px text on a 25px line-height - nearly 2x leading,
	   which is most of why this card reads as crowded at mobile. Trimmed to a
	   proportional 18px and tighter side padding. */
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-total-savings {
		grid-area: cap;
		margin: 0 !important;
		padding: 1px 8px;
		line-height: 18px;
		font-size: 11px;
	}
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-total-price { grid-area: price; margin: 0 !important; }
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-actions > div:last-of-type { grid-area: btn; margin: 0 !important; width: 100% !important; }
	/* 23 Sep 2026 pass 2 (Kim): CTA not full width. The wrapper shrinks to the
	   button and justify-items:center on the grid centres it. */
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-actions > div:last-of-type { width: auto !important; max-width: 100%; }

	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-add-to-cart {
		/* Fills its half of the grid. nowrap is dropped: at an equal column the
		   label no longer fits on one line, and wrapping inside the button is
		   preferable to the button overflowing its column. */
		/* 23 Sep 2026: now full width in the one-column card, so the label sits
		   on one line anyway; normal wrapping is kept as the fallback for
		   narrow phones. margin-bottom:10px from the plugin left 24px of navy
		   under the CTA against 14px above the label - zeroed. */
		white-space: normal;
		/* width: 100% !important; */
		width: auto !important;
		font-size: 14px !important;
		line-height: 18px !important;
		/* padding: 10px 12px !important; */
		padding: 10px 28px !important;
		margin: 0 !important;
	}
	/* Tighten the vertical rhythm so the card lands near half its old 340px. */
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-total-price { margin-bottom: 10px; }
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-total-savings { margin: 0 0 8px !important; }
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-actions > div:first-of-type > span:not(.cuw-total-price) { margin-bottom: 8px; }
}


/* ---------------------------------------------------------------------------
   Narrow phones (<=360px). At 320 the card has ~99px of content width, while
   the Yotpo review row needs ~137px (five 15px stars plus "N Reviews" at 14px)
   - so the count was being clipped to "7 Review". Yotpo lays the row out with
   flex-direction:row and no wrapping, so it cannot break on its own.
   Stars and text are scaled down and the row is allowed to wrap.
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
	.cuw-fbt-products .cuw-product-rating .yotpo-sr-bottom-line-summary,
	.cuw-fbt-products .cuw-product-rating .yotpo-bottom-line-scroll-panel {
		flex-wrap: wrap !important;
		row-gap: 2px;
	}
	.cuw-fbt-products .cuw-product-rating svg.star-container {
		width: 12px !important;
		height: 12px !important;
	}
	.cuw-fbt-products .cuw-product-rating .yotpo-sr-bottom-line-text {
		font-size: 12px !important;
		line-height: 17px !important;
	}
	/* The CTA wraps to three lines at this width; a slightly smaller label and
	   tighter padding keeps it to two. */
	.cuw-fbt-products .desktop-fbt .cuw-gird .cuw-buy-section .cuw-add-to-cart {
		font-size: 13px !important;
		line-height: 17px !important;
		padding: 9px 8px !important;
	}
}

/* ---------------------------------------------------------------------------
   Add-to-cart confirmation popup
   The popup markup is appended to <body> by ajax-add-to-cart.js after adding a
   product. These styles used to live in woocommerce/css/woo-product-single.css,
   which the rebuild no longer loads on single-product pages — so they are kept
   here (single-product.css always loads on the product page via add-to-cart.php).
   --------------------------------------------------------------------------- */
.add_to_cart_popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #0000002b;
	z-index: 9999999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.add_to_cart_popup .popup_inner {
	width: 720px;
	padding: 25px 20px 20px;
	position: relative;
	max-height: 100%;
	overflow: auto;
}
.add_to_cart_popup .close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	cursor: pointer;
}
.popup_cart_data {
	background: #fff;
	max-height: 100%;
	overflow: auto;
	border-radius: 5px;
	position: relative;
}
.popup_cart_data .s1 {
	background: #37456e;
	border-radius: 5px 5px 0 0;
	color: #fff;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	padding: 12px;
	line-height: 1.4;
}
.popup_cart_data .s2 {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 10px;
}
.popup_cart_data .s2 .c1 {
	width: 300px;
	max-width: 100%;
	flex: 1;
}
.popup_cart_data .s2 .c2 {
	width: 300px;
	max-width: 100%;
	border: 1px solid #b9becc;
	border-radius: 5px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.popup_cart_data .product_title {
	font-size: 18px;
	margin: 0 0 10px;
}
.popup_cart_data  .product_details img {
	height: auto;
	max-width: 100%;
	max-height: 250px;
	width: auto;
}
.popup_cart_data .cart_details {
	background: #F0F2F6;
	border: 1px solid #E0E1E4;
	border-radius: 5px;
	padding: 20px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.popup_cart_data .cart_details .e1 {
	font-size: 13px;
	margin-bottom: 10px;
}
.popup_cart_data .sub_total {
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 10px;
}
.popup_cart_data .cart_count_msg {
	font-size: 13px;
}
.popup_cart_data .btn {
	padding: 10px 20px;
	font-size: 14px;
	line-height: 1.2;
	background: #9CCB3B;
	color: #fff;
	border-color: #9CCB3B;
}
.popup_cart_data .btn:hover {
	border-color: #bada75;
	background: #bada75;
	color: #fff;
}
.popup_cart_data .btn.cart {
	background: #fff;
	color: #37456e;
	border-color: #37456e;
}
.popup_cart_data .btn.cart:hover {
	background: #37456e;
	color: #fff;
	border-color: #37456e;
}

/* Autoship mobile fixes */
@media (max-width: 768px) {
	.sp-atc .autoship-type { padding: 10px !important; }
	.sp-atc .autoship-info-link-wrapper {
		position: static !important;
		text-align: left !important;
	}
}

/* Mobile font shrinks */
@media (max-width: 768px) {
	.sp-reviews .yotpo-sr-bottom-line-text { font-size: 12px !important; }
	.sp-atc .autoship-label { font-size: 12px !important; }
	.custom-listing-item { font-size: 11px !important; }
}

/* Gallery thumbs mobile */
@media (max-width: 768px) {
	/* Was 121 / 104 - a landscape box that reintroduced the crop below 768px. */
	.jet-woo-swiper-control-thumbs__item-image { aspect-ratio: 1 / 1 !important; }
}

/* Shipping/FAQ tabs -> accordion (mobile) */
@media (max-width: 768px) {
	.sp-tabs { display: flex; flex-direction: column; padding: 20px 16px; }
	.sp-tabs-nav, .sp-tabs-panels { display: contents; }
	.sp-tab-title[data-tab="0"] { order: 1; }
	.sp-tab-panel[data-tab="0"] { order: 2; }
	.sp-tab-title[data-tab="1"] { order: 3; }
	.sp-tab-panel[data-tab="1"] { order: 4; }
	.sp-tab-title[data-tab="2"] { order: 5; }
	.sp-tab-panel[data-tab="2"] { order: 6; }
	.sp-tab-title {
		width: 100% !important;
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 0;
		margin-bottom: 0;
		color: #37456E;
		border-bottom: 2px solid transparent;
	}
	.sp-tab-title::after {
		content: "\25BC";
		font-size: 10px;
		color: #37456E;
		transition: transform .15s ease;
	}
	.sp-tab-title.active { border-bottom-color: #9CCB3B; }
	.sp-tab-title.active::after { transform: rotate(180deg); }
}

/* sp-tab-panel smooth open/close (mobile) */
@media (max-width: 768px) {
	.sp-tab-panel {
		display: grid !important;
		grid-template-rows: 0fr;
		opacity: 0;
		transition: grid-template-rows .35s ease, opacity .25s ease;
	}
	.sp-tab-panel.active {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.sp-tab-panel > * { min-height: 0; overflow: hidden; }
}

/* ===========================================================================
   FBT variant-select modal ("Select Your Options") — brand-aligned to the
   single-product page. Plugin default is unstyled grey.
   =========================================================================== */
.cuw-modal { font-family: "Work Sans", sans-serif; }
.cuw-modal .cuw-modal-content {
	border-radius: 12px !important;
	border: 1px solid #D4DAE1;
	box-shadow: 0 12px 40px rgba(55, 69, 110, 0.18);
	overflow: hidden;
}
.cuw-modal .cuw-modal-header {
	background: #fff !important;
	border-bottom: 1px solid #D4DAE1;
	padding: 18px 24px !important;
	position: relative;
	justify-content: center;
}
.cuw-modal .cuw-modal-header h4 { color: #37456E; font-size: 24px; font-weight: 700; line-height: 1.2; text-align: center; }
.cuw-modal .cuw-modal-close { color: #37456E; opacity: .6; font-weight: 400; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); float: none !important; }
.cuw-modal .cuw-modal-close:hover { color: #37456E; opacity: 1; }
.cuw-modal .cuw-modal-body { padding: 8px 24px 16px !important; }
.cuw-modal .cuw-modal-body table { width: 100%; border-collapse: collapse; }
.cuw-modal .cuw-modal-body thead th { color: #37456E; font-weight: 700; font-size: 14px; padding: 12px 8px; border-bottom: 1px solid #D4DAE1; }
.cuw-modal .cuw-modal-body tbody td { padding: 12px 8px; border-bottom: 1px solid #D4DAE1; color: #37456E; font-size: 14px; line-height: 1.4; }
.cuw-modal .cuw-modal-body img { border-radius: 8px; border: 0 !important; display: block; }
.cuw-modal .cuw-modal-body td.cuw-product-price,
.cuw-modal .cuw-modal-body td.cuw-product-price-container { text-align: center; }
.cuw-modal .cuw-product-price { color: #37456E !important; font-weight: 600; font-size: 16px; justify-content: center !important; text-align: center !important; }
.cuw-modal .cuw-product-price ins, .cuw-modal .cuw-product-price .amount { color: #37456E !important; text-decoration: none !important; }
.cuw-modal .cuw-product-price del, .cuw-modal .cuw-product-price del .amount { color: rgba(55, 69, 110, 0.5) !important; font-weight: 400; }
.cuw-modal select {
	width: 100% !important; max-width: 100% !important; height: 44px;
	box-sizing: border-box; margin: 0 !important;
	padding: 0 40px 0 14px !important;
	border: 1px solid #37456E !important; border-radius: 8px !important;
	background: #FFFFFF url(/wp-content/themes/thom/images/svg/select-toggle.svg) no-repeat right 14px center / 12px !important;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	color: #37456E; font-family: "Work Sans", sans-serif; font-weight: 600; font-size: 14px; cursor: pointer;
}
.cuw-modal .cuw-modal-footer { background: #fff !important; border-top: 1px solid #D4DAE1; padding: 16px 24px !important; gap: 10px; flex-wrap: nowrap; }
.cuw-modal .cuw-modal-footer .cuw-total-text { color: #37456E; font-weight: 600; font-size: 16px !important; }
.cuw-modal .cuw-modal-footer .cuw-total-price { color: #37456E; font-weight: 700; font-size: 16px !important; }
.cuw-modal .cuw-modal-footer .cuw-total-price ins,
.cuw-modal .cuw-modal-footer .cuw-total-savings,
.cuw-modal .cuw-modal-footer .cuw-total-savings a { text-decoration: none !important; }
.cuw-modal .cuw-modal-footer .cuw-total-price del { color: rgba(55, 69, 110, 0.5); font-weight: 400; }
.cuw-modal .cuw-modal-footer .cuw-total-savings { background: #9CCB3B; color: #37456E; font-weight: 700; font-size: 12px; padding: 2px 10px; border-radius: 4px; }
.cuw-modal .cuw-modal-footer .cuw-add-to-cart {
	margin-left: auto; width: auto !important; border: 0 !important; border-radius: 999px !important;
	background: #9CCB3B !important; color: #fff !important;
	font-family: "Work Sans", sans-serif !important; font-weight: 700 !important;
	font-size: 16px !important; padding: 12px 28px !important; text-transform: none !important;
	cursor: pointer; max-height: none !important;
}
.cuw-modal .cuw-modal-footer .cuw-add-to-cart:hover { background: #86B22C !important; }
/* ---------------------------------------------------------------------------
   23 Sep 2026 (Kim) - modal tidy-up, all widths:
   1. Discounted row price green, matching the product cards (#86B22C on white).
      Every row price is wrapped in <ins>, discounted or not, so :has(del) limits
      this to rows that actually carry a struck price.
   2. Cart icon on the modal CTA, same mask as the buy card's.
   3. Footer total: discounted price first, struck price after. Markup is
      <del> then <ins>, so flex order swaps them.
   4. "2% Off" badge: the plugin wraps the text in <ins>, which carries the
      browser underline - the existing rule only cleared it on the badge itself.
   --------------------------------------------------------------------------- */
/* .cuw-modal .cuw-product-price:has(del) ins,
.cuw-modal .cuw-product-price:has(del) ins .amount { color: #86B22C !important; } */
/* Pass 5 (Kim): every final price green, discounted or not, plus the footer
   total. The struck <del> prices keep their faded navy. */
.cuw-modal .cuw-product-price ins,
.cuw-modal .cuw-product-price ins .amount,
.cuw-modal .cuw-modal-footer .cuw-total-price ins,
.cuw-modal .cuw-modal-footer .cuw-total-price ins .amount { color: #86B22C !important; }
.cuw-modal .cuw-modal-footer .cuw-add-to-cart {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.cuw-modal .cuw-modal-footer .cuw-add-to-cart::after {
	content: "";
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	background-color: #fff;
	-webkit-mask: url("../../../images/svg/cart-icon.svg") no-repeat center center;
	        mask: url("../../../images/svg/cart-icon.svg") no-repeat center center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}
.cuw-modal .cuw-modal-footer .cuw-total-price { display: inline-flex; align-items: baseline; gap: 6px; }
.cuw-modal .cuw-modal-footer .cuw-total-price ins { order: 0; }
.cuw-modal .cuw-modal-footer .cuw-total-price del { order: 1; }
.cuw-modal .cuw-modal-footer .cuw-total-savings ins { text-decoration: none !important; }
@media (max-width: 768px) {
	.cuw-modal { padding-top: 40px !important; }
	.cuw-modal .cuw-modal-content { width: 94% !important; }
	.cuw-modal .cuw-modal-header { padding: 14px 16px !important; }
	.cuw-modal .cuw-modal-header h4 { font-size: 20px; }
	.cuw-modal .cuw-modal-body { padding: 12px 16px !important; overflow-x: hidden !important; }
	.cuw-modal .cuw-modal-body thead { display: none; }
	.cuw-modal .cuw-modal-body table,
	.cuw-modal .cuw-modal-body tbody { display: block; width: 100%; }
	.cuw-modal .cuw-modal-body tbody tr {
		display: grid;
		grid-template-columns: 56px 1fr auto;
		grid-template-areas:
			"img title title"
			"img opts  price";
		gap: 6px 10px;
		align-items: center;
		border: 1px solid #D4DAE1; border-radius: 8px;
		padding: 10px 12px; margin-bottom: 10px;
	}
	.cuw-modal .cuw-modal-body tbody td { border: 0 !important; padding: 0 !important; height: auto !important; width: auto !important; text-align: left !important; }
	.cuw-modal .cuw-modal-body tbody td:first-child { grid-area: img; }
	.cuw-modal .cuw-modal-body tbody td:nth-child(2) { grid-area: title; }
	.cuw-modal .cuw-modal-body tbody td.cuw-product-variants { grid-area: opts; }
	.cuw-modal .cuw-modal-body tbody td.cuw-product-price-container,
	.cuw-modal .cuw-modal-body tbody td.cuw-product-price { grid-area: price; text-align: right !important; }
	.cuw-modal .cuw-modal-body tbody td:first-child img { width: 56px; height: auto; }
	.cuw-modal .cuw-modal-body tbody .cuw-product-price { flex-direction: column !important; align-items: flex-end !important; justify-content: center !important; gap: 0 !important; }
	.cuw-modal .cuw-modal-footer { padding: 12px 16px !important; flex-wrap: wrap; justify-content: center; }
	.cuw-modal .cuw-modal-footer .cuw-add-to-cart { margin-left: 0; width: 100% !important; }
}

/* Auto Delivery row — the two prices, and never paint Autoship's own string.
   ----------------------------------------------------------------------------
   Mirrors the quick view treatment so the two surfaces read the same.

   Autoship outputs two labels server-side and shows whichever it thinks
   applies:

     span.autoship-discount-label     "Setup Repeat Delivery" + percent + ": " + price
     span.autoship-no-discount-label  "Setup Repeat Delivery"

   The first carries the percentage, the colon and the plugin's own price. All
   three are wrong here: the percentage is measured against the regular price
   rather than what the customer pays, and the price shown is the one-time one.
   Since single-product.js renders both prices itself, the plain label is the
   one we want.

   Hidden in CSS rather than stripped in JS on purpose. Stripping happens after
   the plugin has rendered, which leaves a frame where the percentage is visible
   — a flash on every variation change. CSS applies before paint, so it is never
   shown at all, and the colon goes with it. The colon is a bare text node
   inside the discount label and has no selector of its own.

   !important is required: toggleAutoshipLabels() in
   autoship-cloud/js/schedule-options.js drives these with jQuery .show()/.hide(),
   writing inline display styles that an !important rule beats.

   .autoship-label is already flex (line 1008), so margin-left:auto on the price
   pushes it and the info link to the right. The link must not also claim an
   auto margin or the free space splits and the pair drifts apart.
   ---------------------------------------------------------------------------- */
.sp-atc .autoship-type.autoship-yes .autoship-discount-label {
    display: none !important;
}

.sp-atc .autoship-type.autoship-yes .autoship-no-discount-label {
    display: inline !important;
}

.sp-atc .autoship-label:has(.sp-recurring-price) .autoship-info-link-wrapper,
.sp-atc .autoship-label:has(.sp-one-time-price) .autoship-info-link-wrapper {
    margin-left: 12px;
}

.sp-atc .sp-one-time-price,
.sp-atc .sp-recurring-price {
    margin-left: auto;
    color: #37456E;
    font-weight: 700;
    white-space: nowrap;
}

/* Let the row grow when the info link wraps beneath the price on a narrow
   screen. Line 1590 sets .sp-atc .autoship-type padding with !important for
   mobile; a fixed height is not set here, but stating min-height keeps the
   single-line row from collapsing if that changes. */
@media only screen and (max-width: 479px) {
    .sp-atc .autoship-type {
        height: auto;
        min-height: 34px;
    }

    .sp-atc .autoship-label {
        row-gap: 2px;
    }

    .sp-atc .autoship-label .autoship-info-link-wrapper {
        flex: 1 0 auto;
        text-align: right;
    }
}

/* SAVE figure on the Auto Delivery row.
   ----------------------------------------------------------------------------
   Restores what the old product page showed: "SAVE $12.94  $17.96". Kept here
   but deliberately NOT in the quick view — that row is much narrower and the
   saving squeezed the price against the info link, so it was dropped there.

   The saving is measured against the current selling price, not the regular
   price, because that is what the customer actually pays. Autoship's own
   percentage measures against regular, which is what made it read 30% on a
   product whose real saving was $4.10.

   margin-left:auto moves from the price to the saving, since the saving is now
   first in the group and has to be the one claiming the free space. The price
   then follows it with a fixed gap, and the info link after that.
   ---------------------------------------------------------------------------- */
.sp-atc .sp-saving {
    margin-left: auto;
    color: #86B22C;
    font-weight: 700;
    white-space: nowrap;
}

/* With a saving present it owns the push; the price just follows. */
.sp-atc .autoship-label:has(.sp-saving) .sp-recurring-price {
    margin-left: 8px;
}

/* Auto Delivery row — take the info link out of absolute positioning.
   ----------------------------------------------------------------------------
   Line 1029 sets:

       .sp-atc .autoship-info-link-wrapper {
           position: absolute; right: 0; top: 0;
       }

   which lays "What is Auto Delivery?" ON TOP of the label content rather than
   beside it. With Autoship's own short string that mostly got away with it; as
   soon as the row carries a saving and a price the three collide, which is the
   overlap in the reported screenshot.

   There is already a `position: static !important` override for this at line
   1591, but it sits inside a mobile media query — so mobile was fine and
   desktop was not. This is the desktop equivalent, and it is the same fix
   already applied to the quick view in overview.css.

   .autoship-label is display:flex (line 1008), so returning the wrapper to the
   flow is enough; the saving claims the free space with margin-left:auto and
   the link follows at a fixed gap. Specificity beats line 1029 by one class
   without needing !important.
   ---------------------------------------------------------------------------- */
.sp-atc .autoship-label .autoship-info-link-wrapper {
    position: static;
    margin-left: auto;
}

/* Where a figure is present it owns the push, so the link drops to a plain gap
   — two auto margins would split the free space and the group would drift
   apart instead of sitting together on the right. */
.sp-atc .autoship-label:has(.sp-saving) .autoship-info-link-wrapper,
.sp-atc .autoship-label:has(.sp-recurring-price) .autoship-info-link-wrapper,
.sp-atc .autoship-label:has(.sp-one-time-price) .autoship-info-link-wrapper {
    margin-left: 12px;
}

/* Client feedback 21 Sep 2026: line the two prices up with each other.
   ----------------------------------------------------------------------------
   DOM order inside .autoship-label is radio, label, SAVE, price, then the info
   link LAST. So on the Repeat Delivery row the link sat to the right of $117.00
   and pushed it 172.4px inboard of the $128.00 above it. The One-time row has no
   link, its price ran flush right, and the two never lined up.

   Reordered with flex order rather than by moving markup, so nothing in the
   Autoship plugin output has to be touched. The link lands straight after the
   label; the existing auto margin on .sp-saving still pushes the saving and the
   price to the right edge, where the price now ends level with the one above.

   Desktop only, deliberately. Below 769px the link already wraps to its own line
   under the price and BOTH prices already align, so the mobile rules are left
   alone - reordering there would send the price to the second line instead of
   the link, which is the layout those rules exist to prevent.
   Measured: misalignment 172.4px -> 0px at 950 and 1440, unchanged 0px at 390.
   (autoship price/link order) */
@media (min-width: 769px) {
    .sp-atc .autoship-label .autoship-info-link-wrapper {
        order: 1;
    }
    .sp-atc .autoship-label .sp-saving {
        order: 2;
    }
    .sp-atc .autoship-label .sp-recurring-price,
    .sp-atc .autoship-label .sp-one-time-price {
        order: 3;
    }
}

/* Auto Delivery row on mobile — link right-aligned beneath the price.
   ----------------------------------------------------------------------------
   When the row runs out of width, "What is Auto Delivery?" wraps to a second
   line. It was landing hard left, under the radio button, rather than under the
   price.

   The reason a plain rule could not fix it: the "Autoship mobile fixes" block
   at line 1591 sets

       .sp-atc .autoship-info-link-wrapper {
           position: static !important;
           text-align: left !important;
       }

   and an !important declaration beats a normal one whatever the specificity.
   So this has to be !important too — at which point specificity decides, and
   the extra .autoship-label class wins.

   flex:1 0 auto rather than a forced full-width item, because one rule has to
   cover both cases and CSS cannot ask whether an item wrapped. On a single line
   the saving above already carries margin-left:auto, and an auto margin absorbs
   free space BEFORE flex-grow gets any — so the link does not grow and simply
   sits beside the price. On a wrapped line it is alone with no auto margin
   competing, so it grows to fill the row and text-align pulls it right, landing
   it directly under the price.

   Matched to the same 768px breakpoint as the block it overrides, rather than
   inventing a second one.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sp-atc .autoship-label .autoship-info-link-wrapper {
        flex: 1 0 auto;
        text-align: right !important;
        margin-left: auto;
    }

    /* A figure is present: it owns the push, the link follows on its own line. */
    .sp-atc .autoship-label:has(.sp-saving) .autoship-info-link-wrapper,
    .sp-atc .autoship-label:has(.sp-recurring-price) .autoship-info-link-wrapper,
    .sp-atc .autoship-label:has(.sp-one-time-price) .autoship-info-link-wrapper {
        margin-left: 12px;
    }

    /* Let the row grow when the link wraps rather than clipping it. */
    .sp-atc .autoship-type {
        height: auto;
        min-height: 34px;
    }

    .sp-atc .autoship-label {
        row-gap: 2px;
    }
}

/* FBT cards: hide Yotpo's "Highly rated by customers for" topics box under the
   star rating. Scoped to the CUW product rating so the main product rating and
   reviews widget keep it. !important beats Yotpo's inline display:flex. */
.cuw-product-rating .yotpo-star-rating-reviews-highly-rated-topics {
    display: none !important;
}

/* MultiBuy info icon + popup — 1 Oct 2026. Icon mirrors the "What is Auto Delivery?"
   fa-info-circle. The popup reuses the Autoship modal (see multibuy.php), so the
   woo-styles.css .autoship-modal-content rules apply to it too; they are !important,
   hence the !important overrides below, scoped to .ff-mb-info-modal only.
   (multibuy info popup) */
.sp-multibuy-label .sp-multibuy-info {
	margin-left: 5px;
	color: inherit;
	font-size: 14px;
	text-decoration: none;
}
.autoship-modal.ff-mb-info-modal .autoship-modal-content {
	padding: 0 !important;
	border-radius: 8px;
	overflow: hidden;
}
.ff-mb-info-wrap {
	position: relative;
	line-height: 0;
}
.ff-mb-info-wrap img {
	display: block;
	width: 100%;
	height: auto;
}
/* Invisible hit area over the X drawn into the artwork: its centre is 98.54% across
   and 3.26% down the 1644x889 image, so it tracks the artwork at any width. */
.autoship-modal.ff-mb-info-modal .ff-mb-info-close {
	position: absolute;
	right: auto;
	left: calc(98.54% - 18px);
	top: calc(3.26% - 18px);
	width: 36px;
	height: 36px;
	float: none;
	font-size: 0;
	color: transparent !important;
	cursor: pointer;
}
@media (max-width: 768px) {
	.autoship-modal.ff-mb-info-modal .autoship-modal-content {
		max-width: calc(100% - 20px) !important;
	}
}

/* Whitening info popup — 7 Oct 2026, client request. Opened by clicking any of the primary
   attribute boxes (see primary-attributes.php); same Autoship modal as the
   MultiBuy popup above, so the same !important overrides apply. The artwork has no X drawn
   in, so the close button is a visible navy circle overlapping the top-right corner, per the
   client's mockup; overflow is left visible so the corner is not clipped.
   (whitening info popup) */
/* Each attribute box is the link that opens the popup. Reset link styling so the boxes
   look exactly as they did as plain divs. */
a.sp-attr-item--link,
a.sp-attr-item--link:hover,
a.sp-attr-item--link:focus {
	color: #37456E;
	font-weight: inherit;
	text-decoration: none;
	cursor: pointer;
}
.autoship-modal.ff-wh-info-modal .autoship-modal-content {
	padding: 0 !important;
	border-radius: 8px;
	overflow: visible !important;
}
.ff-wh-info-wrap {
	position: relative;
	line-height: 0;
}
.ff-wh-info-wrap img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
/* 7 Oct 2026 (Kim, during the release window): the MultiBuy and Auto Delivery popups take the same
   navy close button, and Auto Delivery gets the same rounded corners. MultiBuy's X used to be drawn
   into its artwork with an invisible hit area over it (rules above); the X was painted out of
   images/multibuy-info.jpg the same day, so these later rules replace that hit area with the
   visible button. Auto Delivery is Autoship's own modal and its own &times; close; woo-styles.css
   positions and colours it with !important, hence the !important below. */
.autoship-modal.ff-mb-info-modal .autoship-modal-content,
.autoship-modal.autoship-autoship_schedule_info_dialog_modal-modal .autoship-modal-content {
	position: relative;
	border-radius: 8px;
	overflow: visible !important;
}
.ff-mb-info-wrap img {
	border-radius: 8px;
}
.autoship-modal.ff-wh-info-modal .ff-wh-info-close,
.autoship-modal.ff-mb-info-modal .ff-mb-info-close,
.autoship-modal.autoship-autoship_schedule_info_dialog_modal-modal .autoship-modal-content > .close {
	position: absolute;
	top: -20px;
	right: -20px;
	left: auto;
	float: none;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	border: 2px solid #FFFFFF;
	border-radius: 50%;
	background: #0F2A80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 20px no-repeat;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	font-size: 0;
	color: transparent !important;
	opacity: 1;
	cursor: pointer;
	z-index: 2;
}
.autoship-modal.ff-wh-info-modal .ff-wh-info-close:hover,
.autoship-modal.ff-wh-info-modal .ff-wh-info-close:focus,
.autoship-modal.ff-mb-info-modal .ff-mb-info-close:hover,
.autoship-modal.ff-mb-info-modal .ff-mb-info-close:focus,
.autoship-modal.autoship-autoship_schedule_info_dialog_modal-modal .autoship-modal-content > .close:hover {
	background-color: #37456E;
}
@media (max-width: 768px) {
	.autoship-modal.ff-wh-info-modal .autoship-modal-content {
		max-width: calc(100% - 20px) !important;
	}
	/* Inside the corner on phones, where an overhang would run off the screen edge. */
	.autoship-modal.ff-wh-info-modal .ff-wh-info-close,
	.autoship-modal.ff-mb-info-modal .ff-mb-info-close,
	.autoship-modal.autoship-autoship_schedule_info_dialog_modal-modal .autoship-modal-content > .close {
		top: 6px;
		right: 6px;
		width: 34px;
		height: 34px;
		background-size: 16px;
	}
}