/* Sections page base styles: layout plus the ZEV Default look. Skins (skins/{slug}/skin.css) override the variables. */

.ps-page {
	/* Background roles a section can pick in its Settings tab. */
	--skin-light: #fff;
	--skin-light-text: #111;
	--skin-dark: #111;
	--skin-dark-text: #fff;
	--skin-accent: #e8262a;
	--skin-accent-text: #fff;
	--skin-highlight: #f2f2f2;
	--skin-highlight-text: #111;
	/* Second emphasis color, e.g. labels on dark bars. */
	--skin-pop: #e8262a;
	--skin-ink: #111;
	/* Type. Display is headings, label is small caps-style tags. */
	--skin-font-body: inherit;
	--skin-font-display: inherit;
	--skin-font-accent: inherit;
	--skin-font-label: inherit;
	--skin-display-weight: 800;
	/* Shape. */
	--skin-border: 1px solid rgba(17, 17, 17, 0.12);
	--skin-radius: 4px;
	--skin-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	--skin-shadow-hover: 0 14px 36px rgba(0, 0, 0, 0.18);
	--skin-tilt: 0deg;
	--skin-badge-shape: circle(50%);
	--skin-pad: clamp(56px, 8vw, 96px);
	/* Side padding inside every section. */
	--skin-gutter: 16px;
	overflow-x: clip;
	font-family: var(--skin-font-body);
}

.ps-page *,
.ps-page *::before,
.ps-page *::after {
	box-sizing: border-box;
}

/* ---------- Section shell: background roles and spacing ---------- */

.ps-section {
	/* --ps-gutter is this section's side padding: the skin's gutter unless Padding Sides changes it. */
	--ps-gutter: var(--skin-gutter);
	position: relative;
	padding: var(--skin-pad) var(--ps-gutter);
	background: var(--ps-bg);
	color: var(--ps-text);
}

.ps-bg--light { --ps-bg: var(--skin-light); --ps-text: var(--skin-light-text); }
.ps-bg--dark { --ps-bg: var(--skin-dark); --ps-text: var(--skin-dark-text); }
.ps-bg--accent { --ps-bg: var(--skin-accent); --ps-text: var(--skin-accent-text); }
.ps-bg--highlight { --ps-bg: var(--skin-highlight); --ps-text: var(--skin-highlight-text); }

/* Pattern is Dark plus a texture by default; skins draw their own pattern. */
.ps-bg--pattern {
	--ps-bg: var(--skin-dark);
	--ps-text: var(--skin-dark-text);
	background-image: repeating-linear-gradient(-60deg, transparent 0 22px, rgba(255, 255, 255, 0.04) 22px 26px);
}

.ps-pad-top--none { padding-top: 0; }
.ps-pad-top--small { padding-top: calc(var(--skin-pad) / 2); }
.ps-pad-top--large { padding-top: calc(var(--skin-pad) * 1.5); }
.ps-pad-bottom--none { padding-bottom: 0; }
.ps-pad-bottom--small { padding-bottom: calc(var(--skin-pad) / 2); }
.ps-pad-bottom--large { padding-bottom: calc(var(--skin-pad) * 1.5); }
.ps-margin-top--small { margin-top: calc(var(--skin-pad) / 2); }
.ps-margin-top--medium { margin-top: var(--skin-pad); }
.ps-margin-top--large { margin-top: calc(var(--skin-pad) * 1.5); }
.ps-margin-bottom--small { margin-bottom: calc(var(--skin-pad) / 2); }
.ps-margin-bottom--medium { margin-bottom: var(--skin-pad); }
.ps-margin-bottom--large { margin-bottom: calc(var(--skin-pad) * 1.5); }

/* Padding Sides sets --ps-gutter, so full-width pieces that bleed by the gutter (e.g. Image) still meet the edges. */
.ps-pad-sides--none { --ps-gutter: 0px; }
.ps-pad-sides--small { --ps-gutter: calc(var(--skin-gutter) / 2); }
.ps-pad-sides--large { --ps-gutter: calc(var(--skin-gutter) * 2); }

/* Text Alignment overrides each section type's own alignment, including skins', for all of its text and buttons. */
.ps-page .ps-section.ps-align--left,
.ps-page .ps-section.ps-align--left * { text-align: left; }
.ps-page .ps-section.ps-align--center,
.ps-page .ps-section.ps-align--center * { text-align: center; }
.ps-page .ps-section.ps-align--right,
.ps-page .ps-section.ps-align--right * { text-align: right; }

