@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Luckiest+Guy&family=Playfair+Display:wght@400;500;600;700&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

/**
 * Pocketful of Wonder — 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 (Playfair Display + Great Vibes + Inter Tight)
 *
 * Fonts are loaded via the single @import above (Google CDN). theme.json's
 * fontFamilies block declares no fontFace entries — no local .woff2 files
 * exist in this theme, so declaring fontFace would silently fall back to
 * system fonts.
 */

/* -----------------------------------------------------------
   Tokens — mirror theme.json values for use in raw CSS
   ----------------------------------------------------------- */
:root {
	/* Pocketful of Wonder — sampled from the logo artwork.
	   Headings use --pow-plum-ink. Body uses --pow-quill.
	   --pow-amethyst is the single interactive accent: CTAs, links, focus. */
	--pow-paper:      #FDFAF6; /* page background — warm paper */
	--pow-whisper:    #F6F0E6; /* cream wash — footer, cards */
	--pow-lilac-mist: #EFE6F1; /* section backgrounds */
	--pow-wisteria:   #C3A8CE; /* soft accent, dividers — never text (2.06:1) */
	--pow-amethyst:   #6D4B84; /* CTA / links / accent — 6.75:1 on paper, AA */
	--pow-plum-ink:   #3A2440; /* headings, wordmark — 13.4:1, AAA */
	--pow-quill:      #6B5F70; /* body copy — 5.77:1, AA */
	--pow-sage:       #7C8664; /* badges, free-shipping flags — large text / UI only */
	--pow-gold:       #A8875E; /* hairline rules and ornament — non-text only */
	--pow-white:      #FFFFFF;

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

/* -----------------------------------------------------------
   Body atmosphere — soft cream paper feel
   ----------------------------------------------------------- */
body {
	background-color: var(--pow-paper);
	background-image:
		radial-gradient(ellipse at top right, rgba(239, 230, 241, 0.4) 0%, transparent 50%),
		radial-gradient(ellipse at bottom left, rgba(168, 135, 94, 0.15) 0%, transparent 50%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------
   Selection
   ----------------------------------------------------------- */
::selection {
	background: var(--pow-lilac-mist);
	color: var(--pow-plum-ink);
}

/* -----------------------------------------------------------
   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(--pow-ease-soft);
}

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

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

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

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

/* -----------------------------------------------------------
   Section dividers — centred gold hairline with a small diamond,
   echoing the logo's ornamental rules. No bow motif in this shop.
   ----------------------------------------------------------- */
.wp-block-separator.is-style-pow-ornament {
	border: none;
	height: 20px;
	position: relative;
	margin: 4rem auto;
	max-width: 240px;
	background: linear-gradient(90deg, transparent 0%, var(--pow-gold) 25%, var(--pow-gold) 75%, transparent 100%);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: center;
}

.wp-block-separator.is-style-pow-ornament::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 9px;
	height: 9px;
	background-color: var(--pow-gold);
}

/* -----------------------------------------------------------
   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(--pow-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(--pow-amethyst);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	pointer-events: none;
	box-shadow: 0 2px 8px -2px rgba(58, 36, 64, 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(--pow-wisteria) 0%, var(--pow-plum-ink) 70%);
	color: var(--pow-paper);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1.75rem 1.5rem;
	transition: transform 0.6s var(--pow-ease), box-shadow 0.6s var(--pow-ease);
	cursor: pointer;
	box-shadow: 0 12px 32px -16px rgba(58, 36, 64, 0.45);
}

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

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

/* Tier-specific gradient variations */
.scoop-tier-mini .scoop-card {
	background: radial-gradient(circle at 30% 20%, var(--pow-lilac-mist) 0%, var(--pow-wisteria) 70%);
	color: var(--pow-plum-ink);
}

.scoop-tier-mini .scoop-card::before {
	border-color: rgba(168, 135, 94, 0.6);
}

.scoop-tier-grand .scoop-card {
	background:
		linear-gradient(135deg, rgba(168, 135, 94, 0.35) 0%, transparent 50%),
		radial-gradient(circle at 70% 80%, var(--pow-amethyst) 0%, #3A2440 80%);
}

/* Wax seal in upper right */
.scoop-card__seal {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 56px;
	height: 56px;
	color: var(--pow-gold);
	opacity: 0.85;
	transition: transform 0.5s var(--pow-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(--pow-amethyst);
	display: block;
}

.scoop-tier-mini .scoop-card__eyebrow {
	color: var(--pow-amethyst);
}

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

.scoop-card__title {
	font-family: 'Playfair Display', Georgia, 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(--pow-amethyst);
	border-top: 1px solid currentColor;
	padding-top: 0.6rem;
	width: fit-content;
}

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

/* 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(--pow-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: 'Playfair Display', Georgia, serif;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--pow-paper);
	background: rgba(58, 36, 64, 0.85);
	padding: 0.5rem 2rem;
	border: 1px solid var(--pow-gold);
	letter-spacing: 0.08em;
}

/* -----------------------------------------------------------
   Single Mystery Scoop product page
   ----------------------------------------------------------- */
body.is-mystery-scoop .woocommerce-product-gallery {
	background: linear-gradient(160deg, var(--pow-lilac-mist) 0%, var(--pow-whisper) 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(--pow-amethyst);
	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: 'Playfair Display', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--pow-plum-ink);
	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(--pow-plum-ink);
}

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

.woocommerce ul.products li.product .button {
	background: transparent;
	color: var(--pow-plum-ink);
	border: 1px solid var(--pow-plum-ink);
	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(--pow-ease-soft);
}

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

/* On-sale badge */
.woocommerce span.onsale {
	background: var(--pow-gold);
	color: var(--pow-paper);
	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;
}

/* -----------------------------------------------------------
   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: pow-fade-up 0.9s var(--pow-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 pow-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(--pow-ease-soft), box-shadow 0.35s var(--pow-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(195, 168, 206, 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.
   ----------------------------------------------------------- */
.pow-hero-logo {
	margin: 1rem auto 0;
	padding: 0;
	font-size: 0; /* h1 with no text content — image only */
	text-align: center;
	line-height: 1;
}

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

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

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

.pow-wordmark__accent {
	font-family: 'Great Vibes', 'Brush Script MT', cursive;
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 400;
	color: var(--pow-plum-ink);
	transform: translateY(0.1em);
}

.pow-wordmark__brand {
	font-family: 'Great Vibes', 'Brush Script MT', cursive;
	font-size: clamp(2.4rem, 3.6vw, 3.2rem);
	font-weight: 400;
	color: var(--pow-amethyst);
	/* Subtle amethyst halo — the one accent note in the otherwise plum-and-amethyst wordmark. */
	text-shadow: 0 1px 0 rgba(109, 75, 132, 0.25);
	margin: 0 0.15rem;
}

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

@media (max-width: 640px) {
	.pow-wordmark { gap: 0.25rem; }
	.pow-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).
   ----------------------------------------------------------- */
.pow-site-header {
	background: var(--pow-white, #ffffff);
	border-bottom: 1px solid rgba(58, 36, 64, 0.06);
}

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

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

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

.pow-header-nav {
	flex: 1 1 auto;
}
.pow-header-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
}
.pow-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(--pow-plum-ink, #3A2440);
	text-decoration: none;
	transition: color 0.2s var(--pow-ease-soft);
}
.pow-header-nav__list a:hover,
.pow-header-nav__list a:focus-visible {
	color: var(--pow-amethyst, #6D4B84);
}

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

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

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

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

/* -----------------------------------------------------------
   "Bow" decorative accent — used as a small ornament before headings
   ----------------------------------------------------------- */
.pow-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='%236D4B84' 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.
   ----------------------------------------------------------- */
.pow-category-grid {
	display: grid;
	/* Track is CAPPED at 380px, not 1fr. With 1fr a lone category card stretched
	   to the full 1100px container and — at the photo's 4:3 ratio — swallowed the
	   whole screen. auto-fit still lays out two or three cards side by side when
	   more categories launch; they just stop growing past 380px. The min() guard
	   keeps the 300px floor from overflowing narrower viewports. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 380px));
	justify-content: center;
	gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

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

.pow-category-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 48px -20px rgba(109, 75, 132, 0.45);
}

.pow-category-card__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pow-whisper);
}

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

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

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

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

.pow-category-card__desc {
	font-size: 0.95rem;
	color: var(--pow-quill);
	margin: 0;
	line-height: 1.5;
}

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

/* -----------------------------------------------------------
   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.
   ----------------------------------------------------------- */
.pow-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;
}

.pow-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(--pow-quill);
	text-decoration: none;
	transition: color 0.2s;
}
.pow-category-nav__back:hover { color: var(--pow-amethyst); }

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

.pow-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(--pow-amethyst);
	background: var(--pow-lilac-mist);
	border: 1px solid rgba(109, 75, 132, 0.25);
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.pow-category-nav__list a:hover {
	background: var(--pow-amethyst);
	color: var(--pow-white);
	border-color: var(--pow-amethyst);
}

@media (max-width: 540px) {
	.pow-category-nav { padding-top: 1rem; }
	.pow-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.
   ----------------------------------------------------------- */
.pow-category-products .wp-block-woocommerce-product-collection {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 1rem;
}

.pow-category-products ul.wc-block-product-template,
.pow-category-products ul.wp-block-woocommerce-product-template {
	display: grid !important;
	/* auto-fit + a capped track width, NOT repeat(4, 1fr). A fixed four-column
	   grid stranded the three launch boxes in columns 1-3 with a dead fourth
	   column, so the row read as left-justified. auto-fit collapses the unused
	   tracks and justify-content centres what remains — correct for any product
	   count, so adding a fourth box needs no CSS change. The min() guard stops
	   the 240px floor from overflowing viewports narrower than that. */
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 265px)) !important;
	justify-content: center !important;
	gap: 1.25rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 auto !important;
	width: 100% !important;
}

.pow-category-products ul.wc-block-product-template > li,
.pow-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(--pow-white);
	border: 1px solid rgba(109, 75, 132, 0.15);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.25s var(--pow-ease), box-shadow 0.25s var(--pow-ease);
}

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

.pow-category-products .wc-block-components-product-image,
.pow-category-products .wp-block-woocommerce-product-image {
	margin: 0 !important;
}
.pow-category-products .wc-block-components-product-image img,
.pow-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;
}

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

.pow-category-products .wc-block-components-product-price,
.pow-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(--pow-amethyst) !important;
	margin: 0 0.75rem !important;
}
.pow-category-products .wc-block-components-product-price del,
.pow-category-products .wp-block-woocommerce-product-price del {
	color: var(--pow-quill) !important;
	font-weight: 400 !important;
	margin-right: 0.35rem !important;
}

