/**
 * WWU Plan & Publish — Frontend modal + calendar shortcode CSS.
 *
 * Public surface. Two layers:
 *  1. CSS variables for theming (`.wwu-pp-modal-root` scope) — overridable
 *     by site theme via `:root` or by setting modal_styling_preset.
 *  2. Bare structural rules (positioning, layout, hidden states) that the
 *     theme should NOT override.
 *
 * Themable via 3 presets: light (default), dark, minimal. Custom CSS textarea
 * (sanitized server-side) gets injected as scoped inline `<style>` block.
 *
 * Prefix: .wwu-pp-* — never override .wwu-ui-* (UI Kit).
 */

/* ========================================================================
 * Calendar grid (frontend) — reuses .wwu-pp-cal-* classes from admin.css
 * but lives in standalone bundle so frontend doesn't depend on admin CSS.
 * ====================================================================== */

.wwu-pp-shortcode-wrap {
	margin: 1.5em 0;
	font-family: inherit;
	color: inherit;
	--wwu-pp-fe-border: rgba(0, 0, 0, 0.1);
	--wwu-pp-fe-border-strong: rgba(0, 0, 0, 0.18);
	--wwu-pp-fe-muted: #6b6b6b;
	--wwu-pp-fe-cell-bg: #fff;
	--wwu-pp-fe-cell-radius: 6px;
	/* 1.4.0 — preset-overridable tokens. Defaults below = pre-1.4.0
	   behavior so base presets (light/dark/minimal) render unchanged.
	   The `minimal-moderno` client preset overrides these in its
	   [data-wwu-pp-preset] block. */
	--wwu-pp-fe-cell-border-color: var(--wwu-pp-fe-border);
	--wwu-pp-fe-cell-today-border: currentColor;
	--wwu-pp-fe-cell-today-width: 1px;
	--wwu-pp-fe-nav-size: 36px;
	--wwu-pp-fe-nav-radius: 999px;
	--wwu-pp-fe-nav-border: var(--wwu-pp-fe-border-strong);
	--wwu-pp-fe-nav-hover-bg: rgba(0, 0, 0, 0.04);
	--wwu-pp-fe-nav-hover-fg: inherit;
	--wwu-pp-fe-nav-weight: 400;
	--wwu-pp-fe-pill-radius: 4px;
	--wwu-pp-fe-pill-shadow: none;
	--wwu-pp-fe-heading-font: inherit;
	--wwu-pp-fe-heading-transform: none;
	--wwu-pp-fe-heading-spacing: normal;
	--wwu-pp-fe-heading-weight: 600;
	--wwu-pp-fe-body-font: inherit;
}

.wwu-pp-shortcode-wrap--auth-required {
	padding: 1em;
	border: 1px solid var(--wwu-pp-fe-border);
	border-radius: 6px;
	background: #f6f7f7;
	color: var(--wwu-pp-fe-muted);
	text-align: center;
}

/* 1.5.0 — calendar title above the month header. Preset-aware (Didot
   uppercase in minimal-moderno, inherit elsewhere). */
