/**
 * Popcorn global stylesheet: base, shared components (pc-*), core block
 * styles, header, trust bar and footer.
 *
 * Rules: values come from tokens.css only (no raw colours, no px font
 * sizes), logical properties only (RTL), one accent per page through
 * --color-accent* (body.pc-accent-*). Component API: docs/architecture.md.
 *
 * @package popcorn
 */

/* ==========================================================================
   1. Accent per area (Part 4.3)
   ========================================================================== */

.pc-accent-nurture {
	--color-accent: var(--color-nurture);
	--color-accent-strong: var(--color-nurture-strong);
	--color-accent-tint: var(--color-nurture-tint);
	--color-link-underline: var(--color-nurture);
}

.pc-accent-brand {
	--color-accent: var(--color-brand);
	--color-accent-strong: var(--color-brand-strong);
	--color-accent-tint: var(--color-brand-tint);
	--color-link-underline: var(--color-brand);
}

.pc-accent-none {
	--color-accent: var(--color-ink);
	--color-accent-strong: var(--color-ink);
	--color-accent-tint: var(--color-surface);
	--color-link-underline: var(--color-ink-muted);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-block-start: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 0px));
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	overflow-x: clip; /* off-canvas drawers never cause sideways scroll */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	font-weight: 700;
}

h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	font-weight: 700;
}

h3 {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	font-weight: 600;
}

h4,
h5,
h6 {
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	font-weight: 600;
}

p {
	text-wrap: pretty;
}

small,
.pc-small {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.pc-muted {
	color: var(--color-ink-muted);
}

/* Display and page-hero sizes are styling, not heading levels. */
.pc-display {
	font-family: var(--font-heading);
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
	font-weight: 700;
}

.pc-hero__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-hero);
	line-height: var(--line-height-hero);
	letter-spacing: var(--letter-spacing-hero);
	font-weight: 700;
}

a {
	color: var(--color-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--color-link-underline);
	text-decoration-thickness: var(--border-width-strong);
	text-underline-offset: 0.22em;
}

a:hover {
	text-decoration-color: currentColor;
}

/* Focus ring on everything interactive (WCAG 2.4.7). */
:where(a, button, input, select, textarea, summary, [tabindex], .wp-element-button, .wp-block-button__link):focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-input);
}

:where(a):focus-visible {
	border-radius: var(--space-1);
}

::selection {
	background: var(--color-accent-tint);
	color: var(--color-ink);
}

.pc-visually-hidden,
.screen-reader-text,
.pc-hp,
[class*="__hp"] {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link.screen-reader-text:focus {
	clip: auto !important;
	inline-size: auto !important;
	block-size: auto !important;
	margin: 0 !important;
	inset-block-start: var(--space-2);
	inset-inline-start: var(--space-2);
	z-index: 100000;
	padding: var(--space-3) var(--space-4) !important;
	background: var(--color-card);
	color: var(--color-ink);
	border-radius: var(--radius-pill);
	box-shadow: var(--focus-ring);
	font-weight: 700;
}

.pc-icon {
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
	flex: none;
}

[dir="rtl"] .pc-icon--arrow,
[dir="rtl"] .icon-arrow {
	transform: scaleX(-1);
}

/* Site structure: parts sit flush; main carries its own rhythm. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100dvh;
}

.wp-site-blocks > * {
	margin-block: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > .pc-main {
	flex: 1 0 auto;
}

.pc-main {
	padding-block-end: var(--space-9);
}

.pc-main > :first-child {
	margin-block-start: 0;
}

.pc-page-title {
	margin-block: var(--space-7) var(--space-5);
}

/* ==========================================================================
   3. Buttons (Part 4.4). Rumba = .pc-btn--primary only (buy/reserve).
   ========================================================================== */

.pc-btn,
.wp-element-button,
.wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-block-size: var(--touch-target);
	padding: var(--button-secondary-padding);
	border: var(--border-width-strong) solid var(--color-ink);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-button);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}

.pc-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var(--color-ink);
	color: var(--color-on-dark);
}

.pc-btn .pc-icon {
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
}

/* Primary: Rumba, white 19/700 label (3.1:1 → large text only). */
.pc-btn--primary {
	padding: var(--button-padding);
	border-color: transparent;
	border-width: 0;
	background-color: var(--color-cta);
	color: var(--color-on-dark);
	font-size: var(--font-size-button);
	line-height: var(--line-height-button);
	box-shadow: var(--shadow-cta);
}

