/**
 * Portfolio showcase — /portfolio/ and the home page portfolio section.
 * Loaded by inc/portfolio-showcase.php. Builds on style.css tokens.
 */

.pf-showcase, .pf-grid, .pf-stats { --pf-ink: #062a33; --pf-radius: 14px; }
[dir="rtl"] .pf-flip { display: inline-block; transform: scaleX(-1); }

/* Hero figures ------------------------------------------------------------ */
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 880px; margin: 3.25rem auto 0; }
.pf-stat {
	display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 1rem; border-radius: var(--radius-lg);
	background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-top: 2px solid var(--gold);
}
.pf-stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; line-height: 1; background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-stat-label { font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* Filters ----------------------------------------------------------------- */
.pf-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 3rem; }
.pf-filter {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--font-head); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
	padding: 0.55rem 0.7rem 0.55rem 1.15rem; border-radius: 999px; border: 1px solid var(--grey-200);
	background: var(--white); color: var(--grey-700); cursor: pointer;
	transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
[dir="rtl"] .pf-filter { padding: 0.55rem 1.15rem 0.55rem 0.7rem; }
.pf-filter:hover { border-color: var(--gold); color: var(--navy); box-shadow: var(--shadow-sm); }
.pf-filter-count { min-width: 1.6rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--grey-100); color: var(--grey-600); font-size: 0.7rem; font-weight: 600; text-align: center; }
.pf-filter.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pf-filter.is-active .pf-filter-count { background: var(--gold); color: var(--navy); }
.pf-filter:focus-visible, .pf-card:focus-visible, .pf-icon-btn:focus-visible, .pf-shot:focus-visible, .pf-next:focus-visible, .pf-screen-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Cards ------------------------------------------------------------------- */
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.pf-card {
	position: relative; display: flex; flex-direction: column; background: var(--white); border-radius: var(--pf-radius);
	overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--grey-100); color: inherit;
	transition: transform 0.45s var(--ease-luxe), box-shadow 0.45s var(--ease-luxe), border-color 0.45s var(--ease-luxe);
}
.pf-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(230,168,23,0.35); }
.pf-card[hidden] { display: none; }

.pf-card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--pf-ink); }
.pf-card-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-luxe); }
.pf-card:hover .pf-card-media > img { transform: scale(1.05); }
.pf-card-media--devices { background: radial-gradient(120% 90% at 70% 10%, rgba(230,168,23,0.22), transparent 55%), var(--navy-gradient); }
.pf-badge {
	position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 3; padding: 0.35rem 0.8rem; border-radius: 999px;
	background: var(--gold-gradient); color: var(--navy); font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Client logo badge */
.pf-logo {
	position: absolute; bottom: 0.9rem; inset-inline-start: 0.9rem; z-index: 3; display: flex; align-items: center; justify-content: center;
	height: 3rem; min-width: 3rem; max-width: 9.5rem; padding: 0.35rem 0.6rem; border-radius: 12px; background: var(--white);
	box-shadow: 0 8px 22px rgba(1, 12, 40, 0.28);
}
.pf-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.pf-card--featured .pf-logo { height: 3.75rem; max-width: 11rem; bottom: 1.25rem; inset-inline-start: 1.25rem; }
.pf-head-id { display: flex; align-items: center; gap: 1.25rem; }
.pf-logo--head { position: static; flex-shrink: 0; height: 4.5rem; min-width: 4.5rem; max-width: 10rem; border-radius: 16px; box-shadow: none; }

.pf-card-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 1.5rem 1.25rem; flex: 1; }
.pf-card-sector { font-family: var(--font-head); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.pf-card-name { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--navy); line-height: 1.3; }
.pf-card-summary { color: var(--grey-600); font-size: 0.88rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--grey-100); }
.pf-card-count { font-family: var(--font-head); font-size: 0.75rem; color: var(--grey-400); }
.pf-card-more { font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.pf-card-more .pf-flip { display: inline-block; transition: transform 0.3s var(--ease-out); }
.pf-card:hover .pf-card-more { color: var(--gold-deep); }
.pf-card:hover .pf-card-more .pf-flip { transform: translateX(4px); }
[dir="rtl"] .pf-card:hover .pf-card-more .pf-flip { transform: scaleX(-1) translateX(4px); }

/* Call-to-action tile: completes the last row */
.pf-card--cta {
	justify-content: center; gap: 0.8rem; padding: 2.25rem 2rem; color: rgba(255,255,255,0.8);
	background: radial-gradient(80% 120% at 100% 0%, rgba(230,168,23,0.25), transparent 60%), var(--navy-gradient); border-color: transparent;
}
.pf-card--cta:hover { border-color: rgba(230,168,23,0.5); }
.pf-cta-eyebrow { font-family: var(--font-head); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); }
.pf-cta-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; color: var(--white); }
.pf-cta-text { max-width: 440px; font-size: 0.95rem; line-height: 1.6; }
.pf-card--cta .btn { align-self: flex-start; margin-top: 0.6rem; }

