/*
Theme Name: Poazz
Theme URI: https://poazz.test
Author: Poazz
Author URI: https://poazz.test
Description: The Poazz brand theme — "Find something worth clicking." A modern, playful block theme that presents Poazz product discovery. It consumes the frozen Poazz plugin (product data, taxonomy and the /go/{token} affiliate redirect) read-only and modifies nothing about the engine.
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poazz
Tags: block-theme, full-site-editing, blog, e-commerce, custom-colors, custom-logo, wide-blocks
*/

/* ------------------------------------------------------------------
 * Stage 1.2 widescreen layout system.
 *
 * WordPress emits .wp-site-blocks { padding: var(--wp--style--root--padding-*) }
 * from theme.json. Overriding the LEFT/RIGHT root paddings with the
 * Customizer gutter turns the whole site (header, nav, content, footer)
 * widescreen in one place; top/bottom vertical rhythm is untouched.
 * The constrained/wide layout max widths are redefined in the theme's
 * CSS variable block (includes/customizer.php) as
 * --wp--style--global--content-size / --wide-size.
 * ------------------------------------------------------------------ */
.wp-site-blocks {
	--wp--style--root--padding-left: var(--poazz-side-pad);
	--wp--style--root--padding-right: var(--poazz-side-pad);
}

/* Small global additions that complement theme.json. Everything else is
 * handled by the block theme design system. */

/* Visible keyboard focus everywhere (accessibility requirement). */
:where(a, button, .wp-element-button, input, select, textarea):focus-visible {
	outline: 3px solid var(--poazz-accent, var(--wp--preset--color--poazz-accent));
	outline-offset: 2px;
	border-radius: 4px;
}

/* Links on dark surfaces (footer): cream with soft-accent hover, so the
 * deep global link tone never lands on a dark background. */
.has-poazz-deep-background-color .wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--poazz-base);
}
.has-poazz-deep-background-color .wp-block-navigation a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--poazz-accent-soft);
}
.has-poazz-deep-background-color .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

/* Footer legal/disclosure text keeps a comfortable line length. */
.poazz-footer-disclosure {
	max-width: 46rem;
}

/* The Poazz wordmark. One replaceable piece of identity markup.
 * Size follows the Customizer "Wordmark size" control. */
.poazz-wordmark {
	font-weight: 800;
	letter-spacing: 0.14em;
	text-decoration: none;
	line-height: 1;
	color: var(--wp--preset--color--poazz-ink);
	font-size: var(--poazz-wordmark-size, 1.31rem);
	display: inline-flex;
	align-items: baseline;
}
.poazz-wordmark .poazz-wordmark-dot {
	display: inline-block;
	width: 0.42em;
	height: 0.42em;
	margin-left: 0.12em;
	border-radius: 999px;
	background: var(--poazz-accent, var(--wp--preset--color--poazz-accent));
	vertical-align: baseline;
	transform: translateY(-0.05em);
}
.poazz-wordmark .poazz-wordmark-tagline {
	margin-left: 0.9em;
	font-size: 0.55em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--wp--preset--color--poazz-muted);
}
.poazz-wordmark:hover {
	text-decoration: none;
	color: var(--wp--preset--color--poazz-ink);
}
.has-poazz-deep-background-color .poazz-wordmark {
	color: var(--wp--preset--color--poazz-base);
}
.has-poazz-deep-background-color .poazz-wordmark .poazz-wordmark-tagline {
	color: var(--wp--preset--color--poazz-base);
	opacity: 0.75;
}

/* ------------------------------------------------------------------
 * Header row (above the navigation bar). Horizontal alignment follows
 * the Customizer "Header alignment" control (justify-content value).
 * ------------------------------------------------------------------ */
.poazz-header-row {
	align-items: center;
	justify-content: var(--poazz-header-align, space-between);
}

/* ------------------------------------------------------------------
 * Full-width gradient navigation bar (Stage 1.2; centred items Phase 3).
 *
 * The <nav> group is a constrained-layout group: its coloured background
 * spans 100% of the viewport while its inner content is capped to the
 * site content width by WordPress's layout system. Sits directly below
 * the header part in normal document flow. The menu items are centred
 * horizontally; hover/focus states and keyboard reachability are the
 * existing navigation behaviours, untouched.
 * ------------------------------------------------------------------ */
