/**
 * Pimp My RIJD — wizard styles.
 * Scoped entirely under `.pmr-wizard` so this file can never leak onto any
 * other page. Reuses the theme's own type (DM Serif Display / Euclid Flex)
 * and accent color (#A38562) rather than introducing new ones.
 */

.pmr-wizard {
	--pmr-accent: #A38562;
	--pmr-ink: #17181A;
	--pmr-muted: #6A6D7B;
	--pmr-line: #E4DED4;
	--pmr-bg: #FAF7F2;
	--pmr-serif: 'DM Serif Display', 'Libre Baskerville', serif;
	--pmr-sans: 'Euclid Flex', 'EuclidFlex', Arial, sans-serif;

	font-family: var(--pmr-sans);
	color: var(--pmr-ink);
	width: 100%;
}


.cat-fully-bespoke .product-image.main img {
    height: 588px;
}

.cat-lounge-chairs .product-image.main img {
    height: 750px !important;
}

.cat-poufs-ottomans-pimp-my-rijd .product-image.main img {
    height: 750px !important;
}


.pmr-wizard * { box-sizing: border-box; }

/* Several components in here set their own `display` (flex/grid/block) on
 * elements that JS also toggles via the `hidden` attribute (search/filter
 * results, the piping-fabric fabric, the sidebar summary, etc). Without
 * this, a component's own `display: flex` rule and the browser's default
 * `[hidden] { display: none }` rule tie on specificity and the later one
 * in the stylesheet wins -- which was silently defeating `.prop('hidden', ...)`
 * everywhere JS relied on it (e.g. the fabric search/filter never actually
 * hiding non-matching swatches). This one rule guarantees `hidden` always
 * wins inside the wizard.
 */
.pmr-wizard [hidden] {
	display: none !important;
}

.pmr-heading {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pmr-muted);
	margin-bottom: 18px;
}

/* ---------------------------------------------------------------- Stepper */

/* `justify-content: space-between` + each dot fixed at the circle's own
 * width (30px, flex-grow/shrink both 0) is what makes all of this work
 * together: the leftover row width becomes 4 equal gaps (so steps 1->2,
 * 2->3, 3->4 and 4->5 are all the same distance apart), and space-between's
 * own definition puts the first box flush against the row's left edge and
 * the last box flush against its right edge -- exactly "01" at the start
 * and "05" at the end, with no separate first/last-child rule needed. */
.pmr-stepper {
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	position: relative;
}

/* Single connector line spanning the whole row, from the first circle's
 * center (15px = half the circle's 30px width, from the row's left edge)
 * to the last circle's center (15px from the right edge) -- so it starts
 * at step 1 and ends exactly at step 5, instead of being stitched together
 * from several shorter per-step lines that had to be re-tuned whenever a
 * step's own alignment changed. It sits behind the circles (z-index: 0
 * here, z-index: 1 on .pmr-dot-circle below), which is what makes it look
 * like it stops at each circle's edge rather than cutting across it. */
.pmr-stepper::before {
	content: '';
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	height: 1px;
	background: var(--pmr-line);
	z-index: 0;
}

.pmr-dot {
	position: relative;
	flex: 0 0 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-size: 12px;
	color: var(--pmr-muted);
	z-index: 1;
}

.pmr-dot-circle {
	position: relative;
	z-index: 1;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--pmr-line);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--pmr-serif);
	font-size: 13px;
	background: var(--pmr-bg);
	color: var(--pmr-ink);
	margin-bottom: 6px;
}

.pmr-dot.is-active .pmr-dot-circle {
	background: var(--pmr-accent);
	border-color: var(--pmr-accent);
	color: #fff;
}

.pmr-dot.is-complete .pmr-dot-circle {
	border-color: var(--pmr-accent);
	color: var(--pmr-accent);
}

.pmr-dot.is-complete .pmr-dot-circle::before {
	content: '\2713';
	font-family: var(--pmr-sans);
}

.pmr-dot.is-complete:not(.is-active) { cursor: pointer; }

/* Each dot's own box is now fixed at exactly the circle's width (30px, see
 * .pmr-dot above) so the steps land at perfectly even intervals -- without
 * `nowrap` a label wider than 30px (e.g. "Your piece") would wrap onto a
 * second line instead of overflowing its box on one line, centered under
 * the circle, the way it did when each step had a much wider column. */