/* The fixed 3-column @900px and 2-column @600px overrides that used to live
   here are gone: they would have re-imposed left-justification at those
   widths. auto-fit already drops to 3 / 2 / 1 tracks at the same points. */

/* -----------------------------------------------------------
   MYSTERY SCOOPS — homepage 3-up scoop card grid
   Hand-rolled markup (not wp:woocommerce/product-collection) so
   we don't fight WP's auto-generated layout CSS.
   ----------------------------------------------------------- */
/* Three columns for the three launch tiers. The source shop ran five, so
   bump this (and the card count in templates/front-page.html) in step if a
   tier is added or retired. */
.pow-scoop-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	max-width: 820px;
	margin: 0 auto;
	padding: 0 1rem;
}

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

.pow-scoop-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -16px rgba(109, 75, 132, 0.35);
}

.pow-scoop-card__photo {
	position: relative;
	aspect-ratio: 1;
	background: var(--pow-whisper);
	overflow: hidden;
}

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

/* Placeholder for Mini Scoop (no image yet) — soft amethyst-tinted
   background with a decorative radial flourish. */
.pow-scoop-card__photo--placeholder {
	background:
		radial-gradient(circle at 50% 45%, rgba(109, 75, 132, 0.18) 0%, rgba(109, 75, 132, 0) 60%),
		var(--pow-whisper);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pow-scoop-card__photo--placeholder::before {
	content: "✿";
	font-size: 2.5rem;
	color: var(--pow-amethyst);
	opacity: 0.5;
}

/* Example pill — top-right of the haul photo */
.pow-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(--pow-amethyst);
	background: rgba(255, 255, 255, 0.92);
	border-radius: 999px;
	box-shadow: 0 2px 8px -2px rgba(58, 36, 64, 0.15);
	z-index: 5;
}

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