.pc-btn--primary:hover,
.pc-btn--primary:active {
	background-color: var(--color-cta-strong);
	color: var(--color-on-dark);
	transform: translateY(-2px);
}

.pc-btn--primary:focus-visible {
	box-shadow: var(--focus-ring), var(--shadow-cta);
}

/* Compact primary: cta-strong fill (5.5:1), small "Add". */
.pc-btn--compact {
	padding: var(--button-compact-padding);
	border-color: var(--color-cta-strong);
	background-color: var(--color-cta-strong);
	color: var(--color-on-dark);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.pc-btn--compact:hover {
	background-color: var(--color-cta-strong);
	color: var(--color-on-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

.pc-btn--secondary {
	background-color: transparent;
}

/* Trust: Prussian fill (Join the waitlist, Notify me, Send enquiry). */
.pc-btn--trust,
.wp-block-button.is-style-trust .wp-block-button__link {
	border-color: var(--color-trust);
	background-color: var(--color-trust);
	color: var(--color-on-dark);
}

.pc-btn--trust:hover,
.wp-block-button.is-style-trust .wp-block-button__link:hover {
	background-color: var(--color-trust);
	color: var(--color-on-dark);
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

/* Text link: Prussian label, accent underline. */
.pc-btn--link,
.wp-block-button.is-style-link .wp-block-button__link {
	min-block-size: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--color-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--color-link-underline);
	text-decoration-thickness: var(--border-width-strong);
	text-underline-offset: 0.3em;
}

.pc-btn--link:hover,
.wp-block-button.is-style-link .wp-block-button__link:hover {
	background: none;
	color: var(--color-ink);
	text-decoration-color: currentColor;
}

.pc-btn--block {
	display: flex;
	inline-size: 100%;
}

.pc-btn[disabled],
.pc-btn[aria-disabled="true"],
.wp-element-button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wp-block-buttons {
	gap: var(--space-3);
}

/* ==========================================================================
   4. Cards, panels, tags, labels
   ========================================================================== */

.pc-card,
.wp-block-group.is-style-card {
	background-color: var(--color-card);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	padding: var(--space-5);
}

.pc-panel {
	background-color: var(--color-card);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-soft);
	padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.pc-tag,
p.is-style-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	inline-size: fit-content;
	padding: var(--tag-padding);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent-tint);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-label);
	line-height: var(--line-height-label);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-label);
}

.pc-tag--age {
	/* D-026: Prussian on Pink is 4.0:1 at 13px (fails AA); tint fill + pink border keeps the identity at 9.6:1. */
	border: var(--border-width) solid var(--color-nurture);
	background-color: var(--color-nurture-tint);
	color: var(--color-ink);
	font-weight: 700;
}

.pc-tag--badge {
	background-color: var(--color-brand);
	color: var(--color-ink);
	font-weight: 700;
}

.pc-tag--trust {
	background-color: var(--color-trust);
	color: var(--color-on-dark);
}

.pc-tag--sale {
	background-color: var(--color-cta-strong);
	color: var(--color-on-dark);
	font-weight: 700;
}

.pc-tag--tilt {
	transform: rotate(-4deg);
}

/* D-026: a tag never sits ink-on-solid-Pink at 13px (4.0:1). Accent-filled
   tags (e.g. the Learn intro tag) get the tint fill + accent border instead. */
.pc-tag:not(.pc-tag--badge):not(.pc-tag--trust):not(.pc-tag--sale) {
	border: var(--border-width) solid var(--color-accent);
	background-color: var(--color-accent-tint) !important;
	color: var(--color-ink);
}

.pc-tag--age:not(.pc-tag--badge) {
	border-color: var(--color-nurture);
	background-color: var(--color-nurture-tint) !important;
}

[dir="rtl"] .pc-tag--tilt {
	transform: rotate(4deg);
}

.pc-label {
	font-family: var(--font-body);
	font-size: var(--font-size-label);
	line-height: var(--line-height-label);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-ink-muted);
}

:lang(ar) .pc-label {
	text-transform: none;
}

/* ==========================================================================
   5. Forms (pc-field) — surface fill, 12px radius, visible boundary,
   inline errors next to the field (13.5).
   ========================================================================== */

.pc-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
}

.pc-field > label,
.pc-field__label,
.pc-field legend {
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-weight: 600;
	color: var(--color-ink);
}

