/*
 * Bossy Bulk Editor — main + variation gallery layout
 * Theme-agnostic: [data-bossy-layout] on .woocommerce-product-gallery.bossy-gallery targets
 * standard WooCommerce Flexslider only ( .flex-viewport + direct .flex-control-thumbs ).
 * Bossy does not style inside .flexy-container — themes (Blocksy Flexy, third-party carousels)
 * own that markup. Layout grids that use .bossy-gallery-{layout} also use :not(:has(.flexy-container))
 * so Flexy is never squeezed into the Flexslider “ledge” thumb column (76px rail).
 */

/* -------------------------------------------------------------------------
   Tokens (also set inline from PHP)
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Classic Woo Flexslider (ol.flex-control-thumbs — no .flexy-container)
   WC order after init: __trigger (absolute candidate), .flex-viewport, ol.flex-control-thumbs
   ------------------------------------------------------------------------- */

/* Kill Woo thumb float so flex/grid strips lay out predictably (Storefront + WC default).
   Also suppress theme-injected list counters (Astra etc. add numbers to ol > li). */
.woocommerce-product-gallery.bossy-gallery ol.flex-control-nav.flex-control-thumbs li,
.woocommerce-product-gallery.bossy-gallery .flex-control-thumbs li {
	float: none !important;
	margin: 0 !important; /* standardize spacing: gap controls distance */
	list-style: none !important;
	counter-increment: none !important;
}

.woocommerce-product-gallery.bossy-gallery ol.flex-control-nav.flex-control-thumbs li::before,
.woocommerce-product-gallery.bossy-gallery ol.flex-control-nav.flex-control-thumbs li::after,
.woocommerce-product-gallery.bossy-gallery .flex-control-thumbs li::before,
.woocommerce-product-gallery.bossy-gallery .flex-control-thumbs li::after {
	content: none !important;
	display: none !important;
}

/* Editorial — square main stage with traditional thumb row centered below, no scroll.
   Selectors match BOTH the layout CLASS (server-rendered, applies first paint) and the
   data-bossy-layout ATTRIBUTE (added by JS) so layout is stable from the first frame. */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .woocommerce-product-gallery__wrapper {
	grid-row: 1;
	grid-column: 1;
}

/* Editorial: cap stage width to the configured stage max height so it cannot
   stretch wider than its height under theme-imposed height clamps. */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport {
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	margin-inline: auto !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="editorial"] > .flex-viewport,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="editorial"] > .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery.bossy-gallery-editorial > .flex-viewport,
.woocommerce-page div.product div.images .woocommerce-product-gallery.bossy-gallery-editorial > .flex-viewport {
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 1 / 1 !important;
	margin-inline: auto !important;
}

body.bossy-layout-editorial .woocommerce-product-gallery > .flex-viewport,
body.bossy-layout-editorial .woocommerce-product-gallery.bossy-gallery > .flex-viewport {
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 1 / 1 !important;
	margin-inline: auto !important;
}

/* Pre-Flexslider stand-in stage: when `.flex-viewport` doesn't exist yet, the wrapper
   IS the visible stage. Treat it like the viewport so the page doesn't blow up vertically
   from 15 stacked images before Flexslider initializes (the "blowout on load" symptom).
   Once Flexslider injects `.flex-viewport`, the descendant rules take over seamlessly. */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	max-height: var(--bossy-stage-max-height, 520px) !important;
	overflow: hidden !important;
	margin: 0 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: none !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
	display: block !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:not(:has(> .flex-viewport)):not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > img {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	object-fit: cover !important;
}

/* CRITICAL: clamp `.flex-viewport` to a square aspect ratio for editorial and filmstrip.
   During Flexslider initialization (~500ms window after data-bossy-layout is set), the
   viewport briefly takes the natural stacked height of all slides — observed at 36000px+
   tall on a 15-slide product page. aspect-ratio + max-height + overflow:hidden caps it
   immediately so the page never paints in a blown-up state. */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: var(--bossy-stage-max-height, 520px) !important;
	min-height: 0 !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	box-sizing: border-box;
}

/* Wrapper inside `.flex-viewport` for editorial/filmstrip — ensure slides stay clipped
   to the viewport bounds even if Flexslider's intermediate inline styles haven't taken
   effect yet. Slides are layered absolute, only the active one visible (Flexslider tags
   it with .flex-active-slide; before that we show the first child). */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport > .woocommerce-product-gallery__wrapper {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	flex: 0 0 auto !important;
	display: none !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child {
	display: block !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport .woocommerce-product-gallery__image > a {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-viewport .woocommerce-product-gallery__image img,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport .woocommerce-product-gallery__image img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-viewport .woocommerce-product-gallery__image img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

/* Editorial square stage fallback for Woo block gallery paths. */
.wc-block-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .wc-block-product-gallery-large-image,
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .wc-block-product-gallery-large-image,
.wc-block-product-gallery.bossy-gallery.bossy-gallery-editorial .wc-block-product-gallery-large-image,
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .wc-block-product-gallery-large-image {
	aspect-ratio: 1 / 1 !important;
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	height: auto !important;
	max-height: none !important;
	overflow: hidden !important;
	margin-inline: auto !important;
}

.wc-block-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .wc-block-product-gallery-large-image img,
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .wc-block-product-gallery-large-image img,
.wc-block-product-gallery.bossy-gallery.bossy-gallery-editorial .wc-block-product-gallery-large-image img,
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .wc-block-product-gallery-large-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .flexy-container,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .flexy-container,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .flexy-container .flexy-view,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .flexy-container .flexy-view,
body.bossy-layout-editorial .woocommerce-product-gallery .flexy-container,
body.bossy-layout-editorial .woocommerce-product-gallery .flexy-container .flexy-view {
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 1 / 1 !important;
	margin-inline: auto !important;
	overflow: hidden !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-control-thumbs {
	grid-row: 2;
	grid-column: 1;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-content: flex-start !important;
	overflow: hidden !important;
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: var(--bossy-thumb-gap, 8px) !important;
	margin: 0 auto !important;
	padding: 4px 0 !important;
	list-style: none;
	box-sizing: border-box;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-control-thumbs::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Editorial hard lock: keep thumb cells and images square regardless of theme overrides. */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-control-thumbs > li {
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	aspect-ratio: 1 / 1 !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > ol.flex-control-nav.flex-control-thumbs > li img,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .flex-control-thumbs > li img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > ol.flex-control-nav.flex-control-thumbs > li img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .flex-control-thumbs > li img,
.wc-block-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .wc-block-product-gallery-thumbnails__thumbnail,
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .wp-block-woocommerce-product-gallery-thumbnails__thumbnail,
.wc-block-product-gallery.bossy-gallery.bossy-gallery-editorial .wc-block-product-gallery-thumbnails__thumbnail,
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .wp-block-woocommerce-product-gallery-thumbnails__thumbnail {
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(> .flex-viewport):not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:not(:has(.flexy-container)) {
	display: grid !important;
	grid-template-rows: auto auto;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--bossy-main-gap, 12px);
	position: relative;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] > .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial > .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	z-index: 9;
}

/* Editorial + filmstrip: standardized Bossy stage/reel chevrons (see .bossy-stage-nav__btn). */

/* Filmstrip — square main stage with horizontal scrolling thumb reel below.
   The reel is constrained to the stage width, has a slightly tinted background, and
   navigation chevrons (added via JS — see .bossy-filmstrip-nav). Class-based selectors
   ensure first-paint stability before JS adds data-bossy-layout. */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .woocommerce-product-gallery__wrapper {
	grid-row: 1;
	grid-column: 1;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-control-thumbs {
	grid-row: 2;
	grid-column: 1;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	gap: var(--bossy-thumb-gap, 8px);
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	box-sizing: border-box;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	margin: 0 auto !important;
	padding: 6px 8px !important;
	list-style: none;
	background: rgba(0, 0, 0, 0.04);
	border-radius: var(--bossy-gallery-radius, 0px);
	justify-self: center;
}

/* Filmstrip hard lock: thumb cells stay square and sized (prevents rail blowout). */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-control-thumbs > li {
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	min-width: var(--bossy-thumb-size, 76px) !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > ol.flex-control-nav.flex-control-thumbs > li img,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-control-thumbs > li img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > ol.flex-control-nav.flex-control-thumbs > li img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-control-thumbs > li img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Hide the scrollbar in webkit; the chevrons handle pagination instead. */
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .flex-control-thumbs::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(> .flex-viewport):not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:not(:has(.flexy-container)) {
	display: grid !important;
	grid-template-rows: auto auto;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: var(--bossy-main-gap, 12px);
	position: relative;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] > .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip > .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	z-index: 9;
}

/* Filmstrip navigation chevrons — overlay the left/right edges of the thumb reel.
   Buttons sit in the same grid cell as the reel (row 2, col 1) using justify-self
   to anchor at the reel's edges. Inherits theme color, transparent background, only
   visible on hover/focus. JS injects them and wires up smooth scrollBy on click. */
/* Editorial + filmstrip reel navigation chevrons (classic Flexslider path only). */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn {
	grid-row: 2;
	grid-column: 1;
	align-self: stretch;
	z-index: 6;
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(34px, calc(var(--bossy-thumb-size, 76px) * 0.55), 44px);
	height: clamp(34px, calc(var(--bossy-thumb-size, 76px) * 0.55), 44px);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(20, 32, 56, 0.78);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.26);
	cursor: pointer;
	opacity: 0;
	transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
	font: 0/0 a;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn--prev,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn--prev,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn--prev,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn--prev {
	left: 8px;
	right: auto;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn--next,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn--next,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn--next,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn--next {
	right: 8px;
	left: auto;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn::before,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn::before,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn::before,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn::before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
	transform-origin: center;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn--prev::before,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn--prev::before,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn--prev::before,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn--prev::before {
	transform: rotate(-135deg);
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn--next::before,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn--next::before,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn--next::before,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn--next::before {
	transform: rotate(45deg);
}

.woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow > .bossy-filmstrip-nav__btn:not(:disabled):not([aria-disabled="true"]),
.woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow .flexy-pills > .bossy-filmstrip-nav__btn:not(:disabled):not([aria-disabled="true"]) {
	opacity: 0.55;
}

/* Show chevrons on hover anywhere over the gallery row 2 (the reel area). */
.woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:hover .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn:hover,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn:hover,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn:hover,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn:hover,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn:focus-visible,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn:focus-visible,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn:focus-visible,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn:focus-visible {
	opacity: 1;
	outline: none;
	transform: translateY(-50%) scale(1.05);
	background: rgba(20, 32, 56, 0.95);
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn[aria-disabled="true"],
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn[aria-disabled="true"],
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn[aria-disabled="true"],
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn[aria-disabled="true"],
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip .bossy-filmstrip-nav__btn:disabled,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial .bossy-filmstrip-nav__btn:disabled,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"] .bossy-filmstrip-nav__btn:disabled,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"] .bossy-filmstrip-nav__btn:disabled {
	opacity: 0 !important;
	pointer-events: none;
	cursor: default;
}

/* Hide chevrons in any gallery that is wrapped by a theme-specific gallery container.
   Block-gallery markup (TT5 etc.) uses native horizontal scroll. Blocksy wraps the
   Woo gallery in `.ct-product-gallery-container` and lays it out as `display: flex`
   (not Bossy's grid), so the chevrons' `grid-row/column/justify-self` placements
   above no longer apply and the buttons fall into default flow as tiny stacked
   `<button>` elements below the reel. Native scroll + theme controls cover UX. */
.wc-block-product-gallery .bossy-filmstrip-nav__btn,
.wp-block-woocommerce-product-gallery .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery:has(.ct-product-gallery-container) > .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery:has(.flexy-container) > .bossy-filmstrip-nav__btn {
	display: none !important;
}

/* Ledge — grid: thumb column | main (trigger overlays main, not a full-width spacer row) */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:has(> .flex-viewport):not(:has(.flexy-container)) {
	display: grid !important;
	grid-template-columns: var(--bossy-thumb-size, 76px) minmax(0, 1fr);
	gap: var(--bossy-main-gap, 12px);
	align-items: start;
	position: relative;
}

/* Theme-agnostic hard anchor (Kadence-safe): classic markup where thumbs + .flex-viewport are direct
   children of .woocommerce-product-gallery. Blocksy Flexy nests a .flexy-container — an outer grid
   here squeezes the whole stack into the thumb column and blanks the main stage. */
.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) {
	display: grid !important;
	gap: var(--bossy-main-gap, 12px) !important;
	column-gap: var(--bossy-main-gap, 12px) !important;
	row-gap: 0 !important;
	align-items: start !important;
	justify-content: start !important;
	justify-items: stretch !important;
	position: relative;
}

.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) {
	grid-template-columns: var(--bossy-thumb-size, 76px) minmax(0, var(--bossy-stage-max-height, 520px)) !important;
}

.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) {
	grid-template-columns: minmax(0, var(--bossy-stage-max-height, 520px)) var(--bossy-thumb-size, 76px) !important;
}

/* Side-rail stage: deterministic SQUARE shape — single source of truth lives in the
   later @media block below (aspect-ratio: 1/1 + max-width = settings token). Inner
   wrapper/slide/anchor stretch to viewport so img object-fit can fill cleanly. */
@media (min-width: 601px) {
	.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
	.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
	.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport .woocommerce-product-gallery__image,
	.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport .woocommerce-product-gallery__image,
	.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport .woocommerce-product-gallery__image > a,
	.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport .woocommerce-product-gallery__image > a {
		height: 100% !important;
	}
}

/* Kadence + classic themes often target `.woocommerce div.product div.images …` with high specificity.
   Repeat the same layout rules with that chain so our grid always wins. */
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)),
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) {
	display: grid !important;
	gap: var(--bossy-main-gap, 12px) !important;
	align-items: start !important;
	justify-content: start !important;
	justify-items: stretch !important;
	position: relative !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) {
	grid-template-columns: var(--bossy-thumb-size, 76px) minmax(0, var(--bossy-stage-max-height, 520px)) !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)),
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) {
	grid-template-columns: minmax(0, var(--bossy-stage-max-height, 520px)) var(--bossy-thumb-size, 76px) !important;
}

/* Ensure the main stage actually stretches to the grid column (some themes leave .flex-viewport at intrinsic width,
   which looks like a “giant gap” even though the grid is correct). */
.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	margin-inline: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
}

