/* Native <button> elements pick up a stray accent color/background from
   Elementor's global kit styles; reset the base (non-hover) state so our
   own component rules are the only source of truth for color/typography.
   Hover/focus/active are deliberately NOT reset here — components that want
   a custom hover background (e.g. .pe-carousel__nav) set it explicitly with
   higher specificity than Elementor's kit default; components that don't
   want one get a targeted `:hover,:focus,:active { background: none }'
   rule of their own instead of a blanket override, so we never fight a
   legitimate hover style elsewhere. */
[class^="pe-"] button,
[class*=" pe-"] button {
	color: inherit;
	font-family: inherit;
	background-color: transparent;
}

/* =========================================================
   Hero Banner
   ========================================================= */
.pe-hero {
	position: relative;
	overflow: hidden;
	background: var(--pe-blue);
	color: var(--pe-white);
	padding-block: var(--pe-space-5);
}

.pe-hero__topo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.22;
	background-repeat: repeat;
	background-position: 0 0;
	background-size: 900px 900px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='white' stroke-width='0.8'%3E%3Cpath d='M-50,120 C100,60 200,180 350,110 C500,40 600,160 750,90 C850,45 900,80 950,60'/%3E%3Cpath d='M-50,230 C120,150 230,290 380,210 C530,130 640,270 790,190 C870,150 900,180 950,160'/%3E%3Cpath d='M-50,350 C140,250 260,400 400,320 C560,230 660,380 800,300 C870,260 900,290 950,270'/%3E%3Cpath d='M-50,470 C160,360 280,520 430,440 C580,340 690,500 830,420 C880,390 900,410 950,400'/%3E%3Cpath d='M-50,590 C170,480 300,630 450,550 C600,460 710,610 850,540 C890,510 900,530 950,520'/%3E%3Cpath d='M-50,710 C180,610 310,740 460,670 C610,590 720,720 860,650 C890,630 900,650 950,640'/%3E%3Cpath d='M-50,830 C190,730 320,850 470,790 C620,710 730,830 870,770 C900,750 900,760 950,760'/%3E%3C/g%3E%3C/svg%3E");
}

.pe-hero__content {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 520px) 1fr;
	align-items: center;
	gap: var(--pe-space-4);
	min-height: 560px;
}

.pe-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--pe-font-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 var(--pe-space-2);
}

.pe-hero__breadcrumb-rule {
	display: inline-block;
	width: 22px;
	height: 1px;
	background: rgba(255, 255, 255, 0.5);
}

.pe-hero__heading {
	font-size: clamp(3.25rem, 7vw, 7rem);
	line-height: 0.92;
	margin: 0 0 var(--pe-space-2);
}

.pe-hero__heading-main,
.pe-hero__heading-outline {
	display: block;
}

.pe-hero__heading-outline {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--pe-white);
	text-stroke: 1.5px var(--pe-white);
}

.pe-hero__subheading {
	font-family: var(--pe-font-body);
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	margin: 0 0 var(--pe-space-3);
	max-width: 46ch;
}

.pe-hero__ctas {
	display: flex;
	gap: var(--pe-space-2);
	flex-wrap: wrap;
}

.pe-hero__ctas .pe-btn svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.pe-hero__ctas .pe-btn svg path {
	stroke: currentColor;
}

.pe-hero__product {
	position: relative;
	min-height: 520px;
}

.pe-hero__elevation {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
}

.pe-hero__elevation-value {
	font-family: var(--pe-font-display);
	font-weight: 400;
	font-size: 28px;
	margin: 0;
}

.pe-hero__elevation-label {
	color: rgba(255, 255, 255, 0.7);
	margin: 2px 0 0;
}

.pe-hero__shoe-wrap {
	position: relative;
	height: 100%;
	min-height: 420px;
}

.pe-hero__shoe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	opacity: 0;
	transition: opacity 0.3s var(--pe-ease);
}

.pe-hero__shoe.is-active {
	opacity: 1;
}

.pe-hero__specs {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	gap: var(--pe-space-3);
}

.pe-hero__spec-value {
	font-family: var(--pe-font-display);
	font-weight: 400;
	font-size: 20px;
	margin: 0;
}

.pe-hero__specs .pe-label {
	color: rgba(255, 255, 255, 0.65);
}

.pe-hero__swatches {
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.pe-hero__swatch-label {
	color: rgba(255, 255, 255, 0.7);
	margin-right: 4px;
}

.pe-hero__swatch,
.pe-hero__swatch:hover,
.pe-hero__swatch:focus,
.pe-hero__swatch:active {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	cursor: pointer;
	padding: 0;
	background-color: transparent;
}

.pe-hero__swatch.is-active {
	border-color: var(--pe-white);
	box-shadow: 0 0 0 2px var(--pe-blue), 0 0 0 4px var(--pe-white);
}

@media (max-width: 900px) {
	.pe-hero__content {
		grid-template-columns: 1fr;
	}
	.pe-hero__product {
		min-height: 320px;
	}
}

/* =========================================================
   Category Showcase Grid
   ========================================================= */
.pe-category-grid {
	display: grid;
	gap: var(--pe-space-2);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.pe-category-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.pe-category-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.pe-category-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.pe-category-grid__tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-radius: var(--pe-radius-md);
	background: var(--pe-charcoal);
	text-decoration: none;
}

.pe-category-grid--square .pe-category-grid__tile { aspect-ratio: 1 / 1; }
.pe-category-grid--portrait .pe-category-grid__tile { aspect-ratio: 4 / 5; }
.pe-category-grid--landscape .pe-category-grid__tile { aspect-ratio: 16 / 9; }

.pe-category-grid__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--pe-ease);
}

.pe-category-grid__tile:hover .pe-category-grid__image {
	transform: scale(1.04);
}

.pe-category-grid__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.65) 100%);
}

.pe-category-grid__label {
	position: relative;
	z-index: 1;
	color: var(--pe-white);
	font-family: var(--pe-font-display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	font-size: 20px;
	padding: var(--pe-space-2);
}

/* =========================================================
   Product Card (shared by carousel + WooCommerce loops)
   ========================================================= */
.pe-product-card {
	display: flex;
	flex-direction: column;
}

.pe-product-card__media-wrap {
	position: relative;
}

.pe-product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-md);
}

.pe-product-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.3s var(--pe-ease);
}

.pe-product-card__image--hover {
	opacity: 0;
}

.pe-product-card__media:hover .pe-product-card__image--base {
	opacity: 0;
}

.pe-product-card__media:hover .pe-product-card__image--hover {
	opacity: 1;
}

.pe-product-card__chips {
	position: absolute;
	top: var(--pe-space-1);
	left: var(--pe-space-1);
	z-index: 1;
	display: flex;
	gap: 6px;
}

.pe-product-card__badge,
.pe-product-card__elevation {
	font-family: var(--pe-font-label);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 9px;
	border-radius: var(--pe-radius-sm);
}

.pe-product-card__badge {
	background: var(--pe-black);
	color: var(--pe-white);
}

.pe-product-card__badge--sale {
	background: var(--pe-sale-yellow);
	color: var(--pe-black);
}

.pe-product-card__badge--new {
	background: var(--pe-accent);
	color: var(--pe-white);
}

.pe-product-card__elevation {
	background: rgba(255, 255, 255, 0.9);
	color: var(--pe-black);
}

.pe-product-card__wishlist,
.pe-product-card__wishlist:hover,
.pe-product-card__wishlist:focus,
.pe-product-card__wishlist:active {
	position: absolute;
	top: var(--pe-space-1);
	right: var(--pe-space-1);
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	background: var(--pe-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pe-black);
	cursor: pointer;
}

.pe-product-card__wishlist svg {
	width: 16px;
	height: 16px;
	overflow: visible;
}

.pe-product-card__wishlist svg path {
	stroke: currentColor;
	fill: none;
}

.pe-product-card__wishlist.is-active {
	color: var(--pe-accent);
}
.pe-product-card__wishlist.is-active svg path {
	fill: currentColor;
}

.pe-product-card__quick-add {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--pe-white);
	padding: var(--pe-space-1) var(--pe-space-1) 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s var(--pe-ease), transform 0.15s var(--pe-ease);
}

.pe-product-card__media-wrap:hover .pe-product-card__quick-add {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pe-product-card__quick-add-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.pe-product-card__quick-view {
	font-family: var(--pe-font-label);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: underline;
	color: var(--pe-black);
}

.pe-product-card__sizes {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
}

.pe-product-card__size {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 0;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	font-size: 12px;
	cursor: pointer;
}

.pe-product-card__size:hover {
	border-color: var(--pe-black);
}

.pe-product-card__body {
	padding-top: var(--pe-space-2);
}

.pe-product-card__title {
	font-family: var(--pe-font-body);
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 2px;
}

.pe-product-card__title a {
	color: var(--pe-text);
	text-decoration: none;
}

.pe-product-card__media-wrap:hover .pe-product-card__title a {
	text-decoration: underline;
}

.pe-product-card__subtitle {
	font-size: 13px;
	color: var(--pe-text-muted);
	margin: 0 0 6px;
}

.pe-product-card__meta-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.pe-product-card__price {
	font-size: 14px;
	font-weight: 600;
}

.pe-product-card__price del {
	opacity: 0.5;
	font-weight: 400;
	margin-right: 6px;
}

.pe-product-card__price ins {
	color: var(--pe-accent);
	text-decoration: none;
}

.pe-product-card__color-count {
	font-size: 12px;
	color: var(--pe-text-muted);
	white-space: nowrap;
}

.pe-product-card__swatches {
	display: flex;
	gap: 6px;
	margin-top: 8px;
}

.pe-product-card__swatch {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--pe-border);
}