.wwu-pp-shortcode-wrap .wwu-pp-cal__heading {
	font-family: var(--wwu-pp-fe-heading-font);
	text-transform: var(--wwu-pp-fe-heading-transform);
	letter-spacing: var(--wwu-pp-fe-heading-spacing);
	font-weight: var(--wwu-pp-fe-heading-weight);
	font-size: 1.5em;
	text-align: center;
	margin: 0 0 16px;
	line-height: 1.15;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	/* 1.8.4 — never wrap. Arrows + Oggi keep their size (flex-shrink:0),
	   only the title shrinks (min-width:0). Prevents the prev/next arrows
	   from wrapping below the title on narrow viewports (iPhone 17, ~390px). */
	flex-wrap: nowrap;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__title {
	flex: 1;
	/* 1.8.4 — allow the title to shrink in the flex row (default `auto` would
	   block ellipsis + force the parent header to overflow). */
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-weight: var(--wwu-pp-fe-heading-weight);
	font-family: var(--wwu-pp-fe-heading-font);
	text-transform: var(--wwu-pp-fe-heading-transform);
	letter-spacing: var(--wwu-pp-fe-heading-spacing);
}

/* 1.8.4 — 180px desktop default for visual balance; the @media block below
   relaxes it on mobile so the title can compress instead of pushing the
   arrows down. */
.wwu-pp-shortcode-wrap .wwu-pp-cal__title-text { min-width: 180px; text-align: center; }

.wwu-pp-shortcode-wrap .wwu-pp-cal__nav,
.wwu-pp-shortcode-wrap .wwu-pp-cal__today {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 1.8.4 — arrows + Oggi NEVER shrink (they're touch targets; squashing
	   them breaks WCAG 2.5.5). The title absorbs any width pressure. */
	flex-shrink: 0;
	/* 1.4.0 — nav size token. Default 36px; minimal-moderno bumps to 44px
	   for a comfortable touch target (WCAG 2.5.5) + better visibility
	   (cliente feedback: "ingrandirei le frecce"). */
	height: var(--wwu-pp-fe-nav-size);
	min-width: var(--wwu-pp-fe-nav-size);
	padding: 0 12px;
	border-radius: var(--wwu-pp-fe-nav-radius);
	border: 1px solid var(--wwu-pp-fe-nav-border);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
	font-weight: var(--wwu-pp-fe-nav-weight);
	line-height: 1;
	transition: background 0.12s, color 0.12s;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__nav {
	/* Arrows: bump the glyph size — the &lsaquo;/&rsaquo; chevrons read
	   tiny at 14px. 1.4.0 cliente feedback. */
	font-size: 20px;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__nav:hover,
.wwu-pp-shortcode-wrap .wwu-pp-cal__today:hover,
.wwu-pp-shortcode-wrap .wwu-pp-cal__nav:focus-visible,
.wwu-pp-shortcode-wrap .wwu-pp-cal__today:focus-visible {
	background: var(--wwu-pp-fe-nav-hover-bg);
	color: var(--wwu-pp-fe-nav-hover-fg);
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__grid {
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px;
	table-layout: fixed;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__grid th {
	font-size: 11px;
	font-weight: 500;
	color: var(--wwu-pp-fe-muted);
	text-align: center;
	padding: 6px 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__cell {
	background: var(--wwu-pp-fe-cell-bg);
	/* 1.4.0 — cell border token. Default = faint --wwu-pp-fe-border;
	   minimal-moderno reinforces it (cliente feedback: griglia "troppo
	   delicata, poco visibile"). */
	border: 1px solid var(--wwu-pp-fe-cell-border-color);
	border-radius: var(--wwu-pp-fe-cell-radius);
	vertical-align: top;
	padding: 6px;
	height: 100px;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__cell--blank {
	background: transparent;
	border: 1px dashed rgba(0, 0, 0, 0.05);
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__cell--today {
	border-color: var(--wwu-pp-fe-cell-today-border);
	border-width: var(--wwu-pp-fe-cell-today-width);
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__day-num {
	font-size: 12px;
	margin-bottom: 4px;
	font-weight: 500;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__items {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__item {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #6b6b6b;
	color: #fff;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: var(--wwu-pp-fe-pill-radius);
	box-shadow: var(--wwu-pp-fe-pill-shadow);
	border: 0;
	line-height: 1.25;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	font-family: var(--wwu-pp-fe-body-font);
	transition: filter 0.12s, transform 0.12s;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__item:hover,
.wwu-pp-shortcode-wrap .wwu-pp-cal__item:focus-visible {
	filter: brightness(1.1);
	transform: translateY(-1px);
	outline: 2px solid rgba(255, 255, 255, 0.55);
	outline-offset: -1px;
	color: #fff;
}

.wwu-pp-shortcode-wrap .wwu-pp-cal__item-time { font-weight: 700; flex-shrink: 0; }
.wwu-pp-shortcode-wrap .wwu-pp-cal__item-title { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 1.8.5 — removed the ✓ promoted-indicator from the frontend (was visible
   on every linked event row/pill). The "promoted" state is an editorial
   workflow concept that means nothing to a public visitor, and the glyph
   was just visual noise. Admin keeps its own promoted-indicator in
   admin.css for the editorial calendar view. */

@media (max-width: 640px) {
	.wwu-pp-shortcode-wrap .wwu-pp-cal__cell { height: auto; min-height: 60px; padding: 4px; }
	.wwu-pp-shortcode-wrap .wwu-pp-cal__day-num { font-size: 11px; }
	.wwu-pp-shortcode-wrap .wwu-pp-cal__item { font-size: 10px; padding: 2px 5px; }
	/* 1.8.4 — mobile header: drop the 180px title floor so the row really
	   fits, reduce nav button padding/font, tighter gap. Arrows + Oggi
	   keep their min-width / flex-shrink:0 (touch targets). */
	.wwu-pp-shortcode-wrap .wwu-pp-cal__header { gap: 6px; }
	.wwu-pp-shortcode-wrap .wwu-pp-cal__title { gap: 6px; }
	.wwu-pp-shortcode-wrap .wwu-pp-cal__title-text { min-width: 0; font-size: 0.95em; }
	.wwu-pp-shortcode-wrap .wwu-pp-cal__nav,
	.wwu-pp-shortcode-wrap .wwu-pp-cal__today { padding: 0 8px; font-size: 14px; }
	.wwu-pp-shortcode-wrap .wwu-pp-cal__nav { font-size: 18px; }
}

/* ========================================================================
 * F3 — view=list rendering + view=auto responsive swap
 * ====================================================================== */

/* Default: when shortcode view=auto, show grid above 640px and list below.
   When view=grid only grid is rendered (PHP-side); list wrap absent.
   When view=list only list is rendered. */
.wwu-pp-shortcode-wrap[data-wwu-pp-view="auto"] .wwu-pp-shortcode-wrap__grid { display: block; }
.wwu-pp-shortcode-wrap[data-wwu-pp-view="auto"] .wwu-pp-shortcode-wrap__list { display: none; }

@media (max-width: 640px) {
	.wwu-pp-shortcode-wrap[data-wwu-pp-view="auto"] .wwu-pp-shortcode-wrap__grid { display: none; }
	.wwu-pp-shortcode-wrap[data-wwu-pp-view="auto"] .wwu-pp-shortcode-wrap__list { display: block; }
}

.wwu-pp-cal--list .wwu-pp-cal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wwu-pp-cal--list .wwu-pp-cal__list-day {
	display: grid;
	/* 1.8.4 — `minmax(0, 1fr)` instead of bare `1fr`: grid tracks default to
	   `min-content` for their min-size, which would let a long event title
	   blow the whole row past the viewport edge. `minmax(0, 1fr)` allows the
	   track to shrink and the ellipsis on the title to actually kick in. */
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	min-width: 0;
}

.wwu-pp-cal--list .wwu-pp-cal__list-events { min-width: 0; }

.wwu-pp-cal--list .wwu-pp-cal__list-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	background: #f6f7f7;
	border-radius: 6px;
	font-family: inherit;
}

.wwu-pp-cal--list .wwu-pp-cal__list-day--today .wwu-pp-cal__list-date {
	background: rgba(34, 113, 177, 0.15);
	color: #2271b1;
}

.wwu-pp-cal--list .wwu-pp-cal__list-date-day {
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.wwu-pp-cal--list .wwu-pp-cal__list-date-month {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 2px;
	color: var(--wwu-pp-fe-muted);
}

.wwu-pp-cal--list .wwu-pp-cal__list-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wwu-pp-cal--list .wwu-pp-cal__list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	color: inherit;
	border: 1px solid var(--wwu-pp-fe-border);
	border-left: 4px solid currentColor;
	border-radius: 6px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	transition: border-color 0.12s, background 0.12s;
	/* 1.8.4 — clip + shrink so long titles ellipsis cleanly instead of
	   stretching the row past the viewport edge (iPhone 17, ~390px). */
	min-width: 0;
	overflow: hidden;
}

.wwu-pp-cal--list .wwu-pp-cal__list-row:hover,
.wwu-pp-cal--list .wwu-pp-cal__list-row:focus-visible {
	border-color: var(--wwu-pp-fe-border-strong);
	/* 1.8.3 — defend against theme `a:hover { color: #fff }` (es. nadiagrace.com)
	   which would otherwise make the row title unreadable on the light bg.
	   Trap #19 family: !important is the right call when defending against an
	   author rule of equal/higher specificity that can't be predicted. The spans
	   inside inherit, so a single rule on the row covers time + title. */
	color: inherit !important;
	background: #fafafa;
	outline: 2px solid rgba(34, 113, 177, 0.35);
	outline-offset: -1px;
}

.wwu-pp-cal--list .wwu-pp-cal__list-row-time {
	flex-shrink: 0;
	font-weight: 600;
	font-size: 12px;
	color: var(--wwu-pp-fe-muted);
	min-width: 60px;
}

.wwu-pp-cal--list .wwu-pp-cal__list-row-title {
	flex: 1 1 0;
	/* 1.8.4 — explicit min-width:0 so the flex child can actually shrink
	   below its content size (default `auto` blocks ellipsis). */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wwu-pp-cal--list .wwu-pp-cal__list-empty {
	padding: 20px;
	text-align: center;
	color: var(--wwu-pp-fe-muted);
	font-style: italic;
}

@media (max-width: 480px) {
	.wwu-pp-cal--list .wwu-pp-cal__list-day { grid-template-columns: 48px 1fr; gap: 8px; }
	.wwu-pp-cal--list .wwu-pp-cal__list-date { padding: 6px 2px; }
	.wwu-pp-cal--list .wwu-pp-cal__list-date-day { font-size: 18px; }
	.wwu-pp-cal--list .wwu-pp-cal__list-row { font-size: 13px; padding: 8px 10px; }
	.wwu-pp-cal--list .wwu-pp-cal__list-row-time { min-width: 50px; }
}

/* ========================================================================
 * Body scroll lock (F2 audit HIGH-2 fix). Applied via class on <body>
 * when modal opens / removed on close. Use !important so theme `body`
 * styles (which often set overflow: visible explicitly) cannot override.
 * Mobile Safari extra hardening with position: fixed would require
 * preserving scroll position — kept simple here; F3 polish if needed.
 * ====================================================================== */

body.wwu-pp-body-modal-open {
	overflow: hidden !important;
}

/* Fallback: also disable touch scroll on iOS via touch-action.
   Combined with overflow: hidden this prevents inertia scroll bleeding. */
@supports (touch-action: none) {
	body.wwu-pp-body-modal-open {
		touch-action: none;
	}
}

/* Inert support for older browsers — opacity reduction visual cue. */
[inert] {
	pointer-events: none;
	user-select: none;
}

/* ========================================================================
 * Modal root (theme-overridable via CSS vars)
 * ====================================================================== */

.wwu-pp-modal-root {
	position: fixed;
	inset: 0;
	z-index: 999990;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;

	/* CSS Custom Properties — themable. */
	--wwu-pp-modal-bg: #ffffff;
	--wwu-pp-modal-fg: #1d2327;
	--wwu-pp-modal-muted: #50575e;
	--wwu-pp-modal-border: rgba(0, 0, 0, 0.08);
	--wwu-pp-modal-radius: 12px;
	--wwu-pp-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
	--wwu-pp-modal-overlay: rgba(13, 13, 13, 0.45);
	--wwu-pp-modal-padding: 24px;
	/* 1.4.0 — max-width tightened 600px → 460px. The cliente feedback
	   screenshots showed the 600px modal feeling oversized + the theme's
	   huge h2 making the title gigantic. minimal-moderno tightens further
	   to 440px. */
	--wwu-pp-modal-max-width: 460px;
	--wwu-pp-modal-btn-bg: #2271b1;
	--wwu-pp-modal-btn-fg: #ffffff;
	--wwu-pp-modal-btn-bg-hover: #135e96;
	--wwu-pp-modal-btn-fg-hover: #ffffff;
	--wwu-pp-modal-btn-radius: 6px;
	--wwu-pp-modal-btn-transform: none;
	--wwu-pp-modal-btn-spacing: normal;
	/* 1.4.0 — typography tokens (preset font stacks). Default `inherit`
	   keeps base presets theme-driven; minimal-moderno injects the
	   nadiagrace.com Didot + Proxima Nova stacks. */
	--wwu-pp-modal-heading-font: inherit;
	--wwu-pp-modal-body-font: inherit;
	--wwu-pp-modal-title-transform: none;
	--wwu-pp-modal-title-spacing: normal;
	--wwu-pp-modal-title-weight: 600;
	/* clamp() — title can never balloon to the theme's editorial h2 size.
	   This is the core fix for the "titolo gigante" feedback. 1.4.1 —
	   tightened further (max 1.25rem, was 1.5rem) after the cliente
	   screenshot showed a 5-line title eating the modal. */
	--wwu-pp-modal-title-size: clamp(1rem, 0.95rem + 0.7vw, 1.25rem);
	/* 1.4.0 — close button tokens. Default = subtle (pre-1.4.0). Cliente
	   feedback: "evidenzierei meglio la X". minimal-moderno makes it a
	   solid black 36px square. */
	--wwu-pp-modal-close-bg: transparent;
	--wwu-pp-modal-close-fg: var(--wwu-pp-modal-muted);
	--wwu-pp-modal-close-size: 36px;
	--wwu-pp-modal-close-radius: 50%;
	--wwu-pp-modal-close-bg-hover: rgba(0, 0, 0, 0.06);
	--wwu-pp-modal-close-fg-hover: var(--wwu-pp-modal-fg);
	/* 1.4.0 — price block (prodotti WC). Cliente feedback: "inserirei
	   già il prezzo così uno sa cosa mette nel carrello". */
	--wwu-pp-modal-price-color: #1d2327;
	--wwu-pp-modal-price-size: 18px;
	--wwu-pp-modal-price-weight: 600;
	/* 1.4.2 — body copy tokens. Default 16px/1.5 = pre-1.4.2 behavior;
	   minimal-moderno tightens to keep the modal compact (cliente
	   feedback: "riduci anche il font del body"). */
	--wwu-pp-modal-body-size: 16px;
	--wwu-pp-modal-body-line-height: 1.5;
	/* 1.4.3 — header image height. Fixed height + object-fit: cover =
	   a controlled banner (centre-cropped) instead of a tall image
	   eating the modal. minimal-moderno shrinks it further (cliente
	   feedback: "non serve così visibile e grande"). */
	--wwu-pp-modal-media-height: 200px;
	/* 1.5.0 — link repeater secondary buttons (below the CTA). Discreet
	   outline style, preset-overridable. */
	--wwu-pp-modal-link-border: rgba(0, 0, 0, 0.18);
	--wwu-pp-modal-link-fg: var(--wwu-pp-modal-fg);
	--wwu-pp-modal-link-bg-hover: rgba(0, 0, 0, 0.05);
	--wwu-pp-modal-link-radius: var(--wwu-pp-modal-btn-radius);
}

.wwu-pp-modal-root[hidden] {
	display: none !important;
}

/* Trap #19 belt-and-suspenders: ensure overlay never bleeds when hidden. */
.wwu-pp-modal-root[hidden] .wwu-pp-modal__overlay {
	display: none !important;
}

.wwu-pp-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--wwu-pp-modal-overlay);
	cursor: pointer;
}

.wwu-pp-modal {
	position: relative;
	width: min(var(--wwu-pp-modal-max-width), 92vw);
	max-height: 86vh;
	overflow: auto;
	background: var(--wwu-pp-modal-bg);
	color: var(--wwu-pp-modal-fg);
	border-radius: var(--wwu-pp-modal-radius);
	box-shadow: var(--wwu-pp-modal-shadow);
	padding: var(--wwu-pp-modal-padding);
	box-sizing: border-box;
	font-family: var(--wwu-pp-modal-body-font);
	font-size: 16px;
	line-height: 1.5;
	z-index: 1;
	outline: none;
	animation: wwu-pp-modal-in 0.16s ease-out;
}

@keyframes wwu-pp-modal-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.wwu-pp-modal { animation: none; }
}

.wwu-pp-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: var(--wwu-pp-modal-close-size);
	height: var(--wwu-pp-modal-close-size);
	border: 0;
	background: var(--wwu-pp-modal-close-bg);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--wwu-pp-modal-close-fg);
	border-radius: var(--wwu-pp-modal-close-radius);
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 1.4.0 — z-index above the edge-to-edge header image + a subtle
	   shadow so the X stays visible on photo backgrounds. Cliente
	   feedback: "evidenzierei meglio la X". */
	z-index: 2;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: background 0.12s, color 0.12s, transform 0.12s;
}

.wwu-pp-modal__close:hover,
.wwu-pp-modal__close:focus-visible {
	background: var(--wwu-pp-modal-close-bg-hover);
	color: var(--wwu-pp-modal-close-fg-hover);
	transform: scale(1.08);
}

.wwu-pp-modal__media {
	/* 1.4.0 — edge-to-edge header image. The negative margin now derives
	   from the modal padding token (was hardcoded -8px which assumed an
	   8px padding that hasn't been the default since 1.0.0 — latent bug).
	   `calc(... * -1)` makes the image flush regardless of preset padding. */
	margin: calc(var(--wwu-pp-modal-padding) * -1) calc(var(--wwu-pp-modal-padding) * -1) 16px;
	border-radius: 0;
	overflow: hidden;
	/* 1.4.3 — FIXED height (was max-height: 240px). Combined with the
	   img's object-fit: cover below, the header is now a predictable
	   centre-cropped banner of exactly `--wwu-pp-modal-media-height`,
	   regardless of the source image aspect ratio. */
	height: var(--wwu-pp-modal-media-height);
}

.wwu-pp-modal__media img {
	width: 100%;
	/* 1.4.3 — fill the fixed-height wrapper + centre-crop. Pre-1.4.3
	   `height: auto` made object-fit a no-op (it only applies to
	   sized boxes), so a tall source image just overflowed. */
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.wwu-pp-modal__header {
	margin-bottom: 12px;
}

.wwu-pp-modal__meta {
	margin: 0 0 4px;
	font-size: 12px;
	color: var(--wwu-pp-modal-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: var(--wwu-pp-modal-body-font);
}

.wwu-pp-modal__title {
	margin: 0;
	/* 1.4.0 — clamp() guards against the theme's editorial h2 size
	   bleeding in (cliente screenshot showed a ~2.5rem gigantic title).
	   `!important` is intentional here — many themes set h2 size with
	   high specificity; this is a structural guard, not a cosmetic
	   preference (trap #19 family). */
	font-size: var(--wwu-pp-modal-title-size) !important;
	font-weight: var(--wwu-pp-modal-title-weight);
	font-family: var(--wwu-pp-modal-heading-font);
	text-transform: var(--wwu-pp-modal-title-transform);
	letter-spacing: var(--wwu-pp-modal-title-spacing);
	/* 1.4.1 — tightened from 1.2 → 1.15: on an uppercase Didot title the
	   1.2 line-height left too much air between the 4-5 lines of a long
	   product title. */
	line-height: 1.15 !important;
	color: inherit;
	/* 1.4.1 — visual safety cap at 4 lines. Cliente product titles embed
	   the date ("... – 19 MAGGIO 2026") making them very long; without a
	   clamp they ate half the modal. Visual-only — the full title stays
	   in the DOM (h2 with id) so screen readers + the aria-labelledby
	   reference are unaffected. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wwu-pp-modal__body {
	margin-bottom: 16px;
	color: inherit;
	font-family: var(--wwu-pp-modal-body-font);
	/* 1.4.2 — body copy size/leading via tokens. The modal `.wwu-pp-modal`
	   keeps its 16px base for elements without an explicit size; the body
	   paragraph block consumes the dedicated token so a preset can shrink
	   the description without affecting buttons/meta/price. */
	font-size: var(--wwu-pp-modal-body-size);
	line-height: var(--wwu-pp-modal-body-line-height);
}

/* 1.4.0 — price block (prodotti WC + eventi promossi). Rendered by
   modal.js above the CTA button when the REST payload carries a
   non-empty `priceHtml`. */
.wwu-pp-modal__price {
	margin: 0 0 10px;
	font-family: var(--wwu-pp-modal-body-font);
	font-size: var(--wwu-pp-modal-price-size);
	font-weight: var(--wwu-pp-modal-price-weight);
	color: var(--wwu-pp-modal-price-color);
	line-height: 1.3;
	/* Lives inside the flex `.wwu-pp-modal__cta` container — flex-basis
	   100% forces it onto its own row ABOVE the CTA button. */
	flex-basis: 100%;
}

/* WC wraps prices in <span class="woocommerce-Price-amount">. Keep them
   inheriting our token color even when the theme styles WC prices. */
.wwu-pp-modal__price .woocommerce-Price-amount,
.wwu-pp-modal__price ins,
.wwu-pp-modal__price del {
	color: inherit;
	font-size: inherit;
}

.wwu-pp-modal__price del {
	opacity: 0.55;
	font-weight: 400;
	margin-right: 6px;
}

/* 1.5.0 — link repeater secondary buttons (rendered by modal.js /
   preview.js below the CTA). Discreet outline buttons, preset-aware. */
.wwu-pp-modal__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
	width: 100%;
}

.wwu-pp-modal__links:empty {
	display: none;
}

.wwu-pp-modal__link-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--wwu-pp-modal-link-border);
	border-radius: var(--wwu-pp-modal-link-radius);
	background: transparent;
	color: var(--wwu-pp-modal-link-fg);
	font-family: var(--wwu-pp-modal-body-font);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.2;
	transition: background 0.14s, border-color 0.14s;
}

.wwu-pp-modal__link-btn:hover,
.wwu-pp-modal__link-btn:focus-visible {
	background: var(--wwu-pp-modal-link-bg-hover);
	color: var(--wwu-pp-modal-link-fg);
}

.wwu-pp-modal__link-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
}

.wwu-pp-modal__link-icon .wwu-pp-icon {
	display: block;
}

.wwu-pp-modal__link-label {
	flex: 1 1 auto;
	min-width: 0;
}

.wwu-pp-modal__body p:first-child { margin-top: 0; }
.wwu-pp-modal__body p:last-child { margin-bottom: 0; }

.wwu-pp-modal__footer {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.wwu-pp-modal__cta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	flex: 1;
}

.wwu-pp-modal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--wwu-pp-modal-btn-radius);
	background: var(--wwu-pp-modal-btn-bg);
	color: var(--wwu-pp-modal-btn-fg);
	font-family: var(--wwu-pp-modal-body-font);
	font-size: 14px;
	font-weight: 600;
	text-transform: var(--wwu-pp-modal-btn-transform);
	letter-spacing: var(--wwu-pp-modal-btn-spacing);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.16s, color 0.16s;
}

.wwu-pp-modal__btn:hover,
.wwu-pp-modal__btn:focus-visible {
	background: var(--wwu-pp-modal-btn-bg-hover);
	color: var(--wwu-pp-modal-btn-fg-hover);
}

.wwu-pp-modal__btn:disabled,
.wwu-pp-modal__btn--coming-soon {
	background: var(--wwu-pp-modal-muted);
	color: #ffffff;
	cursor: not-allowed;
	opacity: 0.7;
}

.wwu-pp-modal__btn.is-busy {
	opacity: 0.6;
	cursor: progress;
}

.wwu-pp-modal__btn.is-success {
	background: #22863a;
}

.wwu-pp-modal__error {
	margin: 8px 0 0;
	color: #b32d2e;
	font-size: 13px;
}

.wwu-pp-modal[aria-busy="true"] .wwu-pp-modal__title::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wwu-pp-modal-spin 0.8s linear infinite;
	vertical-align: middle;
}

@keyframes wwu-pp-modal-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.wwu-pp-modal[aria-busy="true"] .wwu-pp-modal__title::after { animation: none; }
}

/* ========================================================================
 * Presets (light / dark / minimal) — toggled via [data-wwu-pp-preset]
 * ====================================================================== */

.wwu-pp-modal-root[data-wwu-pp-preset="dark"] {
	--wwu-pp-modal-bg: #1d2327;
	--wwu-pp-modal-fg: #f0f0f1;
	--wwu-pp-modal-muted: #a7aaad;
	--wwu-pp-modal-border: rgba(255, 255, 255, 0.12);
	--wwu-pp-modal-overlay: rgba(0, 0, 0, 0.65);
	--wwu-pp-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
	--wwu-pp-modal-btn-bg: #4f94d4;
	--wwu-pp-modal-btn-bg-hover: #2271b1;
}

.wwu-pp-modal-root[data-wwu-pp-preset="minimal"] {
	--wwu-pp-modal-bg: #ffffff;
	--wwu-pp-modal-fg: #1d2327;
	--wwu-pp-modal-muted: #50575e;
	--wwu-pp-modal-radius: 0;
	--wwu-pp-modal-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	--wwu-pp-modal-btn-radius: 0;
	--wwu-pp-modal-btn-bg: #1d2327;
	--wwu-pp-modal-btn-bg-hover: #000000;
}

/* ========================================================================
 * 1.4.0 — CLIENT PRESET "Minimal Moderno"
 *
 * Built on the real design tokens of nadiagrace.com (browser recon —
 * see docs/specs/wwu-pp-preset-system-SPEC.md References):
 *  - Palette: white bg / black text / yellow CTA #FFCD2E / red accent
 *    #CE2129 / grey #8C8C8C / border #D1D5DB
 *  - Type: Didot-style serif headings (uppercase, weight 900) + Proxima
 *    Nova body. Font stacks DEGRADE GRACEFULLY — when the modal renders
 *    inside nadiagrace.com the Adobe Typekit fonts are already loaded so
 *    they apply; on any other site the Playfair/Georgia + system-sans
 *    fallback keeps it elegant (we never redistribute the paid Typekit).
 *  - Shape: sharp corners (radius 0), diffuse lift shadow.
 *  - This block targets BOTH the modal root AND the calendar shortcode
 *    wrap (Shortcode.php emits data-wwu-pp-preset on both since 1.4.0).
 * ====================================================================== */

.wwu-pp-modal-root[data-wwu-pp-preset="minimal-moderno"] {
	--wwu-pp-modal-bg: #ffffff;
	--wwu-pp-modal-fg: #000000;
	--wwu-pp-modal-muted: #8c8c8c;
	--wwu-pp-modal-border: #d1d5db;
	--wwu-pp-modal-radius: 0;
	--wwu-pp-modal-shadow: 0 20px 75px rgba(0, 0, 0, 0.145);
	--wwu-pp-modal-overlay: rgba(0, 0, 0, 0.55);
	--wwu-pp-modal-max-width: 440px;
	/* CTA = the site's real yellow button (recon confirmed on the live
	   "Aggiungi al carrello"). Hover inverts to black/white — the site's
	   dominant button hover pattern. */
	--wwu-pp-modal-btn-bg: #ffcd2e;
	--wwu-pp-modal-btn-fg: #000000;
	--wwu-pp-modal-btn-bg-hover: #000000;
	--wwu-pp-modal-btn-fg-hover: #ffffff;
	--wwu-pp-modal-btn-radius: 0;
	--wwu-pp-modal-btn-transform: uppercase;
	--wwu-pp-modal-btn-spacing: 0.08em;
	--wwu-pp-modal-heading-font: "linotype-didot-headline", "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
	--wwu-pp-modal-body-font: "proxima-nova", "Proxima Nova", -apple-system, "Segoe UI", Roboto, sans-serif;
	--wwu-pp-modal-title-transform: uppercase;
	--wwu-pp-modal-title-spacing: 0.02em;
	--wwu-pp-modal-title-weight: 900;
	/* 1.4.1 → 1.4.2 — Didot uppercase is a WIDE typeface; long product
	   titles (cliente embeds the date in the title) need a small ceiling.
	   1.4.2 tightened again on cliente feedback "riduci ancora un po il
	   titolo": max 1rem (was 1.15rem). */
	--wwu-pp-modal-title-size: clamp(0.82rem, 0.74rem + 0.42vw, 1rem);
	/* 1.4.2 — body copy shrunk to 14px/1.5 (cliente feedback "riduci
	   anche il font del body"). Keeps the description compact in the
	   440px modal without hurting readability. */
	--wwu-pp-modal-body-size: 14px;
	--wwu-pp-modal-body-line-height: 1.5;
	/* 1.4.3 — header image trimmed to a discreet 150px banner (cliente
	   feedback: "riduciamo l'altezza dell'immagine, non serve così
	   visibile e grande"). */
	--wwu-pp-modal-media-height: 150px;
	/* Close button: solid black square, red on hover. Cliente feedback. */
	--wwu-pp-modal-close-bg: #000000;
	--wwu-pp-modal-close-fg: #ffffff;
	--wwu-pp-modal-close-size: 36px;
	--wwu-pp-modal-close-radius: 0;
	--wwu-pp-modal-close-bg-hover: #ce2129;
	--wwu-pp-modal-close-fg-hover: #ffffff;
	/* Price in red — the site reserves #CE2129 for urgency/price. */
	--wwu-pp-modal-price-color: #ce2129;
	--wwu-pp-modal-price-size: 19px;
	--wwu-pp-modal-price-weight: 600;
	/* 1.5.0 — link buttons: sharp black outline, invert-ish hover. */
	--wwu-pp-modal-link-border: #000000;
	--wwu-pp-modal-link-fg: #000000;
	--wwu-pp-modal-link-bg-hover: rgba(0, 0, 0, 0.06);
	--wwu-pp-modal-link-radius: 0;
}

.wwu-pp-shortcode-wrap[data-wwu-pp-preset="minimal-moderno"] {
	--wwu-pp-fe-muted: #8c8c8c;
	--wwu-pp-fe-cell-bg: #ffffff;
	--wwu-pp-fe-cell-radius: 0;
	/* Grid borders REINFORCED — cliente feedback: "griglia troppo
	   delicata, poco visibile". #c9ccd1 reads clearly vs the faint
	   rgba(0,0,0,0.1) default. */
	--wwu-pp-fe-cell-border-color: #c9ccd1;
	--wwu-pp-fe-cell-today-border: #000000;
	--wwu-pp-fe-cell-today-width: 2px;
	/* Arrows: 44px square, black border, yellow on hover. */
	--wwu-pp-fe-nav-size: 44px;
	--wwu-pp-fe-nav-radius: 0;
	--wwu-pp-fe-nav-border: #000000;
	--wwu-pp-fe-nav-hover-bg: #ffcd2e;
	--wwu-pp-fe-nav-hover-fg: #000000;
	--wwu-pp-fe-nav-weight: 400;
	--wwu-pp-fe-pill-radius: 0;
	--wwu-pp-fe-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	--wwu-pp-fe-heading-font: "linotype-didot-headline", "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
	--wwu-pp-fe-heading-transform: uppercase;
	--wwu-pp-fe-heading-spacing: 0.04em;
	--wwu-pp-fe-heading-weight: 900;
	--wwu-pp-fe-body-font: "proxima-nova", "Proxima Nova", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ========================================================================
 * Mobile responsive
 * ====================================================================== */

@media (max-width: 480px) {
	.wwu-pp-modal-root { align-items: flex-end; }
	.wwu-pp-modal {
		width: 100%;
		max-height: 92vh;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		/* 1.8.5 — mobile token overrides so the bottom-sheet modal fits
		   comfortably on an iPhone instead of inheriting desktop spacing.
		   - padding: tighter so the content has breathing room without
		     wasting the narrow viewport.
		   - media-height: 200/150px desktop is too tall in portrait —
		     ate half the screen before the title was visible.
		   - title-size: clamp scales with viewport so long uppercase Didot
		     titles don't overflow.
		   - padding-bottom: env(safe-area-inset-bottom) keeps the CTA
		     above the iPhone homebar. */
		--wwu-pp-modal-padding: 18px;
		--wwu-pp-modal-media-height: 130px;
		--wwu-pp-modal-title-size: clamp(18px, 5vw, 22px);
		padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px));
	}
	.wwu-pp-modal__media { margin-bottom: 12px; }
	.wwu-pp-modal__meta { font-size: 11px; }
	.wwu-pp-modal__body { font-size: 14px; line-height: 1.45; }
	.wwu-pp-modal__close {
		/* Bigger touch target on mobile (WCAG 2.5.5). */
		--wwu-pp-modal-close-size: 40px;
		top: 6px;
		right: 6px;
		font-size: 22px;
	}
	/* Primary CTA and link buttons full-width on a narrow viewport — much
	   easier to tap with a thumb than a centered fixed-width button. */
	.wwu-pp-modal__btn { width: 100%; justify-content: center; }
	.wwu-pp-modal__links { gap: 6px; }
	.wwu-pp-modal__link-btn { width: 100%; justify-content: center; }
}