/* =============================================================================
   BF Woo Addons – Shop Loop & Product Page Styles
   ============================================================================= */

/* ─── Color / Image / Pattern Swatches ──────────────────────────────────────── */
.bfwa-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 0 4px;
}

/* ── Shop-loop swatches ───────────────────────────────────────────────────── */
.bfwa-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bfwa-swatch-size, 50px);
	height: var(--bfwa-swatch-size, 50px);
	border-radius: 50%;
	border: 3px solid transparent;
	cursor: pointer;
	padding: 0;
	background: transparent;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	overflow: hidden;
	outline: none;
	flex-shrink: 0;
}

.bfwa-swatch:hover {
	transform: scale(1.08);
	box-shadow: 0 2px 10px rgba(0,0,0,.20);
}

.bfwa-swatch--active {
	transform: scale(1.14) !important;
	border-color: #111 !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px #111 !important;
}

.bfwa-swatch.bfwa-swatch--image {
	padding: 0px;
	background: #00000063;
	border-radius: 50%;
	border: 2px solid #043ab736;
}

.bfwa-swatch.bfwa-swatch--color {
	height: var(--bfwa-swatch-size, 40px);
	width: var(--bfwa-swatch-size, 40px);
	margin: 0 5px;
	border-radius: 50%;
}

.bfwa-swatch--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.bfwa-swatch--pattern {
	background-size: cover;
	background-position: center;
}

/* ── Tap-to-reveal name/price label ──────────────────────────────────────────
   A single shared tooltip appended to <body> and positioned via fixed coordinates
   (see bfwa-loop.js showSwatchTip) — works on any device and is never clipped by
   a card's overflow:hidden. */
.bfwa-tap-tip {
	position: fixed;
	transform: translate(-50%, -100%) translateY(-8px);
	background: rgba(0,0,0,.88);
	color: #fff;
	font-size: 11px;
	line-height: 1.3;
	padding: 5px 9px;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 99999;
	opacity: 0;
	transition: opacity .15s ease;
}
.bfwa-tap-tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: rgba(0,0,0,.88);
}
.bfwa-tap-tip--visible { opacity: 1; }

/* ── Loop card image swap loading state ──────────────────────────────────── */
.bfwa-img-swap-wrap { position: relative; display: block; }
.bfwa-img-swap-wrap img { transition: opacity .15s ease; }
.bfwa-img-loading img { opacity: .35; }
.bfwa-img-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 3px solid rgba(0,0,0,.15);
	border-top-color: rgba(0,0,0,.55);
	border-radius: 50%;
	animation: bfwaSpin .7s linear infinite;
	z-index: 5;
}
@keyframes bfwaSpin {
	to { transform: rotate(360deg); }
}

/* ── Product-page swatches (below gallery thumbnails) ────────────────────── */
.bfwa-swatches--product-page {
	margin-top: 14px;
	padding: 0;
	gap: 10px;
}

/* ─── Action row: cart + action buttons in one flex line ─────────────────────── */
.bfwa-loop-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px 0;
	align-items: center;
}

.bfwa-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	transition: background .18s, transform .15s, box-shadow .15s;
	flex-shrink: 0;
}

