/* Portale Esercenti — front-end theme.
   MoviePress visual language, kept on a light palette.
   The client's identifying colour drives --pet-accent (set inline in functions.php). */

:root {
	--pet-accent: #1f6feb;
	--pet-on-accent: #ffffff;

	--pet-bg: #f7f9fc;
	--pet-panel: #ffffff;
	--pet-surface: #eef2f8;
	--pet-surface-2: #e2e8f1;
	--pet-ink: #313846;
	--pet-ink-soft: #616774; /* AA (≥4.5:1) on --pet-bg / --pet-panel / --pet-surface */
	--pet-border: #dde3ec;

	--pet-radius: 6px;
	--pet-maxw: 1160px;
	--pet-font: "Helvetica Neue", Helvetica, Arial, sans-serif;

	--pet-accent-tint: color-mix(in srgb, var(--pet-accent) 9%, #fff);
	--pet-accent-tint-2: color-mix(in srgb, var(--pet-accent) 16%, #fff);
	--pet-accent-dark: color-mix(in srgb, var(--pet-accent) 82%, #000);
	/* accent tone that stays readable as text on a light background */
	--pet-accent-text: color-mix(in srgb, var(--pet-accent) 72%, var(--pet-ink));
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--pet-font);
	font-size: 16px;
	color: var(--pet-ink);
	background: var(--pet-bg);
	line-height: 1.65;
	letter-spacing: .005em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Keep the sticky header's collapse from nudging scrollY (which fought
	   in-page anchor scrolling and could flicker the header at the top). */
	overflow-anchor: none;
}

h1, h2, h3 { font-weight: 700; line-height: 1.14; letter-spacing: -.018em; }

a { color: var(--pet-accent-text); text-underline-offset: 2px; }

img { max-width: 100%; height: auto; }

.pet-container {
	max-width: var(--pet-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}
.pet-skip-link { position: absolute; left: -9999px; }
.pet-skip-link:focus {
	left: 8px; top: 8px;
	background: var(--pet-panel); color: var(--pet-accent-text);
	padding: 10px 16px; border-radius: 8px;
	box-shadow: 0 4px 20px rgba(20, 22, 28, .22);
	z-index: 200;
}

/* Visible keyboard focus indicator on every interactive element. Mouse clicks
   (which don't match :focus-visible) stay clean. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--pet-accent);
	outline-offset: 2px;
	border-radius: 3px;
}
/* Where the surface behind the outline is the accent colour or the dark hero
   image, an accent outline would vanish — switch to the contrast colour. */
.pet-site-header a:focus-visible,
.pet-site-header button:focus-visible,
.pet-hero--image .pet-hero__inner a:focus-visible {
	outline-color: var(--pet-on-accent, #fff);
}

/* Shared "kicker" — uppercase micro-label */
.pet-eyebrow,
.pet-film__meta dt,
.pet-download-group__title,
.pet-brand__sub,
.pet-menu a {
	text-transform: uppercase;
	letter-spacing: .16em;
}

/* ---------- Buttons ---------- */
.pet-btn {
	display: inline-block;
	background: var(--pet-accent);
	color: var(--pet-on-accent);
	padding: 13px 24px;
	border: 1px solid var(--pet-accent);
	border-radius: var(--pet-radius);
	text-decoration: none;
	font-weight: 700;
	font-size: .95rem;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pet-btn:hover { background: var(--pet-accent-dark); border-color: var(--pet-accent-dark); }
.pet-btn--sm { padding: 8px 15px; font-size: .82rem; }
.pet-btn--cta { background: #0076df; border-color: #0076df; color: #fff; }
.pet-btn--cta:hover { background: #0063bd; border-color: #0063bd; }
/* "Accedi" on the default light hero: accent outline */
.pet-btn--hero-ghost {
	background: transparent;
	border-color: var(--pet-accent);
	color: var(--pet-accent-text);
}
.pet-btn--hero-ghost:hover { background: var(--pet-accent-tint); border-color: var(--pet-accent); }
/* on the image hero: translucent glass */
.pet-hero--image .pet-btn--hero-ghost {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.pet-hero--image .pet-btn--hero-ghost:hover { background: rgba(255, 255, 255, .26); border-color: #fff; }
.pet-btn--ghost {
	background: transparent;
	color: var(--pet-accent-text);
}
.pet-btn--ghost:hover { background: var(--pet-accent-tint); border-color: var(--pet-accent); }
.pet-btn--on-accent {
	background: var(--pet-on-accent);
	color: var(--pet-accent);
	border-color: var(--pet-on-accent);
}
.pet-btn--on-accent:hover { background: color-mix(in srgb, var(--pet-on-accent) 88%, #000); border-color: transparent; }
.pet-btn--on-accent-outline {
	background: color-mix(in srgb, var(--pet-on-accent) 12%, transparent);
	color: var(--pet-on-accent);
	border-color: color-mix(in srgb, var(--pet-on-accent) 42%, transparent);
}
.pet-btn--on-accent-outline:hover {
	background: color-mix(in srgb, var(--pet-on-accent) 22%, transparent);
	border-color: var(--pet-on-accent);
}

/* Inline icons */
.pet-icon { flex: none; display: inline-block; vertical-align: -.18em; }
.pet-btn .pet-icon { margin-right: -1px; }
.pet-btn--icon { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Header ---------- */
.pet-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--pet-accent);
	color: var(--pet-on-accent);
	transition: background .25s ease, box-shadow .25s ease;
}
.pet-site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px 32px;
	padding-top: 48px;
	padding-bottom: 48px;
	flex-wrap: wrap;
	transition: padding .25s ease;
}
.pet-site-header .pet-brand__logo img,
.pet-site-header .pet-brand__name,
.pet-site-header .pet-brand__sub {
	transition: max-height .25s ease, font-size .25s ease, opacity .2s ease, margin .25s ease;
}

/* Scrolled state: shrink + frosted glass over the content */
.pet-site-header.is-scrolled {
	background: color-mix(in srgb, var(--pet-accent) 78%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: 0 4px 24px rgba(20, 22, 28, .16);
}
.pet-site-header.is-scrolled .pet-site-header__inner {
	padding-top: 18px;
	padding-bottom: 18px;
}
.pet-site-header.is-scrolled .pet-brand__logo img { max-height: 38px; max-width: min(200px, 42vw); }
.pet-site-header.is-scrolled .pet-brand__name { font-size: 1.12rem; }
.pet-site-header.is-scrolled .pet-brand__sub {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	margin-top: 0;
}
.pet-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	color: inherit;
	margin-right: auto;
}
.pet-brand__logo img {
	display: block;
	max-height: 84px;
	max-width: min(260px, 46vw); /* keeps wide/horizontal logos in check */
	width: auto;
	height: auto;
	object-fit: contain;
}
.pet-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.pet-brand__name {
	font-weight: 700;
	font-size: 1.32rem;
	letter-spacing: -.01em;
}
.pet-brand__sub {
	font-size: .64rem;
	font-weight: 600;
	opacity: .85;
	margin-top: 3px;
}

.pet-menu {
	list-style: none;
	display: flex;
	gap: 26px;
	margin: 0; padding: 0;
}
.pet-menu a {
	display: block;
	text-decoration: none;
	color: inherit;
	font-weight: 700;
	font-size: .72rem;
	opacity: .9;
}
.pet-menu a:hover { opacity: 1; }

/* Mobile menu toggle (hamburger) — shown only ≤860px, when a primary menu exists */
.pet-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--pet-on-accent) 45%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--pet-on-accent) 12%, transparent);
	color: var(--pet-on-accent);
	cursor: pointer;
}
.pet-nav-toggle__close { display: none; }
.pet-nav-toggle[aria-expanded="true"] .pet-nav-toggle__open { display: none; }
.pet-nav-toggle[aria-expanded="true"] .pet-nav-toggle__close { display: inline-flex; }

@media (max-width: 860px) {
	.pet-nav-toggle { display: inline-flex; }
	/* With the hamburger present, drop the site name/subtitle so the logo and the
	   right-hand icons (account buttons + toggle) stay on a single line. */
	.pet-site-header__inner:has(.pet-nav-toggle) { flex-wrap: nowrap; }
	.pet-site-header__inner:has(.pet-nav-toggle) .pet-brand { min-width: 0; }
	.pet-site-header__inner:has(.pet-nav-toggle) .pet-brand__text { display: none; }
	.pet-site-header .pet-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		padding: 8px 0;
		background: var(--pet-panel);
		color: var(--pet-ink);
		box-shadow: 0 18px 40px rgba(20, 22, 28, .18);
		border-top: 1px solid var(--pet-border);
	}
	.pet-site-header .pet-nav.is-open { display: block; }
	.pet-site-header .pet-menu {
		flex-direction: column;
		gap: 0;
	}
	.pet-site-header .pet-menu a {
		padding: 13px 24px;
		font-size: .95rem;
		font-weight: 600;
		letter-spacing: normal;
		text-transform: none;
		opacity: 1;
	}
	.pet-site-header .pet-menu li + li a { border-top: 1px solid var(--pet-border); }
	.pet-site-header .pet-menu a:hover,
	.pet-site-header .pet-menu .current-menu-item > a { background: var(--pet-surface); color: var(--pet-accent-text); }

	/* Account buttons are moved into the dropdown (see main.js) — render them
	   as plain rows like the menu links, not as accent pills. */
	.pet-site-header .pet-nav .pet-account-link {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		border-top: 1px solid var(--pet-border);
	}
	.pet-site-header .pet-nav .pet-account-link .pet-btn {
		justify-content: flex-start;
		gap: 10px;
		padding: 13px 24px;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: var(--pet-ink);
		font-size: .95rem;
		font-weight: 600;
	}
	.pet-site-header .pet-nav .pet-account-link .pet-btn + .pet-btn { border-top: 1px solid var(--pet-border); }
	.pet-site-header .pet-nav .pet-account-link .pet-btn:hover { background: var(--pet-surface); color: var(--pet-accent-text); }
	/* Inside the dropdown the labels must show, even below 460px where the header
	   version is icon-only. */
	.pet-site-header .pet-nav .pet-account-link .pet-btn span {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}
}

.pet-account-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
}
.pet-account-link .pet-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}

/* ---------- Main ---------- */
.pet-main { padding: 0 0 96px; }

/* ---------- Hero ---------- */
/* Default (no image): sits flush on the page background, dark text. The copy is
   in a .pet-container so it always lines up with the catalog below. */
.pet-hero {
	position: relative;
	color: var(--pet-ink);
	padding: clamp(40px, 5.5vw, 68px) 0 clamp(20px, 3vw, 32px);
}
.pet-hero__inner { position: relative; z-index: 1; }
.pet-hero__eyebrow {
	margin: 0 0 14px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pet-accent-text);
}
.pet-hero__title {
	font-size: clamp(1.8rem, 3.6vw, 2.7rem);
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 16px;
	color: var(--pet-ink);
}
.pet-hero__desc {
	font-size: clamp(.94rem, 1.35vw, 1.08rem);
	line-height: 1.3;
	color: var(--pet-ink-soft);
	max-width: 70ch;
	margin: 0 0 28px;
}
.pet-hero__cta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.pet-hero__or { color: var(--pet-ink-soft); font-size: .95rem; }