.pc-field__req {
	color: var(--color-error);
}

.pc-field__help {
	margin: 0;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	color: var(--color-ink-muted);
}

.pc-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	margin: 0;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-weight: 600;
	color: var(--color-error);
}

.pc-field__error:empty,
.pc-field__error[hidden] {
	display: none;
}

.pc-input,
.pc-field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) {
	inline-size: 100%;
	min-block-size: var(--touch-target);
	box-sizing: border-box;
	padding: var(--space-3) var(--space-4);
	border: var(--border-width-field) solid var(--color-ink-muted);
	border-radius: var(--radius-input);
	background-color: var(--color-surface);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.pc-field textarea {
	min-block-size: calc(var(--touch-target) * 3);
	resize: vertical;
}

.pc-input::placeholder,
.pc-field ::placeholder {
	color: var(--color-ink-muted);
	opacity: 1;
}

.pc-input:focus-visible,
.pc-field :is(input, select, textarea):focus-visible {
	border-color: var(--color-ink);
	box-shadow: var(--focus-ring);
}

.pc-field.is-invalid :is(input, select, textarea),
.pc-field [aria-invalid="true"],
.pc-input[aria-invalid="true"] {
	border-color: var(--color-error);
}

.pc-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--color-ink);
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
	margin: 0;
	flex: none;
}

.pc-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* Quantity stepper (− qty +). */
.pc-stepper {
	display: inline-flex;
	align-items: center;
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-pill);
	background-color: var(--color-card);
}

.pc-stepper button,
.pc-stepper__btn {
	display: grid;
	place-items: center;
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	padding: 0;
	border: 0;
	border-radius: var(--radius-round);
	background: transparent;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-h3);
	font-weight: 700;
	cursor: pointer;
}

.pc-stepper button:hover {
	background-color: var(--color-surface);
}

.pc-stepper input {
	inline-size: 4ch;
	min-block-size: var(--touch-target);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 700;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.pc-stepper input::-webkit-outer-spin-button,
.pc-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ==========================================================================
   6. Stars, price, notices
   ========================================================================== */

/* Marigold stars (graphics, not text). Usage: <span class="pc-stars" style="--rating:4.5"></span> + hidden text. */
.pc-stars {
	--pc-stars-fill: calc(var(--rating, 5) / 5 * 100%);
	display: inline-flex;
	gap: var(--space-1);
	color: var(--color-brand);
	font-size: var(--font-size-body);
	line-height: 1;
	letter-spacing: 0.1em;
}

.pc-stars:empty::before {
	content: "★★★★★" / "";
	background: linear-gradient(to right, var(--color-brand) var(--pc-stars-fill), var(--color-line) var(--pc-stars-fill));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

[dir="rtl"] .pc-stars:empty::before {
	background: linear-gradient(to left, var(--color-brand) var(--pc-stars-fill), var(--color-line) var(--pc-stars-fill));
	-webkit-background-clip: text;
	background-clip: text;
}

.pc-stars svg {
	inline-size: 1em;
	block-size: 1em;
	fill: currentColor;
}

.pc-price {
	font-family: var(--font-body);
	font-size: var(--font-size-price);
	line-height: var(--line-height-price);
	font-weight: 700;
	color: var(--color-ink);
}

.pc-price--sale,
.pc-price ins {
	color: var(--color-cta-strong);
	text-decoration: none;
}

.pc-price__was,
.pc-price del {
	color: var(--color-ink-muted);
	font-size: var(--font-size-body);
	font-weight: 400;
	text-decoration: line-through;
}

.pc-notice {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-4) var(--space-5);
	border: var(--border-width) solid var(--color-line);
	border-inline-start: var(--character-border) solid var(--color-ink);
	border-radius: var(--radius-input);
	background-color: var(--color-card);
	color: var(--color-ink);
}

.pc-notice--success {
	border-inline-start-color: var(--color-success);
}

.pc-notice--error {
	border-inline-start-color: var(--color-error);
}

/* ==========================================================================
   7. Layout helpers
   ========================================================================== */

.pc-stack {
	display: flex;
	flex-direction: column;
	gap: var(--pc-gap, var(--space-4));
}

.pc-stack > * {
	margin-block: 0;
}

.pc-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-gap, var(--space-3));
}