.pmr-dot-label { font-size: 12px; white-space: nowrap; }
.pmr-dot.is-active .pmr-dot-label { color: var(--pmr-ink); font-weight: 600; }

/* ------------------------------------------------------------------ Panels */

.pmr-panel { display: none; }
.pmr-panel.is-active { display: block; }

.pmr-step-heading {
	font-family: "EuclidFlex";
	font-size: 20px;
	font-weight: 400;
	margin: 0 0 6px;
}

.pmr-step-sub {
	color: var(--pmr-muted);
	font-size: 14px;
	margin: 0 0 20px;
}

.pmr-back-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--pmr-muted);
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 14px;
}
.pmr-back-link:hover { color: var(--pmr-ink); }

/* ------------------------------------------------------------- Step 1: Size */

.pmr-size-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.pmr-size-card {
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 20px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 275px;
}

.pmr-size-card input[type="radio"] {
	position: absolute;
	top: 18px;
	left: 18px;
}

.pmr-size-card.is-selected {
	border-color: var(--pmr-accent);
	background: #fff;
}

.pmr-size-card-title {
	font-weight: 600;
	font-size: 15px;
	margin-left: 26px;
}

.pmr-size-card-sub {
	font-size: 13px;
	color: var(--pmr-muted);
	margin: 4px 0 12px;
	margin-left: 26px;
}

.pmr-size-diagram {
	color: var(--pmr-muted);
	margin-top: auto;
	display: flex;
	justify-content: center;
}
.pmr-size-diagram img { display: block; width: auto; height: auto; max-width: 160px; }

.pmr-bespoke-ruler {
	display: flex;
	justify-content: center;
	color: var(--pmr-accent);
	opacity: .8;
	margin-top: auto;
	margin-bottom: 12px;
}
.pmr-bespoke-ruler img { display: block; width: 100%; height: auto; }

.pmr-size-card[data-pmr-size-card="bespoke"].is-selected .pmr-bespoke-ruler {
	display: none;
}

.pmr-bespoke-fields {
	display: none;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.pmr-size-card[data-pmr-size-card="bespoke"].is-selected .pmr-bespoke-fields {
	display: flex;
}

.pmr-field {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	color: var(--pmr-muted);
	flex: 1 1 45%;
}

.pmr-field-note { flex-basis: 100%; }

.pmr-field label { margin-bottom: 4px; }

.pmr-field input,
.pmr-field textarea,
.pmr-field select {
	font-family: var(--pmr-sans);
	border: 1px solid var(--pmr-line);
	border-radius: 3px;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--pmr-ink);
	background: #fff;
	width: 100%;
}

.pmr-detail-toggle {
	background: none;
	border: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--pmr-ink);
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 20px;
}

.pmr-detail-toggle.is-open svg { transform: rotate(180deg); }

.pmr-detail-panel {
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 14px 16px;
	margin: -8px 0 20px;
	font-size: 13px;
}

.pmr-detail-row { padding: 6px 0; border-bottom: 1px solid var(--pmr-line); }
.pmr-detail-row:last-child { border-bottom: 0; }
.pmr-detail-row strong { display: block; margin-bottom: 2px; }

/* -------------------------------------------------------- Swatch grid (2/3) */

.pmr-swatch-block { margin-bottom: 20px; }

.pmr-swatch-toolbar {
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

.pmr-swatch-search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--pmr-line);
	border-radius: 3px;
	padding: 0 12px;
	color: var(--pmr-muted);
}

.pmr-swatch-search-input {
	border: 0;
	outline: 0;
	padding: 10px 0;
	font-family: var(--pmr-sans);
	font-size: 14px;
	width: 100%;
}

.pmr-order-swatches {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	border: 1px solid var(--pmr-line);
	border-radius: 3px;
	background: #fff;
	padding: 0 14px;
	font-family: var(--pmr-sans);
	font-size: 13px;
	cursor: pointer;
}

/* Chips sit in a single row that scrolls horizontally instead of wrapping
 * onto multiple lines -- see .pmr-swatch-chips-wrap in the template. */
.pmr-swatch-chips-wrap {
	margin-bottom: 14px;
	/* Bleed the scroll area slightly so the first/last chip's focus ring
	   isn't clipped by overflow. */
	margin-left: -2px;
	margin-right: -2px;
}

