/**
 * Pink Bow — theme CSS
 *
 * The block theme handles most layout and color via theme.json + the Site Editor.
 * This file owns:
 *   1. Custom post-type and taxonomy styling (gallery, scoop cards)
 *   2. WooCommerce overrides where theme.json can't reach
 *   3. Decorative flourishes + page-load reveal animations
 *   4. The three-font wordmark (Allura + Sacramento + Cormorant Garamond)
 */

/* Google Fonts — full four-font typography stack.
   Wordmark:   Allura (script) + Sacramento (display script)
   Headings:   Cormorant Garamond (400, 500, italic)
   Body / UI:  Inter Tight (400, 500, 600, 700)
   Loaded from Google CDN. The local .woff2 entries in theme.json's
   fontFamilies block are placeholders — these @imports are the source
   of truth until those files are actually installed. */
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Sacramento&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter+Tight:wght@400;500;600;700&display=swap');

/* -----------------------------------------------------------
   Tokens — mirror theme.json values for use in raw CSS
   ----------------------------------------------------------- */
:root {
	/* Canonical palette — Beauty Cosmetic Store-derived hex values.
	   MUST match theme.json palette + CLAUDE.md.
	   Headings + heavy typography use --pb-ink. Body uses --pb-text-gray.
	   --pb-pink-bow is now the hot-pink CTA / accent (was dusty rose). */
	--pb-pale:      #FDF4F9; /* lightest pink wash — footer / cards */
	--pb-blush:     #F9E1EA; /* section backgrounds */
	--pb-baby-pink: #F5C6D0; /* soft accent */
	--pb-pink-bow:  var(--pb-pink-bow); /* hot pink — CTAs, "Pink Bow" wordmark, accents */
	--pb-ink:       #111111; /* headings, wordmark frame */
	--pb-text-gray: #797979; /* body text */
	--pb-lavender:  #C8B6E8; /* Bow Personality only (purple bow). Never use in chrome. */
	--pb-white:     #FFFFFF;

	/* Back-compat aliases — pre-Beauty code may still reference these names.
	   Aliased to the closest canonical color so old references keep rendering
	   sensibly. Remove a line here only after grep confirms zero callers. */
	--pb-main-pink:  var(--pb-pink-bow);  /* was #E8A0B5 glittery pink */
	--pb-plum:       var(--pb-ink);       /* was #5A2840 dark plum */
	--pb-ivory:      var(--pb-white);     /* was #FDFAF4 */
	--pb-cream:      var(--pb-pale);      /* was #FBF6EE */
	--pb-rose:       var(--pb-baby-pink); /* was #F0B5C8 */
	--pb-text-pink:  var(--pb-text-gray); /* was #8A4F62 */
	--pb-gold:       var(--pb-pink-bow);  /* was #B8935A, no more gold */
	--pb-gold-light: var(--pb-pink-bow);
	--pb-soft-gray:  var(--pb-text-gray); /* was #9A8A8E */

	--pb-ease:      cubic-bezier(0.22, 1, 0.36, 1);
	--pb-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------------------------------------
   Body atmosphere — soft cream paper feel
   ----------------------------------------------------------- */
body {
	background-color: var(--pb-ivory);
	background-image:
		radial-gradient(ellipse at top right, rgba(251, 232, 221, 0.4) 0%, transparent 50%),
		radial-gradient(ellipse at bottom left, rgba(229, 198, 138, 0.15) 0%, transparent 50%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------
   Selection
   ----------------------------------------------------------- */
::selection {
	background: var(--pb-blush);
	color: var(--pb-plum);
}

/* -----------------------------------------------------------
   Refined link underlines (offset, thin, animated)
   ----------------------------------------------------------- */
.entry-content a:not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.3s var(--pb-ease-soft);
}

/* -----------------------------------------------------------
   Buttons — refined hover with subtle lift
   ----------------------------------------------------------- */
.wp-block-button__link {
	transition:
		background-color 0.4s var(--pb-ease-soft),
		border-color 0.4s var(--pb-ease-soft),
		color 0.4s var(--pb-ease-soft),
		transform 0.4s var(--pb-ease),
		box-shadow 0.4s var(--pb-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -10px rgba(92, 42, 58, 0.4);
}

/* Outline button variation */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--pb-plum);
	border-color: var(--pb-plum);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--pb-plum);
	color: var(--pb-ivory);
}

/* -----------------------------------------------------------
   Section dividers — gold line with center bow ornament
   ----------------------------------------------------------- */
.wp-block-separator.is-style-pb-bow {
	border: none;
	height: 32px;
	position: relative;
	margin: 4rem auto;
	max-width: 240px;
	background: linear-gradient(90deg, transparent 0%, var(--pb-gold) 25%, var(--pb-gold) 75%, transparent 100%);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: center;
}

.wp-block-separator.is-style-pb-bow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	background-color: var(--pb-ivory);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23B8935A' d='M16 14c-2-3-6-4-8-2-1.5 1.5-1 4 1 5l7 1zm0 0c2-3 6-4 8-2 1.5 1.5 1 4-1 5l-7 1zm-1 1h2l-1 6z' opacity='0.85'/></svg>");
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center;
}

/* -----------------------------------------------------------
   Headings — small italic flourish below H2 in hero contexts
   ----------------------------------------------------------- */
.has-text-align-center.wp-block-heading.is-style-flourish::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	background: var(--pb-gold);
	margin: 1.25rem auto 0;
}

/* -----------------------------------------------------------
   "Example" watermark — small pill in the corner of scoop
   product photos on /shop/, the mystery-scoops category page,
   and the homepage Mystery Scoops grid. Signals to customers
   that the photo is representative of the tier's volume +
   variety, not a literal snapshot of their order.

   Hooks off the .product_cat-mystery-scoops class WC adds to
   every <li> in the loop for products in that category — so
   nail-set products won't get the badge.
   ----------------------------------------------------------- */