.pc-grid {
	display: grid;
	gap: var(--pc-gap, var(--space-5));
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pc-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1099px) {
	.pc-grid--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 959px) {
	.pc-grid--3,
	.pc-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.pc-grid {
		--pc-gap: var(--space-3);
	}

	.pc-grid--2,
	.pc-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pc-section {
	padding-block: var(--space-9);
}

.pc-section + .pc-section {
	padding-block-start: 0;
}

.pc-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	margin-block-end: var(--space-5);
}

.pc-section__head > * {
	margin: 0;
}

@media (max-width: 599px) {
	.pc-section {
		padding-block: var(--space-8);
	}
}

/* ==========================================================================
   8. Characters (Part 4.5) — interim badge until the brand SVGs arrive.
   ========================================================================== */

.pc-character {
	--pc-character-size: var(--character-size-md);
	display: inline-grid;
	place-items: center;
	inline-size: var(--pc-character-size);
	block-size: var(--pc-character-size);
	flex: none;
}

.wp-block-popcorn-character {
	margin-inline: auto;
}

.pc-character--sm {
	--pc-character-size: var(--character-size-sm);
}

.pc-character--lg {
	--pc-character-size: var(--character-size-lg);
}

@media (max-width: 599px) {
	.pc-character--lg {
		--pc-character-size: var(--character-size-md);
	}
}

.pc-character__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.pc-character--circle {
	box-sizing: border-box;
	border: var(--character-border) solid var(--color-peach);
	border-radius: var(--radius-round);
	background-color: var(--color-nurture);
	box-shadow: var(--shadow-nurture);
	animation: var(--motion-float);
}

.pc-character--circle .pc-character__img {
	inline-size: 76%;
	block-size: 76%;
}

/* ==========================================================================
   9. Core blocks
   ========================================================================== */

.wp-block-separator {
	border: 0;
	border-block-start: var(--border-width) solid var(--color-line);
	opacity: 1;
}

.wp-block-quote {
	margin-inline: 0;
	padding-inline-start: var(--space-5);
	border-inline-start: var(--character-border) solid var(--color-accent);
}

.wp-block-pullquote {
	border-block: var(--border-width) solid var(--color-line);
}

.wp-block-image img,
.wp-block-post-featured-image img {
	border-radius: var(--radius-card);
}

.wp-block-image.is-style-plain img {
	border-radius: 0;
}

.wp-block-table table {
	border-collapse: collapse;
	inline-size: 100%;
	background-color: var(--color-card);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.wp-block-table :is(th, td) {
	padding: var(--space-3) var(--space-4);
	border: var(--border-width) solid var(--color-line);
	text-align: start;
}

.wp-block-table thead {
	border-block-end: 0;
}

.wp-block-details {
	padding-block: var(--space-3);
	border-block-end: var(--border-width) solid var(--color-line);
}

.wp-block-details summary {
	font-weight: 600;
	cursor: pointer;
}

.wp-block-search__inside-wrapper {
	border: 0;
}

.wp-block-search__input {
	min-block-size: var(--touch-target);
	padding: var(--space-2) var(--space-4);
	border: var(--border-width-field) solid var(--color-ink-muted);
	border-radius: var(--radius-pill);
	background-color: var(--color-card);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
}

.wp-block-search__button {
	margin-inline-start: var(--space-2);
}

.wp-block-search__button.has-icon {
	padding: var(--space-2);
	inline-size: var(--touch-target);
}

.wp-block-search__button svg {
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
	min-inline-size: 0;
	min-block-size: 0;
	fill: currentColor;
}

.wp-block-post-title a,
.wp-block-query-title a {
	color: inherit;
	text-decoration: none;
}

.wp-block-query-pagination {
	gap: var(--space-2);
	margin-block-start: var(--space-7);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--touch-target);
	min-block-size: var(--touch-target);
	padding-inline: var(--space-3);
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-weight: 600;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--color-ink);
	color: var(--color-on-dark);
}

[dir="rtl"] .wp-block-query-pagination-previous-arrow,
[dir="rtl"] .wp-block-query-pagination-next-arrow {
	display: inline-block;
	transform: scaleX(-1);
}

/* ==========================================================================
   10. Header (sticky, Peach Cream + blur, Part 6)
   ========================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--z-header);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		inset-block-start: 0;
	}
}

.wp-block-group.pc-header {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-6);
	padding-block: var(--header-padding-block);
	padding-inline: var(--gutter);
	position: relative;
	isolation: isolate;
	border-block-end: var(--border-width) solid var(--color-line);
}

/* Blur lives on a pseudo-element: a backdrop-filter on the header itself
   would trap the fixed mobile menu overlay inside the header box. */