.pmr-swatch-chips {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: thin;
	gap: 8px;
	padding: 2px;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
	/* Let our own JS (bindDragScroll) own horizontal drags; still allow the
	   browser to handle vertical page scrolling/panning over this row. */
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.pmr-swatch-chips.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.pmr-chip {
	flex: 0 0 auto;
	white-space: nowrap;
	border: 1px solid var(--pmr-line);
	border-radius: 20px;
	background: #fff;
	padding: 6px 14px;
	font-size: 12px;
	font-family: var(--pmr-sans);
	cursor: pointer;
	color: var(--pmr-ink);
}

.pmr-chip.is-active {
	background: var(--pmr-accent);
	border-color: var(--pmr-accent);
	color: #fff;
}

.pmr-swatch-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}

.pmr-swatch {
	position: relative;
	border: 1px solid transparent;
	border-radius: 4px;
	background: none;
	padding: 4px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: var(--pmr-sans);
}

.pmr-swatch input[type="radio"] {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	/* Swatches sit on photographic thumbnails of varying color, unlike the
	   plain-background size/piping cards, so give the dot a drop shadow to
	   keep it visible against any fabric photo. */
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	/* Only the selected swatch shows its radio dot -- unselected swatches
	   stay clean with no empty circle. */
	display: none;
}

.pmr-swatch input[type="radio"]:checked {
	display: block;
}

.pmr-swatch-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 3px;
	background: var(--pmr-line);
	margin-bottom: 6px;
}

.pmr-swatch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pmr-swatch-name { font-size: 11px; color: var(--pmr-muted); line-height: 1.3; }

.pmr-swatch.is-selected .pmr-swatch-thumb { outline: 2px solid var(--pmr-accent); outline-offset: 2px; }

.pmr-swatch-empty { font-size: 13px; color: var(--pmr-muted); grid-column: 1 / -1; }

.pmr-swatch-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
}

.pmr-page-btn {
	min-width: 30px;
	height: 30px;
	padding: 0 6px;
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	background: #fff;
	font-size: 12px;
	font-family: var(--pmr-sans);
	color: var(--pmr-ink);
	cursor: pointer;
}

.pmr-page-btn.is-active {
	background: var(--pmr-accent);
	border-color: var(--pmr-accent);
	color: #fff;
}

.pmr-page-btn:disabled {
	opacity: .35;
	cursor: default;
}

.pmr-page-nav { font-size: 13px; }

.pmr-selected-panel {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 12px 16px;
	margin-bottom: 20px;
}

.pmr-selected-thumb { width: 44px; height: 44px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.pmr-selected-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pmr-selected-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--pmr-muted); }
.pmr-selected-value { display: block; font-weight: 600; font-size: 14px; }

/* --------------------------------------------------------- Step 3: Piping */

.pmr-piping-heading { font-weight: 600; margin: 0 0 2px; font-size: 14px; }
.pmr-piping-sub { color: var(--pmr-muted); font-size: 13px; margin: 0 0 14px; }

.pmr-piping-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 20px;
}

.pmr-piping-card {
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 10px;
	cursor: pointer;
	position: relative;
	text-align: left;
}

.pmr-piping-card input {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	/* Only the selected piping option shows its radio dot, matching the
	   fabric swatches -- unselected cards stay clean with no empty circle. */
	display: none;
}

.pmr-piping-card input:checked { display: block; }

.pmr-piping-card.is-selected { border-color: var(--pmr-accent); }

/* Clear active/selected indicator directly on the image, not just the card
   border, so it's obvious at a glance which piping option is chosen. */
.pmr-piping-card.is-selected .pmr-piping-swatch {
	outline: 2px solid var(--pmr-accent);
	outline-offset: 2px;
}

/* ---- Custom round radio indicator (shared by size + piping cards + fabric/piping-fabric swatches) ---- */
.pmr-size-card input[type="radio"],
.pmr-piping-card input[type="radio"],
.pmr-swatch input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--pmr-line);
	border-radius: 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}

.pmr-size-card input[type="radio"]:checked,
.pmr-piping-card input[type="radio"]:checked,
.pmr-swatch input[type="radio"]:checked {
	border-color: var(--pmr-accent);
	background-color: #fff;
	background-image: radial-gradient(circle, var(--pmr-accent) 0 5px, transparent 5px);
}

.pmr-size-card input[type="radio"]:focus-visible,
.pmr-piping-card input[type="radio"]:focus-visible,
.pmr-swatch input[type="radio"]:focus-visible {
	outline: 2px solid var(--pmr-accent);
	outline-offset: 2px;
}