li.product_cat-mystery-scoops .wp-block-woocommerce-product-image,
li.product_cat-mystery-scoops .wc-block-components-product-image,
li.product_cat-mystery-scoops .woocommerce-LoopProduct-link {
	position: relative;
}

li.product_cat-mystery-scoops .wp-block-woocommerce-product-image::after,
li.product_cat-mystery-scoops .wc-block-components-product-image::after,
li.product_cat-mystery-scoops .woocommerce-LoopProduct-link::after {
	content: "Example";
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	padding: 0.22rem 0.55rem;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pb-pink-bow);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	pointer-events: none;
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15);
	z-index: 5;
}

/* -----------------------------------------------------------
   Legacy .scoop-card decorative seal — retained for back-compat
   (some templates may still reference these classes) but no
   longer rendered on the shop loop.
   ----------------------------------------------------------- */
.scoop-card {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 4px;
	overflow: hidden;
	background:
		radial-gradient(circle at 30% 20%, var(--pb-rose) 0%, var(--pb-plum) 70%);
	color: var(--pb-ivory);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.75rem 1.5rem;
	transition: transform 0.6s var(--pb-ease), box-shadow 0.6s var(--pb-ease);
	cursor: pointer;
	box-shadow: 0 12px 32px -16px rgba(92, 42, 58, 0.45);
}

.scoop-card::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(229, 198, 138, 0.5);
	border-radius: 2px;
	pointer-events: none;
}

.scoop-card:hover {
	transform: translateY(-6px) scale(1.01);
	box-shadow: 0 24px 48px -16px rgba(92, 42, 58, 0.55);
}

/* Tier-specific gradient variations */
.scoop-tier-mini .scoop-card {
	background: radial-gradient(circle at 30% 20%, var(--pb-blush) 0%, var(--pb-rose) 70%);
	color: var(--pb-plum);
}

.scoop-tier-mini .scoop-card::before {
	border-color: rgba(184, 147, 90, 0.6);
}

.scoop-tier-grand .scoop-card {
	background:
		linear-gradient(135deg, rgba(184, 147, 90, 0.35) 0%, transparent 50%),
		radial-gradient(circle at 70% 80%, var(--pb-pink-bow) 0%, #2A1019 80%);
}

/* Wax seal in upper right */
.scoop-card__seal {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 56px;
	height: 56px;
	color: var(--pb-gold-light);
	opacity: 0.85;
	transition: transform 0.5s var(--pb-ease);
}

.scoop-card:hover .scoop-card__seal {
	transform: rotate(8deg) scale(1.05);
}

.scoop-card__inner {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.scoop-card__eyebrow {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pb-gold-light);
	display: block;
}

.scoop-tier-mini .scoop-card__eyebrow {
	color: var(--pb-gold);
}

.scoop-card__theme {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 0.95rem;
	opacity: 0.85;
	margin-top: -0.25rem;
}

.scoop-card__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.15;
	margin: 0;
	color: inherit;
}

.scoop-card__hint {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.85rem;
	line-height: 1.5;
	margin: 0;
	opacity: 0.85;
	max-width: 26ch;
}

.scoop-card__count {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--pb-gold-light);
	border-top: 1px solid currentColor;
	padding-top: 0.6rem;
	width: fit-content;
}

.scoop-tier-mini .scoop-card__count {
	color: var(--pb-plum);
}

/* Animated shimmer sweep */
.scoop-card__shimmer {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255, 255, 255, 0.12) 50%,
		transparent 70%
	);
	transform: translateX(-100%);
	pointer-events: none;
}

.scoop-card:hover .scoop-card__shimmer {
	animation: scoop-shimmer 1.4s var(--pb-ease) forwards;
}

@keyframes scoop-shimmer {
	to { transform: translateX(100%); }
}

/* Sold-out treatment */
.scoop-card.is-sold-out {
	filter: grayscale(0.4) brightness(0.85);
}

.scoop-card.is-sold-out::after {
	content: "Sold Out";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-8deg);
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--pb-ivory);
	background: rgba(42, 30, 34, 0.85);
	padding: 0.5rem 2rem;
	border: 1px solid var(--pb-gold-light);
	letter-spacing: 0.08em;
}

/* -----------------------------------------------------------
   Single Mystery Scoop product page
   ----------------------------------------------------------- */
body.is-mystery-scoop .woocommerce-product-gallery {
	background: linear-gradient(160deg, var(--pb-blush) 0%, var(--pb-cream) 100%);
	border-radius: 4px;
	padding: 3rem 2rem;
	position: relative;
}

body.is-mystery-scoop .woocommerce-product-gallery::before {
	content: "Sealed Until Purchase";
	position: absolute;
	top: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pb-gold);
	font-weight: 600;
}

/* -----------------------------------------------------------
   WooCommerce shop loop — softer cards
   ----------------------------------------------------------- */
.woocommerce ul.products li.product {
	background: transparent;
	padding: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--pb-plum);
	padding-top: 1rem;
}

.woocommerce ul.products li.product .price {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--pb-ink);
}

.woocommerce ul.products li.product .price ins {
	background: transparent;
	color: var(--pb-pink-bow);
	font-weight: 600;
}

.woocommerce ul.products li.product .button {
	background: transparent;
	color: var(--pb-plum);
	border: 1px solid var(--pb-plum);
	border-radius: 999px;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.7rem 1.5rem;
	margin-top: 0.5rem;
	transition: all 0.4s var(--pb-ease-soft);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--pb-plum);
	color: var(--pb-ivory);
	transform: translateY(-2px);
}

