/* =========================================================================
   The Florist — Product Page Widgets
   Shared design tokens (pulled from the Figma file via get_design_context)
   ========================================================================= */

:root {
	--tfpw-gold: #c99e43;
	--tfpw-ink: #0f0f0f;
	--tfpw-cream: #fffefb;
	--tfpw-cream-2: #fffbf2;
	--tfpw-cream-3: #f8f5f2;
	--tfpw-muted: rgba(15, 15, 15, 0.6);
	--tfpw-border: rgba(15, 15, 15, 0.08);
	--tfpw-border-strong: rgba(15, 15, 15, 0.2);
	--tfpw-border-line: #e6e6e6;
	--tfpw-sale-bg: rgba(229, 115, 75, 0.15);
	--tfpw-sale-text: #e5734b;
	--tfpw-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--tfpw-font-sans: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
	--tfpw-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.tfpw-gallery,
.tfpw-title-price,
.tfpw-action-btn,
.tfpw-feature-icons,
.tfpw-marquee,
.tfpw-accordion-section,
.tfpw-testimonials,
.tfpw-related,
.tfpw-addons-popup,
.tfpw-share-heart-popup {
	box-sizing: border-box;
}
.tfpw-gallery *,
.tfpw-title-price *,
.tfpw-feature-icons *,
.tfpw-marquee *,
.tfpw-accordion-section *,
.tfpw-testimonials *,
.tfpw-related *,
.tfpw-addons-popup *,
.tfpw-share-heart-popup * {
	box-sizing: border-box;
}

/* =========================================================================
   1. Gallery
   ========================================================================= */

.tfpw-gallery__stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	margin-right: 24px;
}

.tfpw-gallery__main {
	position: relative;
	width: 100%;
	max-width: 672px;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--tfpw-cream-3);
}

.tfpw-gallery__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	box-sizing: border-box;
}
/* Figma's own hero image sits in a rounded frame with a gold hairline
   border (confirmed from the Figma inspector: 1px, rgba(201,158,67,1),
   10px radius) — applied to the active photo itself so it stays correct
   through the gallery's own opacity cross-fade. */
.tfpw-gallery__image.is-active {
	opacity: 1;
	pointer-events: auto;
	border: 1px solid rgba(201, 158, 67, 1);
	border-radius: 10px;
}
.tfpw-gallery__image--variation {
	z-index: 1;
}

/* Tag badge overlay on the main product photo (Gallery / Hero Section
   widgets) — same colour-coded pill as the Related Products / shop-loop
   card badge (section 8), reusing tfpw_get_card_badge() server-side so
   both places always agree on which badge a product gets. */
.tfpw-gallery__badge-wrap {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
}
.tfpw-gallery__badge {
	font-family: var(--tfpw-font-sans);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 26843500px;
	color: var(--tfpw-ink);
	white-space: nowrap;
	display: inline-block;
}
.tfpw-gallery__badge--sage {
	background: #E7E6D0;
}
.tfpw-gallery__badge--mauve {
	background: #E3CFCF;
}
.tfpw-gallery__badge--peach {
	background: #FFE2A4;
}
.tfpw-gallery__badge--gold {
	background: #F4E3C1;
}

.tfpw-gallery__icons {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 2;
}

.tfpw-gallery__icon-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--tfpw-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tfpw-ink);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(15, 15, 15, 0.1);
	transition: color 0.2s ease, transform 0.2s ease;
}
.tfpw-gallery__icon-btn:hover {
	transform: translateY(-1px);
}
.tfpw-gallery__icon-btn.is-active,
.tfpw-wishlist-btn.is-active {
	color: var(--tfpw-gold);
}

/* YITH WooCommerce Wishlist integration — its own button/icon/label
   markup renders nested inside our own circle wrapper
   (.tfpw-gallery__icon-btn above / .tfpw-related__wishlist further
   below, both already sized, backgrounded and positioned as a circle);
   these rules make YITH's markup fill that circle and show icon-only,
   instead of YITH's own default button chrome + "Add to wishlist" text.
   !important is used on the reset properties because YITH's button
   carries its own "yith-wcwl-theme-button-style" class specifically so
   themes can restyle it, which can otherwise lose a specificity fight
   against the theme's generic button/anchor styles (same kind of fight
   already seen elsewhere in this stylesheet). */
.tfpw-wishlist-btn .yith-add-to-wishlist-button-block,
.tfpw-wishlist-btn .yith-wcwl-add-to-wishlist-button-anchor-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.tfpw-wishlist-btn .yith-wcwl-add-to-wishlist-button {
	all: unset;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit;
	cursor: pointer;
}
.tfpw-wishlist-btn .yith-wcwl-add-to-wishlist-button__label {
	display: none !important;
}
.tfpw-wishlist-btn .yith-wcwl-icon-svg__wrapper {
	display: flex;
}
.tfpw-related__wishlist .yith-wcwl-icon {
	width: 15px;
	height: 15px;
}
.tfpw-gallery__icon-btn .yith-wcwl-icon {
	width: 20px;
	height: 20px;
}
.tfpw-wishlist-btn .yith-wcwl-add-to-wishlist-button--added {
	color: var(--tfpw-gold);
}

.tfpw-gallery__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 6px;
	flex-shrink: 0;
}