/* Featured: 2 x 2 tile (with the call-to-action tile, 14 projects fill six rows of three) */
.pf-card--featured { grid-column: span 2; grid-row: span 2; }
.pf-card--featured .pf-card-media { flex: 1; aspect-ratio: auto; min-height: 360px; }
.pf-card--featured .pf-card-body { padding: 1.75rem 2rem 1.5rem; gap: 0.7rem; flex: none; }
.pf-card--featured .pf-card-name { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.pf-card--featured .pf-card-summary { -webkit-line-clamp: 3; font-size: 0.96rem; }
.pf-card--featured .pf-devices--card .pf-laptop { left: 8%; bottom: 14%; width: 72%; }
.pf-card--featured .pf-devices--card .pf-phone { right: 9%; bottom: 8%; width: 18%; }

.pf-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-chip { font-family: var(--font-head); font-size: 0.68rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--grey-50); border: 1px solid var(--grey-100); color: var(--grey-600); }

/* Device mockups ---------------------------------------------------------- */
.pf-devices { position: relative; display: block; width: 100%; }
.pf-devices--card { position: absolute; inset: 0; }
.pf-devices--stage { aspect-ratio: 16 / 9.4; max-width: 920px; margin: 0 auto; }

.pf-laptop { position: absolute; display: block; left: 6%; bottom: 13%; width: 76%; filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45)); }
.pf-devices--stage .pf-laptop { left: 3%; bottom: 9%; width: 78%; }
.pf-laptop-lid { display: block; padding: 2.3% 2.3% 2.8%; background: linear-gradient(180deg, #2b2f36, #121418); border-radius: 3% 3% 0 0 / 4.5% 4.5% 0 0; border: 1px solid #3a3f47; }
.pf-laptop-base { position: relative; display: block; width: 114%; margin-inline-start: -7%; height: 0; padding-top: 3.6%; background: linear-gradient(180deg, #e3e6ea 0%, #b9bdc4 55%, #8d9199 100%); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.pf-laptop-base::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16%; height: 40%; background: #a3a7ae; border-radius: 0 0 8px 8px; }

.pf-phone { position: absolute; display: block; right: 7%; bottom: 7%; width: 21%; filter: drop-shadow(0 16px 26px rgba(0,0,0,0.5)); }
.pf-devices--stage .pf-phone { right: 4%; bottom: 3%; width: 20%; }
[dir="rtl"] .pf-laptop { left: auto; right: 6%; }
[dir="rtl"] .pf-devices--stage .pf-laptop { right: 3%; }
[dir="rtl"] .pf-phone { right: auto; left: 7%; }
[dir="rtl"] .pf-devices--stage .pf-phone { left: 4%; }
.pf-phone-body { position: relative; display: block; padding: 5%; background: linear-gradient(160deg, #2b2f36, #0c0d10); border-radius: 18% / 8.5%; border: 1px solid #3a3f47; }
.pf-phone-body::after { content: ''; position: absolute; top: 4.2%; left: 50%; transform: translateX(-50%); width: 34%; height: 2.6%; background: #0c0d10; border-radius: 999px; z-index: 2; }

.pf-screen { position: relative; display: block; overflow: hidden; background: #0b1a33; }
.pf-screen--desktop { aspect-ratio: 16 / 10; border-radius: 3px; }
.pf-screen--mobile { aspect-ratio: 9 / 19.5; border-radius: 14% / 6.5%; }
.pf-screen img, .pf-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-luxe); }
.pf-card:hover .pf-screen img, .pf-card:hover .pf-screen video { transform: scale(1.04); }
.pf-screen-link { position: absolute; inset: 0; display: block; cursor: zoom-in; }

/* Full-length captures: scroll down the page on hover (cards) and on a slow loop (project dialog) */
.pf-screen img.pf-pan { object-position: var(--pf-x, 50%) 0; transition: object-position var(--pf-t, 10s) cubic-bezier(0.45, 0, 0.55, 1); }
.pf-card:hover .pf-screen img.pf-pan { transform: none; object-position: var(--pf-x, 50%) 100%; }
.pf-devices--stage .pf-screen img.pf-pan { animation: pf-pan var(--pf-t, 10s) cubic-bezier(0.45, 0, 0.55, 1) 1.2s infinite alternate; }
.pf-devices--stage .pf-screen:hover img.pf-pan { animation-play-state: paused; }
@keyframes pf-pan { from { object-position: var(--pf-x, 50%) 0; } to { object-position: var(--pf-x, 50%) 100%; } }

/* Empty screen: shown until a file is added */
.pf-screen-empty {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.5rem;
	text-align: center; color: rgba(255,255,255,0.7); font-family: var(--font-head); font-size: clamp(0.55rem, 1.2vw, 0.78rem);
	background: linear-gradient(110deg, #0a2050 30%, #13306b 50%, #0a2050 70%) 0 0 / 250% 100%; animation: pf-sheen 3.2s linear infinite;
}
.pf-screen-empty svg { color: var(--gold-bright); }
.pf-screen-empty small { font-size: 0.6rem; opacity: 0.6; word-break: break-all; }
@keyframes pf-sheen { to { background-position: -250% 0; } }

/* Project dialog ---------------------------------------------------------- */
.pf-dialog {
	width: min(1180px, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0;
	border-radius: var(--pf-radius); background: var(--white); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain;
}
.pf-dialog:focus { outline: none; }
.pf-dialog[open] { animation: pf-in 0.45s var(--ease-luxe); }
.pf-dialog::backdrop { background: rgba(1, 12, 40, 0.8); backdrop-filter: blur(6px); }
@keyframes pf-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }

.pf-bar {
	position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 0.75rem 1rem 0.75rem 1.5rem; background: rgba(1, 12, 40, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pf-bar-name { font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-bar-nav { display: flex; gap: 0.5rem; flex-shrink: 0; }
.pf-icon-btn {
	display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.06); color: var(--white); font-size: 1.05rem; line-height: 1; cursor: pointer;
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.pf-icon-btn--close { font-size: 1.5rem; }
.pf-icon-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

.pf-dialog-head { position: relative; background: radial-gradient(90% 70% at 85% 0%, rgba(230,168,23,0.16), transparent 60%), var(--navy-gradient); color: rgba(255,255,255,0.82); padding: 2.75rem 3rem 3rem; }
.pf-dialog-head h2 { color: var(--white); font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0.5rem 0 0.4rem; }
.pf-dialog-head .pf-card-sector { color: var(--gold-bright); }
.pf-tagline { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--gold-bright); margin-bottom: 0.9rem; }
.pf-summary { max-width: 720px; font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; }
.pf-link { margin-top: 1.5rem; }
.pf-socials { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.1rem; }
.pf-social {
	display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: var(--white);
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.pf-social:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-2px); }
.pf-social:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pf-dialog-head .pf-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.85); }

.pf-stage { margin-top: 2.75rem; padding: 2rem 1rem 1.25rem; border-radius: var(--pf-radius); background: radial-gradient(70% 80% at 50% 100%, rgba(230,168,23,0.14), transparent 70%), rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); }
.pf-stage-caption { display: block; margin-top: 1rem; text-align: center; font-family: var(--font-head); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

.pf-dialog-body { padding: 2.75rem 3rem 3rem; }
.pf-group + .pf-group { margin-top: 2.75rem; }
.pf-group h3 { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-head); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); margin-bottom: 1.1rem; }
.pf-group h3::after { content: ''; flex: 1; height: 1px; background: var(--grey-100); }
.pf-group-count { padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(230,168,23,0.14); color: var(--gold-deep); font-size: 0.7rem; letter-spacing: 0; }

.pf-gallery { columns: 3 220px; column-gap: 1rem; }
.pf-shot { display: block; margin-bottom: 1rem; break-inside: avoid; border-radius: 10px; overflow: hidden; background: var(--pf-ink); cursor: zoom-in; box-shadow: var(--shadow-sm); }
.pf-shot img { width: 100%; height: auto; display: block; transition: transform 0.6s var(--ease-luxe); }
.pf-shot:hover img { transform: scale(1.03); }

.pf-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem; padding: 1.75rem 2rem;
	border-radius: var(--pf-radius); background: var(--cream); border: 1px solid rgba(230,168,23,0.25);
}
.pf-cta strong { display: block; font-family: var(--font-head); font-size: 1.15rem; color: var(--navy); margin-bottom: 0.25rem; }
.pf-cta span { color: var(--grey-600); font-size: 0.92rem; }

.pf-next {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; width: 100%; margin-top: 1.25rem; padding: 1.4rem 2rem;
	border: 1px solid var(--grey-200); border-radius: var(--pf-radius); background: var(--white); cursor: pointer; text-align: start;
	transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pf-next:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.pf-next-label { font-family: var(--font-head); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-400); }
.pf-next-name { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; color: var(--navy); }
.pf-next:hover .pf-next-name { color: var(--gold-deep); }

/* Live brand board ---------------------------------------------------------- */
.pf-board { padding: 1.75rem; border: 1px solid var(--grey-100); border-radius: var(--pf-radius); background: var(--white); box-shadow: var(--shadow-sm); }
.pf-board-id { display: flex; align-items: center; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--grey-100); }
.pf-board-id img { flex-shrink: 0; max-width: 170px; max-height: 96px; width: auto; height: auto; object-fit: contain; }
.pf-board-id strong { display: block; font-family: var(--font-head); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; color: var(--navy); line-height: 1.2; }
.pf-board-id span { display: block; margin-top: 0.3rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--gold-deep); }
.pf-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.9rem; margin-top: 1.5rem; }
.pf-swatch {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.55rem 0.55rem 0.7rem; text-align: start;
	border: 1px solid var(--grey-100); border-radius: 12px; background: var(--white); cursor: copy; font: inherit;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.pf-swatch:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.pf-swatch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pf-swatch-dot { display: block; width: 100%; height: 64px; margin-bottom: 0.35rem; border-radius: 8px; background: var(--pf-c); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.pf-swatch-name { font-family: var(--font-head); font-size: 0.74rem; font-weight: 600; color: var(--grey-700); }
.pf-swatch-hex { font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; color: var(--navy); letter-spacing: 0.02em; }
.pf-swatch-rgb { font-size: 0.72rem; color: var(--grey-400); }
.pf-swatch.is-copied .pf-swatch-hex { color: var(--gold-deep); }

/* Image viewer ------------------------------------------------------------ */
.pf-zoom { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 4rem 4.5rem 2rem; border: 0; background: rgba(1, 12, 40, 0.95); }
.pf-zoom[open] { display: flex; align-items: center; justify-content: center; }
.pf-zoom::backdrop { background: transparent; }
.pf-zoom figure { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; max-height: 100%; margin: 0; }
.pf-zoom img { max-width: 100%; max-height: calc(100dvh - 9rem); object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.pf-zoom figcaption { font-family: var(--font-head); font-size: 0.82rem; color: rgba(255,255,255,0.75); text-align: center; }
.pf-zoom-counter { margin-inline-start: 0.75rem; color: var(--gold-bright); }
.pf-zoom-close { position: absolute; top: 1rem; inset-inline-end: 1rem; }
.pf-zoom-prev, .pf-zoom-next { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; }
.pf-zoom-prev { inset-inline-start: 1rem; }
.pf-zoom-next { inset-inline-end: 1rem; }
.pf-zoom.is-tall { align-items: flex-start; overflow-y: auto; }
.pf-zoom.is-tall img { max-height: none; height: auto; }
.pf-zoom.is-single .pf-zoom-prev, .pf-zoom.is-single .pf-zoom-next, .pf-zoom.is-single .pf-zoom-counter { display: none; }

body.pf-locked { overflow: hidden; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1024px) {
	.pf-grid { grid-template-columns: repeat(2, 1fr); }
	.pf-card--featured { grid-row: auto; }
	.pf-card--featured .pf-card-media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
}
@media (max-width: 760px) {
	.pf-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 2.5rem; }
	.pf-dialog-head, .pf-dialog-body { padding-inline: 1.5rem; }
}
@media (max-width: 640px) {
	.pf-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.pf-card--featured { grid-column: auto; }
	.pf-head-id { gap: 0.9rem; }
	.pf-logo--head { height: 3.5rem; min-width: 3.5rem; }
	.pf-card--cta { padding: 2rem 1.5rem; }
	.pf-card--featured .pf-card-media { aspect-ratio: 4 / 3; }
	.pf-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding: 0 1rem 0.5rem; scrollbar-width: none; }
	.pf-filters::-webkit-scrollbar { display: none; }
	.pf-filter { flex-shrink: 0; }
	.pf-dialog { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
	.pf-bar { padding-inline-start: 1.1rem; }
	.pf-dialog-head { padding: 2rem 1.1rem 2.25rem; }
	.pf-stage { margin-top: 2rem; padding: 1.25rem 0.5rem 1rem; }
	.pf-dialog-body { padding: 2rem 1.1rem 2.5rem; }
	.pf-gallery { columns: 2; column-gap: 0.6rem; }
	.pf-board { padding: 1.1rem; }
	.pf-board-id { gap: 1rem; }
	.pf-board-id img { max-width: 110px; max-height: 64px; }
	.pf-swatches { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
	.pf-shot { margin-bottom: 0.6rem; }
	.pf-cta { padding: 1.4rem; }
	.pf-cta .btn { width: 100%; text-align: center; }
	.pf-zoom { padding: 3.5rem 0.75rem 1.25rem; }
	.pf-zoom-prev, .pf-zoom-next { top: auto; bottom: 1rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-card, .pf-card-media > img, .pf-screen img, .pf-screen video, .pf-shot img { transition: none; }
	.pf-dialog[open] { animation: none; }
	.pf-screen-empty { animation: none; }
	.pf-devices--stage .pf-screen img.pf-pan { animation: none; }
	.pf-screen img.pf-pan { transition: none; }
}