/* On-sale badge */
.woocommerce span.onsale {
	background: var(--pb-gold);
	color: var(--pb-ivory);
	border-radius: 999px;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.4rem 0.9rem;
	min-height: 0;
	min-width: 0;
	line-height: 1;
}

/* -----------------------------------------------------------
   Gallery (nail_gallery CPT) — masonry-feel asymmetric grid
   ----------------------------------------------------------- */
.pink-bow-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}

.pink-bow-gallery-grid > article {
	overflow: hidden;
	border-radius: 4px;
	position: relative;
	aspect-ratio: 4 / 5;
}

.pink-bow-gallery-grid > article:nth-child(7n+1) { aspect-ratio: 4 / 6; }
.pink-bow-gallery-grid > article:nth-child(7n+4) { aspect-ratio: 4 / 4; }

.pink-bow-gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--pb-ease);
}

.pink-bow-gallery-grid > article:hover img {
	transform: scale(1.04);
}

.pink-bow-gallery-grid figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1rem;
	background: linear-gradient(to top, rgba(42, 30, 34, 0.85), transparent);
	color: var(--pb-ivory);
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s, transform 0.4s;
}

.pink-bow-gallery-grid > article:hover figcaption {
	opacity: 1;
	transform: translateY(0);
}

/* -----------------------------------------------------------
   Page-load reveal — first-screen elements fade up gently
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.wp-site-blocks > main > .wp-block-cover:first-child > *,
	.wp-site-blocks > main > .wp-block-group:first-child > * {
		animation: pb-fade-up 0.9s var(--pb-ease) backwards;
	}

	.wp-site-blocks > main > *:first-child > *:nth-child(1) { animation-delay: 0.1s; }
	.wp-site-blocks > main > *:first-child > *:nth-child(2) { animation-delay: 0.25s; }
	.wp-site-blocks > main > *:first-child > *:nth-child(3) { animation-delay: 0.4s; }
	.wp-site-blocks > main > *:first-child > *:nth-child(4) { animation-delay: 0.55s; }
}

@keyframes pb-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* -----------------------------------------------------------
   Header — scroll behavior helper class (added by theme.js)
   ----------------------------------------------------------- */
.wp-block-template-part.site-header {
	transition: background-color 0.35s var(--pb-ease-soft), box-shadow 0.35s var(--pb-ease-soft);
}

.wp-block-template-part.site-header.is-scrolled {
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(232, 160, 181, 0.25);
}

/* -----------------------------------------------------------
   Hero logo — the full circular brand logo on the homepage hero.
   Used as the h1 instead of the text wordmark. Larger than the
   header wordmark because the hero has the space to breathe.
   ----------------------------------------------------------- */
.kpb-hero-logo {
	margin: 1rem auto 0;
	padding: 0;
	font-size: 0; /* h1 with no text content — image only */
	text-align: center;
	line-height: 1;
}

.kpb-hero-logo img {
	display: inline-block;
	width: clamp(280px, 55vw, 560px);
	height: auto;
}

@media (max-width: 640px) {
	.kpb-hero-logo img { width: clamp(220px, 80vw, 360px); }
}

/* -----------------------------------------------------------
   Wordmark — three-font hierarchy from Kathleen's logo,
   used in the sticky site header.
   ----------------------------------------------------------- */
.kpb-wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
	text-decoration: none;
	line-height: 1;
	color: var(--pb-ink);
	transition: opacity 0.25s var(--pb-ease-soft);
}
.kpb-wordmark:hover { opacity: 0.85; }

.kpb-wordmark__kathleens {
	font-family: 'Allura', 'Brush Script MT', cursive;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 400;
	color: var(--pb-ink);
	transform: translateY(0.1em);
}

.kpb-wordmark__pinkbow {
	font-family: 'Sacramento', 'Brush Script MT', cursive;
	font-size: clamp(2.4rem, 3.6vw, 3.2rem);
	font-weight: 400;
	color: var(--pb-pink-bow);
	/* Subtle pink halo — the one pink note in the otherwise black-and-pink wordmark. */
	text-shadow: 0 1px 0 rgba(244, 108, 157, 0.25);
	margin: 0 0.15rem;
}

.kpb-wordmark__shop {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(0.85rem, 1vw, 1rem);
	font-weight: 500;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: var(--pb-ink);
	transform: translateY(-0.15em);
	margin-left: 0.4rem;
}

@media (max-width: 640px) {
	.kpb-wordmark { gap: 0.25rem; }
	.kpb-wordmark__shop { letter-spacing: 0.25em; }
}

/* -----------------------------------------------------------
   Site header layout — two-row, centered wordmark.
   Row 1 = brand (centered, scales to fit window).
   Row 2 = nav (centered) + mini-cart (right).
   ----------------------------------------------------------- */