.tfpw-gallery__nav-arrow {
	width: 35px;
	height: 35px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--tfpw-border);
	background: var(--tfpw-cream);
	color: var(--tfpw-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.tfpw-gallery__nav-arrow:hover {
	border-color: var(--tfpw-gold);
	color: var(--tfpw-gold);
}

.tfpw-gallery__dots {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 4px 0;
}

.tfpw-gallery__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: var(--tfpw-border-strong);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.tfpw-gallery__dot.is-active {
	background: var(--tfpw-gold);
	transform: scale(1.35);
}

@media (max-width: 767px) {
	/* .tfpw-gallery__stage is a ROW by default (main photo + the dot/
	   arrow navigator sitting beside it, matching Figma's desktop
	   layout). Below, .tfpw-gallery__nav/.tfpw-gallery__dots were
	   already being flipped to a horizontal strip for mobile, but the
	   STAGE itself was never switched to a column — so the nav row kept
	   sharing the same horizontal row as the main photo, squeezing the
	   photo down to a tiny square to make room for it (confirmed live:
	   at 375px the photo rendered far smaller than its box). Stacking
	   the stage fixes that: full-width photo on top, the (already-
	   horizontal) nav strip below it. */
	.tfpw-gallery__stage {
		flex-direction: column;
		gap: 16px;
		margin-right: 0;
	}
	.tfpw-gallery__nav {
		flex-direction: row;
		padding-top: 0;
	}
	.tfpw-gallery__dots {
		flex-direction: row;
	}
}

/* =========================================================================
   2. Title / Rating / Price
   ========================================================================= */

.tfpw-title-price__title {
	font-family: var(--tfpw-font-serif);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.2;
	color: var(--tfpw-ink);
	margin: 0 0 12px;
}

.tfpw-title-price__rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.tfpw-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--tfpw-gold);
}
.tfpw-title-price__rating-num {
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 14px;
	color: var(--tfpw-ink);
}
.tfpw-title-price__rating-count {
	font-family: var(--tfpw-font-sans);
	font-weight: 300;
	font-size: 14px;
	color: rgba(15, 15, 15, 0.7);
}

.tfpw-title-price__price {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px;
	/* !important per client's own live DevTools tweak, so it also wins
	   over the (now-redundant) ".tfpw-hero .tfpw-title-price__price"
	   override that used to set this to 5px inside the hero. */
	margin-bottom: 12px !important;
}
.tfpw-price-now {
	display: inline-flex;
	align-items: flex-end;
	gap: 12px;
	font-family: var(--tfpw-font-serif);
	font-weight: 600;
	font-size: 36px;
	color: var(--tfpw-ink);
	line-height: 1;
}
.tfpw-price-now .amount,
.tfpw-price-now ins {
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
}
/* WooCommerce wraps a sale price as <del>was</del> <ins>now</ins> —
   restyle each piece to match the Figma "now big / was small struck
   through" look, whether the product is simple or variable. */
.tfpw-price-now del {
	order: 2;
	font-family: var(--tfpw-font-sans);
	font-weight: 300;
	font-size: 18px;
	color: rgba(15, 15, 15, 0.4);
	text-decoration: line-through;
}
.tfpw-price-now del .amount {
	font-family: inherit;
	font-size: inherit;
}
.tfpw-price-now ins {
	order: 1;
}
.tfpw-price-now .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* The Arabic AED symbol has no glyphs in Playfair Display / Bricolage
   Grotesque — let the browser use a normal system font for just this
   symbol so it renders correctly instead of a broken fallback glyph. */
.woocommerce-Price-currencySymbol {
	font-family: -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	unicode-bidi: isolate;
}
.tfpw-price-badge {
	font-family: var(--tfpw-font-sans);
	font-weight: 600;
	font-size: 13px;
	color: var(--tfpw-sale-text);
	background: var(--tfpw-sale-bg);
	border-radius: 6px;
	padding: 2px 8px;
}

.tfpw-title-price__note {
	font-family: var(--tfpw-font-sans);
	font-size: 14px;
	color: var(--tfpw-muted);
	margin: 0;
}

/* =========================================================================
   3. Action buttons
   ========================================================================= */

.tfpw-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 50px;
	padding: 0 24px;
	border-radius: 6px;
	font-family: var(--tfpw-font-sans);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.15s ease;
	border: 1px solid transparent;
}
.tfpw-action-btn:hover {
	opacity: 0.9;
}
.tfpw-action-btn:active {
	transform: translateY(1px);
}
.tfpw-action-btn svg {
	flex-shrink: 0;
}

.tfpw-action-btn--filled {
	background: var(--tfpw-gold);
	color: var(--tfpw-cream);
	border-color: var(--tfpw-gold);
}
.tfpw-action-btn--outline {
	background: transparent;
	color: var(--tfpw-ink);
	border-color: var(--tfpw-border-strong);
}
.tfpw-action-btn--outline-gold {
	background: transparent;
	color: var(--tfpw-gold);
	border-color: var(--tfpw-gold);
	border-radius: 4px;
}

/* =========================================================================
   3b. Actions panel (Add to Cart + Quick Buy + Create Surprise + icons,
       all together — matches Figma's single "Group 1000006964" block)
   ========================================================================= */