.wp-block-group.pc-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--color-header-bg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.pc-header > * {
	margin: 0 !important;
}

.pc-header .pc-logo-block {
	flex: none;
}

.pc-logo {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}

.pc-logo__img {
	display: block;
	block-size: auto;
}

.pc-header .pc-logo__img {
	inline-size: 132px;
}

/* Main navigation */
.pc-header__nav {
	flex: 1 1 auto;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: 600;
}

.pc-header__nav .wp-block-navigation__container {
	gap: var(--space-6);
}

.pc-header__nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-target);
	color: var(--color-ink);
	text-decoration: none;
}

.pc-header__nav .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-link-underline);
	text-decoration-thickness: var(--border-width-strong);
	text-underline-offset: 0.5em;
}

/* Current section: accent underline. */
.pc-header__nav .current-menu-item > .wp-block-navigation-item__content,
.pc-header__nav .wp-block-navigation-item__content[aria-current] {
	text-decoration-line: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.5em;
}

/* "Learn" and "My account" are in the mobile menu only (Part 5.1). */
.pc-header__nav .pc-nav-mobile-only {
	display: none;
}

.pc-header__nav .wp-block-navigation__responsive-container.is-menu-open .pc-nav-mobile-only {
	display: flex;
}

/* Mobile overlay */
.has-modal-open .wp-site-blocks > header.wp-block-template-part {
	z-index: calc(var(--z-notice) + 10);
}

.wp-block-navigation.pc-header__nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--space-5) var(--gutter);
	background-color: var(--color-bg);
	color: var(--color-ink);
}

.pc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: var(--space-8);
	align-items: flex-start;
}

.pc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--space-2);
	align-items: flex-start;
}

.pc-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--font-heading);
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	padding-block: var(--space-2);
}

.pc-header__nav .wp-block-navigation__responsive-container-open,
.pc-header__nav .wp-block-navigation__responsive-container-close {
	place-items: center;
	inline-size: var(--touch-target);
	block-size: var(--touch-target);
	color: var(--color-ink);
	border-radius: var(--radius-round);
}

.pc-header__nav .wp-block-navigation__responsive-container-close {
	inset-block-start: var(--space-4);
	inset-inline-end: var(--gutter);
}

/* Utility: language, search, account, cart */
.pc-header .pc-header__utility {
	display: flex;
	flex: none;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--space-4);
	margin-inline-start: auto !important;
}

.pc-header__utility > * {
	margin: 0 !important;
}

.pc-header__search .wp-block-search__inside-wrapper {
	align-items: center;
}

.pc-header__search .wp-block-search__button {
	margin: 0;
	border-color: transparent;
	border-radius: var(--radius-round);
	color: var(--color-ink);
	background: transparent;
}

.pc-header__search .wp-block-search__button:hover {
	background-color: var(--color-surface);
	color: var(--color-ink);
}

.pc-header__search.wp-block-search__searchfield-hidden .wp-block-search__input {
	border-width: 0;
}

.pc-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
	inline-size: min(280px, 50vw);
}

.pc-header .wc-block-customer-account__account-icon,
.pc-header .wp-block-woocommerce-customer-account svg {
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
}

.pc-header .wp-block-woocommerce-customer-account a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	min-block-size: var(--touch-target);
	padding: 0;
	color: var(--color-ink);
	font-weight: 600;
	text-decoration: none;
}

.pc-header .wp-block-woocommerce-customer-account a,
.pc-header .wp-block-woocommerce-customer-account a span {
	text-decoration: none;
}

.pc-header .wp-block-woocommerce-customer-account a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-link-underline);
}

.pc-header .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-block-size: var(--touch-target);
	padding: var(--space-2) var(--space-4);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-pill);
	background-color: var(--color-card);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 600;
}

.pc-header .wc-block-mini-cart__button:hover:not([disabled]) {
	opacity: 1;
	box-shadow: var(--shadow-soft);
}

.pc-header .wc-block-mini-cart__icon {
	inline-size: var(--icon-size);
	block-size: var(--icon-size);
	color: var(--color-ink);
}