/* With a background image: a full-bleed band flush against the header and both
   window edges (no rounded corners), but the copy stays in the 1160 central
   column (aligned with the search bar and catalog). Dark overlay is set inline
   on .pet-hero__bg. */
.pet-hero--image {
	color: #fff;
	margin-top: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(420px, 42vw, 560px);
	padding: clamp(48px, 7vw, 100px) 0 clamp(60px, 6vw, 84px);
}
/* Full width in the flex column so .pet-container's own max-width + margin:0 auto
   keep the copy aligned with the 1160 central column (not shrink-wrapped/centred). */
.pet-hero--image .pet-hero__inner { width: 100%; }
.pet-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
/* Frosted-glass blur that fades in toward the bottom of the hero image. */
.pet-hero--image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	z-index: 1;
	pointer-events: none;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 90%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 90%);
}
.pet-hero--image .pet-hero__inner { z-index: 2; }
.pet-hero--image .pet-hero__eyebrow { color: rgba(255, 255, 255, .82); }
.pet-hero--image .pet-hero__title { color: #fff; }
.pet-hero--image .pet-hero__desc { color: rgba(255, 255, 255, .9); }
.pet-hero--image .pet-hero__or { color: rgba(255, 255, 255, .72); }
.pet-hero--image .pet-notice { color: var(--pet-ink); }

#pet-catalogo { scroll-margin-top: 96px; }

/* Search pill straddling the hero's lower edge (homepage, image hero only).
   JS sets the exact -50%-of-its-own-height margin; this is the no-JS fallback. */
.pet-catalog.pet-catalog--overlap { position: relative; z-index: 2; padding-top: 0; }
.pet-catalog--overlap .pet-search {
	margin-top: -32px;
	box-shadow: 0 22px 55px rgba(15, 17, 22, .22);
}

/* ---------- Page headers ---------- */
.pet-page-header { padding: 48px 0 8px; margin: 0 0 28px; }
.pet-page-title { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0; letter-spacing: -.02em; }
.pet-page--doc .pet-page-header {
	padding-bottom: 22px;
	margin-bottom: 34px;
	border-bottom: 1px solid var(--pet-border);
}
.pet-page-meta { margin: 12px 0 0; font-size: .82rem; color: var(--pet-ink-soft); }
.pet-eyebrow {
	font-size: .7rem;
	font-weight: 700;
	color: var(--pet-accent-text);
	margin: 0 0 10px;
}
.pet-lead { color: var(--pet-ink-soft); font-size: 1.05rem; max-width: 60ch; }
.pet-archive-desc { color: var(--pet-ink-soft); }

/* ---------- Catalog search ---------- */
.pet-catalog { padding-top: 8px; }
.pet-catalog-toolbar { margin: 0 0 32px; }

/* White pill holding the fields inline + circular submit */
.pet-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px 8px 10px;
	background: var(--pet-panel);
	border-radius: 16px;
	box-shadow: 0 8px 26px rgba(20, 22, 28, .07);
	transition: box-shadow .15s ease;
}
.pet-search:focus-within {
	box-shadow: 0 0 0 3px var(--pet-accent-tint-2), 0 8px 26px rgba(20, 22, 28, .07);
}
.pet-search__field { display: flex; align-items: center; margin: 0; }
.pet-search__field--text { flex: 1 1 auto; min-width: 0; }