.kpb-site-header {
	background: var(--pb-white, #ffffff);
	border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.kpb-header-brand {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-bottom: 0.5rem;
}

/* The hero variant of the wordmark — larger, scales with viewport. */
.kpb-wordmark--hero .kpb-wordmark__kathleens {
	font-size: clamp(2.25rem, 5vw, 4rem);
}
.kpb-wordmark--hero .kpb-wordmark__pinkbow {
	font-size: clamp(3.25rem, 7.5vw, 6rem);
}
.kpb-wordmark--hero .kpb-wordmark__shop {
	font-size: clamp(0.95rem, 1.4vw, 1.35rem);
	letter-spacing: 0.4em;
}

.kpb-header-row {
	width: 100%;
	gap: 1.5rem;
}

.kpb-header-nav {
	flex: 1 1 auto;
}
.kpb-header-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
}
.kpb-header-nav__list a {
	font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pb-ink, #111);
	text-decoration: none;
	transition: color 0.2s var(--pb-ease-soft);
}
.kpb-header-nav__list a:hover,
.kpb-header-nav__list a:focus-visible {
	color: var(--pb-pink-bow, #F46C9D);
}

/* Mini-cart sits at the row's right end. */
.kpb-header-minicart {
	flex: 0 0 auto;
	margin-left: auto;
}

@media (max-width: 640px) {
	.kpb-header-nav__list { gap: 1rem; }
	.kpb-header-nav__list a { font-size: 0.78rem; letter-spacing: 0.08em; }
}

/* -----------------------------------------------------------
   Decorative ornament — small bow used as bullet-point alternative
   ----------------------------------------------------------- */
.is-style-pb-ornament-list li::marker {
	content: "✿  ";
	color: var(--pb-pink-bow);
}

/* -----------------------------------------------------------
   Print
   ----------------------------------------------------------- */
@media print {
	body { background: white; }
	.scoop-card__shimmer { display: none; }
}

/* -----------------------------------------------------------
   LIVE NOW banner — sticky bar that appears when a show is live.
   ----------------------------------------------------------- */
.kpb-live-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem 1rem 0.65rem 1.25rem;
	background: linear-gradient(95deg, var(--pb-plum) 0%, var(--pb-pink-bow) 60%, var(--pb-gold) 100%);
	color: var(--pb-ivory);
	font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	box-shadow: 0 8px 24px -10px rgba(92, 42, 58, 0.5);
	transform: translateY(-100%);
	transition: transform 0.5s var(--pb-ease);
}

.kpb-live-banner.is-visible {
	transform: translateY(0);
}

.kpb-live-banner__pulse {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pb-ivory);
	flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(253, 250, 244, 0.7);
	animation: kpb-pulse 1.6s infinite;
}

@keyframes kpb-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(253, 250, 244, 0.7); }
	70%  { box-shadow: 0 0 0 12px rgba(253, 250, 244, 0); }
	100% { box-shadow: 0 0 0 0 rgba(253, 250, 244, 0); }
}

.kpb-live-banner__label {
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-size: 0.72rem;
	flex-shrink: 0;
}

.kpb-live-banner__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-style: italic;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.05rem;
}

.kpb-live-banner__cta {
	color: var(--pb-ivory);
	background: rgba(253, 250, 244, 0.15);
	border: 1px solid rgba(253, 250, 244, 0.4);
	border-radius: 999px;
	padding: 0.35rem 1rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	flex-shrink: 0;
	transition: background 0.3s, border-color 0.3s;
}

.kpb-live-banner__cta:hover {
	background: rgba(253, 250, 244, 0.28);
	border-color: rgba(253, 250, 244, 0.7);
	color: var(--pb-ivory);
}

.kpb-live-banner__close {
	background: transparent;
	border: none;
	color: rgba(253, 250, 244, 0.7);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.25rem;
	flex-shrink: 0;
	transition: color 0.2s;
}

.kpb-live-banner__close:hover { color: var(--pb-ivory); }

@media (max-width: 640px) {
	.kpb-live-banner__label { display: none; }
	.kpb-live-banner__title { font-size: 0.95rem; }
	.kpb-live-banner__cta { padding: 0.3rem 0.75rem; font-size: 0.65rem; }
}

/* When banner is visible, push the sticky header down so they don't overlap. */
.kpb-live-banner.is-visible ~ .wp-site-blocks .wp-block-template-part.site-header {
	top: 44px;
}

/* -----------------------------------------------------------
   Live show cards — for the live archive / "next show" displays
   ----------------------------------------------------------- */
.kpb-show-card {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 0;
	background: var(--pb-cream);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 8px 28px -16px rgba(92, 42, 58, 0.25);
	transition: transform 0.4s var(--pb-ease), box-shadow 0.4s var(--pb-ease);
}

.kpb-show-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px -16px rgba(92, 42, 58, 0.35);
}

.kpb-show-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--pb-blush);
	overflow: hidden;
}

.kpb-show-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kpb-show-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: var(--pb-plum);
	color: var(--pb-ivory);
}

.kpb-show-card__badge.is-live {
	background: linear-gradient(95deg, var(--pb-plum) 0%, var(--pb-pink-bow) 100%);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.kpb-show-card__badge.is-live::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pb-ivory);
	animation: kpb-pulse 1.6s infinite;
}

.kpb-show-card__body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

.kpb-show-card__platform {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--pb-gold);
}

.kpb-show-card__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.5rem;
	line-height: 1.15;
	color: var(--pb-plum);
	margin: 0;
}

.kpb-show-card__time {
	font-family: 'Cormorant Garamond', serif;
	font-style: italic;
	font-size: 1rem;
	color: var(--pb-soft-gray);
	margin: 0;
}

.kpb-show-card__countdown {
	font-family: 'Inter Tight', sans-serif;
	font-variant-numeric: tabular-nums;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--pb-pink-bow);
	letter-spacing: 0.04em;
	margin: 0;
}

.kpb-show-card__countdown.is-ended {
	color: var(--pb-plum);
	font-style: italic;
}

@media (max-width: 720px) {
	.kpb-show-card {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------------------
   Live archive / single-show page
   ----------------------------------------------------------- */
.kpb-live-hero {
	padding: 5rem 1rem 4rem;
	text-align: center;
	background:
		radial-gradient(ellipse at top, rgba(247, 221, 224, 0.55) 0%, transparent 60%),
		var(--pb-ivory);
}

.kpb-live-hero__eyebrow {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--pb-gold);
}

/* -----------------------------------------------------------
   "Bow" decorative accent — used as a small ornament before headings
   ----------------------------------------------------------- */
.kpb-bow-mark {
	display: inline-block;
	width: 22px;
	height: 22px;
	vertical-align: middle;
	margin-right: 0.5rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23D27D8B' d='M16 14c-2-3-6-4-8-2-1.5 1.5-1 4 1 5l7 1zm0 0c2-3 6-4 8-2 1.5 1.5 1 4-1 5l-7 1zm-1 1h2l-1 6z'/></svg>");
	background-size: contain;
	background-repeat: no-repeat;
}

/* -----------------------------------------------------------
   SHOP LANDING — category card grid on /shop/
   Big visual entry points into each product category. Each card
   is one clickable <a> with photo + body. Scales to a single
   column on narrow screens.
   ----------------------------------------------------------- */
.kpb-category-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

.kpb-category-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--pb-white);
	border: 1px solid rgba(244, 108, 157, 0.18);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
}