/* The size-card radio wasn't vertically aligned with its card's title text --
 * nudge it down 5px. Declared after the shared `margin: 0` rule above (same
 * selector specificity) so it wins for margin-top while leaving the other
 * margin sides at 0. */
.pmr-size-card input[type="radio"] {
	margin-top: 5px;
}

.pmr-piping-swatch {
	display: block;
	width: 100%;
	aspect-ratio: 4/3;
	border-radius: 3px;
	margin-bottom: 10px;
	background: linear-gradient(135deg, #EDE6D9, #DCD2C0);
	position: relative;
	overflow: hidden;
}

.pmr-piping-swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pmr-piping-title { display: block; font-weight: 600; font-size: 13px; }
.pmr-piping-sub-label { display: block; font-size: 12px; color: var(--pmr-muted); }

.pmr-optional { font-weight: 400; color: var(--pmr-muted); font-size: 11px; }
.pmr-piping-fabric-wrap { margin-bottom: 6px; }
.pmr-piping-fabric-label { font-size: 13px; font-weight: 600; margin: 0 0 10px; }

/* .pmr-recap-bar, .pmr-recap-thumb, .pmr-recap-copy and .pmr-recap-title were
 * the old Step 3 recap bar's classes -- that markup was replaced by
 * .pmr-recap-card (originally used for both a Step 4 preview and the Step 5
 * confirm card; the Step 4 preview was later removed as a duplicate of the
 * sidebar summary, so .pmr-recap-card is Step 5-only now), so those rules
 * were dead CSS and have been removed. .pmr-recap-row and .pmr-recap-price
 * below are still used by .pmr-recap-card and the sidebar. */

.pmr-recap-row { display: block; font-size: 12px; color: var(--pmr-muted); }
.pmr-recap-row strong { color: var(--pmr-ink); font-weight: 600; margin-right: 4px; }
.pmr-recap-price { font-family: var(--pmr-serif); font-size: 16px; white-space: nowrap; }

/* -------------------------------------------------- Step 5: Confirm recap */

/* .pmr-confirm-summary wraps .pmr-recap-card + .pmr-price-badges in
 * one bordered box so the confirmation reads as a single organized section;
 * the two children no longer carry their own border/background -- see below. */
.pmr-confirm-summary {
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 20px 22px;
	background: #fff;
	margin-bottom: 16px;
}

.pmr-recap-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--pmr-line);
}

.pmr-recap-card-thumb { width: 64px; height: 64px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.pmr-recap-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pmr-recap-card-copy { flex: 1; }

.pmr-price-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	font-size: 13px;
	color: var(--pmr-muted);
}

.pmr-price { display: flex; flex-direction: column; font-family: var(--pmr-serif); font-size: 18px; color: var(--pmr-ink); }
.pmr-price-label { font-family: var(--pmr-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--pmr-muted); }
.pmr-badge { display: flex; align-items: center; gap: 6px; }
.pmr-badge svg { color: var(--pmr-accent); width: 30px; height: 30px; flex-shrink: 0; }

/* ------------------------------------------ Persistent order-summary sidebar
 * Sits below whichever step (1-3) is active by default (its position as
 * authored in the template, right after the form); the JS re-parents it to
 * just above .pmr-contact-block only while Step 4 is active, then moves it
 * back afterwards -- see data-pmr-sidebar-summary in the template and
 * goToStep()/updateSelectedCount()/syncRecap() in the JS.
 */

.pmr-sidebar-summary {
	/* Symmetric margin: this element is re-parented by JS (see goToStep())
	 * between two different spots -- after the form (Steps 1-3) and just
	 * before .pmr-contact-block (Step 4 only) -- and needs breathing room
	 * from whatever ends up above and below it in either position. */
	margin: 24px 0;
	padding: 20px 22px;
	background: #FAF7F2;
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
}

.pmr-sidebar-head {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--pmr-ink);
	margin-bottom: 16px;
}

.pmr-sidebar-head span {
	font-weight: 400;
	color: var(--pmr-muted);
	text-transform: none;
	letter-spacing: 0;
}

.pmr-sidebar-body {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--pmr-line);
}

.pmr-sidebar-thumb { width: 72px; height: 72px; border-radius: 3px; overflow: hidden; flex-shrink: 0; background: #fff; }
.pmr-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }

.pmr-sidebar-rows { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pmr-sidebar-rows .pmr-recap-row { font-size: 13px; }

.pmr-sidebar-price { font-family: var(--pmr-serif); font-size: 17px; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }

.pmr-sidebar-badges {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 0;
	border-bottom: 1px solid var(--pmr-line);
}

.pmr-sidebar-badge {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--pmr-muted);
}

.pmr-sidebar-badge svg { color: var(--pmr-accent); width: 30px; height: 30px; flex-shrink: 0; }

.pmr-sidebar-help {
	padding-top: 16px;
	font-size: 13px;
	color: var(--pmr-muted);
}

.pmr-sidebar-help a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--pmr-ink);
	font-weight: 600;
	text-decoration: none;
}

.pmr-sidebar-help a:hover { color: var(--pmr-accent); }

/* ----------------------------------------------------- Step 4: Your piece */

.pmr-contact-block {
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 20px 22px;
	background: #fff;
}

.pmr-contact-heading { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }
.pmr-contact-sub { color: var(--pmr-muted); font-size: 13px; margin: 0 0 16px; }

.pmr-form-row { margin-bottom: 14px; }
.pmr-form-row label { display: block; font-size: 13px; margin-bottom: 6px; }
.pmr-form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pmr-form-row--two .pmr-field { flex: none; }
.pmr-form-row textarea { resize: vertical; }
.pmr-required { color: #B23B3B; }

.pmr-file-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--pmr-line);
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	margin-right: 10px;
}
.pmr-file-chip button { border: 0; background: none; cursor: pointer; font-size: 14px; }

.pmr-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--pmr-muted);
	margin: 14px 0;
}
.pmr-consent input { margin-top: 3px; accent-color: var(--pmr-accent); }
.pmr-consent a { color: var(--pmr-ink); text-decoration: underline; }

.pmr-form-error {
	color: #B23B3B;
	font-size: 13px;
	margin: 0 0 14px;
}

.pmr-form-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }

/* --------------------------------------------------------------- Buttons */

.pmr-btn {
	font-family: var(--pmr-sans);
	font-size: 13px;
	letter-spacing: .5px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 14px 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
}