.pet-search input[type="search"] {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .98rem;
	color: var(--pet-ink);
	appearance: none;
	-webkit-appearance: none;
}
.pet-search input[type="search"]:focus { outline: 0; }
.pet-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.pet-search select {
	height: 46px;
	padding: 0 40px 0 16px;
	border: 0;
	border-radius: 11px;
	background-color: var(--pet-surface);
	color: var(--pet-ink);
	font: inherit;
	font-size: .92rem;
	line-height: 1.2;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23737a86' stroke-width='1.6' stroke-linecap='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	cursor: pointer;
}
.pet-search select:focus { outline: 0; box-shadow: 0 0 0 2px var(--pet-accent-tint-2) inset; }

.pet-search__submit {
	flex: none;
	width: 54px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 10px;
	background: var(--pet-accent);
	color: var(--pet-on-accent);
	cursor: pointer;
	transition: background .15s ease;
}
.pet-search__submit:hover { background: var(--pet-accent-dark); }
.pet-search__submit:focus-visible { outline: 2px solid var(--pet-accent); outline-offset: 2px; }

.pet-search__reset {
	display: inline-block;
	margin: 12px 6px 0;
	font-size: .85rem;
	color: var(--pet-ink-soft);
}

@media (max-width: 560px) {
	.pet-search { flex-wrap: wrap; border-radius: 14px; }
	.pet-search__field--text { flex: 1 1 100%; order: 1; }
	.pet-search__field--genere { flex: 1 1 auto; order: 2; }
	.pet-search__field--genere select { width: 100%; }
	.pet-search__submit { order: 3; }

	/* No genre filter: keep the input and the search button on one row. */
	.pet-search:not(:has(.pet-search__field--genere)) { flex-wrap: nowrap; }
	.pet-search:not(:has(.pet-search__field--genere)) .pet-search__field--text { flex: 1 1 auto; }
}