.bfwa-action-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.bfwa-btn-whatsapp  { background: #25D366; color: #fff; }
.bfwa-btn-whatsapp:hover { background: #1abe5b; }

.bfwa-btn-video     { background: #FF0000; color: #fff; }
.bfwa-btn-video:hover { background: #cc0000; }

.bfwa-btn-quickview { background: #2271b1; color: #fff; }
.bfwa-btn-quickview:hover { background: #135e96; }

.bfwa-btn-wishlist  { background: #f5f5f5; color: #d63638; border: 1px solid #ddd; }
.bfwa-btn-wishlist:hover { background: #ffeaea; border-color: #d63638; }

/* ─── Icon-only WC cart button ───────────────────────────────────────────────── */
.bfwa-cart-icon-only {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	padding: 0 !important;
	min-width: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 15px;
}

/* ─── WooCommerce product thumbnail gallery — horizontal single-row scroll ───── */
.woocommerce-product-gallery .flex-control-thumbs,
.woocommerce-product-thumbnails .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 6px;
	padding-bottom: 6px;
	padding-left: 60px !important;
	/* Thin transparent scrollbar */
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,.18) transparent;
}

.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-thumbnails .flex-control-thumbs::-webkit-scrollbar {
	height: 4px;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-track,
.woocommerce-product-thumbnails .flex-control-thumbs::-webkit-scrollbar-track {
	background: transparent;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb,
.woocommerce-product-thumbnails .flex-control-thumbs::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,.18);
	border-radius: 2px;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar-thumb:hover,
.woocommerce-product-thumbnails .flex-control-thumbs::-webkit-scrollbar-thumb:hover {
	background: rgba(0,0,0,.32);
}

.woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce-product-thumbnails .flex-control-thumbs li {
	flex-shrink: 0;
	width: 80px;
}

/* ─── Product page: vertical thumbnail gallery layout ───────────────────────── */
.bfwa-gallery-vertical .woocommerce-product-gallery {
	display: flex !important;
	align-items: flex-start;
	gap: var(--bfwa-strip-gap, 12px);
}

.bfwa-gallery-vertical .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	flex: 1;
	min-width: 0;
	order: 2;
}

.bfwa-gallery-vertical .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
	order: 1;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	width: var(--bfwa-thumb-width, 80px) !important;
	max-height: var(--bfwa-thumb-max-height, 500px) !important;
	gap: var(--bfwa-thumb-gap, 6px) !important;
	padding-left: 0 !important;
	padding-bottom: 0 !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,.18) transparent;
}

.bfwa-gallery-vertical .woocommerce-product-gallery .flex-control-thumbs li {
	width: var(--bfwa-thumb-width, 80px) !important;
	height: var(--bfwa-thumb-width, 80px) !important;
	flex-shrink: 0 !important;
}

.bfwa-gallery-vertical .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Thumbnail strip on the right */
.bfwa-gallery-vertical.bfwa-gallery-vertical--right .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
	order: 3;
}

/* ─── YouTube video gallery item (in product thumbnail area) ─────────────────── */
.bfwa-video-gallery-item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	border-radius: 4px;
	overflow: hidden;
}

.bfwa-youtube-gallery-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.bfwa-video-thumbnail {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.bfwa-video-gallery-item .bfwa-play-button {
	position: absolute;
	inset: 0;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: rgba(0,0,0,.28);
	line-height: 0;
}

.bfwa-video-gallery-item .bfwa-play-button svg {
	width: var(--bfwa-swatch-size, 40px);
	height: var(--bfwa-swatch-size, 40px);
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.65));
}

/* ─── Video Modal ────────────────────────────────────────────────────────────── */
.bfwa-video-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
}

.bfwa-video-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.88);
	cursor: pointer;
}

.bfwa-video-modal__box {
	position: relative;
	z-index: 1;
	width: min(860px, 95vw);
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 12px 50px rgba(0,0,0,.65);
	margin: 0; /* prevent auto-margins from pushing box off-center */
}

.bfwa-video-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 10;
	background: rgba(0,0,0,.55);
	color: #fff;
	border: none;
	font-size: 22px;
	line-height: 1;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s;
}
.bfwa-video-modal__close:hover { background: rgba(0,0,0,.85); }

.bfwa-video-modal__wrap {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.bfwa-video-modal__wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

body.bfwa-noscroll { overflow: hidden; }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	/* Caps the setting on a phone rather than replacing it, so a shop that
	   chose 28px still gets 28px here. */
	.bfwa-swatch,
	.bfwa-swatch.bfwa-swatch--color {
		width:  min(var(--bfwa-swatch-size, 50px), 42px);
		height: min(var(--bfwa-swatch-size, 50px), 42px);
	}
	.bfwa-action-btn { width: 32px; height: 32px; font-size: 14px; }
	.bfwa-video-modal__box { width: 100vw; border-radius: 10px 10px 0 0; margin-top: auto; }
}