.tfpw-actions-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.tfpw-actions-panel__row {
	display: flex;
	gap: 10px;
}
.tfpw-actions-panel__row .tfpw-action-btn--add_to_cart {
	flex: 36 1 190px;
	width: auto;
}
.tfpw-actions-panel__row .tfpw-action-btn--quick_buy {
	flex: 64 1 300px;
	width: auto;
}
.tfpw-actions-panel__surprise {
	width: 100%;
}
@media (max-width: 480px) {
	.tfpw-actions-panel__row {
		flex-direction: column;
	}
	/* CRITICAL FIX: the desktop rule above gives each button a pixel
	   flex-basis (190px / 300px) to control its WIDTH in the row layout.
	   Flipping to flex-direction:column turns that same flex-basis into
	   each button's HEIGHT instead (per the flexbox spec, flex-basis
	   drives the main-axis size, and the main axis is now vertical) —
	   so on mobile the buttons rendered 190px/300px TALL instead of the
	   normal 50px, blowing the layout up into giant colour blocks
	   (confirmed live at 375px). Resetting flex to "0 0 auto" here lets
	   each button fall back to its natural height again. */
	.tfpw-actions-panel__row .tfpw-action-btn--add_to_cart,
	.tfpw-actions-panel__row .tfpw-action-btn--quick_buy {
		width: 100%;
		flex: 0 0 auto;
	}
}

/* =========================================================================
   4. Feature icons row
   ========================================================================= */

.tfpw-feature-icons {
	display: flex;
	flex-wrap: nowrap;
	gap: 11px;
}
.tfpw-feature-icons__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* flex (not a % width): 4 equal columns that always share the row's
	   actual available width after the 11px gaps are subtracted, so this
	   never wraps onto a second row the way a fixed 24% width could once
	   labels got wider (min-width:0 lets long labels shrink/wrap inside
	   their own column instead of pushing the row itself onto 2 lines). */
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}
.tfpw-feature-icons__icon {
	color: var(--tfpw-gold);
	display: inline-flex;
}
.tfpw-feature-icons__label {
	font-family: var(--tfpw-font-sans);
	font-size: 13px;
	line-height: 1.5;
	color: rgba(15, 15, 15, 0.7);
}

/* Figma's own mobile frame (375px "Product Detail Screen", node
   1273:1018 "trust") doesn't keep these 4 items in one row at all — it
   lays them out as a 2x2 grid, icon-then-label SIDE BY SIDE (not
   stacked/centered like the desktop column layout above) and left-
   aligned. Matches that spec below 480px. */
@media (max-width: 480px) {
	.tfpw-feature-icons {
		flex-wrap: wrap;
		row-gap: 24px;
		column-gap: 11px;
	}
	.tfpw-feature-icons__item {
		flex: 1 1 calc(50% - 6px);
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}
}

/* =========================================================================
   5. Marquee
   ========================================================================= */

.tfpw-marquee {
	overflow: hidden;
	background: var(--tfpw-cream-2);
	padding: 40px 0;
	width: 100%;
}
.tfpw-marquee__track {
	display: flex;
	width: max-content;
	animation: tfpw-marquee-scroll var(--tfpw-marquee-speed, 28s) linear infinite;
}
.tfpw-marquee__set {
	display: flex;
	align-items: baseline;
	flex-shrink: 0;
}
.tfpw-marquee__item {
	white-space: nowrap;
	padding: 0 32px;
	line-height: 1;
}
/* Figma's own rendered marquee frame (node 1634:18972) is one single,
   consistent style all the way across — Playfair Display, Medium,
   Italic, ~80px, one color. The "is-light"/"is-italic" split here used
   to alternate two different fonts/sizes per your earlier feedback;
   both classes are kept (so the markup/JS don't need to change) but now
   render identically, matching the one style Figma actually shows. */
.tfpw-marquee__item.is-light,
.tfpw-marquee__item.is-italic {
	font-family: var(--tfpw-font-serif);
	font-weight: 500;
	font-style: italic;
	font-size: clamp(24px, 5.6vw, 80px);
	color: #f1e4d3;
}

@keyframes tfpw-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.tfpw-marquee__track {
		animation: none;
	}
}

/* =========================================================================
   6. Accordion + second image
   ========================================================================= */

.tfpw-accordion-section {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
}
.tfpw-accordion {
	flex: 1 1 480px;
	min-width: 280px;
}
.tfpw-accordion__row {
	border-bottom: 0.8px solid var(--tfpw-border-line);
}
/* Figma (node 1634:18999) only has a divider line UNDER each row — no
   line above "Product Description" itself. The old :first-child rule
   added one anyway; removed so the accordion starts clean like Figma. */