.kpb-category-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px -20px rgba(244, 108, 157, 0.45);
}

.kpb-category-card__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pb-pale);
}

.kpb-category-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--pb-ease-soft);
}
.kpb-category-card:hover .kpb-category-card__photo img {
	transform: scale(1.04);
}

.kpb-category-card__body {
	padding: 1.5rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.kpb-category-card__eyebrow {
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pb-pink-bow);
}

.kpb-category-card__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 500;
	color: var(--pb-ink);
	margin: 0;
	line-height: 1.1;
}

.kpb-category-card__desc {
	font-size: 0.95rem;
	color: var(--pb-text-gray);
	margin: 0;
	line-height: 1.5;
}

.kpb-category-card__cta {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-pink-bow);
}

/* -----------------------------------------------------------
   CATEGORY SWITCHER NAV — top of any /product-category/X/ page
   Small horizontal pill bar with links to all sibling categories.
   "All categories" link on the left, switcher pills on the right.
   ----------------------------------------------------------- */
.kpb-category-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	max-width: 1240px;
	margin: 0 auto;
	padding: 1.25rem var(--wp--preset--spacing--40, 1.5rem) 0;
}

.kpb-category-nav__back {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pb-text-gray);
	text-decoration: none;
	transition: color 0.2s;
}
.kpb-category-nav__back:hover { color: var(--pb-pink-bow); }

.kpb-category-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.kpb-category-nav__list a {
	display: inline-block;
	padding: 0.45rem 1rem;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pb-pink-bow);
	background: var(--pb-blush);
	border: 1px solid rgba(244, 108, 157, 0.25);
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.kpb-category-nav__list a:hover {
	background: var(--pb-pink-bow);
	color: var(--pb-white);
	border-color: var(--pb-pink-bow);
}

@media (max-width: 540px) {
	.kpb-category-nav { padding-top: 1rem; }
	.kpb-category-nav__list a { padding: 0.35rem 0.75rem; font-size: 0.68rem; }
}

/* -----------------------------------------------------------
   CATEGORY PRODUCT GRID — wraps wp:woocommerce/product-collection
   on the /product-category/X/ pages. Forces a 4-column grid with
   square, cropped product photos so customers see a clean catalog
   at a glance instead of giant uncropped uploads. Selectors are
   deliberately specific to beat Woo's `is-flex-container columns-N`
   default and WP's auto-injected layout CSS.
   ----------------------------------------------------------- */
.kpb-category-products .wp-block-woocommerce-product-collection {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1rem;
}

.kpb-category-products ul.wc-block-product-template,
.kpb-category-products ul.wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 1.25rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.kpb-category-products ul.wc-block-product-template > li,
.kpb-category-products ul.wp-block-woocommerce-product-template > li {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 0 1rem !important;
	text-align: center;
	background: var(--pb-white);
	border: 1px solid rgba(244, 108, 157, 0.15);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.25s var(--pb-ease), box-shadow 0.25s var(--pb-ease);
}

.kpb-category-products ul.wc-block-product-template > li:hover,
.kpb-category-products ul.wp-block-woocommerce-product-template > li:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -16px rgba(244, 108, 157, 0.3);
}

.kpb-category-products .wc-block-components-product-image,
.kpb-category-products .wp-block-woocommerce-product-image {
	margin: 0 !important;
}
.kpb-category-products .wc-block-components-product-image img,
.kpb-category-products .wp-block-woocommerce-product-image img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 1 !important;
	object-fit: cover !important;
	display: block !important;
}

.kpb-category-products .wp-block-post-title {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 1.1rem !important;
	font-weight: 500 !important;
	font-style: italic !important;
	color: var(--pb-ink) !important;
	margin: 0.85rem 0.75rem 0.25rem !important;
	line-height: 1.2 !important;
}
.kpb-category-products .wp-block-post-title a {
	color: inherit !important;
	text-decoration: none !important;
}

.kpb-category-products .wc-block-components-product-price,
.kpb-category-products .wp-block-woocommerce-product-price {
	font-family: 'Inter Tight', sans-serif !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	color: var(--pb-pink-bow) !important;
	margin: 0 0.75rem !important;
}
.kpb-category-products .wc-block-components-product-price del,
.kpb-category-products .wp-block-woocommerce-product-price del {
	color: var(--pb-text-gray) !important;
	font-weight: 400 !important;
	margin-right: 0.35rem !important;
}

@media (max-width: 900px) {
	.kpb-category-products ul.wc-block-product-template,
	.kpb-category-products ul.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	.kpb-category-products ul.wc-block-product-template,
	.kpb-category-products ul.wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* -----------------------------------------------------------
   MYSTERY SCOOPS — homepage 5-up scoop card grid
   Hand-rolled markup (not wp:woocommerce/product-collection) so
   we don't fight WP's auto-generated layout CSS.
   ----------------------------------------------------------- */
.kpb-scoop-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

.kpb-scoop-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--pb-white);
	border: 1px solid rgba(244, 108, 157, 0.15);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
}

.kpb-scoop-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -16px rgba(244, 108, 157, 0.35);
}

.kpb-scoop-card__photo {
	position: relative;
	aspect-ratio: 1;
	background: var(--pb-pale);
	overflow: hidden;
}