.pe-product-card__add-to-cart a.button,
.pe-product-card__add-to-cart a.add_to_cart_button {
	display: inline-block;
	font-family: var(--pe-font-display);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 8px 16px;
	border-radius: var(--pe-radius-sm);
	background: var(--pe-black);
	color: var(--pe-white);
	text-decoration: none;
	transition: background-color 0.2s var(--pe-ease);
}

.pe-product-card__add-to-cart a.button:hover,
.pe-product-card__add-to-cart a.add_to_cart_button:hover {
	background: var(--pe-accent);
}

/* Native WooCommerce grid wrapper (ul.products) gets our spacing too */
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pe-space-3) var(--pe-space-2);
	list-style: none;
	padding: 0;
}

@media (min-width: 768px) {
	ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}

li.pe-product-grid__item {
	margin: 0 !important;
	width: auto !important;
}

/* =========================================================
   Featured Product Carousel
   ========================================================= */
.pe-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pe-space-2);
	margin-bottom: var(--pe-space-3);
}

.pe-carousel__heading {
	font-size: 28px;
	margin: 0;
}

.pe-carousel__controls {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
}

.pe-carousel__view-all {
	font-family: var(--pe-font-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--pe-text);
	text-decoration: underline;
}

.pe-carousel__nav {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--pe-border);
	background: var(--pe-white);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.2s var(--pe-ease), color 0.2s var(--pe-ease);
}

.pe-carousel__nav:hover {
	background: var(--pe-black);
	color: var(--pe-white);
	border-color: var(--pe-black);
}

.pe-carousel__track {
	display: flex;
	gap: var(--pe-space-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.pe-carousel__track::-webkit-scrollbar {
	display: none;
}

.pe-carousel__item {
	flex: 0 0 auto;
	width: 240px;
	scroll-snap-align: start;
}

.pe-carousel__empty {
	color: var(--pe-text-muted);
}

/* =========================================================
   Trust Bar
   ========================================================= */
.pe-trust-bar {
	background: var(--pe-blue);
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.pe-trust-bar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-4);
	justify-content: space-between;
	padding-block: var(--pe-space-3);
}

.pe-trust-bar__item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--pe-white);
	text-decoration: none;
	font-size: 13px;
}

.pe-trust-bar__icon {
	display: inline-flex;
	flex: none;
	color: var(--pe-white);
	font-size: 20px;
}

.pe-trust-bar__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.pe-trust-bar__text {
	display: flex;
	flex-direction: column;
}

.pe-trust-bar__label {
	font-weight: 700;
}

.pe-trust-bar__desc {
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
}

/* =========================================================
   Newsletter Signup ("Join Peak Club")
   ========================================================= */
.pe-newsletter {
	background: var(--pe-blue);
	color: var(--pe-white);
}

.pe-newsletter__inner {
	padding: var(--pe-space-4) var(--pe-space-3);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: var(--pe-space-5);
	align-items: center;
	max-width: var(--pe-container);
	margin-inline: auto;
}

.pe-newsletter__eyebrow {
	color: rgba(255, 255, 255, 0.7);
}

.pe-newsletter__heading {
	font-size: clamp(2.25rem, 3.5vw, 3.75rem);
	line-height: 0.92;
	max-width: 11ch;
	margin: 4px 0 var(--pe-space-4);
}

.pe-newsletter__benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pe-space-3);
}

.pe-newsletter__benefit {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding-left: var(--pe-space-3);
}

.pe-newsletter__benefit:first-child {
	border-left: none;
	padding-left: 0;
}

.pe-newsletter__benefit-title {
	font-family: var(--pe-font-body);
	text-transform: none;
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 4px;
}

.pe-newsletter__benefit-desc {
	font-family: var(--pe-font-body);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

.pe-newsletter__card {
	background: var(--pe-white);
	color: var(--pe-black);
	border-radius: var(--pe-radius-md);
	padding: var(--pe-space-3);
}

.pe-newsletter__card-heading {
	font-family: var(--pe-font-body);
	text-transform: none;
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 6px;
}

.pe-newsletter__subtext {
	color: var(--pe-text-muted);
	font-size: 14px;
	margin: 0 0 var(--pe-space-2);
}

.pe-newsletter__form {
	display: flex;
	gap: var(--pe-space-1);
}

.pe-newsletter__input {
	flex: 1;
	padding: 14px 16px;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-pill);
	font-size: 14px;
}

/* Specificity bump to beat the global `[class^="pe-"] button { background-
   color: transparent }` reset (0,1,1) — plain `.pe-btn--primary` (0,1,0)
   alone loses to it, same footgun already worked around for the hero CTAs
   and split-panel buttons via their own scoped selectors. */
.pe-newsletter .pe-newsletter__submit,
.pe-newsletter .pe-newsletter__submit:hover,
.pe-newsletter .pe-newsletter__submit:focus,
.pe-newsletter .pe-newsletter__submit:active {
	background-color: var(--pe-blue);
	color: var(--pe-white);
	white-space: nowrap;
}

.pe-newsletter .pe-newsletter__submit:hover {
	background-color: var(--pe-blue-dark);
}

.pe-newsletter__fine-print {
	font-size: 12px;
	color: var(--pe-text-muted);
	margin: var(--pe-space-1) 0 0;
}

.pe-newsletter__message {
	margin-top: var(--pe-space-1);
	font-size: 13px;
	color: var(--pe-success);
	min-height: 1em;
}

.pe-newsletter__message--error {
	color: var(--pe-accent);
}

@media (max-width: 900px) {
	.pe-newsletter__inner {
		grid-template-columns: 1fr;
	}
	.pe-newsletter__benefits {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Altitude Chart
   ========================================================= */
.pe-altitude {
	background: var(--pe-black);
	color: var(--pe-white);
	padding-block: var(--pe-space-6) var(--pe-space-5);
}

.pe-altitude__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: var(--pe-space-4);
	align-items: end;
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
	margin-bottom: var(--pe-space-5);
}

.pe-altitude__heading {
	font-size: clamp(2.25rem, 4.5vw, 3.5rem);
	margin: 4px 0 0;
}

.pe-altitude__intro {
	font-family: var(--pe-font-body);
	color: var(--pe-grey-400);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

.pe-altitude__chart-wrap {
	position: relative;
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
	padding-top: var(--pe-space-4);
	padding-bottom: var(--pe-space-5);
}

.pe-altitude__chart {
	display: block;
	width: 100%;
	height: 280px;
}

.pe-altitude__points {
	position: absolute;
	/* Must exactly match .pe-altitude__chart-wrap's padding on every side so
	   this overlay's 0-100% box lines up with the SVG's own coordinate
	   space — otherwise point markers drift away from where the curve
	   actually is (the wrap's top/bottom padding differ, so a plain
	   `inset: 0` here silently misaligns everything vertically). */
	inset: var(--pe-space-4) var(--pe-space-3) var(--pe-space-5) var(--pe-space-3);
}

.pe-altitude__point {
	position: absolute;
	transform: translate(-4px, -8px);
	font-family: var(--pe-font-label);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--pe-radius-sm);
	/* Generous bottom padding so the hoverable/clickable box reaches down
	   toward the dot on the line, not just the text label above it. */
	padding: 6px 10px 26px;
	margin: -6px -10px -26px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s var(--pe-ease), background-color 0.15s var(--pe-ease);
}

.pe-altitude__point:focus,
.pe-altitude__point:active {
	background: none;
	outline: none;
}

.pe-altitude__point.is-hover,
.pe-altitude__point.is-selected {
	border-color: var(--pe-blue);
	background: rgba(36, 55, 243, 0.18);
}

.pe-altitude__point.is-selected .pe-altitude__point-name {
	color: #8b93f5;
}

.pe-altitude__point-name {
	display: block;
	font-family: var(--pe-font-display);
	font-weight: 400;
	font-size: 20px;
	text-transform: none;
}

.pe-altitude__point-el {
	display: block;
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	margin-top: 2px;
}

.pe-altitude__point--summit {
	transform: translate(-50%, -8px);
	text-align: center;
	white-space: nowrap;
}

.pe-altitude__point--summit .pe-altitude__point-name {
	font-size: 13px;
	color: var(--pe-grey-200);
}

.pe-altitude__flag {
	display: block;
	width: 0;
	height: 0;
	margin: 4px auto 0;
	border-left: 8px solid var(--pe-blue);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.pe-altitude__axis {
	position: absolute;
	/* top must match .pe-altitude__chart-wrap's padding-top (same reasoning
	   as .pe-altitude__points) so these labels line up with the SVG's own
	   gridlines instead of starting 40px above where the chart actually is. */
	top: var(--pe-space-4);
	right: var(--pe-space-3);
	bottom: var(--pe-space-5);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align: right;
	font-family: var(--pe-font-label);
	font-size: 11px;
	color: var(--pe-grey-700);
}

.pe-altitude__bands {
	position: relative;
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--pe-space-4);
	padding-bottom: var(--pe-space-2);
	min-height: 130px;
}

.pe-altitude__band {
	position: absolute;
	top: var(--pe-space-4);
	display: block;
	max-width: 240px;
	padding: 10px 14px;
	margin: -10px 0 0 -14px;
	border: none;
	background: none;
	text-align: left;
	text-decoration: none;
	color: var(--pe-white);
	cursor: pointer;
	font-family: inherit;
	border-radius: var(--pe-radius-sm);
	transition: background-color 0.2s var(--pe-ease);
}

.pe-altitude__band:focus,
.pe-altitude__band:active {
	background: none;
	outline: none;
}

.pe-altitude__band:hover,
.pe-altitude__band.is-hover {
	background: rgba(255, 255, 255, 0.04);
}

.pe-altitude__band.is-selected {
	background: rgba(36, 55, 243, 0.14);
}

.pe-altitude__band .pe-label {
	color: var(--pe-grey-400);
	transition: color 0.2s var(--pe-ease);
}

.pe-altitude__band.is-hover .pe-label,
.pe-altitude__band.is-selected .pe-label {
	color: var(--pe-blue);
}

.pe-altitude__band-name {
	font-family: var(--pe-font-body);
	text-transform: none;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: normal;
	margin: 6px 0 6px;
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s var(--pe-ease);
}

.pe-altitude__band.is-hover .pe-altitude__band-name,
.pe-altitude__band.is-selected .pe-altitude__band-name {
	border-color: var(--pe-blue);
}

.pe-altitude__band-desc {
	font-family: var(--pe-font-body);
	color: var(--pe-grey-400);
	font-size: 14px;
	margin: 0;
}

@media (max-width: 900px) {
	.pe-altitude__header {
		grid-template-columns: 1fr;
	}
	.pe-altitude__bands {
		display: flex;
		flex-direction: column;
		gap: var(--pe-space-3);
		min-height: 0;
	}
	.pe-altitude__band {
		position: static;
		max-width: none;
		margin: 0;
		padding: 10px 0;
	}
}

/* =========================================================
   Shop the Range
   ========================================================= */
.pe-shop {
	max-width: var(--pe-container);
	margin-inline: auto;
	padding: var(--pe-space-6) var(--pe-space-3);
}

.pe-shop__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: var(--pe-space-4);
	align-items: end;
	margin-bottom: var(--pe-space-4);
}