/* Kadence centers *all* images in div.images via margin-inline:auto; that leaves the main stage visually “floating”
   inside its column, reading as a giant gap from the thumb rail. Force main-stage media to start-align + fill. */
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper img,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper img,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper img,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper img {
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-inline: 0 !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
}

/* Force the *main* image to scale up to the stage on desktop.
   Kadence leaves gallery images at intrinsic size (e.g. 400×400) which creates big side gutters. */
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image img,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image img,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	margin-inline: 0 !important;
}

/* Ultra-broad fallback: some stacks leave the main image as `img.wp-post-image` with intrinsic sizing.
   Force upscaling to the stage width in Bossy ledge layouts. */
.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) img.wp-post-image,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) img.wp-post-image,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) img.wp-post-image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) img.wp-post-image,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) img.wp-post-image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) img.wp-post-image {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	margin-inline: 0 !important;
	display: block !important;
	object-fit: cover !important;
}

/* Absolute “no surprises” main-stage normalization for classic themes (Kadence):
   make sure the viewport, wrapper, slide, link, and image all stretch to the grid column. */
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport {
	justify-self: stretch !important;
	align-self: start !important;
	float: none !important;
	clear: none !important;
	overflow: hidden !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	text-align: start !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a {
	display: flex !important;
	justify-content: stretch !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a img,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a img,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a img,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image > a img {
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* Kadence desktop: wrapper height becomes sum of slides (1600px). Force a horizontal track so
   the wrapper stays one-slide tall (Flexslider-like) and the stage doesn’t create “blue floor”. */
.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	height: 100% !important;
	max-height: 100% !important;
}

/* Kadence can apply stacking styles on the wrapper without the strict child chain;
   repeat the same horizontal-track rules with a looser selector so it always wins. */
.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	transform: none !important;
}

.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	height: 100% !important;
}

.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
}

/* Kadence main-stage “orange gutter”: the slide/anchor can keep an intrinsic width and center itself.
   Force the entire main-stage chain to stretch so the image hugs the thumb rail. */
.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	margin-inline: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	margin-inline: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport > .woocommerce-product-gallery__wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport .woocommerce-product-gallery__image,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport .woocommerce-product-gallery__image {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

/* The “blue box” is usually the slide link (`a`) being wider/centered than the image.
   Force the link to be a tight, full-width block with no padding/margins. */
.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
.woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: start !important;
	background: transparent !important;
	box-sizing: border-box;
}