.kpb-scoop-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder for Mini Scoop (no image yet) — soft pink background
   with a decorative bow flourish via gradient. */
.kpb-scoop-card__photo--placeholder {
	background:
		radial-gradient(circle at 50% 45%, rgba(244, 108, 157, 0.18) 0%, rgba(244, 108, 157, 0) 60%),
		var(--pb-pale);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kpb-scoop-card__photo--placeholder::before {
	content: "✿";
	font-size: 2.5rem;
	color: var(--pb-pink-bow);
	opacity: 0.5;
}

/* Example pill — top-right of the haul photo */
.kpb-scoop-card__example {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	padding: 0.2rem 0.55rem;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pb-pink-bow);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15);
	z-index: 5;
}

.kpb-scoop-card__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.75rem 0.5rem;
	text-align: center;
}

.kpb-scoop-card__title {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pb-ink);
}

.kpb-scoop-card__price {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--pb-pink-bow);
}

.kpb-scoop-card__price del {
	color: var(--pb-text-gray);
	font-weight: 400;
	margin-right: 0.35rem;
	text-decoration-thickness: 1px;
}

@media (max-width: 900px) {
	.kpb-scoop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
	.kpb-scoop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kpb-scoop-card__title { font-size: 0.72rem; }
}

/* -----------------------------------------------------------
   PICK YOUR BOW — homepage personality teaser grid
   Renders four bow-personality lifestyle photos as clickable cards.
   ----------------------------------------------------------- */
.kpb-pick-bow-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
}

.kpb-pick-bow-card {
	display: block;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
	background: var(--pb-white);
	border: 1px solid rgba(244, 108, 157, 0.15);
	transition: transform 0.3s var(--pb-ease), box-shadow 0.3s var(--pb-ease);
}

.kpb-pick-bow-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -16px rgba(244, 108, 157, 0.35);
}

.kpb-pick-bow-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.kpb-pick-bow-card__label {
	display: block;
	padding: 0.65rem 0.5rem;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	color: var(--pb-pink-bow);
	background: var(--pb-pale);
}

@media (max-width: 720px) {
	.kpb-pick-bow-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 480px;
	}
}

/* -----------------------------------------------------------
   GRAND OPENING badge — small eyebrow above the price on
   scoop product pages while launch pricing is in effect.
   ----------------------------------------------------------- */
.kpb-launch-badge {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.3rem 0.7rem;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--pb-pink-bow);
	background: var(--pb-blush);
	border-radius: 999px;
	border: 1px solid rgba(244, 108, 157, 0.25);
}

/* -----------------------------------------------------------
   "What's inside" summary on scoop product pages
   ----------------------------------------------------------- */
.kpb-scoop-summary {
	margin: 1rem 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--pb-pale);
	border-radius: 8px;
	border: 1px solid rgba(244, 108, 157, 0.18);
}

.kpb-scoop-summary__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--pb-ink);
	margin: 0 0 0.5rem;
	display: flex;
	align-items: center;
}

.kpb-scoop-summary__list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.9rem;
	color: var(--pb-text-gray);
	line-height: 1.6;
}

.kpb-scoop-summary__list li {
	padding: 0.2rem 0;
}

.kpb-scoop-summary__list li::before {
	content: '✿  ';
	color: var(--pb-pink-bow);
}

.kpb-scoop-summary__list li strong {
	color: var(--pb-pink-bow);
}

/* -----------------------------------------------------------
   BUNDLE PRICING TABLE — legacy class kept for backwards compat
   only; the table itself is no longer rendered.
   ----------------------------------------------------------- */
.kpb-bundle-table {
	margin: 1.5rem 0 2rem;
	background: var(--pb-pale);
	border-radius: 8px;
	padding: 1.5rem;
	border: 1px solid rgba(232, 160, 181, 0.25);
}

.kpb-bundle-table__title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--pb-ink);
	margin-bottom: 1rem;
}

.kpb-bundle-table__grid {
	width: 100%;
	border-collapse: collapse;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.875rem;
}

.kpb-bundle-table__grid thead th {
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.7rem;
	color: var(--pb-pink-bow);
	padding: 0 12px 10px;
	text-align: left;
	border-bottom: 1px solid rgba(232, 160, 181, 0.3);
}

.kpb-bundle-table__grid tbody td {
	padding: 12px;
	border-bottom: 1px solid rgba(232, 160, 181, 0.15);
	vertical-align: middle;
	color: #5A3D47;
}

.kpb-bundle-table__grid tbody tr:last-child td {
	border-bottom: none;
}

.kpb-savings {
	color: #B07088 !important;
	font-weight: 600;
}

.kpb-best-value {
	background: linear-gradient(90deg, rgba(248, 200, 212, 0.2) 0%, rgba(255, 248, 249, 0) 100%);
}

.kpb-badge {
	display: inline-block;
	background: var(--pb-pink-bow);
	color: #FFFFFF;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 6px;
	vertical-align: middle;
}

.kpb-bundle-note {
	font-size: 0.8rem;
	color: var(--pb-pink-bow);
	opacity: 0.8;
	font-style: italic;
	margin-top: 1rem;
	line-height: 1.5;
}

.kpb-mini-upsell {
	background: linear-gradient(90deg, var(--pb-blush), var(--pb-pale));
	border-radius: 6px;
	padding: 12px 16px;
	margin: 1rem 0;
	font-size: 0.9rem;
	color: var(--pb-pink-bow);
}