.pe-shop__heading {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 4px 0 0;
}

.pe-shop__intro {
	font-family: var(--pe-font-body);
	color: var(--pe-text-muted);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

.pe-shop__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pe-space-2);
	margin-bottom: var(--pe-space-4);
}

.pe-shop__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pe-shop__pill,
.pe-shop__pill:hover,
.pe-shop__pill:focus,
.pe-shop__pill:active {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--pe-radius-pill);
	border: 1px solid var(--pe-border);
	background: var(--pe-white);
	color: var(--pe-text);
	font-family: var(--pe-font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.pe-shop__pill span {
	font-size: 11px;
	color: var(--pe-text-muted);
}

.pe-shop__pill.is-active {
	background: var(--pe-black);
	border-color: var(--pe-black);
	color: var(--pe-white);
}

.pe-shop__pill.is-active span {
	color: var(--pe-grey-400);
}

.pe-shop__sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pe-shop__sort select {
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	padding: 8px 10px;
	font-size: 13px;
	background: var(--pe-white);
}

.pe-shop__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pe-space-3) var(--pe-space-2);
}

@media (min-width: 768px) {
	.pe-shop__grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.pe-shop__header {
		grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	}
}

@media (max-width: 767px) {
	.pe-shop__header {
		grid-template-columns: 1fr;
	}
}

.pe-shop__empty {
	color: var(--pe-text-muted);
}

/* =========================================================
   Eight Layers
   ========================================================= */
.pe-layers {
	background: var(--pe-grey-100);
	padding-block: var(--pe-space-6);
}

.pe-layers__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
	gap: var(--pe-space-4);
	align-items: end;
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
}

.pe-layers__heading {
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin: 4px 0 0;
}

.pe-layers__intro {
	font-family: var(--pe-font-body);
	color: var(--pe-text-muted);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

.pe-layers__toolbar {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
	max-width: var(--pe-container);
	margin-inline: auto;
	padding: var(--pe-space-3) var(--pe-space-3) 0;
}

.pe-layers__collapse,
.pe-layers__collapse:hover,
.pe-layers__collapse:focus,
.pe-layers__collapse:active {
	padding: 8px 16px;
	border-radius: var(--pe-radius-pill);
	border: 1px solid var(--pe-black);
	background: var(--pe-white);
	color: var(--pe-text);
	font-family: var(--pe-font-body);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.pe-layers__body {
	max-width: var(--pe-container);
	margin-inline: auto;
	padding: var(--pe-space-4) var(--pe-space-3) 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: var(--pe-space-5);
	align-items: start;
}

.pe-layers__rig {
	position: relative;
	height: 560px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pe-layers__pile {
	position: relative;
	width: 320px;
	height: 460px;
}

/* The generated photos are already shot at the target diagonal angle
   (heel lower-left, toe upper-right) — no CSS rotation needed here, unlike
   the earlier hand-drawn SVG pile which supplied its own flat shape and
   relied on `rotate()` to get that angle. */
.pe-layers__shadow {
	position: absolute;
	left: 0;
	top: 280px;
	width: 320px;
	height: 180px;
	object-fit: contain;
	filter: blur(16px) brightness(0);
	opacity: 0.25;
	transform: translateY(20px) scale(1.05);
	z-index: 0;
	transition: top 0.5s var(--pe-ease);
}

.pe-layers__pile.is-collapsed .pe-layers__shadow {
	top: 90px;
}

.pe-layers__layer {
	position: absolute;
	left: 0;
	top: calc(var(--i) * 40px);
	width: 320px;
	height: 180px;
	object-fit: contain;
	overflow: visible;
	opacity: 0.92;
	transition: top 0.5s var(--pe-ease), transform 0.3s var(--pe-ease), filter 0.3s var(--pe-ease), opacity 0.3s var(--pe-ease);
	z-index: calc(var(--count) - var(--i));
}

.pe-layers__layer--flat {
	border-radius: 999px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.4) inset,
		0 14px 20px -6px rgba(20, 20, 24, 0.18);
}

.pe-layers__pile:hover .pe-layers__layer:not(:hover) {
	filter: brightness(0.96);
}

.pe-layers__layer.is-active {
	opacity: 1;
	filter: drop-shadow(0 0 18px rgba(36, 55, 243, 0.6));
	transform: translateY(-10px);
}

.pe-layers__layer--flat.is-active {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.45) inset,
		0 0 0 2px var(--pe-blue),
		0 18px 26px -6px rgba(36, 55, 243, 0.3);
}

.pe-layers__layer.is-active ~ .pe-layers__layer {
	transform: translateY(14px);
}

.pe-layers__pile.is-collapsed .pe-layers__layer {
	top: calc(var(--i) * 8px);
}

.pe-layers__list {
	border-top: 1px solid var(--pe-border);
}

.pe-layers__row {
	border-bottom: 1px solid var(--pe-border);
}

.pe-layers__row-head,
.pe-layers__row-head:hover,
.pe-layers__row-head:focus,
.pe-layers__row-head:active {
	display: flex;
	align-items: baseline;
	gap: var(--pe-space-2);
	width: 100%;
	padding: 18px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	color: var(--pe-text);
}

.pe-layers__row-num {
	font-family: var(--pe-font-label);
	font-size: 12px;
	color: var(--pe-grey-400);
	width: 20px;
	flex: none;
}

.pe-layers__row-name {
	flex: 1;
	font-family: var(--pe-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--pe-text);
}

.pe-layers__row.is-active .pe-layers__row-name,
.pe-layers__row.is-active .pe-layers__row-num {
	color: var(--pe-blue);
}

.pe-layers__row-value {
	font-family: var(--pe-font-label);
	font-size: 13px;
	color: var(--pe-grey-400);
}

.pe-layers__row-desc {
	display: none;
	margin: 0 0 18px;
	padding-left: 32px;
	color: var(--pe-text-muted);
	font-size: 14px;
	max-width: 46ch;
}

.pe-layers__row.is-active .pe-layers__row-desc {
	display: block;
}

@media (max-width: 900px) {
	.pe-layers__header,
	.pe-layers__body {
		grid-template-columns: 1fr;
	}
	.pe-layers__rig {
		height: 340px;
	}
	.pe-layers__pile {
		width: 230px;
		height: 300px;
	}
	.pe-layers__shadow {
		width: 230px;
		height: 130px;
		top: 180px;
	}
	.pe-layers__layer {
		width: 230px;
		height: 130px;
		top: calc(var(--i) * 26px);
	}
	.pe-layers__pile.is-collapsed .pe-layers__shadow {
		top: 60px;
	}
	.pe-layers__pile.is-collapsed .pe-layers__layer {
		top: calc(var(--i) * 6px);
	}
}

/* =========================================================
   Editorial Split
   ========================================================= */
.pe-split {
	background: var(--pe-white);
	padding: var(--pe-space-5) var(--pe-space-3);
}

.pe-split__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pe-space-4);
	max-width: var(--pe-container);
	margin-inline: auto;
}

.pe-split__panel {
	position: relative;
	min-height: 460px;
	padding: var(--pe-space-4);
	border-radius: var(--pe-radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.pe-split__panel--dark {
	background: var(--pe-black);
	color: var(--pe-white);
}

.pe-split__panel--light {
	background: var(--pe-grey-100);
	color: var(--pe-black);
}

.pe-split__head {
	position: relative;
	z-index: 1;
	flex: none;
}

.pe-split__eyebrow {
	position: relative;
	z-index: 1;
}

.pe-split__panel--dark .pe-split__eyebrow {
	color: var(--pe-grey-400);
}

.pe-split__heading {
	position: relative;
	z-index: 1;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 4px 0 0;
	max-width: 10ch;
}

.pe-split__image-wrap {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

.pe-split__image-wrap::after {
	content: "";
	position: absolute;
	bottom: 6%;
	left: 50%;
	width: 46%;
	height: 22px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.28), transparent 72%);
	z-index: 0;
}

.pe-split__image {
	position: relative;
	z-index: 1;
	width: 68%;
	max-width: 320px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.2));
}