.pow-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(--pow-plum-ink);
}

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

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

/* Single column below 540px rather than two — three tiers across two columns
   leaves an orphan, and most traffic arrives from TikTok on a phone where a
   full-width haul photo sells the box better than a thumbnail. */
@media (max-width: 540px) {
	.pow-scoop-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 360px;
	}
	.pow-scoop-card__title { font-size: 0.72rem; }
}

/* -----------------------------------------------------------
   GRAND OPENING badge — small eyebrow above the price on
   scoop product pages while launch pricing is in effect.
   ----------------------------------------------------------- */
.pow-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(--pow-amethyst);
	background: var(--pow-lilac-mist);
	border-radius: 999px;
	border: 1px solid rgba(109, 75, 132, 0.25);
}

/* -----------------------------------------------------------
   "What's inside" summary on scoop product pages
   ----------------------------------------------------------- */
.pow-scoop-summary {
	margin: 1rem 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--pow-whisper);
	border-radius: 8px;
	border: 1px solid rgba(109, 75, 132, 0.18);
}

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

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

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

.pow-scoop-summary__list li::before {
	content: '✿  ';
	color: var(--pow-amethyst);
}

.pow-scoop-summary__list li strong {
	color: var(--pow-amethyst);
}

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

.pow-bundle-table__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--pow-plum-ink);
	margin-bottom: 1rem;
}

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