.poazz-navbar .wp-block-navigation {
	justify-content: center;
}
.poazz-navbar {
	background: var(--poazz-nav-gradient) !important;
}
.poazz-navbar .wp-block-navigation {
	min-height: var(--poazz-nav-height, 64px);
	align-items: center;
	font-size: var(--poazz-nav-font-size, 0.94rem);
}
.poazz-navbar .wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--poazz-nav-text, #FFF8F0);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	transition: color 140ms ease, border-color 140ms ease;
}
.poazz-navbar .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.poazz-navbar .wp-block-navigation a:where(:not(.wp-element-button)):focus {
	color: var(--poazz-nav-hover, #FFD9C4);
	border-bottom-color: currentColor;
}
.poazz-navbar .wp-block-navigation .current-menu-item > a,
.poazz-navbar .wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
	border-bottom-color: currentColor;
}
/* Mobile overlay: keep the menu readable over the dark scrim. */
.poazz-navbar .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--poazz-ink);
}
.poazz-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	min-height: var(--poazz-nav-height, 64px);
	align-items: center;
}
@media (max-width: 781px) {
	.poazz-navbar .wp-block-navigation {
		min-height: calc(var(--poazz-nav-height, 64px) - 12px);
	}
}

/* Product grids consume the Customizer "Card gap" value. WordPress's own
 * layout rule uses a zero-specificity :where() selector, so this class
 * selector cleanly takes precedence on every post-template grid. */
.wp-block-post-template.is-layout-grid {
	gap: var(--poazz-card-gap, var(--wp--preset--spacing--40));
}

/* ------------------------------------------------------------------
 * Product card micro-interactions and Customizer-driven card skin.
 * ------------------------------------------------------------------ */
.poazz-product-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--poazz-card-radius, 1.25rem);
	padding: var(--poazz-card-padding, 1.25rem) !important;
	box-shadow: var(--poazz-card-shadow, var(--wp--preset--shadow--card)) !important;
	transition: transform 160ms ease, box-shadow 160ms ease;
}
.poazz-product-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--card-lift) !important;
}
/* Card CTAs pin to the card foot (margin-top:auto) wherever the wrapper
 * is the .poazz-card-cta element (poazz/card-meta, the shortcode, and the
 * PHO render — all Phase 19 emit that wrapper class). */
.poazz-product-card .poazz-card-cta {
	margin-top: auto !important;
	padding-top: 0.75rem;
}

/* Product-page CTA (Phase 18): identical to the standard Poazz buttons —
 * natural content width, standard padding, centred. Phase 19: the CTA
 * anchor also carries the shared poazz-ebay-button class (one treatment,
 * no second button design). */
.poazz-product-page .poazz-card-cta {
	display: flex;
	justify-content: center;
}
.poazz-product-page .poazz-card-cta .wp-block-button__link {
	display: inline-block;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

/* Card images: one consistent frame (aspect from the Customizer),
 * object-fit cover, rounded, so mixed aspect ratios stay tidy inside
 * equal grids. Fixed dimensions prevent layout shift while loading. */
.poazz-card-image {
	margin: 0 0 1rem;
	border-radius: var(--poazz-card-img-radius, 0.85rem);
	overflow: hidden;
	background: var(--wp--preset--color--poazz-base);
}
.poazz-card-image a {
	display: block;
}
.poazz-card-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--poazz-card-aspect, 4 / 3);
	object-fit: cover;
	border-radius: 0;
}

/* Card meta row (price chip + condition) from poazz/card-meta. */
.poazz-card-meta {
	margin: 0 0 1rem;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}
.poazz-card-condition {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--poazz-muted);
}