.pe-split__footer {
	position: relative;
	z-index: 1;
	flex: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pe-space-3);
}

.pe-split__copy {
	font-family: var(--pe-font-body);
	font-size: 14px;
	max-width: 32ch;
	margin: 0;
}

.pe-split__panel--dark .pe-split__copy {
	color: var(--pe-grey-200);
}

/* .pe-split__panel--dark/--light set a blanket text `color` on the panel,
   which the <a class="pe-btn"> inherits; something in the cascade (panel
   color and/or Elementor's global kit `a{color:...}`) was still beating a
   plain two-class override here, so this is pinned with !important as the
   one deliberate, narrowly-scoped exception in this file. */
.pe-split .pe-btn--white {
	color: var(--pe-black) !important;
}

.pe-split .pe-btn--dark {
	color: var(--pe-white) !important;
}

.pe-split .pe-btn svg {
	width: 14px;
	height: 14px;
	flex: none;
}

.pe-split .pe-btn svg path {
	stroke: currentColor;
}

@media (max-width: 767px) {
	.pe-split__grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Single Product (PDP)
   ========================================================= */
.pe-pdp {
	/* Deliberately wider than --pe-container (1280px) — the two-column
	   gallery+buybox layout needs the extra room so the main product photo
	   doesn't render small. */
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--pe-space-4) var(--pe-space-3) var(--pe-space-6);
}

.pe-pdp__crumbs {
	font-family: var(--pe-font-label);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	margin-bottom: var(--pe-space-4);
}

.pe-pdp__crumbs a {
	color: var(--pe-grey-400);
	text-decoration: none;
}

.pe-pdp__crumbs a:hover {
	color: var(--pe-text);
}

.pe-pdp__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--pe-space-5);
}

/* Gallery — sticky so it stays in view while the buy-box column (which is
   usually taller: info boxes, accordion, reviews) scrolls past. Without
   this the gallery ends early and leaves a large dead gap on wide
   viewports, which is what "the product page has too much space" meant. */
.pe-pdp__gallery {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--pe-space-2);
	align-items: start;
	position: sticky;
	top: var(--pe-space-3);
	align-self: start;
}

/* With no gallery images there's no .pe-pdp__thumbs column, but the grid
   still reserves one — without explicit placement the lone .pe-pdp__main-image
   child falls into that narrow 80px first cell via grid auto-placement. */
.pe-pdp__gallery:has(.pe-pdp__thumbs) .pe-pdp__main-image {
	grid-column: 2;
}

.pe-pdp__gallery:not(:has(.pe-pdp__thumbs)) {
	grid-template-columns: 1fr;
}

.pe-pdp__thumbs {
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-2);
}

.pe-pdp__thumb {
	padding: 0;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	background: var(--pe-grey-100);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s var(--pe-ease);
}

.pe-pdp__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.pe-pdp__thumb:hover,
.pe-pdp__thumb:focus,
.pe-pdp__thumb:active {
	border-color: var(--pe-grey-400);
}

.pe-pdp__thumb.is-active {
	border-color: var(--pe-black);
}

.pe-pdp__main-image {
	position: relative;
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-md);
	overflow: hidden;
	/* Must match the generated photos' actual 4:3 ratio — any mismatch here
	   lets object-fit:contain letterbox the image, showing the grey
	   background as a visible gap along one edge. */
	aspect-ratio: 4 / 3;
}

.pe-pdp__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--pe-ease);
}

.pe-pdp__image.is-active {
	opacity: 1;
	pointer-events: auto;
}

.pe-pdp__gallery-count {
	position: absolute;
	top: var(--pe-space-2);
	right: var(--pe-space-2);
	z-index: 1;
	font-family: var(--pe-font-label);
	font-size: 11px;
	color: var(--pe-grey-700);
}

.pe-pdp__nav,
.pe-pdp__nav:hover,
.pe-pdp__nav:focus,
.pe-pdp__nav:active {
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--pe-border);
	background: var(--pe-white);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: var(--pe-text);
}

.pe-pdp__nav--prev {
	left: var(--pe-space-2);
}

.pe-pdp__nav--next {
	right: var(--pe-space-2);
}

/* Buy box */
.pe-pdp__chips {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--pe-space-2);
}

.pe-pdp__chip {
	font-family: var(--pe-font-label);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	padding: 3px 8px;
}

.pe-pdp__title {
	font-size: clamp(2rem, 3.5vw, 3rem);
	margin: 0;
}

.pe-pdp__subtitle {
	font-family: var(--pe-font-body);
	color: var(--pe-text-muted);
	margin: 4px 0 0;
}

.pe-pdp__price {
	font-family: var(--pe-font-display);
	font-size: 1.5rem;
	margin: var(--pe-space-2) 0 0;
}

.pe-pdp__field {
	margin-top: var(--pe-space-4);
}

.pe-pdp__swatches {
	display: flex;
	gap: 10px;
	margin-top: var(--pe-space-1);
}

.pe-pdp__swatch,
.pe-pdp__swatch:hover,
.pe-pdp__swatch:focus,
.pe-pdp__swatch:active {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid transparent;
	padding: 2px;
	background-clip: content-box;
	cursor: pointer;
}

.pe-pdp__swatch.is-active {
	border-color: var(--pe-black);
}

.pe-pdp__size-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pe-pdp__size-tools {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
}

.pe-pdp__size-guide,
.pe-pdp__size-guide:hover,
.pe-pdp__size-guide:focus,
.pe-pdp__size-guide:active {
	border: none;
	background: none;
	padding: 0;
	font-family: var(--pe-font-label);
	font-size: 11px;
	text-decoration: underline;
	color: var(--pe-text);
	cursor: pointer;
}

.pe-pdp__unit-toggle {
	display: flex;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	overflow: hidden;
}

.pe-pdp__unit-toggle button,
.pe-pdp__unit-toggle button:hover,
.pe-pdp__unit-toggle button:focus,
.pe-pdp__unit-toggle button:active {
	border: none;
	background: var(--pe-white);
	padding: 3px 8px;
	font-family: var(--pe-font-label);
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	cursor: pointer;
}

.pe-pdp__unit-toggle button.is-active {
	background: var(--pe-black);
	color: var(--pe-white);
}

/* Size guide modal */
.pe-pdp__size-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
}

.pe-pdp__size-modal.is-open {
	display: flex;
}

.pe-pdp__size-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(24, 24, 27, 0.6);
}

.pe-pdp__size-modal-panel {
	position: relative;
	z-index: 1;
	width: min(420px, calc(100vw - 48px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	background: var(--pe-white);
	border-radius: var(--pe-radius-lg);
	padding: var(--pe-space-4);
}

.pe-pdp__size-modal-panel h3 {
	margin: 0 0 var(--pe-space-2);
	font-size: 1.5rem;
}

.pe-pdp__size-modal-note {
	font-family: var(--pe-font-body);
	color: var(--pe-text-muted);
	font-size: 14px;
	margin: 0 0 var(--pe-space-3);
}

.pe-pdp__size-modal-close,
.pe-pdp__size-modal-close:hover,
.pe-pdp__size-modal-close:focus,
.pe-pdp__size-modal-close:active {
	position: absolute;
	top: var(--pe-space-3);
	right: var(--pe-space-3);
	width: 32px;
	height: 32px;
	border: 1px solid var(--pe-border);
	border-radius: 50%;
	background: var(--pe-white);
	font-size: 18px;
	line-height: 1;
	color: var(--pe-text);
	cursor: pointer;
}

.pe-pdp__size-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--pe-font-body);
	font-size: 14px;
}

.pe-pdp__size-table th,
.pe-pdp__size-table td {
	padding: 8px 4px;
	text-align: left;
	border-bottom: 1px solid var(--pe-border);
}

.pe-pdp__size-table th {
	font-family: var(--pe-font-label);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	font-weight: 400;
}

/* Reviews — light-touch override of WooCommerce's default comment markup */
.pe-pdp__reviews-inner {
	font-family: var(--pe-font-body);
	font-size: 14px;
}

.pe-pdp__reviews-inner #reviews {
	margin: 0;
}

.pe-pdp__reviews-inner .commentlist {
	list-style: none;
	margin: 0 0 var(--pe-space-3);
	padding: 0;
}

.pe-pdp__reviews-inner .commentlist li {
	padding: var(--pe-space-2) 0;
	border-bottom: 1px solid var(--pe-border);
}

.pe-pdp__reviews-inner .woocommerce-noreviews {
	color: var(--pe-text-muted);
	margin: 0 0 var(--pe-space-3);
}

.pe-pdp__reviews-inner .star-rating,
.pe-pdp__reviews-inner .star-rating span,
.pe-pdp__reviews-inner .star-rating span::before,
.pe-pdp__reviews-inner p.stars a {
	font-family: var(--pe-font-body);
	color: var(--pe-black) !important;
}

.pe-pdp__reviews-inner .comment-form-rating label,
.pe-pdp__reviews-inner label {
	display: block;
	font-family: var(--pe-font-label);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	margin-bottom: 4px;
}

.pe-pdp__reviews-inner input[type="text"],
.pe-pdp__reviews-inner input[type="email"],
.pe-pdp__reviews-inner textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	font-family: var(--pe-font-body);
	font-size: 14px;
	margin-bottom: var(--pe-space-2);
}

.pe-pdp__reviews-inner .form-submit input,
.pe-pdp__reviews-inner .form-submit input:hover,
.pe-pdp__reviews-inner .form-submit input:focus,
.pe-pdp__reviews-inner .form-submit input:active {
	padding: 10px 20px;
	border: none;
	border-radius: var(--pe-radius-pill);
	background: var(--pe-black);
	color: var(--pe-white);
	font-family: var(--pe-font-body);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.pe-pdp__reviews-inner #respond {
	margin-top: var(--pe-space-3);
}