.pow-bundle-table__grid thead th {
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.7rem;
	color: var(--pow-amethyst);
	padding: 0 12px 10px;
	text-align: left;
	border-bottom: 1px solid rgba(195, 168, 206, 0.3);
}

.pow-bundle-table__grid tbody td {
	padding: 12px;
	border-bottom: 1px solid rgba(195, 168, 206, 0.15);
	vertical-align: middle;
	color: #6B5F70;
}

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

.pow-savings {
	color: #6D4B84 !important;
	font-weight: 600;
}

.pow-best-value {
	background: linear-gradient(90deg, rgba(195, 168, 206, 0.2) 0%, rgba(253, 250, 246, 0) 100%);
}

.pow-badge {
	display: inline-block;
	background: var(--pow-amethyst);
	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;
}

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

.pow-mini-upsell {
	background: linear-gradient(90deg, var(--pow-lilac-mist), var(--pow-whisper));
	border-radius: 6px;
	padding: 12px 16px;
	margin: 1rem 0;
	font-size: 0.9rem;
	color: var(--pow-amethyst);
}

.pow-mini-upsell a {
	color: var(--pow-amethyst);
	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(--pow-whisper) 0%, var(--pow-lilac-mist) 100%);
	border: 1px solid rgba(195, 168, 206, 0.2);
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.scoop-card--mini {
	background: linear-gradient(160deg, var(--pow-whisper) 0%, var(--pow-lilac-mist) 100%);
}

.scoop-card--standard {
	background: linear-gradient(160deg, var(--pow-whisper) 0%, var(--pow-lilac-mist) 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(--pow-amethyst);
	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: #6D4B84;
	margin-bottom: 4px;
}

.scoop-card__name {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--pow-amethyst);
	line-height: 1.1;
	margin-bottom: 4px;
}

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

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

.scoop-card__bonus {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.7rem;
	color: var(--pow-amethyst);
	font-weight: 600;
	margin-top: 6px;
	background: rgba(195, 168, 206, 0.12);
	padding: 4px 10px;
	border-radius: 999px;
}

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

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

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

.pow-cart-note__label {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--pow-amethyst);
	cursor: pointer;
}

.pow-cart-note__hint {
	font-size: 0.825rem;
	color: #6B5F70;
	line-height: 1.5;
	margin-bottom: 12px;
}

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

.pow-cart-note__example {
	font-size: 0.75rem;
	font-style: italic;
	color: #6D4B84;
	background: rgba(195, 168, 206, 0.1);
	border: 1px solid rgba(195, 168, 206, 0.25);
	border-radius: 999px;
	padding: 3px 11px;
	line-height: 1.5;
}

.pow-cart-note__field {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(109, 75, 132, 0.25);
	border-radius: 10px;
	font-family: 'Inter Tight', -apple-system, sans-serif;
	font-size: 0.9rem;
	color: #6B5F70;
	background: var(--pow-whisper);
	resize: vertical;
	min-height: 80px;
	outline: none;
	transition: border-color 0.3s, box-shadow 0.3s;
	line-height: 1.6;
}

.pow-cart-note__field:focus {
	border-color: var(--pow-amethyst);
	box-shadow: 0 0 0 4px rgba(109, 75, 132, 0.1);
}

.pow-cart-note__field::placeholder {
	color: #6D4B84;
	opacity: 0.6;
}

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

.pow-cart-note__char-count {
	font-size: 0.75rem;
	color: #6D4B84;
}

.pow-cart-note__optional {
	font-size: 0.75rem;
	font-style: italic;
	color: #6D4B84;
	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;
	}
}

/* ===========================================================
   BLAYDEN'S CORNER — kids' gaming sub-brand
   ===========================================================
   A bold arcade look for Blayden's page, scoped entirely to
   .pow-blayden so it never touches the main shop palette.
   IP-safe: no third-party characters or logos — colour, type
   and CSS ornament only. Blayden's own art can slot in later.
   ----------------------------------------------------------- */