/* Price chip used in cards and the single template. */
.poazz-price-chip {
	display: inline-block;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: var(--wp--preset--color--poazz-ink);
	color: var(--wp--preset--color--poazz-base);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------
 * Product gallery (single product page).
 * Progressive enhancement: with JS the main frame swaps images; without
 * JS the main image is a plain in-flow image and the remaining genuine
 * images render inside <noscript>.
 * ------------------------------------------------------------------ */
.poazz-gallery {
	margin: 0;
}
.poazz-gallery__main {
	position: relative;
	border-radius: 1.5rem;
	overflow: hidden;
	background: var(--wp--preset--color--poazz-surface);
	box-shadow: var(--wp--preset--shadow--card);
}
.poazz-gallery__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: inherit;
}
.poazz-gallery__trigger img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: inherit;
}
.poazz-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.6rem;
	height: 2.6rem;
	border: 0;
	border-radius: 999px;
	background: rgba(251, 247, 239, 0.92);
	color: var(--wp--preset--color--poazz-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(12, 19, 18, 0.25);
	transition: background 160ms ease;
}
.poazz-gallery__nav:hover {
	background: var(--wp--preset--color--poazz-base);
}
.poazz-gallery__nav--prev {
	left: 0.75rem;
}
.poazz-gallery__nav--next {
	right: 0.75rem;
}
.poazz-gallery__count {
	position: absolute;
	right: 0.9rem;
	bottom: 0.9rem;
	margin: 0;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	background: rgba(12, 19, 18, 0.78);
	color: var(--wp--preset--color--poazz-base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.04em;
}
/* Screen-reader live region (visually hidden). */
.poazz-gallery__status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.poazz-gallery__thumbs {
	display: flex;
	gap: 0.6rem;
	margin-top: 0.75rem;
	flex-wrap: wrap;
}
.poazz-gallery__thumb {
	padding: 0;
	border: 2px solid transparent;
	border-radius: 0.85rem;
	background: none;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 160ms ease, transform 160ms ease;
}
.poazz-gallery__thumb img {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: 0.6rem;
}
.poazz-gallery__thumb:hover {
	transform: translateY(-2px);
}
.poazz-gallery__thumb[aria-current="true"] {
	border-color: var(--poazz-accent, var(--wp--preset--color--poazz-accent));
}
.poazz-gallery__noscript {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.75rem;
}
.poazz-gallery__noscript img {
	width: 100%;
	height: auto;
	border-radius: 1rem;
}

/* ------------------------------------------------------------------
 * Lightbox (created by poazz-gallery.js — no-js visitors never get it).
 * ------------------------------------------------------------------ */
.poazz-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(12, 19, 18, 0.94);
	animation: poazz-fade-in 180ms ease;
}
.poazz-lightbox__figure {
	margin: 0;
	max-width: min(1000px, 100%);
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.poazz-lightbox__figure img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 6rem);
	width: auto;
	height: auto;
	border-radius: 1rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.poazz-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 999px;
	background: rgba(251, 247, 239, 0.92);
	color: var(--wp--preset--color--poazz-ink);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	transition: background 160ms ease, transform 160ms ease;
}
.poazz-lightbox__close:hover {
	background: var(--wp--preset--color--poazz-base);
	transform: scale(1.05);
}
.poazz-lightbox .poazz-gallery__nav {
	background: rgba(251, 247, 239, 0.92);
}
.poazz-lightbox__count {
	position: absolute;
	left: 50%;
	bottom: 1.1rem;
	transform: translateX(-50%);
	margin: 0;
	padding: 0.2em 0.9em;
	border-radius: 999px;
	background: rgba(251, 247, 239, 0.14);
	color: var(--wp--preset--color--poazz-base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.06em;
}
body.poazz-lightbox-open {
	overflow: hidden;
}
@keyframes poazz-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* The frozen plugin appends its own detail module to product content,
 * including a small remote copy of the main image. The theme gallery
 * above already presents that image at full quality, so hide the
 * duplicate image only — all plugin text remains the source of truth. */
.poazz-product-content .poazz-product-image {
	display: none;
}
.poazz-product-content .poazz-product-detail p {
	margin: 0 0 0.9rem;
}
/* Give the shared Poazz CTA anchor the brand button treatment. Phase 19:
 * every Poazz CTA (plugin content button, card blocks, product page) carries
 * the poazz-ebay-button class, so ONE rule governs the treatment. Specificity
 * (0,2,1) deliberately stays above the theme.json button-element emission
 * (.wp-element-button, 0,1,0) so the exact values below always win.
 * The em paddings scale with each context's font size. */
.poazz-ebay-button,
.poazz-product-content .poazz-ebay-button {
	display: inline-block;
	padding: 0.8em 1.6em;
	border-radius: 999px;
	background: var(--poazz-accent, var(--wp--preset--color--poazz-accent));
	color: var(--wp--preset--color--poazz-ink);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}
.poazz-ebay-button:hover,
.poazz-product-content .poazz-ebay-button:hover {
	background: var(--wp--preset--color--poazz-deep);
	color: var(--wp--preset--color--poazz-base);
}

/* Long product titles stay balanced in cards and headings. */
.poazz-product-card .wp-block-post-title a {
	overflow-wrap: break-word;
}
h1, h2, h3 {
	text-wrap: balance;
}

/* Header search: comfortable breathing room (Phase 15, refined Phase 18).
 * The height follows the Customizer "Header search height" control; the
 * field gets real inner padding so the text is not cramped against the
 * rounded border. A dedicated gap keeps the field and the button apart on
 * every viewport (WordPress emits `margin-left: 10px` on the search button,
 * which is unreliable in RTL/inline layouts), and a small inset gap keeps
 * the search itself from touching the wordmark or the header edges. */
.poazz-header-row .wp-block-search {
	max-width: 20rem;
	flex: 1 1 auto;
	min-width: 12rem;
	margin: 0.5rem 0;
}
.poazz-header-row .wp-block-search .wp-block-search__inside-wrapper {
	gap: 0.4rem;
}
.poazz-header-row .wp-block-search .wp-block-search__input {
	min-width: 0;
	padding: 0.65em 1.1em;
	min-height: var(--poazz-search-min-height, 48px);
	box-sizing: border-box;
}
.poazz-header-row .wp-block-search .wp-block-search__button {
	padding: 0.65em 1.3em;
	min-height: var(--poazz-search-min-height, 48px);
	margin-left: 0;
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.poazz-header-row .wp-block-search {
		min-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* ------------------------------------------------------------------
 * Dynamic Discover submenu (Phase 4). Sits inside the gradient nav,
 * inheriting its hover/focus behaviour; the dropdown panel is the deep
 * ink tone used by the existing mobile overlay.
 * ------------------------------------------------------------------ */
.poazz-navbar .wp-block-navigation .wp-block-navigation-submenu {
	color: inherit;
}
.poazz-navbar .wp-block-navigation .wp-block-navigation-submenu__toggle {
	color: var(--poazz-nav-text, #FFF8F0);
	font-weight: 700;
}
.poazz-navbar .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--poazz-ink);
	border-radius: 0.75rem;
	min-width: 12rem;
	padding: 0.5rem 0;
	box-shadow: 0 12px 28px rgba(12, 19, 18, 0.35);
}
.poazz-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--poazz-base);
	padding: 0.45rem 1.1rem;
}
.poazz-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.poazz-navbar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: var(--poazz-nav-hover, #FFD9C4);
}
.poazz-navbar .wp-block-navigation__submenu-icon {
	color: var(--poazz-nav-text, #FFF8F0);
}

/* ------------------------------------------------------------------
 * Centred CTA buttons (Phase 14): homepage hero/closing CTA groups.
 * Contextual only — card CTAs and form buttons keep their layout.
 * ------------------------------------------------------------------ */
.poazz-centred-buttons {
	justify-content: center;
}

/* ------------------------------------------------------------------
 * Breadcrumbs (Phases 10/11). Rendered by the reusable poazz/breadcrumbs
 * block: an ordered list of real site/category links below the nav and
 * above the page title.
 * ------------------------------------------------------------------ */
.poazz-breadcrumbs {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
}
.poazz-breadcrumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.55rem;
}
.poazz-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
}
.poazz-breadcrumbs__item + .poazz-breadcrumbs__item::before {
	content: "\2192"; /* → separator between real links only. */
	color: var(--wp--preset--color--poazz-muted);
}
.poazz-breadcrumbs__item a {
	color: var(--wp--preset--color--poazz-accent-deep);
	text-decoration: none;
}
.poazz-breadcrumbs__item a:hover,
.poazz-breadcrumbs__item a:focus {
	text-decoration: underline;
}
.poazz-breadcrumbs__item [aria-current="page"] {
	color: var(--wp--preset--color--poazz-muted);
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Product page (Phase 10): gallery left, info right on desktop;
 * natural stacking on mobile; no horizontal overflow.
 * ------------------------------------------------------------------ */
.poazz-product-hero {
	align-items: start;
}
.poazz-product-hero__info .poazz-card-cta {
	margin: 0 0 1.25rem !important;
}
/* Phase 18: the button itself keeps its natural, content-based width and is
 * centred (see the product-page CTA rules lower down); the old
 * display:block + max-width stretch was removed. */
.poazz-product-hero__info .poazz-card-meta {
	justify-content: center;
}
.poazz-product-hero__info .poazz-price-chip {
	font-size: 1.15rem;
	padding: 0.35em 1em;
}
/* Product-page hero CTA (Phase 18, corrected Phase 19): centred, natural
 * content width, the real button label rendered server-side ("Buy Now on
 * eBay"). The previous Phase 18 rules hid the label with font-size:0 and
 * rebuilt it from ::before/::after content — that collapsed the theme.json
 * em-based paddings on desktop and produced the wrong-looking pill. Those
 * rules are gone; the anchor keeps its shared poazz-ebay-button treatment. */
.poazz-product-hero__info .poazz-card-cta {
	display: flex;
	justify-content: center;
}
.poazz-product-hero__info .poazz-card-cta .wp-block-button__link {
	display: inline-block;
	width: auto;
	max-width: 100%;
}
.poazz-product-title {
	overflow-wrap: break-word;
}
/* Product-page hero CTA (Phase 18, corrected Phase 19): see the real-label
 * rules above — one shared pill treatment, centred, natural width. */
.poazz-product-page {
	overflow-x: hidden;
}
/* "Ready When You Are" closing CTA (Phase 10, centred Phase 18): price,
 * Buy button, share controls and supporting copy all align to the centre
 * while keeping the existing Poazz button styling. The block already emits
 * text-align:center from the template; these rules explicitly centre the
 * flexible rows (price chip, button, share list) too. */
.poazz-product-closing-cta .poazz-card-meta {
	justify-content: center;
}
.poazz-product-closing-cta .poazz-card-cta {
	display: flex;
	justify-content: center;
}
.poazz-product-closing-cta .wp-block-button {
	display: flex;
	justify-content: center;
}
.poazz-product-closing-cta .poazz-share {
	margin-top: 1.25rem;
}
.poazz-product-closing-cta .poazz-share__title {
	display: none;
}

/* ------------------------------------------------------------------
 * Social sharing (Phase 9): simple share-intent links around the
 * canonical Poazz product URL. No tracking, no external scripts.
 * ------------------------------------------------------------------ */
.poazz-share {
	margin: 1.5rem 0 0;
}
.poazz-share__title {
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 0.6rem;
}
.poazz-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}
.poazz-share__link {
	display: inline-block;
	padding: 0.45em 1em;
	border-radius: 999px;
	background: var(--wp--preset--color--poazz-ink);
	color: var(--wp--preset--color--poazz-base);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-decoration: none;
	transition: background 140ms ease;
}
.poazz-share__link:hover,
.poazz-share__link:focus {
	background: var(--wp--preset--color--poazz-deep);
	color: var(--wp--preset--color--poazz-base);
}
.poazz-share__url {
	margin: 0.9rem 0 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--poazz-muted);
	text-align: center;
}
/* Inside the "Ready When You Are" card everything sits on the centred
 * layout (Phase 18), so the copy-link label centres too. */