/* ─── Add to Cart Popup Modal ────────────────────────────────────────────────── */
.bfwa-atc-modal {
	display: none;
	position: fixed;
	inset: 0;
	/* Pin the overlay to the always-visible viewport too, so centring the box
	   cannot push its bottom edge under the browser bar. */
	height: 100vh;
	height: 100svh;
	z-index: 1000000;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}
.bfwa-atc-modal--open { display: flex; }

.bfwa-atc-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.55);
	cursor: pointer;
}

/* Always light — white card, dark text */
.bfwa-atc-box {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	min-height: 260px;
	/* svh, not vh or dvh. vh is the viewport with the browser chrome hidden, so
	   the box runs under it. dvh tracks the chrome as it slides, but Chrome for
	   Android's bottom address bar overlays the page without shrinking dvh, and
	   it lands squarely on the Add to Cart button. svh is the viewport with the
	   chrome fully shown -- the only one guaranteed never to be covered. */
	max-height: calc(100vh - 32px);
	max-height: calc(100svh - 32px);
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #111;
	border-radius: 16px;
	box-shadow: 0 20px 70px rgba(0,0,0,.35);
	overflow: hidden;
}

/* ── Loading spinner ────────────────────────────────────────────────────────── */
.bfwa-atc-loader {
	position: absolute;
	inset: 0;
	background: #fff;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	border-radius: 16px;
	transition: opacity .18s;
}
.bfwa-atc-loader--hidden {
	opacity: 0;
	pointer-events: none;
}
.bfwa-atc-spinner {
	width: 56px;
	height: 56px;
	border: 4px solid #eee;
	border-top-color: #111;
	border-radius: 50%;
	animation: bfwaSpinAnim .7s linear infinite;
}
.bfwa-atc-loader-text {
	font-size: 13px;
	color: #aaa;
	letter-spacing: .03em;
}
@keyframes bfwaSpinAnim { to { transform: rotate(360deg); } }

/* Wave preloader (3 bouncing dots) */
.bfwa-atc-wave {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	height: 46px;
}
.bfwa-atc-wave span {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #333;
	animation: bfwaWaveAnim 1.1s ease-in-out infinite;
}
.bfwa-atc-wave span:nth-child(2) { animation-delay: .18s; }
.bfwa-atc-wave span:nth-child(3) { animation-delay: .36s; }
@keyframes bfwaWaveAnim {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-18px); }
}

/* ── Title bar ───────────────────────────────────────────────────────────────── */
.bfwa-atc-title-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 50px 14px;
	border-bottom: 1px solid #f0f0f0;
	flex-shrink: 0;
}
.bfwa-atc-title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #333;
}

.bfwa-atc-close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	background: #f2f2f2;
	border: none;
	font-size: 20px;
	line-height: 1;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #555;
	transition: background .15s;
}
.bfwa-atc-close:hover { background: #e0e0e0; }

/* ── Scrollable content ──────────────────────────────────────────────────────── */
.bfwa-atc-scroll {
	overflow-y: auto;
	flex: 1;
}

/* ── Select view ─────────────────────────────────────────────────────────────── */
.bfwa-atc-select-view {
	display: flex;
	gap: 0;
}

.bfwa-atc-media {
	width: 190px;
	flex-shrink: 0;
	background: #f5f5f5;
	overflow: hidden;
	align-self: stretch;
}
.bfwa-atc-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	min-height: 200px;
}

.bfwa-atc-body {
	flex: 1;
	min-width: 0;
	padding: 18px 20px 20px;
}
.bfwa-atc-name {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: #111;
}

.bfwa-atc-price-wrap {
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 600;
	color: #222;
}

/* ── Attribute groups ───────────────────────────────────────────────────────── */
.bfwa-atc-attr-group { margin-bottom: 16px; }

.bfwa-atc-attr-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	margin-bottom: 8px;
	color: #888;
}