.pe-pdp__reviews-inner #respond .comment-notes,
.pe-pdp__reviews-inner #respond .comment-form-rating {
	margin-bottom: var(--pe-space-2);
}

.pe-pdp__sizes {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin-top: var(--pe-space-1);
}

.pe-pdp__size,
.pe-pdp__size:hover,
.pe-pdp__size:focus,
.pe-pdp__size:active {
	padding: 10px 0;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	background: var(--pe-white);
	font-family: var(--pe-font-body);
	font-size: 13px;
	cursor: pointer;
}

.pe-pdp__size:hover {
	border-color: var(--pe-black);
}

.pe-pdp__size.is-active {
	border-color: var(--pe-black);
	background: var(--pe-black);
	color: var(--pe-white);
}

.pe-pdp__size.is-disabled {
	color: var(--pe-grey-400);
	border-color: var(--pe-border);
	background: repeating-linear-gradient(135deg, var(--pe-grey-100), var(--pe-grey-100) 4px, var(--pe-white) 4px, var(--pe-white) 8px);
	cursor: not-allowed;
}

.pe-pdp__fit-note {
	font-size: 13px;
	color: var(--pe-text-muted);
	margin: var(--pe-space-1) 0 0;
}

/* WooCommerce's default add-to-cart / validation notices (wc_print_notices) —
   unstyled by default, so without this they'd look like plain bullet text. */
.pe-pdp .woocommerce-notices-wrapper:empty {
	display: none;
}

.pe-pdp .woocommerce-message,
.pe-pdp .woocommerce-error,
.pe-pdp .woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pe-space-2);
	list-style: none;
	margin: 0 0 var(--pe-space-3);
	padding: 14px 18px;
	border-radius: var(--pe-radius-md);
	font-size: 14px;
}

.pe-pdp .woocommerce-message {
	background: #eaf6ef;
	color: var(--pe-success);
}

.pe-pdp .woocommerce-error,
.pe-pdp .woocommerce-info {
	background: var(--pe-grey-100);
	color: var(--pe-text);
}

.pe-pdp .woocommerce-error {
	flex-direction: column;
	align-items: flex-start;
}

.pe-pdp .woocommerce-error li::before,
.pe-pdp .woocommerce-message::before,
.pe-pdp .woocommerce-info::before {
	display: none;
}

.pe-pdp .woocommerce-message a.button.wc-forward,
.pe-pdp .woocommerce-message a.button.wc-forward:hover,
.pe-pdp .woocommerce-message a.button.wc-forward:focus,
.pe-pdp .woocommerce-message a.button.wc-forward:active {
	order: 2;
	padding: 8px 16px;
	border-radius: var(--pe-radius-pill);
	background: var(--pe-black);
	color: var(--pe-white);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.pe-pdp .woocommerce-message a.button.wc-forward:hover {
	background: var(--pe-charcoal);
}

.pe-pdp__cta-row {
	display: flex;
	align-items: stretch;
	gap: var(--pe-space-2);
	margin-top: var(--pe-space-4);
}

.pe-pdp__add-to-cart {
	flex: 1;
}

.pe-pdp__add-to-cart form.cart {
	display: block;
}

.pe-pdp__add-to-cart .quantity {
	display: none;
}

/* WooCommerce's own `.woocommerce a.button, .woocommerce button.button`
   rules (two classes + element) beat a plain two-class selector here, so
   this is pinned with !important — same pattern as the img height fix. */
.pe-pdp__add-to-cart .single_add_to_cart_button,
.pe-pdp__add-to-cart .single_add_to_cart_button:hover,
.pe-pdp__add-to-cart .single_add_to_cart_button:focus,
.pe-pdp__add-to-cart .single_add_to_cart_button:active {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 19px 24px !important;
	border: none !important;
	border-radius: var(--pe-radius-pill) !important;
	background: var(--pe-blue) !important;
	color: var(--pe-white) !important;
	font-family: var(--pe-font-body) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	letter-spacing: 0.01em !important;
	text-align: center !important;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.2s var(--pe-ease), box-shadow 0.2s var(--pe-ease), transform 0.15s var(--pe-ease);
}

.pe-pdp__add-to-cart .single_add_to_cart_button::before {
	content: '';
	display: block;
	width: 19px;
	height: 19px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z'/%3E%3Cpath d='M8.5 8V6a3.5 3.5 0 0 1 7 0v2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.pe-pdp__add-to-cart .single_add_to_cart_button:hover {
	background: var(--pe-blue-dark) !important;
	box-shadow: 0 10px 24px -8px rgba(36, 55, 243, 0.4);
}

.pe-pdp__add-to-cart .single_add_to_cart_button:active {
	transform: scale(0.98);
	box-shadow: none;
}

.pe-pdp__add-to-cart .single_add_to_cart_button.loading {
	opacity: 0.75;
	pointer-events: none;
}

/* Sticky add-to-bag bar — appears once the main CTA scrolls out of view,
   so buying is always one tap away (the same pattern Nike, Allbirds and
   most large footwear retailers use on their product pages). */
.pe-pdp__sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	background: var(--pe-white);
	border-top: 1px solid var(--pe-border);
	box-shadow: 0 -8px 24px rgba(24, 24, 27, 0.08);
	transform: translateY(100%);
	transition: transform 0.3s var(--pe-ease);
}

.pe-pdp__sticky-bar.is-visible {
	transform: translateY(0);
}

.pe-pdp__sticky-bar-inner {
	max-width: 1440px;
	margin-inline: auto;
	padding: var(--pe-space-2) var(--pe-space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pe-space-3);
}

.pe-pdp__sticky-bar-product {
	display: flex;
	align-items: center;
	gap: var(--pe-space-2);
	min-width: 0;
}

.pe-pdp__sticky-bar-thumb {
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-sm);
	flex: none;
}

.pe-pdp__sticky-bar-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pe-pdp__sticky-bar-info strong {
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pe-pdp__sticky-bar-info span {
	font-size: 13px;
	color: var(--pe-text-muted);
}

.pe-pdp__sticky-bar-cta,
.pe-pdp__sticky-bar-cta:hover,
.pe-pdp__sticky-bar-cta:focus,
.pe-pdp__sticky-bar-cta:active {
	flex: none;
	padding: 14px 28px;
	border: none;
	border-radius: var(--pe-radius-pill);
	background: var(--pe-blue);
	color: var(--pe-white);
	font-family: var(--pe-font-body);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s var(--pe-ease);
}

.pe-pdp__sticky-bar-cta:hover {
	background: var(--pe-blue-dark);
}

@media (max-width: 640px) {
	.pe-pdp__sticky-bar-info strong {
		max-width: 38vw;
	}
}

.pe-pdp__wishlist,
.pe-pdp__wishlist:hover,
.pe-pdp__wishlist:focus,
.pe-pdp__wishlist:active {
	flex: none;
	width: 56px;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-pill);
	background: var(--pe-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.2s var(--pe-ease), background-color 0.2s var(--pe-ease);
}

.pe-pdp__wishlist:hover {
	border-color: var(--pe-black);
	background: var(--pe-grey-100);
}

.pe-pdp__wishlist svg {
	width: 20px;
	height: 20px;
	color: var(--pe-text);
}

.pe-pdp__wishlist.is-active svg {
	fill: var(--pe-blue);
	color: var(--pe-blue);
}

.pe-pdp__info-boxes {
	display: grid;
	gap: var(--pe-space-2);
	margin-top: var(--pe-space-4);
	padding: var(--pe-space-3);
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-md);
}

.pe-pdp__info-box {
	display: flex;
	flex-direction: column;
	font-size: 13px;
}

.pe-pdp__info-box strong {
	font-family: var(--pe-font-body);
	font-size: 14px;
}

.pe-pdp__info-box span {
	color: var(--pe-text-muted);
}

/* Accordion */
.pe-pdp__accordion {
	margin-top: var(--pe-space-5);
	border-top: 1px solid var(--pe-border);
}

.pe-pdp__acc-item {
	border-bottom: 1px solid var(--pe-border);
}

.pe-pdp__acc-head,
.pe-pdp__acc-head:hover,
.pe-pdp__acc-head:focus,
.pe-pdp__acc-head:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--pe-space-3) 0;
	border: none;
	background: none;
	font-family: var(--pe-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--pe-text);
	cursor: pointer;
	text-align: left;
}

.pe-pdp__acc-body {
	display: none;
	padding-bottom: var(--pe-space-3);
	color: var(--pe-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.pe-pdp__acc-item.is-open .pe-pdp__acc-body {
	display: block;
}

.pe-pdp__acc-body p {
	margin: 0 0 10px;
}

.pe-pdp__specs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pe-pdp__specs li {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--pe-border);
}

.pe-pdp__specs li:last-child {
	border-bottom: none;
}

.pe-pdp__specs li span:first-child {
	color: var(--pe-text-muted);
}

/* Related products */
.pe-pdp__related {
	margin-top: var(--pe-space-5);
}

.pe-pdp__related-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--pe-space-4);
}

.pe-pdp__related-heading {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin: 4px 0 0;
}

.pe-pdp__related-link,
.pe-pdp__related-link:hover,
.pe-pdp__related-link:focus,
.pe-pdp__related-link:active {
	padding: 8px 16px;
	border-radius: var(--pe-radius-pill);
	border: 1px solid var(--pe-black);
	background: var(--pe-white);
	color: var(--pe-text);
	font-family: var(--pe-font-body);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.pe-pdp__related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pe-space-3);
}