.tfpw-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tfpw-ink);
}
.tfpw-accordion__summary::-webkit-details-marker {
	display: none;
}
.tfpw-accordion__toggle {
	position: relative;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.tfpw-accordion__toggle::before,
.tfpw-accordion__toggle::after {
	content: "";
	position: absolute;
	background: var(--tfpw-ink);
	border-radius: 9999px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.tfpw-accordion__toggle::before {
	width: 14px;
	height: 1.4px;
}
.tfpw-accordion__toggle::after {
	width: 1.4px;
	height: 14px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.tfpw-accordion__row[open] .tfpw-accordion__toggle::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}
.tfpw-accordion__content {
	padding-bottom: 20px;
	font-family: var(--tfpw-font-sans);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	color: var(--tfpw-ink);
}
.tfpw-accordion__content p {
	margin: 0 0 12px;
}
.tfpw-accordion__content ul {
	margin: 0 0 12px;
	padding-left: 18px;
}
.tfpw-accordion__image {
	flex: 1 1 400px;
	min-width: 260px;
	border-radius: 8px;
	overflow: hidden;
}
.tfpw-accordion__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* =========================================================================
   7. Testimonials
   ========================================================================= */

.tfpw-testimonials {
	text-align: center;
	padding: 48px 0;
}
.tfpw-testimonials__heading {
	font-family: var(--tfpw-font-serif);
	font-weight: 600;
	font-size: 40px;
	letter-spacing: 1px;
	color: var(--tfpw-ink);
	margin: 0 0 40px;
}
.tfpw-testimonials__stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 8px;
}
.tfpw-testimonials__arrow {
	flex-shrink: 0;
	width: 35px;
	height: 35px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--tfpw-border);
	background: transparent;
	color: var(--tfpw-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tfpw-testimonials__arrow--prev {
	transform: scaleX(-1);
}
.tfpw-testimonials__track {
	display: flex;
	gap: 120px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1;
	padding: 4px;
}
.tfpw-testimonials__track::-webkit-scrollbar {
	display: none;
}
.tfpw-testimonials__item {
	flex: 0 0 auto;
	width: 300px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tfpw-testimonials__photo {
	width: 125px;
	height: 125px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 20px;
}
.tfpw-testimonials__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tfpw-testimonials__name {
	font-family: var(--tfpw-font-serif);
	font-size: 20px;
	text-transform: uppercase;
	color: var(--tfpw-ink);
	margin: 0 0 6px;
}
.tfpw-testimonials__handle {
	font-family: var(--tfpw-font-sans);
	font-weight: 300;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tfpw-ink);
	margin: 0 0 6px;
}
.tfpw-testimonials__quote {
	font-family: var(--tfpw-font-sans);
	font-weight: 300;
	font-size: 16px;
	color: var(--tfpw-ink);
	margin: 0 0 10px;
}
.tfpw-testimonials__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--tfpw-gold);
}
.tfpw-testimonials__stars .is-empty {
	color: var(--tfpw-border-strong);
}

/* No mobile spec was in the two Figma links you sent for this pass, so
   this is a conservative safety fix, not a Figma-matched redesign: the
   desktop-only 120px gap between slides and 40px heading would badly
   overflow a 375px screen (each slide's own 300px width already needs
   the full viewport). Tightens spacing only — same slider, same cards,
   same content — so it stays usable on a phone; flag this section
   separately if you'd like it pixel-matched to a specific mobile frame
   later. */
@media (max-width: 600px) {
	.tfpw-testimonials__heading {
		font-size: 28px;
		margin-bottom: 24px;
	}
	.tfpw-testimonials__track {
		gap: 32px;
	}
	.tfpw-testimonials__item {
		width: 260px;
	}
}

/* =========================================================================
   8. Related products slider — and the same card design applied
   site-wide to Shop/category/search listings (includes/shop-loop-
   cards.php + templates/content-product.php).
   ========================================================================= */

/* Light, scoped reset for the <li> our shop-loop template renders,
   independent of whatever the active theme already does for
   "ul.products li.product" — avoids bullet markers / theme padding
   fighting with the card's own box. */
li.tfpw-product-card-item {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tfpw-related {
	padding: 40px 0;
}
.tfpw-related__heading {
	/* Figma node 1634:19704 uses Fraunces (a different serif than the
	   Playfair Display used everywhere else on this page) specifically
	   for this one heading — enqueued alongside the other Google Fonts
	   in the-florist-product-widgets.php. */
	font-family: "Fraunces", var(--tfpw-font-serif);
	font-variation-settings: "SOFT" 0, "WONK" 1;
	font-weight: 400;
	font-size: 32px;
	color: var(--tfpw-ink);
	margin: 0 0 24px;
}
/* Figma's "More Floral Delights" row (node 1634:19615) shows exactly 4
   cards filling the row edge to edge — no scrolling, no arrows. A plain
   4-column grid matches that exactly (the widget's default product
   count is 4 to match); fewer related products just leave empty grid
   cells instead of stretching, which is fine since WooCommerce's related
   list is naturally capped by how many other products share a category. */
.tfpw-related__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
/* The card itself is full-width by default so it also works as a plain
   grid item (Shop/category pages — see includes/shop-loop-cards.php) —
   this track just gives each one an equal column via the grid above. */
.tfpw-related__card {
	width: 100%;
	border: 1px solid #ccc;
	text-decoration: none;
	color: inherit;
	display: block;
}
.tfpw-related__track > .tfpw-related__card {
	margin-right: -1px;
	margin-bottom: -1px;
}
@media (max-width: 900px) {
	.tfpw-related__track {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Figma's own mobile "More Floral Delights" grid (node 1273:1059,
   375px frame) stays 2-up all the way down to phone width (161px
   cards side by side in the 335px content area) — it never collapses
   to a single column, so the ≤480px override that used to drop this
   to 1 column is removed; the ≤900px rule above already covers it. */
.tfpw-related__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.tfpw-related__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: absolute;
	inset: 0;
	transition: opacity 0.35s ease;
}
.tfpw-related__photo--hover {
	opacity: 0;
}
/* Photo swap on hover — the front photo crossfades to the product's own
   second gallery photo (see tfpw_render_product_card()), matching the
   Figma "Responsive home screen" prototype (node 1588:12510). Gated to
   `hover:hover` + `pointer:fine` (a real mouse) rather than a viewport
   breakpoint: a touchscreen simulates `:hover` on tap with no mouse-leave
   to clear it, so without this gate a tap could leave the card visually
   "stuck" showing the second photo instead of just navigating. */
@media (hover: hover) and (pointer: fine) {
	.tfpw-related__card:hover .tfpw-related__photo--hover {
		opacity: 1;
	}
	.tfpw-related__card:hover .tfpw-related__photo:not(.tfpw-related__photo--hover) {
		opacity: 0;
	}
}
/* Badge + wishlist heart grouped together, top-left of the photo. */
.tfpw-related__media-top-left {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 6px;
}
.tfpw-related__wishlist {
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--tfpw-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tfpw-ink);
	cursor: pointer;
	flex-shrink: 0;
}
.tfpw-related__badge {
	font-family: var(--tfpw-font-sans);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 10px;
	border-radius: 26843500px;
	color: var(--tfpw-ink);
	white-space: nowrap;
}
/* Per-type badge colours — pulled directly from the Figma file's own
   "New Arrivals" card examples (node 2074:2395 and children), which also
   match the sorry.html reference's own --sage / --mauve / --peach tokens
   exactly. */