.bfwa-atc-opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* All options are text pills — clear and readable */
.bfwa-atc-opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1.5px solid #ddd;
	border-radius: 24px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	background: #fff;
	color: #222;
	transition: border-color .15s, background .15s, color .15s;
	outline: none;
	white-space: nowrap;
}
.bfwa-atc-opt:hover { border-color: #999; background: #f9f9f9; }
.bfwa-atc-opt--active {
	border-color: #111 !important;
	background: #111 !important;
	color: #fff !important;
}

/* Combination does not exist — faded and unclickable, but still visible
   so the shopper can see the option exists and why it can't be picked. */
.bfwa-atc-opt--na {
	opacity: .3;
	background: #f5f5f5 !important;
	border-color: #e5e5e5 !important;
	color: #999 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

/* Combination exists but is sold out — muted and badged, yet still clickable
   so the shopper gets a clear "out of stock" reason instead of a dead button.
   Deliberately distinct from --na: "we're out" vs "we don't make it". */
.bfwa-atc-opt--oos {
	color: #8a8a8a;
	background: #fafafa;
	border-color: #e5e5e5;
	border-style: dashed;
}

/* "Sold out" badge. The text is a real element (translatable via bfwaLoop.i18n)
   rather than CSS content:. Every property that a theme's button/child rules
   could otherwise inherit into it is pinned explicitly, so the badge always
   renders as a small pill and never picks up button chrome. */
.bfwa-atc-opt-badge {
	display: none;
	box-sizing: border-box;
	margin: 0;
	padding: 2px 6px;
	border: 0 !important;
	border-radius: 10px !important;
	background: #fdeaea !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #b23c3c !important;
	font-family: inherit;
	font-size: 9px !important;
	font-weight: 700 !important;
	font-style: normal;
	line-height: 1.4 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: nowrap;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	height: auto !important;
	flex: 0 0 auto;
	pointer-events: none;
	transform: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.bfwa-atc-opt--oos .bfwa-atc-opt-badge { display: inline-block; }
.bfwa-atc-opt--oos.bfwa-atc-opt--active .bfwa-atc-opt-badge {
	color: #fff !important;
	background: rgba(255,255,255,.22) !important;
}

/* ── Quantity ─────────────────────────────────────────────────────────────────*/
.bfwa-atc-qty-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.bfwa-atc-qty-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #888;
}
.bfwa-atc-qty {
	display: flex;
	align-items: center;
	border: 1.5px solid #ddd;
	border-radius: 24px;
	overflow: hidden;
}
.bfwa-atc-qty-btn {
	background: none;
	border: none;
	width: 34px;
	height: 34px;
	font-size: 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	transition: background .12s;
}
.bfwa-atc-qty-btn:hover { background: #f0f0f0; }
.bfwa-atc-qty-input {
	width: var(--bfwa-swatch-size, 40px);
	text-align: center;
	border: none;
	border-left: 1.5px solid #ddd;
	border-right: 1.5px solid #ddd;
	height: 34px;
	font-size: 14px;
	font-weight: 600;
	background: transparent;
	color: #111;
	-moz-appearance: textfield;
}
.bfwa-atc-qty-input::-webkit-outer-spin-button,
.bfwa-atc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Error + Submit ────────────────────────────────────────────────────────── */
.bfwa-atc-error {
	font-size: 12px;
	color: #c00;
	min-height: 16px;
	margin: 0 0 10px;
}
.bfwa-atc-submit {
	width: 100%;
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 10px;
	border: none;
	background: #111;
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}
.bfwa-atc-submit:hover:not(:disabled) { background: #333; }
.bfwa-atc-submit:disabled { opacity: .55; cursor: default; }
.bfwa-atc-submit.loading { opacity: .65; }

/* ── Confirmation view ───────────────────────────────────────────────────────*/
.bfwa-atc-confirm-view {
	padding: 44px 28px;
	text-align: center;
	color: #111;
}
.bfwa-atc-confirm-check {
	width: 60px;
	height: 60px;
	background: #22c55e;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin: 0 auto 18px;
}
.bfwa-atc-confirm-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
	color: #111;
}
.bfwa-atc-confirm-product-name {
	font-size: 13px;
	font-weight: 600;
	color: #444;
	margin: 0 0 14px;
}
.bfwa-atc-confirm-detail {
	font-size: 13px;
	color: #555;
	margin: 0 0 26px;
	line-height: 1.8;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}
.bfwa-atc-confirm-detail span { display: block; }
.bfwa-atc-confirm-btns {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.bfwa-atc-continue {
	padding: 10px 22px;
	border-radius: 10px;
	border: 1.5px solid #ddd;
	background: #fff;
	color: #333;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	transition: background .15s;
}
.bfwa-atc-continue:hover { background: #f4f4f4; }
.bfwa-atc-cart-link {
	padding: 10px 22px;
	border-radius: 10px;
	background: #111;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s;
	display: inline-block;
}
.bfwa-atc-cart-link:hover { background: #333; color: #fff; }

/* ── Product page: fixed cart FAB (bottom-right) ─────────────────────────────*/
.bfwa-product-cart-fab {
	position: fixed;
	/* Offsets are configurable in Settings; these are the fallbacks used if the
	   inline custom properties are ever missing. */
	bottom: var(--bfwa-fab-bottom, 100px);
	right: var(--bfwa-fab-right, 40px);
	z-index: 99990;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #111;
	color: #fff;
	border: none;
	font-size: 23px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 22px rgba(0,0,0,.38);
	transition: background .15s, transform .15s, box-shadow .15s;
}
.bfwa-product-cart-fab:hover {
	background: #333;
	transform: scale(1.08);
	box-shadow: 0 6px 28px rgba(0,0,0,.42);
}
.bfwa-product-cart-fab:active { transform: scale(.94); }

/* ── Mobile — centered, not bottom-sheet ─────────────────────────────────────*/
@media (max-width: 520px) {
	.bfwa-atc-modal { padding: 12px; }
	.bfwa-atc-box {
		width: 100%;
		border-radius: 14px;
		max-height: calc(100vh - 24px);
		max-height: calc(100svh - 24px);
	}
	.bfwa-atc-select-view { flex-direction: column; }
	.bfwa-atc-media { width: 100%; min-height: 180px; max-height: 220px; }
	.bfwa-atc-media img { min-height: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP IMAGE — loading state + tap-to-enlarge affordance
   ═══════════════════════════════════════════════════════════════════════════ */
.bfwa-atc-media { position: relative; cursor: zoom-in; }

.bfwa-atc-img-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(245,245,245,.75);
	z-index: 2;
}
.bfwa-atc-img-loader--hidden { display: none; }

/* Small expand hint so shoppers know the image is tappable */
.bfwa-atc-media::after {
	content: '⤢';
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 1;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FULLSCREEN IMAGE VIEWER

   touch-action:none + preventDefault in JS means the browser never applies its
   own pinch-zoom here. Without it, spreading two fingers would zoom the whole
   visual viewport and drag the site layout out of shape behind the overlay.
   ═══════════════════════════════════════════════════════════════════════════ */
.bfwa-lb {
	position: fixed;
	inset: 0;
	z-index: 1000001;           /* above the add-to-cart popup (1000000) */
	display: none;
	/* Translucent veil — the popup still shows through, but dark enough to push
	   it back and let the image dominate. Raise/lower the alpha to taste. */
	background: rgba(0,0,0,.5);
	touch-action: none;
	overscroll-behavior: contain;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.bfwa-lb--open { display: block; }

.bfwa-lb__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	cursor: zoom-in;
}
.bfwa-lb--zoomed .bfwa-lb__stage { cursor: grab; }
.bfwa-lb--zoomed .bfwa-lb__stage:active { cursor: grabbing; }

.bfwa-lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transform-origin: center center;
	will-change: transform;
	-webkit-user-drag: none;
	user-select: none;
	/* Backdrop is near-transparent, so give the image its own edge */
	filter: drop-shadow(0 6px 28px rgba(0,0,0,.45));
}

.bfwa-lb__loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.bfwa-lb__close {
	position: absolute;
	top: calc(12px + env(safe-area-inset-top, 0px));
	right: calc(12px + env(safe-area-inset-right, 0px));
	z-index: 3;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Dark chip — the backdrop behind it may now be light */
	background: rgba(0,0,0,.62);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s;
}
.bfwa-lb__close:hover { background: rgba(0,0,0,.8); }

.bfwa-lb__tools {
	position: absolute;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 6px;
	padding: 6px;
	border-radius: 24px;
	background: rgba(0,0,0,.55);
}
.bfwa-lb__btn {
	min-width: 40px;
	height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 18px;
	background: rgba(255,255,255,.14);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s;
}
.bfwa-lb__btn:hover { background: rgba(255,255,255,.3); }

@media (max-width: 480px) {
	.bfwa-lb__tools { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.bfwa-lb__btn   { height: 34px; font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP COLOUR OPTIONS
   Three styles, chosen in Settings. Only the shop's swatch attribute is
   coloured; an option with no colour in the library keeps its plain pill.
   ═══════════════════════════════════════════════════════════════════════════ */
.bfwa-atc-chip {
	display: block;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
	flex-shrink: 0;
}

/* ── Round chip, name underneath (paint-card style) ───────────────────────── */
.bfwa-atc-opts--chip-under {
	display: grid;
	grid-template-columns: var(--bfwa-popup-chip-cols, repeat(auto-fill, minmax(72px, 1fr)));
	gap: 12px 8px;
}
.bfwa-atc-opts--chip-under .bfwa-atc-opt {
	flex-direction: column;
	gap: 6px;
	padding: 8px 4px;
	border-color: transparent;
	background: transparent;
	border-radius: 8px;
	white-space: normal;
	text-align: center;
	line-height: 1.25;
}
.bfwa-atc-opts--chip-under .bfwa-atc-chip {
	width: var(--bfwa-popup-chip-size, 44px);
	height: var(--bfwa-popup-chip-size, 44px);
	/* A fixed column count can be narrower than the chip on a small phone, so
	   let it shrink rather than overflow the row. */
	max-width: 100%;
}
.bfwa-atc-opts--chip-under .bfwa-atc-opt-text { font-size: 11px; }
.bfwa-atc-opts--chip-under .bfwa-atc-opt:hover { background: #f4f4f5; border-color: transparent; }
.bfwa-atc-opts--chip-under .bfwa-atc-opt--active {
	background: #f0f0f1 !important;
	border-color: transparent !important;
	color: #111 !important;
}
/* Ring marks the selection — a filled pill would hide the colour itself. */
.bfwa-atc-opts--chip-under .bfwa-atc-opt--active .bfwa-atc-chip {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;
}

/* ── Small chip beside the name ───────────────────────────────────────────── */
.bfwa-atc-opts--chip-inline .bfwa-atc-chip { width: 15px; height: 15px; }
.bfwa-atc-opts--chip-inline .bfwa-atc-opt--active .bfwa-atc-chip {
	border-color: rgba(255,255,255,.6);
}

/* ── "+N" on the shop loop: the rest of the options live in the popup ─────── */
.bfwa-swatch--more {
	background: #f0f0f1;
	border: 2px dashed #c3c4c7 !important;
	color: #4b5563;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.bfwa-swatch--more:hover { background: #e4e5e7; border-color: #8c8f94 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP ACTION BAR — quantity + Add to Cart, pinned below the scrolling options

   A product with thirty colours used to push Add to Cart far below the fold,
   so the only way to buy was to scroll back down past every swatch. The bar
   lives outside .bfwa-atc-scroll, and carries a summary of what is chosen,
   because the options themselves are usually scrolled out of sight by then.
   ═══════════════════════════════════════════════════════════════════════════ */
.bfwa-atc-actions {
	flex-shrink: 0;
	padding: 12px 20px 14px;
	background: #fff;
	border-top: 1px solid #ececec;
	box-shadow: 0 -6px 18px rgba(0,0,0,.05);
	box-sizing: border-box;
}
.bfwa-atc-actions .bfwa-atc-error {
	min-height: 0;
	margin: 0 0 6px;
}
.bfwa-atc-actions .bfwa-atc-error:empty { display: none; }

.bfwa-atc-sel-summary {
	font-size: 12px;
	line-height: 1.35;
	color: #444;
	margin-bottom: 8px;
	word-break: break-word;
}
.bfwa-atc-sel-summary strong { font-weight: 700; color: #111; }
.bfwa-atc-sel-sep { margin: 0 6px; color: #bbb; }
.bfwa-atc-sel-empty { color: #999; font-style: italic; }

.bfwa-atc-actions-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.bfwa-atc-actions-row .bfwa-atc-qty { flex-shrink: 0; }
.bfwa-atc-actions-row .bfwa-atc-submit { flex: 1; width: auto; }

/* Setting off: the bar sits at the end of the body and scrolls with it. */
.bfwa-atc-modal--nosticky .bfwa-atc-actions {
	padding: 0;
	border-top: none;
	box-shadow: none;
	background: transparent;
	margin-top: 16px;
}

/* ── Colour instead of a photo ───────────────────────────────────────────── */
/* Paint-type shops: every variation shares one photo, or has none at all, and
   the grey placeholder says nothing. The chosen colour fills the panel. */
.bfwa-atc-media--colour {
	cursor: default;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
	/* Same box the photo had. The <img> is hidden, which collapses the panel to
	   nothing unless the media keeps the height it would have had. */
	min-height: 200px;
}
@media (max-width: 520px) {
	.bfwa-atc-media--colour { min-height: 180px; }
}
.bfwa-atc-media--colour::after { display: none; }


@media (max-width: 520px) {
	.bfwa-atc-actions {
		padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPTION PICKER — a second layer for attributes with too many options

   Forty-five colours (or thirty sizes) laid out as buttons is a wall to scroll
   past on the way to anything else. Past the threshold the attribute shows one
   row instead, and the options open over the popup.
   ═══════════════════════════════════════════════════════════════════════════ */
.bfwa-atc-picker-trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 14px;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	background: #fff;
	color: #111;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color .12s, background .12s;
}
.bfwa-atc-picker-trigger:hover { border-color: #999; background: #fafafa; }
.bfwa-atc-picker-chip { width: 22px; height: 22px; }
.bfwa-atc-picker-value { flex: 1; min-width: 0; font-weight: 600; }
.bfwa-atc-picker-value--empty { color: #999; font-weight: 500; }
.bfwa-atc-picker-caret { color: #888; font-size: 12px; flex-shrink: 0; }

/* Parked in the group, waiting to be moved into the picker. They stay in the
   DOM because the availability and auto-select code queries them. */
.bfwa-atc-opts--pool { display: none !important; }

.bfwa-atc-picker {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}
.bfwa-atc-picker-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.45);
	cursor: pointer;
}
.bfwa-atc-picker-box {
	position: relative;
	z-index: 1;
	width: min(480px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	color: #111;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0,0,0,.4);
	overflow: hidden;
	box-sizing: border-box;
}
.bfwa-atc-picker-head {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid #ececec;
}
.bfwa-atc-picker-title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #666;
}
.bfwa-atc-picker-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: #f0f0f0;
	color: #333;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bfwa-atc-picker-close:hover { background: #e0e0e0; }

.bfwa-atc-picker-search {
	flex-shrink: 0;
	padding: 10px 14px;
	border-bottom: 1px solid #f2f2f2;
}
.bfwa-atc-picker-input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid #ddd;
	border-radius: 10px;
	font-size: 14px;
	color: #111;
	background: #fff;
	box-sizing: border-box;
}
.bfwa-atc-picker-input:focus { outline: none; border-color: #111; }

.bfwa-atc-picker-list {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 14px;
}
.bfwa-atc-picker-empty {
	margin: 0;
	padding: 0 14px 16px;
	font-size: 13px;
	color: #888;
}

@media (max-width: 520px) {
	.bfwa-atc-picker { padding: 12px; }
	.bfwa-atc-picker-box { border-radius: 12px; }
}