:root {
	--pow-bl-space:    #1A1145; /* deep indigo page ground */
	--pow-bl-space-2:  #2C1B72; /* lighter indigo for gradients */
	--pow-bl-blue:     #2E5BFF; /* royal blue — glows, borders */
	--pow-bl-gold:     #FFC53D; /* arcade gold — headings, CTA */
	--pow-bl-gold-lt:  #FFD873; /* gold hover */
	--pow-bl-magenta:  #B14BF4; /* purple pop */
	--pow-bl-ink:      #EDE9FF; /* light body text on indigo — 13:1 */
	--pow-bl-ink-soft: #C6BEEA; /* muted light text */
}

/* Whole-page indigo ground with nebula glows */
.pow-blayden {
	background:
		radial-gradient(circle at 15% 12%, rgba(177, 75, 244, 0.35) 0%, transparent 42%),
		radial-gradient(circle at 85% 8%, rgba(46, 91, 255, 0.35) 0%, transparent 45%),
		radial-gradient(circle at 50% 100%, rgba(255, 197, 61, 0.12) 0%, transparent 55%),
		linear-gradient(180deg, var(--pow-bl-space) 0%, var(--pow-bl-space-2) 55%, var(--pow-bl-space) 100%);
	color: var(--pow-bl-ink);
	position: relative;
	overflow: hidden;
}

/* Twinkle field */
.pow-blayden::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.9) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 70% 18%, rgba(255, 255, 255, 0.7) 0, transparent 100%),
		radial-gradient(2px 2px at 40% 68%, rgba(255, 197, 61, 0.9) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 88% 58%, rgba(255, 255, 255, 0.8) 0, transparent 100%),
		radial-gradient(1.5px 1.5px at 10% 82%, rgba(177, 75, 244, 0.9) 0, transparent 100%),
		radial-gradient(2px 2px at 62% 92%, rgba(46, 91, 255, 0.9) 0, transparent 100%);
	opacity: 0.7;
	pointer-events: none;
}

.pow-blayden > * {
	position: relative;
	z-index: 1;
}

/* Headings — arcade poster type in gold */
.pow-blayden h1,
.pow-blayden h2,
.pow-blayden h3 {
	font-family: "Luckiest Guy", "Playfair Display", cursive;
	color: var(--pow-bl-gold);
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 197, 61, 0.35);
}

.pow-blayden h1 {
	-webkit-text-stroke: 1.5px rgba(26, 17, 69, 0.6);
}

/* Body copy stays readable Inter Tight, light on dark */
.pow-blayden p {
	color: var(--pow-bl-ink);
}

/* Eyebrow pill */
.pow-blayden .pow-bl-eyebrow {
	display: inline-block;
	background: rgba(46, 91, 255, 0.22);
	border: 1px solid var(--pow-bl-blue);
	color: var(--pow-bl-gold);
	padding: 0.4em 1.05em;
	border-radius: 999px;
	font-family: "Inter Tight", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.72rem;
}

/* Icon accent row */
.pow-blayden .pow-bl-icons {
	text-align: center;
	margin-top: 1.35rem;
	font-size: clamp(1.4rem, 4vw, 2rem);
	letter-spacing: 0.4em;
	filter: drop-shadow(0 0 10px rgba(255, 197, 61, 0.4));
}

/* is-style-flourish underline → brighter gold on dark */
.pow-blayden .is-style-flourish::after {
	background: var(--pow-bl-gold);
}

/* Buttons — gold arcade coin with dark ink */
.pow-blayden .wp-block-button__link {
	background: var(--pow-bl-gold);
	color: var(--pow-bl-space);
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 10px;
	box-shadow: 0 4px 0 #C8912A, 0 6px 18px rgba(0, 0, 0, 0.35);
}

.pow-blayden .wp-block-button__link:hover {
	background: var(--pow-bl-gold-lt);
	color: var(--pow-bl-space);
	transform: translateY(-2px);
	box-shadow: 0 6px 0 #C8912A, 0 10px 22px rgba(0, 0, 0, 0.4);
}

/* Bio card */
.pow-blayden .pow-bl-card {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(177, 75, 244, 0.35);
	border-radius: 16px;
}

/* Coming-soon arcade cabinet card */
.pow-blayden .pow-bl-soon {
	padding: clamp(1.75rem, 5vw, 3rem);
	background: rgba(26, 17, 69, 0.55);
	border: 2px solid var(--pow-bl-gold);
	border-radius: 18px;
	box-shadow: 0 0 0 4px rgba(46, 91, 255, 0.25), 0 20px 50px rgba(0, 0, 0, 0.45);
}

/* Links inside Blayden's copy */
.pow-blayden a:not(.wp-block-button__link) {
	color: var(--pow-bl-gold);
}

@media (prefers-reduced-motion: reduce) {
	.pow-blayden .wp-block-button__link {
		transition: none;
	}
}