.kpb-mini-upsell a {
	color: var(--pb-pink-bow);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* -----------------------------------------------------------
   SCOOP PRODUCT CARDS — shop loop (updated for real brand palette)
   ----------------------------------------------------------- */
.scoop-card {
	background: linear-gradient(160deg, var(--pb-pale) 0%, var(--pb-blush) 100%);
	border: 1px solid rgba(232, 160, 181, 0.2);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.scoop-card--mini {
	background: linear-gradient(160deg, var(--pb-pale) 0%, #F9D5DD 100%);
}

.scoop-card--standard {
	background: linear-gradient(160deg, var(--pb-pale) 0%, var(--pb-blush) 100%);
}

.scoop-card__visual {
	aspect-ratio: 4/5;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.scoop-card__bow-badge {
	position: absolute;
	top: 12px;
	right: 12px;
}

.scoop-card__count-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--pb-pink-bow);
	color: #FFFFFF;
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.scoop-card__body {
	padding: 1rem 1.25rem 1.25rem;
}

.scoop-card__type {
	font-family: 'Inter Tight', sans-serif;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #B07088;
	margin-bottom: 4px;
}

.scoop-card__name {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--pb-pink-bow);
	line-height: 1.1;
	margin-bottom: 4px;
}

.scoop-card__items {
	font-size: 0.8rem;
	color: var(--pb-pink-bow);
	margin-bottom: 8px;
	font-style: italic;
}

.scoop-card__price {
	font-family: 'Inter Tight', sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: #5A3D47;
}

.scoop-card__bonus {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.7rem;
	color: var(--pb-pink-bow);
	font-weight: 600;
	margin-top: 6px;
	background: rgba(232, 160, 181, 0.12);
	padding: 4px 10px;
	border-radius: 999px;
}

/* -----------------------------------------------------------
   CART ORDER NOTES FIELD
   ----------------------------------------------------------- */
.kpb-cart-note {
	margin: 2rem 0;
	background: #FFFFFF;
	border: 1px solid rgba(232, 160, 181, 0.25);
	border-radius: 16px;
	padding: 20px 22px 18px;
}

.kpb-cart-note__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.kpb-cart-note__bow {
	flex-shrink: 0;
}

.kpb-cart-note__label {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--pb-pink-bow);
	cursor: pointer;
}

.kpb-cart-note__hint {
	font-size: 0.825rem;
	color: #8A5C70;
	line-height: 1.5;
	margin-bottom: 12px;
}

.kpb-cart-note__examples {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.kpb-cart-note__example {
	font-size: 0.75rem;
	font-style: italic;
	color: #B07088;
	background: rgba(232, 160, 181, 0.1);
	border: 1px solid rgba(232, 160, 181, 0.25);
	border-radius: 999px;
	padding: 3px 11px;
	line-height: 1.5;
}

.kpb-cart-note__field {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(201, 112, 137, 0.25);
	border-radius: 10px;
	font-family: 'Inter Tight', -apple-system, sans-serif;
	font-size: 0.9rem;
	color: #5A3D47;
	background: var(--pb-pale);
	resize: vertical;
	min-height: 80px;
	outline: none;
	transition: border-color 0.3s, box-shadow 0.3s;
	line-height: 1.6;
}

.kpb-cart-note__field:focus {
	border-color: var(--pb-pink-bow);
	box-shadow: 0 0 0 4px rgba(201, 112, 137, 0.1);
}

.kpb-cart-note__field::placeholder {
	color: #B07088;
	opacity: 0.6;
}

.kpb-cart-note__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	flex-wrap: wrap;
	gap: 4px;
}

.kpb-cart-note__char-count {
	font-size: 0.75rem;
	color: #B07088;
}

.kpb-cart-note__optional {
	font-size: 0.75rem;
	font-style: italic;
	color: #B07088;
	opacity: 0.8;
}

/* -----------------------------------------------------------
   Single product page.
   Woo's default single-product template puts the gallery in a
   ~512px-basis flex column next to the summary column. The raw
   image is dropped in at its native pixel dimensions (often
   700px+ wide and tall), so without a width constraint it spills
   out of its column and over the right-column title / price /
   buttons. Cap it to its container and let the aspect ratio
   handle the height.
   ----------------------------------------------------------- */
.single-product .wp-block-woocommerce-product-image-gallery,
.single-product .woocommerce-product-gallery {
	max-width: 100%;
	box-sizing: border-box;
}

.single-product .woocommerce-product-gallery__wrapper {
	max-width: 100%;
	margin: 0 auto;
}

.single-product .woocommerce-product-gallery__image {
	display: block;
	max-width: 100%;
}

.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery img,
.single-product .wp-block-woocommerce-product-image-gallery img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 6px;
}

/* Keep the two columns from getting squeezed into a sliver on
   mid-size viewports — at <960px the gallery + summary stack
   naturally via Woo's responsive rules, which is the right call. */
@media (min-width: 960px) {
	.single-product .wp-block-columns {
		gap: 2.5rem;
	}
}

/* Sale badge on the gallery sits absolute-positioned over the
   image; make sure it doesn't get pushed off when the image
   shrinks. */
.single-product .wp-block-woocommerce-product-image-gallery {
	position: relative;
}
.single-product .wp-block-woocommerce-product-image-gallery .onsale {
	top: 0.75rem;
	left: 0.75rem;
}

/* Related Products grid below the main summary — same 4-up
   styling as the category page so it doesn't render at full
   image native size. */
.single-product .wp-block-woocommerce-related-products ul.wc-block-product-template,
.single-product .wp-block-woocommerce-related-products ul.wp-block-woocommerce-product-template,
.related.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 1.25rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.single-product .wp-block-woocommerce-related-products ul.wc-block-product-template > li,
.single-product .wp-block-woocommerce-related-products ul.wp-block-woocommerce-product-template > li,
.related.products ul.products > li {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 0 1rem !important;
	text-align: center;
}

.single-product .wp-block-woocommerce-related-products img,
.related.products ul.products img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 !important;
	object-fit: cover !important;
	display: block !important;
}