/* ---------- Catalog grid ---------- */
.pet-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px 14px;
}
@media (max-width: 560px) { .pet-grid { grid-template-columns: repeat(2, 1fr); } }
.pet-card { display: flex; flex-direction: column; }

/* Desktop: each card sits on a white panel base, matching the search pill */
@media (min-width: 901px) {
	.pet-grid { gap: 18px; }
	.pet-card {
		background: var(--pet-panel);
		border-radius: 16px;
		box-shadow: 0 8px 26px rgba(20, 22, 28, .07);
		padding: 14px;
		transition: box-shadow .2s ease, transform .2s ease;
	}
	.pet-card:hover {
		box-shadow: 0 14px 34px rgba(20, 22, 28, .1);
		transform: translateY(-2px);
	}
	.pet-card:hover .pet-card__poster { transform: none; box-shadow: 0 1px 2px rgba(20, 22, 28, .06); }
	.pet-card__body { padding-left: 0; padding-right: 0; }
}
.pet-card__link { text-decoration: none; color: inherit; display: block; }
.pet-card__poster {
	display: block;
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--pet-surface-2);
	border-radius: var(--pet-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 22, 28, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}
.pet-card__link:hover .pet-card__poster {
	box-shadow: 0 18px 40px rgba(20, 22, 28, .16);
	transform: translateY(-3px);
}
.pet-card__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pet-card__poster--empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, var(--pet-surface-2), color-mix(in srgb, var(--pet-accent) 8%, var(--pet-surface-2)));
}
.pet-card__body { display: block; padding: 12px 2px 0; }
.pet-card__title { display: block; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.pet-card__date {
	display: inline-block;
	margin: 7px 0 0;
	padding: 3px 9px;
	border: 1px solid color-mix(in srgb, var(--pet-accent) 35%, var(--pet-border));
	border-radius: 4px;
	background: var(--pet-accent-tint);
	color: var(--pet-accent-text);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}
.pet-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 8px 0 0;
}
.pet-tag {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid color-mix(in srgb, var(--pet-border) 70%, transparent);
	border-radius: 3px;
	background: color-mix(in srgb, var(--pet-panel) 55%, transparent);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	backdrop-filter: blur(8px) saturate(140%);
	color: var(--pet-ink-soft);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}