.tfpw-related__badge--sage {
	background: #E7E6D0;
}
.tfpw-related__badge--mauve {
	background: #E3CFCF;
}
.tfpw-related__badge--peach {
	background: #FFE2A4;
}
.tfpw-related__badge--gold {
	background: #F4E3C1;
}
.tfpw-related__rating {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--tfpw-font-sans);
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--tfpw-ink);
}
.tfpw-related__rating svg {
	color: var(--tfpw-gold);
}
.tfpw-related__info {
	padding: 20px;
}
/* Card body reads top-to-bottom now (title, then the variation label/
   swatches, then price last, right-aligned) — per your correction:
   your Figma reference and the live site had title+price sharing one
   row at the TOP with the variation row underneath; title now gets its
   own full-width line, and price moves to the end of the card. */
.tfpw-related__name {
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 14px;
	color: var(--tfpw-ink);
	margin: 0 0 4px;
}
.tfpw-related__attrs {
	font-family: var(--tfpw-font-sans);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #757575;
	margin: 0;
}
.tfpw-related__price {
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #757575;
	white-space: nowrap;
	margin: 14px 0 0;
	text-align: right;
}
/* When there are no swatches to show, the price sits directly under
   the title/attrs instead of inheriting the swatch row's top margin. */
.tfpw-related__name + .tfpw-related__price,
.tfpw-related__attrs + .tfpw-related__price {
	margin-top: 8px;
}
.tfpw-related__price .amount {
	font-family: inherit;
	font-size: inherit;
}

/* "Material box" swatch row — bottom of the card. Small flat circles per
   Figma's own card design (node 2074:2395 and children); the gold hover/
   active ring is kept from the Hero Section's own material/presentation
   swatches (section 12 below) for visual consistency across the site,
   rather than the reference file's plain black/white borders. */
.tfpw-related__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}
.tfpw-related__swatch,
.tfpw-related__swatch:hover,
.tfpw-related__swatch:focus,
.tfpw-related__swatch:active {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 19px;
	height: 19px;
	border-radius: 50%;
	background-color: var(--tfpw-cream-3);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.tfpw-related__swatch:hover,
.tfpw-related__swatch.is-active {
	border-color: #d4ae7b;
}
.tfpw-related__swatch:hover {
	transform: scale(1.08);
}
.tfpw-related__swatch:focus-visible {
	outline: 1.5px solid #d4ae7b;
	outline-offset: 1px;
}

/* =========================================================================
   9. Shared popup shell (used by both Add-ons and Share Your Heart)
   ========================================================================= */

.tfpw-addons-popup,
.tfpw-share-heart-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.tfpw-addons-popup.is-open,
.tfpw-share-heart-popup.is-open {
	display: flex;
}
.tfpw-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 15, 15, 0.55);
}
.tfpw-popup__panel {
	position: relative;
	z-index: 1;
	background: var(--tfpw-cream-2);
	border-radius: 16px;
	max-height: 90vh;
	overflow-y: auto;
	width: 100%;
	animation: tfpw-popup-in 0.25s ease;
}
@keyframes tfpw-popup-in {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.tfpw-popup__close {
	border: none;
	background: transparent;
	color: var(--tfpw-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
}
body.tfpw-popup-open {
	overflow: hidden;
}

/* =========================================================================
   10. Add-ons popup ("Complete the gesture?")
   ========================================================================= */

.tfpw-addons-popup__panel {
	max-width: 1044px;
	background: var(--tfpw-cream);
	display: flex;
	flex-direction: column;
}
.tfpw-addons-popup__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 32px 0;
}
.tfpw-addons-popup__eyebrow {
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tfpw-gold);
	margin: 0;
}
.tfpw-addons-popup__title {
	font-family: var(--tfpw-font-serif);
	font-weight: 500;
	font-size: 30px;
	letter-spacing: -0.3px;
	color: var(--tfpw-ink);
	margin: 4px 0 0;
}
.tfpw-addons-popup__title em {
	font-style: italic;
	color: var(--tfpw-gold);
}
.tfpw-addons-popup__subtitle {
	font-family: var(--tfpw-font-sans);
	font-size: 13px;
	color: var(--tfpw-ink);
	opacity: 0.6;
	margin: 6px 0 0;
}