/* Cart count bubble in Prussian. */
.wc-block-mini-cart__badge {
	background-color: var(--color-prussian) !important;
	color: var(--color-on-dark) !important;
	border-color: var(--color-card) !important;
	font-family: var(--font-body);
	font-weight: 700;
}

/* Mini-cart drawer: calm panel, Rumba only on "Go to checkout". */
.wc-block-mini-cart__drawer .components-modal__content,
.wc-block-mini-cart__drawer .wc-block-mini-cart__template-part {
	background-color: var(--color-bg);
	color: var(--color-ink);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout {
	background-color: var(--color-cta);
	border-color: transparent;
	color: var(--color-on-dark);
	font-size: var(--font-size-button);
	box-shadow: var(--shadow-cta);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover {
	background-color: var(--color-cta-strong);
	color: var(--color-on-dark);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart {
	background-color: transparent;
	border: var(--border-width-strong) solid var(--color-ink);
	color: var(--color-ink);
}

/* Header language switch: compact */
.pc-header .pc-lang-switch__link {
	font-size: var(--font-size-body);
}

/* Header: tablet and mobile */
@media (max-width: 1100px) {
	.wp-block-group.pc-header {
		gap: var(--space-5);
	}

	.pc-header__nav .wp-block-navigation__container {
		gap: var(--space-5);
	}

	.pc-header .wp-block-woocommerce-customer-account .label {
		display: none;
	}
}

@media (max-width: 899px) {
	.pc-header .pc-header__utility {
		gap: var(--space-3);
	}

	.pc-header .wp-block-woocommerce-customer-account .label,
	.pc-header .wp-block-woocommerce-customer-account .label {
		display: none;
	}
}

@media (max-width: 599px) {
	.wp-block-group.pc-header {
		gap: var(--space-2);
		padding-block: var(--space-3);
	}

	.pc-header .pc-logo__img {
		inline-size: 120px;
	}

	.pc-header .pc-lang-switch__link {
		font-size: var(--font-size-small);
	}

	.pc-header .wc-block-mini-cart__button {
		min-inline-size: var(--touch-target);
	}

	.pc-header__nav {
		order: 3;
		flex: none;
	}

	.pc-header .pc-header__utility {
		gap: var(--space-1);
	}

	.pc-header .wp-block-woocommerce-customer-account {
		display: none;
	}

	.pc-header .wc-block-mini-cart__button {
		padding-inline: var(--space-3);
		border-color: transparent;
		background: transparent;
	}

	.pc-header__search:not(.wp-block-search__searchfield-hidden) {
		position: absolute;
		inset-inline: var(--gutter);
		inset-block-start: calc(100% + var(--space-2));
	}

	.pc-header__search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
		inline-size: 100%;
		box-shadow: var(--shadow-soft);
	}
}

/* Checkout header: logo + secure line only */
.pc-header--checkout {
	justify-content: space-between;
}

.pc-header__secure {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-weight: 600;
	color: var(--color-ink);
}

/* ==========================================================================
   11. Trust bar (Prussian, white text; condensed line on mobile)
   ========================================================================== */

.pc-trust-bar {
	--focus-ring: var(--focus-ring-on-dark);
	--color-link-underline: var(--color-ink-on-dark-muted);
	margin: 0;
	padding-block: var(--space-3);
	padding-inline: var(--gutter);
	background-color: var(--color-trust);
	color: var(--color-on-dark);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-weight: 600;
}

.pc-trust-bar a {
	color: var(--color-on-dark);
}

.pc-trust-bar p {
	margin: 0;
	color: var(--color-on-dark);
}

.pc-trust-bar__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-2) var(--space-6);
	max-inline-size: var(--container-max);
	margin-inline: auto;
}

.pc-trust-bar__items > p::before,
.pc-trust-bar__short::before {
	content: "✓" / "";
	margin-inline-end: var(--space-2);
	color: var(--color-on-dark);
}

.pc-trust-bar__short {
	display: none;
	text-align: center;
}

@media (max-width: 781px) {
	.pc-trust-bar__items {
		display: none;
	}

	.pc-trust-bar__short {
		display: block;
	}
}

/* ==========================================================================
   12. Footer (Prussian; logo on a peach plate — never the colour logo on Prussian)
   ========================================================================== */