a.pet-tag:hover { border-color: var(--pet-accent); color: var(--pet-accent-text); }

/* ---------- Pagination ---------- */
.pet-pagination { margin: 44px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pet-pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	justify-content: center;
	padding: 8px 12px;
	border: 1px solid var(--pet-border);
	border-radius: var(--pet-radius);
	text-decoration: none;
	color: var(--pet-ink);
	font-size: .9rem;
}
.pet-pagination .page-numbers:hover { border-color: var(--pet-accent); }
.pet-pagination .page-numbers.current {
	background: var(--pet-accent);
	color: var(--pet-on-accent);
	border-color: var(--pet-accent);
}

/* ---------- Notices ---------- */
/* Shared with the plugin's .pe-notice / .pe-form__errors — keep the two in sync. */
.pet-notice {
	padding: 14px 16px;
	background: var(--pet-surface);
	border: 1px solid var(--pet-border);
	border-left: 3px solid var(--pet-accent);
	border-radius: var(--pet-radius);
	font-size: .92rem;
	line-height: 1.55;
	color: var(--pet-ink);
}
.pet-notice + .pet-notice { margin-top: 10px; }
.pet-notice a { color: var(--pet-accent-text); font-weight: 600; }
.pet-notice--warning,
.pet-notice--pending { border-left-color: #dba617; background: #fdf6e6; border-color: #f0dfb3; }
.pet-notice--success,
.pet-notice--approved { border-left-color: #1a9e4b; background: #eaf7ee; border-color: #bfe4cb; }
.pet-notice--error,
.pet-notice--rejected { border-left-color: #d63638; background: #fdecec; border-color: #f2c2c2; }

/* ---------- Empty states ---------- */
.pet-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 40px 24px;
	background: var(--pet-panel);
	border: 1px solid var(--pet-border);
	border-radius: 14px;
	color: var(--pet-ink-soft);
}
.pet-empty__icon {
	display: inline-flex;
	margin-bottom: 8px;
	color: color-mix(in srgb, var(--pet-accent) 55%, var(--pet-ink-soft));
}
.pet-empty__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--pet-ink); }
.pet-empty__text { margin: 0; max-width: 42ch; }
.pet-empty .pet-btn { margin-top: 14px; }

/* ---------- Film detail ---------- */
[id] { scroll-margin-top: 180px; }
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Poster in a fixed left column; everything else stacks in one narrower column
   that all blocks share (intro text, details box, download area). */
.pet-film__layout {
	max-width: var(--pet-maxw);
	margin: 0 auto;
	padding: clamp(44px, 6vw, 76px) 24px 0;
	display: grid;
	grid-template-columns: minmax(230px, 330px) minmax(0, 1fr);
	column-gap: clamp(24px, 4vw, 52px);
	align-items: start;
}
.pet-film__layout--no-poster { display: block; }
.pet-film__col { min-width: 0; }
.pet-film__col > * + * { margin-top: clamp(26px, 4vw, 44px); }
.pet-film__col > .pet-film__subnav + * { margin-top: 16px; }

/* In-page section menu (desktop only) */
.pet-film__subnav { display: none; }
@media (min-width: 861px) {
	.pet-film__subnav {
		display: flex;
		flex-wrap: wrap;
		width: fit-content;
		max-width: 100%;
		gap: 3px;
		position: sticky;
		top: 118px;
		z-index: 20;
		margin: 0;
		padding: 5px;
		border-radius: 12px;
		border: 1px solid color-mix(in srgb, var(--pet-border) 55%, transparent);
		background: color-mix(in srgb, var(--pet-bg) 80%, transparent);
		-webkit-backdrop-filter: blur(10px) saturate(140%);
		backdrop-filter: blur(10px) saturate(140%);
		transition: background .2s ease, box-shadow .2s ease, border-color .2s ease;
	}
	.pet-film__subnav.is-stuck {
		background: var(--pet-panel);
		border-color: var(--pet-border);
		box-shadow: 0 8px 24px rgba(20, 22, 28, .1);
	}
}
.pet-film__subnav a {
	padding: 11px 19px;
	border-radius: 9px;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--pet-ink-soft);
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}
.pet-film__subnav a:hover { background: var(--pet-panel); color: var(--pet-ink); }
.pet-film__subnav a.is-active { background: var(--pet-accent); color: var(--pet-on-accent); }