/* Ledge fallback (no Flexslider wrapper yet / theme swaps sliders):
   place wrapper + thumbs directly into the grid so thumbs still move. */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	transform: none !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	/* Kadence centers this rail under the image via left/transform; kill it in side-rail mode. */
	left: auto !important;
	right: auto !important;
	transform: none !important;
	margin-top: 0 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:has(> .flex-viewport):not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:has(> .flex-viewport):not(:has(.flexy-container)) {
	/* Theme guard: force grid to align from the start (Kadence centers rails with transforms). */
	justify-content: start !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	z-index: 9;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > .flex-control-thumbs {
	grid-column: 1;
	grid-row: 1;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: var(--bossy-thumb-gap, 6px);
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-stage-max-height, 520px) !important;
	max-height: var(--bossy-stage-max-height, 520px) !important;
	overflow-x: hidden !important;
	overflow-y: hidden !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Kadence: bottom-thumb rail is centered with left/transform + negative top margin. */
	margin-top: 0 !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > .flex-control-thumbs::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Place classic rails using the attribute anchor (works regardless of Bossy class presence). */
.woocommerce-product-gallery[data-bossy-layout="ledge"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery[data-bossy-layout="ledge"] > ol.flex-control-thumbs,
.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-control-thumbs {
	grid-column: 1 !important;
	grid-row: 1 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	margin: 0 !important;
	margin-top: 0 !important;
	max-width: var(--bossy-thumb-size, 76px) !important;
	width: 100% !important;
	/* Cancel theme width caps/centering on the rail itself. */
	position: relative !important;
}

.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > ol.flex-control-thumbs,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-control-thumbs {
	grid-column: 2 !important;
	grid-row: 1 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	margin: 0 !important;
	margin-top: 0 !important;
	max-width: var(--bossy-thumb-size, 76px) !important;
	width: 100% !important;
	position: relative !important;
}

/* Kadence (and similar): bottom-thumb rail uses left:50% + translate(-50%) to center under the
   main image — in a side grid track that reads as a huge gap. Only neutralize above the Bossy stack breakpoint. */
@media (min-width: 601px) {
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > .flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > .flex-control-thumbs {
		left: auto !important;
		right: auto !important;
		inset-inline: auto !important;
		transform: none !important;
	}
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > .flex-viewport {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	margin-inline: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	justify-self: stretch !important;
}

/* Attribute anchor: main stage placement + kill theme centering. */
.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport,
.woocommerce-product-gallery[data-bossy-layout="ledge"] > .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .woocommerce-product-gallery__wrapper {
	grid-row: 1 !important;
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	margin-inline: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	justify-self: stretch !important;
}

.woocommerce-product-gallery[data-bossy-layout="ledge"] > .flex-viewport,
.woocommerce-product-gallery[data-bossy-layout="ledge"] > .woocommerce-product-gallery__wrapper {
	grid-column: 2 !important;
}

.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport,
.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] > .woocommerce-product-gallery__wrapper {
	grid-column: 1 !important;
}

/* Ledge reverse */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:has(> .flex-viewport):not(:has(.flexy-container)) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) var(--bossy-thumb-size, 76px);
	gap: var(--bossy-main-gap, 12px);
	align-items: start;
	position: relative;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	transform: none !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-control-thumbs {
	grid-column: 2;
	grid-row: 1;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	margin-top: 0 !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	z-index: 9;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > .flex-viewport {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	margin-inline: 0 !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	justify-self: stretch !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > .flex-control-thumbs {
	grid-column: 2;
	grid-row: 1;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	gap: var(--bossy-thumb-gap, 6px);
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-stage-max-height, 520px) !important;
	max-height: var(--bossy-stage-max-height, 520px) !important;
	overflow-x: hidden !important;
	overflow-y: hidden !important;
	scrollbar-width: none;
	-ms-overflow-style: none;
	margin-top: 0 !important;
}

.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > .flex-control-thumbs::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Side-rail layouts: pure CSS deterministic SQUARE stage that respects the settings
   slider AND the theme column width — whichever is smaller wins. No JS layout shift.

   Key tricks:
   - Gallery uses `width: max-content; max-width: 100%`: gallery shrinks when settings
     shrinks (slider has visible effect), and never exceeds the parent column.
   - Stage column track = `minmax(0, var(--bossy-stage-max-height))` — caps at settings.
   - Rail uses `position: absolute` so it does NOT contribute to grid track sizing.
     Without this, rail's intrinsic max-content size (overflowing thumbs) inflates the
     row, defeating the square aspect ratio.
   - Viewport uses `aspect-ratio: 1 / 1; width: 100%; height: auto` — height computed
     from width by the browser, no JS needed.
   - Slides are LAYERED (absolute), not a flex track, so Flexslider's thumb-click switch
     works by toggling `.flex-active-slide` without any transform animation.

   Specificity intentionally bumped with `body.single-product` + `:not(:has(.flexy-container))`
   so we override the generic `body.single-product …:not(:has(.flexy-container)) .flex-viewport`
   `max-width: 100% !important` rule lower in this file. */
@media (min-width: 601px) {
	/* Gallery container — width is driven by the settings token + thumb + gap, capped
	   at 100% of the parent column. Smaller settings → smaller gallery (visible slider effect).
	   Selectors use a compound `.woocommerce-product-gallery.bossy-gallery` chain (NOT
	   descendant) because Astra's `div.images` IS the gallery element itself.
	   Both `[data-bossy-layout]` (added by JS) AND `.bossy-gallery-ledge*` (added server-side
	   via filter) are matched so the square layout applies at FIRST PAINT, eliminating the
	   load glitch where the gallery briefly stacks slides vertically before JS runs. */
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) {
		width: max-content !important;
		max-width: 100% !important;
		position: relative !important;
		grid-template-rows: auto !important;
		align-items: stretch !important;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) {
		grid-template-columns: var(--bossy-thumb-size, 76px) minmax(0, var(--bossy-stage-max-height, 520px)) !important;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) {
		grid-template-columns: minmax(0, var(--bossy-stage-max-height, 520px)) var(--bossy-thumb-size, 76px) !important;
	}

	/* Wrapper: block positioning context for layered slides (no transform/flex track). */
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		height: 100% !important;
		transform: none !important;
	}

	/* Slides: layered, hidden by default, only active slide visible. Pre-Flexslider-init
	   the first child is shown via the `:not(:has(> .flex-active-slide))` fallback so the
	   page does not flash empty before JS runs. The CLASS-based selectors below match
	   pre-flex-viewport state (no `.flex-viewport` wrapper yet) so first paint is square. */
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		flex: 0 0 auto !important;
		display: none !important;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image.flex-active-slide,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-viewport > .woocommerce-product-gallery__wrapper:not(:has(> .flex-active-slide)) > .woocommerce-product-gallery__image:first-child,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:first-child {
		display: block !important;
	}

	/* Pre-Flexslider stand-in viewport: when `.flex-viewport` doesn't exist yet, the
	   `.woocommerce-product-gallery__wrapper` IS the visible stage. Treat it like the
	   viewport so first paint is already square. After Flexslider wraps it in `.flex-viewport`
	   (a few hundred ms later), the descendant rules below take over seamlessly. */
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)):not(:has(> .flex-viewport)) > .woocommerce-product-gallery__wrapper,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)):not(:has(> .flex-viewport)) > .woocommerce-product-gallery__wrapper {
		width: 100% !important;
		max-width: var(--bossy-stage-max-height, 520px) !important;
		height: auto !important;
		max-height: var(--bossy-stage-max-height, 520px) !important;
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
		overflow: hidden !important;
		display: block !important;
		position: relative !important;
	}

	/* Viewport — the SQUARE driver. width: 100% of column → aspect-ratio 1/1 sets height.
	   Browser computes this at first paint; no JS shift. */
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-viewport,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-viewport {
		width: 100% !important;
		max-width: var(--bossy-stage-max-height, 520px) !important;
		height: auto !important;
		max-height: var(--bossy-stage-max-height, 520px) !important;
		min-height: 0 !important;
		aspect-ratio: 1 / 1 !important;
		overflow: hidden !important;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image > a,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image > a,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) .woocommerce-product-gallery__image,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) .woocommerce-product-gallery__image > a {
		width: 100% !important;
		height: 100% !important;
		display: block !important;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image > a > img,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image > a > img,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image > img,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-viewport .woocommerce-product-gallery__image > img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) .woocommerce-product-gallery__image img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) .woocommerce-product-gallery__image img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}

	/* Rail: positioned ABSOLUTELY within the gallery so it does NOT contribute to
	   grid track sizing. Without this, the rail's intrinsic content size (overflowing
	   thumbs capped at max-height) inflates the row, breaking the square aspect ratio.
	   The viewport drives the row size via `aspect-ratio: 1/1` — no JS needed. */
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-control-thumbs {
		position: absolute !important;
		top: 0 !important;
		bottom: 0 !important;
		width: var(--bossy-thumb-size, 76px) !important;
		max-width: var(--bossy-thumb-size, 76px) !important;
		height: auto !important;
		max-height: 100% !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		scroll-behavior: auto;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		overscroll-behavior: contain;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-control-thumbs {
		left: 0 !important;
		right: auto !important;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-control-thumbs {
		right: 0 !important;
		left: auto !important;
	}

	/* Webkit scrollbar suppression for the ledge rail */
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-control-thumbs::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-control-thumbs::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-control-thumbs::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-control-thumbs::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	/* Rail chevron pagination — minimal arrows that inherit the theme's text color.
	   No bar/pill background. Container is absolute over the rail's column position;
	   each chevron sits in the top and bottom thumb-row spans. */
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > .bossy-rail-nav,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > .bossy-rail-nav,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge > .bossy-rail-nav,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse > .bossy-rail-nav {
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--bossy-thumb-size, 76px);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		pointer-events: none;
		z-index: 5;
		padding: 0;
		margin: 0;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"] > .bossy-rail-nav,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge > .bossy-rail-nav {
		left: 0;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"] > .bossy-rail-nav,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse > .bossy-rail-nav {
		right: 0;
	}

	.bossy-rail-nav > .bossy-rail-nav__btn {
		pointer-events: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		padding: 0;
		margin: 4px 0;
		border: 0;
		border-radius: 999px;
		background: rgba(20, 32, 56, 0.78);
		color: #fff;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
		cursor: pointer;
		opacity: 0;
		transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
		font: 0/0 a;
	}

	.bossy-rail-nav > .bossy-rail-nav__btn::before {
		content: "";
		display: block;
		width: 11px;
		height: 11px;
		border-top: 3px solid currentColor;
		border-right: 3px solid currentColor;
		transform-origin: center;
	}

	.bossy-rail-nav > .bossy-rail-nav__btn--up::before {
		transform: rotate(-45deg);
	}

	.bossy-rail-nav > .bossy-rail-nav__btn--down::before {
		transform: rotate(135deg);
	}

	.bossy-rail-nav > .bossy-rail-nav__btn:hover,
	.bossy-rail-nav > .bossy-rail-nav__btn:focus-visible {
		opacity: 1 !important;
		outline: none;
		transform: scale(1.05);
		background: rgba(20, 32, 56, 0.95);
	}

	.bossy-rail-nav > .bossy-rail-nav__btn[disabled],
	.bossy-rail-nav > .bossy-rail-nav__btn[aria-disabled="true"] {
		opacity: 0 !important;
		pointer-events: none;
	}

	/* Show arrows when the rail has overflow (parent gets a marker class). */
	.woocommerce-product-gallery.bossy-gallery.bossy-rail-overflow > .bossy-rail-nav > .bossy-rail-nav__btn {
		opacity: 0.7;
	}

	.woocommerce-product-gallery.bossy-gallery.bossy-rail-overflow > .bossy-rail-nav > .bossy-rail-nav__btn[aria-disabled="true"] {
		opacity: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   Quilt — tiled collage (no separate hero/stage)
   -------------------------------------------------------------------------
   Every product image renders as an equal-sized square tile in a 3-column
   mosaic. The active tile (Flexslider's `flex-active` thumb) gets a colored
   ring + slight scale so users can see which image is "selected", but no
   stand-alone stage element is rendered. Click any tile to make it active.

   Implementation: hide `.flex-viewport` (the stage) and reuse the existing
   `ol.flex-control-thumbs` rail as the entire grid. Click handlers come
   for free from Flexslider's thumbnailControls.
   ------------------------------------------------------------------------- */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] {
	display: block !important;
	position: relative;
	gap: 0 !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	/* Make the gallery root the container-query reference so descendant
	   masonry grids (Flexslider rail, Flexy items, Block thumbnails) can
	   compute square cells via `100cqw / N`. The grid container itself
	   cannot be its own query reference. */
	container-type: inline-size;
}

/* Hide the Flexslider stage — we don't want a separate "main image" in quilt. */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-viewport,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .woocommerce-product-gallery__wrapper:not(.flex-viewport),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .woocommerce-product-gallery__wrapper:not(.flex-viewport) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	max-width: 1px !important;
	max-height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
}

/* Floating zoom trigger (top-right corner of whole grid). */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .woocommerce-product-gallery__trigger,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75em;
	right: 0.75em;
	z-index: 9;
}

/* The thumbnail rail becomes the full mosaic grid.
   Masonry: 6-column micro-grid with varied tile spans; each cell stays
   square via container-query units (rows match col width). */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	grid-auto-rows: calc((100cqw - 5 * var(--bossy-thumb-gap, 6px)) / 6) !important;
	grid-auto-flow: row dense !important;
	gap: var(--bossy-thumb-gap, 6px) !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 0 var(--bossy-main-gap, 12px) !important;
	list-style: none !important;
	box-sizing: border-box;
}

/* Default tile: 1×1 square. Pattern below only scales to larger squares. */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li {
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	overflow: hidden !important;
	border-radius: var(--bossy-gallery-radius, 0px);
	box-sizing: border-box;
	position: relative;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	grid-column: span 1 !important;
	grid-row: span 1 !important;
	aspect-ratio: 1 / 1 !important;
}

/* Square-only mosaic pattern (mix of 1x1, 2x2, 3x3 tiles). */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+1) {
	grid-column: span 3 !important;
	grid-row: span 3 !important;
}
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+11) {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li > img,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li > img,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li > img,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li > img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	opacity: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Hover: nudge tile and brighten. */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:hover,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:hover,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:hover,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

/* Active tile: bold ring + lift. Flexslider 2 sets `flex-active` on the active thumb LI. */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li.flex-active,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li.flex-active,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:has(img.flex-active),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:has(img.flex-active),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li.flex-active,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li.flex-active,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:has(img.flex-active),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:has(img.flex-active) {
	box-shadow: 0 0 0 3px var(--bossy-quilt-active-ring, #2271b1), 0 8px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px);
	z-index: 2;
}

/* Mobile: collapse 6-col masonry to 4 cols so tiles stay finger-friendly.
   Pattern still works (spans cap at 4) but visual variety is preserved. */
@media (max-width: 720px) {
	.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		grid-auto-rows: calc((100cqw - 3 * var(--bossy-thumb-gap, 6px)) / 4) !important;
	}
}

/* -------------------------------------------------------------------------
   QUILT — Blocksy Flexy adapter (masonry).
   Blocksy wraps WooCommerce's gallery in `.ct-product-gallery-container >
   .flexy-container > .flexy > .flexy-view > .flexy-items > .flexy-item …`
   instead of standard Flexslider markup, so the rules above (which target
   `ol.flex-control-thumbs`) are a no-op on Blocksy. We adapt the Flexy
   markup into the same 6-column masonry pattern.
   Also suppresses Flexy native arrows / pills / hint controls — they are
   meaningless when every image is shown at once.
   ------------------------------------------------------------------------- */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-pills,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-hints,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-controls,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt [class^="flexy-arrow"],
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt [class*=" flexy-arrow"],
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt [class^="flexy-prev"],
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt [class^="flexy-next"],
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .bossy-rail-nav,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-pills,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-hints,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-controls,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] [class^="flexy-arrow"],
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] [class*=" flexy-arrow"],
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] [class^="flexy-prev"],
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] [class^="flexy-next"],
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .bossy-filmstrip-nav__btn,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .bossy-rail-nav,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .bossy-stage-nav__btn,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .bossy-stage-nav__btn {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-view,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-view,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	grid-auto-rows: calc((100cqw - 5 * var(--bossy-thumb-gap, 6px)) / 6) !important;
	grid-auto-flow: row dense !important;
	gap: var(--bossy-thumb-gap, 6px) !important;
	width: 100% !important;
	height: auto !important;
	padding-bottom: var(--bossy-main-gap, 12px) !important;
	max-height: none !important;
	transform: none !important;
	transition: none !important;
	flex-wrap: wrap !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item {
	flex: initial !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	position: relative !important;
	overflow: hidden !important;
	border-radius: var(--bossy-gallery-radius, 0px);
	box-sizing: border-box;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	grid-column: span 2 !important;
	grid-row: span 2 !important;
}

/* Flexy square-only mosaic pattern (mix of 1x1, 2x2, 3x3 tiles). */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+1) {
	grid-column: span 3 !important;
	grid-row: span 3 !important;
}
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+11) {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item img,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	position: static !important;
	opacity: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:hover,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item.active,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item[aria-current="true"],
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item.active,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item[aria-current="true"] {
	box-shadow: 0 0 0 3px var(--bossy-quilt-active-ring, #2271b1), 0 8px 20px rgba(0, 0, 0, 0.2);
	transform: translateY(-2px) !important;
	z-index: 2;
}

@media (max-width: 720px) {
	.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		grid-auto-rows: calc((100cqw - 3 * var(--bossy-thumb-gap, 6px)) / 4) !important;
	}
}

/* Quilt utility mode: keep the collage layout but make every tile square. */
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	grid-auto-rows: calc((100cqw - 5 * var(--bossy-thumb-gap, 6px)) / 6) !important;
	grid-auto-flow: row dense !important;
	padding-bottom: var(--bossy-main-gap, 12px) !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li,
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item {
	grid-column: span 1 !important;
	grid-row: span 1 !important;
	aspect-ratio: 1 / 1 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(n),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(n),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(n),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(n),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(n),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(n) {
	grid-column: span 1 !important;
	grid-row: span 1 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+1),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+1) {
	grid-column: span 3 !important;
	grid-row: span 3 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+2),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+5),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+8),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt > .flex-control-thumbs > li:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > ol.flex-control-nav.flex-control-thumbs > li:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] > .flex-control-thumbs > li:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items > .flexy-item:nth-child(12n+11),
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items > .flexy-item:nth-child(12n+11) {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
}

.woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .flexy-items,
.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .flexy-items {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	grid-auto-rows: calc((100cqw - 5 * var(--bossy-thumb-gap, 6px)) / 6) !important;
	grid-auto-flow: row dense !important;
	padding-bottom: var(--bossy-main-gap, 12px) !important;
}

/* Quilt block-gallery path: keep the same square-only tile rhythm
   (mix of 1x1, 2x2, 3x3) used in classic/Flexy markup. */
.wc-block-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wc-block-product-gallery-thumbnails__scrollable,
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wp-block-woocommerce-product-gallery-thumbnails__scrollable,
.wc-block-product-gallery.bossy-gallery.bossy-gallery-quilt .wc-block-product-gallery-thumbnails__scrollable,
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .wp-block-woocommerce-product-gallery-thumbnails__scrollable {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	grid-auto-rows: calc((100cqw - 5 * var(--bossy-thumb-gap, 6px)) / 6) !important;
	grid-auto-flow: row dense !important;
	gap: var(--bossy-thumb-gap, 6px) !important;
	padding-bottom: var(--bossy-main-gap, 12px) !important;
}

.wc-block-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wc-block-product-gallery-thumbnails__scrollable > *,
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *,
.wc-block-product-gallery.bossy-gallery.bossy-gallery-quilt .wc-block-product-gallery-thumbnails__scrollable > *,
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .wp-block-woocommerce-product-gallery-thumbnails__scrollable > * {
	grid-column: span 1 !important;
	grid-row: span 1 !important;
	aspect-ratio: 1 / 1 !important;
	overflow: hidden !important;
	border-radius: var(--bossy-gallery-radius, 0px) !important;
}

.wc-block-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+1),
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+1),
.wc-block-product-gallery.bossy-gallery.bossy-gallery-quilt .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+1),
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+1) {
	grid-column: span 3 !important;
	grid-row: span 3 !important;
}

.wc-block-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+2),
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+2),
.wc-block-product-gallery.bossy-gallery.bossy-gallery-quilt .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+2),
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+2),
.wc-block-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+5),
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+5),
.wc-block-product-gallery.bossy-gallery.bossy-gallery-quilt .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+5),
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+5),
.wc-block-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+8),
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+8),
.wc-block-product-gallery.bossy-gallery.bossy-gallery-quilt .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+8),
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+8),
.wc-block-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+11),
.wp-block-woocommerce-product-gallery.bossy-gallery[data-bossy-layout="quilt"] .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+11),
.wc-block-product-gallery.bossy-gallery.bossy-gallery-quilt .wc-block-product-gallery-thumbnails__scrollable > *:nth-child(12n+11),
.wp-block-woocommerce-product-gallery.bossy-gallery.bossy-gallery-quilt .wp-block-woocommerce-product-gallery-thumbnails__scrollable > *:nth-child(12n+11) {
	grid-column: span 2 !important;
	grid-row: span 2 !important;
}

/* -------------------------------------------------------------------------
   Standardized thumbnail sizes — ALL layouts, Flexslider classic path.
   Without these rules WooCommerce's natural image dimensions (set by the
   registered thumbnail size ~100px) ignore --bossy-thumb-size entirely.
   One universal rule covers editorial, filmstrip, ledge, ledge-reverse, quilt.
   ------------------------------------------------------------------------- */

/* Sized by class so thumb rows render correct on first paint (before JS attaches the
   data-bossy-layout attribute). Without this, classic/filmstrip layouts blow out vertically
   because each thumb LI inherits the slide image's intrinsic size. */
.woocommerce-product-gallery.bossy-gallery > ol.flex-control-nav.flex-control-thumbs li,
.woocommerce-product-gallery.bossy-gallery > .flex-control-thumbs li {
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: var(--bossy-gallery-radius, 0px);
	box-sizing: border-box;
}

.woocommerce-product-gallery.bossy-gallery > ol.flex-control-nav.flex-control-thumbs li img,
.woocommerce-product-gallery.bossy-gallery > .flex-control-thumbs li img {
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	object-fit: cover !important;
	display: block;
	border-radius: var(--bossy-gallery-radius, 0px);
}

/* -------------------------------------------------------------------------
   Flex-viewport: lock width and clip. No width overrides on wrapper or slides
   — Flexslider owns those via inline JS. Width overrides break slide layout.
   ------------------------------------------------------------------------- */

body.single-product .woocommerce-product-gallery.bossy-gallery:not(:has(.flexy-container)) .flex-viewport,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:not(:has(.flexy-container)) .flex-viewport,
.woocommerce-product-gallery.bossy-gallery:not(:has(.flexy-container)) .flex-viewport,
.bossy-gallery-column .woocommerce-product-gallery:not(:has(.flexy-container)) .flex-viewport {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: hidden;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Native stage arrows are suppressed (Flexslider/Flexy). Bossy injects one
   consistent chevron UI (`.bossy-stage-nav__btn`) across all layouts.
   ------------------------------------------------------------------------- */
.woocommerce-product-gallery.bossy-gallery .ct-product-gallery-container .flexy-arrow-prev,
.woocommerce-product-gallery.bossy-gallery .ct-product-gallery-container .flexy-arrow-next,
.woocommerce-product-gallery.bossy-gallery .flexy-container .flexy-arrow-prev,
.woocommerce-product-gallery.bossy-gallery .flexy-container .flexy-arrow-next,
.woocommerce-product-gallery.bossy-gallery ul.flex-direction-nav,
.woocommerce-product-gallery.bossy-gallery ol.flex-direction-nav,
.woocommerce-product-gallery.bossy-gallery .flex-direction-nav a,
.woocommerce-product-gallery.bossy-gallery a.flex-prev,
.woocommerce-product-gallery.bossy-gallery a.flex-next {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Blocksy Flexy + Flexslider native stage arrows — hide wherever Bossy injects
   standardized `.bossy-stage-nav__btn` (all layouts except quilt/tiled). */
.woocommerce-product-gallery.bossy-gallery:not(.bossy-gallery-quilt):not([data-bossy-layout="quilt"]) .flexy-controls,
.woocommerce-product-gallery.bossy-gallery:not(.bossy-gallery-quilt):not([data-bossy-layout="quilt"]) [class^="flexy-arrow"],
.woocommerce-product-gallery.bossy-gallery:not(.bossy-gallery-quilt):not([data-bossy-layout="quilt"]) [class*=" flexy-arrow"],
.woocommerce-product-gallery.bossy-gallery:not(.bossy-gallery-quilt):not([data-bossy-layout="quilt"]) [class^="flexy-prev"],
.woocommerce-product-gallery.bossy-gallery:not(.bossy-gallery-quilt):not([data-bossy-layout="quilt"]) [class^="flexy-next"] {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.bossy-stage-nav-host,
.woocommerce-product-gallery.bossy-gallery > .flex-viewport.bossy-stage-nav-host {
	position: relative !important;
}

.bossy-stage-nav-host > .bossy-stage-nav__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: rgba(20, 32, 56, 0.76);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 24;
	opacity: 0;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}

.bossy-stage-nav-host > .bossy-stage-nav__btn::before {
	content: '';
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.bossy-stage-nav-host > .bossy-stage-nav__btn--prev {
	left: 14px;
}

.bossy-stage-nav-host > .bossy-stage-nav__btn--prev::before {
	transform: rotate(-135deg);
	margin-left: 2px;
}

.bossy-stage-nav-host > .bossy-stage-nav__btn--next {
	right: 14px;
}

.bossy-stage-nav-host > .bossy-stage-nav__btn--next::before {
	transform: rotate(45deg);
	margin-right: 2px;
}

.bossy-stage-nav-host.bossy-stage-nav-enabled > .bossy-stage-nav__btn {
	opacity: 0.88;
	pointer-events: auto;
}

.bossy-stage-nav-host.bossy-stage-nav-enabled:hover > .bossy-stage-nav__btn,
.bossy-stage-nav-host > .bossy-stage-nav__btn:focus-visible {
	opacity: 1;
	background: rgba(20, 32, 56, 0.95);
	transform: translateY(-50%) scale(1.04);
}

.bossy-stage-nav-host > .bossy-stage-nav__btn[aria-disabled="true"],
.bossy-stage-nav-host > .bossy-stage-nav__btn:disabled {
	opacity: 0 !important;
	pointer-events: none !important;
}

/* -------------------------------------------------------------------------
   Main gallery hover zoom — CSS scale replaces WooCommerce jQuery zoom.
   jQuery zoom (zoomImg, position:absolute 800×800) cannot be reliably clipped
   by overflow:hidden across Flexslider's GPU compositing layers in Chrome.
   CSS scale zoom on the actual <img> is clipped naturally by the slide's own
   overflow:hidden (set by Flexslider inline) and never escapes the container.
   The WooCommerce magnifier icon still opens the full PhotoSwipe lightbox.
   ------------------------------------------------------------------------- */

/* Hide jQuery zoom on the main gallery (kept on variation galleries) */
body.single-product .woocommerce-product-gallery.bossy-gallery .zoomImg {
	display: none !important;
}

/* Slide: keep Flexslider's own overflow:hidden; no width/transform overrides */
body.single-product .woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image,
body.single-product .bossy-gallery-column .woocommerce-product-gallery .woocommerce-product-gallery__image {
	overflow: hidden !important;
}

/* Image inside slide: scale on hover, contained by slide overflow:hidden */
body.single-product .woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image > a,
body.single-product .woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image > img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery .woocommerce-product-gallery__image > a,
body.single-product .bossy-gallery-column .woocommerce-product-gallery .woocommerce-product-gallery__image > img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}

body.single-product .woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image > a img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery .woocommerce-product-gallery__image > a img {
	transition: transform 0.4s ease;
	will-change: transform;
}

body.single-product .woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image:hover > a img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery .woocommerce-product-gallery__image:hover > a img {
	transform: scale(1.08);
}

/* Variation galleries: disable hover-zoom so rounding stays visually stable. */
body.single-product #bossy-attr-wrap .woocommerce-product-gallery__image > a img,
body.single-product #bossy-attr-wrap .woocommerce-product-gallery__image:hover > a img {
	transform: none !important;
	transition: none !important;
	will-change: auto !important;
}

/* Gallery container: clip Flexslider overflow only — never clip Flexy/carousel roots (kills pills + stage). */
body.single-product .woocommerce-product-gallery.bossy-gallery:not(:has(.flexy-container)),
body.single-product .bossy-gallery-column .woocommerce-product-gallery:not(:has(.flexy-container)) {
	overflow: hidden;
	max-width: 100%;
	box-sizing: border-box;
}

body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container),
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) {
	overflow: visible;
	max-width: 100%;
	box-sizing: border-box;
}

/* Blocksy Flexy: use Bossy thumb-size for side rail width so stage doesn't shrink unexpectedly. */
body.single-product article.product.thumbs-left .ct-product-gallery-container,
body.single-product div.product.thumbs-left .ct-product-gallery-container {
	--thumbs-width: var(--bossy-thumb-size, 76px) !important;
}