.pmr-btn-primary { background: var(--pmr-ink); color: #fff; }
.pmr-btn-primary:hover { background: #000; }
.pmr-btn-primary:disabled { background: var(--pmr-line); color: var(--pmr-muted); cursor: not-allowed; }
.pmr-btn-primary.is-loading { opacity: .7; pointer-events: none; }

.pmr-btn-secondary { background: #fff; border-color: var(--pmr-line); color: var(--pmr-ink); }
.pmr-btn-ghost { background: none; border-color: var(--pmr-line); color: var(--pmr-ink); }

.pmr-continue { width: 100%; margin-top: 4px; }

/* ---------------------------------------------------------- Step 5: Confirm */

.pmr-success-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 18px 20px;
	margin-bottom: 20px;
	background: #fff;
}

.pmr-success-icon { color: #3E8E5A; flex-shrink: 0; }
.pmr-success-banner strong { display: block; font-size: 14px; }
.pmr-success-banner span span { display: block; font-size: 13px; color: var(--pmr-muted); }

.pmr-next-steps {
	margin: 24px 0;
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 18px 20px;
	background: #fff;
}
.pmr-next-heading { font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 14px; }

.pmr-next-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.pmr-next-item {
	border: 1px solid var(--pmr-line);
	border-radius: 4px;
	padding: 14px;
	font-size: 12px;
	background: var(--pmr-bg);
}
.pmr-next-item svg { color: var(--pmr-accent); margin-bottom: 8px; }
.pmr-next-item strong { display: block; font-size: 13px; margin-bottom: 4px; }
.pmr-next-item span { color: var(--pmr-muted); }

/* -------------------------------------------------------------- Responsive
 * Breakpoint set matches the theme's own site-wide convention (see
 * assets/css/responsive.css): `@media all and (max-width:Xpx) and
 * (min-width:100px)`, ordered largest to smallest. Rules cascade downward --
 * a tier only overrides what needs to change at that width; anything not
 * restated keeps the value set by the next-larger tier (or the base rules
 * above, for the 1366px tier). This replaces the previous two-breakpoint
 * (991px / 480px) version with the full set the design was reviewed against.
 */

/* ---- 1366px: large laptop -- start tightening the desktop spacing scale */
@media all and (max-width:1366px) and (min-width:100px) {
	.pmr-step-heading { font-size: 16px;}
	.pmr-swatch-grid { gap: 10px; }
	.pmr-size-cards,
	.pmr-piping-cards { gap: 12px; }
	.pmr-confirm-summary,
	.pmr-contact-block,
	.pmr-sidebar-summary { padding: 18px 20px; }
	.pmr-header-above-gallery { margin-bottom: 28px; }
	.pmr-size-card{min-height: 254px;}
}

/* ---- 1280px: narrower laptop -- the swatch grid loses a column so each
 * thumbnail keeps a sensible minimum size as the wizard's own column
 * narrows on smaller laptop screens */
@media all and (max-width:1280px) and (min-width:100px) {
	.pmr-swatch-grid { grid-template-columns: repeat(4, 1fr); }
	.pmr-next-grid { gap: 12px; }
	.pmr-size-card { min-height: 240px;}
}

/* ---- 1200px: small laptop / large tablet landscape */
@media all and (max-width:1200px) and (min-width:100px) {
	.pmr-size-cards { gap: 12px; }
	.pmr-piping-cards { gap: 10px; }
	.pmr-recap-price,
	.pmr-sidebar-price { font-size: 16px; }
	.pmr-price { font-size: 17px; }
}

/* ---- 1024px: tablet landscape -- the wizard's own multi-column blocks
 * stack to one column here (this tier absorbs and replaces the previous
 * 991px breakpoint). The page-level gallery/wizard column split lives
 * outside this file, but everything inside `.pmr-wizard` is made to read
 * well at full width once that outer stack happens. */
@media all and (max-width:1024px) and (min-width:100px) {
	.pmr-size-card {padding: 18px;}
	.pmr-size-cards { grid-template-columns: 1fr 1fr; }
	.pmr-piping-cards { grid-template-columns: 1fr; }
	.pmr-swatch-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
	.pmr-form-row--two { grid-template-columns: 1fr; }
	.pmr-next-grid { grid-template-columns: 1fr; }
	.pmr-dot-label { display: none; }
	.pmr-recap-card { flex-wrap: wrap; }
	.pmr-stepper { margin-bottom: 26px; }
	.pmr-header-above-gallery { margin-bottom: 24px; }
}

/* ---- 880px */
@media all and (max-width:880px) and (min-width:100px) {
	.pmr-swatch-grid { grid-template-columns: repeat(3, 1fr); }
	.pmr-swatch-toolbar { flex-wrap: wrap; }
	.pmr-swatch-search { flex-basis: 100%; }
	.pmr-order-swatches { flex: 1; justify-content: center; }
	.pmr-price-badges { gap: 14px; }
}

/* ---- 800px */
@media all and (max-width:800px) and (min-width:100px) {
	.pmr-step-heading { font-size: 16px; }
	.pmr-confirm-summary,
	.pmr-contact-block,
	.pmr-sidebar-summary { padding: 16px 18px; }
	.pmr-btn { padding: 13px 18px; }
}

/* ---- 768px: tablet portrait -- sidebar and recap rows start wrapping
 * onto their own lines instead of being squeezed into one row */
@media all and (max-width:768px) and (min-width:100px) {
	.pmr-swatch-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	.pmr-sidebar-body { flex-wrap: wrap; }
	.pmr-sidebar-price { align-items: flex-start; margin-top: 10px; }
	.pmr-sidebar-badge { flex: 1 1 45%; }
	.pmr-recap-card { flex-wrap: wrap; }
	.pmr-next-grid { gap: 10px; }
	.pmr-header-above-gallery { margin-bottom: 20px; }
}

/* ---- 480px: large phone -- mobile stacking behavior for form actions and
 * the sidebar summary begins here */
@media all and (max-width:480px) and (min-width:100px) {
	.pmr-swatch-grid { grid-template-columns: repeat(2, 1fr); }
	.pmr-size-cards { gap: 12px; grid-template-columns:1fr}
	.pmr-size-card { padding: 16px; }
	.pmr-piping-cards { gap: 10px; }
	.pmr-form-actions { flex-direction: column-reverse; }
	.pmr-form-actions .pmr-btn { width: 100%; }
	.pmr-sidebar-body { flex-wrap: wrap; }
	.pmr-sidebar-price { align-items: flex-start; }
	.pmr-price-badges { gap: 12px 20px; }
	.pmr-step-heading { font-size: 18px; }
	.pmr-swatch-toolbar { gap: 8px; }
	.cat-fully-bespoke .product-image.main img {height: 400px;}
	.pmr-sidebar-badges {gap: 0px;}
}

/* ---- 440px */
@media all and (max-width:440px) and (min-width:100px) {
	.pmr-swatch-grid { gap: 8px; }
	.pmr-recap-card-thumb,
	.pmr-sidebar-thumb { width: 56px; height: 56px; }
	.pmr-heading { letter-spacing: 1.5px; }
	.pmr-next-item { padding: 12px; }
}

/* ---- 414px: common phone width */
@media all and (max-width:414px) and (min-width:100px) {
	.pmr-confirm-summary,
	.pmr-contact-block,
	.pmr-sidebar-summary,
	.pmr-next-steps,
	.pmr-success-banner { padding: 16px; }
	.pmr-badge svg,
	.pmr-sidebar-badge svg { width: 24px; height: 24px; }
	.pmr-price-badges { gap: 10px 16px; }
	.pmr-swatch-name { font-size: 10px; }
}

/* ---- 380px */
@media all and (max-width:380px) and (min-width:100px) {
	.pmr-swatch-grid { gap: 6px; }
	.pmr-size-card { padding: 14px; }
	.pmr-piping-card { padding: 8px; }
	.pmr-step-heading { font-size: 17px; }
	.pmr-next-grid { gap: 8px; }
	.pmr-btn { padding: 12px 16px; font-size: 12px; }
	.cat-fully-bespoke .pmr-recap-card-thumb, .cat-fully-bespoke .pmr-sidebar-thumb {width: 100px; height: 100px;}
}

/* ---- 340px: narrowest supported phones -- the 5-dot stepper is the
 * tightest fit in the whole wizard at this width, so the circles themselves
 * shrink a little rather than letting the row overflow */
@media all and (max-width:340px) and (min-width:100px) {
	.pmr-dot-circle { width: 26px; height: 26px; font-size: 12px; }
	.pmr-dot { flex-basis: 26px; }
	.pmr-stepper::before { top: 13px; left: 13px; right: 13px; }
	.pmr-recap-card-thumb,
	.pmr-sidebar-thumb { width: 48px; height: 48px; }
	.pmr-price-badges { gap: 8px 14px; }
	.pmr-swatch-name { font-size: 9.5px; }
	.pmr-chip { padding: 5px 10px; font-size: 11px; }
	.pmr-sidebar-body {align-items: flex-start; gap: 10px; padding-bottom: 10px; flex-direction: column;}
}

/* ---------------------------------------------------- Overflow safety net
 * Long fabric/piping names, recap values, etc. wrap instead of pushing the
 * wizard wider than its column and forcing a page-level horizontal
 * scrollbar on small screens. */
.pmr-sidebar-rows,
.pmr-recap-card-copy {
	min-width: 0;
}

.pmr-swatch-name,
.pmr-recap-row,
.pmr-selected-value {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ------------------------------------------------- Touch-friendly targets
 * Coarse-pointer devices get slightly larger hit areas on the wizard's
 * small controls, independent of viewport width -- a tablet or a phone in
 * landscape is still a touch device even when it matches a "desktop" width
 * tier above. */
@media (hover: none) and (pointer: coarse) {
	.pmr-size-card input[type="radio"],
	.pmr-piping-card input[type="radio"],
	.pmr-swatch input[type="radio"] {
		width: 20px;
		height: 20px;
	}

	.pmr-consent input {
		width: 18px;
		height: 18px;
	}

	.pmr-chip {
		padding: 8px 16px;
	}

	.pmr-page-btn {
		min-width: 36px;
		height: 36px;
	}

	.pmr-back-link {
		padding: 6px 0;
	}

	.pmr-btn {
		min-height: 44px;
	}

	.pmr-field input,
	.pmr-field select {
		min-height: 44px;
	}
}

/* -------------------------------------------------------- Header-above-gallery
 * The category/title/price/description block, moved above the main product
 * image for PMR products (see includes/pmr-product-header-block.php +
 * single-product.php). Reuses the site's existing .product-action-wrapper
 * typography (title size, category letter-spacing, etc.) -- this class just
 * adds the gap before the gallery starts.
 */
.pmr-header-above-gallery {
	margin-bottom: 32px;
}

.pmr-header-above-gallery .productDescnew {
	max-width: 640px;
}