.ps-page .ps-align--left :is(.ps-buttons, .ps-hero__title, .ps-countdown__units) { justify-content: flex-start; }
.ps-page .ps-align--center :is(.ps-buttons, .ps-hero__title, .ps-countdown__units) { justify-content: center; }
.ps-page .ps-align--right :is(.ps-buttons, .ps-hero__title, .ps-countdown__units) { justify-content: flex-end; }

/* Narrow text blocks (intro and CTA copy) move with the alignment instead of staying centered. */
.ps-page .ps-align--left :is(.ps-intro__text, .ps-cta__text, .ps-hero__text) { margin-left: 0; margin-right: auto; }
.ps-page .ps-align--center :is(.ps-intro__text, .ps-cta__text, .ps-hero__text) { margin-left: auto; margin-right: auto; }
.ps-page .ps-align--right :is(.ps-intro__text, .ps-cta__text, .ps-hero__text) { margin-left: auto; margin-right: 0; }

/* Content Max Width: the section's content fills up to --ps-content-max; an auto margin on one side sets Position. */
.ps-section__content {
	max-width: var(--ps-content-max);
	margin: 0 auto;
}

.ps-section__content--left { margin-left: 0; }
.ps-section__content--right { margin-right: 0; }

.ps-container {
	max-width: 1200px;
	margin: 0 auto;
}

.ps-container--narrow {
	max-width: 880px;
}

/* Settings → Container: Full Width lifts the site-container cap (narrow ones too); Padding Sides still sets the inset. */
.ps-section.ps-width--full :is(.ps-container, .ps-hero__inner) {
	max-width: none;
}

.ps-empty {
	padding: 48px 16px;
	text-align: center;
	opacity: 0.7;
}

/* ---------- Group: nested sections, laid out per screen size from zev_ps_group_vars() ---------- */

.ps-group {
	display: var(--ps-g-d-display);
	flex-direction: var(--ps-g-d-dir);
	flex-wrap: var(--ps-g-d-wrap);
	justify-content: var(--ps-g-d-justify);
	align-items: var(--ps-g-d-align);
	gap: var(--ps-g-d-gap);
	grid-template-columns: var(--ps-g-d-cols);
}

.ps-group > .ps-group__col {
	display: flex;
	flex-direction: column;
	gap: var(--ps-g-d-gap);
	flex: var(--ps-g-d-item);
	min-width: 0;
}

@media (max-width: 1024px) {
	.ps-group {
		display: var(--ps-g-t-display);
		flex-direction: var(--ps-g-t-dir);
		flex-wrap: var(--ps-g-t-wrap);
		justify-content: var(--ps-g-t-justify);
		align-items: var(--ps-g-t-align);
		gap: var(--ps-g-t-gap);
		grid-template-columns: var(--ps-g-t-cols);
	}

	.ps-group > .ps-group__col { flex: var(--ps-g-t-item); gap: var(--ps-g-t-gap); }
}

@media (max-width: 767px) {
	.ps-group {
		display: var(--ps-g-m-display);
		flex-direction: var(--ps-g-m-dir);
		flex-wrap: var(--ps-g-m-wrap);
		justify-content: var(--ps-g-m-justify);
		align-items: var(--ps-g-m-align);
		gap: var(--ps-g-m-gap);
		grid-template-columns: var(--ps-g-m-cols);
	}

	.ps-group > .ps-group__col { flex: var(--ps-g-m-item); gap: var(--ps-g-m-gap); }
}

/* A nested section fills its slot: the Group's container already sets the page width and side padding. */
.ps-page .ps-group__item .ps-container {
	max-width: none;
	margin: 0;
}