@media (max-width: 900px) {
	.pe-pdp__layout {
		grid-template-columns: 1fr;
	}
	/* The gallery and buy-box stack into one column here, so a sticky
	   gallery would pin the image over the text as you scroll instead of
	   closing a side-by-side gap — only useful in the two-column layout. */
	.pe-pdp__gallery {
		position: static;
	}
	.pe-pdp__sizes {
		grid-template-columns: repeat(4, 1fr);
	}
	.pe-pdp__related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* PDP — terrain/altitude tuning banner */
.pe-pdp__terrain {
	position: relative;
	background: var(--pe-black);
	color: var(--pe-white);
	border-radius: var(--pe-radius-lg);
	padding: var(--pe-space-4) var(--pe-space-4) var(--pe-space-3);
	margin-top: var(--pe-space-5);
}

.pe-pdp__terrain-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pe-space-3);
	flex-wrap: wrap;
	margin-bottom: 44px;
}

.pe-pdp__terrain-heading {
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	margin: 4px 0 0;
}

.pe-pdp__terrain-copy {
	font-family: var(--pe-font-body);
	color: var(--pe-grey-400);
	font-size: 14px;
	margin: 0;
	max-width: 32ch;
}

.pe-pdp__terrain-marker {
	position: absolute;
	top: 68px;
	/* Clamp so low/high elevation values (near 0% or 100%) don't push the
	   label past the banner's edge. */
	left: clamp(30px, var(--pos), calc(100% - 30px));
	transform: translateX(-50%);
	text-align: center;
}

.pe-pdp__terrain-marker::after {
	content: "";
	display: block;
	width: 1px;
	height: 14px;
	margin: 4px auto 0;
	background: var(--pe-blue);
}

.pe-pdp__terrain-marker-value {
	font-family: var(--pe-font-label);
	font-size: 12px;
	white-space: nowrap;
}

.pe-pdp__terrain-bands {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--pe-radius-sm);
	overflow: hidden;
}

.pe-pdp__terrain-band {
	padding: var(--pe-space-2);
	font-family: var(--pe-font-label);
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
}

.pe-pdp__terrain-band:last-child {
	border-right: none;
}

.pe-pdp__terrain-band.is-active {
	background: var(--pe-blue);
	color: var(--pe-white);
}

.pe-pdp__terrain-range {
	position: relative;
	margin-top: var(--pe-space-2);
	border: 1px solid var(--pe-blue);
	border-top: none;
	border-radius: 0 0 var(--pe-radius-sm) var(--pe-radius-sm);
	min-width: 40px;
}

.pe-pdp__terrain-range span {
	display: block;
	text-align: center;
	font-family: var(--pe-font-label);
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--pe-grey-400);
	padding: 3px 0;
}

.pe-pdp__terrain-axis {
	position: relative;
	height: 16px;
	margin-top: var(--pe-space-2);
}

.pe-pdp__terrain-axis span {
	position: absolute;
	transform: translateX(-50%);
	font-family: var(--pe-font-label);
	font-size: 10px;
	color: var(--pe-grey-700);
	white-space: nowrap;
}

/* PDP — 8-layer tuning breakdown */
.pe-pdp__tuning {
	margin-top: var(--pe-space-5);
}

.pe-pdp__tuning-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pe-space-4);
	flex-wrap: wrap;
	margin-bottom: var(--pe-space-4);
}

.pe-pdp__tuning-heading {
	font-size: clamp(1.5rem, 2.5vw, 2.25rem);
	margin: 4px 0 0;
}

.pe-pdp__tuning-copy {
	font-family: var(--pe-font-body);
	color: var(--pe-text-muted);
	font-size: 14px;
	margin: 0;
	max-width: 36ch;
}

.pe-pdp__tuning-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pe-space-4) var(--pe-space-5);
}

.pe-pdp__tuning-row {
	display: flex;
	gap: var(--pe-space-2);
	padding-bottom: var(--pe-space-3);
	border-bottom: 1px solid var(--pe-border);
}

.pe-pdp__tuning-num {
	flex: none;
	font-family: var(--pe-font-label);
	font-size: 12px;
	color: var(--pe-grey-400);
	padding-top: 2px;
}

.pe-pdp__tuning-body {
	flex: 1;
	min-width: 0;
}

.pe-pdp__tuning-row-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pe-space-2);
}

.pe-pdp__tuning-row-head strong {
	font-family: var(--pe-font-body);
	font-weight: 700;
	font-size: 15px;
}

.pe-pdp__tuning-row-head span {
	font-size: 13px;
	color: var(--pe-text-muted);
	white-space: nowrap;
}

.pe-pdp__tuning-bar {
	height: 4px;
	border-radius: 999px;
	background: var(--pe-grey-100);
	margin-top: 10px;
	overflow: hidden;
}

.pe-pdp__tuning-bar span {
	display: block;
	height: 100%;
	background: var(--pe-black);
	border-radius: 999px;
}

@media (max-width: 700px) {
	.pe-pdp__tuning-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Cart page
   ========================================================= */
.pe-cart-page {
	padding-block: var(--pe-space-4) var(--pe-space-6);
}

.pe-cart-page__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 var(--pe-space-4);
}

/* Two-tone layout, contained within the site's normal 1280px `.pe-container`
   width instead of bleeding to the real viewport edge — that bled version
   looked disconnected from the rest of the site (header/footer are both
   container-width) and, on a wide monitor, left the summary panel sitting
   out past where the page's actual content ends. Containing it here also
   removes the whole class of viewport-width edge cases that bleed layout
   was prone to. */
.pe-cart__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
	gap: var(--pe-space-5);
	align-items: start;
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
}

.pe-cart__items {
	min-width: 0;
}

/* Reflow WooCommerce's cart <table> into modern stacked rows instead of
   fighting its markup — keeps every hook/class/AJAX behaviour intact. The
   whole form becomes one elevated white card (matching the order-summary
   card's shadow language) instead of relying on WooCommerce's bare default
   `.shop_table` border, which read as flat/generic. */
.pe-cart__items form.woocommerce-cart-form {
	background: var(--pe-white);
	border-radius: var(--pe-radius-lg);
	padding-inline: var(--pe-space-3);
	box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 16px 32px -20px rgba(24, 24, 27, 0.25);
}

.pe-cart__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse !important;
	border: none !important;
}

.pe-cart__table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.pe-cart__table tbody {
	display: block;
}

.pe-cart__table tr.woocommerce-cart-form__cart-item {
	display: grid;
	grid-template-columns: 28px 104px minmax(0, 1fr) auto;
	grid-template-areas: "remove thumb name name" "remove thumb qty subtotal";
	align-items: center;
	column-gap: var(--pe-space-2);
	row-gap: 10px;
	padding-block: var(--pe-space-3);
	border-bottom: 1px solid var(--pe-grey-100);
	transition: background-color 0.2s var(--pe-ease);
}

.pe-cart__table tr.woocommerce-cart-form__cart-item:hover {
	background: var(--pe-grey-100);
}

.pe-cart__table tr.woocommerce-cart-form__cart-item:first-child {
	padding-top: var(--pe-space-4);
}

.pe-cart__table tr.woocommerce-cart-form__cart-item td {
	display: block;
	padding: 0;
	border: none;
	background: transparent !important;
}

.pe-cart__table .product-remove {
	grid-area: remove;
}

.pe-cart__table .product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s var(--pe-ease);
}

.pe-cart__table .product-remove a.remove::before {
	content: '';
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: filter 0.2s var(--pe-ease);
}

.pe-cart__table .product-remove a.remove:hover {
	background: var(--pe-grey-100);
}

.pe-cart__table .product-remove a.remove:hover::before {
	filter: brightness(0);
}

.pe-cart__table .product-thumbnail {
	grid-area: thumb;
}

.pe-cart__table .product-thumbnail img {
	width: 104px !important;
	height: 104px !important;
	object-fit: contain !important;
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-md);
}

.pe-cart__table .product-name {
	grid-area: name;
	font-family: var(--pe-font-display);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: var(--pe-tracking-display);
	line-height: 1.1;
}

.pe-cart__table .product-name a {
	color: var(--pe-text);
	text-decoration: none;
}

.pe-cart__table .product-name a:hover {
	color: var(--pe-blue);
}

.pe-cart__table .product-name dl.variation,
.pe-cart__table .product-name .wc-item-meta {
	margin: 6px 0 0;
	font-family: var(--pe-font-body);
	font-size: 13px;
	letter-spacing: normal;
	color: var(--pe-text-muted);
}

/* Beaten by our own `tr.woocommerce-cart-form__cart-item td { display:
   block }` rule above (that selector is more specific), so this needs
   !important to actually hide the column. */
.pe-cart__table .product-price {
	display: none !important;
}

.pe-cart__table .product-quantity {
	grid-area: qty;
}

.pe-cart__table .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-pill);
	overflow: hidden;
}

.pe-cart__table .quantity .qty {
	width: 40px;
	padding: 8px 0;
	border: none;
	border-left: 1px solid var(--pe-border);
	border-right: 1px solid var(--pe-border);
	border-radius: 0;
	font-family: var(--pe-font-body);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	background: transparent;
	-moz-appearance: textfield;
}

.pe-cart__table .quantity .qty::-webkit-outer-spin-button,
.pe-cart__table .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pe-cart__table .quantity .pe-qty-step {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 34px;
	border: none;
	background: var(--pe-white);
	color: var(--pe-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--pe-ease);
}

.pe-cart__table .quantity .pe-qty-step:hover {
	background: var(--pe-grey-100);
}

.pe-cart__table .quantity .pe-qty-step:active {
	background: var(--pe-grey-200);
}