.poazz-product-closing-cta .poazz-share__url {
	text-align: center;
}
.poazz-share__input {
	width: min(100%, 22rem);
	padding: 0.45em 0.8em;
	border-radius: 0.5rem;
	border: 1px solid var(--wp--preset--color--poazz-muted);
	background: var(--wp--preset--color--poazz-base);
	color: var(--wp--preset--color--poazz-ink);
	font-size: var(--wp--preset--font-size--x-small);
}

/* ------------------------------------------------------------------
 * Hashtags (Phase 8): deterministic, verified-field-derived tags.
 * ------------------------------------------------------------------ */
.poazz-hashtags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0 0;
	padding: 0;
}
.poazz-hashtag {
	padding: 0.3em 0.9em;
	border-radius: 999px;
	background: var(--wp--preset--color--poazz-accent-soft);
	color: var(--wp--preset--color--poazz-accent-deep);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
}

/* Homepage Browse-by-Interest centring (Phase 18): on the homepage only
 * (body.home is emitted only for the front page) the category/price cards
 * centre their content — title, finds-count, price/meta row and CTA. Cards
 * everywhere else keep the existing alignment. The representative image
 * and its link still fill the card. */
.home .poazz-cat-card {
	text-align: center;
}
.home .poazz-cat-card .poazz-card-meta {
	justify-content: center;
}
.home .poazz-cat-card .wp-block-button,
.home .poazz-cat-card .poazz-card-cta {
	display: flex;
	justify-content: center;
}