/* Sticky Column: stays in view beside the others, only at sizes where the Group sits side by side. */
@media (min-width: 1025px) {
	.ps-group--side-d > .ps-group__col--sticky {
		position: sticky;
		top: var(--skin-sticky-top, 96px);
		align-self: flex-start;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ps-group--side-t > .ps-group__col--sticky {
		position: sticky;
		top: var(--skin-sticky-top, 96px);
		align-self: flex-start;
	}
}

/* Settings → Hide On: removes a section or Group item at that screen size. */
@media (min-width: 1025px) {
	.ps-page .ps-hide--desktop { display: none; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ps-page .ps-hide--tablet { display: none; }
}

@media (max-width: 767px) {
	.ps-page .ps-hide--mobile { display: none; }
}

/* No side padding inside a Group, so full-width pieces (e.g. Image) don't bleed over the gap into the next item. */
.ps-group__item:not(.ps-group__item--boxed) { --ps-gutter: 0px; }

/* A nested section with its own Background gets a padded panel; Padding Top/Bottom/Sides still adjust it. */
.ps-group__item--boxed.ps-pad-sides--default { --ps-gutter: var(--skin-gutter); }
.ps-group__item--boxed.ps-pad-top--default { padding-top: var(--skin-box-pad, calc(var(--skin-pad) / 2)); }
.ps-group__item--boxed.ps-pad-bottom--default { padding-bottom: var(--skin-box-pad, calc(var(--skin-pad) / 2)); }

.ps-group__item--boxed {
	padding-inline: var(--ps-gutter);
	background: var(--ps-bg);
	color: var(--ps-text);
}

.ps-page .ps-group__item.ps-align--left,
.ps-page .ps-group__item.ps-align--left * { text-align: left; }
.ps-page .ps-group__item.ps-align--center,
.ps-page .ps-group__item.ps-align--center * { text-align: center; }
.ps-page .ps-group__item.ps-align--right,
.ps-page .ps-group__item.ps-align--right * { text-align: right; }

/* ---------- Shared type, panels and buttons ---------- */

.ps-intro {
	margin-bottom: 40px;
}

.ps-intro--center {
	text-align: center;
}

.ps-eyebrow {
	margin: 0 0 12px;
	color: var(--skin-pop);
	font-family: var(--skin-font-label);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ps-bg--accent .ps-eyebrow {
	color: inherit;
}

.ps-page .ps-heading {
	margin: 0 0 16px;
	color: inherit;
	font-family: var(--skin-font-display);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: var(--skin-display-weight);
	line-height: 1.05;
	text-transform: uppercase;
}

.ps-intro__text,
.ps-cta__text {
	max-width: 640px;
	margin: 0 auto;
	font-size: 1.1rem;
	line-height: 1.6;
}

.ps-intro--left .ps-intro__text {
	margin-left: 0;
}

/* Intro Layout → Label Left: the label in its own column beside the heading; it stacks beside a photo or in a column. */
@media (min-width: 901px) {
	.ps-intro--split {
		display: grid;
		grid-template-columns: minmax(0, var(--skin-label-width, 280px)) minmax(0, 1fr);
		column-gap: 24px;
		text-align: left;
	}

	.ps-intro--split .ps-eyebrow {
		grid-row: 1 / span 3;
		margin: 0;
	}

	.ps-intro--split > :not(.ps-eyebrow) {
		grid-column: 2;
	}

	.ps-intro--split .ps-intro__text {
		margin-left: 0;
	}

	:is(.ps-specs--has-image, .ps-group:not(.ps-group--stacked) .ps-group__item) .ps-intro--split {
		display: block;
	}

	:is(.ps-specs--has-image, .ps-group:not(.ps-group--stacked) .ps-group__item) .ps-intro--split .ps-eyebrow {
		margin-bottom: 12px;
	}
}

.ps-prose {
	font-size: 1.05rem;
	line-height: 1.7;
}

.ps-prose > :first-child {
	margin-top: 0;
}

.ps-prose > :last-child {
	margin-bottom: 0;
}

.ps-caption {
	margin: 16px 0 0;
	text-align: center;
	font-family: var(--skin-font-label);
	font-size: 0.85rem;
}

.ps-panel {
	position: relative;
	overflow: hidden;
	background: var(--skin-light);
	color: var(--skin-light-text);
	border: var(--skin-border);
	border-radius: var(--skin-radius);
	box-shadow: var(--skin-shadow);
}

.ps-panel img {
	display: block;
	width: 100%;
	height: auto;
}

.ps-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(135deg, #f4f4f4 0 14px, #e9e9e9 14px 28px);
	color: #555;
	font-family: var(--skin-font-accent);
	font-size: 1.4rem;
	text-transform: uppercase;
}

.ps-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 28px;
}

.ps-cta .ps-buttons,
.ps-section--countdown .ps-buttons,
.ps-hero--centered .ps-buttons {
	justify-content: center;
}

.ps-page .ps-button {
	display: inline-block;
	padding: 14px 32px;
	border: 2px solid transparent;
	border-radius: var(--skin-radius);
	font-family: var(--skin-font-display);
	font-size: 1rem;
	font-weight: var(--skin-display-weight);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ps-page .ps-button:hover,
.ps-page .ps-button:focus-visible {
	transform: translateY(-2px);
}

.ps-page .ps-button--primary { background: var(--skin-accent); color: var(--skin-accent-text); }
.ps-page .ps-button--dark { background: var(--skin-dark); color: var(--skin-dark-text); }
.ps-page .ps-button--light { background: var(--skin-light); color: var(--skin-light-text); }
.ps-page .ps-button--outline { background: transparent; color: inherit; border-color: currentColor; }

/* A Primary button on an Accent section would vanish, so it flips to dark there. */
.ps-bg--accent .ps-button--primary { background: var(--skin-dark); color: var(--skin-dark-text); }

/* Add to Cart button: a variable product's choices sit above it as a row of pills. */
.ps-cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.ps-cta .ps-cart,
.ps-hero--centered .ps-cart {
	align-items: center;
}

.ps-cart__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.ps-cart__legend {
	width: 100%;
	margin-bottom: 4px;
	padding: 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ps-cart__option input {
	position: absolute;
	opacity: 0;
}

.ps-cart__option span {
	display: block;
	padding: 8px 16px;
	border: 1px solid currentColor;
	border-radius: var(--skin-radius);
	font-size: 0.85rem;
	cursor: pointer;
}

/* Tinted from currentColor so the chosen pill reads on light and dark sections alike. */
.ps-cart__option input:checked + span {
	background: color-mix(in srgb, currentColor 14%, transparent);
	box-shadow: inset 0 0 0 1px currentColor;
	font-weight: 700;
}

.ps-cart__option input:focus-visible + span {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ps-page .ps-cart__button {
	cursor: pointer;
}

/* Sticky Add to Cart: a bar pinned to the bottom, slid off-screen until page-sections.js adds .is-visible. */
.ps-sticky-cart {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 12px max(var(--skin-gutter), calc((100vw - 1200px) / 2));
	background: var(--ps-bg);
	color: var(--ps-text);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.15);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s 0.25s;
}

.ps-sticky-cart.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 0.25s ease;
}

.ps-sticky-cart__product {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.ps-sticky-cart__name {
	overflow: hidden;
	font-family: var(--skin-font-display);
	font-weight: var(--skin-display-weight);
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Options and button sit side by side in the bar; the legend stays for screen readers only. */
.ps-cart--sticky {
	flex-direction: row;
	align-items: center;
	flex-shrink: 0;
}

/* Payment plan pills spell out the schedule, so the bar's pills can wrap above its button. */
.ps-cart--sticky:has(.ps-cart__options--plan) {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ps-cart--sticky .ps-cart__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.ps-page .ps-cart--sticky .ps-cart__button {
	padding: 10px 24px;
}

/* A Dark button on a Dark bar would vanish, so it flips to light (Primary on Accent already flips to dark). */
.ps-sticky-cart.ps-bg--dark .ps-button--dark { background: var(--skin-light); color: var(--skin-light-text); }

/* Phones: the name gives way so the price, options and button fit on one row. */
@media (max-width: 600px) {
	.ps-sticky-cart__name {
		display: none;
	}

	.ps-page .ps-cart--sticky .ps-cart__button {
		padding: 10px 16px;
	}
}

/* Locked (Pre-sale or Closed) or sold out: the button stays as a label but can't be clicked. */
.ps-page .ps-cart__button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* ---------- Hero ---------- */

.ps-section--hero {
	padding-top: clamp(40px, 6vw, 80px);
	padding-bottom: clamp(48px, 7vw, 96px);
}

.ps-hero--bg-image {
	margin: calc(var(--skin-pad) * -1) calc(-1 * var(--ps-gutter));
	padding: var(--skin-pad) var(--ps-gutter);
	background-size: cover;
	background-position: center;
}

/* Full image: darken the photo so the copy stays readable. */
.ps-hero--image {
	position: relative;
	isolation: isolate;
	min-height: 60vh;
	display: flex;
	align-items: center;
	color: #fff;
}

.ps-hero--image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.2));
}

.ps-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.ps-hero--split.ps-hero--has-art .ps-hero__inner {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.ps-hero--centered .ps-hero__inner {
	max-width: 860px;
	text-align: center;
}

.ps-hero__eyebrow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0 0 12px;
	color: var(--skin-pop);
	font-family: var(--skin-font-label);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ps-hero__eyebrow-note {
	opacity: 0.75;
}

.ps-page .ps-hero__eyebrow-logo {
	display: block;
	width: auto;
	height: 36px;
}

.ps-page .ps-hero__title {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0 16px;
	margin: 0 0 20px;
	color: inherit;
	font-family: var(--skin-font-display);
	font-weight: var(--skin-display-weight);
	line-height: 0.95;
	text-transform: uppercase;
}

.ps-hero--centered .ps-hero__title {
	justify-content: center;
}

.ps-hero__title-main {
	font-size: clamp(3rem, 9vw, 7rem);
}

.ps-hero__title-suffix {
	padding-bottom: 0.25em;
	font-size: clamp(1.5rem, 3.5vw, 3rem);
}

.ps-hero__logo {
	width: auto;
	max-width: 260px;
	max-height: 120px;
	padding-bottom: 0.3em;
}

.ps-hero__tagline {
	margin: 0 0 20px;
}

.ps-hero__tagline span {
	display: inline-block;
	padding: 8px 18px;
	background: var(--skin-accent);
	color: var(--skin-accent-text);
	border-radius: var(--skin-radius);
	font-family: var(--skin-font-accent);
	font-size: clamp(1.1rem, 2.2vw, 1.75rem);
	font-weight: var(--skin-display-weight);
	text-transform: uppercase;
	transform: rotate(var(--skin-tilt));
}

.ps-hero__text {
	max-width: 540px;
	margin: 0 0 20px;
	font-size: 1.1rem;
	line-height: 1.55;
}

.ps-hero--centered .ps-hero__text {
	margin-left: auto;
	margin-right: auto;
}

.ps-hero__highlight {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 0;
	font-family: var(--skin-font-display);
	font-size: clamp(1.2rem, 2.4vw, 1.9rem);
	font-weight: var(--skin-display-weight);
	text-transform: uppercase;
}

.ps-hero__highlight-label {
	color: var(--skin-pop);
	font-family: var(--skin-font-label);
	font-size: 0.5em;
	letter-spacing: 0.15em;
}

.ps-hero__art {
	position: relative;
}

.ps-hero--reverse .ps-hero__art {
	order: -1;
}

.ps-hero__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--skin-radius);
}

.ps-hero--split .ps-hero__art:has(.ps-hero__callouts) {
	padding-right: 24%;
}

.ps-hero--centered .ps-hero__art {
	max-width: 640px;
	margin: 0 auto;
}

/* The stage frames the product; skins can give it a shape (e.g. a starburst). */
.ps-hero__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ps-hero__product {
	position: relative;
	width: 100%;
	height: auto;
}

.ps-hero__badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: clamp(110px, 13vw, 170px);
	aspect-ratio: 1;
	margin: 0;
	background: var(--skin-accent);
	color: var(--skin-accent-text);
	clip-path: var(--skin-badge-shape);
	font-family: var(--skin-font-accent);
	font-weight: var(--skin-display-weight);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(calc(var(--skin-tilt) * 5));
}

.ps-hero__badge span {
	font-size: clamp(0.8rem, 1.2vw, 1.1rem);
}

.ps-hero__badge strong {
	font-size: clamp(1.4rem, 2.4vw, 2.2rem);
}

.ps-hero__price {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 10px 20px;
	background: var(--skin-light);
	color: var(--skin-light-text);
	border: var(--skin-border);
	border-radius: var(--skin-radius);
	box-shadow: var(--skin-shadow);
	text-align: center;
	transform: rotate(calc(var(--skin-tilt) * 2));
}

.ps-hero__price-label,
.ps-hero__price-note {
	font-family: var(--skin-font-label);
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.ps-hero__price-note {
	color: var(--skin-accent);
}

.ps-hero__price-amount {
	font-family: var(--skin-font-display);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: var(--skin-display-weight);
	line-height: 1.1;
}

/* A sale price would also show the struck-through original. */
.ps-hero__price-amount del {
	font-size: 0.5em;
	opacity: 0.6;
}

.ps-hero__price-amount ins {
	text-decoration: none;
}

.ps-hero__callouts {
	position: absolute;
	top: 30%;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 22%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-hero__callout {
	position: relative;
	overflow: hidden;
	background: var(--skin-light);
	color: var(--skin-light-text);
	border: var(--skin-border);
	border-radius: var(--skin-radius);
	box-shadow: var(--skin-shadow);
}

.ps-hero__callout a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.ps-hero__callout img {
	display: block;
	width: 100%;
	height: auto;
}

.ps-hero__callout-letter,
.ps-hero__callout-label {
	position: absolute;
	padding: 2px 8px;
	background: var(--skin-dark);
	color: var(--skin-dark-text);
	font-family: var(--skin-font-label);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}

.ps-hero__callout-letter {
	top: 0;
	left: 0;
}

.ps-hero__callout-label {
	right: 0;
	bottom: 0;
}

/* ---------- Image ---------- */

.ps-image {
	margin: 0 auto;
}

/* Full width cancels the section's side padding so the image meets both edges of the screen. */
.ps-image--full {
	margin: 0 calc(-1 * var(--ps-gutter));
}

.ps-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Countdown ---------- */

.ps-countdown {
	text-align: center;
}

.ps-countdown__units {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-countdown__unit {
	min-width: 110px;
	padding: 16px 12px;
	background: var(--skin-light);
	color: var(--skin-light-text);
	border: var(--skin-border);
	border-radius: var(--skin-radius);
	box-shadow: var(--skin-shadow);
}

.ps-countdown__value {
	display: block;
	font-family: var(--skin-font-display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: var(--skin-display-weight);
	line-height: 1;
}

.ps-countdown__label {
	font-family: var(--skin-font-label);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.ps-countdown__ended {
	margin: 0;
	font-family: var(--skin-font-accent);
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: var(--skin-display-weight);
	text-transform: uppercase;
}

/* ---------- Video ---------- */

.ps-video {
	aspect-ratio: 16 / 9;
}

.ps-video iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Image + Text ---------- */

.ps-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(32px, 6vw, 72px);
}

.ps-split--image-right .ps-split__media {
	order: 2;
}

.ps-split__media .ps-panel {
	transform: rotate(calc(var(--skin-tilt) * 0.75));
}

.ps-split--image-right .ps-split__media .ps-panel {
	transform: rotate(calc(var(--skin-tilt) * -0.75));
}

/* ---------- Specs ---------- */

.ps-specs--has-image {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: clamp(32px, 6vw, 72px);
}

.ps-specs--image-right .ps-specs__media {
	order: 2;
}

.ps-specs__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--skin-radius);
}

.ps-specs__list {
	margin: 0;
}

.ps-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 24px;
	padding: 14px 0;
	border-top: var(--skin-border);
}

.ps-specs__row:last-child {
	border-bottom: var(--skin-border);
}

.ps-specs__label {
	font-family: var(--skin-font-label);
	font-weight: 700;
	text-transform: uppercase;
}

.ps-specs__value {
	margin: 0;
}

.ps-specs--columns .ps-specs__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
}

.ps-specs--columns .ps-specs__row {
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	border-bottom: 0;
}

.ps-specs--columns .ps-specs__value {
	font-family: var(--skin-font-display);
	font-size: 1.5rem;
	font-weight: var(--skin-display-weight);
}

/* ---------- Feature Panels (letters A, B, C… come from a CSS counter; skins choose whether to show them) ---------- */

.ps-features {
	display: grid;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ps-panel;
}

.ps-features--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-features--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-features--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ps-features__item {
	counter-increment: ps-panel;
}

.ps-feature {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

a.ps-feature {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

a.ps-feature:hover,
a.ps-feature:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--skin-shadow-hover);
}

.ps-feature__image {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ps-feature__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 22px 22px;
}

.ps-feature__title {
	font-family: var(--skin-font-display);
	font-size: 1.35rem;
	font-weight: var(--skin-display-weight);
	line-height: 1.15;
	text-transform: uppercase;
}

.ps-feature__text {
	line-height: 1.55;
}

.ps-feature__more {
	margin-top: auto;
	padding-top: 8px;
	color: var(--skin-accent);
	font-family: var(--skin-font-label);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Gallery (ported from zev_headless): grid, masonry, strips, chips, lightbox ---------- */

.ps-gallery {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-gallery__tile img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.ps-gallery__tile[hidden] {
	display: none;
}

/* The theme gives every <button> a dark hover fill and drop shadow; a photo tile keeps neither. */
.ps-page .ps-gallery__open,
.ps-page .ps-gallery__open:hover {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: zoom-in;
}

.ps-gallery__open:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ps-gallery--grid {
	display: grid;
	grid-template-columns: repeat(var(--ps-gallery-cols, 3), minmax(0, 1fr));
	gap: 16px;
}

.ps-gallery--grid .ps-gallery__open {
	aspect-ratio: 4 / 3;
}

.ps-gallery--grid.ps-gallery--square .ps-gallery__open {
	aspect-ratio: 1;
}

/* Masonry keeps each photo's own shape, flowing down CSS columns. */
.ps-gallery--masonry {
	columns: var(--ps-gallery-cols, 3);
	column-gap: 16px;
}

.ps-gallery--masonry .ps-gallery__tile {
	margin-bottom: 16px;
	break-inside: avoid;
}

.ps-gallery--masonry img {
	height: auto;
}

.ps-gallery--cols-2 { --ps-gallery-cols: 2; }
.ps-gallery--cols-3 { --ps-gallery-cols: 3; }
.ps-gallery--cols-4 { --ps-gallery-cols: 4; }

.ps-gallery__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.ps-gallery__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Filter chip: a pill with a line border, filled with the text color when pressed. */
.ps-page .ps-chip {
	padding: 10px 16px;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.ps-page .ps-chip:hover {
	border-color: currentColor;
}

.ps-page .ps-chip[aria-pressed="true"] {
	border-color: var(--ps-text);
	background: var(--ps-text);
	color: var(--ps-bg);
}

.ps-gallery__note {
	margin: 0;
}

.ps-gallery__more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.ps-gallery__more[hidden] {
	display: none;
}

/* Full-bleed strip: the section drops its padding so square photos run edge to edge; two to a row on phones. */
.ps-section:has(> .ps-gallery--strip) {
	padding: 0;
}

.ps-gallery--strip {
	display: grid;
	grid-template-columns: repeat(var(--ps-strip-columns), minmax(0, 1fr));
}

.ps-gallery--strip .ps-gallery__tile,
.ps-gallery--instagram .ps-gallery__tile {
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--skin-highlight);
}

.ps-gallery__instagram {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.ps-gallery__handle {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ps-gallery__icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	color: var(--skin-pop);
}

.ps-page .ps-gallery__handle-name {
	margin: 0 0 4px;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.ps-gallery__handle-label {
	margin: 0;
}

.ps-gallery--instagram {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
}

.ps-gallery--instagram a {
	display: block;
	height: 100%;
}

/* Lightbox: a native <dialog>, so focus trapping, Escape and the backdrop come from the browser. */
.ps-lightbox {
	width: 100vw;
	max-width: none;
	height: 100vh;
	max-height: none;
	margin: 0;
	padding: 24px;
	border: 0;
	background: transparent;
	color: #fff;
}

.ps-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.9);
}

.ps-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ps-lightbox__image {
	max-width: min(100%, 1152px);
	max-height: 100%;
	object-fit: contain;
}

.ps-lightbox button {
	position: absolute;
	padding: 8px 14px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	cursor: pointer;
}

.ps-lightbox button:hover,
.ps-lightbox button:focus-visible {
	opacity: 0.7;
}

.ps-lightbox__close { top: 12px; right: 12px; }
.ps-lightbox__prev { top: 50%; left: 12px; transform: translateY(-50%); }
.ps-lightbox__next { top: 50%; right: 12px; transform: translateY(-50%); }
.ps-lightbox.is-single :is(.ps-lightbox__prev, .ps-lightbox__next) { display: none; }

@media (max-width: 1023px) {
	.ps-gallery--cols-3,
	.ps-gallery--cols-4 { --ps-gallery-cols: 2; }
}

@media (max-width: 767px) {
	.ps-gallery--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ps-gallery--instagram { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
	.ps-gallery--grid { --ps-gallery-cols: 1; }
	.ps-gallery--masonry { --ps-gallery-cols: 2; }
}

/* ---------- Product Grid: WooCommerce/Kadence cards restyled as panels ---------- */

.ps-page .ps-products ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ps-panel;
}

.ps-page .ps-products ul.products::before,
.ps-page .ps-products ul.products::after {
	display: none;
}

.ps-page .ps-products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--skin-light);
	color: var(--skin-light-text);
	border: var(--skin-border);
	border-radius: var(--skin-radius);
	box-shadow: var(--skin-shadow);
	text-align: center;
	counter-increment: ps-panel;
}

/* With "Feature the first product" on, the first card spans two columns and two rows. */
.ps-page .ps-products--featured li.product:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.ps-page .ps-products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.ps-page .ps-products .product-details {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px;
	background: transparent;
}

.ps-page .ps-products .woocommerce-loop-product__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--skin-font-display);
	font-size: 1.1rem;
	font-weight: var(--skin-display-weight);
	line-height: 1.2;
	text-transform: uppercase;
}