/* Blocksy Flexy: honor Bossy "Main image max height" slider on the main stage. */
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy {
	max-height: var(--bossy-stage-max-height, 520px) !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy .ct-media-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy .ct-media-container {
	max-height: var(--bossy-stage-max-height, 520px) !important;
	height: auto !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy .flexy-view,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy .flexy-view {
	max-height: var(--bossy-stage-max-height, 520px) !important;
	height: auto !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy img {
	max-height: var(--bossy-stage-max-height, 520px) !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
}

/* Blocksy Flexy right-rail mode for Bossy "Side Right" (ledge-reverse). */
@media (min-width: 690px) {
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy {
		margin-inline-start: 0 !important;
		margin-inline-end: calc(var(--thumbs-width, 100px) + var(--thumbs-spacing, 15px)) !important;
	}

	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills {
		inset-inline-start: auto !important;
		inset-inline-end: 0 !important;
	}
}

/* Magnifier trigger: hide the floating icon — click-to-lightbox still works
   by clicking the image directly (WooCommerce PhotoSwipe click handler). */
body.single-product .woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__trigger {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Small screens: stack rails (classic Flexslider: collapse ledge grid)
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:has(> .flex-viewport):not(:has(.flexy-container)),
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:has(> .flex-viewport):not(:has(.flexy-container)) {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto auto !important;
	}

	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:has(> .flex-viewport):not(:has(.flexy-container)) > .flex-viewport,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:has(> .flex-viewport):not(:has(.flexy-container)) > .flex-viewport {
		grid-column: 1 !important;
		grid-row: 1 !important;
		width: 100% !important;
	}

	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:has(> .flex-viewport):not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:has(> .flex-viewport):not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:has(> .flex-viewport):not(:has(.flexy-container)) > .flex-control-thumbs,
	.woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:has(> .flex-viewport):not(:has(.flexy-container)) > .flex-control-thumbs {
		grid-column: 1 !important;
		grid-row: 2 !important;
		max-width: 100% !important;
		width: 100% !important;
		max-height: none !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}
}

/* Mobile collapse for classic ledge layouts too (Kadence/etc.). */
@media (max-width: 600px) {
	.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
	.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) {
		display: block !important;
	}

	.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > ol.flex-control-thumbs,
	.woocommerce-product-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-control-thumbs,
	.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > ol.flex-control-thumbs,
	.woocommerce-product-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-control-thumbs {
		max-width: 100% !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: var(--bossy-thumb-gap, 6px) !important;
		position: static !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
		margin-top: 10px !important;
	}
}

/* -------------------------------------------------------------------------
   Main gallery suppressed while Bossy variation galleries are active
   ------------------------------------------------------------------------- */

.bossy-gallery-column > .woocommerce-product-gallery.bossy-main-gallery--bossy-suppressed,
.woocommerce-product-gallery.bossy-main-gallery--bossy-suppressed {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	pointer-events: none !important;
}

/* Blocksy Flexy: `display:none` on the gallery root can leave the main stage permanently blank after
   the suppression class is removed (Flexy does not fully re-init). Visually hide without `display:none`. */
.bossy-gallery-column > .woocommerce-product-gallery.bossy-main-gallery--bossy-suppressed:has(.flexy-container),
.woocommerce-product-gallery.bossy-main-gallery--bossy-suppressed:has(.flexy-container) {
	display: block !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	inset: auto !important;
	left: -9999px !important;
	top: 0 !important;
}

/* -------------------------------------------------------------------------
   Stable gallery + summary shell (variable products with Bossy variation slide data)
   PHP adds body.bossy-variable-product-shell when that shell is needed; bossy-variation-gallery-product
   when slide data exists. Explicit start alignment; logical props for RTL.
   ------------------------------------------------------------------------- */

@media (min-width: 769px) {
	body.single-product.bossy-variable-product-shell .product-entry-wrapper,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper {
		display: grid !important;
		grid-template-columns: minmax(0, var(--product-gallery-width, 50%)) minmax(0, 1fr);
		column-gap: clamp(24px, 3vw, 48px);
		row-gap: 0;
		align-items: start;
		align-content: start;
		justify-items: start;
		justify-content: start;
		width: 100%;
		box-sizing: border-box;
	}

	/*
	 * Some themes output the gallery inside .entry-summary until Bossy JS runs ensureGalleryLayout().
	 * Without this, selectors like `.product-entry-wrapper > .bossy-gallery-column` miss on first paint.
	 */
	body.single-product.bossy-variable-product-shell .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary {
		display: grid !important;
		grid-template-columns: minmax(0, var(--product-gallery-width, 50%)) minmax(0, 1fr);
		column-gap: clamp(24px, 3vw, 48px);
		align-items: start;
		justify-items: start;
		text-align: start;
		width: 100%;
		box-sizing: border-box;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary > .woocommerce-product-gallery,
	body.single-product.bossy-variable-product-shell .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary > #bossy-attr-wrap.bossy-variation-galleries,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary > .woocommerce-product-gallery,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary > #bossy-attr-wrap.bossy-variation-galleries {
		grid-column: 1;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary > *:not(.woocommerce-product-gallery):not(#bossy-attr-wrap.bossy-variation-galleries),
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper:not(:has(> .bossy-gallery-column)) > .entry-summary > *:not(.woocommerce-product-gallery):not(#bossy-attr-wrap.bossy-variation-galleries) {
		grid-column: 2;
	}

	/* Track 1 — gallery stack: anchor to inline-start */
	body.single-product.bossy-variable-product-shell .product-entry-wrapper > .bossy-gallery-column,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper > .bossy-gallery-column {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		min-width: 0;
		width: 100%;
		max-width: 100%;
		margin: 0 !important;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 1.25em;
		text-align: start;
	}

	/* Track 2 — summary: fill column 2, start-aligned (reading order). */
	body.single-product.bossy-variable-product-shell .product-entry-wrapper > .entry-summary,
	body.single-product.bossy-variable-product-shell .product-entry-wrapper > .summary.entry-summary,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper > .entry-summary,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper > .summary.entry-summary {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0;
		max-width: 100% !important;
		margin-inline: 0 !important;
		margin-block-start: 0 !important;
		margin-block-end: 0 !important;
		float: none !important;
		position: static !important;
		text-align: start;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper .entry-summary.entry-summary-items,
	body.single-product.bossy-variable-product-shell .product-entry-wrapper .summary.entry-summary.entry-summary-items,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper .entry-summary.entry-summary-items,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper .summary.entry-summary.entry-summary-items {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		align-content: stretch;
		min-height: 0;
		width: 100%;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper > .entry-summary form.cart,
	body.single-product.bossy-variable-product-shell .product-entry-wrapper > .summary.entry-summary form.cart,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper > .entry-summary form.cart,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper > .summary.entry-summary form.cart {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper form.variations_form table.variations,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper form.variations_form table.variations {
		width: 100%;
		max-width: 100%;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper select,
	body.single-product.bossy-variable-product-shell .product-entry-wrapper input[type="number"],
	body.single-product.bossy-variable-product-shell .product-entry-wrapper textarea,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper select,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper input[type="number"],
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper textarea {
		text-align: start;
	}

	/* WooCommerce core row for qty + button — do not override theme flex alignment (Astra etc.). */

	/*
	 * Standard WooCommerce: div.images + div.summary as siblings under div.product (no outer .product-entry-wrapper).
	 */
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)),
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) {
		display: grid !important;
		grid-template-columns: minmax(0, var(--product-gallery-width, 50%)) minmax(0, 1fr);
		column-gap: clamp(24px, 3vw, 48px);
		align-items: start;
		justify-items: start;
		justify-content: start;
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}

	/* Ledge/ledge-reverse galleries opt out of width:100% so the gallery container can
	   shrink to `width: max-content` (governed by the settings token), giving the
	   stage-size slider visible effect even on themes with wide product columns.
	   Both `[data-bossy-layout]` (added by JS) AND `.bossy-gallery-ledge*` (added server-side)
	   are excluded so first paint isn't forced to 100% before JS runs. */
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > div.images:not([data-bossy-layout="ledge"]):not([data-bossy-layout="ledge-reverse"]):not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse),
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > div.images:not([data-bossy-layout="ledge"]):not([data-bossy-layout="ledge-reverse"]):not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse) {
		grid-column: 1;
		justify-self: start;
		align-self: start;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		min-width: 0;
		text-align: start;
	}

	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > div.images[data-bossy-layout="ledge"],
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > div.images[data-bossy-layout="ledge-reverse"],
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > div.images[data-bossy-layout="ledge"],
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > div.images[data-bossy-layout="ledge-reverse"],
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > div.images.bossy-gallery-ledge,
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > div.images.bossy-gallery-ledge-reverse,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > div.images.bossy-gallery-ledge,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > div.images.bossy-gallery-ledge-reverse {
		grid-column: 1;
		justify-self: start;
		align-self: start;
		float: none !important;
		max-width: 100% !important;
		margin: 0 !important;
		min-width: 0;
		text-align: start;
	}

	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > div.summary,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > div.summary {
		grid-column: 2;
		justify-self: start;
		align-self: start;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		margin-inline: 0 !important;
		margin-block: 0 !important;
		text-align: start;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}


	/*
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > div.woocommerce-tabs,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .woocommerce-tabs,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > div.woocommerce-tabs {
		grid-column: 1 / -1;
		text-align: start;
	}
}

/* -------------------------------------------------------------------------
   Universal corner rounding (main + variation galleries)
   Uses --bossy-gallery-radius so themes can’t “half apply” rounding.
   ------------------------------------------------------------------------- */

.woocommerce-product-gallery.bossy-gallery,
.bossy-attr-gallery,
#bossy-attr-wrap .bossy-attr-gallery {
	--bossy-gallery-radius-local: var(--bossy-gallery-radius, 0px);
}

/* Main stage (applies to classic + ledge layouts) */
.woocommerce-product-gallery.bossy-gallery .flex-viewport,
.woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image > a {
	border-radius: var(--bossy-gallery-radius-local) !important;
	overflow: hidden;
}

.woocommerce-product-gallery.bossy-gallery .woocommerce-product-gallery__image > a > img,
.woocommerce-product-gallery.bossy-gallery img.wp-post-image {
	border-radius: var(--bossy-gallery-radius-local) !important;
}

/* Main gallery thumbs */
.woocommerce-product-gallery.bossy-gallery .flex-control-thumbs li,
.woocommerce-product-gallery.bossy-gallery ol.flex-control-nav.flex-control-thumbs li,
.woocommerce-product-gallery.bossy-gallery .flex-control-thumbs li img,
.woocommerce-product-gallery.bossy-gallery ol.flex-control-nav.flex-control-thumbs li img {
	border-radius: var(--bossy-gallery-radius-local) !important;
	overflow: hidden;
}

/* Variation gallery thumbs — match main gallery sizing token */
#bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs li,
#bossy-attr-wrap .bossy-attr-gallery .flex-control-thumbs li {
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	overflow: hidden;
	box-sizing: border-box;
}

#bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs li img,
#bossy-attr-wrap .bossy-attr-gallery .flex-control-thumbs li img {
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	object-fit: cover !important;
	display: block;
}

/* Variation gallery stage — do not use a bare `.bossy-attr-gallery img` selector; it hits manual thumb imgs and fights object-fit. */
#bossy-attr-wrap .bossy-attr-gallery .flex-viewport,
#bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image,
#bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a,
#bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a > img {
	border-radius: var(--bossy-gallery-radius-local) !important;
	overflow: hidden;
}