.pc-footer {
	--focus-ring: var(--focus-ring-on-dark);
	--color-link-underline: var(--color-ink-on-dark-muted);
	margin: 0;
	padding-block: var(--space-9) var(--space-6);
	padding-inline: var(--gutter);
	background-color: var(--color-trust);
	color: var(--color-on-dark);
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

.pc-footer__inner :is(h2, h3, p, li, a) {
	color: var(--color-on-dark);
}

.pc-footer__inner a {
	text-decoration-color: var(--color-ink-on-dark-muted);
	text-decoration-thickness: var(--border-width);
}

.pc-footer__inner a:hover {
	text-decoration-color: var(--color-on-dark);
}

.pc-footer__inner {
	max-inline-size: var(--container-max);
	margin-inline: auto;
}

.pc-footer__columns {
	gap: var(--space-7);
	margin: 0;
}

.pc-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.pc-footer__brand > * {
	margin: 0;
}

.pc-footer__about,
.pc-footer__muted,
.pc-footer .pc-copyright {
	color: var(--color-ink-on-dark-muted);
}

.pc-footer__title {
	margin-block: 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--font-size-label);
	line-height: var(--line-height-label);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-label);
	text-transform: uppercase;
	color: var(--color-ink-on-dark-muted) !important;
}

:lang(ar) .pc-footer__title {
	text-transform: none;
}

.pc-footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-footer__links a {
	display: inline-block;
	padding-block: var(--space-1);
	text-decoration: none;
}

.pc-footer__links a:hover {
	text-decoration: underline;
}

.pc-logo--plate {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-card);
	background-color: var(--color-peach);
}

.pc-footer .pc-logo__img {
	inline-size: 160px;
}

.pc-footer .pc-social__link {
	background-color: var(--color-on-dark-tint);
	color: var(--color-peach);
}

.pc-footer .pc-contact__item {
	color: var(--color-on-dark);
}

.pc-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4) var(--space-6);
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-5);
	border-block-start: var(--border-width) solid var(--color-on-dark-tint);
}

.pc-footer__bottom > * {
	margin: 0 !important;
}

.pc-footer .pc-payments__title {
	color: var(--color-ink-on-dark-muted);
}

.pc-footer .pc-payments__item,
.pc-footer .pc-payments__item .pc-payments__name {
	color: var(--color-ink);
}

.pc-footer .pc-lang-switch__link {
	color: var(--color-on-dark);
}

.pc-copyright {
	margin: 0;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
}

@media (max-width: 781px) {
	.pc-footer {
		padding-block: var(--space-8) var(--space-6);
	}

	.pc-footer__columns {
		flex-wrap: wrap !important;
		gap: var(--space-6);
	}

	/* Link columns sit two-up on phones; the brand column stays full width. */
	.pc-footer__columns > .wp-block-column:not(.pc-footer__brand) {
		flex-basis: calc(50% - var(--space-6)) !important;
		flex-grow: 1;
	}

	.pc-footer__bottom {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

/* ==========================================================================
   13. 404 and empty states
   ========================================================================== */

.pc-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--space-9);
	text-align: center;
}

.pc-empty-state > * {
	margin-block: 0;
}

.pc-empty-state .wp-block-search {
	inline-size: min(100%, 480px);
}

.pc-empty-state .wp-block-buttons {
	justify-content: center;
}

/* ==========================================================================
   14. Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.wp-site-blocks > header.wp-block-template-part {
		position: static;
	}

	.pc-trust-bar,
	.pc-header__utility,
	.pc-header__nav {
		display: none;
	}
}

/* ==========================================================================
   15. Honeypots, WooCommerce required markers, mini-cart drawer
   ========================================================================== */

.pc-hp input,
[class*="__hp"] input {
	border: var(--border-width) solid var(--color-line);
}

.woocommerce form .form-row .required,
.woocommerce-form .required,
.wc-block-components-form .required,
abbr.required {
	color: var(--color-error) !important;
	text-decoration: none;
}

/* Closed drawer and overlay are out of the focus order (axe aria-hidden-focus). */
.wc-block-mini-cart__drawer[aria-hidden="true"],
.wc-block-components-drawer__screen-overlay--is-hidden {
	visibility: hidden;
}

/* When a pc-btn class is set on a core/button block it lands on the wrapper
   <div class="wp-block-button">; the inner link carries the button look. */
.wp-block-button.pc-btn {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	min-block-size: 0;
	min-inline-size: 0;
}
.wp-block-button.pc-btn--trust > .wp-block-button__link {
	background-color: var(--color-trust);
	border-color: var(--color-trust);
	color: var(--color-on-dark);
}