.ps-page .ps-products--featured li.product:first-child .woocommerce-loop-product__title {
	font-size: clamp(1.4rem, 2.2vw, 2rem);
}

.ps-page .ps-products .woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}

.ps-page .ps-products .price {
	display: inline-block;
	align-self: center;
	margin: 0 0 16px;
	font-family: var(--skin-font-display);
	font-size: 1.15rem;
	font-weight: var(--skin-display-weight);
}

.ps-page .ps-products .ps-product__excerpt {
	margin: 0 0 16px;
	font-size: 0.9rem;
	line-height: 1.5;
}

.ps-page .ps-products .ps-product__excerpt p {
	margin: 0;
}

.ps-page .ps-products .product-action-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin-top: auto;
}

/* Woo's "View cart" link appears after an AJAX add; it and View Product share the quieter text-link look. */
.ps-page .ps-products :is(.ps-product__view, .added_to_cart) {
	color: inherit;
	font-family: var(--skin-font-display);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: uppercase;
}

.ps-page .ps-products .button {
	display: inline-block;
	width: auto;
	padding: 10px 24px;
	background: var(--skin-accent);
	color: var(--skin-accent-text);
	border: 0;
	border-radius: var(--skin-radius);
	font-family: var(--skin-font-display);
	font-size: 0.95rem;
	font-weight: var(--skin-display-weight);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Campaign pages slide the header cart open on add (campaigns.php), so Woo's "View cart" link is redundant there. */
.page-template-page-campaign .ps-page .added_to_cart {
	display: none;
}

/* Kadence's spinner/check icons are hidden via a ".woocommerce" ancestor this page doesn't output, so mirror it. */
.ps-page .ps-products .button .kadence-spinner-svg,
.ps-page .ps-products .button .kadence-check-svg {
	display: none;
}

/* Woo adds .loading while the AJAX add runs: the label hides and three pulsing dots take its place, so nothing shifts. */
.ps-page :is(.ps-products .button, .ps-cart__button).loading {
	position: relative;
	-webkit-text-fill-color: transparent;
	opacity: 1;
	pointer-events: none;
}

/* One pseudo-element is the middle dot; its box-shadows are the side dots, in the button's own (unhidden) text color. */
.ps-page :is(.ps-products .button, .ps-cart__button).loading::after {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 3px);
	left: calc(50% - 3px);
	width: 6px;
	height: 6px;
	margin: 0;
	border-radius: 50%;
	--ps-dot-on: currentColor;
	--ps-dot-off: color-mix(in srgb, currentColor 30%, transparent);
	animation: ps-dots 0.9s steps(1) infinite;
}