/* Variation "featured" image (Woo swaps this outside Bossy attr galleries on some themes/plugins). */
html body.single-product form.variations_form .single_variation_wrap img.wp-post-image,
html body.single-product form.variations_form .woocommerce-variation img.wp-post-image,
html body.single-product form.variations_form .woocommerce-variation img.attachment-woocommerce_single,
html body.single-product form.variations_form .woocommerce-variation img.attachment-woocommerce_thumbnail,
html body.single-product form.variations_form .woocommerce-variation img,
html body.single-product form.variations_form img.wp-post-image {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
}

@media (max-width: 768px) {
	body.single-product.bossy-variable-product-shell .product-entry-wrapper,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 1.5rem;
		width: 100%;
		box-sizing: border-box;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper > .entry-summary,
	body.single-product.bossy-variable-product-shell .product-entry-wrapper > .summary.entry-summary,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper > .entry-summary,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper > .summary.entry-summary {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: 0 !important;
		text-align: start;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper .entry-summary.entry-summary-items,
	body.single-product.bossy-variable-product-shell .product-entry-wrapper .summary.entry-summary.entry-summary-items,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper .entry-summary.entry-summary-items,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper .summary.entry-summary.entry-summary-items {
		align-items: stretch;
	}

	body.single-product.bossy-variable-product-shell .product-entry-wrapper form.cart,
	body.single-product.bossy-variable-product-shell div.product .product-entry-wrapper form.cart {
		align-items: stretch;
	}
}

/* -------------------------------------------------------------------------
   Per-attribute variation galleries (.bossy-attr-gallery)
   ------------------------------------------------------------------------- */

/* Center the variation gallery wrap horizontally inside its column (classic .images or
   block sidebar). The bossy_var_gallery_offset setting still nudges content to the right
   via padding-inline-start so the wrap stays inside its column bounds. */
body.single-product #bossy-attr-wrap {
	padding-inline-start: var(--bossy-var-gallery-offset, 0px);
	margin-inline: auto;
	box-sizing: border-box;
	text-align: center;
}

/* Center each stacked .bossy-attr-gallery row within the wrap regardless of viewport size. */
body.single-product #bossy-attr-wrap .bossy-attr-gallery {
	margin-inline: auto !important;
}

body.single-product .bossy-gallery-column > .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100%;
}

#bossy-attr-wrap.bossy-variation-galleries {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25em;
	width: 100%;
	box-sizing: border-box;
}

/* Classic Woo / Storefront: keep gallery + Bossy stack inside the floated .images column. */
body.single-product.woocommerce div.product div.images > .bossy-gallery-column,
body.woocommerce-page.single-product div.product div.images > .bossy-gallery-column {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	box-sizing: border-box;
	align-self: flex-start !important;
}

/* Classic themes: #bossy-attr-wrap sits in the .images column beside the main gallery. */
body.single-product.woocommerce div.product div.images > #bossy-attr-wrap.bossy-variation-galleries {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: both;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25em;
	box-sizing: border-box;
}

body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery.bossy-variation-gallery {
	display: block !important;
	float: none !important;
	width: 100% !important;
	clear: both;
	margin-top: 0;
	box-sizing: border-box;
}

/* Contain the Flexslider viewport so inline width never escapes the column. */
body.single-product #bossy-attr-wrap .bossy-attr-gallery .flex-viewport {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: hidden !important;
	box-sizing: border-box;
}

body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__wrapper {
	width: 100% !important;
}

body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image {
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}

body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a {
	display: block;
	width: 100%;
	overflow: hidden !important;
}

/* Square-ish image: fills the tile width, capped by max-height. */
body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-height: var(--bossy-var-image-height, 320px) !important;
	object-fit: contain !important;
}

/* Desktop: make rounding visually obvious by ensuring the variation featured image fills the stage. */
@media (min-width: 601px) {
	/* Constrain the *gallery* width (not Flexslider viewport) so thumbs don't blank out on nav. */
	body.single-product #bossy-attr-wrap .bossy-attr-gallery {
		width: min(100%, var(--bossy-var-image-height, 320px)) !important;
		max-width: var(--bossy-var-image-height, 320px) !important;
		margin-inline: auto !important;
	}

	body.single-product #bossy-attr-wrap .bossy-attr-gallery .flex-viewport {
		/* Give the stage a predictable box to clip against */
		aspect-ratio: 1 / 1;
		max-height: var(--bossy-var-image-height, 320px) !important;
		height: auto !important;
	}

	/* Center the thumb strip under the square stage (not the full column). */
	body.single-product #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: 0 auto !important;
		justify-content: center !important;
	}

	body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image,
	body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a {
		height: 100% !important;
	}

	body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a {
		display: flex;
		align-items: stretch;
		justify-content: stretch;
	}

	body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a > img {
		flex: 1 1 auto;
		width: 100% !important;
		height: 100% !important;
		max-height: none !important;
		object-fit: cover !important;
	}

	/* Flexslider sometimes blanks slides when inner layers are clip/masked.
	   Keep rounding on the gallery root, but avoid GPU clipping on moving parts. */
	html body.single-product #bossy-attr-wrap .bossy-attr-gallery .flex-viewport,
	html body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__wrapper,
	html body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image {
		-webkit-clip-path: none !important;
		clip-path: none !important;
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
}

/* Zoom makes no sense on compact variation selector galleries — hide the overlay. */
body.single-product #bossy-attr-wrap .bossy-attr-gallery .zoomImg {
	display: none !important;
}

body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs {
	/* display is intentionally omitted here — per-gallery show/hide is controlled by
	   varThumbs1 / varThumbs2 via JS-injected CSS with !important (see gallery-frontend.js). */
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: center;
	overflow-x: auto;
	overflow-y: hidden;
	gap: var(--bossy-thumb-gap, 8px) !important;
	column-gap: var(--bossy-thumb-gap, 8px) !important;
	row-gap: var(--bossy-thumb-gap, 8px) !important;
	margin-top: var(--bossy-main-gap, 12px) !important;
	padding: 0 !important;
	scrollbar-width: thin;
}

body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs li {
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	margin: 0 !important;
	/* Woo default + themes add li padding — shrinks inner img (e.g. 76 − 32 = 44px) → “black” side gutters */
	padding: 0 !important;
	border: none !important;
	box-sizing: border-box !important;
	/* Astra (and similar themes) add counter numbers to ol > li — suppress them */
	list-style: none !important;
	counter-increment: none !important;
}

body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs li::before,
body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs li::after {
	content: none !important;
	display: none !important;
}

body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs li img {
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: var(--bossy-gallery-radius, 0px);
	vertical-align: top;
}

/*
 * Thumb gutters (often read as black bars): runtime logs showed padding 0 but li/img client ~44px while
 * --bossy-thumb-size is larger — themes/common Woo rules set li { flex:1; max-width:33.33% } so each li
 * becomes one-third of a *narrow* ol. Bossy thumbs are fixed pixels; never percentage-share the row.
 */
/*
 * Never set display here — Bossy JS injects display:flex|none per row from varThumbs1/varThumbs2.
 * A blanket display:flex was overriding display:none and broke “hide variation thumbnails”.
 */
body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs.bossy-manual-thumbs {
	flex-wrap: nowrap !important;
	width: max-content !important;
	max-width: none !important;
	min-width: 100% !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs.bossy-manual-thumbs li {
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
	border: none !important;
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	flex-basis: var(--bossy-thumb-size, 76px) !important;
	min-width: var(--bossy-thumb-size, 76px) !important;
	max-width: none !important;
	width: var(--bossy-thumb-size, 76px) !important;
	box-sizing: border-box !important;
}

body.single-product.woocommerce #bossy-attr-wrap .bossy-attr-gallery ol.flex-control-nav.flex-control-thumbs.bossy-manual-thumbs li > img {
	object-fit: cover !important;
	object-position: center center !important;
	max-width: none !important;
	max-height: none !important;
	box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------
   Bossy JS replaces div.images with div.bossy-gallery-column — assign it to
   grid column 1 so the grid doesn't auto-place it alongside the summary.
   ------------------------------------------------------------------------- */

@media (min-width: 769px) {
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .bossy-gallery-column,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .bossy-gallery-column {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		margin: 0 !important;
		box-sizing: border-box;
	}

	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .entry-summary,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .entry-summary {
		grid-column: 2;
		grid-row: 1;
	}

	/* When Bossy rows are inserted directly under div.product (classic stacks, incl. Storefront),
	   anchor them to the top-left slot so they don't drop below the summary column.
	   Ledge layouts are excluded so their gallery can shrink to settings-token width. */
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > #bossy-attr-wrap.bossy-variation-galleries,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > #bossy-attr-wrap.bossy-variation-galleries,
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery:not([data-bossy-layout="ledge"]):not([data-bossy-layout="ledge-reverse"]):not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse),
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery:not([data-bossy-layout="ledge"]):not([data-bossy-layout="ledge-reverse"]):not(.bossy-gallery-ledge):not(.bossy-gallery-ledge-reverse) {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery[data-bossy-layout="ledge"],
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"],
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery[data-bossy-layout="ledge"],
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"],
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery.bossy-gallery-ledge,
	body.single-product.bossy-variable-product-shell div.product:not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery.bossy-gallery-ledge-reverse,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery.bossy-gallery-ledge,
	body.single-product.bossy-variable-product-shell div.product:has(form.variations_form):not(:has(.product-entry-wrapper)) > .woocommerce-product-gallery.bossy-gallery-ledge-reverse {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		max-width: 100% !important;
		margin: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   Cross-theme: force gallery left + summary top regardless of theme defaults.
   Overrides margin:0 auto from WooCommerce core and common themes (Storefront,
   Flatsome, Astra, etc.) that center the gallery inside its column.
   ------------------------------------------------------------------------- */

/* Gallery column: kill any auto-centering margin on the gallery itself */
body.single-product div.product div.images .woocommerce-product-gallery,
body.single-product div.product div.images > .woocommerce-product-gallery {
	margin-inline: 0 !important;
	margin-block-start: 0 !important;
	float: none !important;
}

/* Summary column: always start at the top of its track */
body.single-product div.product div.summary,
body.single-product div.product .entry-summary {
	align-self: flex-start !important;
	vertical-align: top;
	margin-block-start: 0 !important;
}

/* When Bossy grid is active (variable products): reinforce left + top anchoring */
@media (min-width: 769px) {
	body.single-product.bossy-variable-product-shell div.product div.images .woocommerce-product-gallery {
		margin-inline: 0 !important;
		margin-block-start: 0 !important;
		align-self: flex-start !important;
	}

	body.single-product.bossy-variable-product-shell div.product div.summary,
	body.single-product.bossy-variable-product-shell div.product .entry-summary {
		align-self: flex-start !important;
		margin-block-start: 0 !important;
	}
}

/* -------------------------------------------------------------------------
   Corner rounding — final hammer (variation featured image inside Bossy attr gallery)
   Some themes reset img border-radius with !important; keep this last + specific.
   ------------------------------------------------------------------------- */

html body.single-product #bossy-attr-wrap .bossy-attr-gallery .flex-viewport,
html body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image,
html body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
	-webkit-clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
	clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
}

html body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a > img,
html body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__image > a > img.wp-image-gallery,
html body.single-product #bossy-attr-wrap .bossy-attr-gallery .woocommerce-product-gallery__wrapper img.wp-image-gallery {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
}

/* If a theme still “flattens” rounding, force clipping at the gallery root. */
html body.single-product #bossy-attr-wrap .bossy-attr-gallery {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
	/* clip-path survives some img-only overrides */
	clip-path: inset(0 round var(--bossy-gallery-radius, 0px));
}