.pe-cart__table .product-subtotal {
	grid-area: subtotal;
	justify-self: end;
	font-weight: 700;
	font-size: 17px;
}

.pe-cart__table tr.actions {
	display: block;
}

.pe-cart__table tr.actions td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pe-space-2);
	padding-top: var(--pe-space-3);
	padding-bottom: var(--pe-space-4);
}

.pe-cart__table .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pe-cart__table .coupon .input-text {
	padding: 10px 14px;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-pill);
	font-family: var(--pe-font-body);
	font-size: 13px;
	min-width: 180px;
}

.pe-cart__table .coupon .button,
.pe-cart__table tr.actions button[name="update_cart"],
.pe-cart__table .coupon .button:hover,
.pe-cart__table tr.actions button[name="update_cart"]:hover {
	padding: 10px 20px;
	border: 1px solid var(--pe-black);
	border-radius: var(--pe-radius-pill);
	background: var(--pe-white);
	color: var(--pe-text);
	font-family: var(--pe-font-body);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.pe-cart__table .coupon .button:hover,
.pe-cart__table tr.actions button[name="update_cart"]:hover {
	background: var(--pe-black);
	color: var(--pe-white);
}

/* Order summary — a tinted, rounded panel (not bleeding past the
   container) with the totals shown on an elevated white card inside it. */
.pe-cart__summary {
	position: sticky;
	top: var(--pe-space-3);
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-lg);
	padding: var(--pe-space-3);
}

.pe-cart__summary-box {
	background: var(--pe-white);
	border-radius: var(--pe-radius-md);
	padding: var(--pe-space-3);
	box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 16px 32px -20px rgba(24, 24, 27, 0.25);
}

.pe-cart__trust {
	list-style: none;
	margin: var(--pe-space-3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pe-cart__trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--pe-text-muted);
}

.pe-cart__trust svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--pe-blue);
}

.cart_totals h2 {
	font-size: 18px;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 var(--pe-space-2);
}

.cart_totals table {
	width: 100%;
	border-collapse: collapse;
}

.cart_totals table tr th,
.cart_totals table tr td {
	padding: 10px 0;
	border-top: 1px solid var(--pe-border);
	text-align: left;
	font-size: 14px;
	font-weight: 400;
}

.cart_totals table tr td {
	text-align: right;
}

.cart_totals table tr.order-total th,
.cart_totals table tr.order-total td {
	font-weight: 700;
	font-size: 16px;
}

.cart_totals .woocommerce-shipping-totals select,
.cart_totals .shipping-calculator-form input,
.cart_totals .shipping-calculator-form select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-sm);
	font-family: var(--pe-font-body);
	font-size: 13px;
}

.wc-proceed-to-checkout {
	margin-top: var(--pe-space-3);
}

.wc-proceed-to-checkout a.checkout-button,
.wc-proceed-to-checkout a.checkout-button:hover,
.wc-proceed-to-checkout a.checkout-button:focus,
.wc-proceed-to-checkout a.checkout-button:active {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 18px 24px !important;
	border: none !important;
	border-radius: var(--pe-radius-pill) !important;
	background: var(--pe-blue) !important;
	color: var(--pe-white) !important;
	font-family: var(--pe-font-body) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	text-decoration: none !important;
	box-shadow: none;
	transition: background-color 0.2s var(--pe-ease), box-shadow 0.2s var(--pe-ease);
}

.wc-proceed-to-checkout a.checkout-button:hover {
	box-shadow: 0 10px 24px -8px rgba(36, 55, 243, 0.4);
}

.wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--pe-blue-dark) !important;
}

/* Cross-sells */
.pe-cart__cross-sells {
	margin-top: var(--pe-space-5);
}

.pe-cart__cross-sells h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 var(--pe-space-3);
}

.pe-cart__cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pe-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pe-cart__cross-sells li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-md);
	margin-bottom: 8px;
}

.pe-cart__cross-sells li.product .woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 600;
}

.pe-cart__cross-sells li.product .price {
	font-size: 14px;
	color: var(--pe-text-muted);
}

/* Empty state */
.pe-cart__empty {
	text-align: center;
	padding: var(--pe-space-6) var(--pe-space-3);
}

.pe-cart__empty-icon {
	width: 48px;
	height: 48px;
	color: var(--pe-grey-400);
	margin-bottom: var(--pe-space-2);
}

.pe-cart__empty h2 {
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0 0 var(--pe-space-1);
}

.pe-cart__empty p {
	color: var(--pe-text-muted);
	margin: 0 0 var(--pe-space-3);
}

.pe-cart__empty-cta,
.pe-cart__empty-cta:hover {
	display: inline-flex;
	padding: 14px 28px;
	border-radius: var(--pe-radius-pill);
	background: var(--pe-black);
	color: var(--pe-white);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.pe-cart__empty-cta:hover {
	background: var(--pe-charcoal);
}

@media (max-width: 900px) {
	.pe-cart__layout {
		/* minmax(0, 1fr), not a bare 1fr: grid items default to
		   min-width: auto (their content's min-content size), which a bare
		   1fr track doesn't override — the column refused to shrink below
		   its content's natural width and overflowed on narrow viewports.
		   minmax(0, …) explicitly resets that floor to 0. */
		grid-template-columns: minmax(0, 1fr);
	}
	.pe-cart__summary {
		position: static;
	}
	.pe-cart__cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Below 480px the layout's own side padding, the tinted summary panel's
   padding and the white totals card's padding inside it stack up to three
   nested 24px insets — fine on desktop, but on a narrow phone that alone
   eats ~144px and crushed the "Proceed to checkout" button. Tightening
   each layer here keeps a sane amount of room for its actual content. */
@media (max-width: 480px) {
	.pe-cart__layout,
	.pe-checkout__layout {
		padding-inline: var(--pe-space-2);
	}
	.pe-cart__summary,
	.pe-checkout__summary,
	.pe-checkout__details {
		padding: var(--pe-space-2);
	}
	.pe-cart__summary-box,
	.pe-checkout__summary-box {
		padding: var(--pe-space-2);
	}
}

/* Below 768px WooCommerce's own `.shop_table_responsive` CSS takes over —
   equal/later-cascading specificity beats the unqualified grid rule above —
   reflowing the row into stacked label/value blocks with empty
   `::before` labels and hiding `.product-thumbnail` outright. Rather than
   patch that fallback, keep our own grid (just narrower) so the layout
   stays one consistent design at every width. */
@media (max-width: 767px) {
	.pe-cart__table tr.woocommerce-cart-form__cart-item {
		display: grid !important;
		grid-template-columns: 24px 72px minmax(0, 1fr) !important;
		grid-template-areas: "remove thumb name" "remove thumb qty" "remove thumb subtotal" !important;
	}

	.pe-cart__table tr.woocommerce-cart-form__cart-item td {
		display: block !important;
	}

	.pe-cart__table tr.woocommerce-cart-form__cart-item td::before {
		content: none !important;
	}

	.pe-cart__table tr.woocommerce-cart-form__cart-item td.product-price {
		display: none !important;
	}

	.pe-cart__table .product-thumbnail {
		display: block !important;
	}

	.pe-cart__table .product-thumbnail img {
		width: 72px !important;
		height: 72px !important;
	}

	.pe-cart__table .product-subtotal {
		justify-self: start;
		margin-top: 4px;
	}
}

/* =========================================================
   Checkout page
   ========================================================= */
.pe-checkout-page {
	padding-top: var(--pe-space-4);
}

/* The order-received (thank-you) state renders through WooCommerce's
   default (non-overridden) checkout/thankyou.php — not form-checkout.php —
   so it never gets the two-column layout's own container/padding. */
.pe-checkout-page .woocommerce-order {
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
	padding-bottom: var(--pe-space-6);
}

.pe-checkout-page__title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 var(--pe-space-3);
}

/* Decorative step indicator — the checkout is a single page/form, but a
   numbered progress trail is the visual cue big checkouts (Apple, Shopify)
   use to signal "you're partway through a short process", not a dead end
   form. */
.pe-checkout-steps {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0 0 var(--pe-space-4);
	padding: 0;
	font-family: var(--pe-font-label);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pe-grey-400);
}

.pe-checkout-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pe-checkout-steps li:not(:last-child)::after {
	content: '';
	width: 20px;
	height: 1px;
	background: var(--pe-border);
	margin-left: 10px;
}

.pe-checkout-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--pe-border);
	font-size: 11px;
	color: var(--pe-grey-400);
}

.pe-checkout-steps li.is-done {
	color: var(--pe-text);
}

.pe-checkout-steps li.is-done .pe-checkout-steps__num {
	background: var(--pe-blue);
	border-color: var(--pe-blue);
	color: var(--pe-white);
}

.pe-checkout-steps li.is-current {
	color: var(--pe-text);
}

.pe-checkout-steps li.is-current .pe-checkout-steps__num {
	border-color: var(--pe-blue);
	color: var(--pe-blue);
}

/* Two-tone layout, contained within the site's normal 1280px `.pe-container`
   width — see the matching comment on .pe-cart__layout. The billing form
   also gets the same elevated-white-card treatment as the cart items and
   order-summary box, so the whole page reads as one consistent component
   system instead of bare form fields sitting directly on the page. */
.pe-checkout__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
	gap: var(--pe-space-5);
	align-items: start;
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
	padding-bottom: var(--pe-space-6);
}

.pe-checkout__details {
	min-width: 0;
	background: var(--pe-white);
	border-radius: var(--pe-radius-lg);
	padding: var(--pe-space-4) var(--pe-space-3);
	box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 16px 32px -20px rgba(24, 24, 27, 0.25);
}