@keyframes ps-dots {
	0% { background: var(--ps-dot-off); box-shadow: -11px 0 var(--ps-dot-on), 11px 0 var(--ps-dot-off); }
	33% { background: var(--ps-dot-on); box-shadow: -11px 0 var(--ps-dot-off), 11px 0 var(--ps-dot-off); }
	66% { background: var(--ps-dot-off); box-shadow: -11px 0 var(--ps-dot-off), 11px 0 var(--ps-dot-on); }
}

/* ---------- FAQ ---------- */

.ps-faq {
	display: grid;
	gap: 12px;
}

.ps-faq__question {
	position: relative;
	padding: 18px 56px 18px 22px;
	cursor: pointer;
	font-family: var(--skin-font-display);
	font-size: 1.1rem;
	font-weight: var(--skin-display-weight);
	text-transform: uppercase;
	list-style: none;
}

.ps-faq__question::-webkit-details-marker {
	display: none;
}

.ps-faq__question::after {
	content: '+';
	position: absolute;
	top: 50%;
	right: 20px;
	color: var(--skin-accent);
	font-size: 1.8rem;
	line-height: 1;
	transform: translateY(-50%);
}

.ps-faq__item[open] .ps-faq__question::after {
	content: '–';
}

.ps-faq__answer {
	padding: 0 22px 22px;
}