/* Extra-safe: some stacks render attr galleries outside #bossy-attr-wrap or without flex-viewport. */
html body.single-product .bossy-attr-gallery,
html body.single-product .bossy-variation-gallery.bossy-attr-gallery,
html body.single-product .bossy-variation-gallery.woocommerce-product-gallery {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
	clip-path: inset(0 round var(--bossy-gallery-radius, 0px));
}

html body.single-product .bossy-attr-gallery .woocommerce-product-gallery__wrapper,
html body.single-product .bossy-attr-gallery .woocommerce-product-gallery__image,
html body.single-product .bossy-attr-gallery .woocommerce-product-gallery__image > a {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
	clip-path: inset(0 round var(--bossy-gallery-radius, 0px));
}

html body.single-product .bossy-attr-gallery .woocommerce-product-gallery__image > a > img,
html body.single-product .bossy-attr-gallery img {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	/* mask as last-resort clip on the img itself */
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
}

/* Variation featured galleries that use `.variation-gallery` (no `.bossy-attr-gallery` class). */
html body.single-product #bossy-attr-wrap .variation-gallery.woocommerce-product-gallery,
html body.single-product #bossy-attr-wrap .variation-gallery.woocommerce-product-gallery .flex-viewport,
html body.single-product #bossy-attr-wrap .variation-gallery.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
html body.single-product #bossy-attr-wrap .variation-gallery.woocommerce-product-gallery .woocommerce-product-gallery__image,
html body.single-product #bossy-attr-wrap .variation-gallery.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
	-webkit-clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
	clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
}

html body.single-product #bossy-attr-wrap .variation-gallery.woocommerce-product-gallery img.wp-post-image,
html body.single-product #bossy-attr-wrap .variation-gallery.woocommerce-product-gallery .woocommerce-product-gallery__image > a > img {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	-webkit-mask-image: -webkit-radial-gradient(white, black);
	mask-image: radial-gradient(white, black);
}

/* Desktop-only: Flexslider uses GPU transforms; force reliable clipping in Chrome. */
@media (min-width: 601px) {
	/* If something sits "above" the image (elementFromPoint hits #bossy-attr-wrap),
	   clip at the wrap as a final fallback so corners can't stay square. */
	html body.single-product #bossy-attr-wrap.bossy-variation-galleries {
		border-radius: var(--bossy-gallery-radius, 0px) !important;
		overflow: hidden !important;
		-webkit-clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
		clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
		-webkit-mask-image: -webkit-radial-gradient(white, black) !important;
		mask-image: radial-gradient(white, black) !important;
		/* Preserve configurable variation left offset while keeping vertical padding reset. */
		padding-left: var(--bossy-var-gallery-offset, 0px) !important;
		padding-right: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Ensure the gallery itself is the box at the corners */
	html body.single-product #bossy-attr-wrap.bossy-variation-galleries > .bossy-attr-gallery {
		margin: 0 !important;
	}

	html body.single-product #bossy-attr-wrap .woocommerce-product-gallery .flex-viewport,
	html body.single-product #bossy-attr-wrap .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
	html body.single-product #bossy-attr-wrap .woocommerce-product-gallery .woocommerce-product-gallery__image {
		border-radius: var(--bossy-gallery-radius, 0px) !important;
		overflow: hidden !important;
		-webkit-clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
		clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
		/* Chrome fix: make clipping apply to transformed children */
		-webkit-mask-image: -webkit-radial-gradient(white, black) !important;
		mask-image: radial-gradient(white, black) !important;
		transform: translateZ(0);
	}

	/* Absolute maximum specificity for the Flexslider viewport (the usual desktop offender) */
	html body.single-product #bossy-attr-wrap.bossy-variation-galleries .bossy-attr-gallery .flex-viewport {
		border-radius: var(--bossy-gallery-radius, 0px) !important;
		overflow: hidden !important;
		-webkit-clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
		clip-path: inset(0 round var(--bossy-gallery-radius, 0px)) !important;
		-webkit-mask-image: -webkit-radial-gradient(white, black) !important;
		mask-image: radial-gradient(white, black) !important;
	}
}

/* =========================================================================
   Theme-specific repairs — added after the cross-theme zero-CLS pass.
   Scoped narrowly so they only patch the offending theme/layout pair.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Kadence ledge: thumb rail bottom edge spill
   Root cause: theme padding on `.woocommerce-product-gallery` makes its
   content box taller than the natural square viewport, so the absolutely-
   positioned rail (anchored to the parent's content edges via top:0/bottom:0)
   extends past the visible viewport bottom by `padding-bottom`.
   Fix: zero theme padding/margin on the gallery container in ledge mode so
   the rail's anchors land flush with the viewport. Do NOT lock
   grid-template-rows — the row must auto-size to the square viewport
   (column-width × column-width via aspect-ratio:1/1), otherwise users with
   a stage cap larger than their column width get an oversized empty row
   below the image. Belt-and-suspenders clip-path on the rail catches any
   subpixel sliver from `padding/border` rounding.
   Scoped to viewports >= 601px to keep the small-screen stack collapse intact.
   ------------------------------------------------------------------------- */
@media (min-width: 601px) {
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)),
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) {
		padding: 0 !important;
		margin-block: 0 !important;
	}

	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"]:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"]:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:not(:has(.flexy-container)) > .flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > ol.flex-control-nav.flex-control-thumbs,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:not(:has(.flexy-container)) > .flex-control-thumbs {
		bottom: 0 !important;
		top: 0 !important;
		height: auto !important;
		max-height: 100% !important;
		box-sizing: border-box !important;
		padding: 0 !important;
		clip-path: inset(0) !important;
		-webkit-clip-path: inset(0) !important;
	}
}

/* -------------------------------------------------------------------------
   Blocksy Flexy: corner rounding (main gallery, all layouts)
   Existing rounding rules target Flexslider markup (`.flex-viewport`,
   `.woocommerce-product-gallery__image`). Blocksy renders Flexy instead
   (`.flexy-container > .flexy > .flexy-view`), so rounding never applied.
   Round the Flexy stage + image + pill thumbs whenever the gallery is a
   Bossy-managed Blocksy gallery.
   ------------------------------------------------------------------------- */
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy,
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy-view,
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .ct-media-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy-view,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .ct-media-container {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy-view img,
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy-view picture,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy-view img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy-view picture {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy-pills li,
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container) .flexy-pills li img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy-pills li,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) .flexy-pills li img {
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
}

/* -------------------------------------------------------------------------
   Blocksy Flexy: bind Blocksy theme variables to Bossy settings tokens
   Blocksy uses `--thumbs-spacing` for the gap between the main image and the
   pill rail, and `--thumbs-width` for the rail thumbnail size. Bind both to
   Bossy's `--bossy-main-gap` / `--bossy-thumb-size` so settings-panel changes
   propagate into Blocksy's native Flexy layout without per-theme overrides.
   Scoped to Blocksy gallery ancestors so non-Blocksy themes are untouched.
   ------------------------------------------------------------------------- */
body.single-product article.product:has(.flexy-container),
body.single-product div.product:has(.flexy-container),
body.single-product .ct-product-gallery-container,
body.single-product .woocommerce-product-gallery.bossy-gallery:has(.flexy-container),
body.single-product .bossy-gallery-column .woocommerce-product-gallery:has(.flexy-container) {
	--thumbs-spacing: var(--bossy-main-gap, 12px) !important;
	--thumbs-width: var(--bossy-thumb-size, 76px) !important;
}

/* -------------------------------------------------------------------------
   Blocksy Flexy: ledge thumbs spill repair
   Verified DOM (live probe testsitepro): `.flexy-pills > ol > li[]`. Blocksy's
   default flex layout on the inner `<ol>` lets thumb LIs flow at their natural
   intrinsic content height, so for many thumbs the rail extends well past the
   square `.flexy-view`. Cap the pills (parent) at `--bossy-stage-max-height`
   with vertical scroll, and force the inner `<ol>` into a clean nowrap flex
   column so items don't multi-column wrap inside the rail.
   ------------------------------------------------------------------------- */