.tfpw-addons-popup__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 20px 32px 0;
	border-bottom: 0.8px solid var(--tfpw-border);
	padding-bottom: 16px;
	margin: 0 0 0;
}
.tfpw-addons-popup__search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--tfpw-cream-3);
	border: 0.8px solid var(--tfpw-border);
	padding: 8px 12px;
	width: 240px;
	max-width: 100%;
	color: rgba(15, 15, 15, 0.5);
}
.tfpw-addons-popup__search input {
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--tfpw-font-sans);
	font-weight: 300;
	font-size: 13px;
	color: var(--tfpw-ink);
	width: 100%;
}
.tfpw-addons-popup__tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	overflow-x: auto;
}
.tfpw-addons-popup__tab {
	border: 0.8px solid var(--tfpw-border);
	background: transparent;
	color: var(--tfpw-ink);
	font-family: var(--tfpw-font-sans);
	font-size: 12px;
	padding: 8px 14px;
	cursor: pointer;
	white-space: nowrap;
}
.tfpw-addons-popup__tab.is-active {
	background: var(--tfpw-ink);
	border-color: var(--tfpw-ink);
	color: var(--tfpw-cream-3);
}

.tfpw-addons-popup__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 24px 32px;
	overflow-y: auto;
}
@media (max-width: 900px) {
	.tfpw-addons-popup__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.tfpw-addons-popup__grid {
		grid-template-columns: 1fr;
	}
}
.tfpw-addons-popup__card {
	border: 0.8px solid var(--tfpw-border);
	background: var(--tfpw-cream);
	transition: border-color 0.2s ease;
}
.tfpw-addons-popup__card.is-hidden {
	display: none;
}
.tfpw-addons-popup__card.is-selected {
	border-color: var(--tfpw-gold);
}
.tfpw-addons-popup__card-image {
	position: relative;
	aspect-ratio: 1 / 0.75;
	overflow: hidden;
}
.tfpw-addons-popup__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tfpw-addons-popup__add {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--tfpw-cream);
	color: var(--tfpw-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tfpw-addons-popup__card.is-selected .tfpw-addons-popup__add {
	background: var(--tfpw-gold);
	color: var(--tfpw-cream);
	transform: rotate(45deg);
}
.tfpw-addons-popup__card-body {
	padding: 12px;
}
.tfpw-addons-popup__card-cat {
	font-family: var(--tfpw-font-body);
	font-size: 10px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	opacity: 0.4;
	margin: 0 0 4px;
}
.tfpw-addons-popup__card-name {
	font-family: var(--tfpw-font-body);
	font-size: 13px;
	color: var(--tfpw-ink);
	margin: 0 0 4px;
}
.tfpw-addons-popup__card-meta {
	font-family: var(--tfpw-font-body);
	font-size: 11px;
	color: var(--tfpw-ink);
	opacity: 0.5;
	margin: 0 0 6px;
}
.tfpw-addons-popup__card-price {
	font-family: var(--tfpw-font-serif);
	font-size: 16px;
	color: var(--tfpw-gold);
	margin: 0;
}
.tfpw-addons-popup__card-price .amount {
	font-family: inherit;
	font-size: inherit;
}

.tfpw-addons-popup__footer {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--tfpw-cream);
	border-top: 0.8px solid var(--tfpw-border);
	padding: 16px 32px;
}
.tfpw-addons-popup__total {
	flex: 1;
	min-width: 140px;
}
.tfpw-addons-popup__total-label {
	font-family: var(--tfpw-font-sans);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	opacity: 0.5;
	margin: 0;
}
.tfpw-addons-popup__total-price {
	font-family: var(--tfpw-font-serif);
	font-size: 20px;
	color: var(--tfpw-ink);
	margin: 0;
}
.tfpw-addons-popup__total-price .amount {
	font-family: inherit;
	font-size: inherit;
}
.tfpw-addons-popup__footer .tfpw-action-btn {
	width: auto;
	height: auto;
	padding: 14px 26px;
	border-radius: 2px;
	font-size: 14px;
	letter-spacing: 1px;
}
.tfpw-addons-popup__checkout {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--tfpw-gold);
	color: #fff;
	border: none;
	padding: 14px 26px;
	border-radius: 2px;
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}
.tfpw-addons-popup__checkout:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* =========================================================================
   11. Share Your Heart popup (static design only)
   ========================================================================= */