.pet-film__poster { position: sticky; top: 118px; }
.pet-film__poster img {
	display: block;
	border-radius: var(--pet-radius);
	width: 100%;
	box-shadow: 0 20px 50px rgba(20, 22, 28, .2);
}
.pet-breadcrumb { margin: 0 0 16px; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; }
.pet-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--pet-ink-soft); font-weight: 700; }
.pet-breadcrumb a:hover { color: var(--pet-accent-text); }
.pet-film__title { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: 0 0 14px; }
.pet-film__tags { margin: 0 0 22px; }
.pet-film__actions { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.pet-film__actions .pet-btn { flex: 0 0 auto; }

/* Synopsis sits in the intro column, right under the genre tags */
.pet-film__synopsis { margin: 20px 0 0; }
.pet-film__synopsis > :first-child { margin-top: 0; }
.pet-film__synopsis > :last-child { margin-bottom: 0; }
.pet-film__synopsis p { font-size: clamp(1.02rem, 1.4vw, 1.14rem); line-height: 1.6; color: color-mix(in srgb, var(--pet-ink) 88%, #fff); }

/* Details + rating: boxed on a white base, same column width as everything else */
.pet-film__info {
	background: var(--pet-panel);
	border-radius: 18px;
	box-shadow: 0 8px 26px rgba(20, 22, 28, .07);
	padding: clamp(22px, 3.4vw, 34px);
}
.pet-film__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(28px, 5vw, 56px);
	margin: 0;
}
.pet-film__meta > div { margin: 8px 0; }
.pet-film__meta dt { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--pet-ink-soft); margin: 0 0 4px; }
.pet-film__meta dd { margin: 0; font-weight: 500; font-size: 1rem; }

.pet-film__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 20px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--pet-border);
}
.pet-film__info .pet-film__rating:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.pet-film__rating-age,
.pet-film__rating-warn { width: 30px; height: 30px; object-fit: contain; display: block; }

/* ---------- Download area ---------- */
.pet-film__downloads {
	background: var(--pet-surface);
	border-radius: 18px;
	padding: clamp(22px, 3.4vw, 34px);
}
.pet-downloads__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin: 0 0 24px;
}
.pet-downloads__head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin: 0; }

.pet-view-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--pet-panel);
	border-radius: 10px;
}
.pet-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--pet-ink-soft);
	font: inherit;
	font-size: .8rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pet-view-toggle__btn:hover { color: var(--pet-ink); }
.pet-view-toggle__btn.is-active { background: var(--pet-accent); color: var(--pet-on-accent); }

.pet-download-group { margin: 0 0 28px; }
.pet-download-group:last-child { margin-bottom: 0; }
.pet-download-group__title {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--pet-ink-soft);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--pet-border);
}
.pet-download-list { list-style: none; margin: 0; padding: 0; }