@media (max-width: 960px) {
	.single-product .wp-block-woocommerce-related-products ul.wc-block-product-template,
	.single-product .wp-block-woocommerce-related-products ul.wp-block-woocommerce-product-template,
	.related.products ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* -----------------------------------------------------------
   Bow Personality Quiz — /pick-a-bow/
   Mounts onto [data-kpb-quiz-root]. Two screens:
   .kpb-quiz--question (5x) and .kpb-quiz--result.
   ----------------------------------------------------------- */
.kpb-quiz {
	max-width: 640px;
	margin: 2rem auto 4rem;
	padding: 2rem 1.75rem;
	background: #FFFAFB;
	border: 1px solid rgba(232, 160, 181, 0.22);
	border-radius: 18px;
	font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #4A2A38;
}

/* ── Question screen ── */
.kpb-quiz__progress {
	margin-bottom: 1.75rem;
}
.kpb-quiz__step {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #F46C9D;
	margin-bottom: 0.5rem;
}
.kpb-quiz__bar {
	height: 4px;
	width: 100%;
	background: rgba(232, 160, 181, 0.22);
	border-radius: 999px;
	overflow: hidden;
}
.kpb-quiz__bar-fill {
	height: 100%;
	background: #F46C9D;
	border-radius: 999px;
	transition: width 0.35s ease;
}
.kpb-quiz__q {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 500;
	color: #111;
	margin: 0 0 1.5rem;
	line-height: 1.2;
	text-align: center;
}
.kpb-quiz__options {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.65rem;
}
.kpb-quiz__option {
	width: 100%;
	padding: 0.95rem 1.25rem;
	border: 1.5px solid rgba(232, 160, 181, 0.4);
	border-radius: 12px;
	background: #FFFFFF;
	color: #4A2A38;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.2s, background 0.2s, transform 0.15s, color 0.2s;
}
.kpb-quiz__option:hover,
.kpb-quiz__option:focus-visible {
	border-color: #F46C9D;
	background: rgba(244, 108, 157, 0.06);
	color: #F46C9D;
	outline: none;
	transform: translateY(-1px);
}

/* ── Result screen ── */
.kpb-quiz--result {
	text-align: center;
}
.kpb-quiz__eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #F46C9D;
	margin: 0 0 1rem;
}
.kpb-quiz__hero {
	display: block;
	margin: 0 auto 1.25rem;
	width: 160px;
	max-width: 60%;
	height: auto;
}
.kpb-quiz__name {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 500;
	color: #111;
	margin: 0 0 0.4rem;
	line-height: 1.05;
}
.kpb-quiz__tagline {
	font-family: 'Sacramento', 'Brush Script MT', cursive;
	font-size: clamp(1.4rem, 3vw, 1.8rem);
	color: #F46C9D;
	margin: 0 0 1.25rem;
	line-height: 1;
}
.kpb-quiz__body {
	font-size: 1rem;
	color: #5A3D47;
	line-height: 1.6;
	margin: 0 auto 1.75rem;
	max-width: 480px;
}

/* Personality accent bars */
.kpb-quiz--pink   { border-top: 4px solid #F46C9D; }
.kpb-quiz--blue   { border-top: 4px solid #8FB8DE; }
.kpb-quiz--purple { border-top: 4px solid #C8B6E8; }
.kpb-quiz--black  { border-top: 4px solid #111111; }

/* ── Email capture ── */
.kpb-quiz__email {
	margin: 1.5rem auto 1.75rem;
	padding: 1.25rem;
	background: #FFFFFF;
	border: 1px solid rgba(232, 160, 181, 0.25);
	border-radius: 12px;
	max-width: 480px;
	text-align: left;
}
.kpb-quiz__email-label {
	display: block;
	font-size: 0.85rem;
	color: #5A3D47;
	margin-bottom: 0.65rem;
	line-height: 1.5;
	font-style: italic;
}
.kpb-quiz__email-row {
	display: flex;
	gap: 0.5rem;
}
.kpb-quiz__email-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.65rem 0.85rem;
	border: 1.5px solid rgba(232, 160, 181, 0.4);
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.95rem;
	color: #4A2A38;
	background: #FFFAFB;
}
.kpb-quiz__email-input:focus {
	outline: none;
	border-color: #F46C9D;
	box-shadow: 0 0 0 3px rgba(244, 108, 157, 0.12);
}
.kpb-quiz__email-btn {
	flex: 0 0 auto;
	padding: 0.65rem 1.1rem;
	border: none;
	border-radius: 10px;
	background: #F46C9D;
	color: #FFFFFF;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
}
.kpb-quiz__email-btn:hover:not(:disabled) {
	background: #e75088;
	transform: translateY(-1px);
}
.kpb-quiz__email-btn:disabled {
	opacity: 0.7;
	cursor: default;
}
.kpb-quiz__email-status {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	font-style: italic;
	min-height: 1em;
}

/* ── CTA row ── */
.kpb-quiz__cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.kpb-quiz__cta {
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.kpb-quiz__cta--primary {
	background: #F46C9D;
	color: #FFFFFF;
	border-color: #F46C9D;
}
.kpb-quiz__cta--primary:hover {
	background: #e75088;
	border-color: #e75088;
	color: #FFFFFF;
	transform: translateY(-1px);
}
.kpb-quiz__cta--ghost {
	background: transparent;
	color: #F46C9D;
	border-color: rgba(244, 108, 157, 0.4);
}
.kpb-quiz__cta--ghost:hover {
	border-color: #F46C9D;
	background: rgba(244, 108, 157, 0.06);
}

@media (max-width: 480px) {
	.kpb-quiz { padding: 1.5rem 1.25rem; margin: 1rem auto 2.5rem; }
	.kpb-quiz__email-row { flex-direction: column; }
}