@media (min-width: 690px) {
	/* Square the main stage on ledge — products with portrait images
	   (inline `aspect-ratio: 3/4` on the <img>) otherwise force `.flexy` to a
	   tall portrait box, leaving the rail (capped at `--bossy-stage-max-height`)
	   visibly taller than the stage. */
	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy {
		aspect-ratio: 1 / 1 !important;
		height: auto !important;
		max-height: var(--bossy-stage-max-height, 520px) !important;
		overflow: hidden !important;
	}

	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy .flexy-view,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .flexy-view,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy .flexy-view,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .flexy-view,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy .flexy-view,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy .flexy-view {
		aspect-ratio: 1 / 1 !important;
		height: auto !important;
		max-height: 100% !important;
		overflow: hidden !important;
	}

	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy .ct-media-container,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .ct-media-container,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy .ct-media-container,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .ct-media-container,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy .ct-media-container,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy .ct-media-container {
		aspect-ratio: 1 / 1 !important;
		width: 100% !important;
		height: 100% !important;
		max-height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy .ct-media-container img,
	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy .flexy-items img,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .ct-media-container img,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .flexy-items img,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy .ct-media-container img,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy .flexy-items img,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .ct-media-container img,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy .flexy-items img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy .ct-media-container img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy .flexy-items img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy .ct-media-container img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy .flexy-items img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		aspect-ratio: auto !important;
		object-fit: contain !important;
		object-position: center center !important;
	}

	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy-pills,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy-pills {
		/* Critical: `min-height: 0` prevents the rail's intrinsic content
		   (15 thumbs × ~82px = ~1230px) from pushing the parent flex/grid
		   container's cross-axis taller than the square `.flexy` stage. With
		   `min-height: 0` the container row sizes to the stage (square via
		   `aspect-ratio: 1/1`), and the rail stretches via `align-self: stretch`
		   to fill that row exactly. `max-height` provides a safety ceiling. */
		min-height: 0 !important;
		max-height: var(--bossy-stage-max-height, 520px) !important;
		align-self: stretch !important;
		overflow-y: auto !important;
		overflow-x: hidden !important;
		scrollbar-width: none !important;
		-ms-overflow-style: none !important;
		scroll-behavior: auto !important;
		overscroll-behavior: contain;
		box-sizing: border-box !important;
		padding-block: 0 !important;
		align-items: flex-start !important;
		width: var(--bossy-thumb-size, 76px) !important;
		max-width: var(--bossy-thumb-size, 76px) !important;
		clip-path: inset(0) !important;
		-webkit-clip-path: inset(0) !important;
	}

	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills > ol,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills > ol,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills > ol,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills > ol,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy-pills > ol,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy-pills > ol {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: var(--bossy-thumb-gap, 6px) !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		height: max-content !important;
		min-height: max-content !important;
		flex-shrink: 0 !important;
		align-items: stretch !important;
		box-sizing: border-box !important;
	}

	/* Square Flexy pill cells on ledge rails — without explicit size + flex-shrink:0,
	   Blocksy distributes the visible rail height across all LIs and thumbs collapse
	   into thin clipped strips. Mirrors the filmstrip Flexy pill sizing path. */
	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills [data-thumbnail],
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills [data-thumbnail],
	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills li,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills li,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills [data-thumbnail],
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills [data-thumbnail],
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills li,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills li,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy-pills [data-thumbnail],
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy-pills [data-thumbnail],
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy-pills li,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy-pills li {
		flex: 0 0 var(--bossy-thumb-size, 76px) !important;
		flex-shrink: 0 !important;
		width: var(--bossy-thumb-size, 76px) !important;
		height: var(--bossy-thumb-size, 76px) !important;
		min-width: var(--bossy-thumb-size, 76px) !important;
		min-height: var(--bossy-thumb-size, 76px) !important;
		max-width: var(--bossy-thumb-size, 76px) !important;
		max-height: var(--bossy-thumb-size, 76px) !important;
		aspect-ratio: 1 / 1 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		border-radius: var(--bossy-gallery-radius, 0px) !important;
		list-style: none !important;
	}

	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills [data-thumbnail] img,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills [data-thumbnail] img,
	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills li img,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills li img,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills [data-thumbnail] img,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills [data-thumbnail] img,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills li img,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills li img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy-pills [data-thumbnail] img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy-pills [data-thumbnail] img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy-pills li img,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy-pills li img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		aspect-ratio: 1 / 1 !important;
		object-fit: cover !important;
		object-position: center center !important;
		display: block !important;
	}

	body.single-product article.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills::-webkit-scrollbar,
	body.single-product article.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills::-webkit-scrollbar,
	body.single-product div.product.bossy-layout-ledge .ct-product-gallery-container .flexy-pills::-webkit-scrollbar,
	body.single-product div.product.bossy-layout-ledge-reverse .ct-product-gallery-container .flexy-pills::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge:has(.flexy-container) .flexy-pills::-webkit-scrollbar,
	body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse:has(.flexy-container) .flexy-pills::-webkit-scrollbar {
		width: 0 !important;
		height: 0 !important;
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   Blocksy Flexy: editorial layout
   Align editorial with the same stable stage/rail behavior as ledge:
   square stage, single-row horizontal thumb rail, no wrapped thumb stacks.
   ------------------------------------------------------------------------- */
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container),
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container),
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container),
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: var(--bossy-main-gap, 12px) !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-container,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-container {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--bossy-main-gap, 12px) !important;
	align-items: stretch !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy {
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	margin-inline: auto !important;
	max-height: var(--bossy-stage-max-height, 520px) !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-view,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-view,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-view,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-view {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	max-height: 100% !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy .ct-media-container,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy .ct-media-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy .ct-media-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy .ct-media-container {
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy .flexy-items img,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy .flexy-items img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy .flexy-items img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy .flexy-items img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: center center !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	max-height: calc(var(--bossy-thumb-size, 76px) + 12px) !important;
	min-height: calc(var(--bossy-thumb-size, 76px) + 12px) !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 4px 0 !important;
	box-sizing: border-box !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	scroll-behavior: smooth;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills::-webkit-scrollbar,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills::-webkit-scrollbar,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills::-webkit-scrollbar,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > ol,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > ol,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > ol,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > ol {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: var(--bossy-thumb-gap, 6px) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: max-content !important;
	min-width: 0 !important;
	max-width: none !important;
	align-items: center !important;
	height: var(--bossy-thumb-size, 76px) !important;
	box-sizing: border-box !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills li,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills li,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills li,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills li {
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	min-width: var(--bossy-thumb-size, 76px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	list-style: none !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills li img,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills li img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills li img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills li img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* -------------------------------------------------------------------------
   Blocksy Flexy: filmstrip layout
   Flexy has no native filmstrip; without targeted rules the `bossy-gallery-filmstrip`
   class is just a marker and Blocksy falls back to `thumbs-bottom` defaults
   which can leave the main `.flexy-view` showing previous/next slide edges
   (the "double image" peek). Force a clean vertical stack: stage on top with
   a single slide visible, pills rail underneath as a horizontally-scrolling
   tinted strip with chevron-friendly width.
   ------------------------------------------------------------------------- */
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container),
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: var(--bossy-main-gap, 12px) !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-container {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--bossy-main-gap, 12px) !important;
	align-items: stretch !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy {
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	margin-inline: auto !important;
	max-height: var(--bossy-stage-max-height, 520px) !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	overflow: hidden !important;
}

/* Single-slide view inside `.flexy` for filmstrip — square the stage and kill
   the side peek that Blocksy renders by default when neighbouring slides
   extend past `.flexy-view`. Native Flexy arrows are suppressed above; Bossy
   `.bossy-stage-nav__btn` provides the standardized main-stage chevrons. */
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-view,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-view {
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	max-height: 100% !important;
	overflow: hidden !important;
}

/* Override Blocksy/WP inline `aspect-ratio: 3/4` (or any natural-image ratio)
   on the figure + img so they always fit-contain inside the square stage. */
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy .ct-media-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy .ct-media-container {
	aspect-ratio: 1 / 1 !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy .flexy-items img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy .flexy-items img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: center center !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-height: calc(var(--bossy-thumb-size, 76px) + 16px) !important;
	min-height: calc(var(--bossy-thumb-size, 76px) + 16px) !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	/* flex-start (NOT center) — the inner <ol> can be wider than the rail and
	   `align-items: center` would vertically overflow it equally above/below
	   the rail box (visible as a "double row of thumbs" peeking at the top). */
	align-items: flex-start !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 8px !important;
	box-sizing: border-box !important;
	background: rgba(0, 0, 0, 0.04);
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	scroll-behavior: auto;
	contain: layout paint;
}

/* Blocksy renders the actual thumb LIs inside an <ol> wrapper. That wrapper
   is its own flex container with default `flex-wrap: wrap`, which wraps 15
   thumbs into 3 rows (~252px tall) — and the parent `.flexy-pills` then
   visually shows the wrapped extra rows peeking above/below the rail. Force
   the <ol> into a single-row nowrap flex with `max-content` width so it
   becomes the actual scroll content of the pills rail. */
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > ol,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > ol {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: var(--bossy-thumb-gap, 6px) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: max-content !important;
	min-width: 0 !important;
	max-width: none !important;
	align-items: center !important;
	height: var(--bossy-thumb-size, 76px) !important;
	box-sizing: border-box !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills::-webkit-scrollbar,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
	display: none !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills li,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills [data-thumbnail],
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills li {
	flex: 0 0 var(--bossy-thumb-size, 76px) !important;
	width: var(--bossy-thumb-size, 76px) !important;
	height: var(--bossy-thumb-size, 76px) !important;
	min-width: var(--bossy-thumb-size, 76px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: var(--bossy-gallery-radius, 0px) !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	list-style: none !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills li img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills [data-thumbnail] img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills li img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Runtime fallback: apply Flexy filmstrip square+rail rules when only
   `data-bossy-layout="filmstrip"` is present before class hydration. */
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container),
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: var(--bossy-main-gap, 12px) !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-container {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--bossy-main-gap, 12px) !important;
	align-items: stretch !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-view,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-view,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy .ct-media-container,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy .ct-media-container {
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
	max-height: var(--bossy-stage-max-height, 520px) !important;
	overflow: hidden !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy .flexy-items img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy .ct-media-container img,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy .flexy-items img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-pills,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-pills {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-width: min(100%, var(--bossy-stage-max-height, 520px)) !important;
	max-height: calc(var(--bossy-thumb-size, 76px) + 16px) !important;
	min-height: calc(var(--bossy-thumb-size, 76px) + 16px) !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 8px !important;
	box-sizing: border-box !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
	scroll-behavior: auto;
	contain: layout paint;
}

body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-pills > ol,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-pills > ol {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	gap: var(--bossy-thumb-gap, 6px) !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: max-content !important;
	max-width: none !important;
	height: var(--bossy-thumb-size, 76px) !important;
	align-items: center !important;
}

/* Filmstrip Flexy: reel chevrons overlay the pills rail (not the main stage). */
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	width: clamp(34px, calc(var(--bossy-thumb-size, 76px) * 0.55), 44px) !important;
	height: clamp(34px, calc(var(--bossy-thumb-size, 76px) * 0.55), 44px) !important;
	transform: translateY(-50%) !important;
	grid-row: auto !important;
	grid-column: auto !important;
	justify-self: auto !important;
	align-self: auto !important;
	z-index: 10 !important;
	pointer-events: auto !important;
	display: inline-flex !important;
	border-radius: 999px !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--prev,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--prev,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--prev {
	left: 6px !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--next,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="filmstrip"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--next,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--next {
	right: 6px !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:not(:disabled):not([aria-disabled="true"]),
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:not(:disabled):not([aria-disabled="true"]) {
	opacity: 0.55 !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:has(.flexy-container) .flexy-pills:hover > .bossy-filmstrip-nav__btn,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:hover,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:focus-visible,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:has(.flexy-container) .flexy-pills:hover > .bossy-filmstrip-nav__btn,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:hover,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-filmstrip-overflow:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:focus-visible {
	opacity: 1 !important;
}

/* Editorial Flexy: reel chevrons overlay the pills rail (same standardized control as filmstrip). */
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	width: clamp(34px, calc(var(--bossy-thumb-size, 76px) * 0.55), 44px) !important;
	height: clamp(34px, calc(var(--bossy-thumb-size, 76px) * 0.55), 44px) !important;
	transform: translateY(-50%) !important;
	grid-row: auto !important;
	grid-column: auto !important;
	justify-self: auto !important;
	align-self: auto !important;
	z-index: 10 !important;
	pointer-events: auto !important;
	display: inline-flex !important;
	border-radius: 999px !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--prev,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--prev,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--prev {
	left: 6px !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--next,
body.single-product .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--next,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn--next {
	right: 6px !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:not(:disabled):not([aria-disabled="true"]),
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:not(:disabled):not([aria-disabled="true"]),
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:not(:disabled):not([aria-disabled="true"]) {
	opacity: 0.55 !important;
}

body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills:hover > .bossy-filmstrip-nav__btn,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills:hover > .bossy-filmstrip-nav__btn,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:hover,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:hover,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:focus-visible,
body.single-product .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow[data-bossy-layout="editorial"]:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:focus-visible,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills:hover > .bossy-filmstrip-nav__btn,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:hover,
body.single-product .bossy-gallery-column .woocommerce-product-gallery.bossy-gallery.bossy-filmstrip-overflow.bossy-gallery-editorial:has(.flexy-container) .flexy-pills > .bossy-filmstrip-nav__btn:focus-visible {
	opacity: 1 !important;
}

/* =============================================================================
   Hide-thumbs override (final cascade) — ledge / ledge-reverse only.
   The earlier ledge rules in this file pin `grid-template-columns` to a 2-track
   layout (`thumb-size + stage`) for classic Flexslider product galleries. When
   the user enables "Hide thumbnails" we add `body.bossy-gallery-hide-thumbs`
   from PHP and collapse the grid to one stage track here. These rules MUST
   stay last in the file so they win the source-order tiebreaker against the
   prior `body.single-product .woocommerce-product-gallery.bossy-gallery-ledge`
   rules of equal specificity.
   ============================================================================= */
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge,
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery.bossy-gallery-ledge-reverse,
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge"],
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery[data-bossy-layout="ledge-reverse"],
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery[data-bossy-layout="ledge"],
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"],
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery-ledge,
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery-ledge-reverse,
body.single-product.bossy-gallery-hide-thumbs .woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"],
body.single-product.bossy-gallery-hide-thumbs .woocommerce div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"],
body.single-product.bossy-gallery-hide-thumbs .woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge"],
body.single-product.bossy-gallery-hide-thumbs .woocommerce-page div.product div.images .woocommerce-product-gallery[data-bossy-layout="ledge-reverse"] {
	grid-template-columns: minmax(0, 1fr) !important;
	grid-template-rows: minmax(0, var(--bossy-stage-max-height, 520px)) !important;
}

body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery .flex-control-thumbs,
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery ol.flex-control-nav.flex-control-thumbs,
body.single-product.bossy-gallery-hide-thumbs .woocommerce-product-gallery.bossy-gallery .flexy-pills,
body.single-product.bossy-gallery-hide-thumbs .ct-product-gallery-container .flexy-pills {
	display: none !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
}