.pe-checkout__summary {
	position: sticky;
	top: var(--pe-space-3);
	background: var(--pe-grey-100);
	border-radius: var(--pe-radius-lg);
	padding: var(--pe-space-3);
}

.pe-checkout__summary-box {
	background: var(--pe-white);
	border-radius: var(--pe-radius-md);
	padding: var(--pe-space-3);
	box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 16px 32px -20px rgba(24, 24, 27, 0.25);
}

.pe-checkout__trust {
	list-style: none;
	margin: var(--pe-space-3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pe-checkout__trust li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--pe-text-muted);
}

.pe-checkout__trust svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--pe-blue);
}

#order_review_heading {
	font-size: 18px;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 var(--pe-space-2);
}

/* Customer details (billing/shipping). WooCommerce's own `.col2-set
   .col-1, .col-2 { width: 48%; float: left/right }` (float-era two-column
   layout) has more type/class selectors than our rules below and wins on
   specificity, leaving each column at ~48% width inside our single grid
   track — the other ~52% renders as dead whitespace. Forcing both columns
   to the full details width with !important removes that gap; shipping
   fields (col-2) are hidden by default anyway and only appear, full width,
   when "ship to a different address" is checked. */
.pe-checkout__details .col2-set {
	display: block;
}

.pe-checkout__details .col2-set .col-1,
.pe-checkout__details .col2-set .col-2 {
	width: 100% !important;
	float: none !important;
	margin: 0 0 var(--pe-space-4) !important;
}

.pe-checkout__details .col2-set .col-2:last-child {
	margin-bottom: 0 !important;
}

.pe-checkout__details h3 {
	font-size: 18px;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 0 var(--pe-space-2);
}

.pe-checkout__details .form-row {
	margin: 0 0 var(--pe-space-2);
}

.pe-checkout__details .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.pe-checkout__details .form-row .required {
	color: var(--pe-blue);
	text-decoration: none;
}

/* WooCommerce core's `.woocommerce form .form-row .input-text` (3 classes)
   beats this selector (2 classes) on specificity, so the old 4px radius
   and white background were winning over these — same footgun as
   elsewhere in this file, fixed the same way. */
.pe-checkout__details input.input-text,
.pe-checkout__details select,
.pe-checkout__details textarea,
.pe-checkout__details .select2-selection {
	width: 100% !important;
	padding: 13px 16px !important;
	border: 1px solid var(--pe-border) !important;
	border-radius: var(--pe-radius-md) !important;
	font-family: var(--pe-font-body) !important;
	font-size: 14px !important;
	background: var(--pe-grey-100) !important;
	transition: border-color 0.2s var(--pe-ease), background-color 0.2s var(--pe-ease), box-shadow 0.2s var(--pe-ease);
}

.pe-checkout__details input.input-text:focus,
.pe-checkout__details select:focus,
.pe-checkout__details textarea:focus {
	outline: none;
	border-color: var(--pe-blue) !important;
	background: var(--pe-white) !important;
	box-shadow: 0 0 0 3px rgba(36, 55, 243, 0.12);
}

.pe-checkout__details .form-row-first,
.pe-checkout__details .form-row-last {
	display: inline-block;
	width: 48%;
}

.pe-checkout__details .form-row-first {
	margin-right: 4%;
}

.pe-checkout__details .woocommerce-additional-fields {
	margin-top: var(--pe-space-3);
}

.pe-checkout__details .woocommerce-shipping-fields {
	margin-top: var(--pe-space-4);
}

.pe-checkout__details .woocommerce-shipping-fields h3 {
	display: inline-block;
	margin-right: var(--pe-space-2);
}

.pe-checkout__details .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
}

.pe-checkout__details .woocommerce-account-fields {
	margin-top: var(--pe-space-3);
}

/* Order review table inside the summary card */
.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--pe-space-2);
}

.woocommerce-checkout-review-order-table thead {
	display: none;
}

.woocommerce-checkout-review-order-table tr {
	border-bottom: 1px solid var(--pe-border);
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th {
	padding: 10px 0;
	font-size: 14px;
	text-align: left;
}

.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

.woocommerce-checkout-review-order-table tr.cart_item td.product-name {
	font-weight: 500;
}

.woocommerce-checkout-review-order-table tr.cart_item .product-quantity {
	color: var(--pe-text-muted);
	font-weight: 400;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-weight: 700;
	font-size: 16px;
	border-top: 1px solid var(--pe-border);
}

/* Coupon toggle notice ("Have a coupon?") — a `.woocommerce-info` element,
   already picked up by the shared notice rule below, but WooCommerce's
   own icon-font `::before` tag glyph still rendered on top of the text
   since that rule never targeted it. */
.pe-checkout-page .woocommerce-info {
	position: relative;
}

.pe-checkout-page .woocommerce-info::before {
	display: none !important;
}

.pe-checkout-page .woocommerce-info a {
	color: var(--pe-blue);
	font-weight: 600;
	text-decoration: underline;
}

.pe-checkout-page .checkout_coupon.woocommerce-form-coupon {
	display: flex;
	gap: 8px;
	max-width: var(--pe-container);
	margin: 0 auto var(--pe-space-3);
	padding-inline: var(--pe-space-3);
}

.pe-checkout-page .checkout_coupon .input-text {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-pill);
	font-family: var(--pe-font-body);
	font-size: 14px;
}

.pe-checkout-page .checkout_coupon button.button,
.pe-checkout-page .checkout_coupon button.button:hover {
	padding: 12px 22px;
	border: 1px solid var(--pe-black);
	border-radius: var(--pe-radius-pill);
	background: var(--pe-white);
	color: var(--pe-text);
	font-family: var(--pe-font-body);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.pe-checkout-page .checkout_coupon button.button:hover {
	background: var(--pe-black);
	color: var(--pe-white);
}

/* Payment methods */
.woocommerce-checkout-payment {
	margin-top: var(--pe-space-3);
}

ul.wc_payment_methods.payment_methods {
	list-style: none;
	margin: 0 0 var(--pe-space-3);
	padding: 0;
	border: 1px solid var(--pe-border);
	border-radius: var(--pe-radius-md);
	overflow: hidden;
	background: var(--pe-white);
}

ul.wc_payment_methods.payment_methods li.wc_payment_method {
	border-bottom: 1px solid var(--pe-border);
	transition: background-color 0.2s var(--pe-ease);
}

ul.wc_payment_methods.payment_methods li.wc_payment_method:last-child {
	border-bottom: none;
}

ul.wc_payment_methods.payment_methods li.wc_payment_method:has(input:checked) {
	background: var(--pe-grey-100);
}

ul.wc_payment_methods.payment_methods label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

ul.wc_payment_methods.payment_methods input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--pe-blue);
	flex: none;
}

ul.wc_payment_methods.payment_methods .payment_box {
	padding: 0 14px 14px;
	font-size: 13px;
	color: var(--pe-text-muted);
	background: transparent !important;
}

/* WooCommerce core's `.payment_box::before` draws a CSS-triangle "speech
   bubble" pointer (border-trick) above the box — it was still rendering as
   a stray grey triangle because the un-prefixed `display: none` above lost
   the specificity fight. */
ul.wc_payment_methods.payment_methods .payment_box::before {
	display: none !important;
}

.woocommerce-terms-and-conditions-wrapper {
	margin-bottom: var(--pe-space-2);
	font-size: 13px;
}

.form-row.place-order {
	margin-top: var(--pe-space-2);
}

#place_order,
#place_order:hover,
#place_order:focus,
#place_order:active {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 16px 24px;
	border: none;
	border-radius: var(--pe-radius-pill);
	background: var(--pe-blue) !important;
	color: var(--pe-white) !important;
	font-family: var(--pe-font-body);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 10px 24px -8px rgba(36, 55, 243, 0.45);
	transition: background-color 0.2s var(--pe-ease);
}

#place_order:hover {
	background: var(--pe-blue-dark) !important;
}

/* Checkout notices (validation errors, "have a coupon?", etc.) render as
   direct children of `.pe-checkout-page`, above/outside `.pe-checkout__layout`
   — this page isn't wrapped in `.pe-container`, so these need the same
   container width/centering or they'd span edge-to-edge with no gutter. */
.pe-checkout-page .woocommerce-notices-wrapper:empty {
	display: none;
}

.pe-checkout-page .woocommerce-notices-wrapper,
.pe-checkout-page .woocommerce-form-coupon-toggle {
	max-width: var(--pe-container);
	margin-inline: auto;
	padding-inline: var(--pe-space-3);
}

.pe-checkout-page .woocommerce-error,
.pe-checkout-page .woocommerce-message,
.pe-checkout-page .woocommerce-info {
	list-style: none;
	margin: 0 0 var(--pe-space-3);
	padding: 14px 18px;
	border-radius: var(--pe-radius-md);
	font-size: 14px;
	background: var(--pe-grey-100);
}

.pe-checkout-page .woocommerce-error li {
	margin: 0 0 4px;
}

.pe-checkout-page .woocommerce-error li::marker {
	color: var(--pe-blue);
}

@media (max-width: 900px) {
	.pe-checkout__layout {
		/* See the matching comment in the cart page's mobile block: a bare
		   1fr track doesn't reset a grid item's default min-width: auto
		   floor, so the column was refusing to shrink below its form
		   fields' natural content width and overflowing on narrow screens. */
		grid-template-columns: minmax(0, 1fr);
	}
	.pe-checkout__summary {
		position: static;
	}
	.pe-checkout__details .form-row-first,
	.pe-checkout__details .form-row-last {
		width: 100%;
		margin-right: 0;
	}
	.pe-checkout-steps {
		flex-wrap: wrap;
	}
}