/* ------------------------------------------------------------------
 * Category grid (Phase 12) and category archive header.
 * ------------------------------------------------------------------ */
.poazz-category-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.poazz-cat-card-image {
	margin: 0 0 0.25rem;
}
.poazz-cat-card-image .poazz-card-image {
	margin: 0;
}
.poazz-cat-card-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.85rem;
}
.poazz-category-grid-empty {
	color: var(--wp--preset--color--poazz-muted);
}
.poazz-category-archive-header {
	margin-bottom: var(--wp--preset--spacing--50);
}
.poazz-category-archive-image .poazz-card-image {
	margin: 0 0 1rem;
}
.poazz-category-archive-image img {
	display: block;
	width: min(100%, 26rem);
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
}
.poazz-category-archive-title {
	margin: 0 0 0.35rem;
}
.poazz-category-archive-description {
	color: var(--wp--preset--color--poazz-muted);
}
.poazz-category-archive-count {
	color: var(--wp--preset--color--poazz-muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (prefers-reduced-motion: reduce) {
	.poazz-product-card,
	.poazz-product-card:hover,
	.poazz-gallery__thumb,
	.poazz-lightbox,
	.poazz-lightbox__close,
	.poazz-gallery__nav,
	.poazz-navbar .wp-block-navigation a {
		animation: none;
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * v0.3 — Discover sort/filter controls (me.txt §3).
 * A plain GET form plus category links: bookmarkable URL state, works
 * without JavaScript (the select's onchange is progressive enhancement
 * only), and reuses the existing pill/chip visual language.
 * ------------------------------------------------------------------ */
.poazz-discover-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem 1.25rem;
	margin: 1.75rem 0 2rem;
}
.poazz-discover-sort {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}
.poazz-discover-sort__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--poazz-muted);
}
.poazz-discover-select,
.poazz-discover-apply {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	min-height: 44px;
	border-radius: 999px;
}
.poazz-discover-select {
	padding: 0.5em 1.1em;
	max-width: 100%;
	border: 1px solid var(--wp--preset--color--poazz-muted);
	background: var(--wp--preset--color--poazz-surface);
	color: var(--wp--preset--color--poazz-ink);
}
.poazz-discover-select:focus-visible,
.poazz-discover-chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--poazz-accent);
	outline-offset: 2px;
}
.poazz-discover-apply {
	padding: 0.5em 1.2em;
	border: 0;
	font-weight: 700;
	background: var(--wp--preset--color--poazz-ink);
	color: var(--wp--preset--color--poazz-base);
	cursor: pointer;
}
.poazz-discover-apply:hover {
	background: var(--wp--preset--color--poazz-deep);
}
.poazz-discover-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.poazz-discover-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4em 1em;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wp--preset--color--poazz-surface);
	color: var(--wp--preset--color--poazz-ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}
.poazz-discover-chip:hover {
	border-color: var(--wp--preset--color--poazz-accent);
	color: var(--wp--preset--color--poazz-accent-deep);
}
.poazz-discover-chip.is-active {
	background: var(--wp--preset--color--poazz-accent);
	color: var(--wp--preset--color--poazz-ink);
	font-weight: 700;
}
@media (max-width: 600px) {
	.poazz-discover-controls {
		flex-direction: column;
		align-items: stretch;
	}
	.poazz-discover-sort {
		width: 100%;
	}
	.poazz-discover-select {
		flex: 1 1 auto;
		min-width: 0;
	}
}