.pet-download-item__link {
	display: flex;
	background: var(--pet-panel);
	border: 1px solid var(--pet-border);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: var(--pet-ink);
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pet-download-item__link:hover {
	border-color: var(--pet-accent);
	box-shadow: 0 10px 24px rgba(20, 22, 28, .1);
}
.pet-download-item__thumb {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--pet-surface-2);
	color: var(--pet-accent-text);
}
.pet-download-item__thumb img { width: 100%; height: 100%; display: block; }
.pet-download-item__thumb--placeholder {
	background: linear-gradient(140deg, var(--pet-surface), var(--pet-accent-tint));
}
.pet-download-item__body { display: flex; flex-direction: column; min-width: 0; }
.pet-download-item__title { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.pet-download-item__type {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	font-size: .64rem;
	color: var(--pet-ink-soft);
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* Grid view — previews get the emphasis */
.pet-downloads--grid .pet-download-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 16px;
}
.pet-downloads--grid .pet-download-item__link { flex-direction: column; border-radius: 14px; }
.pet-downloads--grid .pet-download-item__thumb { width: 100%; aspect-ratio: 3 / 2; padding: 12px; }
.pet-downloads--grid .pet-download-item__thumb img { object-fit: contain; }
.pet-downloads--grid .pet-download-item__thumb .pet-icon { width: 30px; height: 30px; }
.pet-downloads--grid .pet-download-item__body { gap: 5px; padding: 13px 15px 15px; }
.pet-downloads--grid .pet-download-item__link:hover { transform: translateY(-2px); }

/* List view — compact rows */
.pet-downloads--list .pet-download-list { display: flex; flex-direction: column; gap: 8px; }
.pet-downloads--list .pet-download-item__link { flex-direction: row; align-items: center; gap: 14px; padding: 9px 14px 9px 9px; }
.pet-downloads--list .pet-download-item__thumb { width: 52px; height: 52px; border-radius: 6px; }
.pet-downloads--list .pet-download-item__thumb img { object-fit: cover; }
.pet-downloads--list .pet-download-item__thumb .pet-icon { width: 20px; height: 20px; }
.pet-downloads--list .pet-download-item__body { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.pet-site-footer {
	border-top: 1px solid var(--pet-border);
	background: var(--pet-surface);
	padding: 44px 0 56px;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--pet-ink-soft);
}
.pet-site-footer__inner { display: block; }
.pet-site-footer a { color: var(--pet-ink); text-decoration: none; }
.pet-site-footer a:hover { color: var(--pet-accent-text); }
.pet-footer__info { margin: 0 0 18px; color: var(--pet-ink); font-size: .82rem; line-height: 1.55; }
.pet-footer__info p { margin: 0 0 3px; }
.pet-footer__info-head { margin-bottom: 6px; font-size: .86rem; }
.pet-footer__contact strong { font-weight: 700; }
.pet-footer__sep { color: var(--pet-border); margin: 0 4px; }
.pet-footer__note { margin: 0 0 18px; }
.pet-footer__social { margin: 0 0 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pet-footer__social-label { color: var(--pet-ink); font-weight: 600; font-size: .82rem; margin-right: 2px; }
.pet-footer__social-tag { padding: 5px 11px; font-size: .72rem; }
.pet-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	padding-top: 20px;
	border-top: 1px solid var(--pet-border);
	font-size: .82rem;
}
.pet-copyright { margin: 0; font-weight: 600; color: var(--pet-ink); }
.pet-footer__policies { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pet-footer__policies a,
.pet-footer__policies button,
.pet-menu--footer a { font-weight: 600; }
.pet-footer__cookie-pref {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--pet-ink);
	cursor: pointer;
}
.pet-footer__cookie-pref:hover { color: var(--pet-accent-text); }
.pet-footer__credit {
	margin: 16px 0 0;
	display: flex;
	align-items: center;
	gap: 7px;
}
.pet-footer__credit-label { font-size: .72rem; color: var(--pet-ink-soft); }
/* Vendor badge — always TradePress orange, independent of the client accent. */
a.pet-footer__credit-tag {
	padding: 4px 10px;
	font-size: .7rem;
	border-color: #ff8a65;
	background: #ff8a65;
	color: #fff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
a.pet-footer__credit-tag:hover {
	border-color: #ff7a50;
	background: #ff7a50;
	color: #fff;
}
.pet-menu--footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }

/* ---------- Cookie notice (bottom-left) ---------- */
.pet-cookie {
	position: fixed;
	left: clamp(12px, 3vw, 28px);
	bottom: clamp(12px, 3vw, 28px);
	z-index: 70;
	width: min(370px, calc(100vw - 24px));
	padding: 18px 20px 16px;
	background: var(--pet-panel);
	border: 1px solid var(--pet-border);
	border-radius: 14px;
	box-shadow: 0 16px 44px rgba(15, 17, 22, .22);
	color: var(--pet-ink-soft);
	font-size: .84rem;
	line-height: 1.5;
}
.pet-cookie[hidden] { display: none; }
.pet-js .pet-cookie {
	transform: translateY(12px);
	opacity: 0;
	transition: transform .28s ease, opacity .28s ease;
}
.pet-js .pet-cookie.is-visible { transform: none; opacity: 1; }
.pet-cookie__text { margin: 0 0 14px; }
.pet-cookie__text a { color: var(--pet-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pet-cookie__text a:hover { color: var(--pet-accent); }
.pet-cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pet-cookie__actions .pet-btn { flex: 1 1 auto; text-align: center; }
.pet-cookie__btn-secondary {
	background: transparent;
	border-color: var(--pet-border);
	color: var(--pet-ink);
}
.pet-cookie__btn-secondary:hover {
	background: var(--pet-surface);
	border-color: var(--pet-ink-soft);
	color: var(--pet-ink);
}
@media (prefers-reduced-motion: reduce) {
	.pet-js .pet-cookie { transition: none; }
}

/* ---------- Back to top ---------- */
.pet-to-top {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 60;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pet-accent);
	border-radius: 999px;
	background: var(--pet-accent);
	color: var(--pet-on-accent);
	box-shadow: 0 8px 24px rgba(20, 22, 28, .16);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s ease, color .15s ease;
}
.pet-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.pet-to-top:hover { background: var(--pet-accent-dark); border-color: var(--pet-accent-dark); color: var(--pet-on-accent); }
.pet-to-top:focus-visible { outline: 2px solid var(--pet-accent); outline-offset: 2px; }
.pet-to-top .pet-icon { width: 20px; height: 20px; }

/* ---------- Generic content ---------- */
.pet-page { padding: 48px 0 0; }
.pet-narrow { max-width: 660px; }
.pet-page--doc { max-width: 980px; }
.pet-entry-content { max-width: 70ch; }

/* Content page: optional in-page section menu beside the prose */
.pet-doc__layout { display: block; }
.pet-doc__layout .pet-prose { max-width: 68ch; }
.pet-doc-nav[hidden] { display: none; }
.pet-doc-nav__title {
	margin: 0 0 10px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pet-ink-soft);
}
.pet-doc-nav ul { margin: 0; padding: 0; list-style: none; }
.pet-doc-nav li + li { margin-top: 2px; }
.pet-doc-nav a {
	display: block;
	padding: 6px 10px;
	border-radius: 7px;
	font-size: .85rem;
	line-height: 1.35;
	color: var(--pet-ink-soft);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.pet-doc-nav a:hover { background: var(--pet-surface); color: var(--pet-ink); }
.pet-doc-nav a.is-active { background: var(--pet-accent-tint); color: var(--pet-accent-text); font-weight: 600; }

@media (max-width: 1039px) {
	.pet-doc-nav {
		margin: 0 0 30px;
		padding: 16px 18px;
		border: 1px solid var(--pet-border);
		border-radius: 12px;
		background: var(--pet-panel);
	}
}
@media (min-width: 1040px) {
	.pet-doc__layout {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		column-gap: 48px;
		align-items: start;
	}
	.pet-doc-nav {
		position: sticky;
		top: 118px;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}
}
.pet-entry-content img { border-radius: var(--pet-radius); }
.pet-post-list { display: grid; gap: 28px; }
.pet-post-summary h2 { font-size: 1.4rem; margin: 0 0 6px; }

/* Long-form prose (Privacy / Cookie Policy and other content pages) */
.pet-prose { max-width: none; color: var(--pet-ink-soft); font-size: 1rem; line-height: 1.72; }
.pet-prose > * + * { margin-top: 1.1em; }
.pet-prose h2 {
	color: var(--pet-ink);
	font-size: clamp(1.22rem, 2.2vw, 1.5rem);
	line-height: 1.25;
	letter-spacing: -.01em;
	margin-top: 2.1em;
}
.pet-prose h3 { color: var(--pet-ink); font-size: 1.1rem; margin-top: 1.7em; }
.pet-prose h2:first-child,
.pet-prose h3:first-child { margin-top: 0; }
.pet-prose h2 + p,
.pet-prose h3 + p { margin-top: .5em; }
.pet-prose a { color: var(--pet-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.pet-prose a:hover { color: var(--pet-accent); }
.pet-prose strong { color: var(--pet-ink); font-weight: 600; }
.pet-prose ul,
.pet-prose ol { padding-left: 1.35em; }
.pet-prose li + li { margin-top: .4em; }
.pet-prose blockquote {
	margin: 1.4em 0;
	padding: 2px 0 2px 1em;
	border-left: 3px solid var(--pet-accent);
	color: var(--pet-ink-soft);
}
.pet-prose hr { border: 0; border-top: 1px solid var(--pet-border); margin: 2.4em 0; }
.pet-prose code {
	background: var(--pet-surface);
	padding: .12em .4em;
	border-radius: 4px;
	font-size: .9em;
}
.pet-prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pet-prose th,
.pet-prose td { border: 1px solid var(--pet-border); padding: 8px 10px; text-align: left; }
.pet-prose th { background: var(--pet-surface); color: var(--pet-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
	.pet-film__layout { display: block; }
	.pet-film__poster { position: static; max-width: 300px; margin: 0 0 24px; }
}
@media (max-width: 640px) {
	.pet-container { padding: 0 18px; }
	.pet-site-header__inner { gap: 12px 16px; padding-top: 20px; padding-bottom: 20px; }
	.pet-brand { gap: 12px; }
	.pet-brand__logo img { max-height: 38px; max-width: min(150px, 38vw); }
	.pet-account-link { gap: 6px; }
	.pet-hero { padding: 36px 0 20px; }
	.pet-hero--image { min-height: 380px; padding: 40px 0 72px; }
	/* Scheda film: locandina a tutta larghezza della colonna. */
	.pet-film__poster { max-width: 100%; }
	.pet-footer__bottom { flex-direction: column; align-items: flex-start; }
	/* Two compact columns rather than one tall one. */
	.pet-downloads--grid .pet-download-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.pet-downloads--grid .pet-download-item__body { padding: 10px 12px 12px; }
	.pet-downloads--grid .pet-download-item__title { font-size: .88rem; }
}
@media (max-width: 460px) {
	.pet-account-link .pet-btn { padding-left: 11px; padding-right: 11px; }
	.pet-account-link .pet-btn span {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
}