.tfpw-share-heart-popup__panel {
	max-width: 872px;
	background: var(--tfpw-cream-2);
	padding: 40px 32px;
	text-align: center;
}
.tfpw-share-heart-popup__panel .tfpw-popup__close {
	position: absolute;
	top: 24px;
	right: 24px;
}
.tfpw-share-heart-popup__header h3 {
	font-family: var(--tfpw-font-serif);
	font-weight: 500;
	font-size: 28px;
	letter-spacing: 1px;
	color: var(--tfpw-ink);
	margin: 0 0 8px;
}
.tfpw-share-heart-popup__header p {
	font-family: var(--tfpw-font-body);
	font-size: 14px;
	color: #6b6760;
	margin: 0 auto;
	max-width: 480px;
}
.tfpw-share-heart-popup__preview {
	background: var(--tfpw-cream);
	border: 1px solid var(--tfpw-border);
	border-radius: 16px;
	padding: 30px 16px;
	margin: 32px auto;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
/* Real video preview (Figma's "video-demo-area", 612x314 within the 872px
   popup panel) — edge-to-edge, no padding/placeholder chrome, since the
   video itself is the content now. */
.tfpw-share-heart-popup__preview--video {
	padding: 0;
	overflow: hidden;
	max-width: 612px;
	aspect-ratio: 612 / 314;
	background: #000;
}
.tfpw-share-heart-popup__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tfpw-share-heart-popup__play {
	width: 38px;
	height: 38px;
	border-radius: 100px;
	border: 1px solid var(--tfpw-border);
	background: var(--tfpw-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tfpw-gold);
}
.tfpw-share-heart-popup__preview-title {
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 16px;
	color: var(--tfpw-ink);
	margin: 0;
}
.tfpw-share-heart-popup__preview-sub {
	font-family: var(--tfpw-font-body);
	font-size: 12px;
	color: #6b6760;
	margin: 0;
}
.tfpw-share-heart-popup__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	text-align: left;
}
@media (max-width: 640px) {
	.tfpw-share-heart-popup__grid {
		grid-template-columns: 1fr;
	}
}
.tfpw-share-heart-popup__option {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--tfpw-cream);
	border: 1px solid var(--tfpw-border);
	border-radius: 16px;
	padding: 20px;
	cursor: default;
}
.tfpw-share-heart-popup__option-icon {
	width: 44px;
	height: 44px;
	border-radius: 100px;
	background: rgba(201, 158, 67, 0.12);
	color: var(--tfpw-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tfpw-share-heart-popup__option-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tfpw-share-heart-popup__option-text strong {
	font-family: var(--tfpw-font-sans);
	font-weight: 500;
	font-size: 16px;
	color: var(--tfpw-ink);
}
.tfpw-share-heart-popup__option-text em {
	font-style: normal;
	font-family: var(--tfpw-font-body);
	font-size: 13px;
	color: #6b6760;
}
.tfpw-share-heart-popup__option-chevron {
	color: rgba(15, 15, 15, 0.35);
	flex-shrink: 0;
}

/* =========================================================================
   11. Hero Section — the "Products: Hero Section" widget's own grid
   (gallery | title+price+swatches+buttons), matching Figma's first fold.
   ========================================================================= */

.tfpw-hero {
	display: grid;
	grid-template-columns: minmax(0, 672px) minmax(0, 1fr);
	/* gap + max-width per client's own live DevTools tweak (tighter than
	   Figma's own hero — client's call, confirmed working on the live
	   page). */
	gap: 15px;
	align-items: start;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 8px;
}
.tfpw-hero__gallery {
	min-width: 0;
}
.tfpw-hero__content {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
/* Spacing below started from the Figma hero frame's own values, then
   was tightened further per the client's own live DevTools tweaks (this
   is the client's own confirmed-working set, not a Figma reading):
   title -> rating 15px, rating -> price 4px, swatches block -> buttons
   10px, each swatch group's own internal gaps 10px, swatch circle 50px
   / photo 34px, column gap to gallery 15px, hero max-width 1140px. */
.tfpw-hero__content .tfpw-title-price {
	margin: 0 0 10px;
}
.tfpw-hero .tfpw-title-price__rating {
	margin-bottom: 4px;
}
.tfpw-hero__content .chel-variation-swatches-widget {
	margin: 0 0 10px;
}
.tfpw-hero .chel-swatches-wrap {
	margin: 0 0 10px;
}
.tfpw-hero .chel-swatches-wrap:last-child {
	margin-bottom: 0;
}
.tfpw-hero .chel-swatches-heading {
	margin: 0 0 10px;
}
.tfpw-hero .chel-swatch-list {
	row-gap: 16px;
	column-gap: 10px;
}
.tfpw-hero__content .tfpw-actions-panel {
	margin: 0;
	gap: 15px;
}
.tfpw-hero .tfpw-actions-panel__surprise {
	margin-bottom: 5px; /* combines with the 15px gap above for a 20px gap to the feature icons row, matching Figma */
}
/* This block already shows its own price above, so WooCommerce's own
   inline "single_variation_wrap" price/availability blurb under the
   swatches — and the quantity stepper, which Figma doesn't show — are
   hidden here without removing them from the form; they still work
   normally, just visually collapsed. !important because the active
   theme/WooCommerce ships its own ".woocommerce div.product form.cart
   div.quantity" rule that is MORE specific than a plain class selector
   (4 classes vs. our 3), so a plain "display:none" loses to it. */
.tfpw-hero__content .chel-variation-swatches-widget .single_variation_wrap,
.tfpw-hero__content .chel-variation-swatches-widget .quantity {
	display: none !important;
}
/* chelInit() (product-widgets.js) inserts each ".chel-swatches-wrap" as
   a sibling of the <tr> it replaces — which, since that <tr> lives
   inside <table class="variations">, leaves the wrap actually nested
   INSIDE that table (a jQuery .after()/.remove() pair doesn't "hoist"
   it out the way the HTML parser would). So the table must stay
   visible — do NOT display:none it, that hides the swatches with it —
   only its own default margin/padding/border is reset here, in case
   the theme/WooCommerce styles table.variations with either. */
.tfpw-hero__content .chel-variation-swatches-widget table.variations {
	margin: 0;
	padding: 0;
	border: none;
}
/* The active theme/WooCommerce ships its own ".woocommerce div.product
   form.cart { margin-bottom: 2em; }" — that 2em (not our own spacing)
   was the real source of the extra gap under the swatches. Neutralised
   here, scoped to just this widget's own form, so the 40px gap already
   set on ".chel-variation-swatches-widget" above is the only source of
   that spacing. !important because that theme rule is "div.product
   form.cart" (2 elements + 2 classes) which is MORE specific than a
   plain 3-class selector — same fight as the quantity/single_variation
   rule above. */
.tfpw-hero__content .chel-variation-swatches-widget form.cart {
	margin-bottom: 0 !important;
}

@media (max-width: 900px) {
	.tfpw-hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.tfpw-hero__gallery .tfpw-gallery__main {
		max-width: 100%;
	}
}

/* =========================================================================
   12. Variation swatches — ported verbatim from the old standalone
   "The Florist — Product Variation Swatches" plugin's
   assets/css/variation-swatches.css (same class names, same rules), so
   the already client-confirmed look (no ring by default, gold ring
   #d4ae7b on hover/selected only) is unchanged inside this plugin.

   Final spec (confirmed by client): ALL swatches (flower colour circles
   AND material/presentation squares) behave identically:
     - No ring at all by default.
     - Hovering a swatch shows a gold ring (#d4ae7b) as a preview.
     - The currently selected swatch keeps that gold ring permanently.
     - No other swatch ever shows a ring.
   The photo/colour itself is always visible (36px inset) — only the
   ring is conditional.
   ========================================================================= */

.chel-variation-swatches-widget .variations {
	border: none;
}

.chel-variation-swatches-widget .variations tr,
.chel-variation-swatches-widget .variations td.label,
.chel-variation-swatches-widget .variations td.value select {
	all: unset;
}

/* Hide the native <select> visually but keep it functional/readable by
   WooCommerce's core variation script and by screen readers. */
.chel-swatches-wrap select.chel-native-select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.chel-swatches-wrap {
	margin: 0 0 32px;
}

.chel-swatches-heading {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--tfpw-font-serif);
	font-size: 18px;
	font-weight: 500;
	margin: 0 0 20px;
	color: var(--tfpw-ink);
}

.chel-swatches-heading::before {
	content: attr(data-step);
	font-size: 13px;
	color: var(--tfpw-gold);
	font-family: inherit;
}

.chel-swatch-list {
	display: flex;
	flex-wrap: wrap;
	row-gap: 24px;
	column-gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Hard reset — the theme/Elementor global button styles (background on
   hover/focus, default browser focus outline, etc.) must never bleed
   into these swatches. */
button.chel-swatch,
button.chel-swatch:hover,
button.chel-swatch:focus,
button.chel-swatch:active,
button.chel-swatch:visited {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 60px;
	cursor: pointer;
	font-family: inherit;
	background: none !important;
	color: inherit !important;
}

/* --- Ring wrapper (shared by both flower circles and material squares) */

.chel-swatch-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 0.8px solid transparent; /* no ring by default */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

/* Gold ring: only on hover (preview) or on the selected swatch. */
.chel-swatch:hover .chel-swatch-circle,
.chel-swatch.is-active .chel-swatch-circle {
	border-color: #d4ae7b;
}

button.chel-swatch:focus-visible .chel-swatch-circle {
	border-color: #d4ae7b;
	outline: none;
}

.chel-swatch:hover .chel-swatch-circle {
	transform: scale(1.05);
}

/* The actual photo/colour — 34px, inset inside the 50px ring (client's
   own live-tweaked size, tighter than Figma's original 60px/36px).
   Flower swatches stay fully round; material swatches get a slight
   square rounding (overridden below). */
.chel-swatch-image {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.chel-swatch-list.chel-swatch-list--square .chel-swatch-image {
	border-radius: 8px;
}

/* Client-confirmed spec: a Color swatch that has no variation for the
   currently selected Material is not dimmed/greyed — it is removed from
   the row entirely (product-widgets.js toggles this class on the <li>). */
.chel-swatch-list li.chel-swatch-item-hidden {
	display: none;
}

.chel-swatch-caption {
	font-size: 12px;
	line-height: 14px;
	text-align: center;
	color: #4d4d4d;
}

.chel-swatch.is-active .chel-swatch-caption {
	color: var(--tfpw-ink);
	font-weight: 600;
}

/* Fallback look for attribute values that have no uploaded swatch image
   yet — a soft neutral chip instead of a broken/empty circle */
.chel-swatch-image.chel-swatch-fallback {
	background: #f2f0ec;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: #6b6b6b;
	text-transform: uppercase;
}