/* ---------- CTA Band ---------- */

.ps-cta {
	text-align: center;
}

/* ---------- Sign Up: email field and button on one line, stacked on phones ---------- */

.ps-signup {
	text-align: center;
}

.ps-signup__form {
	display: flex;
	align-items: stretch;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
}

.ps-signup__email {
	flex: 1;
	min-width: 0;
	padding: 14px 16px;
	border: var(--skin-border);
	border-radius: var(--skin-radius);
	background: var(--skin-light);
	color: var(--skin-light-text);
	font: inherit;
}

.ps-page .ps-signup__button {
	margin: 0;
	transform: none;
}

.ps-signup__form.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.ps-signup .screen-reader-text,
.ps-signup__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.ps-signup__check {
	display: flex;
	justify-content: center;
}

.ps-signup__status {
	margin: 16px 0 0;
}

.ps-signup__status:empty {
	display: none;
}

.ps-signup__note {
	margin: 16px 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

@media (max-width: 600px) {
	.ps-signup__form {
		flex-direction: column;
	}
}

.ps-page .ps-cta__heading {
	font-size: clamp(2.2rem, 5.5vw, 4rem);
}

.ps-cta__note {
	margin: 16px 0 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.ps-hero--split.ps-hero--has-art .ps-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.ps-hero__art {
		width: 100%;
		max-width: 720px;
		margin: 0 auto;
	}

	.ps-page .ps-products ul.products,
	.ps-features--cols-3,
	.ps-features--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.ps-split,
	.ps-specs--has-image,
	.ps-features--cols-2,
	.ps-features--cols-3,
	.ps-features--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.ps-split--image-right .ps-split__media,
	.ps-specs--image-right .ps-specs__media {
		order: 0;
	}

	.ps-hero--split .ps-hero__art:has(.ps-hero__callouts) {
		padding-right: 0;
	}

	.ps-hero__callouts {
		position: static;
		flex-direction: row;
		width: auto;
		margin-top: 24px;
	}

	.ps-hero__callout {
		flex: 1;
		min-width: 0;
	}

	.ps-hero__badge {
		width: 104px;
	}
}

@media (max-width: 500px) {
	.ps-page .ps-products ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	.ps-page .ps-products--featured li.product:first-child {
		grid-column: auto;
		grid-row: auto;
	}

	.ps-countdown__unit {
		min-width: 72px;
	}
}