@charset "UTF-8";
/* =========================================================================
   Diversified Prints, site custom stylesheet
   Target: Shopper template, Bootstrap 4.6, server rendered Liquid, no build
   Built against Set A, literal platform theme values.
   Any declaration marked  [SET B]  is one whose PLATFORM theme value could be
   switched to the var() reference named in the comment. Switching later is a
   find and replace on the theme snippets, not a change to this file.
   No !important anywhere. Hard tabs.
   ========================================================================= */
/* ===== START: Font import ===== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@88..112,400..700&display=swap');
/* ===== END: Font import ===== */
/* ===== START: Root tokens ===== */
:root {
	/* Brand */
	--dp-primary: #02529E;			/* [SET B] color-primary, color-button-bkg, color-button-outline, color-bullet-point, link-color, nav-hover-text-color, navbar-hover-text-color */
	--dp-primary-hover: #013F7C;	/* [SET B] color-font-hover, color-button-bkg-hover, color-button-outline-hover, link-hover-color */
	--dp-primary-deep: #013A73;		/* [SET B] color-announcement-bar */
	--dp-sky: #3BAFE3;				/* [SET B] color-secondary */
	--dp-sky-200: #D2ECF8;			/* [SET B] color-highlight */
	--dp-sky-100: #EAF6FC;			/* [SET B] color-highlight-light, nav-hover-bkg-color */
	--dp-sky-50: rgba(59,175,227,.5);	/* color-secondary-50, keep literal, no alpha token to reference */
	--dp-sky-12: rgba(59,175,227,.12);
	/* Neutrals */
	--dp-ink: #071A2C;				/* color-footer and footer-color-background, KEEP LITERAL, the platform reads it to decide .bg-dark */
	--dp-ink-surface: #0D2438;
	--dp-ink-line: #16324D;
	--dp-ink-muted: #A9BACB;		/* [SET B] footer-color-font */
	--dp-text: #16202B;				/* [SET B] color-font, btn-pill-text-color */
	--dp-text-2: #5F6975;			/* [SET B] color-font-secondary */
	--dp-placeholder: #656D79;
	--dp-control-line: #868F9B;		/* [SET B] color-pill-btn-outline */
	--dp-disabled: #C9CFD8;
	--dp-line: #E4E8ED;
	--dp-ground: #F7F8FA;			/* [SET B] color-bg-v-light */
	--dp-surface: #FFFFFF;			/* [SET B] color-background, color-button-label, color-button-label-hover, color-promotion-text, btn-pill-bkg-color, badge-text-color */
	/* Functional */
	--dp-success: #0F7048;
	--dp-success-tint: #E7F4EE;
	--dp-error: #A3231D;
	--dp-error-tint: #FBECEA;
	--dp-warning: #8A5A00;
	--dp-warning-tint: #FDF3E2;
	--dp-accent: #A9502A;			/* [SET B] color-promotion-bar, badge-bkg-color */
	--dp-overlay: rgba(7,26,44,.55);
	/* Type */
	--dp-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;	/* [SET B] custom-body-font */
	--dp-fs-hero: clamp(34px, 5vw, 64px);
	--dp-fs-display: clamp(30px, 3.4vw, 48px);
	--dp-fs-h2: clamp(26px, 2.6vw, 38px);
	--dp-fs-h3: clamp(24px, 2.2vw, 30px);
	--dp-fs-h4: clamp(21px, 1.8vw, 24px);
	--dp-fs-title: clamp(18px, 1.4vw, 20px);
	--dp-fs-lede: clamp(17px, 1.3vw, 18px);
	--dp-fs-body: 16px;				/* [SET B] body-font-size */
	--dp-fs-small: 14px;
	--dp-fs-eyebrow: 12px;
	--dp-fs-nav: 15px;				/* nav-font-size, keep literal */
	--dp-lh-display: 1.06;
	--dp-lh-heading: 1.2;
	--dp-lh-body: 1.6;
	--dp-track-display: -0.02em;
	--dp-track-eyebrow: 0.1em;
	--dp-fw-body: 400;				/* [SET B] body-font-weight */
	--dp-fw-nav: 500;				/* nav-font-weight, keep literal */
	--dp-fw-heading: 600;
	--dp-fw-display: 700;
	/* Space */
	--dp-s1: 4px;
	--dp-s2: 8px;
	--dp-s3: 12px;
	--dp-s4: 16px;
	--dp-s5: 24px;
	--dp-s6: 32px;
	--dp-s7: 48px;
	--dp-s8: 64px;
	--dp-s9: 96px;
	--dp-s10: 128px;
	--dp-container: 1240px;
	--dp-gutter: 32px;
	--dp-gutter-sm: 16px;
	--dp-section-y: 96px;
	--dp-section-y-md: 64px;
	--dp-section-y-sm: 48px;
	/* Shape */
	--dp-radius-sm: 3px;			/* [SET B] text-input-border-radius, color-swatch-border-radius */
	--dp-radius: 4px;				/* [SET B] btn-border-radius */
	--dp-radius-lg: 6px;			/* [SET B] content-border-radius */
	--dp-radius-pill: 999px;		/* [SET B] btn-pill-border-radius */
	--dp-radius-img: 0;				/* [SET B] var-img-border-radius */
	--dp-tap: 44px;					/* [SET B] color-swatch-width */
	--dp-select-outline: 2px;		/* pill-img-outline-width, no counterpart before this file */
	--dp-field-h: 48px;
	--dp-header-h: 76px;
	/* Elevation, focus, scrim */
	--dp-shadow-1: 0 1px 3px rgba(7,26,44,.08);
	--dp-shadow-2: 0 12px 32px -8px rgba(7,26,44,.18);
	--dp-focus-ring: 0 0 0 3px rgba(59,175,227,.45);
	--dp-focus-outline: 2px solid var(--dp-primary);
	--dp-scrim-h: linear-gradient(90deg, rgba(7,26,44,.94) 0%, rgba(7,26,44,.82) 46%, rgba(7,26,44,.15) 100%);
	--dp-scrim-v: linear-gradient(180deg, rgba(7,26,44,.30) 0%, rgba(7,26,44,.93) 80%);
	/* Motion */
	--dp-ease: cubic-bezier(.2,.6,.3,1);
	--dp-dur-fast: 120ms;
	--dp-dur: 200ms;
	--dp-dur-slow: 320ms;
}
/* ===== END: Root tokens ===== */
/* ===== START: Base ===== */
body {
	font-family: var(--dp-font);
	font-size: var(--dp-fs-body);
	font-weight: var(--dp-fw-body);
	line-height: var(--dp-lh-body);
	color: var(--dp-text);
	background: var(--dp-ground);
	-webkit-font-smoothing: antialiased;
}
.dp-container {
	max-width: var(--dp-container);
	margin: 0 auto;
	padding: 0 var(--dp-gutter);
}
.dp-section {
	padding: var(--dp-section-y) 0;
	background: var(--dp-surface);
}
.dp-section--ground { background: var(--dp-ground); }
.dp-section--ink { background: var(--dp-ink); }
.dp-section--tall { padding: var(--dp-s10) 0; }
.dp-eyebrow {
	display: block;
	margin-bottom: var(--dp-s3);
	font-size: var(--dp-fs-eyebrow);
	font-weight: var(--dp-fw-heading);
	letter-spacing: var(--dp-track-eyebrow);
	text-transform: uppercase;
	color: var(--dp-primary);
}
.dp-display,
.dp-h2 {
	margin: 0 0 var(--dp-s3);
	font-weight: var(--dp-fw-display);
	line-height: var(--dp-lh-display);
	letter-spacing: var(--dp-track-display);
	color: var(--dp-text);
}
.dp-display { font-size: var(--dp-fs-display); }
.dp-h2 { font-size: var(--dp-fs-h2); font-weight: var(--dp-fw-heading); line-height: 1.15; }
.dp-h3 {
	margin: 0 0 var(--dp-s2);
	font-size: var(--dp-fs-h3);
	font-weight: var(--dp-fw-heading);
	line-height: var(--dp-lh-heading);
}
.dp-title {
	margin: 0 0 var(--dp-s2);
	font-size: var(--dp-fs-title);
	font-weight: var(--dp-fw-heading);
	line-height: 1.35;
}
.dp-lede {
	margin: 0;
	font-size: var(--dp-fs-lede);
	line-height: 1.55;
	color: var(--dp-text-2);
	max-width: 68ch;
	text-wrap: pretty;
}
.dp-body { margin: 0; max-width: 68ch; }
.dp-small { font-size: var(--dp-fs-small); line-height: 1.5; color: var(--dp-text-2); }
.dp-num { font-variant-numeric: tabular-nums; }
.dp-confirm { color: var(--dp-error); font-weight: var(--dp-fw-nav); }
.dp-body a,
.dp-prose a {
	color: var(--dp-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--dp-dur-fast) var(--dp-ease);
}
.dp-body a:hover,
.dp-prose a:hover { color: var(--dp-primary-hover); }
.dp-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--dp-radius-img);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--dp-focus-outline);
	outline-offset: 2px;
	box-shadow: var(--dp-focus-ring);
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms;
		animation-iteration-count: 1;
		transition-duration: 1ms;
		scroll-behavior: auto;
	}
}
@media (max-width: 991.98px) {
	:root { --dp-section-y: var(--dp-section-y-md); --dp-header-h: 68px; }
}
@media (max-width: 575.98px) {
	:root { --dp-section-y: var(--dp-section-y-sm); --dp-gutter: var(--dp-gutter-sm); --dp-header-h: 60px; }
}
/* ===== END: Base ===== */
/* ===== START: Buttons ===== */
.dp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dp-s2);
	min-height: var(--dp-tap);
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--dp-radius);
	font-family: var(--dp-font);
	font-size: var(--dp-fs-nav);
	font-weight: var(--dp-fw-heading);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dp-dur-fast) var(--dp-ease), border-color var(--dp-dur-fast) var(--dp-ease), color var(--dp-dur-fast) var(--dp-ease), transform var(--dp-dur) var(--dp-ease);
}
.dp-btn:hover { text-decoration: none; }
.dp-btn:active { transform: translateY(1px); }
.dp-btn--primary { background: var(--dp-primary); border-color: var(--dp-primary); color: var(--dp-surface); }
.dp-btn--primary:hover { background: var(--dp-primary-hover); border-color: var(--dp-primary-hover); color: var(--dp-surface); }
.dp-btn--primary:active { background: var(--dp-primary-deep); }
.dp-btn--secondary { background: var(--dp-text); border-color: var(--dp-text); color: var(--dp-surface); }
.dp-btn--secondary:hover { background: var(--dp-ink); border-color: var(--dp-ink); color: var(--dp-surface); }
.dp-btn--outline { background: transparent; border-color: var(--dp-primary); color: var(--dp-primary); }
.dp-btn--outline:hover { background: var(--dp-sky-100); border-color: var(--dp-primary-hover); color: var(--dp-primary-hover); }
.dp-btn--ghost { background: transparent; border-color: transparent; color: var(--dp-primary); padding-left: var(--dp-s3); padding-right: var(--dp-s3); }
.dp-btn--ghost:hover { background: var(--dp-sky-100); color: var(--dp-primary-hover); }
.dp-btn--sm { padding: 8px 14px; font-size: 13px; }
.dp-btn--lg { padding: 16px 30px; min-height: 56px; font-size: 17px; }
.dp-btn--block { width: 100%; }
.dp-btn:disabled,
.dp-btn[aria-disabled="true"] {
	background: var(--dp-disabled);
	border-color: var(--dp-disabled);
	color: var(--dp-surface);
	cursor: not-allowed;
	transform: none;
}
/* Loading. Depends on the platform toggling .dp-is-loading on submit.
   Fallback if it does not: the :disabled rule above, no spinner. */
.dp-btn.dp-is-loading { cursor: progress; }
.dp-btn.dp-is-loading::before {
	content: "";
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: var(--dp-surface);
	border-radius: var(--dp-radius-pill);
	animation: dp-spin 700ms linear infinite;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }
/* ===== END: Buttons ===== */
/* ===== START: Option pills and swatches ===== */
.dp-pillset { display: flex; flex-wrap: wrap; gap: var(--dp-s3); }
.dp-pill {
	display: inline-flex;
	align-items: center;
	min-height: var(--dp-tap);
	padding: 11px 20px;
	background: var(--dp-surface);
	border: 1px solid var(--dp-control-line);
	border-radius: var(--dp-radius-pill);
	font-size: var(--dp-fs-small);
	font-weight: var(--dp-fw-nav);
	color: var(--dp-text);
	cursor: pointer;
	transition: border-color var(--dp-dur-fast) var(--dp-ease), color var(--dp-dur-fast) var(--dp-ease);
}
.dp-pill:hover { border-color: var(--dp-primary); color: var(--dp-primary); }
.dp-pill.dp-is-selected,
.dp-pill[aria-pressed="true"] {
	padding: 10px 19px;
	background: var(--dp-sky-200);
	border: var(--dp-select-outline) solid var(--dp-primary);
	color: var(--dp-primary-deep);
	font-weight: var(--dp-fw-heading);
}
.dp-pill:disabled,
.dp-pill[aria-disabled="true"] {
	background: var(--dp-ground);
	border-style: dashed;
	border-color: var(--dp-disabled);
	color: var(--dp-disabled);
	text-decoration: line-through;
	cursor: not-allowed;
}
.dp-swatch {
	display: block;
	width: var(--dp-tap);
	height: var(--dp-tap);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius-sm);
	cursor: pointer;
}
.dp-swatch.dp-is-selected {
	border: var(--dp-select-outline) solid var(--dp-primary);
	box-shadow: var(--dp-focus-ring);
}
.dp-swatch[aria-disabled="true"] { border-style: dashed; opacity: .45; cursor: not-allowed; }
.dp-thumb {
	display: block;
	padding: 4px;
	background: var(--dp-surface);
	border: 1px solid var(--dp-line);
	cursor: pointer;
}
.dp-thumb img { display: block; border-radius: var(--dp-radius-img); }
.dp-thumb.dp-is-selected { padding: 3px; border: var(--dp-select-outline) solid var(--dp-primary); }
.dp-thumb[aria-disabled="true"] img { opacity: .4; }
/* ===== END: Option pills and swatches ===== */
/* ===== START: Forms ===== */
.dp-field { display: block; margin-bottom: var(--dp-s5); }
.dp-label {
	display: block;
	margin-bottom: var(--dp-s2);
	font-size: var(--dp-fs-small);
	font-weight: var(--dp-fw-heading);
	color: var(--dp-text);
}
.dp-input,
.dp-textarea,
.dp-select {
	display: block;
	width: 100%;
	min-height: var(--dp-field-h);
	padding: 12px 14px;
	background: var(--dp-surface);
	border: 1px solid var(--dp-control-line);
	border-radius: var(--dp-radius-sm);
	font-family: var(--dp-font);
	font-size: var(--dp-fs-body);
	line-height: 1.5;
	color: var(--dp-text);
	transition: border-color var(--dp-dur-fast) var(--dp-ease);
}
.dp-textarea { min-height: 120px; resize: vertical; }
.dp-select {
	appearance: none;
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--dp-primary) 50%), linear-gradient(135deg, var(--dp-primary) 50%, transparent 50%);
	background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.dp-input::placeholder,
.dp-textarea::placeholder { color: var(--dp-placeholder); opacity: 1; }
.dp-input:hover,
.dp-textarea:hover,
.dp-select:hover { border-color: var(--dp-primary); }
.dp-input:focus,
.dp-textarea:focus,
.dp-select:focus {
	border-color: var(--dp-primary);
	outline: var(--dp-focus-outline);
	outline-offset: 1px;
	box-shadow: var(--dp-focus-ring);
}
.dp-input:disabled,
.dp-textarea:disabled,
.dp-select:disabled {
	background: var(--dp-ground);
	border-color: var(--dp-line);
	color: var(--dp-disabled);
	cursor: not-allowed;
}
.dp-help { display: block; margin-top: var(--dp-s2); font-size: 13px; color: var(--dp-text-2); }
.dp-input.dp-is-invalid,
.dp-textarea.dp-is-invalid,
.dp-select.dp-is-invalid { border-color: var(--dp-error); }
.dp-error {
	display: block;
	margin-top: var(--dp-s2);
	font-size: 13px;
	font-weight: var(--dp-fw-nav);
	color: var(--dp-error);
}
.dp-check {
	display: flex;
	align-items: flex-start;
	gap: var(--dp-s3);
	min-height: var(--dp-tap);
	font-size: var(--dp-fs-nav);
	line-height: 1.5;
	cursor: pointer;
}
.dp-check input {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	accent-color: var(--dp-primary);
}
.dp-formcard {
	max-width: 720px;
	margin: 0 auto;
	padding: var(--dp-s6);
	background: var(--dp-surface);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius-lg);
	box-shadow: var(--dp-shadow-1);
}
.dp-formcard__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-s4);
	align-items: center;
	padding-top: var(--dp-s5);
	border-top: 1px solid var(--dp-line);
}
.dp-formgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--dp-s5);
}
/* ===== END: Forms ===== */
/* ===== START: Product card ===== */
.dp-card {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--dp-surface);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius);
	box-shadow: var(--dp-shadow-1);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--dp-dur) var(--dp-ease), box-shadow var(--dp-dur) var(--dp-ease), transform var(--dp-dur) var(--dp-ease);
}
.dp-card:hover {
	border-color: var(--dp-control-line);
	box-shadow: var(--dp-shadow-2);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
}
.dp-card:hover .dp-card__title { color: var(--dp-primary); }
.dp-card__media { position: relative; }
.dp-card__media img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: var(--dp-radius-img);
}
.dp-card__body { padding: var(--dp-s5); }
.dp-card__title { margin: 0 0 var(--dp-s2); font-size: var(--dp-fs-title); font-weight: var(--dp-fw-heading); line-height: 1.35; transition: color var(--dp-dur-fast) var(--dp-ease); }
.dp-card__text { margin: 0 0 var(--dp-s3); font-size: var(--dp-fs-small); line-height: 1.55; color: var(--dp-text-2); }
.dp-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dp-s3); font-size: var(--dp-fs-nav); font-weight: var(--dp-fw-heading); }
.dp-card__flag { position: absolute; top: var(--dp-s3); left: var(--dp-s3); }
/* List row. Restyle only version, safe if the platform row cannot be restructured. */
.dp-row {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr) auto;
	gap: var(--dp-s5);
	align-items: center;
	padding: var(--dp-s4);
	background: var(--dp-surface);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius);
}
.dp-row img { width: 168px; height: 112px; object-fit: cover; border-radius: var(--dp-radius-img); }
@media (max-width: 767.98px) {
	.dp-row { grid-template-columns: 88px minmax(0, 1fr); }
	.dp-row img { width: 88px; height: 88px; }
}
/* ===== END: Product card ===== */
/* ===== START: Collection ===== */
.dp-collection__head { padding-bottom: var(--dp-s5); margin-bottom: var(--dp-s5); border-bottom: 1px solid var(--dp-line); }
.dp-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-s4);
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--dp-s5);
}
.dp-filterbar__group { display: flex; flex-wrap: wrap; gap: var(--dp-s3); align-items: center; }
.dp-filterbar__label { font-size: 13px; font-weight: var(--dp-fw-heading); color: var(--dp-text-2); }
.dp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--dp-s5);
}
.dp-pagination { display: flex; gap: var(--dp-s2); align-items: center; justify-content: center; padding-top: var(--dp-s5); border-top: 1px solid var(--dp-line); }
.dp-pagination a,
.dp-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--dp-tap);
	min-height: var(--dp-tap);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius);
	font-size: var(--dp-fs-small);
	font-variant-numeric: tabular-nums;
	color: var(--dp-text);
	text-decoration: none;
}
.dp-pagination .dp-is-current { background: var(--dp-primary); border-color: var(--dp-primary); color: var(--dp-surface); font-weight: var(--dp-fw-heading); }
.dp-pagination .dp-is-disabled { color: var(--dp-disabled); cursor: not-allowed; }
/* ===== END: Collection ===== */
/* ===== START: Cart ===== */
/*
	Cart page, mini-cart drawer and checkout order summary.
	Rewritten 19 Aug 2026. Notes on what changed and why:

	1. The previous block matched nothing. The cart page renders stock Bootstrap
	   markup, so .dp-cartline / .dp-summary / .dp-qty were never reached. The
	   accompanying Liquid blocks wire the markup to these classes.
	2. Page-level classes are .dp-cartpage__*, NOT .dp-cart__*. .dp-cart and
	   .dp-cart__count are already taken by the header cart icon and its badge in
	   the Header and nav block. A page-level .dp-cart__count would have rendered
	   the item count as an absolutely positioned navy badge.
	3. Buttons and the coupon input reuse .dp-btn / .dp-input from the Buttons and
	   Forms blocks rather than declaring new ones. Note .dp-field is already the
	   form-group wrapper in the Forms block, so it is not used here.
	4. Nothing keys off .card, .bg-light, .btn-primary, .list-group-item or
	   .quantity. All five are repainted with !important by the legacy stylesheet
	   the platform appends after this file, so a rule written against them loses.
	   The markup drops those hooks instead.
	5. Retained from the previous block for back compatibility, in case markup
	   elsewhere still uses them: .dp-cartline__meta, .dp-summary__row--last,
	   .dp-summary .dp-num, and the .dp-qty output selector.

	Three classes appear in the markup with no rule here on purpose:
	.dp-cartpage__items, .dp-cartpage__aside and .dp-cartline__body are grid
	children that need no styling of their own. They are named so the markup reads,
	and so there is somewhere to hang a rule later.

	No JavaScript is introduced. The quantity stepper still calls the platform's
	incrementQuantity() / decrementQuantity(), which resolve the field through
	closest('form') and do not depend on the .quantity wrapper class.
*/

/* ---- page head ---- */

.dp-cartpage__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--dp-s3);
	margin: 0 0 var(--dp-s5);
	padding-bottom: var(--dp-s4);
	border-bottom: 1px solid var(--dp-line);
}
.dp-cartpage__title {
	margin: 0;
	font-size: var(--dp-fs-h3);
	font-weight: var(--dp-fw-display);
	line-height: var(--dp-lh-heading);
	letter-spacing: var(--dp-track-display);
}
.dp-cartpage__count { font-size: var(--dp-fs-small); color: var(--dp-text-2); }
.dp-cartpage__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	gap: var(--dp-s7);
	align-items: start;
}

/* ---- line item ---- */

.dp-cartline {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--dp-s4);
	padding: var(--dp-s5) 0;
	border-bottom: 1px solid var(--dp-line);
}
.dp-cartline:first-child { padding-top: 0; }
.dp-cartline__media { display: block; width: 96px; }
/* contain, not cover. A book cover or a portrait print must not be cropped. */
.dp-cartline__img,
.dp-cartline px-project-preview {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
	background: var(--dp-ground);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius-img);
}
.dp-cartline px-project-preview::part(img) { width: 100%; height: 100%; object-fit: contain; }
.dp-cartline__top { display: flex; justify-content: space-between; gap: var(--dp-s4); align-items: flex-start; }
.dp-cartline__title {
	margin: 0;
	font-size: var(--dp-fs-body);
	font-weight: var(--dp-fw-heading);
	line-height: 1.35;
	letter-spacing: -0.01em;
}
.dp-cartline__title a { color: inherit; text-decoration: none; }
.dp-cartline__title a:hover { color: var(--dp-primary); }
.dp-cartline__money { margin-left: auto; text-align: right; white-space: nowrap; }
.dp-cartline__price { display: block; font-size: var(--dp-fs-body); font-weight: var(--dp-fw-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-cartline__unit { display: block; margin-top: 2px; font-size: var(--dp-fs-eyebrow); color: var(--dp-text-2); font-variant-numeric: tabular-nums; }
/* retained, previous markup contract */
.dp-cartline__meta { font-size: 13px; line-height: 1.6; color: var(--dp-text-2); }

/* ---- chosen options, paired label and value ---- */

.dp-specs {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 2px var(--dp-s2);
	margin: var(--dp-s3) 0 0;
	font-size: 13px;
	line-height: 1.5;
}
.dp-specs dt { color: var(--dp-text-2); }
.dp-specs dd { margin: 0; color: var(--dp-text); font-weight: var(--dp-fw-nav); }
.dp-specs__more { margin-top: var(--dp-s2); }
.dp-specs__more > summary {
	display: inline-block;
	font-size: 13px;
	font-weight: var(--dp-fw-nav);
	color: var(--dp-primary);
	cursor: pointer;
	list-style: none;
}
.dp-specs__more > summary::-webkit-details-marker { display: none; }

/* ---- row actions ---- */

.dp-cartline__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--dp-s4); margin-top: var(--dp-s4); }
.dp-qty { display: inline-flex; align-items: center; border: 1px solid var(--dp-control-line); border-radius: var(--dp-radius-sm); overflow: hidden; }
.dp-qty button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dp-tap);
	height: var(--dp-tap);
	padding: 0;
	border: 0;
	background: var(--dp-surface);
	color: var(--dp-primary);
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--dp-dur-fast) var(--dp-ease);
}
.dp-qty button:hover { background: var(--dp-sky-100); }
/* the global focus rule uses outline-offset: 2px, which the overflow: hidden
   on .dp-qty would clip. Pull it inside. */
.dp-qty button:focus-visible { outline-offset: -2px; box-shadow: none; }
.dp-qty button svg { width: 13px; height: 13px; fill: currentColor; }
.dp-qty input,
.dp-qty output {
	width: var(--dp-tap);
	height: var(--dp-tap);
	padding: 0;
	border: 0;
	border-left: 1px solid var(--dp-line);
	border-right: 1px solid var(--dp-line);
	background: var(--dp-surface);
	text-align: center;
	font-family: inherit;
	font-size: var(--dp-fs-small);
	font-weight: var(--dp-fw-heading);
	font-variant-numeric: tabular-nums;
	color: var(--dp-text);
}
.dp-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--dp-fw-nav);
	color: var(--dp-text-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.dp-linkbtn:hover { color: var(--dp-primary); }
.dp-linkbtn--danger:hover { color: var(--dp-error); }

/* ---- page foot ---- */

.dp-cartpage__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--dp-s4); margin-top: var(--dp-s5); }
.dp-cartpage__continue { display: inline-flex; align-items: center; gap: var(--dp-s2); font-size: var(--dp-fs-small); font-weight: var(--dp-fw-nav); color: var(--dp-primary); text-decoration: none; }
.dp-cartpage__continue:hover { color: var(--dp-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.dp-cartpage__continue svg { width: 13px; height: 13px; fill: currentColor; }
/* destructive, so quieter than Continue shopping */
.dp-cartpage__clear {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--dp-text-2);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.dp-cartpage__clear:hover { color: var(--dp-error); }

/* ---- order summary ---- */

/* Outlined surface card, not .card + .bg-light. Reads on both the white page
   container and the --dp-ground body. */
.dp-summary {
	padding: var(--dp-s5);
	background: var(--dp-surface);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius-lg);
	box-shadow: var(--dp-shadow-1);
}
.dp-summary__head {
	margin: 0 0 var(--dp-s4);
	padding-bottom: var(--dp-s3);
	border-bottom: 1px solid var(--dp-line);
	font-size: var(--dp-fs-body);
	font-weight: var(--dp-fw-heading);
	letter-spacing: -0.01em;
}
.dp-summary__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dp-s3); padding: 7px 0; font-size: var(--dp-fs-small); }
.dp-summary__row--last { border-bottom: 1px solid var(--dp-line); }
.dp-summary__label { color: var(--dp-text-2); }
.dp-summary__value { margin-left: auto; white-space: nowrap; font-weight: var(--dp-fw-nav); font-variant-numeric: tabular-nums; }
.dp-summary__value--muted { color: var(--dp-text-2); font-weight: var(--dp-fw-body); }
.dp-summary__row--saving .dp-summary__label,
.dp-summary__row--saving .dp-summary__value { color: var(--dp-success); }
/* The total is the number the customer is looking for, so it is the largest
   thing in the card. Previously the row carried font-size-lg while the value
   carried font-size-sm, so the total rendered smaller than its own label. */
.dp-summary__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dp-s3);
	margin-top: var(--dp-s3);
	padding-top: var(--dp-s4);
	border-top: 1px solid var(--dp-line);
}
.dp-summary__total-label { font-size: var(--dp-fs-body); font-weight: var(--dp-fw-heading); }
.dp-summary__total-value { margin-left: auto; font-size: 24px; font-weight: var(--dp-fw-display); letter-spacing: var(--dp-track-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-summary__note { margin: 2px 0 0; font-size: var(--dp-fs-eyebrow); color: var(--dp-text-2); text-align: right; }
.dp-summary .dp-num { font-variant-numeric: tabular-nums; }
.dp-summary .dp-btn { margin-top: var(--dp-s5); }

/* ---- reassurance strip, sits at the decision point ---- */

.dp-trust { margin: var(--dp-s4) 0 0; padding: 0; list-style: none; }
.dp-trust li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 13px; line-height: 1.5; color: var(--dp-text-2); }
.dp-trust svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; fill: var(--dp-success); }

/* ---- promo code, collapsed and below the CTA ---- */

.dp-promo { margin-top: var(--dp-s4); padding-top: var(--dp-s4); border-top: 1px solid var(--dp-line); }
.dp-promo__toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--dp-fs-small);
	font-weight: var(--dp-fw-nav);
	color: var(--dp-primary);
	cursor: pointer;
	list-style: none;
}
.dp-promo__toggle::-webkit-details-marker { display: none; }
.dp-promo__toggle svg { width: 11px; height: 11px; fill: currentColor; transition: transform var(--dp-dur) var(--dp-ease); }
.dp-promo[open] .dp-promo__toggle svg { transform: rotate(180deg); }
.dp-promo__row { display: flex; gap: var(--dp-s2); margin-top: var(--dp-s3); }
/* reuses .dp-input and .dp-btn--outline, only the row geometry is new */
.dp-promo__row .dp-input { flex: 1; min-width: 0; }
.dp-promo__row .dp-btn { flex: none; min-height: var(--dp-field-h); margin-top: 0; }
.dp-promo__applied {
	display: flex;
	align-items: center;
	gap: var(--dp-s2);
	padding: 8px var(--dp-s3);
	background: var(--dp-success-tint);
	border-radius: var(--dp-radius-sm);
	font-size: 13px;
	color: var(--dp-success);
}
.dp-promo__applied button {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--dp-success);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
/* the platform writes into .promo-error, so the node has to stay. Only give it
   box model when it actually has something in it. */
.dp-promo .promo-error:not(:empty) { margin-bottom: var(--dp-s2); font-size: 13px; font-weight: var(--dp-fw-nav); color: var(--dp-error); }

/* ---- empty cart ---- */

.dp-empty { padding: var(--dp-s7) var(--dp-s5); background: var(--dp-ground); text-align: center; border: 1px dashed var(--dp-disabled); border-radius: var(--dp-radius); }
.dp-empty__title { margin: 0 0 var(--dp-s2); font-size: var(--dp-fs-title); font-weight: var(--dp-fw-heading); }
.dp-empty__text { margin: 0 auto var(--dp-s5); max-width: 44ch; font-size: var(--dp-fs-small); line-height: var(--dp-lh-body); color: var(--dp-text-2); }

/* ---- mini-cart drawer ---- */

.dp-minicart__body .dp-cartline { grid-template-columns: 64px minmax(0, 1fr); padding: var(--dp-s4) 0; }
.dp-minicart__body .dp-cartline__media,
.dp-minicart__body .dp-cartline__img,
.dp-minicart__body .dp-cartline px-project-preview { width: 64px; }
.dp-minicart__body .dp-cartline__img,
.dp-minicart__body .dp-cartline px-project-preview { height: 64px; }
.dp-minicart__body .dp-cartline__title,
.dp-minicart__body .dp-cartline__price { font-size: var(--dp-fs-nav); }
.dp-minicart__body .dp-specs { grid-template-columns: auto minmax(0, 1fr); }
.dp-minicart__foot { padding: var(--dp-s4) var(--dp-s5) var(--dp-s5); background: var(--dp-ground); border-top: 1px solid var(--dp-line); }
.dp-minicart__foot .dp-summary__total { margin-top: 0; padding-top: 0; border-top: 0; }
.dp-minicart__foot .dp-summary__total-value { font-size: var(--dp-fs-title); }
.dp-minicart__foot .dp-summary__note { text-align: left; }
.dp-minicart__foot .dp-btn { margin-top: var(--dp-s3); }

/* ---- desktop, sticky summary column ---- */

@media (min-width: 992px) {
	.dp-summary--sticky { position: sticky; top: calc(var(--dp-header-h) + var(--dp-s5)); }
}

/* ---- mobile ---- */

@media (max-width: 991.98px) {
	.dp-cartpage__layout { grid-template-columns: minmax(0, 1fr); gap: var(--dp-s5); }
}
@media (max-width: 767.98px) {
	.dp-cartline { grid-template-columns: 72px minmax(0, 1fr); gap: var(--dp-s3); }
	.dp-cartline__media,
	.dp-cartline__img,
	.dp-cartline px-project-preview { width: 72px; }
	.dp-cartline__img,
	.dp-cartline px-project-preview { height: 72px; }
	.dp-specs { grid-template-columns: auto minmax(0, 1fr); }
	/* total and CTA pinned to the bottom of the viewport. CSS only, no script. */
	.dp-cartpage__bar {
		position: sticky;
		bottom: 0;
		z-index: 3;
		display: flex;
		align-items: center;
		gap: var(--dp-s4);
		margin: var(--dp-s5) calc(var(--dp-gutter-sm) * -1) 0;
		padding: var(--dp-s3) var(--dp-gutter-sm);
		padding-bottom: calc(var(--dp-s3) + env(safe-area-inset-bottom));
		background: var(--dp-surface);
		border-top: 1px solid var(--dp-line);
		box-shadow: 0 -4px 16px -6px rgba(7, 26, 44, 0.16);
	}
	.dp-cartpage__bar-label { display: block; font-size: var(--dp-fs-eyebrow); color: var(--dp-text-2); }
	.dp-cartpage__bar-value { display: block; font-size: var(--dp-fs-title); font-weight: var(--dp-fw-display); letter-spacing: var(--dp-track-display); font-variant-numeric: tabular-nums; }
	.dp-cartpage__bar .dp-btn { flex: 1; margin-top: 0; }
}
@media (min-width: 768px) {
	.dp-cartpage__bar { display: none; }
}
/* ===== END: Cart ===== */
/* ===== START: Modal ===== */
.modal-backdrop.show { background: var(--dp-overlay); opacity: 1; }
.dp-modal .modal-content { border: 0; border-radius: var(--dp-radius-lg); box-shadow: var(--dp-shadow-2); }
.dp-modal .modal-header { padding: 18px 20px; border-bottom: 1px solid var(--dp-line); }
.dp-modal .modal-title { font-size: var(--dp-fs-title); font-weight: var(--dp-fw-heading); }
.dp-modal .close { width: var(--dp-tap); height: var(--dp-tap); border-radius: var(--dp-radius-sm); color: var(--dp-text-2); opacity: 1; }
.dp-modal .modal-body { padding: 20px; }
.dp-modal .modal-footer { padding: 0 20px 20px; border-top: 0; gap: var(--dp-s3); }
/* Drawer variant deferred. Cart is a shared modal on every page and a sticky
   element elsewhere can trap it under its own backdrop. */
/* ===== END: Modal ===== */
/* ===== START: Alerts and badges ===== */
.dp-alert {
	display: flex;
	gap: var(--dp-s3);
	padding: 14px 16px;
	border: 0;
	border-left: 3px solid var(--dp-primary);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-sky-100);
	color: var(--dp-text);
}
.dp-alert__title { display: block; margin-bottom: 2px; font-weight: var(--dp-fw-heading); color: var(--dp-primary); }
.dp-alert--success { background: var(--dp-success-tint); border-left-color: var(--dp-success); }
.dp-alert--success .dp-alert__title { color: var(--dp-success); }
.dp-alert--error { background: var(--dp-error-tint); border-left-color: var(--dp-error); }
.dp-alert--error .dp-alert__title { color: var(--dp-error); }
.dp-alert--warning { background: var(--dp-warning-tint); border-left-color: var(--dp-warning); }
.dp-alert--warning .dp-alert__title { color: var(--dp-warning); }
.dp-badge {
	display: inline-block;
	padding: 5px 9px;
	border-radius: var(--dp-radius-sm);
	background: var(--dp-accent);
	color: var(--dp-surface);
	font-size: 11px;
	font-weight: var(--dp-fw-display);
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
}
.dp-badge--primary { background: var(--dp-primary); }
.dp-badge--tint { background: var(--dp-sky-100); color: var(--dp-primary); }
.dp-badge--success { background: var(--dp-success-tint); color: var(--dp-success); }
.dp-badge--quiet { background: var(--dp-ground); color: var(--dp-text-2); border: 1px solid var(--dp-line); }
/* ===== END: Alerts and badges ===== */
/* ===== START: Table ===== */
.dp-table { width: 100%; border-collapse: collapse; font-size: var(--dp-fs-small); }
.dp-table th {
	padding: 12px 16px;
	border-bottom: 2px solid var(--dp-text);
	font-size: var(--dp-fs-eyebrow);
	font-weight: var(--dp-fw-heading);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--dp-text-2);
}
.dp-table td { padding: 14px 16px; border-bottom: 1px solid var(--dp-line); }
.dp-table tbody tr:nth-child(even) { background: var(--dp-ground); }
.dp-table .dp-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.dp-table__wrap { overflow-x: auto; }
/* ===== END: Table ===== */
/* ===== START: Breadcrumbs, tabs, accordion ===== */
.dp-crumbs { display: flex; flex-wrap: wrap; gap: var(--dp-s2); align-items: center; font-size: 13px; }
.dp-crumbs a { color: var(--dp-primary); text-decoration: none; }
.dp-crumbs a:hover { text-decoration: underline; }
.dp-crumbs__sep { color: var(--dp-disabled); }
.dp-crumbs__current { color: var(--dp-text-2); }
.dp-tabs { display: flex; flex-wrap: wrap; gap: var(--dp-s1); border-bottom: 1px solid var(--dp-line); }
.dp-tabs .nav-link,
.dp-tabs__tab {
	min-height: var(--dp-tap);
	margin-bottom: -1px;
	padding: 12px 16px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	font-size: var(--dp-fs-nav);
	font-weight: var(--dp-fw-nav);
	color: var(--dp-text-2);
	cursor: pointer;
}
.dp-tabs .nav-link.active,
.dp-tabs__tab[aria-selected="true"] { border-bottom-color: var(--dp-primary); color: var(--dp-primary); font-weight: var(--dp-fw-heading); background: transparent; }
.dp-accordion { border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; }
.dp-accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dp-s4);
	width: 100%;
	min-height: 52px;
	padding: 16px 18px;
	border: 0;
	border-bottom: 1px solid var(--dp-line);
	background: var(--dp-surface);
	font-size: var(--dp-fs-nav);
	font-weight: var(--dp-fw-nav);
	color: var(--dp-text);
	text-align: left;
	cursor: pointer;
}
.dp-accordion__head[aria-expanded="true"] { background: var(--dp-ground); font-weight: var(--dp-fw-heading); }
.dp-accordion__head .dp-accordion__mark { color: var(--dp-primary); font-size: 18px; }
.dp-accordion__panel { padding: 18px; border-bottom: 1px solid var(--dp-line); }
/* ===== END: Breadcrumbs, tabs, accordion ===== */
/* ===== START: Skeleton and empty ===== */
.dp-skeleton {
	background: linear-gradient(90deg, var(--dp-line) 0%, #F2F4F7 50%, var(--dp-line) 100%);
	background-size: 420px 100%;
	border-radius: var(--dp-radius-sm);
	animation: dp-shimmer 1200ms linear infinite;
}
.dp-skeleton--media { height: 190px; border-radius: var(--dp-radius-img); }
.dp-skeleton--line { height: 12px; margin-bottom: var(--dp-s2); }
@keyframes dp-shimmer {
	0% { background-position: -420px 0; }
	100% { background-position: 420px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.dp-skeleton { background: var(--dp-line); animation: none; }
}
/* ===== END: Skeleton and empty ===== */
/* ===== START: Ink scope =====
   The platform holds one token set, so it cannot express two grounds.
   Keyed off selectors the template already carries, .bg-dark confirmed as the
   footer wrapper. .dp-on-ink is last, as an opt in for dark bands we add. */
footer,
.footer,
#footer,
.bg-dark,
.navbar-dark,
.dp-on-ink {
	background: var(--dp-ink);
	color: var(--dp-ink-muted);
}
footer .dp-eyebrow,
.footer .dp-eyebrow,
#footer .dp-eyebrow,
.bg-dark .dp-eyebrow,
.dp-on-ink .dp-eyebrow { color: var(--dp-sky); }
footer h1, footer h2, footer h3, footer .dp-title,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark .dp-title,
.dp-on-ink h1, .dp-on-ink h2, .dp-on-ink h3, .dp-on-ink .dp-title { color: var(--dp-surface); }
footer .dp-lede, footer .dp-small,
.bg-dark .dp-lede, .bg-dark .dp-small,
.dp-on-ink .dp-lede, .dp-on-ink .dp-small { color: var(--dp-ink-muted); }
footer a, .bg-dark a, .dp-on-ink a { color: var(--dp-ink-muted); }
footer a:hover, .bg-dark a:hover, .dp-on-ink a:hover { color: var(--dp-surface); }
footer .dp-body a, .bg-dark .dp-body a, .dp-on-ink .dp-body a { color: var(--dp-sky); }
.bg-dark .dp-card,
.dp-on-ink .dp-card { background: var(--dp-ink-surface); border-color: var(--dp-ink-line); box-shadow: none; color: var(--dp-ink-muted); }
.bg-dark .dp-card__title,
.dp-on-ink .dp-card__title { color: var(--dp-surface); }
.bg-dark .dp-card__text,
.dp-on-ink .dp-card__text { color: var(--dp-ink-muted); }
.bg-dark .dp-btn--primary,
.dp-on-ink .dp-btn--primary { background: var(--dp-surface); border-color: var(--dp-surface); color: var(--dp-ink); }
.bg-dark .dp-btn--primary:hover,
.dp-on-ink .dp-btn--primary:hover { background: var(--dp-sky-200); border-color: var(--dp-sky-200); color: var(--dp-ink); }
.bg-dark .dp-btn--outline,
.dp-on-ink .dp-btn--outline { border-color: var(--dp-ink-muted); color: var(--dp-surface); }
.bg-dark .dp-btn--outline:hover,
.dp-on-ink .dp-btn--outline:hover { background: var(--dp-sky-12); border-color: var(--dp-surface); color: var(--dp-surface); }
.bg-dark .dp-pill,
.dp-on-ink .dp-pill { background: transparent; border-color: var(--dp-ink-line); color: var(--dp-surface); }
.bg-dark .dp-pill.dp-is-selected,
.dp-on-ink .dp-pill.dp-is-selected { background: var(--dp-sky-12); border-color: var(--dp-sky); color: var(--dp-surface); }
.bg-dark .dp-input,
.dp-on-ink .dp-input { background: var(--dp-ink-surface); border-color: var(--dp-ink-line); color: var(--dp-surface); }
.bg-dark .dp-input::placeholder,
.dp-on-ink .dp-input::placeholder { color: var(--dp-ink-muted); }
.bg-dark .dp-label,
.dp-on-ink .dp-label { color: var(--dp-surface); }
.bg-dark .dp-table th,
.dp-on-ink .dp-table th { color: var(--dp-ink-muted); border-bottom-color: var(--dp-sky); }
.bg-dark .dp-table td,
.dp-on-ink .dp-table td { color: var(--dp-surface); border-bottom-color: var(--dp-ink-line); }
.bg-dark .dp-table tbody tr:nth-child(even),
.dp-on-ink .dp-table tbody tr:nth-child(even) { background: transparent; }
.bg-dark .dp-alert,
.dp-on-ink .dp-alert { background: var(--dp-ink-surface); border-left-color: var(--dp-sky); color: var(--dp-ink-muted); }
.bg-dark .dp-alert__title,
.dp-on-ink .dp-alert__title { color: var(--dp-surface); }
.bg-dark .dp-badge--primary,
.dp-on-ink .dp-badge--primary { background: var(--dp-sky); color: var(--dp-ink); }
.bg-dark .dp-badge--tint,
.dp-on-ink .dp-badge--tint { background: var(--dp-sky-12); color: var(--dp-sky); }
.bg-dark .dp-skeleton,
.dp-on-ink .dp-skeleton { background: linear-gradient(90deg, var(--dp-ink-surface) 0%, var(--dp-ink-line) 50%, var(--dp-ink-surface) 100%); background-size: 420px 100%; }
.bg-dark a:focus-visible,
.dp-on-ink a:focus-visible,
.bg-dark button:focus-visible,
.dp-on-ink button:focus-visible { outline-color: var(--dp-sky); }
/* ===== END: Ink scope ===== */
/* ===== START: Announcement bar ===== */
.dp-announce { background: var(--dp-primary-deep); color: var(--dp-surface); }
.dp-announce__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dp-s2) var(--dp-s4);
	align-items: center;
	justify-content: center;
	min-height: var(--dp-tap);
	padding: 10px 0;
	font-size: var(--dp-fs-small);
}
.dp-announce a { color: var(--dp-sky); font-weight: var(--dp-fw-heading); text-decoration: underline; text-underline-offset: 2px; }
.dp-announce a:hover { color: var(--dp-surface); }
/* ===== END: Announcement bar ===== */
/* ===== START: Header and nav ===== */
.dp-header { background: var(--dp-surface); border-bottom: 1px solid var(--dp-line); }
.dp-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dp-s3) 20px;
	min-height: var(--dp-header-h);
}
.dp-logo { flex: none; }
.dp-logo img { display: block; height: 26px; width: auto; }
.dp-nav { display: flex; flex-wrap: wrap; align-items: center; }
.dp-nav .nav-link,
.dp-nav__link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 7px;
	min-height: var(--dp-tap);
	padding: 12px 10px;
	border-bottom: 2px solid transparent;
	font-size: var(--dp-fs-nav);
	font-weight: var(--dp-fw-nav);
	white-space: nowrap;
	color: var(--dp-text);
	text-decoration: none;
	transition: color var(--dp-dur-fast) var(--dp-ease), border-color var(--dp-dur-fast) var(--dp-ease);
}
.dp-nav .nav-link:hover,
.dp-nav__link:hover { color: var(--dp-primary); border-bottom-color: var(--dp-sky); }
.dp-nav .nav-link.active,
.dp-nav__link[aria-expanded="true"] { color: var(--dp-primary); border-bottom-color: var(--dp-primary); font-weight: var(--dp-fw-heading); }
.dp-header__actions { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dp-s2); }
.dp-account { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: var(--dp-tap); padding: 11px 10px; font-size: var(--dp-fs-small); font-weight: var(--dp-fw-heading); white-space: nowrap; color: var(--dp-text); text-decoration: none; }
.dp-account:hover { color: var(--dp-primary); }
.dp-account__ext { font-size: 12px; color: var(--dp-text-2); }
.dp-cart { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--dp-tap); height: var(--dp-tap); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); color: var(--dp-text); text-decoration: none; }
.dp-cart:hover { border-color: var(--dp-primary); color: var(--dp-primary); }
/* Assumes the platform renders the count inside the cart link. If it renders
   text beside the icon instead, style that node with .dp-cart__count and drop
   the absolute positioning. */
.dp-cart__count {
	position: absolute;
	top: -5px;
	right: -5px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--dp-radius-pill);
	background: var(--dp-primary);
	color: var(--dp-surface);
	font-size: 11px;
	font-weight: var(--dp-fw-display);
	font-variant-numeric: tabular-nums;
}
/* Mega menu. Needs position: static on the nav item and .w-100 on the menu so
   Bootstrap 4.6 can render it full width. Fallback if that markup is fixed:
   remove .dp-mega--full and the panel opens at the nav item width in two
   columns, group headings retained, featured column dropped. */
.dp-mega {
	width: 100%;
	margin: 0;
	padding: var(--dp-s6) 0 36px;
	border: 0;
	border-top: 1px solid var(--dp-line);
	border-bottom: 1px solid var(--dp-line);
	border-radius: 0;
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow-2);
}
.dp-mega__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) 300px;
	gap: var(--dp-s6);
	max-width: var(--dp-container);
	margin: 0 auto;
	padding: 0 var(--dp-gutter);
}
.dp-mega__heading {
	padding-bottom: var(--dp-s3);
	margin-bottom: var(--dp-s2);
	border-bottom: 1px solid var(--dp-line);
	font-size: var(--dp-fs-eyebrow);
	font-weight: var(--dp-fw-heading);
	letter-spacing: var(--dp-track-eyebrow);
	text-transform: uppercase;
	color: var(--dp-primary);
}
.dp-mega__heading--stacked { padding-top: 20px; }
.dp-mega__link {
	display: flex;
	align-items: center;
	gap: var(--dp-s2);
	padding: 4px 0;
	font-size: var(--dp-fs-small);
	color: var(--dp-text);
	text-decoration: none;
}
.dp-mega__link:hover { color: var(--dp-primary); text-decoration: underline; text-underline-offset: 2px; }
.dp-mega__feature { background: var(--dp-ground); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); overflow: hidden; }
.dp-mega__feature img { display: block; width: 100%; height: 160px; object-fit: cover; border-radius: var(--dp-radius-img); }
.dp-mega__feature-body { padding: 18px; }
.dp-dropdown {
	padding: var(--dp-s6);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius-lg);
	background: var(--dp-surface);
	box-shadow: var(--dp-shadow-2);
}
.dp-dropdown__grid { display: grid; grid-template-columns: 260px repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dp-s6); }
.dp-dropdown__link { display: block; padding: 8px 0; font-size: var(--dp-fs-small); color: var(--dp-text); text-decoration: none; }
.dp-dropdown__link:hover { color: var(--dp-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Mobile nav. Bootstrap collapse, no custom JS. */
.dp-mobilenav { display: none; }
.dp-mobilenav__actions { padding: var(--dp-s4); border-bottom: 1px solid var(--dp-line); display: grid; gap: 10px; }
.dp-mobilenav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 52px;
	padding: 0 var(--dp-gutter-sm);
	border: 0;
	border-bottom: 1px solid var(--dp-line);
	background: var(--dp-surface);
	font-size: var(--dp-fs-body);
	font-weight: var(--dp-fw-nav);
	color: var(--dp-text);
	text-align: left;
}
.dp-mobilenav__toggle[aria-expanded="true"] { background: var(--dp-sky-100); color: var(--dp-primary); font-weight: var(--dp-fw-heading); }
.dp-mobilenav__panel { padding: var(--dp-s2) var(--dp-gutter-sm) var(--dp-s4); border-bottom: 1px solid var(--dp-line); }
.dp-mobilenav__group { padding: 14px 0 6px; font-size: var(--dp-fs-eyebrow); font-weight: var(--dp-fw-heading); letter-spacing: var(--dp-track-eyebrow); text-transform: uppercase; color: var(--dp-primary); }
.dp-mobilenav__link { display: flex; align-items: center; gap: var(--dp-s2); min-height: var(--dp-tap); padding: 11px 0; border-bottom: 1px solid var(--dp-line); font-size: var(--dp-fs-nav); color: var(--dp-text); text-decoration: none; }
.dp-mobilenav__all { display: block; min-height: var(--dp-tap); padding: 12px 0; font-size: var(--dp-fs-small); font-weight: var(--dp-fw-heading); color: var(--dp-primary); text-decoration: none; }
.dp-burger { display: none; width: var(--dp-tap); height: var(--dp-tap); border: 0; border-radius: var(--dp-radius); background: var(--dp-primary); }
.dp-burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--dp-surface); }
@media (max-width: 991.98px) {
	.dp-nav,
	.dp-header__actions .dp-account,
	.dp-header__actions .dp-btn { display: none; }
	.dp-burger { display: block; }
	.dp-mobilenav { display: block; }
	.dp-mobilenav.collapse:not(.show) { display: none; }
	.dp-mega__grid { grid-template-columns: 1fr; }
}
/* ===== END: Header and nav ===== */
/* ===== START: Footer ===== */
.dp-footer { padding: var(--dp-section-y) 0 0; }
.dp-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dp-s7) var(--dp-s6); padding-bottom: 56px; }
@media (min-width: 576px) { .dp-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .dp-footer__grid { grid-template-columns: 1fr 1.4fr 0.8fr 0.8fr; } }
.dp-footer__logo { display: block; height: 28px; width: auto; margin-bottom: 20px; }
.dp-footer__heading { margin-bottom: var(--dp-s4); font-size: var(--dp-fs-eyebrow); font-weight: var(--dp-fw-heading); letter-spacing: var(--dp-track-eyebrow); text-transform: uppercase; color: var(--dp-sky); }
.dp-footer__link { display: block; padding: 10px 0; font-size: var(--dp-fs-nav); text-decoration: none; }
.dp-footer__strong { display: block; padding: 9px 0; font-size: var(--dp-fs-nav); color: var(--dp-surface); text-decoration: none; }
.dp-social { display: flex; gap: 10px; }
.dp-social a { display: inline-flex; align-items: center; justify-content: center; width: var(--dp-tap); height: var(--dp-tap); border: 1px solid var(--dp-ink-line); border-radius: var(--dp-radius); font-size: 13px; font-weight: var(--dp-fw-heading); text-decoration: none; }
.dp-social a:hover { border-color: var(--dp-sky); }
.dp-footer__bar { display: flex; flex-wrap: wrap; gap: var(--dp-s4) var(--dp-s6); align-items: center; justify-content: space-between; padding: var(--dp-s5) 0 var(--dp-s6); border-top: 1px solid var(--dp-ink-line); font-size: 13px; }
.dp-footer__bar { padding-right: 64px; }
.dp-footer__legal { display: flex; flex-wrap: wrap; gap: var(--dp-s3) var(--dp-s5); align-items: center; }
.dp-paymarks { display: flex; gap: 10px; }
.dp-paymarks span { padding: 7px 10px; border: 1px solid var(--dp-ink-line); border-radius: var(--dp-radius-sm); font-size: 11px; font-weight: var(--dp-fw-display); letter-spacing: 0.06em; color: var(--dp-ink-muted); }
/* ===== END: Footer ===== */
/* ===== START: Home hero ===== */
.dp-hero { position: relative; background: var(--dp-ink); }
.dp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--dp-radius-img); }
.dp-hero__scrim { position: absolute; inset: 0; background: var(--dp-scrim-h); }
.dp-hero__inner { position: relative; padding: var(--dp-s10) 0; }
.dp-hero__copy { max-width: 660px; }
.dp-hero__title { margin: 0 0 20px; font-size: var(--dp-fs-hero); font-weight: var(--dp-fw-display); line-height: 1.04; letter-spacing: var(--dp-track-display); font-stretch: 92%; color: var(--dp-surface); text-wrap: balance; }
.dp-hero__lede { margin: 0 0 var(--dp-s6); font-size: var(--dp-fs-lede); line-height: 1.55; color: var(--dp-ink-muted); max-width: 56ch; text-wrap: pretty; }
.dp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--dp-s4); margin-bottom: var(--dp-s6); }
.dp-hero__proof { display: flex; flex-wrap: wrap; gap: var(--dp-s3) var(--dp-s6); align-items: center; padding-top: var(--dp-s5); border-top: 1px solid var(--dp-ink-line); }
.dp-hero__quote { font-size: var(--dp-fs-small); line-height: 1.6; color: var(--dp-surface); max-width: 52ch; }
.dp-hero__attrib { font-size: 13px; color: var(--dp-ink-muted); }
@media (max-width: 991.98px) {
	.dp-hero { display: flex; flex-direction: column; }
	.dp-hero__img { position: relative; height: 300px; }
	.dp-hero__scrim { bottom: auto; height: 300px; background: var(--dp-scrim-v); }
	.dp-hero__inner { padding: 0 0 36px; }
}
/* ===== END: Home hero ===== */
/* ===== START: Signature products ===== */
.dp-products__head { display: flex; flex-wrap: wrap; gap: var(--dp-s4) var(--dp-s6); align-items: flex-end; justify-content: space-between; margin-bottom: var(--dp-s7); }
.dp-products__row { display: flex; flex-wrap: wrap; gap: var(--dp-s5); margin-bottom: var(--dp-s5); }
.dp-products__row:last-child { margin-bottom: 0; }
/* Sources are 700x600. Tiles are capped so nothing is ever displayed above
   its native width. Remove the caps when 1400x1200 rescans arrive. */
.dp-tile--lead { flex: 1 1 480px; max-width: 700px; }
.dp-tile--lead .dp-card__media img { height: 380px; }
.dp-tile--tall { flex: 1 1 320px; max-width: 540px; }
.dp-tile--tall .dp-card__media img { height: 380px; }
.dp-tile { flex: 1 1 300px; max-width: 400px; }
.dp-tile--text { flex: 1 1 300px; max-width: 540px; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; padding: var(--dp-s6); border-radius: var(--dp-radius); text-decoration: none; }
.dp-tile--text-ink { background: var(--dp-ink); }
.dp-tile--text-tint { background: var(--dp-sky-100); color: var(--dp-text); }
.dp-tile__more { margin-top: 20px; font-size: var(--dp-fs-nav); font-weight: var(--dp-fw-heading); color: var(--dp-primary); }
.dp-tile--text-ink .dp-tile__more { color: var(--dp-sky); }
/* ===== END: Signature products ===== */
/* ===== START: Who we serve ===== */
.dp-serve { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dp-s4); }
.dp-serve__card {
	display: flex;
	gap: var(--dp-s4);
	align-items: flex-start;
	padding: var(--dp-s5);
	background: var(--dp-surface);
	border: 1px solid var(--dp-line);
	border-radius: var(--dp-radius);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--dp-dur-fast) var(--dp-ease);
}
.dp-serve__card:hover { border-color: var(--dp-primary); color: inherit; text-decoration: none; }
.dp-serve__card:hover .dp-title { color: var(--dp-primary); }
/* Icon tile. The nine supplied vertical images are multi coloured title cards
   and are not used. Swap this for an image if recoloured versions arrive. */
.dp-serve__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--dp-tap);
	height: var(--dp-tap);
	border-radius: var(--dp-radius-sm);
	background: var(--dp-sky-100);
}
.dp-serve__icon svg { display: block; width: 22px; height: 22px; }
.dp-serve__icon svg [stroke] { stroke: var(--dp-primary); }
.dp-serve__icon svg [fill]:not([fill="none"]) { fill: var(--dp-sky); }
/* ===== END: Who we serve ===== */
/* ===== START: Why Diversified ===== */
.dp-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--dp-s7); align-items: start; }
.dp-why__list { display: grid; gap: 2px; }
.dp-why__item { padding: 22px var(--dp-s5); background: var(--dp-ink-surface); border-left: 2px solid var(--dp-ink-line); }
.dp-why__item:first-child { border-left-color: var(--dp-sky); }
.dp-why__title { margin-bottom: var(--dp-s1); font-size: var(--dp-fs-title); font-weight: var(--dp-fw-heading); color: var(--dp-surface); }
/* ===== END: Why Diversified ===== */
/* ===== START: How ordering works ===== */
.dp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--dp-s5); }
.dp-step { padding-top: 20px; border-top: 2px solid var(--dp-line); }
.dp-step:first-child { border-top-color: var(--dp-primary); }
.dp-step__n { display: block; margin-bottom: 10px; font-size: var(--dp-fs-eyebrow); font-weight: var(--dp-fw-heading); letter-spacing: var(--dp-track-eyebrow); text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--dp-primary); }
.dp-switch { display: flex; flex-wrap: wrap; gap: var(--dp-s4); align-items: center; margin-top: var(--dp-s7); padding: 20px var(--dp-s5); background: var(--dp-sky-100); border-radius: var(--dp-radius); }
.dp-switch__link { margin-left: auto; min-height: var(--dp-tap); display: inline-flex; align-items: center; font-weight: var(--dp-fw-heading); text-decoration: none; }
/* ===== END: How ordering works ===== */
/* ===== START: Social proof ===== */
.dp-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dp-s5); }
.dp-quote { margin: 0; padding: var(--dp-s6); background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); }
.dp-quote blockquote { margin: 0 0 20px; font-size: var(--dp-fs-title); font-weight: var(--dp-fw-nav); line-height: 1.5; color: var(--dp-text); }
.dp-quote figcaption { font-size: var(--dp-fs-small); color: var(--dp-text-2); }
.dp-quote figcaption b { color: var(--dp-text); }
/* ===== END: Social proof ===== */
/* ===== START: Resources strip ===== */
.dp-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--dp-s5); }
.dp-resource { padding: var(--dp-s6); background: var(--dp-ground); border: 1px solid var(--dp-line); border-radius: var(--dp-radius); }
.dp-resource__logo { display: block; height: 24px; width: auto; margin-bottom: 14px; }
.dp-resource__link { display: inline-flex; align-items: center; min-height: var(--dp-tap); font-size: var(--dp-fs-nav); font-weight: var(--dp-fw-heading); color: var(--dp-primary); text-decoration: none; }
.dp-resource__link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ===== END: Resources strip ===== */
/* ===== START: Closing CTA ===== */
.dp-cta { background: var(--dp-primary-deep); padding: var(--dp-s10) 0; }
.dp-cta__inner { display: flex; flex-wrap: wrap; gap: var(--dp-s6) var(--dp-s7); align-items: center; justify-content: space-between; }
.dp-cta__copy { max-width: 640px; }
.dp-cta__title { margin: 0 0 var(--dp-s4); font-size: var(--dp-fs-display); font-weight: var(--dp-fw-display); line-height: var(--dp-lh-display); letter-spacing: var(--dp-track-display); color: var(--dp-surface); }
.dp-cta__actions { display: flex; flex-direction: column; gap: var(--dp-s3); min-width: 260px; }
.dp-cta__hours { font-size: 13px; line-height: 1.6; color: var(--dp-ink-muted); text-align: center; }
/* ===== END: Closing CTA ===== */
/* ===== START: Footer, CMS markup ===== */
.dp-footer__grid > div > .dp-small { margin-bottom: 20px; }
.dp-social a svg { width: 18px; height: 18px; display: block; }
.dp-social a svg [fill]:not([fill="none"]) { fill: currentColor; }
.dp-social a svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.dp-paymarks img { height: 20px; width: auto; display: block; }
.dp-footer__powered { display: inline-flex; align-items: center; gap: 6px; color: var(--dp-ink-muted); }
.dp-footer__powered svg { height: 12px; width: auto; }
.dp-footer__admin { font-size: 10px; opacity: 0.5; }
/* ===== END: Footer, CMS markup ===== */
/* ===== START: Mega menu, CMS markup ===== */
/* Column count variants. The base .dp-mega__grid is four groups plus a
   300px featured column. These cover the menus with fewer groups so a
   two group menu does not stretch its links across the full width. */
.dp-mega__grid--1 { grid-template-columns: minmax(0, 1fr) 300px; }
.dp-mega__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) 300px; }
.dp-mega__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; }
.dp-mega__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) 300px; }
.dp-mega__col { min-width: 0; }
.dp-mega__col + .dp-mega__col .dp-mega__heading:first-child { margin-top: 0; }
/* Group heading is a div when it has no destination and an anchor when it
   does. Both must look identical. */
a.dp-mega__heading { display: block; text-decoration: none; }
a.dp-mega__heading:hover { color: var(--dp-primary-hover); text-decoration: underline; text-underline-offset: 2px; }
/* NEW badge. Add to any link:
   <a class="dp-mega__link" href="...">Label <span class="dp-mega__new">New</span></a> */
.dp-mega__new {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	border-radius: var(--dp-radius-sm);
	background: #32c5ff;
	color: var(--dp-surface);
	font-size: 10px;
	font-weight: var(--dp-fw-display);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}
/* Featured panel. The placeholder box holds the layout until a real asset
   is uploaded. Delete .dp-mega__feature-ph once the img is in. */
.dp-mega__feature-ph {
	height: 160px;
	background: var(--dp-sky-100);
	border-bottom: 1px solid var(--dp-line);
}
.dp-mega__feature-title { margin-bottom: 6px; font-size: var(--dp-fs-small); color: var(--dp-text); }
.dp-mega__feature-text { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--dp-text-2); }
.dp-mega__feature-cta { font-size: 13px; font-weight: var(--dp-fw-heading); color: var(--dp-primary); text-decoration: none; }
.dp-mega__feature-cta:hover { color: var(--dp-primary-hover); text-decoration: underline; text-underline-offset: 2px; }
/* Two rules that used to be inline style attributes on the snippet. */
.dp-nav__logo-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dp-nav__row2 { padding-top: 0; padding-bottom: 0.5rem; }
/* Mobile. The mega menu renders inside the collapsed navbar, so it has to
   drop out of absolute positioning or it overlays the rest of the menu. */
@media (max-width: 991.98px) {
	.dp-mega {
		position: static;
		float: none;
		padding: 0 0 var(--dp-s4);
		border: 0;
		box-shadow: none;
	}
	.dp-mega__grid--1,
	.dp-mega__grid--2,
	.dp-mega__grid--3,
	.dp-mega__grid--4 { grid-template-columns: 1fr; gap: var(--dp-s4); padding: 0; }
	.dp-mega__feature { display: none; }
	.dp-nav__logo-center { position: static; transform: none; }
}
/* ===== END: Mega menu, CMS markup ===== */
/* ===== START: dp-albfeat — album features showcase (collection footer) ===== */
/* Scope: every rule sits under .dp-albfeat — required, this ships site-wide in custom.css */
.dp-albfeat { background: #fafaf8; }
.dp-albfeat-title { font-size: 2rem; font-weight: 700; }
.dp-albfeat-lead { max-width: 620px; color: #666; }
.dp-albfeat-hero { border-radius: 12px; width: 100%; }
.dp-albfeat-icon { color: #333; margin-bottom: 0.75rem; }
.dp-albfeat-feature-h { font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem; }
.dp-albfeat-feature-p { font-size: 0.875rem; color: #666; margin-bottom: 0; }
.dp-albfeat-sub { font-size: 1.35rem; font-weight: 700; }
.dp-albfeat-mat-h { font-size: 1rem; font-weight: 600; }
.dp-albfeat-count { font-size: 0.8rem; color: #888; }
.dp-albfeat-striprow { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.dp-albfeat-striprow img { height: 64px; width: auto; max-width: none; display: block; }
.dp-albfeat-foilrow .dp-albfeat-foil {
	display: inline-block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	margin: 0 5px;
	border: 1px solid #e2e2e2;
	vertical-align: middle;
}
.dp-albfeat-foil-gold { background: linear-gradient(135deg, #8a6d1f, #f6e27a 55%, #8a6d1f); }
.dp-albfeat-foil-silver { background: linear-gradient(135deg, #7a7a7e, #eceff3 55%, #7a7a7e); }
.dp-albfeat-foil-copper { background: linear-gradient(135deg, #7a4a26, #e6a06b 55%, #7a4a26); }
.dp-albfeat-foil-black { background: #17171a; }
.dp-albfeat-foil-white { background: #f6f6f4; }
.dp-albfeat-foil-red { background: linear-gradient(135deg, #7c1216, #d33b40 55%, #7c1216); }
.dp-albfeat-foil-emboss { background: repeating-linear-gradient(45deg, #ddd8cc 0 4px, #cbc6ba 4px 8px); }
.dp-albfeat-sizes { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; }
.dp-albfeat-size {
	background: #fff;
	border: 1px solid #ddd;
	border-left-width: 5px;
	border-radius: 3px 6px 6px 3px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 6px;
	color: #777;
	font-size: 0.72rem;
	box-shadow: 0 8px 14px -10px rgba(0,0,0,0.35);
}
/* proportional: 9px per inch */
.dp-albfeat-size[data-size="5x5"]   { width: 45px;  height: 45px; }
.dp-albfeat-size[data-size="8x8"]   { width: 72px;  height: 72px; }
.dp-albfeat-size[data-size="10x10"] { width: 90px;  height: 90px; }
.dp-albfeat-size[data-size="11x14"] { width: 99px;  height: 126px; }
.dp-albfeat-size[data-size="12x12"] { width: 108px; height: 108px; }
.dp-albfeat-size[data-size="12x18"] { width: 108px; height: 162px; }
@media (max-width: 576px) {
	.dp-albfeat-title { font-size: 1.5rem; }
	.dp-albfeat-striprow img { height: 48px; }
}
/* Collection cards: make custom_pricing text match the standard price */
.card .card-body .font-weight-bold.text-muted span.small {
	font-size: 100%;
	font-weight: inherit;
}
/* ===== END: dp-albfeat ===== */
/* ══ PDP controls: density, alignment, price line ══════════════════════════
   Filter controls (orientation, size) and variant controls (finish, backing,
   corners, holes) share a column class but not a wrapper. Target both. */

.variant-selector .row > [class*="col-"],
.select-box .row > [class*="col-"] {
	flex: 0 0 25%;
	max-width: 25%;
	padding-left: 0 !important;
	padding-right: .5rem !important;
	margin-bottom: .5rem;
}

/* Size is the long list — go 5-up on desktop, it removes two rows. */
@media (min-width: 992px) {
	.variant-selector .row > [class*="col-"] {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

@media (max-width: 575.98px) {
	.variant-selector .row > [class*="col-"],
	.select-box .row > [class*="col-"] {
		flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}

/* Equal-height tiles. Without this a two-line label ("1/2\" Gatorfoam with Kwik
   Hanger") makes its row taller than its neighbours and the grid goes ragged. */
.variant-selector .field-label,
.select-box .field-label {
	margin: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.variant-selector .label-text,
.select-box .label-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 44px;          /* touch target floor, shopper-ux §4 */
	height: 100%;
	padding: .4rem .4rem .35rem;
	line-height: 1.2;
	text-align: center;
	font-weight: 600;          /* the size is the thing being chosen */
}

/* ── Price under the size ──────────────────────────────────────────────────
   Installed live 2 Sep and the price read as loud as the size. The size is the
   decision; the price is the supporting fact. Three levers, all needed —
   smaller, lighter weight, lower contrast. Anything less and they still
   compete, because the currency string is physically longer than "4x4". */
.px-filter-price {
	display: block;
	margin-top: 1px;
	font-size: .72em;
	font-weight: 400;
	line-height: 1.15;
	opacity: .6;
	letter-spacing: -.005em;
}
.field-label input:checked + .label-text .px-filter-price {
	opacity: .8;              /* selected tile is dark-filled: lift for contrast */
}

/* ══ Group rhythm ═════════════════════════════════════════════════════════
   Six stacked control groups need less air between them than one or two did. */
.variant-selector,
.select-box {
	margin-bottom: 1rem;
}
.variant-selector .px-title,
.select-box .px-title {
	margin-bottom: .35rem;
}

/* ══ CTA hierarchy ════════════════════════════════════════════════════════
   Add to Cart and the design-tool button are both solid navy at equal width.
   shopper-ux §2: if two actions feel equal in weight, one of them is wrong.
   Demote the secondary to an outline. Scoped to the PDP so nothing else moves. */
.single-product .btn-primary + .btn-primary,
.single-product .btn-secondary {
	background: transparent !important;
	color: var(--px-cta, #1e3a63) !important;
	border: 1px solid currentColor !important;
	font-weight: 500;
}

/* ══ Mobile sticky CTA ════════════════════════════════════════════════════
   Keeps price and Add to Cart reachable however long the control stack gets.
   position: sticky, so no JS and no layout jump. */
@media (max-width: 767.98px) {
	.single-product form .product-action,
	.single-product .add-to-cart-row {
		position: sticky;
		bottom: 0;
		z-index: 20;
		padding: .6rem .75rem;
		margin-left: -.75rem;
		margin-right: -.75rem;
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, .10);
	}
}
/* ==========================================================================
   Size swatch grid on the product page — v2, 18 Sep 2026
   Scoped with :has(.label-img) so only image swatches are affected.
   ========================================================================== */

.variant-selector .row:has(.label-img) {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: .75rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.variant-selector .row > div:has(.label-img) {
	flex: 0 0 auto !important;
	width: 88px !important;
	max-width: 88px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
}

.variant-selector .row > div:has(.label-img) .field-label {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
}

.variant-selector .row > div:has(.label-img) .field-label input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	pointer-events: none;
}

.variant-selector .label-img {
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100% !important;
	aspect-ratio: 1 / 1;
	padding: 8px;
	margin: 0;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.variant-selector .label-img img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	object-fit: contain !important;
}

.variant-selector .field-label:hover .label-img {
	border-color: #1b2430;
	box-shadow: 0 0 0 1px #1b2430;
}

.variant-selector input[type="radio"]:checked + .label-img {
	border-color: #1b2430;
	box-shadow: 0 0 0 2px #1b2430;
}

.variant-selector .row > div:has(.label-img) .text-center {
	margin-top: .35rem;
}

.variant-selector .row > div:has(.label-img) .px-asset-description {
	display: block;
	min-height: 1.2em;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	word-break: break-word;
}

@media (max-width: 575.98px) {
	.variant-selector .row > div:has(.label-img) {
		width: 72px !important;
		max-width: 72px !important;
	}
}

/* 6b. Only .label-img may draw a ring. The theme also rings the label and the
      column, which is the second, inner line. Kill it in every state. */
.variant-selector .row > div:has(.label-img),
.variant-selector .row > div:has(.label-img):hover,
.variant-selector .row > div:has(.label-img) .field-label,
.variant-selector .row > div:has(.label-img) .field-label:hover,
.variant-selector .row > div:has(.label-img) .field-label:focus,
.variant-selector .row > div:has(.label-img) .field-label:focus-within {
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.variant-selector .label-img img,
.variant-selector label.field-label input:hover + .label-img img,
.variant-selector label.field-label input:focus + .label-img img,
.variant-selector label.field-label input:checked + .label-img img,
.variant-selector label.field-label .label-img img {
	outline: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
/* ===== START: Layout utilities ===== */
/* Deliberate global addition, 18 Sep 2026. These replace the inline style=""
   attributes that were previously used for one-off spacing on page content.
   Governance: no CSS in page content, no style attributes. */
.dp-mt-0 { margin-top: 0; }
.dp-mt-3 { margin-top: var(--dp-s3); }
.dp-mt-4 { margin-top: var(--dp-s4); }
.dp-mt-6 { margin-top: var(--dp-s6); }
.dp-mt-7 { margin-top: var(--dp-s7); }
.dp-m-0  { margin: 0; }
.dp-section--tight { padding-top: var(--dp-s7); padding-bottom: var(--dp-s7); }
.dp-table__caption { caption-side: bottom; padding-top: var(--dp-s3); text-align: left; color: var(--dp-text-2); }
/* ===== END: Layout utilities ===== */

/* =========================================================================
   PAGE-SCOPED BLOCKS
   Added 18 Sep 2026.
   Per 50_SHOPPER_TEMPLATE_REFERENCE.md section 4, all CSS lives here, never
   inline in page content or a Liquid snippet. Each block below is namespaced
   to one custom type page and is inert on every other page.
   ========================================================================= */

/* ===== START: Metal Prints page (dp-mp) ===== */
.dp-mp__hero{position:relative;min-height:clamp(420px,46vw,620px);display:flex;align-items:center;overflow:hidden;background:var(--dp-ground)}
.dp-mp__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.dp-mp__hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.97) 0%,rgba(247,248,250,.94) 30%,rgba(247,248,250,.72) 46%,rgba(247,248,250,.28) 64%,rgba(247,248,250,0) 82%)}
.dp-mp__hero-inner{position:relative;width:100%;padding:var(--dp-s9) 0}
.dp-mp__hero-copy{max-width:640px;color:var(--dp-text)}
.dp-mp__hero-copy .dp-eyebrow{color:var(--dp-text-2)}
.dp-mp__h1{margin:0 0 var(--dp-s4);font-size:var(--dp-fs-hero);font-weight:var(--dp-fw-display);line-height:var(--dp-lh-display);letter-spacing:var(--dp-track-display);color:var(--dp-text)}
.dp-mp__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
.dp-mp__hero-proof{margin-top:var(--dp-s6);padding-top:var(--dp-s4);border-top:1px solid var(--dp-line);max-width:520px}
.dp-mp__hero-quote{margin:0 0 var(--dp-s1);font-size:var(--dp-fs-small);line-height:1.5;color:var(--dp-text)}
.dp-mp__hero-attrib{margin:0;font-size:13px;color:var(--dp-text-2)}
@media (max-width:767.98px){.dp-mp__hero-scrim{background:rgba(247,248,250,.93)}.dp-mp__hero-inner{padding:var(--dp-s8) 0}}

.dp-mp__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--dp-s5);padding:var(--dp-s6) 0;border-top:1px solid var(--dp-line);border-bottom:1px solid var(--dp-line)}
.dp-mp__fact b{display:block;font-size:var(--dp-fs-h4);font-weight:var(--dp-fw-display);line-height:1.15;color:var(--dp-text)}
.dp-mp__fact span{display:block;margin-top:var(--dp-s2);font-size:13px;line-height:1.5;color:var(--dp-text-2)}

.dp-mp__split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--dp-s7);align-items:center}
.dp-mp__split img{display:block;width:100%;height:auto;border-radius:var(--dp-radius-lg)}
.dp-mp__figure{margin:var(--dp-s6) 0 0}
.dp-mp__figure img{display:block;width:100%;height:auto;border-radius:var(--dp-radius-lg)}
.dp-mp__figure figcaption{margin-top:var(--dp-s3);font-size:13px;color:var(--dp-text-2)}

.dp-mp__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--dp-s5);margin-top:var(--dp-s6)}
.dp-mp__card{padding:var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-mp__card h3{margin:0 0 var(--dp-s2);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-mp__card p{margin:0;font-size:var(--dp-fs-small);line-height:1.6;color:var(--dp-text-2)}
.dp-mp__card p + p{margin-top:var(--dp-s3)}
.dp-mp__card h3 a{color:inherit;text-decoration:none}
.dp-mp__card h3 a:hover,.dp-mp__card h3 a:focus{color:var(--dp-primary);text-decoration:underline}

.dp-mp__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--dp-s4);margin-top:var(--dp-s6)}
.dp-mp__opt{padding:var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-mp__opt b{display:block;margin-bottom:var(--dp-s1);font-size:var(--dp-fs-body);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-mp__opt span{font-size:13px;line-height:1.55;color:var(--dp-text-2)}

.dp-mp__faq{display:grid;gap:2px;margin-top:var(--dp-s6);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg);overflow:hidden}
.dp-mp__faq details{background:var(--dp-surface);border-bottom:1px solid var(--dp-line)}
.dp-mp__faq details:last-child{border-bottom:0}
.dp-mp__faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dp-s4);min-height:56px;padding:16px 18px;font-size:var(--dp-fs-body);font-weight:var(--dp-fw-nav);color:var(--dp-text);cursor:pointer;list-style:none}
.dp-mp__faq summary::-webkit-details-marker{display:none}
.dp-mp__faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--dp-primary)}
.dp-mp__faq details[open] summary{background:var(--dp-ground);font-weight:var(--dp-fw-heading)}
.dp-mp__faq details[open] summary::after{content:"\2212"}
.dp-mp__faq .dp-mp__faq-body{padding:0 18px 18px;font-size:var(--dp-fs-small);line-height:1.65;color:var(--dp-text-2)}
.dp-mp__faq .dp-mp__faq-body p{margin:0 0 var(--dp-s3)}
.dp-mp__faq .dp-mp__faq-body p:last-child{margin:0}

.dp-mp__note{margin-top:var(--dp-s4);font-size:13px;line-height:1.6;color:var(--dp-text-2)}
.dp-mp__anchor{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
.dp-mp__opts--single { grid-template-columns: 1fr; }
.dp-mp__narrow { max-width: 420px; }
/* ===== END: Metal Prints page (dp-mp) ===== */

/* ===== START: Negative Scanning page (dp-ns) ===== */
.dp-ns__hero{position:relative;min-height:clamp(420px,46vw,620px);display:flex;align-items:center;overflow:hidden;background:var(--dp-ground)}
.dp-ns__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.dp-ns__hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.97) 0%,rgba(247,248,250,.94) 30%,rgba(247,248,250,.72) 46%,rgba(247,248,250,.28) 64%,rgba(247,248,250,0) 82%)}
.dp-ns__hero-inner{position:relative;width:100%;padding:var(--dp-s9) 0}
.dp-ns__hero-copy{max-width:640px;color:var(--dp-text)}
.dp-ns__hero-copy .dp-eyebrow{color:var(--dp-text-2)}
.dp-ns__h1{margin:0 0 var(--dp-s4);font-size:var(--dp-fs-hero);font-weight:var(--dp-fw-display);line-height:var(--dp-lh-display);letter-spacing:var(--dp-track-display);color:var(--dp-text)}
.dp-ns__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
.dp-ns__hero-proof{margin-top:var(--dp-s6);padding-top:var(--dp-s4);border-top:1px solid var(--dp-line);max-width:520px}
.dp-ns__hero-proof p{margin:0;font-size:13px;line-height:1.55;color:var(--dp-text-2)}
@media (max-width:767.98px){.dp-ns__hero-scrim{background:rgba(247,248,250,.93)}.dp-ns__hero-inner{padding:var(--dp-s8) 0}}

.dp-ns__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--dp-s5);padding:var(--dp-s6) 0;border-top:1px solid var(--dp-line);border-bottom:1px solid var(--dp-line)}
.dp-ns__fact b{display:block;font-size:var(--dp-fs-h4);font-weight:var(--dp-fw-display);line-height:1.15;color:var(--dp-text)}
.dp-ns__fact span{display:block;margin-top:var(--dp-s2);font-size:13px;line-height:1.5;color:var(--dp-text-2)}

.dp-ns__split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--dp-s7);align-items:center}
.dp-ns__figure{margin:var(--dp-s6) 0 0}
.dp-ns__figure img{display:block;width:100%;height:auto;border-radius:var(--dp-radius-lg)}
.dp-ns__figure figcaption{margin-top:var(--dp-s3);font-size:13px;color:var(--dp-text-2)}

.dp-ns__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--dp-s5);margin-top:var(--dp-s6)}
.dp-ns__card{padding:var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-ns__card h3{margin:0 0 var(--dp-s2);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-ns__card p{margin:0;font-size:var(--dp-fs-small);line-height:1.6;color:var(--dp-text-2)}
.dp-ns__card p + p{margin-top:var(--dp-s3)}

.dp-ns__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--dp-s4);margin-top:var(--dp-s6)}
.dp-ns__opt{padding:var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-ns__opt b{display:block;margin-bottom:var(--dp-s1);font-size:var(--dp-fs-body);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-ns__opt span{font-size:13px;line-height:1.55;color:var(--dp-text-2)}

.dp-ns__faq{display:grid;gap:2px;margin-top:var(--dp-s6);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg);overflow:hidden}
.dp-ns__faq details{background:var(--dp-surface);border-bottom:1px solid var(--dp-line)}
.dp-ns__faq details:last-child{border-bottom:0}
.dp-ns__faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dp-s4);min-height:56px;padding:16px 18px;font-size:var(--dp-fs-body);font-weight:var(--dp-fw-nav);color:var(--dp-text);cursor:pointer;list-style:none}
.dp-ns__faq summary::-webkit-details-marker{display:none}
.dp-ns__faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--dp-primary)}
.dp-ns__faq details[open] summary{background:var(--dp-ground);font-weight:var(--dp-fw-heading)}
.dp-ns__faq details[open] summary::after{content:"\2212"}
.dp-ns__faq .dp-ns__faq-body{padding:0 18px 18px;font-size:var(--dp-fs-small);line-height:1.65;color:var(--dp-text-2)}
.dp-ns__faq .dp-ns__faq-body p{margin:0 0 var(--dp-s3)}
.dp-ns__faq .dp-ns__faq-body p:last-child{margin:0}
.dp-ns__faq .dp-ns__faq-body a{color:var(--dp-primary);text-decoration:underline}

.dp-ns__note{margin-top:var(--dp-s4);font-size:13px;line-height:1.6;color:var(--dp-text-2)}
.dp-ns__anchor{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
.dp-ns__urgency{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--dp-s4);margin-top:var(--dp-s6)}
.dp-ns__urgency div{padding:var(--dp-s5);border-left:3px solid var(--dp-primary);background:var(--dp-surface)}
.dp-ns__urgency b{display:block;margin-bottom:var(--dp-s1);font-size:var(--dp-fs-body);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-ns__urgency span{font-size:13px;line-height:1.55;color:var(--dp-text-2)}

.dp-ns__prep{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--dp-s7);margin-top:var(--dp-s6);align-items:start}
@media (max-width:991.98px){.dp-ns__prep{grid-template-columns:1fr}}
.dp-ns__prep > *{min-width:0}
.dp-ns__panel{box-sizing:border-box;min-width:0;max-width:100%;padding:var(--dp-s6);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-ns__panel *{box-sizing:border-box;min-width:0}
@media (max-width:575.98px){.dp-ns__panel{padding:var(--dp-s4)}}
.dp-ns__fs{border:0;padding:0;margin:0 0 var(--dp-s6)}
.dp-ns__fs:last-child{margin-bottom:0}
.dp-ns__fs legend{float:none;width:auto;padding:0;margin:0 0 var(--dp-s3);font-size:var(--dp-fs-eyebrow);font-weight:var(--dp-fw-heading);letter-spacing:var(--dp-track-eyebrow);text-transform:uppercase;color:var(--dp-text-2)}
.dp-ns__rows{display:grid;gap:var(--dp-s2)}
.dp-ns__row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:var(--dp-s3);align-items:center;padding:10px 12px;background:var(--dp-ground);border:1px solid var(--dp-line);border-radius:var(--dp-radius-sm)}
.dp-ns__row label{margin:0;font-size:var(--dp-fs-small);font-weight:var(--dp-fw-nav);color:var(--dp-text)}
.dp-ns__row small{display:block;font-weight:var(--dp-fw-body);color:var(--dp-text-2)}
.dp-ns__row input[type=number]{width:100%;min-height:40px;padding:6px 8px;text-align:center;font-size:var(--dp-fs-body);color:var(--dp-text);background:#fff;border:1px solid var(--dp-control-line);border-radius:var(--dp-radius-sm)}
.dp-ns__choice{display:flex;flex-wrap:wrap;gap:var(--dp-s2)}
.dp-ns__choice label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 14px;font-size:var(--dp-fs-small);color:var(--dp-text);background:var(--dp-ground);border:1px solid var(--dp-line);border-radius:var(--dp-radius-pill);cursor:pointer}
.dp-ns__choice input{margin:0}
.dp-ns__field{display:grid;gap:var(--dp-s2)}
.dp-ns__field label{margin:0;font-size:var(--dp-fs-small);font-weight:var(--dp-fw-nav);color:var(--dp-text)}
.dp-ns__field input[type=text],.dp-ns__field input[type=email],.dp-ns__field input[type=tel],.dp-ns__field textarea{width:100%;min-height:44px;padding:10px 12px;font-size:var(--dp-fs-small);color:var(--dp-text);background:#fff;border:1px solid var(--dp-control-line);border-radius:var(--dp-radius-sm)}
.dp-ns__field textarea{min-height:88px;resize:vertical}
.dp-ns__grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--dp-s4)}
.dp-ns__sum{position:sticky;top:calc(var(--dp-header-h) + 16px)}
.dp-ns__sum h3{margin:0 0 var(--dp-s3);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-ns__sum dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--dp-s4);margin:0 0 var(--dp-s5);font-size:var(--dp-fs-small)}
.dp-ns__sum dt{color:var(--dp-text-2)}
.dp-ns__sum dd{margin:0;color:var(--dp-text);font-weight:var(--dp-fw-nav);text-align:right;overflow-wrap:anywhere}
.dp-ns__sum .dp-ns__total{padding-top:var(--dp-s3);border-top:1px solid var(--dp-line)}
.dp-ns__est{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dp-s4);margin:var(--dp-s3) 0;padding-top:var(--dp-s3);border-top:1px solid var(--dp-line)}
.dp-ns__est span{font-size:var(--dp-fs-small);color:var(--dp-text-2)}
.dp-ns__est b{font-size:var(--dp-fs-h3);font-weight:var(--dp-fw-display);color:var(--dp-text)}
.dp-ns__actions{display:grid;gap:var(--dp-s2);margin-top:var(--dp-s5)}
.dp-ns__msg{margin-top:var(--dp-s3);font-size:13px;color:var(--dp-primary-deep);min-height:18px}
.dp-ns__ticket{display:none}
@media print{
	body:has(.dp-ns__ticket) *{visibility:hidden !important}
	.dp-ns__ticket,.dp-ns__ticket *{visibility:visible !important}
	.dp-ns__ticket{display:block !important;position:absolute;left:0;top:0;width:100%;padding:24px;font-family:Arial,Helvetica,sans-serif;color:#000}
	.dp-ns__ticket h2{font-size:20px;margin:0 0 4px}
	.dp-ns__ticket .dp-ns__tk-sub{font-size:12px;margin:0 0 18px}
	.dp-ns__ticket table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
	.dp-ns__ticket th,.dp-ns__ticket td{border:1px solid #000;padding:6px 8px;text-align:left;vertical-align:top}
	.dp-ns__ticket th{width:34%;background:#eee}
	.dp-ns__ticket .dp-ns__tk-box{border:1px solid #000;padding:10px;font-size:12px}
}
.dp-ns__opts--single { grid-template-columns: 1fr; }
.dp-ns__price-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* ===== END: Negative Scanning page (dp-ns) ===== */
/* ===== START: Curved metal prints collection footer (collection_footer, 26 Sep 2026) ===== */
/* The PDP layout prints collection_footer below the product, outside the page container: each section is a full-width band.
   Reuses .dp-section, .dp-container, .dp-mp__*, .dp-steps from above; only the gallery, finish cards and alignment are new. */
.page-content:has(.dp-cmp),
.page-content > .my-3:has(> .dp-cmp) { margin-bottom: 0 !important; } /* overrides the Bootstrap .mb-10 and .my-3 utilities, which are !important */
.dp-cmp { margin-top: var(--dp-s7); }
/* line the bands up with the product block above (Bootstrap .container, 1400px, 16px padding) */
.dp-cmp .dp-container { max-width: 1400px; padding-left: 16px; padding-right: 16px; }
.dp-cmp .dp-mp__split img { box-shadow: 0 18px 40px -24px rgba(7,26,44,.45); }
.dp-cmp__facts { margin-top: var(--dp-s8); padding-bottom: 0; border-bottom: 0; }
.dp-cmp__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dp-s5); margin-top: var(--dp-s6); }
.dp-cmp__gallery figure { margin: 0; }
.dp-cmp__gallery img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--dp-radius-lg); }
.dp-cmp__gallery figcaption { margin-top: var(--dp-s3); font-size: var(--dp-fs-small); font-weight: var(--dp-fw-heading); color: var(--dp-text); }
.dp-cmp__finishes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-s5); margin-top: var(--dp-s6); }
.dp-cmp__finish { padding: var(--dp-s5); background: var(--dp-surface); border: 1px solid var(--dp-line); border-radius: var(--dp-radius-lg); text-align: center; }
.dp-cmp__finish img { display: block; width: 100%; max-width: 200px; height: auto; margin: 0 auto var(--dp-s4); border-radius: 50%; }
.dp-cmp__finish h3 { margin: 0 0 var(--dp-s2); font-size: var(--dp-fs-title); font-weight: var(--dp-fw-heading); color: var(--dp-text); }
.dp-cmp__finish p { margin: 0; font-size: var(--dp-fs-small); line-height: 1.6; color: var(--dp-text-2); }
.dp-cmp .dp-mp__faq { max-width: 860px; }
@media (max-width: 991.98px) {
	.dp-cmp__finishes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
	.dp-cmp { margin-top: var(--dp-s5); }
	.dp-cmp__facts { margin-top: var(--dp-s6); }
	.dp-cmp__gallery { grid-template-columns: 1fr 1fr; gap: var(--dp-s3); }
	.dp-cmp__gallery figure:last-child { grid-column: 1 / -1; }
	.dp-cmp__gallery figure:last-child img { aspect-ratio: 16 / 10; }
	.dp-cmp .dp-mp__anchor .dp-btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 479.98px) {
	.dp-cmp__finishes { grid-template-columns: 1fr; gap: var(--dp-s3); }
	.dp-cmp__finish { display: grid; grid-template-columns: 88px 1fr; column-gap: var(--dp-s4); align-items: center; text-align: left; padding: var(--dp-s4); }
	.dp-cmp__finish img { max-width: 88px; margin: 0; grid-row: 1 / span 2; }
}
/* ===== END: Curved metal prints collection footer ===== */
/* ===== START: Photo Books page (dp-pb) ===== */
/* Added 10 Oct 2026 for /site/photo-books. Replaces the old dp-bookgrid style block that sat in the page. Every selector starts with .dp-pb. */
.dp-pb__hero{position:relative;min-height:clamp(420px,46vw,620px);display:flex;align-items:center;overflow:hidden;background:var(--dp-ground)}
.dp-pb__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.dp-pb__hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,248,250,.97) 0%,rgba(247,248,250,.94) 30%,rgba(247,248,250,.72) 46%,rgba(247,248,250,.28) 64%,rgba(247,248,250,0) 82%)}
.dp-pb__hero-inner{position:relative;width:100%;padding:var(--dp-s9) 0}
.dp-pb__hero-copy{max-width:640px;color:var(--dp-text)}
.dp-pb__hero-copy .dp-eyebrow{color:var(--dp-text-2)}
.dp-pb__h1{margin:0 0 var(--dp-s4);font-size:var(--dp-fs-hero);font-weight:var(--dp-fw-display);line-height:var(--dp-lh-display);letter-spacing:var(--dp-track-display);color:var(--dp-text)}
.dp-pb__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
.dp-pb__hero-proof{margin-top:var(--dp-s6);padding-top:var(--dp-s4);border-top:1px solid var(--dp-line);max-width:520px}
.dp-pb__hero-quote{margin:0 0 var(--dp-s1);font-size:var(--dp-fs-small);line-height:1.5;color:var(--dp-text)}
.dp-pb__hero-attrib{margin:0;font-size:13px;color:var(--dp-text-2)}
@media (max-width:767.98px){.dp-pb__hero-scrim{background:rgba(247,248,250,.93)}.dp-pb__hero-inner{padding:var(--dp-s8) 0}}

.dp-pb__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--dp-s5);padding:var(--dp-s6) 0;border-top:1px solid var(--dp-line);border-bottom:1px solid var(--dp-line)}
.dp-pb__fact b{display:block;font-size:var(--dp-fs-h4);font-weight:var(--dp-fw-display);line-height:1.15;color:var(--dp-text)}
.dp-pb__fact span{display:block;margin-top:var(--dp-s2);font-size:13px;line-height:1.5;color:var(--dp-text-2)}

.dp-pb__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--dp-s5);margin-top:var(--dp-s6)}
.dp-pb__cards--single{grid-template-columns:1fr}
.dp-pb__card{padding:var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-pb__card h3{margin:0 0 var(--dp-s2);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-pb__card p{margin:0;font-size:var(--dp-fs-small);line-height:1.6;color:var(--dp-text-2)}
.dp-pb__card h3 a{color:inherit;text-decoration:none}
.dp-pb__card h3 a:hover,.dp-pb__card h3 a:focus{color:var(--dp-primary);text-decoration:underline}
.dp-pb__anchor{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}

.dp-pb__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--dp-s5);align-items:stretch;margin-top:var(--dp-s6)}
@media (max-width:1199.98px){.dp-pb__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.dp-pb__grid{grid-template-columns:minmax(0,1fr)}}
.dp-pb__book{display:flex;flex-direction:column;height:100%;background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg);overflow:hidden;text-decoration:none;color:inherit;transition:border-color var(--dp-dur) var(--dp-ease),box-shadow var(--dp-dur) var(--dp-ease)}
.dp-pb__book:hover,.dp-pb__book:focus{border-color:var(--dp-text);box-shadow:0 0 0 1px var(--dp-text);text-decoration:none;color:inherit}
.dp-pb__book-media{width:100%;aspect-ratio:1 / 1;background:var(--dp-ground);overflow:hidden}
.dp-pb__book-media img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;margin:0}
.dp-pb__book-body{display:flex;flex-direction:column;flex:1 1 auto;padding:var(--dp-s5)}
.dp-pb__book-title{margin:0 0 var(--dp-s2);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);line-height:var(--dp-lh-heading);color:var(--dp-text)}
.dp-pb__book-text{flex:1 1 auto;margin:0 0 var(--dp-s4);font-size:var(--dp-fs-small);line-height:1.6;color:var(--dp-text-2)}
.dp-pb__book-more{margin:0;font-weight:var(--dp-fw-heading);color:var(--dp-primary)}
.dp-pb__book-flag{align-self:flex-start;margin:0 0 var(--dp-s3);padding:2px var(--dp-s2);font-size:var(--dp-fs-eyebrow);font-weight:var(--dp-fw-heading);letter-spacing:var(--dp-track-eyebrow);text-transform:uppercase;color:var(--dp-text-2);background:var(--dp-ground);border:1px solid var(--dp-line);border-radius:var(--dp-radius-sm)}
.dp-pb__book--soon .dp-pb__book-media img{opacity:.85}

.dp-pb .dp-table th[scope="row"]{white-space:nowrap;font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-pb .dp-table td{vertical-align:top}

.dp-pb__split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--dp-s7);align-items:center}
.dp-pb__figure{margin:0}
.dp-pb__figure img{display:block;width:100%;height:auto;max-width:560px;border-radius:var(--dp-radius-lg)}

.dp-pb__faq{display:grid;gap:2px;margin-top:var(--dp-s6);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg);overflow:hidden}
.dp-pb__faq details{background:var(--dp-surface);border-bottom:1px solid var(--dp-line)}
.dp-pb__faq details:last-child{border-bottom:0}
.dp-pb__faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dp-s4);min-height:56px;padding:16px 18px;font-size:var(--dp-fs-body);font-weight:var(--dp-fw-nav);color:var(--dp-text);cursor:pointer;list-style:none}
.dp-pb__faq summary::-webkit-details-marker{display:none}
.dp-pb__faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--dp-primary)}
.dp-pb__faq details[open] summary{background:var(--dp-ground);font-weight:var(--dp-fw-heading)}
.dp-pb__faq details[open] summary::after{content:"\2212"}
.dp-pb__faq .dp-pb__faq-body{padding:0 18px 18px;font-size:var(--dp-fs-small);line-height:1.65;color:var(--dp-text-2)}
.dp-pb__faq .dp-pb__faq-body p{margin:0}
/* ===== END: Photo Books page (dp-pb) ===== */
/* ===== START: Home page finish (dp-home) ===== */
/* Added 10 Oct 2026. Part 1 is the hero overlay that used to sit in a style block inside website/homepage (15 Sep v2), moved here, scoped to .dp-home__hero, hex colors swapped for tokens. Part 2 is the home FAQ. */
.dp-home__hero .dp-hero__scrim{background:linear-gradient(90deg,rgba(247,245,241,.97) 0%,rgba(247,245,241,.94) 28%,rgba(247,245,241,.78) 44%,rgba(247,245,241,.34) 64%,rgba(247,245,241,0) 82%) !important}
.dp-home__hero .dp-hero__copy,
.dp-home__hero .dp-hero__title,
.dp-home__hero .dp-hero__lede,
.dp-home__hero .dp-hero__quote{color:var(--dp-text) !important}
.dp-home__hero .dp-eyebrow{color:var(--dp-text-2) !important}
.dp-home__hero .dp-hero__attrib{color:var(--dp-text-2) !important}
.dp-home__hero .dp-hero__proof{border-top-color:rgba(22,32,43,.18) !important}
.dp-home__hero .dp-btn--outline{color:var(--dp-text) !important;border-color:rgba(22,32,43,.45) !important;background:transparent !important}
.dp-home__hero .dp-btn--outline:hover,
.dp-home__hero .dp-btn--outline:focus{color:var(--dp-surface) !important;background:var(--dp-text) !important;border-color:var(--dp-text) !important}
@media (max-width:767.98px){.dp-home__hero .dp-hero__scrim{background:rgba(247,245,241,.93) !important}}

.dp-home__faq{display:grid;gap:2px;margin-top:var(--dp-s6);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg);overflow:hidden}
.dp-home__faq details{background:var(--dp-surface);border-bottom:1px solid var(--dp-line)}
.dp-home__faq details:last-child{border-bottom:0}
.dp-home__faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dp-s4);min-height:56px;padding:16px 18px;font-size:var(--dp-fs-body);font-weight:var(--dp-fw-nav);color:var(--dp-text);cursor:pointer;list-style:none}
.dp-home__faq summary::-webkit-details-marker{display:none}
.dp-home__faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--dp-primary)}
.dp-home__faq details[open] summary{background:var(--dp-ground);font-weight:var(--dp-fw-heading)}
.dp-home__faq details[open] summary::after{content:"\2212"}
.dp-home__faq .dp-home__faq-body{padding:0 18px 18px;font-size:var(--dp-fs-small);line-height:1.65;color:var(--dp-text-2)}
.dp-home__faq .dp-home__faq-body p{margin:0 0 var(--dp-s3)}
.dp-home__faq .dp-home__faq-body p:last-child{margin:0}
.dp-home__anchor{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
/* ===== END: Home page finish (dp-home) ===== */
/* ===== START: B&W prints preview ===== */
body:has(.breadcrumb-item a[href="/site/shop/prints/black-white-prints"]) .px-product-gallery .px-item:has(> px-design-preview) {
	filter: grayscale(1);
}
/* ===== END: B&W prints preview ===== */
/* ===== START: Home page (dp-hm) ===== */
/* Added 3 Nov 2026. Rotating banner, fact strip, about, FAQ and anchor rows for the
   home page. Everything else on the home page uses the existing shared home styles
   (Home hero, Signature products, Who we serve, Why Diversified, How ordering works,
   Social proof, Closing CTA). Every selector starts with .dp-hm. */
.dp-hm__banner{position:relative;background:var(--dp-ink)}
.dp-hm__banner .dp-hero{min-height:clamp(520px,44vw,640px);display:flex;align-items:center}
.dp-hm__banner .dp-hero__inner{width:100%}
.dp-hm__banner .dp-hero__title{font-size:var(--dp-fs-display)}
.dp-hm__banner .carousel-indicators{margin-bottom:var(--dp-s4)}
.dp-hm__banner .carousel-control-prev,.dp-hm__banner .carousel-control-next{top:auto;bottom:var(--dp-s3);width:var(--dp-tap);height:var(--dp-tap);opacity:.8}
.dp-hm__banner .carousel-control-prev{left:auto;right:calc(var(--dp-tap) + var(--dp-s4))}
.dp-hm__banner .carousel-control-next{right:var(--dp-s3)}
@media (max-width:991.98px){
	.dp-hm__banner .dp-hero{min-height:600px;align-items:stretch}
	.dp-hm__banner .dp-hero__inner{padding-bottom:var(--dp-s8)}
	.dp-hm__banner .dp-hm__slide--plain .dp-hero__inner{padding-top:var(--dp-s8)}
}

.dp-hm__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--dp-s5);padding:var(--dp-s6) 0;border-top:1px solid var(--dp-line);border-bottom:1px solid var(--dp-line)}
.dp-hm__fact b{display:block;font-size:var(--dp-fs-h4);font-weight:var(--dp-fw-display);line-height:1.15;color:var(--dp-text)}
.dp-hm__fact span{display:block;margin-top:var(--dp-s2);font-size:13px;line-height:1.5;color:var(--dp-text-2)}

.dp-hm__more{color:var(--dp-primary)}
.dp-hm__about-grid{display:grid;grid-template-columns:1fr;gap:var(--dp-s6);align-items:center}
@media (min-width:992px){.dp-hm__about-grid{grid-template-columns:1.1fr 1fr;gap:var(--dp-s7)}}
.dp-hm__about{max-width:760px}
.dp-hm__about-img{margin:0}
.dp-hm__about-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--dp-radius)}
.dp-hm__about .dp-lede{margin-bottom:var(--dp-s5)}

.dp-hm__faq{display:grid;gap:2px;margin-top:var(--dp-s6);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg);overflow:hidden}
.dp-hm__faq details{background:var(--dp-surface);border-bottom:1px solid var(--dp-line)}
.dp-hm__faq details:last-child{border-bottom:0}
.dp-hm__faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dp-s4);min-height:56px;padding:16px 18px;font-size:var(--dp-fs-body);font-weight:var(--dp-fw-nav);color:var(--dp-text);cursor:pointer;list-style:none}
.dp-hm__faq summary::-webkit-details-marker{display:none}
.dp-hm__faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--dp-primary)}
.dp-hm__faq details[open] summary{background:var(--dp-ground);font-weight:var(--dp-fw-heading)}
.dp-hm__faq details[open] summary::after{content:"\2212"}
.dp-hm__faq .dp-hm__faq-body{padding:0 18px 18px;font-size:var(--dp-fs-small);line-height:1.65;color:var(--dp-text-2)}
.dp-hm__faq .dp-hm__faq-body p{margin:0 0 var(--dp-s3)}
.dp-hm__faq .dp-hm__faq-body p:last-child{margin:0}
.dp-hm__faq .dp-hm__faq-body a{color:var(--dp-primary)}

.dp-hm__anchor{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
/* Space between home page sections (Aaron's rule): 48px computer, 20px tablet, 16px phone.
   Each section carries half above and half below, so two neighbours add up to exactly that. */
.dp-hm__sec{padding-top:24px;padding-bottom:24px}
@media (max-width:991.98px){.dp-hm__sec{padding-top:10px;padding-bottom:10px}}
@media (max-width:575.98px){.dp-hm__sec{padding-top:8px;padding-bottom:8px}}
.dp-hm__band{margin:0;background:var(--dp-ground)}
.dp-hm__band img{display:block;width:100%;height:clamp(240px,32vw,460px);object-fit:cover}
/* Why Diversified: heading stays in view on computers; points are tight white cards with blue text */
@media (min-width:992px){.dp-hm__why-lead{position:sticky;top:calc(var(--dp-header-h) + 24px)}}
.dp-hm__why .dp-why__list{gap:8px}
.dp-hm__why .dp-why__item{padding:12px 16px;background:var(--dp-surface);border-left:3px solid var(--dp-sky)}
.dp-hm__why .dp-why__title{margin:0 0 2px;line-height:1.3;color:var(--dp-primary)}
.dp-hm__why .dp-btn--primary{background:var(--dp-sky);border-color:var(--dp-sky);color:var(--dp-ink)}
.dp-hm__why .dp-btn--primary:hover,.dp-hm__why .dp-btn--primary:focus{background:var(--dp-sky-200);border-color:var(--dp-sky-200);color:var(--dp-ink)}
.dp-hm__why .dp-why__item .dp-small{margin:0;color:var(--dp-primary-deep)}
.dp-hm__social-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--dp-s5)}
.dp-hm__social-links{display:flex;flex-wrap:wrap;gap:var(--dp-s3)}
.dp-hm__social-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--dp-primary);color:var(--dp-surface);transition:background var(--dp-dur-fast) var(--dp-ease)}
.dp-hm__social-icon:hover,.dp-hm__social-icon:focus{background:var(--dp-primary-hover);color:var(--dp-surface)}
.dp-hm__social-icon svg{display:block;width:24px;height:24px}
.dp-hm__social-feed{min-height:200px}
/* Quotes shown as framed and matted pieces. Frame colors (--dp-frame-*) are for these frames only. */
.dp-hm__frames{gap:var(--dp-s6)}
.dp-hm__frame.dp-quote{display:flex;padding:6px;border:18px solid var(--dp-ink);border-radius:0;box-shadow:0 18px 26px -18px var(--dp-ink)}
.dp-hm__mat{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:var(--dp-s7) var(--dp-s6);background:var(--dp-surface);box-shadow:inset 0 2px 5px -1px var(--dp-ink-muted);text-align:center}
.dp-hm__mat::before{content:"";position:absolute;inset:14px;border:1px solid var(--dp-line);pointer-events:none}
.dp-hm__frame--gold.dp-quote{border-width:20px;border-image:linear-gradient(135deg,var(--dp-frame-gold-dark),var(--dp-frame-gold-light) 22%,var(--dp-frame-gold) 45%,var(--dp-frame-gold-light) 68%,var(--dp-frame-gold-dark)) 1;background:var(--dp-frame-gold-dark)}
.dp-hm__frame--silver.dp-quote{border-width:12px;padding:5px;border-image:linear-gradient(135deg,var(--dp-frame-silver-dark),var(--dp-frame-silver-light) 22%,var(--dp-frame-silver) 45%,var(--dp-frame-silver-light) 68%,var(--dp-frame-silver-dark)) 1;background:var(--dp-primary)}
.dp-hm__frame--silver .dp-hm__mat{background:var(--dp-sky-100)}
.dp-hm__frame--silver .dp-hm__mat::before{border-color:var(--dp-surface)}
.dp-hm__frame--wood.dp-quote{border-width:24px;padding:7px;border-image:linear-gradient(135deg,var(--dp-frame-wood-dark),var(--dp-frame-wood) 18%,var(--dp-frame-wood-light) 30%,var(--dp-frame-wood) 42%,var(--dp-frame-wood-dark) 55%,var(--dp-frame-wood) 70%,var(--dp-frame-wood-light) 84%,var(--dp-frame-wood-dark)) 1;background:linear-gradient(135deg,var(--dp-frame-gold-dark),var(--dp-frame-gold-light) 40%,var(--dp-frame-gold) 70%,var(--dp-frame-gold-dark))}
.dp-hm__mat blockquote{font-style:italic}
.dp-hm__mat figcaption b{display:inline-block;margin-bottom:var(--dp-s1);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:22px;color:var(--dp-primary)}
.dp-hm__mat figcaption{padding-top:var(--dp-s4);border-top:2px solid var(--dp-sky);display:inline-block;align-self:center}
@media (max-width:575.98px){.dp-hm__frame.dp-quote{border-width:12px}.dp-hm__mat{padding:var(--dp-s6) var(--dp-s5)}.dp-hm__mat::before{inset:10px}}
.dp-hm__custom-grid{display:grid;grid-template-columns:1fr;gap:var(--dp-s6);align-items:center}
@media (min-width:992px){.dp-hm__custom-grid{grid-template-columns:1fr 1.1fr;gap:var(--dp-s7)}}
.dp-hm__custom-img{margin:0}
.dp-hm__custom-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--dp-radius);background:var(--dp-ground)}
.dp-hm__custom-list{margin:var(--dp-s5) 0;padding:0;list-style:none}
.dp-hm__custom-list li{padding:var(--dp-s3) 0;border-top:1px solid var(--dp-line)}
.dp-hm__custom-list li:last-child{border-bottom:1px solid var(--dp-line)}
.dp-hm__custom-list .dp-title{margin-bottom:var(--dp-s1)}
/* Ordering tips: light Arctic background with white tip cards */
.dp-hm__upfront{background:var(--dp-sky-100)}
.dp-hm__upfront .dp-why__list{gap:var(--dp-s3)}
.dp-hm__upfront .dp-why__item{background:var(--dp-surface);border-left:3px solid var(--dp-sky)}
.dp-hm__upfront .dp-why__title{color:var(--dp-text)}
.dp-hm__upfront .dp-small{color:var(--dp-text-2)}
.dp-hm__upfront .dp-why__item a{color:var(--dp-primary);text-decoration:underline}
@media (min-width:992px){.dp-hm__steps{grid-template-columns:repeat(5,1fr)}}
.dp-hm__step-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:var(--dp-s4);border-radius:50%;background:var(--dp-ground);color:var(--dp-primary)}
.dp-hm__step-icon svg{display:block;width:28px;height:28px}
.dp-hm__step-icons{display:flex;gap:var(--dp-s2)}
.dp-hm__step-icons .dp-hm__step-icon{flex:none}
.dp-hm__step-icon svg [stroke]{stroke:var(--dp-primary)}
.dp-hm__step-icon svg [fill]:not([fill="none"]){fill:var(--dp-sky)}
.dp-hm__serve .dp-title,.dp-hm__serve .dp-card__text{display:block}
.dp-hm__tile-row{display:flex;align-items:center;gap:var(--dp-s5)}
.dp-hm__sec .dp-tile--text:has(.dp-hm__tile-img){position:relative;overflow:hidden}
.dp-hm__tile-img{position:absolute;top:0;bottom:0;display:block;width:172px;height:100%;object-fit:cover}
.dp-hm__tile-img:first-child{left:0}
.dp-hm__tile-img:last-child{right:0}
.dp-hm__sec .dp-tile--text:has(.dp-hm__tile-img:first-child){padding-left:196px}
.dp-hm__sec .dp-tile--text:has(.dp-hm__tile-img:last-child){padding-right:196px}
@media (max-width:575.98px){.dp-hm__tile-row{gap:var(--dp-s4)}.dp-hm__tile-img{width:112px}.dp-hm__sec .dp-tile--text:has(.dp-hm__tile-img:first-child){padding-left:136px}.dp-hm__sec .dp-tile--text:has(.dp-hm__tile-img:last-child){padding-right:136px}}
/* 11 Nov 2026: show the whole Custom Framing photo, no crop */
.dp-hm__sec .dp-tile[href="/site/custom-framing"] .dp-card__media img{height:auto;aspect-ratio:7/6}
/* 11 Nov 2026: Need help line under the steps on one line */
.dp-hm__help.dp-body { max-width: none; }
/* ===== END: Home page (dp-hm) ===== */
/* ===== START: Frame colors (approved by Aaron 4 Nov 2026) ===== */
/* Gold, silver and wood shades for the framed quotes on the home page.
   FRAMES ONLY. Do not use these anywhere else without Aaron's approval. */
:root {
	--dp-frame-gold-dark: #8A6A24;
	--dp-frame-gold: #C9A44C;
	--dp-frame-gold-light: #F1DC9C;
	--dp-frame-silver-dark: #7B828A;
	--dp-frame-silver: #BFC5CC;
	--dp-frame-silver-light: #F3F5F7;
	--dp-frame-wood-dark: #4E321D;
	--dp-frame-wood: #7A4E2D;
	--dp-frame-wood-light: #9C6B3F;
}
/* ===== END: Frame colors ===== */
/* ===== START: Announcement bar (dp-promo) ===== */
.dp-promo__link,.dp-promo__link:visited{color:var(--dp-surface);text-decoration:underline;font-weight:600}
.dp-promo__link:hover,.dp-promo__link:focus{color:var(--dp-sky-200);text-decoration:underline}
/* ===== END: Announcement bar (dp-promo) ===== */

/* ===== START: Custom Framing page (dp-cf) ===== */
/* Added 9 Nov 2026. Every selector starts .dp-cf. Inert on every other page. */
.dp-cf__hero{padding:var(--dp-s8) 0;background:var(--dp-ground)}
.dp-cf__hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--dp-s7);align-items:center}
@media (max-width:991.98px){.dp-cf__hero-grid{grid-template-columns:1fr}}
.dp-cf__hero-copy .dp-eyebrow{color:var(--dp-text-2)}
.dp-cf__h1{margin:0 0 var(--dp-s4);font-size:var(--dp-fs-hero);font-weight:var(--dp-fw-display);line-height:var(--dp-lh-display);letter-spacing:var(--dp-track-display);color:var(--dp-text)}
.dp-cf__hero-ctas{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
.dp-cf__hero-proof{margin-top:var(--dp-s6);padding-top:var(--dp-s4);border-top:1px solid var(--dp-line);max-width:520px}
.dp-cf__hero-proof p{margin:0;font-size:13px;line-height:1.55;color:var(--dp-text-2)}
.dp-cf__hero-fig{margin:0}
.dp-cf__hero-fig img{display:block;width:100%;height:auto;border-radius:var(--dp-radius-lg)}

.dp-cf__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--dp-s5);padding:var(--dp-s6) 0;border-top:1px solid var(--dp-line);border-bottom:1px solid var(--dp-line)}
.dp-cf__fact b{display:block;font-size:var(--dp-fs-h4);font-weight:var(--dp-fw-display);line-height:1.15;color:var(--dp-text)}
.dp-cf__fact span{display:block;margin-top:var(--dp-s2);font-size:13px;line-height:1.5;color:var(--dp-text-2)}

.dp-cf__urgency{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--dp-s4);margin-top:var(--dp-s6)}
.dp-cf__urgency div{padding:var(--dp-s5);border-left:3px solid var(--dp-primary);background:var(--dp-surface)}
.dp-cf__urgency b{display:block;margin-bottom:var(--dp-s1);font-size:var(--dp-fs-body);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-cf__urgency span{font-size:13px;line-height:1.55;color:var(--dp-text-2)}

.dp-cf__anchor{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}

.dp-cf__opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--dp-s4);margin-top:var(--dp-s6)}
.dp-cf__opt{padding:var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-cf__opt b{display:block;margin-bottom:var(--dp-s1);font-size:var(--dp-fs-body);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-cf__opt span{font-size:13px;line-height:1.55;color:var(--dp-text-2)}
.dp-cf__opts--single{grid-template-columns:1fr}

.dp-cf__table{margin-top:var(--dp-s6)}
.dp-cf__table th[scope=row]{width:28%;font-weight:var(--dp-fw-heading);color:var(--dp-text)}

.dp-cf__split{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--dp-s7);align-items:start}
.dp-cf__visit{padding:var(--dp-s6);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-cf__visit h3{margin:0 0 var(--dp-s3);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-cf__visit p{margin:0 0 var(--dp-s3);font-size:var(--dp-fs-small);line-height:1.6;color:var(--dp-text-2)}
.dp-cf__visit .dp-btn{margin-top:var(--dp-s2)}

.dp-cf__steps{margin-top:var(--dp-s6)}

.dp-cf__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--dp-s5);margin-top:var(--dp-s6)}
.dp-cf__card{padding:var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-cf__card h3{margin:0 0 var(--dp-s2);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-cf__card p{margin:0;font-size:var(--dp-fs-small);line-height:1.6;color:var(--dp-text-2)}
.dp-cf__card h3 a{color:inherit;text-decoration:none}
.dp-cf__card h3 a:hover,.dp-cf__card h3 a:focus{color:var(--dp-primary);text-decoration:underline}

.dp-cf__plan{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--dp-s7);margin-top:var(--dp-s6);align-items:start}
@media (max-width:991.98px){.dp-cf__plan{grid-template-columns:1fr}}
.dp-cf__plan > *{min-width:0}
.dp-cf__panel{box-sizing:border-box;min-width:0;max-width:100%;padding:var(--dp-s6);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg)}
.dp-cf__panel *{box-sizing:border-box;min-width:0}
@media (max-width:575.98px){.dp-cf__panel{padding:var(--dp-s4)}}
.dp-cf__fs{border:0;padding:0;margin:0 0 var(--dp-s6)}
.dp-cf__fs:last-child{margin-bottom:0}
.dp-cf__fs legend{float:none;width:auto;padding:0;margin:0 0 var(--dp-s3);font-size:var(--dp-fs-eyebrow);font-weight:var(--dp-fw-heading);letter-spacing:var(--dp-track-eyebrow);text-transform:uppercase;color:var(--dp-text-2)}
.dp-cf__choice{display:flex;flex-wrap:wrap;gap:var(--dp-s2)}
.dp-cf__choice label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 14px;font-size:var(--dp-fs-small);color:var(--dp-text);background:var(--dp-ground);border:1px solid var(--dp-line);border-radius:var(--dp-radius-pill);cursor:pointer}
.dp-cf__choice input{margin:0}
.dp-cf__grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--dp-s4)}
.dp-cf__field{display:grid;gap:var(--dp-s2)}
.dp-cf__field label{margin:0;font-size:var(--dp-fs-small);font-weight:var(--dp-fw-nav);color:var(--dp-text)}
.dp-cf__field input,.dp-cf__field textarea{width:100%;min-height:44px;padding:10px 12px;font-size:var(--dp-fs-small);color:var(--dp-text);background:var(--dp-surface);border:1px solid var(--dp-control-line);border-radius:var(--dp-radius-sm)}
.dp-cf__field textarea{min-height:88px;resize:vertical}
.dp-cf__sum{position:sticky;top:calc(var(--dp-header-h) + 16px)}
.dp-cf__sum h3{margin:0 0 var(--dp-s3);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);color:var(--dp-text)}
.dp-cf__sum dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--dp-s4);margin:0 0 var(--dp-s5);font-size:var(--dp-fs-small)}
.dp-cf__sum dt{color:var(--dp-text-2)}
.dp-cf__sum dd{margin:0;color:var(--dp-text);font-weight:var(--dp-fw-nav);text-align:right;overflow-wrap:anywhere}
.dp-cf__actions{display:grid;gap:var(--dp-s2);margin-top:var(--dp-s5)}
.dp-cf__msg{margin-top:var(--dp-s3);font-size:13px;color:var(--dp-primary-deep);min-height:18px}

.dp-cf__faq{display:grid;gap:2px;margin-top:var(--dp-s6);border:1px solid var(--dp-line);border-radius:var(--dp-radius-lg);overflow:hidden}
.dp-cf__faq details{background:var(--dp-surface);border-bottom:1px solid var(--dp-line)}
.dp-cf__faq details:last-child{border-bottom:0}
.dp-cf__faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dp-s4);min-height:56px;padding:16px 18px;font-size:var(--dp-fs-body);font-weight:var(--dp-fw-nav);color:var(--dp-text);cursor:pointer;list-style:none}
.dp-cf__faq summary::-webkit-details-marker{display:none}
.dp-cf__faq summary::after{content:"+";flex:none;font-size:20px;line-height:1;color:var(--dp-primary)}
.dp-cf__faq details[open] summary{background:var(--dp-ground);font-weight:var(--dp-fw-heading)}
.dp-cf__faq details[open] summary::after{content:"\2212"}
.dp-cf__faq .dp-cf__faq-body{padding:0 18px 18px;font-size:var(--dp-fs-small);line-height:1.65;color:var(--dp-text-2)}
.dp-cf__faq .dp-cf__faq-body p{margin:0}

.dp-cf__sheet{display:none}
@media print{
	body:has(.dp-cf__sheet) *{visibility:hidden !important}
	.dp-cf__sheet,.dp-cf__sheet *{visibility:visible !important}
	.dp-cf__sheet{display:block !important;position:absolute;left:0;top:0;width:100%;padding:24px;font-family:Arial,Helvetica,sans-serif;color:var(--dp-text)}
	.dp-cf__sheet h2{font-size:20px;margin:0 0 4px}
	.dp-cf__sheet .dp-cf__sheet-sub{font-size:12px;margin:0 0 18px}
	.dp-cf__sheet table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
	.dp-cf__sheet th,.dp-cf__sheet td{border:1px solid var(--dp-text);padding:6px 8px;text-align:left;vertical-align:top}
	.dp-cf__sheet th{width:34%;background:var(--dp-ground)}
}
/* ===== END: Custom Framing page (dp-cf) ===== */

/* ===== START: Pro Services pages (dp-ps) ===== */
/* Added 12 Nov 2026. One shared layout for the eight Pro Services pages. Every selector starts .dp-ps. Inert on every other page. */
.dp-ps__hero{padding:var(--dp-s7) 0 var(--dp-s8)}
.dp-ps__hero-copy{max-width:760px}
.dp-ps__h1{margin:0 0 var(--dp-s4);font-size:var(--dp-fs-hero);font-weight:var(--dp-fw-display);line-height:var(--dp-lh-display);letter-spacing:var(--dp-track-display);color:var(--dp-text)}
.dp-ps__ctas{display:flex;flex-wrap:wrap;gap:var(--dp-s3);margin-top:var(--dp-s6)}
.dp-ps__proof{margin:var(--dp-s6) 0 0;padding-top:var(--dp-s4);border-top:1px solid var(--dp-line);max-width:520px;font-size:13px;line-height:1.55;color:var(--dp-text-2)}

.dp-ps__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--dp-s5);padding:var(--dp-s6) 0;border-top:1px solid var(--dp-line);border-bottom:1px solid var(--dp-line)}
.dp-ps__fact b{display:block;font-size:var(--dp-fs-h4);font-weight:var(--dp-fw-display);line-height:1.15;color:var(--dp-primary)}
.dp-ps__fact span{display:block;margin-top:var(--dp-s2);font-size:13px;line-height:1.5;color:var(--dp-text-2)}

.dp-ps__split{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--dp-s7);align-items:center}
.dp-ps__fig{margin:0}
.dp-ps__fig img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--dp-radius-lg);box-shadow:var(--dp-shadow-1)}
.dp-ps__fig--a img{aspect-ratio:4/3}
.dp-ps__fig--b img{aspect-ratio:3/2}

.dp-ps__list{list-style:none;margin:var(--dp-s5) 0 0;padding:0;display:grid;gap:var(--dp-s3)}
.dp-ps__list li{position:relative;padding-left:30px;font-size:var(--dp-fs-body);line-height:1.55;color:var(--dp-text)}
.dp-ps__list li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--dp-sky-100);box-shadow:inset 0 0 0 1px var(--dp-sky-200)}
.dp-ps__list li::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:9px;border:solid var(--dp-primary);border-width:0 2px 2px 0;transform:rotate(45deg)}

.dp-ps__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--dp-s5);margin-top:var(--dp-s6)}
.dp-ps__card{display:flex;flex-direction:column;padding:var(--dp-s6) var(--dp-s5);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:12px;transition:box-shadow .2s,transform .2s}
.dp-ps__card:hover{box-shadow:var(--dp-shadow-2);transform:translateY(-2px)}
.dp-ps__card-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:var(--dp-s4);border-radius:50%;background:var(--dp-sky-100);color:var(--dp-primary);font-size:14px;font-weight:var(--dp-fw-display)}
.dp-ps__card h3{margin:0 0 var(--dp-s2);font-size:var(--dp-fs-title);font-weight:var(--dp-fw-heading);line-height:1.3;color:var(--dp-text)}
.dp-ps__card p{flex:1;margin:0 0 var(--dp-s4);font-size:var(--dp-fs-small);line-height:1.6;color:var(--dp-text-2)}
.dp-ps__card a{font-size:var(--dp-fs-small);font-weight:var(--dp-fw-heading);color:var(--dp-primary);text-decoration:none}
.dp-ps__card a:hover,.dp-ps__card a:focus{text-decoration:underline}

.dp-ps__quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dp-s5);margin-top:var(--dp-s6)}
.dp-ps__quote{display:flex;flex-direction:column;margin:0;padding:var(--dp-s6);background:var(--dp-surface);border:1px solid var(--dp-line);border-radius:16px;box-shadow:var(--dp-shadow-1)}
.dp-ps__quote-mark{display:block;height:34px;margin-bottom:var(--dp-s2);font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--dp-sky)}
.dp-ps__quote blockquote{flex:1;margin:0 0 var(--dp-s5);padding:0;border:0;font-size:var(--dp-fs-body);line-height:1.65;color:var(--dp-text)}
.dp-ps__quote figcaption{padding-top:var(--dp-s4);border-top:1px solid var(--dp-line);font-size:13px;line-height:1.5;color:var(--dp-text-2)}
.dp-ps__quote figcaption b{display:block;font-size:var(--dp-fs-small);font-weight:var(--dp-fw-heading);color:var(--dp-text)}

.dp-ps__faq{margin-top:var(--dp-s6);border:1px solid var(--dp-line);border-radius:12px;overflow:hidden;background:var(--dp-surface)}
.dp-ps__faq details{border-bottom:1px solid var(--dp-line)}
.dp-ps__faq details:last-child{border-bottom:0}
.dp-ps__faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--dp-s4);min-height:56px;padding:16px 20px;font-size:var(--dp-fs-body);font-weight:var(--dp-fw-nav);color:var(--dp-text);cursor:pointer;list-style:none}
.dp-ps__faq summary::-webkit-details-marker{display:none}
.dp-ps__faq summary::after{content:"+";flex:none;font-size:22px;line-height:1;color:var(--dp-primary)}
.dp-ps__faq details[open] summary{background:var(--dp-ground);font-weight:var(--dp-fw-heading)}
.dp-ps__faq details[open] summary::after{content:"\2212"}
.dp-ps__faq-body{padding:4px 20px 20px;font-size:var(--dp-fs-small);line-height:1.65;color:var(--dp-text-2)}
.dp-ps__faq-body p{margin:0}

@media (max-width:991.98px){
	.dp-ps__split{grid-template-columns:260px minmax(0,1fr);gap:var(--dp-s6)}
	.dp-ps__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
	.dp-ps__quotes{grid-template-columns:1fr}
}
@media (max-width:575.98px){
	.dp-ps__hero{padding:var(--dp-s5) 0 var(--dp-s7)}
	.dp-ps__ctas .dp-btn{width:100%}
	.dp-ps__split{grid-template-columns:1fr;gap:var(--dp-s5)}
	.dp-ps__fig{max-width:380px}
	.dp-ps__quote{padding:var(--dp-s5)}
}
/* ===== END: Pro Services pages (dp-ps) ===== */


@font-face {
  font-family: 'Feather';
  src:
    url('https://cdn.pixfizz.com/fz/b57182364a/0/x9oDB4c1EtL0apZRyx8s7l7T-VxKmsEPkydV4XDlvHg/~/Feather.ttf?sdxovp') format('truetype'),
    url('https://cdn.pixfizz.com/fz/02ab3db28e/0/O9KVLtKmt2FFoj2fLrO01fSHn47iwys_3ZsFMPOgmNM/~/Feather.woff?sdxovp') format('woff'),
    url('https://cdn.pixfizz.com/fz/b15abdc2b0/0/Mt9Cf54HQm_QxhXoZ5HBA2F4i_YviKgQ3qtZUx-nRjU/~/Feather.svg?sdxovp#Feather') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
    font-family:
    'Avenir', sans-serif !important;
    font-size: 1rem;
    font-weight: 400;
    color: #1a1a1b;
    background-color: #ffffff;
}
html {
	scroll-behavior: smooth;
}
/* Container-fluid padding */
@media only screen and (max-width: 768px) {
    .container-fluid {
        padding-left:1rem !important;
        padding-right:1rem !important;
    }
    /* Announcement bar */
    .navbar-topbar {
        padding-top: 0.25;
        padding-bottom: 0.25;
        font-size: 0.5rem;
    }
    .bg-cover .bg-white-90 {
        background-color: rgba(255, 255, 255, .9)!important;
    }
}
@media only screen and (min-width: 768px) {
    .container-fluid {
        padding-left:3rem !important;
        padding-right:3rem !important;
    }
    /* Announcement bar */
    .navbar-topbar {
        padding-top: 0;
        padding-bottom: 0;
        font-size: 0.75rem;
    }
    .bg-cover .bg-white-90 {
        background-color: rgba(255, 255, 255, 0)!important;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }
}
@media (min-width: 992) {
    .container {
        max-width: 960px;
    }
}
input {
    border-radius: 6px !important;
}
.form-control {
    border-radius: 6px !important;
}

/* Announcement bar background  color */
/**
.bg-light {
    background-color: #22356c !important;
}
**/
/* Change navbar background color
.main-menu {
    background-color: white;
} */

.footer {
    background-color: #1a1a1b !important;
    color: #ffffff;
    position: relative;
    z-index: 2;
}
.bg-dark {
    background-color: #1a1a1b !important;
}
.bg-very-light {
    background-color: #f2f3f5;
}
/* Change the color of the navbar on hover  */
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #22356c!important;
}
/* Change promotion color */
.promotion {
    background-color: #1a3a6b !important;
    color: #ffffff !important;
}
/* Change the background color for the cart icon  */
[data-cart-items]::before {
    background-color: #22356c;
    color: #ffffff !important;
}

.btn-white-primary {
    background-color: #f5f5f5;
}

.main.cart .quantity button[class*=btn] {
    background: none;
    border-radius: 0;
    width: 1.5rem;
    height: 1.5rem;
}

.navbar-toggler {
    padding: 0.5rem 0 0.5rem 0.5rem;
}
.navbar-light .navbar-toggler {
    color: #1a1a1b;
}
.btn {
    border-radius: 6px;
}

/* Change the background color of the more info on the quick view  */
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #1a3a6b;
    border-color: #1a3a6b;
}
/* logo size */
@media (max-width: 991px) {
   .navbar-brand-logo {
        height: 22px;
    }
    .hide-mobile {
        display:none;
    }
}
@media (min-width: 992px) {
   .navbar-brand-logo {
    height: 36px;
    }
}

/* Change the  color of the navbar items */
a {
    color: #1a1a1b;
}
a:hover {
    color: #22356c;
}
.nav-link:hover {
    color: #22356c;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 400 !important;
    color: #1a1a1b !important;
    font-size: 0.9rem;
}

.navbar-light .navbar-nav .show>.nav-link {
    font-weight: 400;
    color: #22356c !important;
}

.navbar-light .navbar-nav .show>.nav-link:hover {
    font-weight: 400;
    color: #3cb0e4 !important;;
}

.nav-tabs .nav-link.active {
    color: #1a1a1b !important;;
    font-weight: 600;
}

.nav-link.active::before {
    border-top: 1px solid #22356c !important;;
}
/*
a:not(.btn) {
    color: #1a1a1b !important;
}
*/
/* Hover status on links */
a:not(.btn):hover .list-styled-link {
    color: #1a1a1b !important;
}

.list-styled-link {
    background: linear-gradient(0deg, #3cb0e4, #3cb0e4) no-repeat right bottom / 0 var(--bg-h);
    transition: background-size 350ms;
    --bg-h: 100%;
}
.list-styled-link:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
    color:#1a1a1b !important;
}


/* Change the  text color of  categories dropdown items  */
/**
.list-styled-link:focus,
.list-styled-link:hover {
    color: #111;
}

.list-styled-link {
    color: #1a1a1b;
    position: relative;
}
.list-styled-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #1a1a1b;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.list-styled-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
**/
.list-group-item-action {
    color: #1a1a1b;
}

.list-styled-link:hover {
    color: #1a3a6b;
}

.list-group-item-action:hover {
    color: #1a3a6b;
}

.text-body[href]:focus, .text-body[href]:hover {
    color: #22356c !important;
}

.main.cart .quantity button[class*=btn]:hover {
    background-color: none;
}

.px-icons {
    fill: #1a1a1b;
}
.px-icons:hover {
    fill: #1a3a6b;
}

/* Account navigation text color on hover */
.list-group-item-action:focus,
.list-group-item-action:hover {
    #1a3a6b !important;
}

/* Change the  text color of  "happy holidays" below the header  */
.text-white {
    color: #fff !important;
}

/* Change the  text color of  categories dropdown items  */
.list-styled-link:focus,
.list-styled-link:hover {
    color: #111;
}

.list-styled-link {
    color: #1a1a1b;
}

.list-group-item-action {
    color: #1a1a1b;
}

.list-styled-link:hover {
    color: #22356c;
}

.list-group-item-action:hover {
    color: #22356c;
}

/* Change the  text color of class containing text-body  */

.text-body {
    color: #1a1a1b !important;
    font-weight: 400 !important;
}

/* Change the text color of the element with text-gray-400 class */
.text-gray-400 {
    color: #909090;
}

/* Change the text color of the element with text-muted class  */
.text-muted {
    color: #767676;
}

/* Change the text color of the element with text-gray-300 class  */
.text-gray-300 {color: #767676;}

/* Active nav-tabs color  */
.nav-item.show .nav-link,
.nav-link.active {color: #1a1a1b;}

/* Change the text color of the element with text-primary class  */
.text-primary { color: #1a1a1b!important;}

/* Button color when active */
.btn-dark:not(:disabled):not(.disabled).active,
.btn-dark:not(:disabled):not(.disabled):active,
.show > .btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #060606;
    border-color: #000;
}

/* Change the text color of the element with text-gray-500 class  */
.text-gray-500{color: #525252 !important;}

/* Text color in form-control  */
.form-control {
    color : #111;
    font-size: 0.875rem;
}

/* Email header css */
.hover-underline:hover {
  text-decoration: underline !important;
}

@media (max-width: 640px) {
  .sm-inline-block {
    display: inline-block !important;
  }
  .sm-w-auto {
    width: auto !important;
  }
  .sm-w-full {
    width: 100% !important;
  }
  .sm-px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sm-px-16 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .sm-py-24 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .sm-text-left {
    text-align: left !important;
  }
}

/* copied from product-filter master */
input {
    /* -webkit-appearance: checkbox !important; */
}

.product-single .product-price {
    display: block;
    margin-bottom: 1.1rem;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .1em;
    font-weight:bold;
}
.discount-pill {
  position: absolute;
  top: -8px;
  right: 0px;
  background-color: #22356c;
  color: #ffffff;
  border: 1px solid #3cb0e4;
  padding: 0.3rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.4s ease-out;
  z-index: 10;
  overflow: hidden; /* Required for shimmer containment */
}

  .animate-fade-in {
    animation: fadeInSlideDown 0.6s ease-out forwards;
    animation-delay: 0.2s;
  }

/* Shimmer layer */
.discount-pill::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  height: 100%;
  width: 50%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
}

/* Trigger shimmer on hover */
.discount-pill:hover::before {
  animation: shimmer 1s ease-in-out;
}

/* Animation keyframes */
@keyframes shimmer {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

.product-single .product-name {
    margin-top: .6rem;
    letter-spacing: .02em !important;
    font-size: 1.5rem;
    font-weight: 400;
}

.product-single .product-category {
    margin-top: .6rem;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
    font-size: .8rem;
    color: #969696;
}
.collection-name {
    font-weight:600;
}
.font-size-xs {
    font-size: 0.75rem !important;
}

input[type="color"] {
	-webkit-appearance: none;
	border: 1px solid gray;
	width: 40px;
	height: 40px;
	padding: 0.1rem;
	border-radius:2px !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
}
input[type="color"]::-webkit-color-swatch {
	border: none;
}
.btn-primary {
    color: #ffffff !important;
    border-color: #3cb0e4 !important;
    background-color: #22356c !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    color: #ffffff !important;
    border-color: #3cb0e4 !important;
    background-color: #02529e !important;
}
.btn-dark:hover, .btn-dark:active, .btn-dark:focus {
    color: #ffffff !important;
    border-color: #3cb0e4 !important;
    background-color: #02529e !important;
}
.btn-dark {
    color: #ffffff;
    border-color: #2d2d2d !important;
    background-color: #2d2d2d !important;
}
.btn-outline-primary {
    color: #22356c !important;
    border-color: #22356c !important;
    border-radius: 0px !important;
}
.btn-outline-primary:hover {
    background-color: #22356c !important;
    border-color: #22356c !important;
    color: #ffffff !important;
}
.btn-upload {
    border-radius: 6px;
    border: 1px solid #22356c;
}
.btn-upload:hover {
    border: 1px solid #3cb0e4;
    background-color: #3cb0e4;
    color: #1a1a1b;
}
.btn-upload.fe-image::before {
    font-family: 'Feather' !important;
    margin-right: 0.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* copied from px-option */
.select-box::before {
    top: 74% !important;
}
.px-title {
    font-weight:600;
    margin:0;
    padding: 0.5rem 0 2px;
    font-size:0.8rem;
}
/* Radio buttons */
.custom-control-input:checked~.custom-control-label::before {
    border-color:#22356c;
    background-color:#22356c;
}
.custom-control.custom-checkbox {
    display: block;
}
/*Photo prints variant image radius*/
.px-photo-prints .px-sidebar .px-sidebar-content .px-size-options .px-option .px-image-control label img {
    border-radius: 6px;
}
/*Photo prints cropping overlay to top layer*/
.px-photo-prints .px-cropping-overlay {
    z-index: 9999;
}
/*Product page radio pill button style */
.variant-selector label {
    display: block;
}
.variant-selector label.field-label .label-text{
    outline: 1px solid #22356c;
    background: #f2f3f5;
    color: #1a1a1b;
    font-size: 0.65rem;
    border-radius: 6px;
    margin-bottom:10px;
}
.variant-selector label.field-label .label-img {
    cursor: pointer;
    display: inline-block;
    /*filter: drop-shadow(1px 1px 2px #d6d6d6);*/
    border-radius: 6px;
    width: 100%;
}
.variant-selector label.field-label .label-img img {
    border-radius: 6px;
}
.variant-selector label.field-label:hover .label-text,
.variant-selector label.field-label input:checked + .label-text {
    background: #3cb0e4;
    color: #1a1a1b;
    outline: none;
    cursor: pointer !important;
    border-radius: 6px;
}
.variant-selector label.field-label input:hover + .label-img img {
    outline: 2px solid #3cb0e4;
    border-radius: 6px;
}
.variant-selector label.field-label input:checked + .label-img {
    outline: 2px solid #3cb0e4 !important;
    border-radius: 6px !important;
}
.variant-selector label.field-label input:hover + .label-img-color img {
    outline: 2px solid #3cb0e4;
    border-radius: 5px !important;
}
.variant-selector label.field-label input:checked + .label-img-color img {
    outline: 2px solid #3cb0e4 !important;
    border-radius: 5px;
}
.product-form {
    display: block !important;

}

@media all and (max-width:100em){
    .btn-dark {
        display:block;
        width: 100%;
    }
}
.product-image-full {
    display:none !important;
}

.product-form select {
    width: 100%;
    -webkit-appearance: none;
}
.product-form select {
    max-width: none;
    padding: 0.75rem 5rem 0.75rem 1rem;
    color: #222;
    border-color: #ccc;
    font-size: 1rem;
    background-color: whitesmoke;
    border: 1px solid whitesmoke;
    margin: 0 0 10px 0;
    width: 100%;
    -webkit-appearance: auto;
}
/** Breadcrumb alignment **/
.breadcrumb{display:flex;flex-wrap:wrap;padding:0 0;margin-bottom:1.5rem;list-style:none;background-color:transparent}
.breadcrumb-item+.breadcrumb-item{display:inline-flex; padding-left:.5rem}
.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}
.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}
.breadcrumb-item.active{color:inherit}
.breadcrumb-item+.breadcrumb-item::before {
    display:inline-block;
    padding-right:0.5rem;
    color:#909090;
    content: url('https://cdn.pixfizz.com/fz/99c75efb46/0/FssXgJxeYAIWGEdwtgHZGGxc8kC-Zc7ouZ5LPgXOTo4/~/chevron-right-regular.svg');
    opacity: 0.5;
    width:0.9rem;
    height:auto;
}

/* form index layout */
.card-actions .card-action+.card-action+.card-action {display:none}

@media only screen and (min-width: 992px){
    .classic .flex-row {display:none}

    .navbar-sidenav {display:none!important}
}
.classic .flex-row .nav-item.ml-lg-n4 {margin-right: 1.25rem;}
.navbar-sidenav {display: flex !important}
 @media only screen and (max-width: 768px){
    .btn-gray-500 {margin-top:10px;}
    .navbar-sidenav {display:none!important}
}
.card-img-overlay form { display:inline-block }
.bg-cover-main{min-height: 510px;}
.bg-cover-grid{min-height: 240px;}
.progress .progress-bar {width: 66%}
.custom-select{background-color: whitesmoke!important }
.card-actions .card-action+.card-action+.card-action {display:none;}
.btn-white-primary:focus, .btn-white-primary:hover {
    background-color: #02529e !important;
    border-color: #3cb0e4 !important;
    color: #ffffff !important;
}
.address form {display:inline-block;}
.address .btn-circle {border-radius: 50%;}
.dropright-toggle span.active:after {color:black;}
.dropright-toggle::after {display:none;}
.shoppage select.custom-select.custom-select-xs{display:none;}
.reorder .btn a {color:black;}
.btn-outline-dark a:hover {color:#fff;}
.reorder:hover {color:#fff;}
.myaccount .dropdown-menu {left:-100px;}
.tooltip-inner { font-size: 0.85rem; }
.card-body { padding: 1rem; }
.card-actions {
    padding: 1rem;
    bottom: 1.5rem;
}
.card-actions .card-action+.card-action+.card-action {display:none;}

/** Info button on variants **/
.info-button {
    font-size: 0.9rem;
    padding-left: 5px;
    vertical-align: top;
}
/* Popup container - can be anything you want */
.popup-option {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup-option .close {
  position: absolute;
  right: 4px !important;
  top: 4px !important;
  padding: 5px;
  color: #1a1a1b;
  transition: color .3s;
  font-size: 1em;
  line-height: .6em;
  font-weight: 300;
}


/* The actual popup */
.popup-option .popuptext-option {
  display: none;
  width: 320px;
  background-color: #3cb0e4;
  color: #1a1a1b;
  font-size: 0.85rem;
  text-align: center;
  border-radius: 0px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -16px;
  font-weight: 300;
  border-radius:6px;
}

/* Popup arrow */
.popup-option .popuptext-option::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 8%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #3cb0e4 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup-option .show-option {
  display: block;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
/** Class to assign to gallery to have it sticky on page scroll **/
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.dropdown-menu {
    opacity: inherit;
    display: none;
}

/** Cart notification popup **/
.cart-notification .tooltip-inner {
    background-color: #1a3a6b;
    font-size: 1.2em;
    padding: 0.5em 1em;
}
.cart-notification.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #1a3a6b;
}
/** Gallery Styling **/
.add-gallery-button {
    position: absolute;
    top: 8px;
    right: 32px;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    color: #767676;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.3s;
}
.add-gallery-button:hover, .add-gallery-button:focus {
    background: #DDDDDD;
    outline: none;
    color: #767676;
}
.gallery-preview {
    display: flex;
    height: 150px;
    background: #FAFAFA;
    border: 1px solid #DDDDDD;
    padding: 0;
    cursor: pointer;
}
.gallery-main-image {
    height: 100%;
    max-width: 150px;
    object-fit: cover;
    width: 150px;
}
.gallery-preview__desc {
    padding: 13px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: calc(100% - 150px);
}
.gallery-preview__heading-wrapper {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
}
.gallery-preview__heading-wrapper h6 {
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    color: #111111;
    margin-bottom: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.gallery-preview__button {
    border: none;
    background: none;
    height: max-content;
    padding: 3px 6px;
    border-radius: 3px;
    transition: all 0.3s;
}
.gallery-preview__button:hover, .gallery-preview__button:focus {
    background: #DDDDDD;
    outline: none;
}
.gallery-preview__date {
    font-size: 15px;
    line-height: 22px;
    color: #767676;
}
.gallery-preview__image-count {
    display: flex;
    gap: 8px;
}
.gallery-preview__image-count span {
    font-size: 15px;
    line-height: 22px;
    color: #767676;
}
.gallery-preview__desc__bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
/* Gallery Grid */
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
        max-width: 900px;
        margin: auto;
    }

    .gallery img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
    }

    .gallery img:hover {
        transform: scale(1.05);
    }

/* ===== START: Gallery v2 Lightbox ===== */
    #lightbox-modal {
    	display: none;
    	position: fixed;
    	inset: 0;
    	z-index: 9999;
    	background: rgba(0, 0, 0, 0.9);
    	align-items: center;
    	justify-content: center;
    }

    #lightbox-modal.active {
    	display: flex;
    }

    #lightbox-image {
    	max-width: 90vw;
    	max-height: 90vh;
    	object-fit: contain;
    	border-radius: 4px;
    }

    .lightbox-button,
    .lightbox-close {
    	position: fixed;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	width: 48px;
    	height: 48px;
    	background: rgba(255, 255, 255, 0.15);
    	border: none;
    	border-radius: 50%;
    	cursor: pointer;
    	z-index: 10000;
    	transition: background 0.2s ease;
    }

    .lightbox-button:hover,
    .lightbox-close:hover {
    	background: rgba(255, 255, 255, 0.3);
    }

    .lightbox-button svg,
    .lightbox-close svg {
    	width: 20px;
    	height: 20px;
    }

    .lightbox-prev {
    	left: 24px;
    	top: 50%;
    	transform: translateY(-50%);
    }

    .lightbox-next {
    	right: 24px;
    	top: 50%;
    	transform: translateY(-50%);
    }

    .lightbox-close {
    	top: 24px;
    	right: 24px;
    }

/* ===== START: Account v2 Orders clean columns ===== */

/* Pay + Details stay together, right-aligned, in the actions cell */
.acv2-order-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}
.acv2-order-actions form {
	margin: 0;
}

/* Fixed column grid on desktop so every column lines up row to row */
@media (min-width: 768px) {
	.acv2-order-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 160px 120px 280px;
		align-items: center;
		column-gap: 1.5rem;
	}
	.acv2-order-status {
		justify-self: start;
	}
	.acv2-order-total {
		justify-self: end;
		text-align: right;
	}
	.acv2-order-actions {
		justify-self: end;
	}
}

/* ===== END: Account v2 Orders clean columns ===== */
    /* ===== Mobile: gallery action buttons ===== */
    @media (max-width: 991px) {
    	.account-g2-shell .col-12.col-lg-6 .d-flex.flex-wrap {
    		flex-direction: column;
    		align-items: stretch;
    	}

    	.account-g2-shell .col-12.col-lg-6 .d-flex.flex-wrap .btn,
    	.account-g2-shell .col-12.col-lg-6 .d-flex.flex-wrap a.btn {
    		width: 100%;
    		margin-right: 0 !important;
    		margin-bottom: 0.5rem;
    		justify-content: center;
    	}
    }

/* Gallery show: keep action buttons on one line at desktop */
@media (min-width: 992px) {
	.account-g2-show .row.align-items-end .col-lg-6 .d-flex {
		flex-wrap: nowrap !important;
	}
}
/* ===== END: Gallery v2 Lightbox ===== */

    /* Lightbox (Fullscreen View) */
    .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .lightbox img {
        max-width: 90%;
        max-height: 80%;
        border-radius: 5px;
    }
    /* Caption Styling */
    .lightbox .caption {
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
        color: white;
    }
    .lightbox .close,
    .lightbox .prev,
    .lightbox .next {
        position: absolute;
        color: white;
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
    }

    .lightbox .close {
        top: 10px;
        right: 20px;
    }

    .lightbox .prev {
        left: 20px;
    }

    .lightbox .next {
        right: 20px;
    }
/* ===== START: Account Galleries V2 (G2) ===== */

.account-g2 {
	background: #f6f7fa;
}

/* IMPORTANT: container is Bootstrap's .container.
   This targets containers INSIDE a section with .account-g2. */
.account-g2 .container {
	max-width: 1400px;
}

/* Back link */
.account-g2-back svg {
	width: 18px;
	height: 18px;
	opacity: 0.6;
}

/* Search pill */
.account-g2-search {
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 6px;
	padding: 1px 10px;
	box-shadow: 0 8px 30px rgba(16, 24, 40, 0.06);
	min-width: 220px;
}
.account-g2-search svg {
	width: 18px;
	height: 18px;
	opacity: 0.5;
	margin-right: 8px;
}
.account-g2-search input {
	background: transparent;
	box-shadow: none !important;
}
/* Gallery G2 — grid container */
.account-g2-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

@media (min-width: 768px) {
	.account-g2-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.account-g2-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* =========
   GRID VIEW
   ========= */

.account-g2-projects--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.account-g2-projects--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.account-g2-projects--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.account-g2-card-wrap {
	position: relative;
}

/* Shared card */
.account-g2-card {
	display: block;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
	color: inherit;
	text-decoration: none !important;
	position: relative;
	z-index: 1;
}

.account-g2-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.12);
}

/* Uniform media + body */
.account-g2-card__media {
	height: 180px;
	background: #fff;
	overflow: hidden;
}

.account-g2-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ensure px-project-preview fills its container in all views */
.account-g2-card__media px-project-preview {
	display: block;
	width: 100%;
	height: 100%;
}

.account-g2-card__media px-project-preview::part(img) {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.account-g2-card__body {
	padding: 12px 14px 14px 14px;
}

.account-g2-card__title {
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.account-g2-card__meta {
	margin-top: 8px;
	font-size: 12px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	color: rgba(0, 0, 0, 0.55);
}

.account-g2-card__meta svg {
	width: 16px;
	height: 16px;
	opacity: 0.55;
}

/* Grid actions — hover reveal, absolute positioned */
.account-g2-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.18s ease;
	z-index: 3;
}

.account-g2-card-wrap:hover .account-g2-actions {
	opacity: 1;
}

/* Form tags inside actions must not break flex layout */
.account-g2-actions form {
	display: contents;
}

/* Icon button — grid default */
.account-g2-icon-btn {
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.88);
	border-radius: 999px;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: rgba(0, 0, 0, 0.65);
	text-decoration: none !important;
	cursor: pointer;
}

.account-g2-icon-btn svg {
	width: 16px;
	height: 16px;
	opacity: 0.8;
}

/* Labels: hidden in grid, shown in list */
.account-g2-list-label {
	display: none;
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
}

/* Elements shown only in list view: hidden by default */
.account-g2-list-only {
	display: none;
}

/* Overflow dropdown: hidden in grid */
.account-g2-overflow {
	display: none;
}

/* Order CTA: hidden in grid */
.account-g2-list-order {
	display: none;
}

/* Create tile */
.account-g2-create-tile {
	border: 2px dashed rgba(0, 0, 0, 0.14);
	background: rgba(255, 255, 255, 0.62);
	box-shadow: none;
}

.account-g2-create-tile:hover {
	border-color: rgba(13, 110, 253, 0.25);
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10);
}

.account-g2-create-icon {
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: rgba(13, 110, 253, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}

.account-g2-create-plus {
	font-size: 34px;
	line-height: 1;
	color: #0d6efd;
	font-weight: 600;
	transform: translateY(-1px);
}

/* Empty gallery tile */
.account-g2-empty-tile {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	background: linear-gradient(
		145deg,
		rgba(255,255,255,0.95),
		rgba(245,247,250,0.95)
	);
}

.account-g2-empty-icon {
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: rgba(13,110,253,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}

.account-g2-empty-icon svg {
	width: 22px;
	height: 22px;
	opacity: 0.6;
}

.account-g2-empty-title {
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 4px;
	color: #d93025;
}

.account-g2-empty-sub {
	font-size: 12px;
	color: rgba(0,0,0,0.55);
}

/* =========
   LIST VIEW
   ========= */

.account-g2-projects--list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* Card-wrap becomes a horizontal row */
.account-g2-projects--list .account-g2-card-wrap {
	display: flex;
	align-items: stretch;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06);
	transition: box-shadow 0.18s ease;
}

.account-g2-projects--list .account-g2-card-wrap:hover {
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
}

/* Card becomes image + content flex row, loses own card styling */
.account-g2-projects--list .account-g2-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 0;
	box-shadow: none;
	border: none;
	min-width: 0;
}

.account-g2-projects--list .account-g2-card:hover {
	transform: none;
	box-shadow: none;
}

/* Fixed-width image in list */
.account-g2-projects--list .account-g2-card__media {
	flex-shrink: 0;
	width: 130px;
	height: auto;
	align-self: stretch;
	border-radius: 0;
}

/* px-project-preview must fill the fixed list media container */
.account-g2-projects--list .account-g2-card__media px-project-preview {
	display: block;
	width: 130px;
	height: 100%;
	min-height:90px;
}
.account-g2-projects--list .account-g2-card__media px-project-preview::part(img) {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
/* Content fills remaining space */
.account-g2-projects--list .account-g2-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

/* Actions: lose absolute, become always-visible side panel */
.account-g2-projects--list .account-g2-actions {
	position: static;
	opacity: 1;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 0 8px;
	border-left: 1px solid rgba(0, 0, 0, 0.06);
	align-self: stretch;
}

/* No hover-reveal needed in list */
.account-g2-projects--list .account-g2-card-wrap:hover .account-g2-actions {
	opacity: 1;
}

/* Icon buttons: column layout, transparent bg, labeled */
.account-g2-projects--list .account-g2-icon-btn {
	flex-direction: column;
	gap: 4px;
	width: 52px;
	height: auto;
	min-height: 64px;
	border-radius: 10px;
	border: none;
	background: transparent;
	color: rgba(0, 0, 0, 0.55);
}

.account-g2-projects--list .account-g2-icon-btn:hover {
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.85);
}

/* Show labels in list */
.account-g2-projects--list .account-g2-list-label {
	display: block;
}

/* Show list-only elements in list */
.account-g2-projects--list .account-g2-list-only {
	display: inline;
}

/* Order button in list view — primary accent, matches v2 feel */
.account-g2-order-btn {
	color: var(--acv2-primary, #00bcd4);
	border-color: var(--acv2-border, #e8e8e8);
}
.account-g2-order-btn:hover {
	background: var(--acv2-primary, #00bcd4);
	color: #fff;
	border-color: var(--acv2-primary, #00bcd4);
}
/* ----- START: Copy-to-clipboard toast ----- */
.account-g2-copy-tip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 4px;
	pointer-events: none;
	animation: acv2CopyFade 2s ease forwards;
	z-index: 10;
}
@keyframes acv2CopyFade {
	0%, 70% { opacity: 1; }
	100%    { opacity: 0; }
}
/* ----- END: Copy-to-clipboard toast ----- */
/* Hide standalone share button in list — moves to overflow */
.account-g2-projects--list .account-g2-share-btn {
	display: inline-flex !important;
}

/* Hide cart icon in list — replaced by Order pill */
.account-g2-projects--list .account-g2-cart-btn {
	display: none;
}

/* Show overflow dropdown in list */
.account-g2-projects--list .account-g2-overflow {
	display: block;
}

/* Strip Bootstrap's dropdown caret */
.account-g2-overflow .dropdown-toggle::after {
	display: none;
}

/* Order CTA — list view */
.account-g2-projects--list .account-g2-list-order {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	padding: 0 16px 0 4px;
	align-self: center;
}

.account-g2-projects--list .account-g2-list-order .btn {
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 20px;
	border-radius: 999px;
	display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== END: Account Galleries V2 (G2) ===== */

/* =========================
   GALLERY SHOW (PHOTO GRID)
   ========================= */

/* ensure show page doesn’t feel constrained */
.account-g2-show .container {
	max-width: 1400px;
}

/* Default: uniform tiles */
.account-g2-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (min-width: 768px) {
	.account-g2-photo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.account-g2-photo-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.account-g2-photo-tile {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10);
	cursor: pointer;
	transition: transform 0.16s ease;
}

.account-g2-photo-tile:hover {
	transform: scale(1.01);
}

.account-g2-photo-tile img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

@media (min-width: 768px) {
	.account-g2-photo-tile img {
		height: 260px;
	}
}

/* Masonry option (grid-based, left-to-right order) */
.account-g2-photo-masonry {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	grid-auto-rows: 10px;
	gap: 14px;
}
@media (min-width: 768px) {
	.account-g2-photo-masonry {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.account-g2-photo-masonry {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.account-g2-photo-masonry {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.account-g2-photo-masonry__item {
	grid-row-end: span 20;
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.10);
	cursor: pointer;
	transition: transform 0.16s ease;
}
.account-g2-photo-masonry__item:hover {
	transform: scale(1.01);
}
.account-g2-photo-masonry__item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Hover actions on photos */
.account-g2-photo-actions {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	gap: 8px;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.account-g2-photo-tile:hover .account-g2-photo-actions,
.account-g2-photo-masonry__item:hover .account-g2-photo-actions {
	opacity: 1;
}

.account-g2-filename {
	font-size: 11px;
	padding: 6px 8px;
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
}

/* Upload */
.account-g2-upload {
	border-radius: 999px;
}

/* Upload status (prevents “Upload Failed” being visible by default) */
.account-g2-upload-status .multiple-upload-progress,
.account-g2-upload-status .multiple-upload-err-msg {
	display: none;
}
.account-g2-upload-status .multiple-upload-progress.active,
.account-g2-upload-status .multiple-upload-err-msg.active {
	display: block;
}

/* Empty gallery “big state” on gallery show page */
.account-g2-empty-gallery {
	background: rgba(255,255,255,0.75);
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 22px;
	box-shadow: 0 16px 60px rgba(16, 24, 40, 0.10);
	padding: 60px 24px;
	text-align: center;
	cursor: pointer;
}

.account-g2-empty-gallery__icon {
	width: 86px;
	height: 86px;
	border-radius: 999px;
	background: rgba(13,110,253,0.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px auto;
}

.account-g2-empty-gallery__icon svg {
	width: 28px;
	height: 28px;
	opacity: 0.7;
}

.account-g2-empty-gallery__title {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #0f172a;
}

.account-g2-empty-gallery__sub {
	max-width: 680px;
	margin: 12px auto 0 auto;
	font-size: 18px;
	color: rgba(0,0,0,0.55);
	line-height: 1.6;
}

/* Tabs */
.account-g2-tabs {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.account-g2-tabs .nav-link {
	border: 0;
	color: rgba(0, 0, 0, 0.55);
	font-weight: 600;
	padding-left: 0;
	padding-right: 18px;
}

.account-g2-tabs .nav-link.active {
	color: #0d6efd;
	background: transparent;
}

/* =========================
   GALLERY V2 MODAL
   ========================= */

.modal-g2 {
	border: 0;
	border-radius: 18px;
	box-shadow: 0 20px 70px rgba(16, 24, 40, 0.20);
	overflow: hidden;
}

.modal-g2-close {
	position: absolute;
	right: 14px;
	top: 12px;
	z-index: 2;
	opacity: 0.6;
}

.modal-g2-close:hover {
	opacity: 1;
}

.modal-g2-input {
	border-radius: 14px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

.modal-g2-btn {
	border-radius: 999px;
	padding-left: 28px;
	padding-right: 28px;
}
/* Keep gallery show header + tabs + grid aligned */
.account-g2-show .account-g2-shell {
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* When buttons wrap, keep them looking intentional */
@media (max-width: 991px) {
	.account-g2-show .row.align-items-end .d-flex {
		gap: 10px;
		justify-content: flex-start !important;
	}
	.account-g2-show .row.align-items-end .btn {
		margin-right: 0 !important;
	}
}
/* =========================
   Account Navigation V2
   ========================= */

.account-nav-v2 {
	position: relative;
}

.account-nav-v2__card {
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(16, 24, 40, 0.10);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	overflow: hidden;
}

.account-nav-v2__title {
	padding: 16px 16px 12px 16px;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: rgba(0, 0, 0, 0.75);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.70),
		rgba(255, 255, 255, 0.35)
	);
}

.account-nav-v2__list {
	padding: 6px;
}

.account-nav-v2__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 12px;
	border-radius: 14px;
	color: rgba(0, 0, 0, 0.70);
	text-decoration: none !important;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.account-nav-v2__item:hover {
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
	transform: translateY(-1px);
}

.account-nav-v2__label {
	font-weight: 600;
}

.account-nav-v2__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.55;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.account-nav-v2__item:hover .account-nav-v2__chev {
	opacity: 0.85;
	transform: translateX(1px);
}

.account-nav-v2__item.is-active {
	background: rgba(13, 110, 253, 0.10);
	box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.20);
}

.account-nav-v2__item.is-active .account-nav-v2__label {
	color: rgba(0, 0, 0, 0.85);
	font-weight: 800;
}

.account-nav-v2__item.is-active .account-nav-v2__chev {
	opacity: 1;
}

.account-nav-v2__divider {
	height: 1px;
	margin: 6px 10px;
	background: rgba(0, 0, 0, 0.07);
}

.account-nav-v2__item.is-logout {
	background: rgba(255, 255, 255, 0.35);
}

.account-nav-v2__item.is-logout:hover {
	background: rgba(220, 53, 69, 0.08);
	box-shadow: 0 10px 26px rgba(220, 53, 69, 0.10);
}

.account-nav-v2__item.is-logout .account-nav-v2__label {
	color: rgba(0, 0, 0, 0.70);
}
/* =========================
   SAVED PROJECTS (G2)
   ========================= */

.account-g2-project-grid {
	gap: 22px;
}

/* Force consistent card sizing */
.account-g2-project-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.account-g2-project-media {
	height: 240px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

@media (min-width: 768px) {
	.account-g2-project-media {
		height: 260px;
	}
}

/* px preview should fill the media area */
.account-g2-project-preview {
	width: 100%;
	height: 100%;
	display: block;
}

/* Lock body height so cards always match */
.account-g2-project-card .account-g2-card__body {
	flex: 1;
	min-height: 84px;
}

/* Clamp title to prevent taller cards */
.account-g2-project-card .account-g2-card__title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Clamp meta line too (prevents wrap on long product names like “MetalPrint 16x20”) */
.account-g2-project-card .account-g2-card__meta {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* View toggle buttons */
.account-g2-viewtoggle {
	gap: 8px;
}
.account-g2-viewtoggle .btn {
	border-radius: 999px;
	padding-left: 14px;
	padding-right: 14px;
}

/* Grid container */
.account-g2-projects--grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

@media (min-width: 768px) {
	.account-g2-projects--grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (min-width: 1200px) {
	.account-g2-projects--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* List container */
.account-g2-projects--list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* List cards become horizontal rows */
.account-g2-projects--list .account-g2-card {
	display: grid;
	grid-template-columns: 260px 1fr;
	align-items: stretch;
}

.account-g2-projects--list .account-g2-project-media {
	height: 160px;
}

.account-g2-projects--list .account-g2-card__body {
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
/* =========================
   END SAVED PROJECTS (G2)
   ========================= */
/* Keep your existing lightbox CSS + download overlay CSS as-is */

* {
  box-sizing: border-box; }

.input-number {
  display: flex;
}
input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}
.input-number input {
  width: 80px;
  height: 54px;
  padding: 0 6px;
  vertical-align: top;
  text-align: center;
  outline: none; }
.main.cart .quantity input {
    width:50px;
}
/* Keep Bootstrap's padding-left so switch has space */
.custom-control.custom-switch {
	padding-left: 2.25rem;
}

/* Align label text vertically with switch */
.custom-control.custom-switch .custom-control-label {
	padding-top: 0.15rem;   /* nudge text down slightly */
	line-height: 1.4;       /* ensures balanced alignment */
}

/* Adjust the switch knob/track so they sit in line */
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after {
	top: 0.2rem; /* moves both track + knob down */
}
/* leave Bootstrap structure & your Liquid form intact */

/* room for the switch so it doesn't overlap the text */
.custom-control.custom-switch {
  padding-left: 2.35rem; /* slight extra space looks nicer with your font size */
}

/* micro-align the switch */
.custom-switch .custom-control-label::before {  /* track */
  top: .20rem;              /* was .20 for both */
}

.custom-switch .custom-control-label::after {   /* knob */
  top: calc(.20rem + 2px);  /* 2px lower than the track to center visually */
  background-color: #02529e;
}

/* tiny Safari nudge to avoid sub-pixel rounding */
@supports (-webkit-hyphens:none) {
  .custom-switch .custom-control-label::after {
    top: calc(.20rem + 2.5px);
  }
}
/* Adjust switch knob and border color */
.custom-switch .custom-control-label::before {
    border: 1px solid #02529e;
}

.input-number input,
.input-number-decrement,
.input-number-increment {
  border: 1px solid #ccc;
  height: 54px;
  user-select: none; }

.input-number-decrement,
.input-number-increment {
  display: inline-block;
  width: 30px;
  line-height: 52px;
  background: none;
  color: #444;
  text-align: center;
  font-weight: bold;
  cursor: pointer; }
  .input-number-decrement:active,
  .input-number-increment:active {
    background: #ddd; }

.input-number-decrement {
  border-right: none;
  border-radius: 6px 0 0 6px; }

.input-number-increment {
  border-left: none;
  border-radius: 0 6px 6px 0; }

.card {
    color: #1a1a1b;
}
/** Support swap on hover for px-image-preview **/
.card-img-hover px-design-preview::part(img) {
	float: left
}

.card-img-hover px-design-preview.card-img-top::part(img) {
	transition: opacity .2s ease-in-out
}

.card-img-hover px-design-preview.card-img-back::part(img) {
	opacity: 0
}

.card-img-hover px-design-preview.card-img-front::part(img) {
	position: absolute;
	left: 0;
    top: 0;
}

.card-img:hover .card-img-hover px-design-preview.card-img-back::part(img) {
	opacity: 1
}

.card-img:hover .card-img-hover px-design-preview.card-img-front::part(img) {
	opacity: 0
}

#stamped-main-widget input#stamped-button-submit {
    pointer-events: auto !important;
}
.shop-banner {
    width: 100%;
    height: 100%;
}

@media(min-width: 576px) {
    .shop-banner {
        height: 292px;
    }
}


@media(min-width: 768px) {
    .shop-banner {
        height: 189px;
    }
}

@media(min-width: 992px) {
    .shop-banner {
        height: 258px;
    }
}

@media(min-width: 1200px) {
    .shop-banner {
        height: 310px;
    }
}

li::marker {
  color: #2d2d2d;
  list-style-type: square !important;
}
.product-description ul {
    list-style-type: square !important;
}

.table thead th {
    font-weight:700;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background: white;
    position: sticky;
    top: 0;
}
.table tbody td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.card-copyaction {
    position: absolute;
    top: 7rem;
    z-index: 1;
}
.card-cartaction {
    position: absolute;
    top: 13rem;
    z-index: 1;
}
.card-deleteaction {
    position: absolute;
    top: 1rem;
    z-index: 1;
}
.card-shareaction {
    position: absolute;
    top: 10rem;
    z-index: 1;
}

.header-link {
    color: currentColor !important;
}
/** Password reveal **/
.user-box {
  position: relative;
  margin-bottom: 30px;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #333;
}
.password-toggle-icon {
  position: absolute;
  top: 62%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}

.shadow {
    box-shadow: 0 .25rem .25rem rgba(17, 17, 17, .3)!important;
}

/** Checkbox styles **/
.checkbox-wrapper-4 * {
    box-sizing: border-box;
  }
  .checkbox-wrapper-4 .cbx {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: inline-block;
  }
  .checkbox-wrapper-4 .cbx:not(:last-child) {
    margin-right: 6px;
  }
  .checkbox-wrapper-4 .cbx:hover {
    background: rgba(0,119,255,0.06);
  }
  .checkbox-wrapper-4 .cbx span {
    float: left;
    vertical-align: middle;
    transform: translate3d(0, 0, 0);
  }
  .checkbox-wrapper-4 .cbx span:first-child {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    transform: scale(1);
    border: 1px solid #cccfdb;
    transition: all 0.2s ease;
    box-shadow: 0 1px 1px rgba(0,16,75,0.05);
  }
  .checkbox-wrapper-4 .cbx span:first-child svg {
    position: absolute;
    top: 3px;
    left: 2px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16px;
    stroke-dashoffset: 16px;
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    transform: translate3d(0, 0, 0);
  }
  .checkbox-wrapper-4 .cbx span:last-child {
    padding-left: 8px;
    line-height: 18px;
  }
  .checkbox-wrapper-4 .cbx:hover span:first-child {
    border-color: #07f;
  }
  .checkbox-wrapper-4 .inp-cbx {
    position: absolute;
    visibility: hidden;
  }
  .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
    background: #07f;
    border-color: #07f;
    animation: wave-4 0.4s ease;
  }
  .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
    stroke-dashoffset: 0;
  }
  .checkbox-wrapper-4 .inline-svg {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    user-select: none;
  }
  @media screen and (max-width: 640px) {
    .checkbox-wrapper-4 .cbx {
      width: 100%;
      display: inline-block;
    }
  }
  @-moz-keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
  @-webkit-keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
  @-o-keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
  @keyframes wave-4 {
    50% {
      transform: scale(0.9);
    }
  }
/** Photo Prints Highlight Color **/.px-photo-prints {
    --highlight-color: #22356c;
    --highlight-color-light: #d6eefa;
}

.px-toggle {
	display: inline-block;
	margin-bottom: 1rem;
}

.px-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.px-toggle-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.px-toggle-name {
	font-size: 0.8rem;
	line-height: 1.2;
	color: #9aa0a6;
	transition: color 0.25s ease;
	user-select: none;
}

.px-toggle-name-off {
	color: #191c1d;
	font-weight: 600;
}

.px-toggle-control {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 56px;
	height: 30px;
	border: 3px solid #cfcfcf;
	border-radius: 15px;
	background: #ffffff;
	box-sizing: border-box;
	transition: border-color 0.25s ease;
}

.px-toggle-hit {
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	margin: 0;
	border-radius: 15px;
	cursor: pointer;
}

.px-toggle-hit-on {
	z-index: 2;
}

.px-toggle-hit-off {
	z-index: 1;
	pointer-events: none;
}

.px-toggle-knob {
	position: absolute;
	top: 50%;
	left: 2px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 50%;
	background: #cfcfcf;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

/* ON state: second value selected */
.px-toggle-input-on:checked ~ .px-toggle-row .px-toggle-control {
	border-color: #1a3a6b;
}

.px-toggle-input-on:checked ~ .px-toggle-row .px-toggle-knob {
	transform: translateX(26px);
	background-color: #1a3a6b;
}

.px-toggle-input-on:checked ~ .px-toggle-row .px-toggle-name-off {
	color: #9aa0a6;
	font-weight: 400;
}

.px-toggle-input-on:checked ~ .px-toggle-row .px-toggle-name-on {
	color: #191c1d;
	font-weight: 600;
}

/* Swap click targets so the control flips on tap/click */
.px-toggle-input-on:checked ~ .px-toggle-row .px-toggle-hit-on {
	z-index: 1;
	pointer-events: none;
}

.px-toggle-input-on:checked ~ .px-toggle-row .px-toggle-hit-off {
	z-index: 2;
	pointer-events: auto;
}

/* Keyboard focus ring */
.px-toggle-input:focus-visible ~ .px-toggle-row .px-toggle-control {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}
.px-toggle-no-labels .px-toggle-name {
	display: none;
}

/** Slider option **/
.variant-selector label.field-label input[name="variants[push-pull]"] + .label-text {
    max-width:86px !important;
}

.slidecontainer {
  width: 100%;
  padding-top:12px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background: #e9e9e9;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1a3a6b;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  cursor: pointer;
}
/** Multi Upload Group Styling **/
px-multi-image-upload {
    --handle-width: 18px;
    --handle-gap: 8px;
}

px-multi-image-upload .px-title {
    margin: 0;
    padding: 0.5em 0 2px;
}

px-multi-image-upload .px-title label {
    margin-bottom: 0;
}

px-multi-image-upload .image-uploads-wrapper {
    border-left: 1px dashed #aaa;
    padding-left: 0.75em;
}

px-multi-image-upload :not(.px-multi-upload-button-container[hidden]) + .image-uploads-wrapper {
    margin-top: 1em;
}

px-multi-image-upload px-option {
    display: block;
    outline-offset: -1px;
}
px-image-upload {
    margin-bottom: 1rem;
}

px-multi-image-upload px-image-upload {
    padding: 4px;
    transition: background-color 0.2s;
}

px-multi-image-upload[data-drag-active="true"] px-image-upload {
    opacity: 0.5;
    outline: 2px dashed #aaa;
}

px-multi-image-upload[data-drag-active="true"] px-option[data-dropzone-active="true"] px-image-upload {
    background-color: #1a3a6b;
    outline-color: #1a3a6b;
}

px-multi-image-upload px-image-upload .px-thumbnail {
    align-items: center;
    cursor: pointer;
    display: flex !important;
    padding-left: calc(var(--handle-width) + var(--handle-gap));
    position: relative;
}

px-multi-image-upload px-image-upload .px-thumbnail::before {
    --vertical-margin: 4px;
    background-color: #1a3a6b;
    background-image: url('data:image/svg+xml,<svg width="800" height="800" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 8C10.3284 8 11 7.32843 11 6.5C11 5.67157 10.3284 5 9.5 5C8.67157 5 8 5.67157 8 6.5C8 7.32843 8.67157 8 9.5 8ZM9.5 14C10.3284 14 11 13.3284 11 12.5C11 11.6716 10.3284 11 9.5 11C8.67157 11 8 11.6716 8 12.5C8 13.3284 8.67157 14 9.5 14ZM11 18.5C11 19.3284 10.3284 20 9.5 20C8.67157 20 8 19.3284 8 18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5ZM15.5 8C16.3284 8 17 7.32843 17 6.5C17 5.67157 16.3284 5 15.5 5C14.6716 5 14 5.67157 14 6.5C14 7.32843 14.6716 8 15.5 8ZM17 12.5C17 13.3284 16.3284 14 15.5 14C14.6716 14 14 13.3284 14 12.5C14 11.6716 14.6716 11 15.5 11C16.3284 11 17 11.6716 17 12.5ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z" fill="%23fff"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 4px;
    box-sizing: border-box;
    color: #fff;
    content: "";
    display: block;
    height: calc(100% - 2 * var(--vertical-margin));
    left: 0;
    position: absolute;
    width: var(--handle-width);
}
.checkout-page {
    background-color: #f6f6f6;
}
/** custom admin border radius setting **/
.px-rounded {
    border-radius: 6px;
}
.px-rounded-top {
    border-radius: 6px 6px 0 0;
}
.px-rounded-bottom {
    border-radius: 0 0 6px 6px;
}
.card-outline-address {
    outline: 1px solid #d6eefa;
}
.card-outline-address:hover {
    outline: 2px solid #22356c;
}
.no-crop {
    width: 100%;  /* Makes it responsive */
    height: auto; /* Keeps original aspect ratio */
    object-fit: contain; /* Ensures the full image is visible */
    max-width: 100vw; /* Prevents overflow */
}
/* Scroll to top button */
#scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: #22356c;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1001;
}

/* Button hover effect */
#scrollToTopBtn:hover {
    background-color: #02529e;
}

/* Show the button */
#scrollToTopBtn.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
/** Show 2nd image on hover for variants **/
.picture2 {
    display: none;
}
.thumbnail:hover .picture1 {
    display: none;
}
.thumbnail:hover .picture2 {
    display: block;
}
#gdpr-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  z-index: 9999;
  font-family: sans-serif;
}
#gdpr-banner h2 {
  margin: 0 0 10px 0;
}
#gdpr-banner p {
  font-size: 14px;
  margin-bottom: 10px;
}
#gdpr-banner .gdpr-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.gdpr-btn {
  padding: 10px 16px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}
/**
.gdpr-btn.accept {
  background-color: #007bff;
  color: white;
}
.gdpr-btn.deny {
  background-color: #e4e6eb;
  color: #333;
}
**/
.gdpr-links {
  font-size: 12px;
  margin-top: 8px;
}
.gdpr-links a {
  margin-right: 10px;
  color: #007bff;
  text-decoration: none;
}
.badge-dark {
    color: #ffffff;
    background-color: #000000;
}
/* ===== START: Google Reviews ===== */
.google-stars {
    color: #ecbe2d;
    line-height: 1;
}
.google-stars-lg {
    font-size: 1.25rem;
}
.google-stars-md {
    font-size: 1.2rem;
}
.google-star-empty {
    opacity: 0.3;
}
.google-star-half {
    position: relative;
    display: inline-block;
    width: 1.1em;
}
.google-star-half__fill {
    position: absolute;
    overflow: hidden;
    width: 50%;
}
.google-summary__logo {
    height: 24px;
}
@media (max-width: 576px) {
    .google-stars-lg {
        font-size: 0.85rem;
    }
    .google-stars-md {
        font-size: 1rem;
    }
    .google-summary .h5 {
        font-size: 1rem;
    }
    .google-summary__logo {
        height: 16px;
    }
    .google-summary b {
        font-size: 0.85rem;
    }
    .google-summary .btn {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    .google-ratings-total {
        font-size: 0.8rem;
    }
}
/* ===== END: Google Reviews ===== */
/** reduce padding on user account menu on mobile screens **/
@media (max-width: 767.98px) {
    .list-group-sm .list-group-item {
        padding: 0.5rem 1.25rem;
        font-size: 0.85rem;
    }
    h3, .h3 {
        font-size: 1.5rem;
    }
    body {
        font-size: 90%;
    }
    .btn {
        font-size: 90%;
    }
    .text-primary {
        font-size: 90%;
    }
    .navbar {
        padding: 1rem 1rem;
    }
    .btn-xxs {
        height: calc(1.40625rem + .375rem + 2px);
        padding: .125rem .75rem;
        font-size: .8rem;
    }
    .list-group-lg .list-group-item {
        padding: 1rem 1rem;
    }
    .main.cart .quantity {
        padding-top:10px;
    }
    .main.cart .quantity input {
        font-size: 0.9rem;
    }
    .shipping-available {
        font-size: 80% !important;
    }
}
/** increase weight of active menu item in account menu **/
.account-nav span.active {
    font-weight: 600;
}
/* ===== START: photo stack preview ===== */
.photo-stack-wrapper {
	--ps-radius: 2px;
	display: inline-block;
	position: relative;
	max-width: 100%;
	line-height: 0;
	margin: 0 6px 6px 0;
}

.photo-stack-wrapper > a {
	display: block;
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: var(--ps-radius);
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.photo-stack-wrapper px-project-preview::part(img) {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 200px;
	border-radius: var(--ps-radius);
}

.photo-stack-layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	border-radius: var(--ps-radius);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	pointer-events: none;
}

.photo-stack-layer.layer-1 {
	z-index: 1;
	transform: translate(3px, 3px);
}

.photo-stack-layer.layer-2 {
	z-index: 0;
	transform: translate(6px, 6px);
}

.photo-stack-wrapper .image-count-badge {
	z-index: 3;
	line-height: 1;
	white-space: nowrap;
	border-radius: 4px;
}
/* ===== END: photo stack preview ===== */
/** animate cut print quantity badge in cart **/
.image-count-badge {
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: default;
}

.image-count-badge .extra-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.image-count-badge:hover .extra-label {
  max-width: 40px;
  opacity: 1;
  margin-left: 0.25rem;
}
/** animate icons in cart **/
.cart-action-icon {
  transition: transform 0.2s ease;
}

a:hover .cart-action-icon,
button:hover .cart-action-icon {
  transform: translateX(3px);
}
.animate-promo {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.animate-promo.fade-out {
  opacity: 0;
  transform: translateX(20px);
}
/** Filters **/
.dropdown-toggle::after {
	content:none;
}

.filter-fab {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1030; /* above content but below modals */
	border-radius: 999px;
	box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}
/* Promo error animation */
.promo-error {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.promo-error.show {
	opacity: 1;
	transform: translateY(0);
}
/* Global overflow fix
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}
*/
/* Fix Bootstrap modal scrollbar compensation */
.modal {
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow-x: hidden !important;
}

body.modal-open {
    overflow-x: hidden !important;
}

#modalPromotions .promo-cta {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;

	height: auto !important;
	line-height: 1.2;

	word-break: break-word;
	overflow-wrap: anywhere;
	max-width: 100%;
}


/* Prevent gallery overflow */
.px-product-gallery,
.px-display,
.px-navigation {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
/* ==========================================================
START: PRODUCT INVENTORY BADGE STYLES
Purpose:
Visual badge styling for product inventory status
========================================================== */

.px-stock-badge-wrap {
	line-height: 1;
}

.px-stock-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 8px 12px;
	font-size: 13px;
	border: 1px solid rgba(0,0,0,0.10);
	box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	user-select: none;
}

/* In Stock */

.px-stock-in {
	background: rgba(40, 167, 69, 0.10);
	color: #1f7a32;
	border-color: rgba(40, 167, 69, 0.25);
}

/* Limited Stock */

.px-stock-limited {
	background: rgba(255, 193, 7, 0.14);
	color: #9a6a00;
	border-color: rgba(255, 193, 7, 0.35);
}

/* Low Stock */

.px-stock-low {
	background: rgba(220, 53, 69, 0.12);
	color: #b21f2d;
	border-color: rgba(220, 53, 69, 0.30);
	animation: px-stock-pulse 1.6s ease-in-out infinite;
}

/* Out of Stock */

.px-stock-out {
	background: rgba(220, 53, 69, 0.12);
	color: #b21f2d;
	border-color: rgba(220, 53, 69, 0.30);
}

/* Pulse animation for urgency */

@keyframes px-stock-pulse {
	0% { transform: translateY(0); }
	50% { transform: translateY(-1px); }
	100% { transform: translateY(0); }
}

/* Mobile adjustments */

@media (max-width: 576px) {
	.px-stock-badge {
		padding: 9px 12px;
		font-size: 13px;
	}
}

/* ==========================================================
END: PRODUCT INVENTORY BADGE STYLES
========================================================== */
/* Collection description callout */
.collection-description-callout {
    background-color: #fff3cd;
    border: 1px solid #ffeaa0;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    padding: 16px 20px;
    color: #664d03;
    font-size: 0.95rem;
    line-height: 1.6;
}
.collection-description-callout:empty {
    display: none;
}
.collection-description-callout p:last-child {
    margin-bottom: 0;
}
/* ===== START: Color Palette Dropdown ===== */
.color-palette-dropdown .dropdown-toggle {
	padding: 0.4rem 0.75rem;
	font-size: 0.875rem;
	background-color: #fff;
}
.color-palette-dropdown .dropdown-toggle::after {
	margin-left: auto;
}
.color-palette-dropdown-menu {
	max-height: 260px;
	overflow-y: auto;
	padding: 0.25rem 0;
}
.cp-dd-swatch-preview,
.cp-dd-swatch {
	display: inline-block;
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 3px;
	border: 1px solid #ddd;
	margin-right: 0.5rem;
}
.cp-dd-label-preview,
.cp-dd-label {
	font-size: 0.8rem;
	color: #333;
}
.color-palette-dropdown-menu .dropdown-item {
	padding: 0.35rem 0.75rem;
}
.color-palette-dropdown-menu .dropdown-item.active,
.color-palette-dropdown-menu .dropdown-item:active {
	background-color: #f0f0f0;
	color: #333;
}
.color-palette-dropdown-menu .dropdown-item:hover {
	background-color: #f8f8f8;
}
/* ===== END: Color Palette Dropdown ===== */
/* ===== START: Account V2 Shell =====

   Structural layout for the account v2 two-column shell:
   sidebar navigation + content area.
   Scoped entirely under .acv2 to avoid leakage.

   Uses site theme tokens via Liquid snippets for colors
   and border-radius. Falls back to sensible defaults if
   snippets are empty.

   ===== */

/* --- Custom properties (scoped) --- */
.acv2 {
	--acv2-accent: #1a3a6b;
	--acv2-accent-soft: #1a3a6b1a;
	--acv2-text: #1a1a1b;
	--acv2-text-muted: rgba(0, 0, 0, 0.50);
	--acv2-bg-page: #f5f6f8;
	--acv2-bg-card: rgba(255, 255, 255, 0.55);
	--acv2-border: rgba(0, 0, 0, 0.06);
	--acv2-radius: 6px;
	--acv2-radius-lg: 18px;
	--acv2-shadow: 0 14px 40px rgba(16, 24, 40, 0.10);
	--acv2-shadow-sm: 0 4px 16px rgba(16, 24, 40, 0.06);
	background: var(--acv2-bg-page);
	padding: 28px 0 60px;
}

/* --- Shell grid --- */
.acv2__shell {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* --- Sidebar --- */
.acv2-sidebar {
	position: sticky;
	top: 90px;
	background: var(--acv2-bg-card);
	border: 1px solid var(--acv2-border);
	border-radius: var(--acv2-radius-lg);
	box-shadow: var(--acv2-shadow);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	overflow: hidden;
}

.acv2-sidebar__head {
	padding: 16px 16px 12px 16px;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: rgba(0, 0, 0, 0.75);
	border-bottom: 1px solid var(--acv2-border);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.70),
		rgba(255, 255, 255, 0.35)
	);
}

.acv2-sidebar__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 14px;
	margin: 2px 6px;
	border-radius: 14px;
	color: rgba(0, 0, 0, 0.70);
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.acv2-sidebar__item:hover {
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 10px 26px rgba(16, 24, 40, 0.08);
	transform: translateY(-1px);
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none !important;
}

.acv2-sidebar__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.55;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.acv2-sidebar__chev svg {
	width: 18px;
	height: 18px;
}

.acv2-sidebar__item:hover .acv2-sidebar__chev {
	opacity: 0.85;
	transform: translateX(1px);
}

.acv2-sidebar__item.is-active {
	background: var(--acv2-accent-soft);
	box-shadow: inset 0 0 0 1px var(--acv2-accent-soft);
}

.acv2-sidebar__item.is-active .acv2-sidebar__label {
	color: rgba(0, 0, 0, 0.85);
	font-weight: 800;
}

.acv2-sidebar__item.is-active .acv2-sidebar__chev {
	opacity: 1;
	color: var(--acv2-accent);
}

.acv2-sidebar__divider {
	height: 1px;
	margin: 6px 10px;
	background: rgba(0, 0, 0, 0.07);
}

.acv2-sidebar__item.is-logout {
	background: rgba(255, 255, 255, 0.35);
}

.acv2-sidebar__item.is-logout:hover {
	background: rgba(220, 53, 69, 0.08);
	box-shadow: 0 10px 26px rgba(220, 53, 69, 0.10);
}

/* --- Page header --- */
.acv2-page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.acv2-page-title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
	color: var(--acv2-text);
}

.acv2-page-sub {
	color: var(--acv2-text-muted);
	font-size: 14px;
	margin: 0;
}

.acv2-page-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.acv2-accent {
	color: var(--acv2-accent);
}

/* --- Content area --- */
.acv2__content {
	min-width: 0;
}

/* --- Cards --- */
.acv2-card {
	background: var(--acv2-bg-card);
	border: 1px solid var(--acv2-border);
	border-radius: var(--acv2-radius-lg);
	box-shadow: var(--acv2-shadow-sm);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.acv2-card--pad {
	padding: 24px;
}

/* --- Section headers --- */
.acv2-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.acv2-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--acv2-text-muted);
}

.acv2-section-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--acv2-accent);
	text-decoration: none !important;
}

.acv2-section-link:hover {
	text-decoration: underline !important;
}

/* --- Form card (for info/addresses/dates forms) --- */
.acv2-form-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 18px;
	color: var(--acv2-text);
}

/* --- Status pills --- */
.acv2-pill {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.acv2-pill--shipped {
	background: #dbe7fb;
	color: #1a56db;
}

.acv2-pill--confirmed {
	background: #dff4e6;
	color: #0f7d3a;
}

.acv2-pill--delivered {
	background: #f0f1f3;
	color: #5b6271;
}

.acv2-pill--pending {
	background: #fbeacc;
	color: #9a5a06;
}

.acv2-pill--primary {
	background: var(--acv2-accent-soft);
	color: var(--acv2-accent);
}

.acv2-pill--neutral {
	background: #f0f1f3;
	color: #5b6271;
}

/* --- Empty state --- */
.acv2-empty {
	text-align: center;
	padding: 48px 24px;
}

.acv2-empty__icon {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--acv2-accent-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.acv2-empty__icon svg {
	width: 24px;
	height: 24px;
	opacity: 0.6;
}

.acv2-empty__title {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 6px;
}

.acv2-empty__sub {
	font-size: 14px;
	color: var(--acv2-text-muted);
	max-width: 360px;
	margin: 0 auto;
}

/* --- Dot separator --- */
.acv2-dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.25);
	vertical-align: middle;
	margin: 0 2px;
}

/* --- Icon circle buttons --- */
.acv2-icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--acv2-border);
	background: rgba(255, 255, 255, 0.88);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.acv2-icon-btn:hover {
	background: rgba(0, 0, 0, 0.04);
	color: rgba(0, 0, 0, 0.85);
}

.acv2-icon-btn svg {
	width: 15px;
	height: 15px;
}

/* --- Responsive --- */
@media (max-width: 991px) {
	.acv2 {
		padding: 16px 0 40px;
	}

	.acv2__shell {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 16px;
	}

	.acv2-sidebar {
		position: static;
	}

	.acv2-page-title {
		font-size: 24px;
	}

	.acv2-page-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

@media (max-width: 575px) {
	.acv2-page-title {
		font-size: 20px;
	}

	.acv2-page-actions {
		width: 100%;
	}

	.acv2-page-actions .account-g2-search {
		flex: 1;
	}
}
/* ===== START: Account V2 Dashboard + Orders CSS ===== */

/* ===== START: Account v2 welcome heading load animation ===== */
@keyframes acv2FadeUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes acv2Type {
	from {
		max-width: 0;
	}
	to {
		max-width: calc(var(--acv2-name-len, 12) * 1.15ch);
	}
}

@keyframes acv2Caret {
	0%, 100% {
		border-right-color: transparent;
	}
	50% {
		border-right-color: currentColor;
	}
}

.acv2-page-title {
	animation: acv2FadeUp 0.5s ease-out both;
}

.acv2-typing {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
	max-width: 0;
	border-right: 3px solid transparent;
	animation:
		acv2Type 1.2s steps(12, end) 0.5s both,
		acv2Caret 0.7s step-end 0.5s 4 forwards;
}

.acv2-page-sub {
	animation: acv2FadeUp 0.5s ease-out 1.8s both;
}

@media (prefers-reduced-motion: reduce) {
	.acv2-page-title,
	.acv2-page-sub,
	.acv2-typing {
		animation: none;
		max-width: none;
		border-right-color: transparent;
	}
}
/* ===== END: Account v2 welcome heading load animation ===== */

/* --- Dashboard grid (two-col layout) --- */
.acv2-dash-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 24px;
	align-items: start;
}

.acv2-dash-main {
	min-width: 0;
}

.acv2-dash-side {
	min-width: 0;
}

@media (max-width: 991px) {
	.acv2-dash-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Order rows (used in orders page + dashboard) --- */
.acv2-order-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	flex-wrap: wrap;
}

.acv2-order-row--first {
	border-top: none;
}

.acv2-order-meta {
	flex: 1 1 auto;
	min-width: 0;
}

.acv2-order-code {
	font-weight: 700;
	font-size: 14px;
	font-family: ui-monospace, 'SF Mono', monospace;
}

.acv2-order-sub {
	font-size: 13px;
	color: rgba(0, 0, 0, 0.50);
	margin-top: 2px;
}

.acv2-order-status {
	flex-shrink: 0;
}

.acv2-order-total {
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0;
	min-width: 70px;
	text-align: right;
}

.acv2-order-actions {
	flex-shrink: 0;
}

@media (max-width: 575px) {
	.acv2-order-row {
		gap: 8px 12px;
		padding: 12px 14px;
	}

	.acv2-order-total {
		font-size: 14px;
	}
}

/* --- Date rows (used in dates page) --- */
.acv2-date-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.acv2-date-row--first {
	border-top: none;
}

.acv2-date-info {
	flex: 1 1 auto;
	min-width: 0;
}

.acv2-date-actions {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
/* ── account v2: order details ── */
.acv2-back {
	margin-bottom: 4px;
}
.acv2-back__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #6b7280;
	text-decoration: none;
}
.acv2-back__link svg {
	width: 14px;
	height: 14px;
	transform: rotate(180deg);
}
.acv2-back__link:hover {
	color: #111;
}

.acv2-detail-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 767px) {
	.acv2-detail-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.acv2-detail-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	margin-bottom: 4px;
}
.acv2-detail-value {
	font-size: 14px;
	font-weight: 600;
	color: #111;
}

.acv2-card__head {
	padding: 20px 24px 12px;
	font-size: 15px;
	font-weight: 600;
	color: #111;
}

.acv2-lineitem {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid #f3f4f6;
}
.acv2-lineitem--first {
	border-top: none;
}
.acv2-lineitem__thumb {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: #f9fafb;
}
.acv2-lineitem__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
px-project-preview.acv2-lineitem__img::part(img) {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.acv2-lineitem__body {
	flex: 1;
	min-width: 0;
}
.acv2-lineitem__name {
	font-size: 14px;
	font-weight: 600;
	color: #111;
	margin-bottom: 2px;
}
.acv2-lineitem__price {
	font-size: 13px;
	color: #6b7280;
	margin-bottom: 4px;
}
.acv2-lineitem__option {
	font-size: 12px;
	color: #6b7280;
}
.acv2-lineitem__actions {
	flex-shrink: 0;
}
@media (max-width: 767px) {
	.acv2-lineitem {
		flex-wrap: wrap;
	}
	.acv2-lineitem__actions {
		width: 100%;
		margin-top: 8px;
	}
}

.acv2-totals__row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: #6b7280;
	padding: 6px 0;
}
.acv2-totals__row--total {
	border-top: 1px solid #e5e7eb;
	margin-top: 8px;
	padding-top: 14px;
	font-size: 16px;
	font-weight: 700;
	color: #111;
}

.acv2-delivery-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 767px) {
	.acv2-delivery-grid {
		grid-template-columns: 1fr;
	}
}
.acv2-delivery-address {
	font-size: 14px;
	color: #6b7280;
	line-height: 1.6;
}
/* ── order details: card spacing ── */
.acv2-order-detail .acv2-card + .acv2-card {
	margin-top: 16px;
}
.acv2-order-detail .acv2-page-head {
	margin-bottom: 16px;
}
/* ===== END: Account V2 Dashboard + Orders CSS ===== */

/* ===== END: Account V2 Shell ===== */
/* ============================================================
   Shop All — placeholder for collections without an image
   ============================================================ */

.shop-all-placeholder {
	width: 100%;
	padding-top: 100%;
	position: relative;
	background: #e9ecef;
}

.shop-all-placeholder span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #adb5bd;
	font-size: 2.5rem;
	font-weight: 700;
	text-transform: uppercase;
}




.pxload {
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}
.pxload.is-active { opacity: 1; visibility: visible; }

/* Top progress bar */
body.loader--progress-bar .pxload { inset: 0 0 auto 0; height: 3px; background: transparent; }
body.loader--progress-bar .pxload .pxload-bar {
	height: 100%;
	width: 0;
	background: #1a3a6b;
	box-shadow: 0 0 8px 1px #1a3a6b;
}
body.loader--progress-bar .pxload.is-active .pxload-bar {
	animation: pxload-bar 4s ease-out forwards;
}
@keyframes pxload-bar {
	0%   { width: 0; }
	8%   { width: 32%; }
	45%  { width: 62%; }
	100% { width: 92%; }
}

/* Shared scrim for the centred styles. White at 90%; adjust if a site uses a dark background. */
body.loader--arc .pxload,
body.loader--orbit .pxload,
body.loader--dots .pxload {
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
}
body.loader--arc .pxload.is-active,
body.loader--orbit .pxload.is-active,
body.loader--dots .pxload.is-active { pointer-events: auto; }

/* Slim arc */
body.loader--arc .pxload-arc {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.08);
	border-top-color: #1a3a6b;
}
body.loader--arc .pxload.is-active .pxload-arc { animation: pxload-spin .85s linear infinite; }

/* Dual orbit */
body.loader--orbit .pxload-orbit { position: relative; width: 52px; height: 52px; }
body.loader--orbit .pxload-orbit .r { position: absolute; border-radius: 50%; border: 3px solid transparent; }
body.loader--orbit .pxload-orbit .r1 { inset: 0; border-top-color: #1a3a6b; }
body.loader--orbit .pxload-orbit .r2 { inset: 9px; border-bottom-color: #1a1a1b; }
body.loader--orbit .pxload.is-active .r1 { animation: pxload-spin 1s linear infinite; }
body.loader--orbit .pxload.is-active .r2 { animation: pxload-spin 1.4s linear infinite reverse; }

/* Dot wave */
body.loader--dots .pxload-dots { display: flex; gap: 10px; }
body.loader--dots .pxload-dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #1a3a6b;
}
body.loader--dots .pxload.is-active .pxload-dots i { animation: pxload-wave 1s ease-in-out infinite; }
body.loader--dots .pxload.is-active .pxload-dots i:nth-child(2) { animation-delay: .15s; }
body.loader--dots .pxload.is-active .pxload-dots i:nth-child(3) { animation-delay: .3s; }

/* Content dissolve: entrance animation on the arriving page, no overlay */
body.loader--dissolve { animation: pxload-dissolve .5s ease both; }

@keyframes pxload-spin { to { transform: rotate(360deg); } }
@keyframes pxload-wave {
	0%, 100% { transform: translateY(0); opacity: .55; }
	40%      { transform: translateY(-11px); opacity: 1; }
}
@keyframes pxload-dissolve {
	0%   { filter: blur(10px); opacity: 0; }
	100% { filter: blur(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.pxload .pxload-bar,
	.pxload .pxload-arc,
	.pxload .pxload-orbit .r,
	.pxload .pxload-dots i {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
	}
	body.loader--dissolve { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS (single source of truth — scoped to kiosk)
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen {
	/* Surfaces & colour */
	--k-bg:          #eef0f4;
	--k-card:        #ffffff;
	--k-card-soft:   #f5f6f8;
	--k-text1:       #14181f;
	--k-text2:       #4a5568;
	--k-text3:       #8898a8;
	--k-muted:       #aab4be;
	--k-border:      #e7eaee;
	--k-border-s:    #d4d8df;
	--k-accent:      #1a3a6b;
	--k-accent-h:    color-mix(in srgb, var(--k-accent) 85%, #000);
	--k-accent-bg:   color-mix(in srgb, var(--k-accent) 8%, transparent);
	--k-accent-tint: color-mix(in srgb, var(--k-accent) 55%, #fff);
	--k-shadow:      0 2px 12px rgba(20, 24, 31, 0.06);
	--k-shadow-h:    0 8px 32px rgba(20, 24, 31, 0.12);
	--k-danger-text: #c0392b;
	--k-danger-bg:   rgba(192, 57, 43, 0.06);

	/* ── Border-radius scale — single source of truth ──
	   Change a value here and every kiosk surface wired to it updates.
	   Fully-round pills/badges and the loading spinner are intentionally
	   off this scale. */
	--k-radius-sm:   12px;   /* inputs, size/orientation filter tiles */
	--k-radius-md:   14px;   /* buttons, option tiles */
	--k-radius-lg:   16px;   /* cards, add to cart, cart line items */
	--k-radius-xl:   20px;   /* login card, modals */
	--k-radius-2xl:  24px;   /* home hero tiles, gallery card */
	--k-radius-pill: 999px;  /* fully-round pills + badges */

	/* Touch sizing (60px primary standard) */
	--k-input-height:      60px;
	--k-input-radius:      var(--k-radius-sm);
	--k-btn-login-height:  60px;
	--k-btn-login-radius:  var(--k-radius-md);
	--k-tab-height:        56px;
	--k-login-card-radius: var(--k-radius-xl);
	--k-cta-height:        68px;   /* Design Now / Add to Cart + matched qty input */
}
}

/* ══════════════════════════════════════════════════════════
   GENERAL KIOSK BODY OVERRIDES
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen {
	background: var(--k-bg);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	overflow-x: hidden;
}

/* Allow text selection only where the customer types */
.kiosk-touchscreen input,
.kiosk-touchscreen textarea {
	user-select: text;
	-webkit-user-select: text;
}

/* Hide standard Shopper nav, footer, promo bars, breadcrumbs
   — all replaced by the kiosk top-rail */
.kiosk-touchscreen .navbar,
.kiosk-touchscreen footer,
.kiosk-touchscreen .footer,
.kiosk-touchscreen .header__promotion,
.kiosk-touchscreen .header__bottom-promotion,
.kiosk-touchscreen .nav-promo-bar,
.kiosk-touchscreen .gdpr-banner,
.kiosk-touchscreen .cookie-consent,
.kiosk-touchscreen .breadcrumb-wrapper,
.kiosk-touchscreen .d-none.d-md-block:has(.breadcrumb) {
	display: none !important;
}

/* Remove top margin that accounts for the standard navbar */
.kiosk-touchscreen .main,
.kiosk-touchscreen .pt-md-7 {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Coupon input — hidden when kiosk-hide-coupon is active (class added via Liquid) */
.kiosk-touchscreen .k-hide-coupon .coupon-form,
.kiosk-touchscreen .k-hide-coupon [data-coupon],
.kiosk-touchscreen .k-hide-coupon .cart-coupon {
	display: none !important;
}

/* Shipping option — hidden when kiosk-hide-shipping is active */
.kiosk-touchscreen .k-hide-shipping .shipping-option,
.kiosk-touchscreen .k-hide-shipping [data-shipping-option],
.kiosk-touchscreen .k-hide-shipping .checkout-shipping-row {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   CLEANUP — remove duplicate / non-functional chrome
   These hide markup immediately. The proper fix is to also
   remove the source snippets (see notes), but this stops the
   double headers / backs / dead button on the live kiosk now.
   ══════════════════════════════════════════════════════════ */
/* 1. Hide the legacy injected top bar (.kiosk-bar).
      .k-rail is the canonical header (Start Over JS, idle screen
      and sticky bar are all wired to it). */
body.kiosk-touchscreen .kiosk-bar {
	display: none !important;
}
/* Undo the top padding the .kiosk-bar snippet forced onto <body>
   (it sets `body { padding-top: 64px !important }`). */
body.kiosk-touchscreen {
	padding-top: 0 !important;
	background: var(--k-bg) !important;
}

/* 2. (Removed) The rail's old "Back" button was replaced by the
      Home / Log out / Cart / Account buttons in the kiosk/top-rail
      snippet, so the left group is shown normally now. */

/* 3. Hide the "Start Uploading Photos" sticky bar on the
      photo-prints page — it triggers nothing here and the
      right-hand panel already carries the real Add to Cart CTA. */
body:has(#photo-prints-container) #kiosk-sticky-bar {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   LOGIN / REGISTRATION PAGE
   Single centred card, tab switching between Sign In and
   Create Account. Inherits the tokens above.
   ══════════════════════════════════════════════════════════ */
/* ── Page background ── */
.kiosk-touchscreen .k-login-page {
	min-height: calc(100vh - 72px);
	display: flex;
	align-items: center;
	padding: 2rem 0;
	background: var(--k-bg);
}

/* ── Header: eyebrow + heading ── */
.kiosk-touchscreen .k-login-header {
	margin-bottom: 2rem;
}
.kiosk-touchscreen .k-login-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-accent);
	margin-bottom: 0.5rem;
}
.kiosk-touchscreen .k-login-title {
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--k-text1);
	line-height: 1.2;
	margin-bottom: 0.5rem;
}
.kiosk-touchscreen .k-login-sub {
	font-size: 0.95rem;
	color: var(--k-text2);
	margin-bottom: 0;
}
.kiosk-touchscreen .k-login-sub strong {
	color: var(--k-text1);
}

/* ── Card ── */
.kiosk-touchscreen .k-login-card {
	background: var(--k-card);
	border: 1px solid var(--k-border);
	border-radius: var(--k-login-card-radius);
	box-shadow: var(--k-shadow);
	overflow: hidden;
}

/* ── Tab navigation (pill-style, side by side) ── */
.kiosk-touchscreen .k-login-tabs {
	display: flex;
	padding: 1.25rem 1.5rem 0;
	gap: 0.5rem;
	border-bottom: none;
}
.kiosk-touchscreen .k-tab-item {
	flex: 1;
}
.kiosk-touchscreen .k-tab-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: var(--k-tab-height);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--k-text2);
	background: transparent;
	border: 1px solid var(--k-border-s);
	border-radius: 12px;
	padding: 0 1rem;
	transition: background 120ms, color 120ms, border-color 120ms;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .k-tab-link:hover,
.kiosk-touchscreen .k-tab-link.is-touching {
	color: var(--k-text1);
	border-color: var(--k-text2);
	text-decoration: none;
}
.kiosk-touchscreen .k-tab-link.active,
.kiosk-touchscreen .k-tab-link.active:hover {
	color: var(--k-text1);
	background: var(--k-card-soft);
	border-color: var(--k-text1);
	font-weight: 700;
}
.kiosk-touchscreen .k-tab-icon {
	display: none;
}

/* ── Tab content area ── */
.kiosk-touchscreen .k-tab-content {
	padding: 1.5rem;
}

/* ── Form labels ── */
.kiosk-touchscreen .k-login-card label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--k-text2);
	margin-bottom: 0.3rem;
}

/* ── Inputs (60px height for touch) ── */
.kiosk-touchscreen .k-input {
	height: var(--k-input-height);
	font-size: 1rem;
	border-color: var(--k-border-s);
	border-radius: var(--k-input-radius) !important;
	padding: 0.5rem 1rem;
	transition: border-color 120ms, box-shadow 120ms;
}
.kiosk-touchscreen .k-input:focus {
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px var(--k-accent-bg);
}

/* ── Password toggle ── */
.kiosk-touchscreen .k-password-wrap {
	position: relative;
}
.kiosk-touchscreen .k-password-wrap .k-input {
	padding-right: 3.5rem;
}
.kiosk-touchscreen .k-password-toggle {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--k-text3);
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .k-password-toggle svg {
	width: 22px;
	height: 22px;
}

/* ── Login / register buttons (60px, full width, with arrow) ──
   Scoped to .k-login-card so they don't collide with the
   global .k-btn touch button defined further down. */
.kiosk-touchscreen .k-login-card .k-btn {
	width: 100%;
	height: var(--k-btn-login-height);
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--k-btn-login-radius);
	margin-top: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.kiosk-touchscreen .k-btn-arrow {
	flex-shrink: 0;
}

/* ── Forgot password link ── */
.kiosk-touchscreen .k-forgot-link {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--k-text1);
	text-decoration: none;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.kiosk-touchscreen .k-forgot-link:hover {
	text-decoration: underline;
}

/* ── Terms link ── */
.kiosk-touchscreen .k-terms {
	font-size: 0.8rem;
	color: var(--k-text2);
}
.kiosk-touchscreen .k-terms a {
	color: var(--k-accent);
}

/* ── Captcha wrapper ── */
.kiosk-touchscreen .k-captcha-wrap {
	margin-bottom: 0.5rem;
}

/* ── Alert overrides ── */
.kiosk-touchscreen .k-alert {
	font-size: 0.9rem;
	border-radius: var(--k-input-radius);
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.kiosk-touchscreen .k-alert svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.kiosk-touchscreen .k-alert-danger {
	color: var(--k-danger-text);
	background: var(--k-danger-bg);
	border: 1px solid var(--k-danger-bg);
}

/* ── Staff hint ── */
.kiosk-touchscreen .k-login-staff-hint {
	font-size: 0.8rem;
	color: var(--k-muted);
}

/* ── Kiosk password-reset modal overrides ── */
.kiosk-touchscreen #modalPasswordReset .modal-content {
	border-radius: var(--k-login-card-radius);
}
.kiosk-touchscreen #modalPasswordReset .form-control {
	height: var(--k-input-height);
	font-size: 1rem;
	border-radius: var(--k-input-radius);
}
.kiosk-touchscreen #modalPasswordReset .btn {
	height: var(--k-btn-login-height);
	font-size: 1rem;
	border-radius: var(--k-btn-login-radius);
}
.kiosk-touchscreen #modalPasswordReset .close {
	min-width: 44px;
	min-height: 44px;
}

/* ══════════════════════════════════════════════════════════
   TOP RAIL
   ══════════════════════════════════════════════════════════ */
.k-rail {
	position: sticky;
	top: 0;
	z-index: 200;
	height: 72px;
	background: var(--k-card);
	border-bottom: 1px solid var(--k-border);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0 24px;
	gap: 16px;
	box-shadow: 0 1px 8px rgba(20, 24, 31, 0.05);
}
.k-rail-left  { display: flex; align-items: center; justify-self: start; gap: 10px; }
.k-rail-right { display: flex; align-items: center; justify-self: end; gap: 10px; }
.k-rail-brand {
	display: flex; align-items: center; gap: 12px; justify-self: center;
}
.k-rail-brand .k-logo {
	width: 36px; height: 36px; border-radius: 10px;
	background: linear-gradient(135deg, var(--k-accent), var(--k-accent-tint));
	color: white; font-weight: 800; font-size: 16px;
	display: grid; place-items: center;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 8px color-mix(in srgb, var(--k-accent) 25%, transparent);
	overflow: hidden;
}
.k-rail-brand .k-logo img {
	width: 100%; height: 100%; object-fit: contain;
}
.k-rail-brand .k-brand-text {
	font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
	display: flex; flex-direction: column; line-height: 1.1; color: var(--k-text1);
}
.k-rail-brand .k-brand-text small {
	font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--k-text3); margin-top: 2px;
}
.k-rail-btn {
	display: inline-flex; align-items: center; gap: 10px;
	height: 52px; padding: 0 20px;
	border-radius: 999px;
	font-size: 15px; font-weight: 600;
	color: var(--k-text2);
	background: var(--k-card);
	border: 1px solid var(--k-border-s);
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms, color 120ms;
	-webkit-tap-highlight-color: transparent;
}
.k-rail-btn:hover,
.k-rail-btn.is-touching { background: var(--k-card-soft); color: var(--k-text1); text-decoration: none; }
/* Logo links home */
.k-rail-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.k-rail-logo-link:hover { text-decoration: none; }
/* Cart button + live count badge */
.k-rail-cart { position: relative; }
.k-rail-cart-badge {
	position: absolute; top: -4px; right: -4px;
	min-width: 22px; height: 22px; padding: 0 6px;
	border-radius: 999px;
	background: var(--k-accent); color: #fff;
	font-size: 12px; font-weight: 800; line-height: 22px; text-align: center;
}
.k-rail-status {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 700;
	color: var(--k-text2);
	background: var(--k-card-soft);
	border: 1px solid var(--k-border);
	padding: 6px 12px 6px 10px;
	border-radius: 999px;
}
.k-rail-dot {
	width: 8px; height: 8px; border-radius: 999px;
	background: #18a957;
	box-shadow: 0 0 0 3px rgba(24, 169, 87, 0.18);
}

/* ══════════════════════════════════════════════════════════
   HOME SCREEN (kiosk/home snippet)
   ══════════════════════════════════════════════════════════ */
.k-home {
	min-height: calc(100vh - 72px);
	display: flex; flex-direction: column; justify-content: center;
	padding: 32px 32px 120px; /* bottom pad for sticky bar */
	gap: 28px;
}
.k-home-inner {
	max-width: 1000px; margin: 0 auto; width: 100%;
}
.k-home-head { text-align: center; margin-bottom: 32px; }
.k-home-title {
	font-size: 38px; font-weight: 800; letter-spacing: -0.025em;
	margin: 0 0 10px; color: var(--k-text1);
}
.k-home-sub {
	font-size: 18px; color: var(--k-text2); margin: 0;
}
.k-home-tiles {
	display: grid; gap: 24px;
}
.k-home-tiles--two { grid-template-columns: 1fr 1fr; }
.k-home-tiles--one { grid-template-columns: 1fr; }
.k-tile {
	position: relative; border-radius: 24px;
	background: var(--k-card); box-shadow: var(--k-shadow);
	border: 1px solid var(--k-border);
	cursor: pointer; overflow: hidden;
	padding: 32px 32px 26px;
	min-height: 280px;
	display: flex; flex-direction: column; justify-content: space-between;
	transition: box-shadow 200ms ease, transform 180ms ease;
	text-decoration: none; color: inherit;
	-webkit-tap-highlight-color: transparent;
}
.k-tile:hover,
.k-tile.is-touching { box-shadow: var(--k-shadow-h); transform: translateY(-3px); text-decoration: none; color: inherit; }
.k-tile--dark {
	background: linear-gradient(160deg, #1a1f2a 0%, #0e1218 100%);
	border-color: rgba(255,255,255,0.06);
}
/* ── Tile photo — sits on the right, fades into the tile on its left edge ──
   Upload kiosk-prints.jpg and kiosk-film.jpg in Pixfizz; they load via asset_url.
   If asset_url doesn't resolve to your uploaded files, paste the image URL directly
   into the two url(...) values below. */
.k-tile-art {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}
/* Left-edge fade so the photo blends into the tile and never sits behind text */
.k-tile-art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0) 62%);
}
.k-tile--dark .k-tile-art::after {
	background: linear-gradient(to right, #161b24 0%, rgba(22,27,36,0.6) 30%, rgba(22,27,36,0) 62%);
}
.k-tile-art--prints { background-image: url('https://cdn.pixfizz.com/fz/38c5925112/0/I90O9csn2BsN9YueX-5IWzOr6ze3xTBxEBU9wculhdE/~/kiosk-prints.jpg'); }
.k-tile-art--film   { background-image: url('https://cdn.pixfizz.com/fz/fe62a55864/0/SZSXqvQd7m74i5en_kYtMH4XNp40cYvEoGrs7JmQmPM/~/kiosk-film.jpg'); }

/* Keep the text and footer above the photo and clear of it */
.k-tile-content { position: relative; z-index: 2; max-width: 52%; }
.k-tile-foot { position: relative; z-index: 2; }
.k-tile-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--k-accent); margin-bottom: 4px;
}
.k-tile--dark .k-tile-eyebrow { color: #ffb878; }
.k-tile-title {
	font-size: 32px; font-weight: 800; letter-spacing: -0.025em;
	margin: 10px 0 6px; line-height: 1.05; color: var(--k-text1);
}
.k-tile--dark .k-tile-title { color: #f5f6f8; }
.k-tile-desc { font-size: 15px; color: var(--k-text2); line-height: 1.5; max-width: 300px; }
.k-tile--dark .k-tile-desc { color: rgba(245,246,248,0.7); }
.k-tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.k-tile-hint { font-size: 12.5px; font-weight: 600; color: var(--k-text3); }
.k-tile--dark .k-tile-hint { color: rgba(245,246,248,0.5); }
.k-tile-arrow {
	width: 52px; height: 52px; border-radius: 999px;
	background: var(--k-accent); color: white;
	display: grid; place-items: center;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--k-accent) 32%, transparent);
}
.k-tile--dark .k-tile-arrow { background: white; color: #1a1f2a; box-shadow: 0 6px 16px rgba(0,0,0,0.4); }
.k-home-escape {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin-top: 8px; font-size: 14px; color: var(--k-text3); font-weight: 600;
}
.k-home-escape-line { display: none; }
.k-home-escape-link {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 52px;
	color: var(--k-text1); padding: 14px 28px; border-radius: 999px;
	font-size: 16px; font-weight: 700;
	background: var(--k-card);
	border: 1px solid var(--k-border-s);
	box-shadow: var(--k-shadow);
	text-decoration: none;
	transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
}
.k-home-escape-link:hover { background: var(--k-card-soft); color: var(--k-text1); border-color: var(--k-text3); box-shadow: var(--k-shadow-h); text-decoration: none; }

/* ══════════════════════════════════════════════════════════
   STICKY CTA BAR
   ══════════════════════════════════════════════════════════ */
.k-sticky-bar {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	z-index: 150;
	background: var(--k-card);
	border-top: 1px solid var(--k-border);
	padding: 16px 24px;
	display: flex; align-items: center; gap: 14px;
	box-shadow: 0 -4px 20px rgba(20, 24, 31, 0.08);
}
.k-sticky-bar .k-info-note {
	flex: 1;
	display: flex; align-items: center; gap: 10px;
	font-size: 14px; color: var(--k-text2);
}
.k-sticky-bar .k-info-note strong { color: var(--k-text1); font-weight: 800; }
.k-sticky-bar .k-info-note .ico {
	width: 28px; height: 28px; border-radius: 999px;
	background: var(--k-accent-bg); color: var(--k-accent);
	display: grid; place-items: center; flex-shrink: 0;
}
.k-sticky-actions {
	display: flex; align-items: center; gap: 10px;
}

/* ══════════════════════════════════════════════════════════
   TOUCH BUTTONS (global .k-btn — rail, sticky bar, home, etc.)
   ══════════════════════════════════════════════════════════ */
.k-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 60px; padding: 0 28px;
	border-radius: 14px;
	font-size: 16px; font-weight: 700; letter-spacing: -0.005em;
	cursor: pointer; white-space: nowrap;
	transition: background 120ms, color 120ms, box-shadow 120ms, transform 80ms;
	border: none; text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.k-btn:active,
.k-btn.is-touching { transform: translateY(1px); }
.k-btn-primary {
	background: var(--k-accent); color: white;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 16px color-mix(in srgb, var(--k-accent) 28%, transparent);
}
.k-btn-primary:hover,
.k-btn-primary.is-touching { background: var(--k-accent-h); color: white; text-decoration: none; }
.k-btn-secondary {
	background: var(--k-card); color: var(--k-text1);
	border: 1px solid var(--k-border-s);
}
.k-btn-secondary:hover { background: var(--k-card-soft); }

/* ══════════════════════════════════════════════════════════
   IDLE / ATTRACTOR SCREEN
   ══════════════════════════════════════════════════════════ */
.k-idle-screen {
	position: fixed; inset: 0;
	z-index: 9999;
	display: flex; flex-direction: column;
	background: linear-gradient(155deg, #f4f6fa 0%, #eef0f4 45%, #ece6dd 100%);
	cursor: pointer;
	/* Hidden by default — JS adds .is-visible */
	opacity: 0; pointer-events: none;
	transition: opacity 600ms ease;
}
.k-idle-screen.is-visible {
	opacity: 1; pointer-events: auto;
}
.k-idle-bg {
	position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.k-idle-bg .bg-glow {
	position: absolute; border-radius: 999px;
	filter: blur(90px); opacity: 0.55;
}
.k-idle-bg .bg-glow-a {
	width: 700px; height: 700px; left: -180px; top: -240px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--k-accent) 32%, transparent), transparent 70%);
	animation: idle-drift-a 12s ease-in-out infinite alternate;
}
.k-idle-bg .bg-glow-b {
	width: 620px; height: 620px; right: -160px; bottom: -180px;
	background: radial-gradient(closest-side, rgba(241,176,107,0.30), transparent 70%);
	animation: idle-drift-b 14s ease-in-out infinite alternate;
}
@keyframes idle-drift-a {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(28px, 20px) scale(1.06); }
}
@keyframes idle-drift-b {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(-24px, -16px) scale(1.05); }
}
.k-idle-bg .bg-grid {
	position: absolute; inset: 0;
	background-image: radial-gradient(circle at center, rgba(20,24,31,0.05) 1px, transparent 1.2px);
	background-size: 24px 24px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.k-idle-content {
	position: relative; flex: 1;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	padding: 60px; gap: 48px;
}
/* Brand stack */
.k-idle-brand {
	display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.k-idle-logo { position: relative; width: 110px; height: 110px; }
.k-idle-logo .halo {
	position: absolute; inset: 0; border-radius: 32px;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--k-accent) 28%, transparent), transparent 72%);
	pointer-events: none;
}
.k-idle-logo .halo-1 { inset: -16px; animation: idle-breathe 4.5s ease-in-out infinite; }
.k-idle-logo .halo-2 { inset: -34px; animation: idle-breathe 4.5s ease-in-out -1.5s infinite; opacity: 0.6; }
.k-idle-logo .halo-3 { inset: -54px; animation: idle-breathe 4.5s ease-in-out -3s infinite; opacity: 0.32; }
@keyframes idle-breathe {
	0%, 100% { transform: scale(0.9); opacity: 0.4; }
	50%      { transform: scale(1.1); opacity: 0.85; }
}
.k-idle-logo .mark {
	position: relative; width: 100%; height: 100%;
	border-radius: 28px;
	background: linear-gradient(135deg, var(--k-accent), var(--k-accent-tint));
	color: white; font-weight: 800; font-size: 52px; letter-spacing: -0.04em;
	display: grid; place-items: center; overflow: hidden;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.4),
		0 16px 40px color-mix(in srgb, var(--k-accent) 28%, transparent),
		0 4px 12px rgba(20,24,31,0.08);
}
.k-idle-logo .mark img { width: 70%; height: 70%; object-fit: contain; }
.k-idle-name {
	font-size: 50px; font-weight: 800; letter-spacing: -0.03em;
	color: var(--k-text1); margin: 0; line-height: 1;
}
.k-idle-tag {
	font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
	text-transform: uppercase; color: var(--k-text3); margin: 0;
}
/* Tap CTA */
.k-idle-cta {
	position: relative; display: flex; flex-direction: column;
	align-items: center; gap: 16px; padding: 8px 0;
}
.k-idle-cta .cta-aura {
	position: absolute; left: 50%; top: 50%;
	width: 440px; height: 120px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--k-accent) 14%, transparent), transparent 70%);
	border-radius: 999px;
	animation: idle-aura 3s ease-in-out infinite;
	pointer-events: none;
}
@keyframes idle-aura {
	0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.85); }
	50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}
.k-idle-cta .cta-line {
	position: relative; font-size: 34px; font-weight: 700;
	letter-spacing: -0.022em; color: var(--k-text1); margin: 0;
}
.k-idle-cta .cta-bar {
	position: relative; display: block;
	width: 52px; height: 5px; border-radius: 999px;
	background: var(--k-accent);
	box-shadow: 0 0 20px color-mix(in srgb, var(--k-accent) 42%, transparent);
	animation: idle-bar 2.4s ease-in-out infinite;
	transform-origin: center;
}
@keyframes idle-bar {
	0%, 100% { transform: scaleX(0.5); opacity: 0.5; }
	50%      { transform: scaleX(1);   opacity: 1; }
}
/* Value props */
.k-idle-props {
	display: flex; align-items: center; gap: 16px;
	font-size: 15px; font-weight: 600; color: var(--k-text2);
}
.k-idle-props .prop { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.k-idle-props .prop .ico {
	width: 36px; height: 36px; border-radius: 11px;
	background: var(--k-card); border: 1px solid var(--k-border);
	color: var(--k-accent); display: grid; place-items: center;
	box-shadow: 0 2px 8px rgba(20,24,31,0.06);
}
.k-idle-props .prop-dot {
	width: 4px; height: 4px; border-radius: 999px;
	background: var(--k-muted); opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT / PDP / CART / CHECKOUT KIOSK ADJUSTMENTS
   Larger tap targets, clearance for the sticky bar
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-details,
.kiosk-touchscreen .product-page,
.kiosk-touchscreen .product-details-prints {
	padding-bottom: 100px; /* clear sticky bar */
}
/* Make primary product buttons large touch targets */
.kiosk-touchscreen .btn-design-now,
.kiosk-touchscreen .btn-start-creating,
.kiosk-touchscreen .btn-add-to-cart,
.kiosk-touchscreen .product-cta .btn-primary {
	min-height: 60px !important;
	font-size: 16px !important;
	border-radius: 14px !important;
	padding: 0 28px !important;
}
/* Cart page kiosk overrides */
.kiosk-touchscreen .cart,
.kiosk-touchscreen section.main.cart {
	padding-bottom: 100px !important;
}
/* Checkout page kiosk overrides */
.kiosk-touchscreen .checkout-page,
.kiosk-touchscreen .checkout {
	padding-bottom: 100px !important;
}

/* Native Shopper form controls — comfortable for finger use */
.kiosk-touchscreen .form-control,
.kiosk-touchscreen .custom-select,
.kiosk-touchscreen select {
	min-height: 56px;
	font-size: 1.05rem;
}

/* ── Photo-prints size steppers → round +/- like the cart ──
   Light DOM, but the component sets its own button radius/fill,
   so the visual props are forced. Scoped to the prints panel. */
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: max-content;
	background: transparent;
	border: 0;
	padding: 0;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	border-radius: 999px !important;
	background: var(--k-card) !important;
	border: 1px solid var(--k-border-s) !important;
	color: var(--k-text1) !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.05);
	transition: background 120ms, border-color 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button:hover {
	background: var(--k-card-soft) !important;
	border-color: var(--k-text3) !important;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button:active {
	transform: scale(0.92);
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button:disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity button svg {
	width: auto !important;
	height: 20px !important;
}
/* Quantity number (a tappable <span>) */
.kiosk-touchscreen .px-photo-prints .px-print-sizes .px-quantity span {
	min-width: 32px;
	text-align: center;
	font-size: 17px;
	font-weight: 800;
	color: var(--k-text1);
	cursor: pointer;
}

/* ══════════════════════════════════════════════════════════
   CART PAGE — card-based layout (kiosk)
   Restyles the standard Shopper cart markup toward the kiosk
   card design. Scoped to .kiosk-touchscreen .main.cart so it
   can't leak to other pages.
   ══════════════════════════════════════════════════════════ */
/* Use more of the wide kiosk screen + breathing room top/bottom */
.kiosk-touchscreen .main.cart {
	padding-top: 40px !important;
}
.kiosk-touchscreen .main.cart > .container {
	max-width: 1440px;
	padding-left: 32px;
	padding-right: 32px;
}

/* ── Heading: left-aligned, bold, with an eyebrow ── */
.kiosk-touchscreen .main.cart h3 {
	text-align: left !important;
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--k-text1);
	margin-bottom: 30px;
}
.kiosk-touchscreen .main.cart h3::before {
	content: "Review your order";
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--k-accent);
	margin-bottom: 6px;
}

/* ── Line-item cards ── */
.kiosk-touchscreen .main.cart .list-group-lg {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.kiosk-touchscreen .main.cart .list-group-lg > .list-group-item {
	background: var(--k-card);
	border: 1px solid var(--k-border) !important;
	border-radius: 16px;
	box-shadow: var(--k-shadow);
	padding: 26px 28px;
}
/* Rounded thumbnail (px-project-preview image lives in shadow DOM) */
.kiosk-touchscreen .main.cart .list-group-item img,
.kiosk-touchscreen .main.cart .list-group-item px-project-preview {
	border-radius: 12px;
	overflow: hidden;
}
.kiosk-touchscreen .main.cart .list-group-item px-project-preview::part(img) {
	border-radius: 12px;
}
/* edit pill under the thumbnail */
.kiosk-touchscreen .main.cart .btn-light.btn-xxs {
	border-radius: 999px;
	border: 1px solid var(--k-border-s);
	background: var(--k-card-soft);
	padding: 5px 16px;
	font-weight: 600;
}
/* Title + price */
.kiosk-touchscreen .main.cart .list-group-item .font-weight-bolder a {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
}
.kiosk-touchscreen .main.cart .list-group-item .font-weight-bolder .ml-auto {
	font-size: 18px;
	font-weight: 800;
	color: var(--k-text1);
	white-space: nowrap;
}
/* Options meta — muted secondary text */
.kiosk-touchscreen .main.cart .list-group-item .d-flex[style*="0.8em"] {
	color: var(--k-text3);
	font-size: 13px !important;
	line-height: 1.7;
	margin-bottom: 10px;
}

/* ── Quantity stepper → pill with round +/- (non-cut-print only;
      cut-print lines render "{n} prints" text and have no .quantity) ── */
.kiosk-touchscreen .main.cart .quantity {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--k-card-soft);
	border: 1px solid var(--k-border);
	border-radius: 999px;
	padding: 6px;
}
.kiosk-touchscreen .main.cart .quantity .minus-btn,
.kiosk-touchscreen .main.cart .quantity .plus-btn {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--k-card);
	border: 1px solid var(--k-border-s);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--k-text1);
	padding: 0;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.05);
	transition: background 120ms, border-color 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .main.cart .quantity .minus-btn:hover,
.kiosk-touchscreen .main.cart .quantity .plus-btn:hover {
	background: var(--k-card-soft);
}
.kiosk-touchscreen .main.cart .quantity .minus-btn:active,
.kiosk-touchscreen .main.cart .quantity .plus-btn:active {
	transform: scale(0.94);
}
.kiosk-touchscreen .main.cart .quantity .minus-btn svg,
.kiosk-touchscreen .main.cart .quantity .plus-btn svg {
	width: 22px;
	height: 22px;
}
.kiosk-touchscreen .main.cart .quantity input {
	width: 52px;
	height: 48px;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 18px;
	font-weight: 800;
	color: var(--k-text1);
	padding: 0;
}
.kiosk-touchscreen .main.cart .quantity input:focus {
	outline: none;
	box-shadow: none;
}
/* Remove control — muted */
.kiosk-touchscreen .main.cart .list-group-item .text-gray-400 {
	color: var(--k-text3) !important;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* ── Right column: order summary card ── */
.kiosk-touchscreen .main.cart .card.bg-light {
	background: var(--k-card) !important;
	border: 1px solid var(--k-border);
	border-radius: 16px;
	box-shadow: var(--k-shadow);
}
.kiosk-touchscreen .main.cart .card.bg-light .card-body {
	padding: 24px 26px;
}
.kiosk-touchscreen .main.cart .card.bg-light .card-body::before {
	content: "Order summary";
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: var(--k-text1);
	margin-bottom: 10px;
}
/* Summary rows: flat, not cards */
.kiosk-touchscreen .main.cart .card.bg-light .list-group-item {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 10px 0 !important;
	color: var(--k-text2);
}
/* Big total row (the bold Subtotal line) gets a divider + size bump */
.kiosk-touchscreen .main.cart .card.bg-light .list-group-item.font-weight-bold {
	border-top: 1px solid var(--k-border) !important;
	margin-top: 6px;
	padding-top: 14px;
	font-size: 20px !important;
	color: var(--k-text1);
}
.kiosk-touchscreen .main.cart .card.bg-light .list-group-item.font-weight-bold .ml-auto {
	font-size: 20px !important;
	font-weight: 800;
}

/* ── Coupon: tidy rounded input ── */
.kiosk-touchscreen .main.cart #cartCouponCode {
	height: 56px;
	border-radius: 12px;
	font-size: 1rem;
	border-color: var(--k-border-s);
}
.kiosk-touchscreen .main.cart .form-row .btn.btn-primary {
	border-radius: 12px;
	min-height: 56px;
}

/* ── Continue Shopping / Clear Cart buttons ── */
.kiosk-touchscreen .main.cart .cart-action-btn {
	border-radius: 12px !important;
	border: 1px solid var(--k-border-s) !important;
	background: var(--k-card) !important;
	color: var(--k-text1) !important;
	min-height: 56px;
	font-weight: 600;
}
.kiosk-touchscreen .main.cart .cart-action-btn:hover {
	background: var(--k-card-soft) !important;
}

/* Footer-only checkout on kiosk: hide the in-panel "Proceed to Checkout"
   so the only checkout button is the sticky footer. Scoped to kiosk +
   the cart only — the public shop's button is never touched. */
.kiosk-touchscreen .main.cart #checkoutBtn {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT PAGE — kiosk
   Scoped to .kiosk-touchscreen .checkout-page. Visual only —
   no order/payment logic touched. The public shop checkout has
   no .kiosk-touchscreen body class, so none of this applies there.
   ══════════════════════════════════════════════════════════ */
/* Width + breathing room, matching the cart */
.kiosk-touchscreen .checkout-page {
	padding-top: 40px !important;
}
.kiosk-touchscreen .checkout-page > .container {
	max-width: 1440px;
	padding-left: 32px;
	padding-right: 32px;
}

/* Section headings (Delivery / Store Locations / Contact / Payment / Order Summary) */
.kiosk-touchscreen .checkout-page h6.font-weight-bolder {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
	margin: 4px 0 14px;
}
.kiosk-touchscreen .checkout-page h6.font-size-lg.font-weight-bolder {
	font-size: 22px;
}

/* Section cards → white, rounded, soft shadow */
.kiosk-touchscreen .checkout-page .card.px-rounded {
	background: var(--k-card) !important;
	border: 1px solid var(--k-border) !important;
	border-radius: 16px !important;
	box-shadow: var(--k-shadow) !important;
	overflow: hidden;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .list-group-item {
	border-color: var(--k-border);
}

/* Nested totals card inside Order Summary → flatten so it isn't a box-in-a-box */
.kiosk-touchscreen .checkout-page .card.px-rounded .card {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card .card-body {
	padding: 4px 0 !important;
}
/* Big bold Total row */
.kiosk-touchscreen .checkout-page .list-group-item.font-weight-bolder {
	font-size: 18px !important;
	color: var(--k-text1);
	border-top: 1px solid var(--k-border);
	margin-top: 6px;
	padding-top: 12px !important;
}

/* Option rows (delivery + payment-method radios) → touch size + selected state */
.kiosk-touchscreen .checkout-page label.list-group-item {
	min-height: 64px;
	cursor: pointer;
	transition: background 120ms, box-shadow 120ms;
}
.kiosk-touchscreen .checkout-page label.list-group-item:has(.custom-control-input:checked) {
	background: var(--k-accent-bg);
	box-shadow: inset 0 0 0 2px var(--k-accent);
	border-radius: 12px;
}
.kiosk-touchscreen .checkout-page .custom-control-label {
	font-size: 1.05rem !important;
}

/* Film-delivery / rush radios → selectable pills */
.kiosk-touchscreen .checkout-page .field-label {
	display: block;
	border: 1px solid var(--k-border-s);
	border-radius: 12px;
	overflow: hidden;
	cursor: pointer;
	transition: background 120ms, border-color 120ms;
}
.kiosk-touchscreen .checkout-page .field-label .label-text {
	display: block;
	padding: 16px;
	text-align: center;
	font-weight: 600;
	font-size: 1rem;
}
.kiosk-touchscreen .checkout-page .field-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.kiosk-touchscreen .checkout-page .field-label:has(input:checked) {
	border-color: var(--k-accent);
	background: var(--k-accent-bg);
}

/* Inputs / selects / textarea (sizing comes from the global 56px rule) — just round */
.kiosk-touchscreen .checkout-page .form-control,
.kiosk-touchscreen .checkout-page .custom-select {
	border-radius: 12px;
	border-color: var(--k-border-s);
}

/* Full-width CTA buttons (payment / order) → big, brand-coloured */
.kiosk-touchscreen .checkout-page .btn-block {
	min-height: 58px;
	font-size: 16px;
	font-weight: 700;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.kiosk-touchscreen .checkout-page .btn-block.btn-primary,
.kiosk-touchscreen .checkout-page .btn-block.btn-dark {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
}
.kiosk-touchscreen .checkout-page .btn-block.btn-primary:hover,
.kiosk-touchscreen .checkout-page .btn-block.btn-dark:hover {
	background: var(--k-accent-h);
	border-color: var(--k-accent-h);
	color: #fff;
}
/* The real "place order" button gets the most weight */
.kiosk-touchscreen .checkout-page #pixfizz-pay-at-store .btn {
	min-height: 64px;
	font-size: 18px;
}
/* Small inline Save buttons stay modest but finger-friendly */
.kiosk-touchscreen .checkout-page .btn-xs,
.kiosk-touchscreen .checkout-page .btn-sm:not(.btn-block) {
	min-height: 44px;
}

/* Footer-only-checkout decision: the sticky footer can't reliably submit
   payment, so hide it on checkout (the in-panel button is the real CTA).
   Only matches on the kiosk checkout — the cart keeps its footer. */
body.kiosk-touchscreen:has(.checkout-page) #kiosk-sticky-bar {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════
   CHECKOUT PAGE — kiosk polish (cart-matched)
   Flows top-down like the cart. The previous "fit 1920×1080"
   version force-centred the row and stretched the left column,
   which shoved Store Locations to the bottom and left an
   L-shaped void. Removed — only safe, non-layout polish kept.
   ══════════════════════════════════════════════════════════ */
/* Section headings */
.kiosk-touchscreen .checkout-page h6.font-weight-bolder {
	margin: 0 0 12px !important;
}
/* Card padding */
.kiosk-touchscreen .checkout-page .card.px-rounded > .list-group-item {
	padding: 20px !important;
}
/* Order Summary — product line */
.kiosk-touchscreen .checkout-page .list-group-item.px-rounded-top {
	padding: 18px 20px !important;
}
.kiosk-touchscreen .checkout-page .list-group-item.px-rounded-top img {
	max-height: 84px !important;
	width: auto !important;
}
.kiosk-touchscreen .checkout-page .list-group-item.px-rounded-top p.mb-4 {
	margin-bottom: 6px !important;
}
/* Totals block + hr spacing */
.kiosk-touchscreen .checkout-page .card.mb-2 {
	margin-bottom: 0 !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded hr {
	margin-top: 14px !important;
	margin-bottom: 14px !important;
}
/* Film + service-time selectors — trim oversized gaps but keep air */
.kiosk-touchscreen .checkout-page .variant-selector .mb-5 {
	margin-bottom: 4px !important;
}
.kiosk-touchscreen .checkout-page .variant-selector .mt-3 {
	margin-top: 12px !important;
}
.kiosk-touchscreen .checkout-page .variant-selector .px-title {
	margin-bottom: 0 !important;
}
/* Order notes — comfortable 3 rows */
.kiosk-touchscreen .checkout-page textarea.form-control {
	min-height: 84px !important;
	height: 84px !important;
}
/* Store-location tiles — clear selected state for touch */
.kiosk-touchscreen .checkout-page .card.card-lg.px-rounded {
	transition: box-shadow 120ms, border-color 120ms;
}
.kiosk-touchscreen .checkout-page .card.card-lg.px-rounded:has(.custom-control-input:checked) {
	border-color: var(--k-accent) !important;
	box-shadow: inset 0 0 0 2px var(--k-accent) !important;
	background: var(--k-accent-bg) !important;
}
/* ===== START: kiosk checkout — store-location radio position ===== */
/* pl-0 + Bootstrap's fixed -1.5rem dot offset pins the radio on the card
   edge. Move the dot to the control's left edge (off the border) and indent
   the text so the dot sits just left of it. Scoped to address cards only. */
.kiosk-touchscreen .checkout-page .card-outline-address .custom-control.custom-radio {
	padding-left: 1.75rem !important;
}
.kiosk-touchscreen .checkout-page .card-outline-address .custom-control-label::before,
.kiosk-touchscreen .checkout-page .card-outline-address .custom-control-label::after {
	left: 0;
}
/* ===== END: kiosk checkout — store-location radio position ===== */

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.k-home-tiles--two { grid-template-columns: 1fr; }
	.k-home-title { font-size: 30px; }
	.k-tile-title { font-size: 26px; }
	.k-idle-name { font-size: 38px; }
	.k-idle-cta .cta-line { font-size: 26px; }
	.k-idle-props { flex-wrap: wrap; justify-content: center; gap: 10px; }
}

@media (max-width: 767.98px) {
	.kiosk-touchscreen .k-login-page {
		padding: 1.5rem 0;
		align-items: flex-start;
	}
	.kiosk-touchscreen .k-login-header {
		margin-bottom: 1.5rem;
	}
	.kiosk-touchscreen .k-login-title {
		font-size: 1.5rem;
	}
	.kiosk-touchscreen .k-login-tabs {
		padding: 1rem 1rem 0;
	}
	.kiosk-touchscreen .k-tab-content {
		padding: 1.25rem 1rem;
	}
}
/* ══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE (PDP) — kiosk + touch only
   Restyles the standard Shopper buy flow toward the kiosk
   prototype: eyebrow + big title, step-numbered option groups,
   large tile selectors with a clear checked state, a restyled
   scanning dropdown, and a big brand Add to Cart CTA.

   Scoped to .kiosk-touchscreen and (for the option/CTA rules)
   to .product-form, so nothing leaks to the public storefront
   or to the kiosk cart / checkout (which style .field-label
   their own way). Visual only — no markup or logic touched.

   KNOWN CSS-ONLY LIMITS (by design, see notes to AdeB):
   - Scanning stays a native <select> styled as a big dropdown;
     it cannot become a tile row without markup changes.
   - Per-option helper subtitles ("Most common — Portra…") are
     not in the live data, so they can't be injected.
   - "Step N" numbering uses a CSS counter on .select-box. It
     relies on Pixfizz hiding inactive option groups with
     display:none (hidden groups are not counted). If the
     numbers ever read wrong, delete the .px-title label::before
     rule below — everything else is unaffected.
   ══════════════════════════════════════════════════════════ */

/* ── Wider use of the kiosk screen ── */
.kiosk-touchscreen .page-content > .container {
	max-width: 1320px;
}

/* ── Details column header: eyebrow + big title + big price ── */
.kiosk-touchscreen .product-details .product-category {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-accent);
	margin: 0 0 8px;
}
.kiosk-touchscreen .product-details .product-name {
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	color: var(--k-text1);
	margin: 0 0 12px;
}
.kiosk-touchscreen .product-details .product-price {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
	margin-bottom: 18px;
}
.kiosk-touchscreen .product-details .product-price px-product-price {
	font: inherit;
}

/* ── Gallery → soft rounded card, rounded image ── */
.kiosk-touchscreen .product-single .px-product-gallery {
	background: var(--k-card);
	border: 1px solid var(--k-border);
	border-radius: 24px;
	box-shadow: var(--k-shadow);
	padding: 20px;
}
.kiosk-touchscreen .product-single .px-product-gallery .px-display,
.kiosk-touchscreen .product-single .px-product-gallery .px-item,
.kiosk-touchscreen .product-single .px-product-gallery .px-item img {
	border-radius: 16px;
}
/* Gallery previews are <px-design-preview> web components — the
   internal <img> is in shadow DOM, so it must be rounded via
   ::part(img). Without this the square image corners poke past
   the rounded active/hover border on the thumbnails. */
.kiosk-touchscreen .product-single .px-product-gallery px-design-preview::part(img) {
	border-radius: 12px;
}
/* Keep the image a tidy card rather than a tall slab */
.kiosk-touchscreen .product-single .px-product-gallery .px-item img {
	max-height: 460px;
	object-fit: cover;
}

/* ══════════════════════════════════════════════════════════
   OPTION GROUPS — step eyebrow + title
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-form px-option-selector {
	counter-reset: k-step;
}
.kiosk-touchscreen .product-form .select-box {
	counter-increment: k-step;
	margin-bottom: 26px;
}
.kiosk-touchscreen .product-form .select-box .px-title {
	display: block;
	margin-bottom: 12px;
}
.kiosk-touchscreen .product-form .select-box .px-title label {
	position: relative;
	display: block;
	margin: 0;
	padding-top: 18px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--k-text1);
}
.kiosk-touchscreen .product-form .select-box .px-title label::before {
	content: "Step " counter(k-step);
	position: absolute;
	top: 0;
	left: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--k-accent);
}

/* ══════════════════════════════════════════════════════════
   TILE SELECTORS (radio .field-label)
   ══════════════════════════════════════════════════════════ */
/* Equal-height tiles across a row: make each column a flex cell so
   the tile fills it, even when one label wraps to two lines. */
.kiosk-touchscreen .product-form .select-box .row.d-flex {
	margin-left: -6px;
	margin-right: -6px;
	align-items: stretch;
}
.kiosk-touchscreen .product-form .select-box .row.d-flex > [class*="col-"] {
	display: flex;
	padding-left: 6px;
	padding-right: 6px;
	margin-bottom: 12px;
}

/* ── Neutralise the base Shopper option styling ──
   The stock theme turns each .label-text into its own bordered
   button and fills it solid on select. We want the .field-label
   tile to be the ONE container, so strip the inner element back
   to plain centred text. !important guards against the base
   rules which are similarly specific. */
.kiosk-touchscreen .product-form .field-label .label-text {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--k-text1) !important;
}

.kiosk-touchscreen .product-form .field-label {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 100%;
	min-height: 72px;
	margin: 0;
	padding: 12px 14px;
	background: var(--k-card);
	border: 2px solid var(--k-border-s);
	border-radius: 14px;
	box-shadow: var(--k-shadow);
	cursor: pointer;
	position: relative;
	transition: border-color 120ms, background 120ms, box-shadow 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .product-form .field-label:hover {
	border-color: var(--k-text3);
}
.kiosk-touchscreen .product-form .field-label:active,
.kiosk-touchscreen .product-form .field-label.is-touching {
	transform: translateY(1px);
}
/* Hide the native radio — the tile itself is the control */
.kiosk-touchscreen .product-form .field-label input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* Selected state — accent border + light tint + dark text + check badge.
   No solid fill: the badge carries the "selected" signal so the label
   stays readable. */
.kiosk-touchscreen .product-form .field-label:has(input:checked) {
	border-color: var(--k-accent);
	background: var(--k-accent-bg);
	box-shadow: var(--k-shadow);
}
.kiosk-touchscreen .product-form .field-label:has(input:checked) .label-text {
	color: var(--k-accent-h) !important;
}
.kiosk-touchscreen .product-form .field-label:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background-color: var(--k-accent);
	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='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
}

/* Base theme outlines the inner .label-img image on both hover and
   checked (custom.css ~1209), which double-stacks with the kiosk
   tile's own border + check badge. Kill the inner image outline in
   all states so the outer box is the single selected/hover signal. */
.kiosk-touchscreen .variant-selector label.field-label .label-img,
.kiosk-touchscreen .variant-selector label.field-label:hover .label-img,
.kiosk-touchscreen .variant-selector label.field-label input:checked + .label-img {
	outline: none !important;
}

/* ===== START: kiosk radius normalisation (base-theme 2px → tokens) ===== */
/* The stock theme ships 2px corners on the filter tiles (.label-text) and on
   base .btn buttons (e.g. Upload Image, Customize My Design). Point them at
   the kiosk radius scale so they match the rest of touch mode. */

/* Orientation + size filter tiles (theme sets .label-text radius to 2px) */
.kiosk-touchscreen .variant-selector label.field-label .label-text {
	border-radius: var(--k-radius-sm);
}

/* Base theme buttons inside the buy box (Upload Image, Customize My Design).
   The add-to-cart CTA keeps its own larger radius via a later !important rule. */
.kiosk-touchscreen .product-single .btn-primary {
	border-radius: var(--k-radius-md);
}
/* ===== END: kiosk radius normalisation ===== */

/* ===== START: kiosk PDP filter tiles — match option-tile selected state ===== */
/* Orientation / size filters render as .variant-selector .field-label with an
   inner .label-text. The stock theme gives them a teal outline and a solid
   orange fill when checked, which clashes with the option tiles' border + tint
   + badge. Restyle the inner label as the tile and recolour the states.
   Scoped to .product-single so the checkout variant selectors are untouched. */

/* Unselected: kiosk grey border instead of the theme's teal outline */
.kiosk-touchscreen .product-single .variant-selector label.field-label .label-text {
	outline: none !important;
	border: 2px solid var(--k-border-s) !important;
	background: var(--k-card) !important;
	color: var(--k-text1) !important;
	border-radius: var(--k-radius-md) !important;
}
.kiosk-touchscreen .product-single .variant-selector label.field-label:hover .label-text {
	border-color: var(--k-text3) !important;
}

/* Selected: accent border + tint + accent text (no solid fill) */
.kiosk-touchscreen .product-single .variant-selector label.field-label input:checked + .label-text {
	border-color: var(--k-accent) !important;
	background: var(--k-accent-bg) !important;
	color: var(--k-accent-h) !important;
}

/* Check badge, same as the option tiles */
.kiosk-touchscreen .product-single .variant-selector label.field-label {
	position: relative;
}
.kiosk-touchscreen .product-single .variant-selector label.field-label:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: var(--k-radius-pill);
	background-color: var(--k-accent);
	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='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
}
/* Quantity input on the buy box → kiosk rounded inputs, matched to the
   Design Now / Add to Cart CTA height (68px) so the two sit level. */
.kiosk-touchscreen .product-single .input-number input[type="number"] {
	height: var(--k-cta-height) !important;
	min-height: var(--k-cta-height) !important;
	border-radius: var(--k-radius-sm) !important;
	font-size: 20px;
	font-weight: 800;
	text-align: center;
	color: var(--k-text1);
}
/* ===== END: kiosk PDP filter tiles ===== */

/* ══════════════════════════════════════════════════════════
   SCANNING — native <select> styled as a big touch dropdown
   (cannot be tiled without markup changes)
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-form .select-box select.form-control {
	height: 64px;
	min-height: 64px;
	width: 100%;
	border: 1.5px solid var(--k-border-s);
	border-radius: 14px;
	background-color: var(--k-card);
	box-shadow: var(--k-shadow);
	font-size: 16px;
	font-weight: 600;
	color: var(--k-text1);
	padding: 0 50px 0 18px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238898a8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 18px;
}
.kiosk-touchscreen .product-form .select-box select.form-control:focus {
	border-color: var(--k-accent);
	box-shadow: 0 0 0 3px var(--k-accent-bg);
	outline: none;
}
.kiosk-touchscreen .card:has(.shop-all-placeholder),
.kiosk-touchscreen .card:has(.card-img-top) {
	border-radius: var(--k-radius-lg);
	overflow: hidden;
	box-shadow: var(--k-shadow);
}
.kiosk-touchscreen .card:has(.card-img-top) .card-img-top,
.kiosk-touchscreen .card:has(.shop-all-placeholder) .shop-all-placeholder {
	border-radius: 0;
}
/* ══════════════════════════════════════════════════════════
   ADD TO CART — big brand CTA
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-form .add-to-cart-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: var(--k-cta-height) !important;
	min-height: var(--k-cta-height) !important;
	margin-top: 0;
	padding: 0 28px !important;
	background: var(--k-accent);
	border: none;
	border-radius: 16px !important;
	color: #fff;
	font-size: 18px !important;
	font-weight: 800;
	letter-spacing: -0.01em;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
		0 6px 18px color-mix(in srgb, var(--k-accent) 30%, transparent);
	transition: background 120ms, transform 80ms;
	-webkit-tap-highlight-color: transparent;
}
.kiosk-touchscreen .product-form .add-to-cart-button::before {
	content: "";
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kiosk-touchscreen .product-form .add-to-cart-button:hover,
.kiosk-touchscreen .product-form .add-to-cart-button.is-touching {
	background: var(--k-accent-h);
	color: #fff;
	text-decoration: none;
}
.kiosk-touchscreen .product-form .add-to-cart-button:active {
	transform: translateY(1px);
}

/* ══════════════════════════════════════════════════════════
   LONG DESCRIPTION (below the buy box) — readable body text
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .product-description {
	font-size: 15px;
	line-height: 1.65;
	color: var(--k-text2);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — narrower kiosk / portrait
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
	.kiosk-touchscreen .product-details .product-name {
		font-size: 32px;
	}
	.kiosk-touchscreen .product-details .product-price {
		font-size: 26px;
	}
	.kiosk-touchscreen .product-form .field-label {
		min-height: 66px;
	}
}
/* ══════════════════════════════════════════════════════════
   STICKY BAR — cart-status note (product / prints pages)
   Pairs with the reworked kiosk/sticky-bar snippet: the whole
   note is a tap-through to the cart, with a "View cart" affordance
   pinned right. Empty state is plain text (.k-info-note, no link).
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen .k-sticky-bar a.k-info-note--link {
	text-decoration: none;
	color: var(--k-text2);
	transition: color 120ms;
}
.kiosk-touchscreen .k-sticky-bar a.k-info-note--link:hover {
	color: var(--k-text1);
	text-decoration: none;
}
.kiosk-touchscreen .k-sticky-bar .k-info-note__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	font-weight: 700;
	color: var(--k-accent);
}
/* ===== END: Kiosk PDP overlay ===== */
/* ══════════════════════════════════════════════════════════
   UPLOAD DIALOG (px-upload-dialog) — kiosk touch sizing
   The source buttons ship as .btn.btn-xs, so they're small and
   barely rounded. Scoped to .kiosk-touchscreen (body-level class),
   so the public storefront's dialog is untouched.
   ══════════════════════════════════════════════════════════ */

/* Stack the source buttons with breathing room */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Both source buttons → big, rounded touch targets */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn {
	width: 100%;
	min-height: var(--k-btn-login-height);   /* 60px */
	border-radius: var(--k-btn-login-radius); /* 14px */
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* Primary "This Device" — accent fill */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-primary {
	background: var(--k-accent);
	border-color: var(--k-accent);
	color: #fff;
}
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-primary:hover,
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-primary.is-touching {
	background: var(--k-accent-h);
	border-color: var(--k-accent-h);
	color: #fff;
}
/* Secondary "My Galleries" — outline that matches kiosk surfaces */
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-outline-secondary:not(.btn-primary) {
	background: var(--k-card);
	border: 1px solid var(--k-border-s);
	color: var(--k-text1);
}
.kiosk-touchscreen .px-upload-dialog .px-ud-sources .btn.btn-outline-secondary:not(.btn-primary):hover {
	background: var(--k-card-soft);
}
/* Close control → finger-friendly tap target */
.kiosk-touchscreen .px-upload-dialog .px-ud-close {
	min-width: 44px;
	min-height: 44px;
}
/* Wider modal — comfortable on a kiosk screen, capped for safety */
.kiosk-touchscreen dialog.px-upload-dialog {
	width: min(560px, 92vw);
	max-width: 560px;
}
/* "Scan QR code..." caption — readable, not tiny */
.kiosk-touchscreen .px-upload-dialog .px-ud-picker-qr p {
	font-size: 1rem;
	color: var(--k-text2);
	margin-bottom: 1rem;
}
/* Optional: title a touch larger to match the bigger modal */
.kiosk-touchscreen .px-upload-dialog .px-ud-header h6 {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--k-text1);
}
/* ===== START: kiosk home auth prompt ===== */
.kiosk-touchscreen .k-home-auth {
	max-width: 720px;
	margin: 0 auto 2.5rem;
	padding: 1.5rem 2rem;
	background: #ffffff;
	border: 1px solid #e6e8eb;
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.kiosk-touchscreen .k-home-auth-text {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	line-height: 1.4;
}
.kiosk-touchscreen .k-home-auth-btn {
	font-size: 1.125rem;
	padding: 0.85rem 2rem;
	border-radius: 999px;
}
/* ===== END: kiosk home auth prompt ===== */

/* ===== START: kiosk gallery choice modal ===== */
.kiosk-touchscreen .k-choice-modal .modal-content {
	border: none;
	border-radius: 20px;
	overflow: hidden;
}
.kiosk-touchscreen .k-choice-head {
	text-align: center;
	padding: 2rem 2rem 0.5rem;
}
.kiosk-touchscreen .k-choice-title {
	font-size: 1.85rem;
	margin: 0 0 0.5rem;
}
.kiosk-touchscreen .k-choice-sub {
	font-size: 1.1rem;
	color: #6b7280;
	margin: 0;
}
.kiosk-touchscreen .k-choice-grid {
	display: flex;
	gap: 1rem;
	padding: 1.75rem 2rem;
	flex-wrap: wrap;
}
.kiosk-touchscreen .k-choice-btn {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.4rem;
	padding: 1.6rem;
	min-height: 150px;
	border: 1px solid #e6e8eb;
	border-radius: 16px;
	background: #ffffff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kiosk-touchscreen .k-choice-btn:hover,
.kiosk-touchscreen .k-choice-btn:focus {
	border-color: #c7ccd1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}
.kiosk-touchscreen .k-choice-btn--save {
	border-color: #f0a020;
	border-width: 2px;
}
.kiosk-touchscreen .k-choice-btn-title {
	font-size: 1.3rem;
	font-weight: 700;
	color: #111827;
}
.kiosk-touchscreen .k-choice-btn-desc {
	font-size: 0.98rem;
	line-height: 1.4;
	color: #6b7280;
}
.kiosk-touchscreen .k-choice-foot {
	text-align: center;
	padding: 0 2rem 1.75rem;
}
.kiosk-touchscreen .k-choice-cancel {
	background: none;
	border: none;
	font-size: 1rem;
	color: #6b7280;
	padding: 0.5rem 1rem;
}
/* ===== END: kiosk gallery choice modal ===== */
/* ===== START: kiosk checkout — variant button spacing ===== */
.kiosk-touchscreen .variant-selector label.field-label .label-text {
	margin-bottom: 0;
}
/* ===== END: kiosk checkout — variant button spacing ===== */
/* ===== END: Kiosk Touchscreen Mode ===== */
/* ===== START: Kiosk tap feedback + loading overlay ===== */
.kiosk-touchscreen .k-tile:active,
.kiosk-touchscreen .k-rail-btn:active,
.kiosk-touchscreen .k-choice-btn:active,
.kiosk-touchscreen .k-home-escape-link:active,
.kiosk-touchscreen .k-home-auth-btn:active {
	transform: scale(0.97);
	opacity: 0.85;
	transition: transform 0.1s ease, opacity 0.1s ease;
}

.kiosk-touchscreen .kiosk-loading-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.kiosk-touchscreen .kiosk-loading-overlay.is-active {
	display: flex;
}

.kiosk-touchscreen .kiosk-loading-spinner {
	width: 64px;
	height: 64px;
	border: 6px solid #d9d9d9;
	border-top-color: #333333;
	border-radius: 50%;
	animation: kiosk-spin 0.8s linear infinite;
}

.kiosk-touchscreen .kiosk-loading-text {
	margin-top: 16px;
	font-size: 18px;
	color: #333333;
}

@keyframes kiosk-spin {
	to {
		transform: rotate(360deg);
	}
}
/* ===== END: Kiosk tap feedback + loading overlay ===== */
/* ===== START: Kiosk associate + tip ===== */
/*  Appended to kiosk/style. Two blocks:
    1. Base — scoped to .kiosk-at, NOT to .kiosk-touchscreen, because the
       panel now renders on any kiosk-mode site whether or not touchscreen
       mode is on. It defines its own tokens so it does not depend on the
       .kiosk-touchscreen token block above.
    2. Touchscreen — larger tap targets, only when .kiosk-touchscreen is on
       the body.
    Nothing here can reach a non-kiosk checkout: the snippet does not render
    off the kiosk domain.                                                    */

.kiosk-at {
	--kat-accent:   #1a3a6b;
	--kat-card:     #ffffff;
	--kat-soft:     #f5f6f8;
	--kat-text1:    #14181f;
	--kat-text2:    #4a5568;
	--kat-text3:    #8898a8;
	--kat-border:   #e7eaee;
	--kat-radius:   14px;
	--kat-photo:    72px;
	--kat-tap:      44px;

	margin-bottom: 1.5rem;
}

.kiosk-at-details {
	background: var(--kat-card);
	border: 1px solid var(--kat-border);
	border-radius: var(--kat-radius);
	overflow: hidden;
}

.kiosk-at-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--kat-tap);
	padding: 14px 16px;
	cursor: pointer;
	list-style: none;
	color: var(--kat-text1);
}

.kiosk-at-trigger::-webkit-details-marker { display: none; }

.kiosk-at-trigger-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kiosk-at-trigger-title {
	font-weight: 600;
	line-height: 1.25;
}

.kiosk-at-trigger-sub {
	font-size: 13px;
	color: var(--kat-text3);
}

.kiosk-at-trigger-action {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--kat-accent);
}

.kiosk-at-panel {
	padding: 4px 16px 16px;
	border-top: 1px solid var(--kat-border);
}

.kiosk-at-section { margin-top: 16px; }

.kiosk-at-legend {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kat-text3);
	margin-bottom: 10px;
}

/* ── Staff grid ───────────────────────────────────────────── */

.kiosk-at-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
}

.kiosk-at-card {
	position: relative;
	margin: 0;
	cursor: pointer;
}

/* Visually hidden but focusable and reachable by native validation, so the
   browser can scroll to it and show "select one of these options". Never use
   display:none here — it makes required radios unfocusable and the form
   silently refuses to submit with no message. */
.kiosk-at-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.kiosk-at-card-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px 8px;
	border: 2px solid var(--kat-border);
	border-radius: var(--kat-radius);
	background: var(--kat-card);
	text-align: center;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.kiosk-at-radio:checked + .kiosk-at-card-inner {
	border-color: var(--kat-accent);
	background: var(--kat-soft);
}

.kiosk-at-radio:focus-visible + .kiosk-at-card-inner {
	outline: 2px solid var(--kat-accent);
	outline-offset: 2px;
}

.kiosk-at-photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--kat-photo);
	height: var(--kat-photo);
	border-radius: 50%;
	overflow: hidden;
	background: var(--kat-soft);
	flex: 0 0 auto;
}

.kiosk-at-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kiosk-at-photo-initials {
	font-size: calc(var(--kat-photo) * 0.4);
	font-weight: 600;
	color: var(--kat-text2);
}

.kiosk-at-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--kat-text1);
	word-break: break-word;
}

/* ── Tip tiles ────────────────────────────────────────────── */

.kiosk-at-tips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 10px;
}

.kiosk-at-tip {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.kiosk-at-tip-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: var(--kat-tap);
	padding: 12px 8px;
	border: 2px solid var(--kat-border);
	border-radius: var(--kat-radius);
	background: var(--kat-card);
	text-align: center;
}

.kiosk-at-radio:checked + .kiosk-at-tip-inner {
	border-color: var(--kat-accent);
	background: var(--kat-soft);
}

.kiosk-at-radio:focus-visible + .kiosk-at-tip-inner {
	outline: 2px solid var(--kat-accent);
	outline-offset: 2px;
}

.kiosk-at-tip-pct {
	font-size: 16px;
	font-weight: 600;
	color: var(--kat-text1);
}

.kiosk-at-tip-amt {
	font-size: 13px;
	color: var(--kat-text3);
}

/* ── Actions ──────────────────────────────────────────────── */

.kiosk-at-actions {
	margin-top: 16px;
}

.kiosk-at-save {
	display: block;
	width: 100%;
	min-height: var(--kat-tap);
	padding: 12px 16px;
	border: 0;
	border-radius: var(--kat-radius);
	background: var(--kat-accent);
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.kiosk-at-actions-remove {
	margin-top: 10px;
}

.kiosk-at-remove {
	display: block;
	width: 100%;
	min-height: var(--kat-tap);
	padding: 10px 16px;
	border: 1px solid var(--kat-border);
	border-radius: var(--kat-radius);
	background: transparent;
	color: var(--kat-text2);
	font-size: 15px;
	cursor: pointer;
}

/* ── Shared-pot tile ──────────────────────────────────────── */

.kiosk-at-photo-shared {
	font-size: calc(var(--kat-photo) * 0.42);
	font-weight: 400;
	color: var(--kat-text3);
	border: 2px dashed var(--kat-border);
	background: transparent;
}

.kiosk-at-radio:checked + .kiosk-at-card-inner .kiosk-at-photo-shared {
	border-color: var(--kat-accent);
	color: var(--kat-accent);
}

/* ── Tip step reveal ──────────────────────────────────────────
   The tip step stays hidden until somebody is chosen, which is the
   flow the lab asked for: name first, then the tip.

   Guarded by @supports. On a browser without :has() the tip step is
   simply always visible — degraded, never broken, and Save is still
   blocked by the required attribute until a person is selected.     */

@supports selector(:has(*)) {
	.kiosk-at-tipwrap {
		display: none;
	}

	.kiosk-at-form:has(.kiosk-at-card:not(.kiosk-at-card-shared) .kiosk-at-who:checked) .kiosk-at-tipwrap {
		display: block;
	}
}

.kiosk-at-note {
	margin: -4px 0 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--kat-text2);
}

.kiosk-touchscreen .kiosk-at-note {
	font-size: 16px;
}

/* ── Custom amount entry ──────────────────────────────────────
   Hidden until Other is chosen. The snippet decides which of the two
   it builds: a keypad on a touchscreen terminal, which has no keyboard,
   a typed field on anything with one, because that customer is about to
   type a card number into this same screen.                              */

.kiosk-at-entry { margin-top: 14px; }

.kiosk-at-entry-msg {
	margin-top: 8px;
	font-size: 13px;
	color: #8a5a11;
	min-height: 1.3em;
}

/* Keypad */

.kiosk-at-keypad-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	padding: 12px;
	border: 2px solid var(--kat-accent);
	border-radius: var(--kat-radius);
	background: var(--kat-soft);
	font-variant-numeric: tabular-nums;
	margin-bottom: 10px;
}

.kiosk-at-keypad-display span { font-size: 18px; font-weight: 600; color: var(--kat-text2); }
.kiosk-at-keypad-display b { font-size: 28px; font-weight: 700; color: var(--kat-text1); }

.kiosk-at-keys {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.kiosk-at-keys button {
	font: inherit;
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-height: var(--kat-tap);
	border: 1px solid var(--kat-border);
	border-radius: var(--kat-radius);
	background: var(--kat-card);
	color: var(--kat-text1);
	cursor: pointer;
}

.kiosk-at-keys button:active { background: var(--kat-soft); }

/* Typed field */

.kiosk-at-typed-field {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0 14px;
	border: 2px solid var(--kat-accent);
	border-radius: var(--kat-radius);
	background: var(--kat-card);
}

.kiosk-at-typed-field span { font-size: 18px; font-weight: 600; color: var(--kat-text2); }

.kiosk-at-typed-field input {
	font: inherit;
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--kat-text1);
	padding: 12px 0;
	width: 100%;
	min-width: 0;
}

/* Save disabled while a custom amount is empty or over the ceiling */

.kiosk-at-save[disabled] {
	background: var(--kat-border);
	color: var(--kat-text3);
	cursor: not-allowed;
}

.kiosk-touchscreen .kiosk-at-keys button { font-size: 22px; }
.kiosk-touchscreen .kiosk-at-keypad-display b { font-size: 34px; }
.kiosk-touchscreen .kiosk-at-typed-field input,
.kiosk-touchscreen .kiosk-at-typed-field span { font-size: 21px; }

/* ── Touchscreen sizing ───────────────────────────────────── */

.kiosk-touchscreen .kiosk-at {
	--kat-accent: var(--k-accent);
	--kat-card:   var(--k-card);
	--kat-soft:   var(--k-card-soft);
	--kat-text1:  var(--k-text1);
	--kat-text2:  var(--k-text2);
	--kat-text3:  var(--k-text3);
	--kat-border: var(--k-border);
	--kat-radius: var(--k-radius-lg);
	--kat-photo:  104px;
	--kat-tap:    68px;
}

.kiosk-touchscreen .kiosk-at-trigger {
	padding: 20px;
	font-size: 20px;
}

.kiosk-touchscreen .kiosk-at-trigger-sub,
.kiosk-touchscreen .kiosk-at-trigger-action {
	font-size: 17px;
}

.kiosk-touchscreen .kiosk-at-panel {
	padding: 8px 20px 20px;
}

.kiosk-touchscreen .kiosk-at-grid {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 14px;
}

.kiosk-touchscreen .kiosk-at-tips {
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 14px;
}

.kiosk-touchscreen .kiosk-at-name { font-size: 18px; }
.kiosk-touchscreen .kiosk-at-tip-pct { font-size: 22px; }
.kiosk-touchscreen .kiosk-at-tip-amt { font-size: 15px; }
.kiosk-touchscreen .kiosk-at-legend { font-size: 15px; }
.kiosk-touchscreen .kiosk-at-save { font-size: 20px; }
.kiosk-touchscreen .kiosk-at-remove { font-size: 17px; }
/* ===== END: Kiosk associate + tip ===== */
/* ===== START: kiosk checkout tidy-up ===== */
/* Film delivery tiles: the outer tile carries the state. Strip the base
   theme red pill fill from the inner text. */
.kiosk-touchscreen .checkout-page .variant-selector label.field-label {
	border-width: 2px;
	border-radius: var(--k-radius-md);
	min-height: 64px;
}
.kiosk-touchscreen .checkout-page .variant-selector label.field-label .label-text,
.kiosk-touchscreen .checkout-page .variant-selector label.field-label:hover .label-text,
.kiosk-touchscreen .checkout-page .variant-selector label.field-label input:checked + .label-text {
	background: transparent !important;
	color: var(--k-text1) !important;
	outline: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 20px 16px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
}
.kiosk-touchscreen .checkout-page .variant-selector label.field-label input:checked + .label-text {
	color: var(--k-accent-h) !important;
}

/* One typeface: headings and question labels were in two different
   display faces on top of the body face. */
.kiosk-touchscreen .checkout-page h6,
.kiosk-touchscreen .checkout-page .px-title label {
	font-family: inherit !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	color: var(--k-text1) !important;
}
.kiosk-touchscreen .checkout-page h6.font-size-lg {
	font-size: 22px !important;
}
.kiosk-touchscreen .checkout-page h6.font-size-sm,
.kiosk-touchscreen .checkout-page .px-title label {
	font-size: 18px !important;
}

/* Order notes: a box, not a capsule */
.kiosk-touchscreen .checkout-page textarea.form-control {
	border-radius: var(--k-radius-md) !important;
	padding: 14px 16px !important;
}

/* Opening Hours: a small pill instead of a square red tag */
.kiosk-touchscreen .checkout-page .btn-outline-primary.btn-xxs {
	border-radius: var(--k-radius-pill) !important;
	padding: 6px 14px !important;
	font-size: 13px !important;
}
/* ===== END: kiosk checkout tidy-up ===== */

/* ===== START: Kiosk tip panel: compact staff grid, three across (2 Oct 2026) ===== */
.kiosk-touchscreen .kiosk-at { --kat-photo: 56px; }
.kiosk-touchscreen .kiosk-at-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kiosk-touchscreen .kiosk-at-card-inner { gap: 6px; padding: 10px 4px; }
.kiosk-touchscreen .kiosk-at-name { font-size: 15px; line-height: 1.2; }
.kiosk-touchscreen .kiosk-at-tips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* ===== END: Kiosk tip panel: compact staff grid ===== */

/* ===== START: Kiosk async save spinner (2 Oct 2026) =====
   Only when admin/checklist/kiosk-page-loader is TRUE, which adds a loader-- class to body.
   The platform adds .px-live-fragment-loading to the section being re-rendered by an async form
   and already dims it to 0.5. This adds a centered spinner and blocks double taps until it returns. */
.kiosk-touchscreen[class*="loader--"] .px-live-fragment-loading { pointer-events: none; cursor: progress; }
.kiosk-touchscreen[class*="loader--"] .px-live-fragment-loading::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	border: 6px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--k-accent, #333333);
	border-radius: 50%;
	animation: kiosk-spin 0.8s linear infinite;
	z-index: 9999;
}
/* ===== END: Kiosk async save spinner ===== */


/* ===== START: Kiosk product option tiles, one border only (2 Oct 2026) =====
   The outer label is the tile. The inner .label-text pill border from the base theme
   and the earlier kiosk rule made a box inside a box on selected options. */
.kiosk-touchscreen .product-single .variant-selector label.field-label .label-text,
.kiosk-touchscreen .product-single .variant-selector label.field-label:hover .label-text,
.kiosk-touchscreen .product-single .variant-selector label.field-label input:checked + .label-text {
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.kiosk-touchscreen .product-single .variant-selector label.field-label input:checked + .label-text {
	color: var(--k-accent-h) !important;
}
/* ===== END: Kiosk product option tiles, one border only ===== */


/* ===== START: Kiosk add-on checkbox tiles (2 Oct 2026) =====
   Add-on options (e.g. Return negatives) render as a bare checkbox inside a label.
   This makes the label a tile matching the option tiles above it. */
.kiosk-touchscreen .product-single .variant-selector .select-box > label:has(> input[type="checkbox"]) {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 72px;
	max-width: 100%;
	padding: 12px 22px 12px 16px;
	margin: 0 0 10px;
	border: 2px solid var(--k-border-s);
	border-radius: 14px;
	background: var(--k-card);
	box-shadow: 0 2px 12px rgba(20, 24, 31, 0.06);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--k-text1);
	cursor: pointer;
}
.kiosk-touchscreen .product-single .variant-selector .select-box > label:has(> input[type="checkbox"]:checked) {
	border-color: var(--k-accent);
	background: var(--k-accent-bg);
	color: var(--k-accent-h);
}
.kiosk-touchscreen .product-single .variant-selector .select-box > label > input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin: 0;
	border: 2px solid var(--k-border-s);
	border-radius: 8px;
	background: #ffffff center / 18px 18px no-repeat;
	cursor: pointer;
}
.kiosk-touchscreen .product-single .variant-selector .select-box > label > input[type="checkbox"]:checked {
	border-color: var(--k-accent);
	background-color: var(--k-accent);
	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='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* ===== END: Kiosk add-on checkbox tiles ===== */


/* ===== START: Kiosk checkout store location cards (2 Oct 2026) =====
   Address cards sit inside an outer .card.px-rounded, whose rule zeroes nested card borders,
   hence the long selector. Matches the delivery and option tiles: one 2px border,
   accent when selected, readable text, photo inside the card, neutral Opening Hours pill.
   Also sets checked custom radios to the kiosk accent so they match the selected tile. */
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address {
	border: 2px solid var(--k-border-s) !important;
	border-radius: 14px !important;
	background: var(--k-card) !important;
	box-shadow: 0 2px 12px rgba(20, 24, 31, 0.06) !important;
	outline: none !important;
	overflow: hidden;
	cursor: pointer;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address:has(input:checked) {
	border-color: var(--k-accent) !important;
	box-shadow: 0 2px 12px rgba(20, 24, 31, 0.06) !important;
	background: var(--k-accent-bg) !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .card-body {
	padding: 16px 16px 16px 18px !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .card-body > .d-flex {
	gap: 14px;
	align-items: flex-start;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .custom-control {
	padding-left: 0 !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .custom-control-label {
	padding-left: 34px !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .custom-control-label > .text-muted {
	display: block;
	font-size: 15px !important;
	line-height: 1.45 !important;
	color: var(--k-text2) !important;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .px-address-company {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--k-text1);
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .text-right {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .text-right img {
	width: 96px !important;
	height: 96px !important;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .text-right .btn {
	margin: 0 !important;
	padding: 6px 12px !important;
	border: 1.5px solid var(--k-border-s) !important;
	border-radius: 999px !important;
	background: var(--k-card) !important;
	color: var(--k-text1) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	white-space: nowrap;
}
.kiosk-touchscreen .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--k-accent) !important;
	background-color: var(--k-accent) !important;
}
/* ===== END: Kiosk checkout store location cards ===== */


/* ===== START: Kiosk opening hours button and modal (2 Oct 2026) =====
   The store-hours modal is rendered inside the card's .text-right column, so it inherited
   right-aligned text. Theme positions .close absolutely, so the title reserves room for it. */
.kiosk-touchscreen .checkout-page .card.px-rounded .card.card-outline-address .text-right .btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	height: 34px;
	line-height: 1 !important;
	padding: 0 14px !important;
}
.kiosk-touchscreen .checkout-page .card-outline-address .modal {
	text-align: left;
}
.kiosk-touchscreen .checkout-page .card-outline-address .modal-content {
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(20, 24, 31, 0.25);
}
.kiosk-touchscreen .checkout-page .card-outline-address .modal-header {
	align-items: center;
	padding: 20px 24px !important;
	border-bottom: 1px solid var(--k-border);
}
.kiosk-touchscreen .checkout-page .card-outline-address .modal-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding-right: 56px;
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--k-text1);
}
.kiosk-touchscreen .checkout-page .card-outline-address .modal-header .close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--k-card-soft, #f5f6f8);
	color: var(--k-text2);
	font-size: 26px;
	line-height: 1;
	opacity: 1;
	text-shadow: none;
}
.kiosk-touchscreen .checkout-page .card-outline-address .modal-body {
	padding: 12px 24px 20px !important;
}
.kiosk-touchscreen .checkout-page .card-outline-address table.opening-hours {
	width: 100%;
	border-collapse: collapse;
}
.kiosk-touchscreen .checkout-page .card-outline-address table.opening-hours th,
.kiosk-touchscreen .checkout-page .card-outline-address table.opening-hours td {
	padding: 12px 0 !important;
	font-size: 17px;
	line-height: 1.3;
	border-bottom: 1px solid var(--k-border);
}
.kiosk-touchscreen .checkout-page .card-outline-address table.opening-hours tr:last-child th,
.kiosk-touchscreen .checkout-page .card-outline-address table.opening-hours tr:last-child td {
	border-bottom: 0;
}
.kiosk-touchscreen .checkout-page .card-outline-address table.opening-hours th {
	text-align: left;
	font-weight: 600;
	color: var(--k-text1);
	padding-right: 16px !important;
}
.kiosk-touchscreen .checkout-page .card-outline-address table.opening-hours td {
	text-align: right;
	color: var(--k-text2);
	white-space: nowrap;
}
/* ===== END: Kiosk opening hours button and modal ===== */

/* ══════════════════════════════════════════════════════════
   KIOSK UI 0.3 — a skin over touchscreen mode.
   Raw CSS, included from pages/custom.css after kiosk/style.
   Every rule starts with .kiosk-touchscreen.kiosk-ui, so it only
   applies when kiosk-ui-enabled is TRUE on the kiosk host, and it
   wins over kiosk/style at equal weight. Touchscreen-mode sites
   never get .kiosk-ui and are untouched.
   Same pages, same DOM, same flow: only sizes, spacing and color.
   ══════════════════════════════════════════════════════════ */

/* ── Tokens: re-skins everything kiosk/style already styles
      (cart, checkout, login, upload dialog, PDP) ── */
.kiosk-touchscreen.kiosk-ui {
	--k-bg:          #EDF0F3;
	--k-card:        #FFFFFF;
	--k-card-soft:   #F4F6F8;
	--k-text1:       #15202B;
	--k-text2:       #4F5C6A;
	--k-text3:       #6B7785;
	--k-muted:       #8A96A3;
	--k-border:      #D8DEE5;
	--k-border-s:    #C9D1DA;
	--k-accent-bg:   color-mix(in srgb, var(--k-accent) 11%, #fff);
	--k-shadow:      0 2px 0 rgba(21, 32, 43, 0.03), 0 10px 30px rgba(21, 32, 43, 0.07);
	--k-shadow-h:    0 2px 0 rgba(21, 32, 43, 0.03), 0 18px 50px rgba(21, 32, 43, 0.12);

	--k-radius-sm:   14px;
	--k-radius-md:   16px;
	--k-radius-lg:   20px;
	--k-radius-xl:   24px;
	--k-radius-2xl:  26px;

	--k-input-height:      64px;
	--k-btn-login-height:  64px;
	--k-tab-height:        60px;
	--k-cta-height:        76px;

	--kui-rail-h:    96px;
	--kui-tap:       60px;

	background: var(--k-bg);
	color: var(--k-text1);
}

/* ══════════════════════════════════════════════════════════
   TOP RAIL (kiosk/ui/top-rail, same classes as kiosk/top-rail)
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen.kiosk-ui .k-rail {
	height: var(--kui-rail-h);
	padding: 0 28px;
	gap: 20px;
	box-shadow: none;
}
.kiosk-touchscreen.kiosk-ui .k-rail-left,
.kiosk-touchscreen.kiosk-ui .k-rail-right { gap: 12px; }
.kiosk-touchscreen.kiosk-ui .k-rail-btn {
	height: var(--kui-tap);
	padding: 0 24px;
	gap: 10px;
	font-size: 19px;
	font-weight: 700;
	color: var(--k-text1);
	border: 1.5px solid var(--k-border);
}
.kiosk-touchscreen.kiosk-ui .k-rail-btn:active { background: var(--k-accent-bg); }
.kiosk-touchscreen.kiosk-ui .k-rail-cart-badge {
	position: static;
	min-width: 28px; height: 28px; line-height: 28px;
	font-size: 15px;
	margin-left: 2px;
}
.kiosk-touchscreen.kiosk-ui .k-rail-logo-wrap {
	display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1;
}
.kiosk-touchscreen.kiosk-ui .k-rail-logo-wrap img {
	max-height: 46px; width: auto;
}
.kiosk-touchscreen.kiosk-ui .k-rail-kiosk-label {
	font-size: 13px; font-weight: 700; letter-spacing: 0.3em;
	text-transform: uppercase; color: var(--k-text1);
}
.kiosk-touchscreen.kiosk-ui .k-rail-status { font-size: 15px; padding: 10px 16px 10px 14px; }

/* ══════════════════════════════════════════════════════════
   HOME (kiosk/ui/home)
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen.kiosk-ui .kui-home {
	min-height: calc(100vh - var(--kui-rail-h));
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 32px;
	padding: 40px 60px 48px;
	box-sizing: border-box;
}
.kiosk-touchscreen.kiosk-ui .kui-home-head { text-align: center; display: grid; gap: 10px; }
.kiosk-touchscreen.kiosk-ui .kui-eyebrow {
	font-size: 14px; font-weight: 900; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--k-accent);
}
.kiosk-touchscreen.kiosk-ui .kui-home-title {
	font-size: clamp(40px, 3.2vw, 60px); font-weight: 600; line-height: 1.1;
	margin: 0; color: var(--k-text1); text-wrap: balance;
}
.kiosk-touchscreen.kiosk-ui .kui-home-sub { margin: 0; font-size: 22px; color: var(--k-text2); }

.kiosk-touchscreen.kiosk-ui .kui-tiles { display: grid; gap: 24px; width: min(1280px, 100%); }
.kiosk-touchscreen.kiosk-ui .kui-tiles--two { grid-template-columns: 1fr 1fr; }

/* The tile keeps .k-tile for the touch feedback in kiosk/scripts,
   but lays out as text left, photo right, no fade. */
.kiosk-touchscreen.kiosk-ui .kui-tile {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	min-height: clamp(320px, 41vh, 440px);
	padding: 0;
	border-radius: var(--k-radius-2xl);
	border: 0;
	box-shadow: var(--k-shadow-h);
	transform: none;
}
.kiosk-touchscreen.kiosk-ui .kui-tiles--two .kui-tile { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.kiosk-touchscreen.kiosk-ui .kui-tile:hover { transform: none; }
.kiosk-touchscreen.kiosk-ui .kui-tile:active,
.kiosk-touchscreen.kiosk-ui .kui-tile.is-touching { transform: scale(0.995); }
.kiosk-touchscreen.kiosk-ui .kui-tile .k-tile-art {
	position: relative; inset: auto; width: auto; min-height: 220px;
	order: 2;
}
.kiosk-touchscreen.kiosk-ui .kui-tile .k-tile-art::after { display: none; }
.kiosk-touchscreen.kiosk-ui .kui-tiles--two .kui-tile .k-tile-art { order: 0; }
.kiosk-touchscreen.kiosk-ui .kui-tile-text {
	display: flex; flex-direction: column; gap: 16px;
	padding: 48px 52px; text-align: left;
}
.kiosk-touchscreen.kiosk-ui .kui-tile-title {
	margin: 0; font-size: clamp(40px, 3vw, 58px); font-weight: 600;
	line-height: 1.05; color: var(--k-text1);
}
.kiosk-touchscreen.kiosk-ui .kui-tile-desc {
	font-size: 22px; line-height: 1.45; color: var(--k-text2); max-width: 30ch;
}
.kiosk-touchscreen.kiosk-ui .kui-tile-go {
	margin-top: auto; display: inline-flex; align-items: center; gap: 16px;
	font-size: 22px; font-weight: 900; color: var(--k-accent);
}
.kiosk-touchscreen.kiosk-ui .kui-tile-arrow {
	width: 64px; height: 64px; border-radius: 999px;
	background: var(--k-accent); color: #fff;
	display: grid; place-items: center;
}

.kiosk-touchscreen.kiosk-ui .kui-steps {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.kiosk-touchscreen.kiosk-ui .kui-steps li {
	display: flex; align-items: center; gap: 12px;
	background: var(--k-card); border: 1px solid var(--k-border);
	border-radius: 999px; padding: 12px 22px 12px 12px;
	font-size: 18px; font-weight: 700; color: var(--k-text1);
}
.kiosk-touchscreen.kiosk-ui .kui-steps b {
	width: 36px; height: 36px; border-radius: 999px;
	background: var(--k-accent-bg); color: var(--k-accent-h);
	display: grid; place-items: center; font-size: 17px;
}

.kiosk-touchscreen.kiosk-ui .kui-login {
	display: flex; align-items: center; gap: 22px;
	background: var(--k-card); border: 1px solid var(--k-border);
	border-radius: 18px; padding: 14px 14px 14px 28px;
	font-size: 19px; color: var(--k-text2);
}
.kiosk-touchscreen.kiosk-ui .kui-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 56px; padding: 0 28px; border-radius: 999px;
	font-size: 19px; font-weight: 900; text-decoration: none; white-space: nowrap;
}
.kiosk-touchscreen.kiosk-ui .kui-btn--ghost {
	background: var(--k-card); color: var(--k-accent-h); border: 2px solid var(--k-accent);
}
.kiosk-touchscreen.kiosk-ui .kui-btn--ghost:active { background: var(--k-accent-bg); }
.kiosk-touchscreen.kiosk-ui .kui-shop-link {
	font-size: 18px; font-weight: 700; color: var(--k-text2);
	padding: 14px 24px; border-radius: 999px; border: 1px solid var(--k-border-s);
	background: var(--k-card); text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   UPLOAD DIALOG (platform px-upload-dialog, light DOM)
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen.kiosk-ui dialog.px-upload-dialog {
	width: min(900px, 92vw);
	max-width: 900px;
	border-radius: 28px;
	padding: 44px 48px;
	border: 0;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}
.kiosk-touchscreen.kiosk-ui dialog.px-upload-dialog::backdrop { background: rgba(21, 32, 43, 0.42); }
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-header {
	height: auto !important;
	min-height: 0;
	margin-bottom: 28px;
	padding-right: 72px;
}
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-header h6 {
	font-size: clamp(32px, 2.4vw, 44px);
	font-weight: 600;
	margin: 0;
}
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-close {
	width: 60px; height: 60px; min-width: 60px; min-height: 60px;
	border-radius: 999px;
	top: 24px; right: 24px;
	background: var(--k-card);
	border: 1.5px solid var(--k-border);
}
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-sources {
	flex-direction: row;
	gap: 18px;
	width: 100% !important;
	max-width: none !important;
}
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-sources .btn {
	flex: 1 1 0;
	min-height: 120px;
	border-radius: 20px;
	font-size: 21px;
	font-weight: 900;
	border-width: 2px;
}
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-picker-qr { text-align: center; }
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-picker-qr hr { margin: 28px 0; }
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-picker-qr p { font-size: 20px; }
.kiosk-touchscreen.kiosk-ui .px-upload-dialog .px-ud-qrcode img { width: 200px; height: 200px; }

/* ══════════════════════════════════════════════════════════
   PHOTO PRINTS (platform px-photo-prints, light DOM)
   Select photos + sizes, then Cropping & Options. Restyle only.
   ══════════════════════════════════════════════════════════ */
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-top-bar {
	top: var(--kui-rail-h);
	padding: 22px 32px;
	background: var(--k-bg);
	border-bottom: 1px solid var(--k-border);
	font-size: 19px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-top-bar .px-btn {
	min-height: 56px;
	padding: 0 26px;
	border-radius: 999px;
	font-size: 19px;
	font-weight: 900;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-photos-total { font-weight: 700; }
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-photos-selected {
	background: var(--k-accent-bg); color: var(--k-accent-h);
	border-radius: 999px; padding: 6px 14px; font-weight: 700;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-thumb-size {
	width: 52px; height: 52px; border-radius: 12px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-prints {
	gap: 22px;
	padding: 28px 32px;
}
/* Large thumbnails (the default) fill wider cells; single and small keep
   the platform's own sizing so the thumbnail size buttons still work. */
.kiosk-touchscreen.kiosk-ui .px-photo-prints[data-thumb-size="large"] .px-prints {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints[data-thumb-size="large"] .px-print,
.kiosk-touchscreen.kiosk-ui .px-photo-prints[data-thumb-size="large"] .px-img-wrapper {
	width: 100%;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints[data-thumb-size="large"] .px-print img {
	width: 100%;
	height: auto;
	max-width: 100% !important;
	max-height: 300px !important;
	object-fit: contain;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print .px-img-wrapper img {
	border-radius: 14px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print[data-selected="true"] .px-img-wrapper img {
	outline: 4px solid var(--k-accent);
	outline-offset: -4px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-quantity-bubble {
	min-width: 36px; min-height: 36px;
	font-size: 18px; font-weight: 900;
	border-radius: 12px;
}

/* Cropping & Options: one group per size */
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-prints-overview { padding: 12px 32px 32px; }
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-orderline > .px-heading {
	display: flex; align-items: center; gap: 14px;
	font-size: 28px; font-weight: 600; padding: 18px 0 6px; border: 0;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-orderline > .px-heading::after {
	content: ""; flex: 1; height: 1px; background: var(--k-border);
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-orderline .px-prints { padding: 16px 0; }

/* Right rail: wider, list scrolls, total and button at the bottom */
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-sidebar {
	width: 460px;
	flex: 0 0 460px;
	background: var(--k-card);
	border-left: 1px solid var(--k-border);
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-sidebar-content {
	top: var(--kui-rail-h);
	height: calc(100vh - var(--kui-rail-h));
	display: flex;
	flex-direction: column;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-scroll {
	order: 1;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 26px 18px 12px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-sidebar-top {
	order: 2;
	display: grid;
	gap: 16px;
	padding: 22px 30px 28px;
	border-top: 1px solid var(--k-border);
	background: var(--k-card);
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-total-price {
	font-size: 46px;
	font-weight: 600;
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-btn-cart {
	width: 100%;
	min-height: var(--k-cta-height);
	border-radius: 999px;
	font-size: 23px;
	font-weight: 900;
	justify-content: center;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-sidebar-instructions {
	font-size: 17px; line-height: 1.4; color: var(--k-text2);
	padding: 0 12px; margin-bottom: 12px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-sidebar-instructions .px-heading {
	display: block; font-size: 30px; font-weight: 600; color: var(--k-text1); margin-bottom: 4px;
}

/* Size rows: .px-print-size is display:contents, so its three
   children are the grid cells of .px-print-sizes */
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-sizes {
	grid-template-columns: 1fr auto 110px !important;
	row-gap: 6px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-size > * {
	min-height: 76px;
	align-items: center;
	padding: 8px 12px;
	border-radius: 0;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-size > .px-label {
	font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
	border-radius: 14px 0 0 14px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-size > .px-price {
	justify-content: flex-end; font-size: 18px; color: var(--k-text2);
	font-variant-numeric: tabular-nums;
	border-radius: 0 14px 14px 0;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-size[data-selected="true"] > * {
	background: var(--k-accent-bg);
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-size[data-selected="true"] > .px-price {
	color: var(--k-text1); font-weight: 700;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-sizes .px-quantity button {
	width: var(--kui-tap) !important;
	height: var(--kui-tap) !important;
	min-width: var(--kui-tap) !important;
	border: 1.5px solid var(--k-border-s) !important;
	font-size: 28px;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-sizes .px-quantity button svg {
	height: 22px !important;
}
.kiosk-touchscreen.kiosk-ui .px-photo-prints .px-print-sizes .px-quantity span {
	min-width: 44px;
	font-size: 24px;
	font-weight: 900;
}

/* ══════════════════════════════════════════════════════════
   CART, CHECKOUT, CONFIRMATION: no rules of their own. The tokens
   at the top re-skin what kiosk/style already does on those pages.
   ══════════════════════════════════════════════════════════ */

/* Designer option summary — describes variants hidden from the product page */
.designer-summary {
	border: 1px solid #e3e3df;
	border-radius: 8px;
	padding: 1.125rem 1.25rem;
	margin-top: 1.25rem;
}

.designer-summary-head {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #8a8a84;
	margin-bottom: 1rem;
}

.designer-summary-row + .designer-summary-row {
	margin-top: 1rem;
}

.designer-summary-label {
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.designer-summary-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.designer-summary-chip {
	font-size: 0.75rem;
	line-height: 1.3;
	padding: 0.3125rem 0.6875rem;
	border-radius: 999px;
	background: #f3f4f5;
	color: #55554f;
}
/* Add to Cart gated on an attached design — see sticker-designer.js */
.btn[data-stk-requires-design][disabled],
.btn[data-stk-requires-design]:disabled {
	background-color: #e9ecef !important;
	border-color: #e9ecef !important;
	color: #a3a39d !important;
	opacity: 1;
	box-shadow: none;
	cursor: not-allowed;
}
/* Sticker preview renders as a plain img, not the px-project-preview element,
   so it needs its own sizing. */
.account-g2-card__media img.account-g2-project-preview {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: 240px;
	object-fit: contain;
	margin: 0 auto;
}
/* Hover tip for disabled card actions */
.account-g2-tip {
	position: relative;
}

.account-g2-tip::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 170px;
	padding: 0.375rem 0.5rem;
	border-radius: 4px;
	background: #1c1c1a;
	color: #fff;
	font-size: 0.6875rem;
	line-height: 1.35;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 20;
}

.account-g2-tip:hover::after {
	opacity: 1;
	visibility: visible;
}
/* Gang Up sheet preview. Replaces px-project-preview, which has nothing to
   draw for a gang sheet, so it needs its own sizing rather than inheriting the
   custom element rules. Gang sheets run up to about 1:5, so a width-only
   constraint blows out the row height. Both axes are capped. */
.gu-preview-img {
	display: block;
	max-width: 100%;
	max-height: 160px;
	width: auto;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}
/* Gang Up sheet preview in the cart. A gang sheet runs up to 1:5, so w-100
   would make the row enormous. Capped by height instead. */
.gu-preview-img {
	max-height: 200px;
	width: auto;
	margin: 0 auto;
	display: block;
}
/* In the gallery the sheet should fill the frame, not be capped at the small
   size used in cart rows and project cards. The gallery's own CSS sets
   max-height:auto on display images, which would let a 22x120 sheet render
   five times taller than it is wide. */
.px-product-gallery .px-display .px-item img.gu-preview-img {
	max-height: 100%;
	width: auto;
}
/* ===== START: Google rating inline ===== */
.google-rating-inline {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	line-height: 1;
	white-space: nowrap;
}
.google-rating-inline__logo {
	display: block;
	width: auto;
	height: 14px;
}
.google-rating-inline .google-stars {
	font-size: .9375rem;
	line-height: 1;
	letter-spacing: .02em;
	color: #fbbc04;
}
.google-rating-inline .google-star-empty {
	color: #dadce0;
}
.google-rating-inline .google-star-half {
	position: relative;
	display: inline-block;
	color: #dadce0;
}
.google-rating-inline .google-star-half__fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	overflow: hidden;
	color: #fbbc04;
}
.google-rating-inline__value {
	font-size: .8125rem;
	font-weight: 600;
	color: #3c4043;
}
.google-rating-inline__count {
	font-size: .8125rem;
	font-weight: 400;
	color: #70757a;
}
/* ===== END: Google rating inline ===== */
/* ===== START: film-builder ===== */
/* ============================================================
   ROLL CALL — film intake prototype
   Two storefront skins (bench / safelight) x viewer light/dark.
   Every color is a token. Nothing paints outside the token set.
   ============================================================ */

/* ---------- SKIN: BENCH (default) — LIGHT ---------- */
.pxfb {
	--ground:      #FBFAF8;
	--surface:     #FFFFFF;
	--surface-2:   #F3F1EC;
	--ink:         #14130F;
	--ink-2:       #4A4740;
	--ink-3:       #7C786F;
	--rule:        #E2DED5;
	--rule-strong: #C9C4B8;
	--accent:      #1F5C4D;
	--accent-ink:  #FFFFFF;
	--accent-soft: #E4EEEA;
	--signal:      #A2631A;
	--signal-soft: #F6ECDC;
	--good:        #2F6B3C;
	--danger:      #9B2F22;

	--font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	--font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

	--r-sm: 3px;  --r-md: 4px;  --r-lg: 6px;  --r-pill: 999px;
	--card-border: 1px solid var(--rule);
	--card-shadow: none;
	--display-weight: 500;
	--display-tracking: -0.02em;
	--display-transform: none;
	--eyebrow-tracking: 0.14em;
	--grain-opacity: 0;
	--sprocket-display: none;
	--grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

	--step--1: clamp(0.76rem, 0.74rem + 0.1vw, 0.81rem);
	--step-0:  clamp(0.94rem, 0.91rem + 0.14vw, 1rem);
	--step-1:  clamp(1.1rem, 1.04rem + 0.3vw, 1.26rem);
	--step-2:  clamp(1.32rem, 1.2rem + 0.6vw, 1.66rem);
	--step-3:  clamp(1.6rem, 1.36rem + 1.1vw, 2.3rem);
	--step-4:  clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
	--step-5:  clamp(2.4rem, 1.5rem + 3.8vw, 4.6rem);
}

/* ---------- SKIN: BENCH — DARK ---------- */
@media (prefers-color-scheme: dark) {
	.pxfb:not([data-theme="light"]) {
		--ground:      #121311;
		--surface:     #1A1C19;
		--surface-2:   #232620;
		--ink:         #EDEBE4;
		--ink-2:       #B5B2A8;
		--ink-3:       #85827A;
		--rule:        #2D302B;
		--rule-strong: #43473F;
		--accent:      #74C4A8;
		--accent-ink:  #0E1512;
		--accent-soft: #1B2A25;
		--signal:      #D9A45E;
		--signal-soft: #2A2317;
		--good:        #77BE84;
		--danger:      #E0796A;
	}
}
.pxfb[data-theme="dark"] {
	--ground:      #121311;
	--surface:     #1A1C19;
	--surface-2:   #232620;
	--ink:         #EDEBE4;
	--ink-2:       #B5B2A8;
	--ink-3:       #85827A;
	--rule:        #2D302B;
	--rule-strong: #43473F;
	--accent:      #74C4A8;
	--accent-ink:  #0E1512;
	--accent-soft: #1B2A25;
	--signal:      #D9A45E;
	--signal-soft: #2A2317;
	--good:        #77BE84;
	--danger:      #E0796A;
}

/* ---------- SKIN: SAFELIGHT — LIGHT ---------- */
.pxfb[data-skin="safelight"] {
	--ground:      #FFF4EC;
	--surface:     #FFFFFF;
	--surface-2:   #FFE7D8;
	--ink:         #1B0D08;
	--ink-2:       #57352A;
	--ink-3:       #8A6555;
	--rule:        #F0CDB6;
	--rule-strong: #E0A683;
	--accent:      #D8331A;
	--accent-ink:  #FFF6F2;
	--accent-soft: #FFDED3;
	--signal:      #A96908;
	--signal-soft: #FFEBC7;
	--good:        #2B6B44;
	--danger:      #B02214;

	--font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
	--font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
	--card-border: 1.5px solid var(--rule-strong);
	--card-shadow: 0 2px 0 var(--rule-strong);
	--display-weight: 800;
	--display-tracking: -0.035em;
	--display-transform: none;
	--eyebrow-tracking: 0.2em;
	--grain-opacity: 0.05;
	--sprocket-display: block;
}

/* ---------- SKIN: SAFELIGHT — DARK ---------- */
@media (prefers-color-scheme: dark) {
	.pxfb[data-skin="safelight"]:not([data-theme="light"]) {
		--ground:      #100A0B;
		--surface:     #1A1113;
		--surface-2:   #24171A;
		--ink:         #FBEFE8;
		--ink-2:       #C7A99E;
		--ink-3:       #93756B;
		--rule:        #332124;
		--rule-strong: #55343A;
		--accent:      #FF4F2E;
		--accent-ink:  #170906;
		--accent-soft: #34161066;
		--signal:      #F5C242;
		--signal-soft: #2B1F0D;
		--good:        #6ECC8E;
		--danger:      #FF7A63;
		--grain-opacity: 0.075;
	}
}
.pxfb[data-theme="dark"][data-skin="safelight"] {
	--ground:      #100A0B;
	--surface:     #1A1113;
	--surface-2:   #24171A;
	--ink:         #FBEFE8;
	--ink-2:       #C7A99E;
	--ink-3:       #93756B;
	--rule:        #332124;
	--rule-strong: #55343A;
	--accent:      #FF4F2E;
	--accent-ink:  #170906;
	--accent-soft: #34161066;
	--signal:      #F5C242;
	--signal-soft: #2B1F0D;
	--good:        #6ECC8E;
	--danger:      #FF7A63;
	--grain-opacity: 0.075;
}


/* ============================================================
   SKIN: CONTACT SHEET — light, photographic, grease-pencil red
   ============================================================ */
.pxfb[data-skin="contact"] {
	--ground:      #F2EFE8;
	--surface:     #FFFFFF;
	--surface-2:   #E7E2D7;
	--ink:         #1B1A17;
	--ink-2:       #4C4941;
	--ink-3:       #7E7A6E;
	--rule:        #DCD7CB;
	--rule-strong: #BEB8A8;
	--accent:      #B4412A;
	--accent-ink:  #FFF8F4;
	--accent-soft: #F6E3DC;
	--signal:      #8A6A1F;
	--signal-soft: #F3EAD4;
	--good:        #3A6B44;
	--danger:      #9E2B20;

	--font-display: "Archivo", "Public Sans", system-ui, sans-serif;
	--font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-pill: 999px;
	--card-border: 1px solid var(--rule);
	--card-shadow: 0 1px 2px rgba(27,26,23,.06);
	--display-weight: 800;
	--display-stretch: 108%;
	--display-tracking: -0.03em;
	--eyebrow-tracking: 0.2em;
	--grain-opacity: 0.035;
	--sprocket-display: none;
}
@media (prefers-color-scheme: dark) {
	.pxfb[data-skin="contact"]:not([data-theme="light"]) {
		--ground: #15140F; --surface: #1E1C16; --surface-2: #272419;
		--ink: #EFEBDF; --ink-2: #B6B0A0; --ink-3: #857F70;
		--rule: #2E2B22; --rule-strong: #474234;
		--accent: #E8724F; --accent-ink: #1A0D08; --accent-soft: #33190F;
		--signal: #D8B15E; --signal-soft: #2A2314;
		--good: #7DBE8A; --danger: #E0796A;
		--grain-opacity: 0.06;
	}
}
.pxfb[data-theme="dark"][data-skin="contact"] {
	--ground: #15140F; --surface: #1E1C16; --surface-2: #272419;
	--ink: #EFEBDF; --ink-2: #B6B0A0; --ink-3: #857F70;
	--rule: #2E2B22; --rule-strong: #474234;
	--accent: #E8724F; --accent-ink: #1A0D08; --accent-soft: #33190F;
	--signal: #D8B15E; --signal-soft: #2A2314;
	--good: #7DBE8A; --danger: #E0796A;
	--grain-opacity: 0.06;
}

/* ============================================================
   SKIN: CHEMISTRY — the C-41 dye layers, loud
   ============================================================ */
.pxfb[data-skin="chemistry"] {
	--ground:      #FFFDF5;
	--surface:     #FFFFFF;
	--surface-2:   #FFF3C4;
	--ink:         #101014;
	--ink-2:       #45454F;
	--ink-3:       #74747F;
	--rule:        #E4E2D6;
	--rule-strong: #101014;
	--accent:      #DE1B76;
	--accent-ink:  #FFFFFF;
	--accent-soft: #FFE1EF;
	--signal:      #0089C7;
	--signal-soft: #DBF2FC;
	--good:        #1E7A4C;
	--danger:      #D02020;
	--cyan:        #00A9E0;
	--magenta:     #E0218A;
	--yellow:      #FFD500;

	--font-display: "Syne", "Public Sans", system-ui, sans-serif;
	--font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--r-sm: 8px; --r-md: 16px; --r-lg: 26px; --r-pill: 999px;
	--card-border: 2px solid var(--rule-strong);
	--card-shadow: 4px 4px 0 var(--rule-strong);
	--display-weight: 800;
	--display-stretch: 100%;
	--display-tracking: -0.04em;
	--eyebrow-tracking: 0.22em;
	--grain-opacity: 0;
	--sprocket-display: none;
}
@media (prefers-color-scheme: dark) {
	.pxfb[data-skin="chemistry"]:not([data-theme="light"]) {
		--ground: #0B0B12; --surface: #16161F; --surface-2: #221E33;
		--ink: #F7F5FF; --ink-2: #B9B6CC; --ink-3: #85819B;
		--rule: #2A2A3A; --rule-strong: #F7F5FF;
		--accent: #FF4FA8; --accent-ink: #16021A; --accent-soft: #37102A;
		--signal: #3FD0FF; --signal-soft: #0C2A38;
		--good: #45D08D; --danger: #FF6B6B;
		--cyan: #3FD0FF; --magenta: #FF4FA8; --yellow: #FFE04D;
		--card-shadow: 4px 4px 0 rgba(247,245,255,.5);
	}
}
.pxfb[data-theme="dark"][data-skin="chemistry"] {
	--ground: #0B0B12; --surface: #16161F; --surface-2: #221E33;
	--ink: #F7F5FF; --ink-2: #B9B6CC; --ink-3: #85819B;
	--rule: #2A2A3A; --rule-strong: #F7F5FF;
	--accent: #FF4FA8; --accent-ink: #16021A; --accent-soft: #37102A;
	--signal: #3FD0FF; --signal-soft: #0C2A38;
	--good: #45D08D; --danger: #FF6B6B;
	--cyan: #3FD0FF; --magenta: #FF4FA8; --yellow: #FFE04D;
	--card-shadow: 4px 4px 0 rgba(247,245,255,.5);
}

/* ============================================================
   SKIN: COUNTER — in-store and kiosk. Big, legible, thumb-sized.
   ============================================================ */
.pxfb[data-skin="counter"] {
	--ground:      #0D1117;
	--surface:     #161C24;
	--surface-2:   #1F2731;
	--ink:         #F4F7FA;
	--ink-2:       #B6C1CC;
	--ink-3:       #8593A0;
	--rule:        #26303B;
	--rule-strong: #3B4854;
	--accent:      #00C08B;
	--accent-ink:  #04241A;
	--accent-soft: #0C2C24;
	--signal:      #F0B429;
	--signal-soft: #2E2411;
	--good:        #43D6A0;
	--danger:      #FF7062;

	--font-display: "Public Sans", system-ui, -apple-system, sans-serif;
	--font-body:    "Public Sans", system-ui, -apple-system, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

	--r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
	--card-border: 2px solid var(--rule);
	--card-shadow: none;
	--display-weight: 800;
	--display-stretch: 100%;
	--display-tracking: -0.03em;
	--eyebrow-tracking: 0.18em;
	--grain-opacity: 0;
	--sprocket-display: none;
}
.pxfb[data-theme="light"][data-skin="counter"] {
	--ground: #EDF1F5; --surface: #FFFFFF; --surface-2: #DDE5EC;
	--ink: #0B1116; --ink-2: #414D57; --ink-3: #6B7885;
	--rule: #C9D4DD; --rule-strong: #9BAAB7;
	--accent: #007A59; --accent-ink: #FFFFFF; --accent-soft: #D7F0E7;
	--signal: #8A5B04; --signal-soft: #FBEFD5;
	--good: #1D7A57; --danger: #B33124;
}

/* ---------- accent override hook (lab brand color) ---------- */
.pxfb[data-accent="ink"] { --accent: var(--ink); --accent-ink: var(--ground); }
.pxfb[data-accent="cobalt"] { --accent: #2C4CC4; --accent-ink: #FFFFFF; --accent-soft: #E3E8FB; }
.pxfb[data-accent="plum"] { --accent: #6C2A5A; --accent-ink: #FFFFFF; --accent-soft: #F3E4EF; }
.pxfb[data-accent="rust"] { --accent: #B4471F; --accent-ink: #FFFFFF; --accent-soft: #FAE6DC; }

/* ============================================================ */



.pxfb {
	position: relative;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.pxfb::after {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none; z-index: 900;
	opacity: var(--grain-opacity);
	background-image: var(--grain-url);
	background-size: 180px 180px;
	mix-blend-mode: overlay;
}

.pxfb h1, .pxfb h2, .pxfb h3, .pxfb h4 {
	/* Scoped to .pxfb (30 Sep 2026). Unscoped, this rule hit every heading on
	   every child site and replaced their heading font with the body font
	   (Wolf Camera ticket). .pxfb h1 still outranks a host theme's bare
	   h1 { color: ... }, which was the original reason for color: inherit
	   (found on The Fotoshoppe 15 Sep 2026). */
	color: inherit;
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	font-stretch: var(--display-stretch, 100%);
	letter-spacing: var(--display-tracking);
	line-height: 1.08;
	text-wrap: balance;
	margin: 0;
}

.pxfb p { margin: 0; }
.pxfb a { color: inherit; }
.pxfb button, .pxfb input, .pxfb select, .pxfb textarea { font: inherit; color: inherit; }

.pxfb :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

.pxfb .wrap { width: min(1240px, 100% - 3rem); margin-inline: auto; }
@media (max-width: 640px) { .pxfb .wrap { width: min(1240px, 100% - 1.75rem); } }

.pxfb .eyebrow {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
	color: var(--ink-3);
}

.pxfb .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.pxfb .muted { color: var(--ink-2); }
.pxfb .faint { color: var(--ink-3); }
.pxfb .tnum { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.pxfb .topbar {
	position: sticky; top: 0; z-index: 60;
	background: color-mix(in srgb, var(--ground) 88%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rule);
}
.pxfb .topbar-in {
	display: flex; align-items: center; gap: 1.25rem;
	min-height: 62px; padding-block: 0.55rem;
}
.pxfb .brandmark { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.pxfb .brandmark .canister {
	width: 26px; height: 26px; flex: none;
	border-radius: 5px;
	background: var(--accent);
	position: relative;
	display: grid; place-items: center;
}
.pxfb .brandmark .canister::before {
	content: ""; width: 10px; height: 10px; border-radius: 50%;
	border: 2.5px solid var(--accent-ink);
}
.pxfb .brandname {
	font-family: var(--font-display);
	font-weight: var(--display-weight);
	font-size: 1.05rem;
	letter-spacing: var(--display-tracking);
}
/* Defensive: these class names are common in host themes. The builder only ever
   set geometry on them, so a theme that also paints .section / .wrap / .rolls
   bled its background and text colour straight through. Assert ours.
   Found by the Bootstrap-theme harness, 15 Sep 2026. */
.pxfb .section, .pxfb .wrap, .pxfb .rolls, .pxfb .builder, .pxfb .rail, .pxfb .doors, .pxfb .labels, .pxfb .timeline {
	background: none;
	color: var(--ink);
}

.pxfb .queue { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pxfb .qchip {
	display: inline-flex; align-items: baseline; gap: 0.4rem;
	font-family: var(--font-mono); font-size: 0.7rem;
	padding: 0.28rem 0.55rem;
	border: 1px solid var(--rule);
	border-radius: var(--r-pill);
	background: var(--surface);
	white-space: nowrap;
}
.pxfb .qchip b { font-weight: 600; color: var(--ink); }
.pxfb .qchip span { color: var(--ink-3); }
.pxfb .qdot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; align-self: center; }
.pxfb .qdot.warm { background: var(--signal); }
.pxfb .topbar-spacer { margin-left: auto; }

/* ---------- buttons ---------- */
.pxfb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	padding: 0.62rem 1.05rem;
	border-radius: var(--r-md);
	border: 1px solid var(--rule-strong);
	background: var(--surface);
	color: var(--ink);
	font-weight: 500; font-size: 0.9rem;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.pxfb-btn:hover { border-color: var(--ink-3); }
.pxfb-btn:active { transform: translateY(1px); }
.pxfb-btn-primary {
	background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
	font-weight: 600;
}
.pxfb-btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
.pxfb-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.pxfb-btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.pxfb-btn-sm { padding: 0.36rem 0.65rem; font-size: 0.8rem; }
.pxfb-btn-block { width: 100%; }
.pxfb-btn-lg { padding: 0.85rem 1.5rem; font-size: 1rem; }

/* ---------- hero ---------- */
.pxfb .hero { padding-block: clamp(1.1rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.6rem); }

/* Photographic banner. Falls back to a flat accent-tinted panel with no image. */
.pxfb .hero-photo {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	min-height: clamp(240px, 30vw, 380px);
	display: flex;
	align-items: flex-end;
	background-color: var(--surface-2);
	background-size: cover;
	background-position: center 58%;
	background-repeat: no-repeat;
	border: var(--card-border);
}
.pxfb .hero-photo::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg,
		rgba(12, 10, 9, 0.82) 0%,
		rgba(12, 10, 9, 0.62) 38%,
		rgba(12, 10, 9, 0.12) 68%,
		rgba(12, 10, 9, 0) 100%);
	opacity: 0;
	transition: opacity .2s ease;
}
.pxfb .hero-photo[data-has-photo]::before { opacity: 1; }
.pxfb .hero-photo[data-align="right"] { justify-content: flex-end; }
.pxfb .hero-photo[data-align="right"]::before {
	background: linear-gradient(270deg,
		rgba(12, 10, 9, 0.84) 0%,
		rgba(12, 10, 9, 0.64) 38%,
		rgba(12, 10, 9, 0.12) 68%,
		rgba(12, 10, 9, 0) 100%);
}
.pxfb .hero-photo-copy {
	position: relative; z-index: 1;
	padding: clamp(1.4rem, 3vw, 2.8rem);
	width: min(100%, 30rem);
}
.pxfb .hero-photo[data-has-photo] .hero-photo-copy, .pxfb .hero-photo[data-has-photo] .hero-photo-copy h1, .pxfb .hero-photo[data-has-photo] .hero-photo-copy .lede, .pxfb .hero-photo[data-has-photo] .hero-photo-copy .eyebrow { color: #F6F1EA; }
.pxfb .hero-photo[data-has-photo] .hero-photo-copy h1 { text-shadow: 0 1px 18px rgba(12, 10, 9, 0.5); }
.pxfb .hero-photo .eyebrow { margin-bottom: 0.7rem; }
.pxfb .hero-photo h1 { margin-bottom: 0.6rem; }
@media (max-width: 620px) {
	.pxfb .hero-photo { min-height: 0; display: block; background-position: center 40%; }
	.pxfb .hero-photo-copy { max-width: none; }
}
.pxfb .hero-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .pxfb .hero-grid { grid-template-columns: 1.15fr 0.85fr; align-items: end; } }
.pxfb .hero h1 { font-size: var(--step-3); margin-bottom: 0.7rem; line-height: 1.05; text-wrap: balance; }
.pxfb .hero .lede { font-size: var(--step-0); color: var(--ink-2); max-width: 40ch; line-height: 1.45; }
.pxfb .hero-facts { display: flex; flex-direction: column; gap: 0.7rem; }
.pxfb .fact {
	display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
	padding: 0.7rem 0.85rem;
	border-left: 2px solid var(--accent);
	background: var(--surface);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}
.pxfb .fact .k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.pxfb .fact .v { font-size: 0.88rem; line-height: 1.45; }
.pxfb .fact .v b { font-weight: 600; }

/* ---------- doors ---------- */
.pxfb .doors { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin-top: 2.4rem; }
@media (min-width: 760px) { .pxfb .doors { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.pxfb .door {
	text-align: left; cursor: pointer;
	padding: 1.15rem 1.15rem 1.05rem;
	border: var(--card-border); box-shadow: var(--card-shadow);
	border-radius: var(--r-lg);
	background: var(--surface);
	display: flex; flex-direction: column; gap: 0.45rem;
	transition: border-color .18s ease, transform .18s ease, background .18s ease;
	position: relative; overflow: hidden;
}
.pxfb .door:hover { border-color: var(--accent); transform: translateY(-2px); }
.pxfb .door[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pxfb .door[aria-pressed="true"]::after {
	content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--accent);
}
.pxfb .door .dt { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-1); letter-spacing: var(--display-tracking); }
.pxfb .door .dd { font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; }
.pxfb .door .dm { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-3); margin-top: 0.15rem; }

/* ---------- section frame ---------- */
.pxfb .section { padding-block: clamp(2.2rem, 5vw, 4rem); }
.pxfb .section-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.pxfb .section-head h2 { font-size: var(--step-3); }
.pxfb .section-head .sh-note { font-size: 0.85rem; color: var(--ink-3); margin-left: auto; }
.pxfb .rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- builder layout ---------- */
.pxfb .builder { display: grid; gap: 1.4rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1080px) { .pxfb .builder { grid-template-columns: minmax(0,1fr) 340px; gap: 2rem; } }

/* ---------- roll card ---------- */
.pxfb .rolls { display: flex; flex-direction: column; gap: 0.85rem; }

.pxfb .roll {
	border: var(--card-border); box-shadow: var(--card-shadow);
	border-radius: var(--r-lg);
	background: var(--surface);
	overflow: hidden;
	position: relative;
	transition: border-color .2s ease;
}
.pxfb .roll.is-open { border-color: var(--rule-strong); }
.pxfb .roll::before {
	content: ""; display: var(--sprocket-display);
	position: absolute; left: 0; top: 0; bottom: 0; width: 15px;
	background-image: radial-gradient(var(--ground) 0 3.2px, transparent 3.4px);
	background-size: 15px 15px; background-position: 0 7px;
	border-right: 1px solid var(--rule);
	pointer-events: none;
}
.pxfb[data-skin="safelight"] .roll { padding-left: 15px; }

.pxfb .roll-head {
	display: grid; grid-template-columns: auto minmax(0,1fr) auto auto;
	gap: 0.85rem; align-items: center;
	padding: 0.85rem 1rem;
	cursor: pointer; width: 100%; text-align: left;
	background: none; border: 0;
}
.pxfb .roll-index {
	font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
	width: 30px; height: 30px; flex: none;
	display: grid; place-items: center;
	border-radius: var(--r-sm);
	background: var(--surface-2); color: var(--ink-2);
}
.pxfb .roll.is-open .roll-index { background: var(--accent); color: var(--accent-ink); }
.pxfb .roll-title { min-width: 0; }
.pxfb .roll-name { display: block; font-weight: 600; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxfb .roll-name.unnamed { color: var(--ink-3); font-weight: 500; font-style: italic; }
.pxfb .roll-spec { display: block; font-family: var(--font-mono); font-size: 0.71rem; color: var(--ink-3); margin-top: 2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxfb .roll-price { font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pxfb .roll-caret { color: var(--ink-3); transition: transform .2s ease; }
.pxfb .roll.is-open .roll-caret { transform: rotate(180deg); }
@media (max-width: 560px) {
	.pxfb .roll-head { grid-template-columns: auto minmax(0,1fr) auto; gap: 0.6rem; padding: 0.75rem; }
	.pxfb .roll-caret { display: none; }
}

.pxfb .roll-body { border-top: 1px solid var(--rule); padding: 0.25rem 1rem 1rem; }
@media (max-width: 560px) { .pxfb .roll-body { padding-inline: 0.75rem; } }

/* ---------- option groups ---------- */
.pxfb .opt { padding-block: 0.95rem; border-bottom: 1px dashed var(--rule); }
.pxfb .opt:last-child { border-bottom: 0; }
.pxfb .opt-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.55rem; flex-wrap: wrap; }
.pxfb .opt-label { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; }
.pxfb .opt-hint { font-size: 0.76rem; color: var(--ink-3); }
.pxfb .opt-help { margin-left: auto; }
.pxfb .linkish {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-size: 0.76rem; color: var(--accent); font-weight: 500;
	text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

.pxfb .choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pxfb .choice {
	position: relative; cursor: pointer; text-align: left;
	display: inline-flex; flex-direction: column; gap: 1px;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-md);
	background: var(--surface);
	font-size: 0.83rem; line-height: 1.3;
	transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.pxfb .choice:hover { border-color: var(--ink-3); }
.pxfb .choice[aria-pressed="true"] {
	border-color: var(--accent); background: var(--accent-soft);
	box-shadow: inset 0 0 0 1px var(--accent);
}
.pxfb .choice .cl { font-weight: 500; }
.pxfb .choice .cp { font-family: var(--font-mono); font-size: 0.71rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pxfb .choice[aria-pressed="true"] .cp { color: var(--ink-2); }
.pxfb .choice[disabled] { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* tiered choices (scan levels) render as rows */
.pxfb .choices.stack { flex-direction: column; flex-wrap: nowrap; gap: 0.4rem; }
.pxfb .choices.stack .choice {
	flex-direction: row; align-items: center; gap: 0.85rem;
	width: 100%; padding: 0.6rem 0.75rem;
}
.pxfb .choice .grow { flex: 1 1 auto; min-width: 0; }
.pxfb .choice .spec { font-family: var(--font-mono); font-size: 0.69rem; color: var(--ink-3); display: block; margin-top: 2px; }
.pxfb .choice .badge {
	font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .08em; text-transform: uppercase;
	padding: 0.12rem 0.36rem; border-radius: var(--r-pill);
	background: var(--signal-soft); color: var(--signal); font-weight: 600; white-space: nowrap;
}

.pxfb .roll-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.95rem; border-top: 1px solid var(--rule); }
.pxfb .roll-actions .spacer { flex: 1 1 auto; }

.pxfb .namefield {
	display: flex; align-items: center; gap: 0.5rem;
	border: 1px solid var(--rule-strong); border-radius: var(--r-md);
	background: var(--ground); padding: 0.15rem 0.15rem 0.15rem 0.6rem;
	max-width: 460px;
}
.pxfb .namefield input { flex: 1; border: 0; background: transparent; padding: 0.42rem 0; font-size: 0.9rem; min-width: 0; }
.pxfb .namefield input:focus { outline: none; }
.pxfb .namefield .tag {
	font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .06em;
	padding: 0.3rem 0.45rem; border-radius: var(--r-sm);
	background: var(--surface-2); color: var(--ink-3);
}

.pxfb .qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); overflow: hidden; }
.pxfb .qty button { width: 32px; height: 32px; border: 0; background: var(--surface); cursor: pointer; color: var(--ink-2); font-size: 1rem; }
.pxfb .qty button:hover { background: var(--surface-2); color: var(--ink); }
.pxfb .qty .n { min-width: 34px; text-align: center; font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; }

/* ---------- lab info, foot of page ---------- */
.pxfb #labInfo .queue { margin-bottom: 1.1rem; }
.pxfb #labInfo .hero-facts { display: grid; gap: 0.7rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pxfb #labInfo .hero-facts { grid-template-columns: repeat(3, 1fr); } }

.pxfb .addrow { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.pxfb .addrow.hidden { display: none; }

.pxfb .roll-empty {
	border: 1px dashed var(--rule-strong);
	border-radius: var(--r-lg);
	background: var(--surface);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.pxfb .roll-empty h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--display-weight); }
.pxfb .roll-empty p { color: var(--ink-2); font-size: 0.9rem; max-width: 46ch; line-height: 1.55; }
.pxfb .roll-empty .pxfb-btn { margin-top: 0.4rem; }

/* ---------- order rail ---------- */
.pxfb .rail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 0.8rem; }
@media (max-width: 1079px) { .pxfb .rail { position: static; } }
.pxfb .rail-card {
	border: var(--card-border); box-shadow: var(--card-shadow);
	border-radius: var(--r-lg); background: var(--surface); overflow: hidden;
}
.pxfb .rail-head { padding: 0.85rem 1rem 0.6rem; border-bottom: 1px solid var(--rule); display: flex; align-items: baseline; gap: .5rem; }
.pxfb .rail-head h3 { font-size: 1rem; }
.pxfb .rail-head .n { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-3); }
.pxfb .rail-lines { padding: 0.6rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 330px; overflow-y: auto; }
.pxfb .rline { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; font-size: 0.82rem; }
.pxfb .rline .rl-n { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxfb .rline .rl-s { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); grid-column: 1; }
.pxfb .rline .rl-p { font-family: var(--font-mono); font-variant-numeric: tabular-nums; grid-row: 1; grid-column: 2; }
.pxfb .rail-sum { padding: 0.7rem 1rem 0.9rem; border-top: 1px solid var(--rule); background: var(--surface-2); display: flex; flex-direction: column; gap: 0.35rem; }
.pxfb .srow { display: flex; justify-content: space-between; font-size: 0.84rem; }
.pxfb .srow .mono { font-variant-numeric: tabular-nums; }
.pxfb .srow.total { font-size: 1.05rem; font-weight: 700; padding-top: 0.4rem; border-top: 1px solid var(--rule-strong); margin-top: 0.25rem; }
.pxfb .srow.total .mono { font-family: var(--font-mono); }
.pxfb .srow.credit { color: var(--good); }
.pxfb .rail-cta { padding: 0.9rem 1rem 1.1rem; border-top: 1px solid var(--rule); }
.pxfb .rail-cta .pxfb-btn-primary {
	padding: 0.85rem 1.2rem;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 38%, transparent);
}
.pxfb .rail-cta .pxfb-btn-primary:disabled {
	background: var(--surface-2); color: var(--ink-3); border-color: var(--rule-strong);
	box-shadow: none; cursor: not-allowed;
}

.pxfb .promise {
	display: flex; gap: 0.6rem; align-items: flex-start;
	padding: 0.7rem 0.85rem; border-radius: var(--r-md);
	background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	font-size: 0.79rem; line-height: 1.45;
}
.pxfb .promise svg { flex: none; margin-top: 2px; color: var(--accent); }
.pxfb .promise b { font-weight: 600; }

.pxfb .readyby {
	display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
	padding: 0.7rem 0.85rem; border-radius: var(--r-md);
	border: 1px dashed var(--rule-strong); font-size: 0.82rem;
}
.pxfb .readyby .d { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* mobile sticky bar */
.pxfb .mobar {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
	display: none; gap: 0.75rem; align-items: center;
	padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--surface) 94%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--rule);
}
@media (max-width: 1079px) { .pxfb .mobar { display: flex; } .pxfb { padding-bottom: 76px; } }
.pxfb .mobar .mt { display: flex; flex-direction: column; line-height: 1.15; }
.pxfb .mobar .mt .l { font-size: 0.68rem; color: var(--ink-3); font-family: var(--font-mono); }
.pxfb .mobar .mt .v { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }
.pxfb .mobar .pxfb-btn { margin-left: auto; }

/* ---------- scan comparator ---------- */
.pxfb .comparator {
	border: var(--card-border); box-shadow: var(--card-shadow);
	border-radius: var(--r-lg); background: var(--surface); overflow: hidden;
}
.pxfb .cmp-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pxfb .cmp-grid { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); } }
.pxfb .cmp-stage { position: relative; background: var(--surface-2); display: grid; place-items: center; padding: 1rem; }
.pxfb .cmp-stage canvas {
	display: block; width: 100%; max-width: 520px; height: auto;
	border-radius: var(--r-sm);
	image-rendering: auto;
	box-shadow: 0 1px 0 var(--rule-strong);
}
.pxfb .cmp-caption {
	position: absolute; left: 1rem; bottom: 1rem;
	font-family: var(--font-mono); font-size: 0.68rem;
	padding: 0.3rem 0.55rem; border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	border: 1px solid var(--rule); backdrop-filter: blur(6px);
}
.pxfb .cmp-side { padding: 1.1rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.9rem; }
@media (min-width: 860px) { .pxfb .cmp-side { border-top: 0; border-left: 1px solid var(--rule); } }
.pxfb .sizerow { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.pxfb .sizechip {
	cursor: pointer; padding: 0.32rem 0.6rem; font-size: 0.78rem;
	border: 1px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--surface);
	font-family: var(--font-mono);
}
.pxfb .sizechip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.pxfb .tierlist { display: flex; flex-direction: column; gap: 0.4rem; }
.pxfb .tierrow {
	display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center;
	padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--r-md);
	background: var(--surface); cursor: pointer; text-align: left;
}
.pxfb .tierrow[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pxfb .tierrow .tn { font-weight: 600; font-size: 0.86rem; }
.pxfb .tierrow .ts { font-family: var(--font-mono); font-size: 0.67rem; color: var(--ink-3); }
.pxfb .verdict {
	font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .07em; text-transform: uppercase;
	font-weight: 600; padding: 0.16rem 0.42rem; border-radius: var(--r-pill); white-space: nowrap;
}
.pxfb .verdict.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.pxfb .verdict.mid { background: var(--signal-soft); color: var(--signal); }
.pxfb .verdict.bad { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.pxfb .swatchdot { width: 26px; height: 26px; border-radius: var(--r-sm); flex: none; }

/* ---------- panels / steps ---------- */
.pxfb .panel {
	border: var(--card-border); box-shadow: var(--card-shadow);
	border-radius: var(--r-lg); background: var(--surface); padding: 1.15rem;
}
.pxfb .panel + .panel { margin-top: 0.85rem; }
.pxfb .panel h3 { font-size: var(--step-1); margin-bottom: 0.2rem; }
.pxfb .panel .psub { font-size: 0.85rem; color: var(--ink-2); margin-bottom: 0.9rem; }

.pxfb .pickers { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pxfb .pickers { grid-template-columns: repeat(3, 1fr); } }
.pxfb .picker {
	text-align: left; cursor: pointer; padding: 0.85rem;
	border: 1px solid var(--rule-strong); border-radius: var(--r-md);
	background: var(--surface); display: flex; flex-direction: column; gap: 0.25rem;
	transition: border-color .15s ease, background .15s ease;
}
.pxfb .picker:hover { border-color: var(--ink-3); }
.pxfb .picker[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pxfb .picker .pt { font-weight: 600; font-size: 0.9rem; }
.pxfb .picker .pd { font-size: 0.78rem; color: var(--ink-2); line-height: 1.4; }
.pxfb .picker .pp { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); margin-top: 0.15rem; }

/* ---------- confirmation / slip ---------- */
.pxfb .slip {
	background: var(--surface); border: 1px solid var(--rule-strong);
	border-radius: var(--r-md); overflow: hidden;
}
.pxfb .slip-top { padding: 1rem 1.1rem; border-bottom: 1px dashed var(--rule-strong); display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.pxfb .slip-top .who { flex: 1 1 200px; }
.pxfb .slip-code { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; letter-spacing: .06em; }
.pxfb .slip table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.pxfb .slip th {
	text-align: left; font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ink-3); font-weight: 500;
	padding: 0.5rem 1.1rem; border-bottom: 1px solid var(--rule);
}
.pxfb .slip td { padding: 0.55rem 1.1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pxfb .slip tr:last-child td { border-bottom: 0; }
.pxfb .slip .ref { font-family: var(--font-mono); font-weight: 600; }
.pxfb .slip .spec2 { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-2); }
.pxfb .barcode { display: block; }
.pxfb .labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.6rem; }
.pxfb .rolllabel {
	border: 1px dashed var(--rule-strong); border-radius: var(--r-sm);
	padding: 0.55rem 0.6rem; background: var(--surface);
	display: flex; flex-direction: column; gap: 0.3rem;
}
.pxfb .rolllabel .rl-ref { font-family: var(--font-mono); font-weight: 600; font-size: 0.82rem; letter-spacing: .04em; }
.pxfb .rolllabel .rl-nm { font-size: 0.72rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- timeline ---------- */
.pxfb .timeline { display: flex; flex-direction: column; gap: 0; }
.pxfb .tstep { display: grid; grid-template-columns: 26px 1fr; gap: 0.85rem; padding-bottom: 1rem; position: relative; }
.pxfb .tstep:last-child { padding-bottom: 0; }
.pxfb .tstep::before {
	content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 1.5px; background: var(--rule);
}
.pxfb .tstep:last-child::before { display: none; }
.pxfb .tdot {
	width: 26px; height: 26px; border-radius: 50%; z-index: 1;
	display: grid; place-items: center;
	border: 1.5px solid var(--rule-strong); background: var(--surface);
	font-family: var(--font-mono); font-size: 0.63rem; color: var(--ink-3);
}
.pxfb .tstep.done .tdot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pxfb .tstep.now .tdot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pxfb .tstep .tt { display: block; font-weight: 600; font-size: 0.9rem; }
.pxfb .tstep .td { display: block; font-size: 0.8rem; color: var(--ink-2); line-height: 1.45; }
.pxfb .tstep.key .tt::after {
	content: "the one that matters"; margin-left: 0.5rem;
	font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--accent); font-weight: 600;
}

/* ---------- settings drawer ---------- */
.pxfb .gearbtn {
	position: fixed; right: 1rem; bottom: 1rem; z-index: 80;
	border-radius: var(--r-pill); padding: 0.6rem 0.95rem;
	box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.pxfb .gear-sm { display: none; }
@media (max-width: 1079px) { .pxfb .gearbtn { display: none; } .pxfb .gear-sm { display: inline-flex; } }
.pxfb .scrim {
	position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.42);
	opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.pxfb .scrim.open { opacity: 1; pointer-events: auto; }
.pxfb .drawer {
	position: fixed; z-index: 96; top: 0; right: 0; bottom: 0;
	width: min(400px, 100%); background: var(--surface);
	border-left: 1px solid var(--rule);
	transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
	display: flex; flex-direction: column;
}
.pxfb .drawer.open { transform: none; }
.pxfb .drawer-head { padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: .75rem; }
.pxfb .drawer-head h3 { font-size: 1.05rem; margin-right: auto; }
.pxfb .drawer-body { overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: 1.35rem; }
.pxfb .fgroup { display: flex; flex-direction: column; gap: 0.5rem; }
.pxfb .fgroup > .eyebrow { margin-bottom: 0.1rem; }
.pxfb .segmented { display: flex; border: 1px solid var(--rule-strong); border-radius: var(--r-md); overflow: hidden; }
.pxfb .segmented button {
	flex: 1; padding: 0.5rem 0.4rem; border: 0; background: var(--surface); cursor: pointer;
	font-size: 0.8rem; font-weight: 500;
}
.pxfb .segmented button + button { border-left: 1px solid var(--rule); }
.pxfb .segmented button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pxfb .swatches { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.pxfb .swatch { width: 30px; height: 30px; border-radius: var(--r-sm); border: 2px solid transparent; cursor: pointer; padding: 0; }
.pxfb .swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface) inset; }
.pxfb .toggle-row {
	display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0;
	border-bottom: 1px dashed var(--rule); font-size: 0.85rem;
}
.pxfb .toggle-row:last-child { border-bottom: 0; }
.pxfb .toggle-row .tl { flex: 1; }
.pxfb .toggle-row .tl small { display: block; color: var(--ink-3); font-size: 0.73rem; line-height: 1.35; }
.pxfb .sw { width: 40px; height: 23px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface-2); position: relative; cursor: pointer; flex: none; transition: background .18s ease, border-color .18s ease; }
.pxfb .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink-3); transition: transform .18s ease, background .18s ease; }
.pxfb .sw[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.pxfb .sw[aria-pressed="true"]::after { transform: translateX(17px); background: var(--accent-ink); }
.pxfb .textfield { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--ground); }

/* ---------- design notes ---------- */
.pxfb .note {
	display: none; margin-top: 0.6rem;
	border-left: 2px solid var(--signal); background: var(--signal-soft);
	padding: 0.55rem 0.75rem; border-radius: 0 var(--r-sm) var(--r-sm) 0;
	font-size: 0.76rem; line-height: 1.5; color: var(--ink-2);
}
.pxfb[data-notes="on"] .note { display: block; }
.pxfb .note b { color: var(--ink); font-weight: 600; }
.pxfb .note .src { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-3); display: block; margin-top: 0.25rem; }


/* ---------- generated imagery: contact strip ---------- */
.pxfb .hero-strip {
	display: none;
	margin-top: clamp(1.6rem, 4vw, 2.6rem);
	border-radius: var(--r-md);
	overflow: hidden;
	border: var(--card-border);
	background: #0B0B0B;
	position: relative;
	line-height: 0;
}
.pxfb .hero-strip canvas { display: block; width: 100%; height: auto; }
.pxfb .hero-strip::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, color-mix(in srgb, var(--ground) 70%, transparent) 0%, transparent 12%, transparent 88%, color-mix(in srgb, var(--ground) 70%, transparent) 100%);
}
.pxfb[data-skin="contact"] .hero-strip, .pxfb[data-skin="safelight"] .hero-strip { display: block; }


/* ---------- generated imagery: per-roll frame ---------- */
.pxfb .roll-thumb {
	display: none; width: 62px; height: 42px; flex: none;
	border-radius: 2px; overflow: hidden; background: #0B0B0B;
	border: 1px solid var(--rule);
	line-height: 0;
}
.pxfb .roll-thumb canvas { width: 100%; height: 100%; display: block; }
.pxfb[data-skin="contact"] .roll-thumb, .pxfb[data-skin="chemistry"] .roll-thumb, .pxfb[data-skin="counter"] .roll-thumb, .pxfb[data-skin="safelight"] .roll-thumb { display: block; }

.pxfb[data-skin="contact"] .roll-head, .pxfb[data-skin="chemistry"] .roll-head, .pxfb[data-skin="counter"] .roll-head, .pxfb[data-skin="safelight"] .roll-head {
	grid-template-columns: auto auto minmax(0,1fr) auto auto;
}
@media (max-width: 560px) {
	.pxfb[data-skin="contact"] .roll-head, .pxfb[data-skin="chemistry"] .roll-head, .pxfb[data-skin="counter"] .roll-head, .pxfb[data-skin="safelight"] .roll-head {
		grid-template-columns: auto auto minmax(0,1fr) auto;
	}
	.pxfb .roll-thumb { width: 46px; height: 32px; }
}

/* ---------- contact-sheet skin specifics ---------- */
.pxfb[data-skin="contact"] .roll-index {
	background: var(--accent); color: var(--accent-ink);
	border-radius: 2px; font-weight: 700;
}
.pxfb[data-skin="contact"] .eyebrow { font-weight: 600; }
.pxfb[data-skin="contact"] .section-head h2 { text-transform: uppercase; letter-spacing: -0.01em; }
.pxfb[data-skin="contact"] .choice[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--accent);
}
.pxfb[data-skin="contact"] .door[aria-pressed="true"]::after { height: 4px; }

/* ---------- chemistry skin specifics ---------- */
.pxfb .chem-blobs {
	display: none; position: absolute; inset: 9% -2% auto auto;
	width: min(330px, 31vw); aspect-ratio: 1.06; pointer-events: none; z-index: 0;
	opacity: .9;
}
@media (max-width: 940px) { .pxfb .chem-blobs { inset: auto -10% 2% auto; width: min(240px, 46vw); opacity: .5; } }
.pxfb[data-skin="chemistry"] .chem-blobs { display: block; }
.pxfb .chem-blobs span {
	position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%;
	mix-blend-mode: multiply; filter: blur(0.5px);
	animation: chemDrift 18s ease-in-out infinite;
}
.pxfb[data-theme="dark"] .chem-blobs span, .pxfb:not([data-theme="light"]) .chem-blobs span { mix-blend-mode: screen; }
@media (prefers-color-scheme: light) {
	.pxfb:not([data-theme="dark"]) .chem-blobs span { mix-blend-mode: multiply; }
}
.pxfb .chem-blobs .c { background: var(--cyan);    left: 0;    top: 6%;  }
.pxfb .chem-blobs .m { background: var(--magenta); right: 4%;  top: 0;   animation-delay: -6s; }
.pxfb .chem-blobs .y { background: var(--yellow);  left: 19%;  bottom: 0; animation-delay: -12s; }
@keyframes chemDrift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33% { transform: translate(4%, -3%) scale(1.04); }
	66% { transform: translate(-3%, 4%) scale(0.97); }
}
.pxfb[data-skin="chemistry"] .hero { position: relative; overflow: hidden; }
.pxfb[data-skin="chemistry"] .hero-grid, .pxfb[data-skin="chemistry"] .doors { position: relative; z-index: 1; }
.pxfb[data-skin="chemistry"] .roll { border-width: 2px; }
.pxfb[data-skin="chemistry"] .roll-index { border-radius: 8px; font-weight: 700; }
.pxfb[data-skin="chemistry"] .choice { border-width: 2px; font-weight: 500; }
.pxfb[data-skin="chemistry"] .choice[aria-pressed="true"] {
	background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
	box-shadow: 3px 3px 0 var(--rule-strong);
}
.pxfb[data-skin="chemistry"] .choice[aria-pressed="true"] .cp, .pxfb[data-skin="chemistry"] .choice[aria-pressed="true"] .spec { color: color-mix(in srgb, var(--accent-ink) 82%, transparent); }
.pxfb[data-skin="chemistry"] .pxfb-btn-primary { box-shadow: 4px 4px 0 var(--rule-strong); }
.pxfb[data-skin="chemistry"] .fact { border-left-width: 4px; border-radius: 0 var(--r-md) var(--r-md) 0; }
.pxfb[data-skin="chemistry"] .section-head h2 { letter-spacing: -0.045em; }
.pxfb[data-skin="chemistry"] .roll[data-proc] { border-left-width: 7px; }
.pxfb[data-skin="chemistry"] .roll[data-proc="c41"] { border-left-color: var(--magenta); }
.pxfb[data-skin="chemistry"] .roll[data-proc="bw"] { border-left-color: var(--ink-3); }
.pxfb[data-skin="chemistry"] .roll[data-proc="e6"] { border-left-color: var(--cyan); }
.pxfb[data-skin="chemistry"] .roll[data-proc="ecn2"] { border-left-color: var(--yellow); }

/* ---------- counter skin specifics: bigger everything ---------- */
.pxfb[data-skin="counter"] { font-size: 17px; }
.pxfb[data-skin="counter"] .pxfb-btn { padding: 0.95rem 1.4rem; font-size: 1rem; border-width: 2px; }
.pxfb[data-skin="counter"] .pxfb-btn-sm { padding: 0.6rem 0.9rem; font-size: 0.9rem; }
.pxfb[data-skin="counter"] .choice { padding: 0.85rem 1rem; font-size: 0.98rem; min-height: 62px; justify-content: center; border-width: 2px; }
.pxfb[data-skin="counter"] .choices { gap: 0.6rem; }
.pxfb[data-skin="counter"] .choices:not(.stack) { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pxfb[data-skin="counter"] .choices.stack .choice { min-height: 74px; }
.pxfb[data-skin="counter"] .roll-head { padding: 1.15rem 1.15rem; }
.pxfb[data-skin="counter"] .roll-thumb { width: 88px; height: 60px; }
.pxfb[data-skin="counter"] .roll-name { font-size: 1.15rem; }
.pxfb[data-skin="counter"] .roll-price { font-size: 1.2rem; }
.pxfb[data-skin="counter"] .roll-index { width: 40px; height: 40px; font-size: 0.85rem; }
.pxfb[data-skin="counter"] .opt-label { font-size: 0.95rem; }
.pxfb[data-skin="counter"] .qty button { width: 46px; height: 46px; font-size: 1.25rem; }
.pxfb[data-skin="counter"] .picker { padding: 1.15rem; min-height: 120px; }
.pxfb[data-skin="counter"] .hero h1 { font-size: var(--step-4); }
.pxfb[data-skin="counter"] .queue { display: none; }
.pxfb[data-skin="counter"] .srow.total { font-size: 1.35rem; }
.pxfb[data-skin="counter"] :focus-visible { outline-width: 3px; }

/* ---------- safelight: darkroom glow ---------- */
.pxfb .safelight-glow {
	display: none; position: absolute; inset: -30% -10% auto -10%; height: 130%;
	pointer-events: none; z-index: 0;
	background: radial-gradient(60% 55% at 78% 18%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 70%),
	            radial-gradient(50% 45% at 12% 6%, color-mix(in srgb, var(--signal) 16%, transparent) 0%, transparent 72%);
}
.pxfb[data-skin="safelight"] .safelight-glow { display: block; }
.pxfb[data-skin="safelight"] .hero { position: relative; overflow: hidden; }
.pxfb[data-skin="safelight"] .hero-grid, .pxfb[data-skin="safelight"] .doors, .pxfb[data-skin="safelight"] .hero-strip { position: relative; z-index: 1; }
.pxfb[data-skin="safelight"] .roll-index { font-weight: 700; }

/* ---------- entrance ---------- */
.pxfb .rise { opacity: 0; transform: translateY(10px); animation: riseIn .6s cubic-bezier(.2,.7,.3,1) forwards; }
.pxfb .rise-2 { animation-delay: .08s; }
.pxfb .rise-3 { animation-delay: .16s; }
@keyframes riseIn { to { opacity: 1; transform: none; } }

.pxfb[data-chrome="none"] .topbar { display: none; }
.pxfb[data-chrome="none"] .hero { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.pxfb[data-chrome="none"] .footer { display: none; }
.pxfb[data-panel="false"] .gearbtn, .pxfb[data-panel="false"] .gear-sm { display: none; }

/* ---------- misc ---------- */
.pxfb .hidden { display: none !important; }
.pxfb .stepnav { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pxfb .stepnav button {
	background: none; border: 0; cursor: pointer; padding: 0.35rem 0.1rem;
	font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-3); border-bottom: 2px solid transparent;
}
.pxfb .stepnav button[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.pxfb .stepnav .sep { color: var(--rule-strong); }
.pxfb .cols2 { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .pxfb .cols2 { grid-template-columns: 1fr 1fr; } }
.pxfb .footer { padding-block: 2.5rem 3.5rem; border-top: 1px solid var(--rule); margin-top: 3rem; }
.pxfb .footer p { font-size: 0.8rem; color: var(--ink-3); max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
	.pxfb *, .pxfb *::before, .pxfb *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ===== END: film-builder ===== */
/* ===== START: Free shipping progress bar ===== */
.px-freeship { text-align: center; }
.px-freeship-msg { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; font-weight: 500; padding-bottom: 0.6rem; }
.px-freeship-icon { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: pxFreeshipDrive 2.4s ease-in-out infinite; }
.px-freeship-amount { font-weight: 700; font-size: 1.2em; }
.px-freeship-bar { height: 14px; border-radius: 7px; background: rgba(0,0,0,0.07); overflow: hidden; max-width: 460px; margin: 0 auto; }
.px-freeship-bar .progress-bar { border-radius: 7px; transition: width 0.6s ease; }
.px-freeship-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1.1rem; border-radius: 999px; color: #fff; font-weight: 700; letter-spacing: 0.02em; animation: pxFreeshipPop 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.px-freeship-check { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.px-freeship-note { font-size: 0.72rem; opacity: 0.6; margin-top: 0.55rem; text-transform: uppercase; letter-spacing: 0.06em; }
@keyframes pxFreeshipDrive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes pxFreeshipPop { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .px-freeship-icon, .px-freeship-pill { animation: none; } }
/* ===== END: Free shipping progress bar ===== */

/* ===== START: product-landing ===== Shopper 24 product landing pages. Scoped to .pl, prefix pl-. Markup: snippet product-landing/landing. Theme comes from product-landing/config. */
.pl{color:var(--pl-ink);background:var(--pl-page);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.pl *,.pl *::before,.pl *::after{box-sizing:border-box}
.pl img,.pl video{display:block;max-width:100%}
.pl a{text-decoration:none}
:where(.pl) p{margin:0}
.pl-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.pl-center{display:flex;justify-content:center;margin-top:36px}
.pl-sec{padding:clamp(64px,8vw,120px) 0}
.pl-tone-page{background:var(--pl-page)}
.pl-tone-deep{background:var(--pl-deep)}
.pl-tone-surface{background:var(--pl-surface)}
.pl-tone-page+.pl-tone-page,.pl-tone-deep+.pl-tone-deep{padding-top:0}

/* type */
.pl-eyebrow{font-family:var(--pl-mono-font);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pl-accent-hover);margin:0 0 16px}
.pl-h1,.pl-h2{font-family:var(--pl-heading-font);font-weight:400;color:var(--pl-ink);letter-spacing:-.01em;margin:0 0 20px;text-wrap:balance}
.pl-h1{font-size:clamp(46px,6vw,88px);line-height:.98}
.pl-h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02}
.pl-h1 em,.pl-h2 em{font-style:italic;color:var(--pl-accent-hover)}
.pl-h3{display:block;font-family:var(--pl-heading-font);font-size:24px;line-height:1.15;font-weight:400;letter-spacing:-.005em;color:var(--pl-ink);margin:0 0 10px}
.pl-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--pl-muted);max-width:60ch;text-wrap:pretty;margin:0 0 26px}
.pl-note{font-size:13.5px;line-height:1.55;color:var(--pl-faint);margin-top:16px}
.pl-head{margin-bottom:clamp(32px,4vw,56px)}
.pl-head--center{text-align:center}
.pl-head--center .pl-lead{margin-left:auto;margin-right:auto}
.pl-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pl-head--row .pl-lead{margin-bottom:0}

/* buttons */
.pl-btns{display:flex;flex-wrap:wrap;gap:12px}
.pl-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:inherit;font-weight:600;font-size:15.5px;line-height:1;letter-spacing:.01em;border:1.5px solid transparent;cursor:pointer;transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.pl-btn--primary{background:var(--pl-accent);color:var(--pl-accent-ink)!important;box-shadow:0 10px 24px -12px var(--pl-accent)}
.pl-btn--primary:hover{background:var(--pl-accent-hover);transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--pl-accent-hover)}
.pl-btn--ghost{background:transparent;color:var(--pl-ink)!important;border-color:color-mix(in srgb,var(--pl-ink) 38%,transparent)}
.pl-btn--ghost:hover{border-color:var(--pl-ink);background:color-mix(in srgb,var(--pl-ink) 8%,transparent)}
.pl-btn--link{min-height:0;padding:0;color:var(--pl-accent-hover)!important;text-decoration:underline!important;text-underline-offset:5px;text-decoration-thickness:1px!important}
.pl-arrow{width:18px;height:18px;flex:none;transition:transform .2s ease}
.pl-btn:hover .pl-arrow{transform:translateX(4px)}
.pl a:focus-visible,.pl button:focus-visible,.pl summary:focus-visible,.pl input:focus-visible+span,.pl input[type=range]:focus-visible{outline:2px solid var(--pl-accent-hover);outline-offset:3px}

/* breadcrumbs */
.pl-crumbs{padding-top:16px;padding-bottom:16px}
.pl-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--pl-faint)}
.pl-crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.pl-crumbs a{color:var(--pl-muted)!important}
.pl-crumbs a:hover{color:var(--pl-ink)!important}

/* hero */
.pl-hero{position:relative;background:var(--pl-page);isolation:isolate}
.pl-hero__stage{position:relative;overflow:hidden;container-type:size;height:min(84vw,480px)}
.pl-hero__canvas{position:absolute;--pl-cw:max(100cqw,calc(100cqh * var(--pl-arn)));width:var(--pl-cw);height:calc(var(--pl-cw) / var(--pl-arn));left:calc((100cqw - var(--pl-cw)) * var(--pl-fx));top:calc((100cqh - var(--pl-cw) / var(--pl-arn)) * var(--pl-fy));transform-origin:62% 40%;animation:pl-kb 26s ease-in-out infinite alternate}
.pl-hero__img,.pl-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-hero__sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(102deg,transparent 0 40%,rgba(255,236,214,.10) 44%,rgba(255,246,236,.46) 48.5%,rgba(255,255,255,.10) 52%,transparent 58% 100%);background-size:260% 100%;background-position:125% 0;mix-blend-mode:screen;animation:pl-sweep 9s cubic-bezier(.5,.05,.3,1) 1s infinite}
.pl-hero__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,var(--pl-page) 100%)}
.pl-hero__copy{position:relative;z-index:2;padding-top:28px;padding-bottom:56px}
.pl-hero .pl-lead{color:var(--pl-muted)}
.pl-chips{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:28px 0 0;padding:0;font-size:14px;color:var(--pl-muted)}
.pl-chips li{display:inline-flex;align-items:center;gap:8px}
.pl-chips svg{width:16px;height:16px;color:var(--pl-accent-hover);flex:none}
@keyframes pl-kb{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes pl-sweep{0%{background-position:125% 0}55%,100%{background-position:-25% 0}}
@media (min-width:992px){
  .pl-hero{display:flex;align-items:center;min-height:clamp(600px,46vw,860px)}
  .pl-hero__stage{position:absolute;inset:0;height:auto}
  .pl-hero__canvas{left:calc((100cqw - var(--pl-cw)) * var(--pl-fxd,var(--pl-fx)))}
  .pl-hero__scrim{background:linear-gradient(90deg,color-mix(in srgb,var(--pl-page) 94%,transparent) 0%,color-mix(in srgb,var(--pl-page) 72%,transparent) 28%,transparent 52%),linear-gradient(180deg,transparent 72%,var(--pl-page) 100%)}
  .pl-hero__copy{width:100%;padding-top:72px;padding-bottom:96px}
  .pl-hero__copy>*{max-width:540px}
  .pl-hero__copy>.pl-btns{max-width:none}
}

/* facts */
.pl-facts{background:var(--pl-page)}
.pl-facts__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--pl-line);border-bottom:1px solid var(--pl-line)}
.pl-facts__item{padding:26px 18px;border-left:1px solid var(--pl-line);min-width:0}
.pl-facts__item:nth-child(odd){border-left:0}
.pl-facts__item:nth-child(n+3){border-top:1px solid var(--pl-line)}
.pl-facts dt{font-family:var(--pl-heading-font);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--pl-ink);margin:0 0 10px}
.pl-facts dd{margin:0;font-size:14px;line-height:1.45;color:var(--pl-muted)}
@media (min-width:860px){
  .pl-facts__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pl-facts__item{border-top:0!important;border-left:1px solid var(--pl-line)!important;padding:34px 28px}
  .pl-facts__item:first-child{border-left:0!important;padding-left:0}
}

/* cards */
.pl-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px}
.pl-card{padding:26px 0 28px;border-top:1px solid var(--pl-line);min-width:0}
.pl-card p{color:var(--pl-muted);line-height:1.6;font-size:15.5px}
.pl-card__n{display:block;font-family:var(--pl-mono-font);font-size:12px;letter-spacing:.12em;color:var(--pl-accent-hover);margin-bottom:12px}
.pl-cards__split{display:grid;gap:48px}
.pl-cards__media{margin:0;border-radius:var(--pl-radius);overflow:hidden;align-self:start}
.pl-cards__media img{width:100%;height:auto}
.pl-cards__media figcaption{font-size:13px;color:var(--pl-faint);padding:12px 2px 0}
@media (min-width:760px){.pl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.pl-cards__split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:start}.pl-cards__media{position:sticky;top:110px}}

/* surface explorer */
.pl-surf__grid{display:grid;gap:36px;align-items:center}
.pl-surf__stage{position:relative;perspective:1300px;padding:clamp(28px,5vw,64px) clamp(22px,4.5vw,60px) 26px;border-radius:calc(var(--pl-radius) + 6px);background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--pl-wall) 82%,#fff 18%) 0%,var(--pl-wall) 55%,color-mix(in srgb,var(--pl-wall) 70%,#000 30%) 100%);touch-action:pan-y;user-select:none;-webkit-user-select:none;min-width:0}
.pl-surf__print{--rx:-4deg;--ry:10deg;--lx:30%;--ly:20%;--rxn:-4;--ryn:10;position:relative;aspect-ratio:4/3;width:100%;border-radius:12px;overflow:hidden;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;background:#e9e7e3;box-shadow:calc(var(--ryn) * -1.6px) calc(20px + var(--rxn) * 1px) 44px -8px rgba(0,0,0,.6),calc(var(--ryn) * -.5px) 6px 12px -4px rgba(0,0,0,.45);will-change:transform}
.pl-surf__print::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.35);pointer-events:none}
.pl-surf__metal,.pl-surf__aniso,.pl-surf__sheen,.pl-surf__tooth{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.pl-surf__metal{background:var(--pl-tex) center/cover,#cfd2d4;opacity:0;transition:opacity .45s ease}
.pl-surf__art{position:relative;width:100%;height:100%;object-fit:cover;transition:filter .45s ease}
.pl-surf__aniso{opacity:0;background:linear-gradient(90deg,transparent calc(var(--lx) - 34%),rgba(255,255,255,.18) calc(var(--lx) - 16%),rgba(255,255,255,.7) var(--lx),rgba(255,255,255,.18) calc(var(--lx) + 16%),transparent calc(var(--lx) + 34%)),var(--pl-tex) center/cover;background-blend-mode:multiply;mix-blend-mode:screen;-webkit-mask-image:var(--pl-art);mask-image:var(--pl-art);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;mask-mode:luminance;transition:opacity .45s ease}
.pl-surf__sheen{mix-blend-mode:screen;transition:opacity .45s ease}
.pl-surf__tooth{opacity:0;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");transition:opacity .45s ease}
/* base: clear coating lets the brushed aluminum show where the photo is light */
.pl-surf__print[data-look="clear"] .pl-surf__metal{opacity:1}
.pl-surf__print[data-look="clear"] .pl-surf__art{mix-blend-mode:multiply;filter:saturate(.9) contrast(1.06) brightness(1.08)}
.pl-surf__print[data-look="clear"] .pl-surf__aniso{opacity:.95}
/* finish: gloss, semi, matte */
.pl-surf__print[data-finish="gloss"] .pl-surf__sheen{opacity:1;background:radial-gradient(ellipse 15% 22% at var(--lx) var(--ly),rgba(255,255,255,.62),rgba(255,255,255,.2) 40%,transparent 72%),linear-gradient(112deg,transparent calc(var(--lx) - 22%),rgba(255,255,255,.14) calc(var(--lx) - 8%),rgba(255,255,255,.34) calc(var(--lx) - 2%),rgba(255,255,255,.06) calc(var(--lx) + 5%),transparent calc(var(--lx) + 12%))}
.pl-surf__print[data-finish="gloss"] .pl-surf__art{filter:contrast(1.05) saturate(1.06)}
.pl-surf__print[data-look="clear"][data-finish="gloss"] .pl-surf__art{filter:saturate(.95) contrast(1.1) brightness(1.08)}
.pl-surf__print[data-finish="semi"] .pl-surf__sheen{opacity:.85;background:radial-gradient(ellipse 36% 46% at var(--lx) var(--ly),rgba(255,255,255,.46),rgba(255,255,255,.14) 45%,transparent 75%),linear-gradient(112deg,transparent calc(var(--lx) - 30%),rgba(255,255,255,.1) var(--lx),transparent calc(var(--lx) + 22%))}
.pl-surf__print[data-finish="semi"] .pl-surf__tooth{opacity:.05}
.pl-surf__print[data-finish="matte"] .pl-surf__sheen{opacity:.7;background:radial-gradient(ellipse 75% 85% at var(--lx) var(--ly),rgba(255,255,255,.16),rgba(255,255,255,.05) 55%,transparent 85%)}
.pl-surf__print[data-finish="matte"] .pl-surf__tooth{opacity:.16}
.pl-surf__print[data-finish="matte"] .pl-surf__art{filter:contrast(.88) saturate(.92) brightness(1.05)}
.pl-surf__print[data-look="clear"][data-finish="matte"] .pl-surf__art{filter:saturate(.86) contrast(.98) brightness(1.1)}
.pl-surf__print[data-look="clear"][data-finish="matte"] .pl-surf__aniso{opacity:.55}
.pl-surf__print.is-swap{animation:pl-swap .5s ease}
@keyframes pl-swap{0%{filter:brightness(1.12)}100%{filter:none}}
.pl-surf__light{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:13px;color:color-mix(in srgb,#fff 70%,transparent)}
.pl-surf__light span{flex:none;font-family:var(--pl-mono-font);letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
.pl-surf__light input{flex:1;min-width:0;accent-color:var(--pl-accent);height:28px;cursor:pointer}
.pl-surf__hint{font-size:12.5px;color:color-mix(in srgb,#fff 55%,transparent);margin-top:6px}
.pl-surf__panel{min-width:0}
.pl-seg{border:0;margin:0 0 22px;padding:0;min-width:0}
.pl-seg legend{font-family:var(--pl-mono-font);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-faint);margin:0 0 10px;padding:0}
.pl-seg__opt{display:inline-block;margin:0 6px 8px 0;cursor:pointer}
.pl-seg__opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pl-seg__opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--pl-line);color:var(--pl-muted);font-size:15px;font-weight:500;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.pl-seg__opt:hover span{border-color:var(--pl-faint);color:var(--pl-ink)}
.pl-seg__opt input:checked+span{background:var(--pl-ink);border-color:var(--pl-ink);color:var(--pl-page)}
.pl-surf__read{border-top:1px solid var(--pl-line);padding-top:22px;margin:4px 0 26px}
.pl-surf__name{font-family:var(--pl-heading-font);font-size:clamp(28px,2.8vw,38px);line-height:1.05;color:var(--pl-ink);margin-bottom:14px}
.pl-surf__txt{color:var(--pl-muted);line-height:1.6;font-size:15.5px;margin-bottom:10px}
.pl-surf__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0 0}
.pl-surf__meta div{min-width:0}
.pl-surf__meta dt{font-family:var(--pl-mono-font);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-faint);margin-bottom:6px}
.pl-surf__meta dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--pl-ink)}
@media (min-width:992px){.pl-surf__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px}}

/* size on the wall */
.pl-size__grid{display:grid;gap:32px;align-items:center}
.pl-size__scene{--pl-u:calc(var(--pl-ref-w) / var(--pl-ref-in));position:relative;aspect-ratio:var(--pl-scene-ar);border-radius:var(--pl-radius);overflow:hidden;background:#cfc8bf;min-width:0}
.pl-size__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pl-size__print{position:absolute;left:calc((var(--pl-ref-l) + var(--pl-ref-w) / 2) * 1%);bottom:calc((100 - var(--pl-ref-top) + var(--pl-gap) * var(--pl-u) * var(--pl-scene-ar)) * 1%);width:calc(var(--pl-w) * var(--pl-u) * 1%);height:calc(var(--pl-h) * var(--pl-u) * var(--pl-scene-ar) * 1%);transform:translateX(-50%);border-radius:3px;box-shadow:6px 10px 18px -6px rgba(0,0,0,.45),1px 2px 3px rgba(0,0,0,.25);transition:width .5s cubic-bezier(.3,.7,.2,1),height .5s cubic-bezier(.3,.7,.2,1)}
.pl-size__print img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.pl-size__print::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 46%,rgba(255,255,255,0) 60%);pointer-events:none}
.pl-size__dim{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;font-family:var(--pl-mono-font);font-size:11.5px;letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:rgba(20,20,20,.72);color:#fff}
.pl-size__ref{position:absolute;right:12px;bottom:10px;font-family:var(--pl-mono-font);font-size:11px;letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:rgba(20,20,20,.6);color:#fff}
.pl-size__panel{min-width:0}
.pl-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--pl-surface);border:1px solid var(--pl-line);margin-bottom:20px;max-width:100%;overflow-x:auto}
.pl-tab{appearance:none;border:0;background:transparent;color:var(--pl-muted);font-family:inherit;font-weight:500;font-size:14.5px;line-height:1;min-height:40px;padding:0 18px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pl-tab[aria-selected="true"]{background:var(--pl-ink);color:var(--pl-page)}
.pl-size__chips{display:flex;flex-wrap:wrap;gap:8px}
.pl-size__chips[hidden]{display:none}
.pl-chip{appearance:none;border:1px solid var(--pl-line);background:transparent;color:var(--pl-ink);font:500 14px/1 var(--pl-mono-font);min-height:40px;min-width:64px;padding:0 12px;border-radius:10px;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.pl-chip:hover{border-color:var(--pl-faint)}
.pl-chip[aria-pressed="true"]{background:var(--pl-accent);border-color:var(--pl-accent);color:var(--pl-accent-ink)}
.pl-size__read{margin:24px 0 22px;padding-top:20px;border-top:1px solid var(--pl-line)}
.pl-size__big{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-family:var(--pl-heading-font);font-size:clamp(30px,3vw,42px);line-height:1.05;color:var(--pl-ink)}
.pl-size__price{font-family:var(--pl-mono-font);font-size:18px;color:var(--pl-muted)}
@media (min-width:992px){.pl-size__grid{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:56px}}

/* options */
.pl-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.pl-opt{display:flex;flex-direction:column;background:var(--pl-surface);border:1px solid var(--pl-line);border-radius:var(--pl-radius);overflow:hidden;min-width:0}
.pl-opt__img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--pl-surface-2)}
.pl-opt__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pl-opt:hover .pl-opt__img img{transform:scale(1.04)}
.pl-opt__body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pl-opt__body>p{color:var(--pl-muted);font-size:15px;line-height:1.55}
.pl-opt__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pl-opt__top .pl-h3{margin:0}
.pl-opt__price{font-family:var(--pl-mono-font);font-size:13.5px;color:var(--pl-accent-hover);white-space:nowrap}
.pl-opt__avail{font-size:13px!important;color:var(--pl-faint)!important;margin-top:auto!important}
.pl-opt .pl-btn--link{align-self:flex-start;font-size:14.5px}
@media (max-width:639.98px){.pl-opt{flex-direction:row;align-items:stretch}.pl-opt__img{width:36%;flex:none;aspect-ratio:auto}.pl-opt__body{padding:16px}.pl-opt__top{flex-direction:column;gap:4px}}
@media (min-width:640px){.pl-opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pl-opts{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* split */
.pl-split{display:grid;gap:40px;align-items:center}
.pl-split__media{margin:0;border-radius:var(--pl-radius);overflow:hidden}
.pl-split__media img{width:100%;height:auto}
@media (max-width:899.98px){.pl-split__media{aspect-ratio:4/3}.pl-split__media img{height:100%;object-fit:cover}}
.pl-ticks{list-style:none;margin:0 0 28px;padding:0}
.pl-ticks li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--pl-line);color:var(--pl-muted);line-height:1.55}
.pl-ticks li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:2px solid var(--pl-accent-hover);border-bottom:2px solid var(--pl-accent-hover);transform:rotate(-45deg)}
@media (min-width:900px){.pl-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px}.pl-split--rev .pl-split__media{order:2}}

/* steps */
.pl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;counter-reset:none}
.pl-step{position:relative;padding:26px 24px 28px;border-radius:var(--pl-radius);background:var(--pl-surface);border:1px solid var(--pl-line);min-width:0}
.pl-step__n{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--pl-accent-hover);color:var(--pl-accent-hover);font-family:var(--pl-mono-font);font-size:14px;margin-bottom:18px}
.pl-step p{color:var(--pl-muted);font-size:15px;line-height:1.55}
@media (min-width:700px){.pl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pl-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* honesty */
.pl-honest{background:var(--pl-surface);border-top:1px solid var(--pl-line);border-bottom:1px solid var(--pl-line)}
.pl-honest__grid{display:grid;gap:36px}
.pl-honest__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 40px}
.pl-honest__list li{padding:24px 0 24px 22px;border-top:1px solid var(--pl-line);position:relative;min-width:0}
.pl-honest__list li::before{content:"";position:absolute;left:0;top:30px;width:3px;height:18px;border-radius:2px;background:var(--pl-accent)}
.pl-honest__list p{color:var(--pl-muted);line-height:1.6;font-size:15.5px}
@media (min-width:760px){.pl-honest__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.pl-honest__grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:72px}}

/* quotes */
.pl-quotes{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.pl-quote{margin:0;padding:28px;border-radius:var(--pl-radius);background:var(--pl-surface);border:1px solid var(--pl-line)}
.pl-quote blockquote{margin:0 0 18px;font-family:var(--pl-heading-font);font-size:22px;line-height:1.35;color:var(--pl-ink)}
.pl-quote figcaption{font-size:14px;color:var(--pl-muted)}
@media (min-width:900px){.pl-quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* faq */
.pl-faq__grid{display:grid;gap:28px}
.pl-faq details{border-top:1px solid var(--pl-line)}
.pl-faq details:last-child{border-bottom:1px solid var(--pl-line)}
.pl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:17.5px;font-weight:600;line-height:1.4;color:var(--pl-ink)}
.pl-faq summary::-webkit-details-marker{display:none}
.pl-faq__pm{position:relative;flex:none;width:18px;height:18px}
.pl-faq__pm::before,.pl-faq__pm::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;border-radius:1px;background:var(--pl-accent-hover);transition:transform .25s ease}
.pl-faq__pm::after{transform:rotate(90deg)}
.pl-faq details[open] .pl-faq__pm::after{transform:rotate(0)}
.pl-faq__a{padding:0 40px 24px 0;color:var(--pl-muted);line-height:1.65;font-size:15.5px}
@media (min-width:992px){.pl-faq__grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:72px}.pl-faq__grid>.pl-head{position:sticky;top:110px;align-self:start}}

/* closing cta */
.pl-cta{position:relative;overflow:hidden;padding:clamp(72px,10vw,140px) 0;background:var(--pl-deep);isolation:isolate}
.pl-cta__media{position:absolute;inset:0;z-index:-1}
.pl-cta__media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.pl-cta__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--pl-deep) 8%,color-mix(in srgb,var(--pl-deep) 55%,transparent) 60%,transparent)}
.pl-cta__box{max-width:600px}
.pl-cta__contact{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14.5px;color:var(--pl-muted)}
.pl-cta__contact a{color:var(--pl-ink)!important;border-bottom:1px solid var(--pl-line)}
.pl-cta__contact a:hover{border-color:var(--pl-accent-hover)}

/* reveal: only hidden when the script is running */
.pl-js .pl-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.pl-js .pl-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .pl-hero__canvas,.pl-hero__sheen,.pl-surf__print.is-swap{animation:none}
  .pl-hero__sheen{background-position:60% 0}
  .pl-js .pl-reveal{opacity:1;transform:none;transition:none}
  .pl-size__print{transition:none}
}
/* ===== END: product-landing ===== */

/* ===== START: Filter option price (show_prices) ===== */
.px-filter-price { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; letter-spacing: 0; opacity: 0.65; }
.field-label input:checked + .label-text .px-filter-price { opacity: 0.85; }
/* ===== END: Filter option price (show_prices) ===== */
/* ===== START: product-landing gifting ===== Gifting blocks for product landing pages: countdown, snow, giftbox, spin, finder, recipients, budget, doors, offer. Scoped to .pl, prefix pl-. */
.pl-tone-ink{background:var(--pl-ink);color:#fff}
.pl-tone-ink .pl-h2,.pl-tone-ink .pl-h3,.pl-tone-ink .pl-h1{color:#fff}
.pl-tone-ink .pl-lead,.pl-tone-ink p{color:rgba(255,255,255,.78)}
.pl-tone-ink .pl-eyebrow{color:var(--pl-accent)!important}
.pl-tone-ink .pl-note{color:rgba(255,255,255,.6)}
.pl-tone-ink .pl-btn--ghost{color:#fff!important;border-color:rgba(255,255,255,.4)}
.pl-tone-ink .pl-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.pl-tone-ink .pl-btn--primary:hover{color:var(--pl-ink)!important;background:#fff}

/* shared: hidden states, pills, gift cards, grid, confetti */
.pl-recip__panel[hidden],.pl-spin__result[hidden],.pl-spin__form[hidden],.pl-count__next[hidden],.pl-finder__res[hidden],.pl-finder__step[hidden],.pl-gbox__tease[hidden],.pl-gbox__idea[hidden],.pl-gcard[hidden],.pl .pl-btn[hidden]{display:none!important}
.pl-pill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid var(--pl-line);background:var(--pl-surface);color:var(--pl-ink);font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;transition:transform .15s ease,background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease}
.pl-pill:hover{border-color:var(--pl-ink);transform:translateY(-1px)}
.pl-pill[aria-pressed=true],.pl-pill[aria-selected=true]{background:var(--pl-ink);border-color:var(--pl-ink);color:#fff}
.pl-pill span{font-weight:400;opacity:.7}
.pl-pill:focus-visible{outline:2px solid var(--pl-accent-hover);outline-offset:3px}
.pl-ggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:760px){.pl-ggrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}}
@media (min-width:1100px){.pl-ggrid{grid-template-columns:repeat(4,minmax(0,1fr))}.pl-ggrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pl-gcard{position:relative;display:flex;flex-direction:column;border-radius:var(--pl-radius);background:var(--pl-surface);color:var(--pl-ink)!important;overflow:hidden;box-shadow:0 1px 0 var(--pl-line),0 14px 30px -24px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease;animation:pl-rise .45s ease both}
.pl-gcard:hover{transform:translateY(-4px);box-shadow:0 1px 0 var(--pl-line),0 22px 40px -24px rgba(0,0,0,.5)}
.pl-gcard[hidden]{display:none}
.pl-gcard__img{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--pl-surface-2)}
.pl-gcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.pl-gcard:hover .pl-gcard__img img{transform:scale(1.05)}
.pl-gcard__body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.pl-gcard__name{font-weight:600;font-size:16px;line-height:1.3}
.pl-gcard__why{font-size:14px;line-height:1.45;color:var(--pl-muted)}
.pl-gcard__price{font-size:14.5px;color:var(--pl-muted)}
.pl-gcard__badge{position:absolute;z-index:2;top:12px;left:12px;padding:6px 11px;border-radius:999px;background:var(--pl-accent);color:var(--pl-accent-ink);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pl-gcard--row{flex-direction:row;align-items:center;gap:0;animation:none}
.pl-gcard--row .pl-gcard__img{width:84px;flex:none}
.pl-gcard--row .pl-gcard__body{flex:1;padding:10px 14px}
.pl-gcard--row .pl-arrow{margin-right:16px;color:var(--pl-accent-hover)}
.pl-confetti{position:absolute;left:50%;top:50%;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:5;animation:pl-confetti 1.1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes pl-confetti{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y) + 90px)) rotate(var(--r));opacity:0}}
@keyframes pl-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* countdown */
.pl-count{position:relative;z-index:3;padding:18px 0}
.pl-count__in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px}
.pl-count__main{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pl-count__label{font-family:var(--pl-mono-font);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--pl-accent)!important;margin:0}
.pl-count__clock{display:flex;gap:10px}
.pl-count__clock span{display:flex;flex-direction:column;align-items:center;min-width:56px;padding:8px 6px;border-radius:10px;background:rgba(255,255,255,.08)}
.pl-count__clock b{font-family:var(--pl-heading-font);font-size:28px;line-height:1;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.pl-count__clock i{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:4px}
.pl-count__next{display:flex;flex-direction:column;gap:2px}
.pl-count__nlabel{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)!important}
.pl-count__nval{font-size:16px;color:#fff!important}
.pl-count__nval strong{color:var(--pl-accent)}
.pl-count__left{font-size:13.5px;color:rgba(255,255,255,.7)!important}
.pl-count__next.is-urgent .pl-count__left{color:var(--pl-accent)!important;font-weight:700;animation:pl-pulse 1.6s ease-in-out infinite}
.pl-count__all{font-size:14px;color:#fff}
.pl-count__all summary{cursor:pointer;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:4px}
.pl-count__all ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.pl-count__all li{display:flex;justify-content:space-between;gap:18px;color:rgba(255,255,255,.85)}
.pl-count__all li.is-past{opacity:.45;text-decoration:line-through}
.pl-count__cta{margin-left:auto}
.pl-count__cta .pl-btn{min-height:44px}
@keyframes pl-pulse{50%{opacity:.55}}
@media (max-width:640px){.pl-count__clock span{min-width:48px}.pl-count__clock b{font-size:23px}.pl-count__cta{margin-left:0}}

/* snow */
.pl-snow{position:fixed;left:0;right:0;top:0;height:100vh;pointer-events:none;z-index:1040;overflow:hidden}

/* giftbox */
.pl-gbox__grid{display:grid;gap:36px;align-items:center}
@media (min-width:960px){.pl-gbox__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.pl-gbox__stage{display:flex;flex-direction:column;align-items:center}
.pl-gbox__box{position:relative;display:block;width:min(100%,420px);aspect-ratio:1/1;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pl-gbox__box img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(closest-side,#000 78%,transparent 100%);mask-image:radial-gradient(closest-side,#000 86%,transparent 100%);transition:opacity .45s ease,transform .45s ease}
.pl-gbox__open{opacity:0;transform:scale(.96)}
.pl-gbox.is-ready:not(.is-open):not(.is-shaking) .pl-gbox__closed{animation:pl-wobble 3.2s ease-in-out infinite;transform-origin:50% 80%}
.pl-gbox__box:hover .pl-gbox__closed{animation-duration:1.1s!important}
.pl-gbox.is-shaking .pl-gbox__closed{animation:pl-shake .65s cubic-bezier(.36,.07,.19,.97) both;transform-origin:50% 80%}
.pl-gbox.is-open .pl-gbox__closed{opacity:0;transform:scale(1.04) translateY(-10px)}
.pl-gbox.is-open .pl-gbox__open{opacity:1;transform:none}
.pl-gbox__burst{position:absolute;left:50%;top:44%;width:0;height:0}
.pl-gbox.is-open .pl-gbox__burst::before{content:"";position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(250,162,27,.45),transparent 65%);animation:pl-glow 1.2s ease-out forwards}
.pl-gbox__hint{margin-top:10px;font-size:14px;color:var(--pl-faint)}
.pl-gbox__ideas{position:relative;min-height:320px}
.pl-gbox__tease{display:none}
.pl-gbox.is-ready .pl-gbox__tease{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:36px;border:2px dashed var(--pl-line);border-radius:calc(var(--pl-radius) + 6px)}
.pl-gbox.is-ready .pl-gbox__tease[hidden]{display:none}
.pl-gbox__q{font-family:var(--pl-heading-font);font-size:64px;line-height:1;color:var(--pl-accent)}
.pl-gbox__tease p{color:var(--pl-muted)}
.pl-gbox__idea{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-radius:calc(var(--pl-radius) + 6px);overflow:hidden;background:var(--pl-surface);box-shadow:0 30px 60px -40px rgba(0,0,0,.55),0 1px 0 var(--pl-line)}
.pl-gbox__idea[hidden]{display:none}
.pl-gbox__idea.is-in{animation:pl-pop .55s cubic-bezier(.2,.9,.3,1.2) both}
@media (min-width:600px){.pl-gbox__idea{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.pl-gbox__img{display:block;aspect-ratio:1/1;background:var(--pl-surface-2)}
.pl-gbox__img img{width:100%;height:100%;object-fit:cover}
.pl-gbox__body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.pl-gbox__body p{color:var(--pl-muted);line-height:1.55}
.pl-gbox__tag{font-family:var(--pl-mono-font);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-accent-hover)}
.pl-gbox__price{font-weight:700;color:var(--pl-ink)!important}
.pl-gbox__body .pl-btns{margin-top:6px}
.pl-gbox__count{margin-top:12px;font-size:13px;color:var(--pl-faint);text-align:right}
@keyframes pl-wobble{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}74%{transform:rotate(-4deg)}78%{transform:rotate(3deg)}82%{transform:rotate(-1deg)}}
@keyframes pl-shake{0%,100%{transform:translate(0) rotate(0)}15%{transform:translate(-6px,2px) rotate(-7deg)}30%{transform:translate(6px,-3px) rotate(7deg)}45%{transform:translate(-6px,-2px) rotate(-6deg)}60%{transform:translate(5px,3px) rotate(5deg)}75%{transform:translate(-3px,-4px) rotate(-3deg) scale(1.03)}90%{transform:translateY(-12px) scale(1.06)}}
@keyframes pl-glow{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.3)}}
@keyframes pl-pop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}

/* spin */
.pl-spin__grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.pl-spin__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px}}
.pl-spin__stage{display:grid;gap:22px;justify-items:center}
.pl-spin__wheel{position:relative;width:min(100%,460px);aspect-ratio:1/1}
.pl-spin__svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.pl-spin__svg::before{content:""}
.pl-spin__rot{transform-origin:0 0;transform-box:view-box}
.pl-spin__txt{font-family:var(--pl-heading-font);font-size:8.6px;font-weight:600;letter-spacing:.02em;text-anchor:middle;dominant-baseline:middle;text-transform:uppercase}
.pl-spin__bulb{fill:#fff7e6;opacity:.9}
.pl-spin.is-spinning .pl-spin__bulb{animation:pl-bulb .4s steps(2) infinite}
.pl-spin.is-spinning .pl-spin__bulb:nth-of-type(odd){animation-delay:.2s}
.pl-spin__wheel::after{content:"";position:absolute;inset:-2.5%;border-radius:50%;border:10px solid #fff;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08),0 0 0 1px rgba(255,255,255,.2);pointer-events:none}
.pl-spin__hub{position:absolute;left:50%;top:50%;width:16%;height:16%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e9e9ec 60%,#c9c9cf);box-shadow:0 4px 12px rgba(0,0,0,.35)}
.pl-spin__pointer{position:absolute;left:50%;top:-6%;width:12%;height:14%;transform:translateX(-50%);z-index:2;background:var(--pl-accent);clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.pl-spin.is-spinning .pl-spin__pointer{animation:pl-tick .12s ease-in-out infinite alternate;transform-origin:50% 10%}
.pl-spin__onwheel{width:100%;max-width:520px}
.pl-spin__ltitle{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;opacity:.8}
.pl-spin__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px}
.pl-spin__list li{display:inline-flex;align-items:center;gap:8px}
.pl-spin__list li span{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}
.pl-spin__form{display:grid;gap:8px;margin-bottom:18px;max-width:420px}
.pl-spin__form label{font-weight:600;font-size:15px}
.pl-spin__form input{min-height:52px;padding:0 18px;border-radius:999px;border:1.5px solid var(--pl-line);background:#fff;color:#1a1a1a;font:inherit;font-size:16px}
.pl-spin__form.is-bad input{border-color:#e2493b;box-shadow:0 0 0 3px rgba(226,73,59,.25)}
.pl-spin__go{min-height:60px;padding:0 34px;font-size:17px}
.pl-spin__result{margin-top:8px;padding:26px;border-radius:calc(var(--pl-radius) + 6px);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);animation:pl-pop .55s cubic-bezier(.2,.9,.3,1.2) both;display:grid;gap:12px;justify-items:start}
.pl-tone-page .pl-spin__result,.pl-tone-deep .pl-spin__result{background:var(--pl-surface);border-color:var(--pl-line)}
.pl-spin__prize{font-family:var(--pl-heading-font);font-size:clamp(28px,3vw,40px);line-height:1.05;color:inherit!important}
.pl-tone-ink .pl-spin__prize{color:#fff!important}
.pl-spin__code{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pl-spin__code[hidden]{display:none}
.pl-spin__code code{font-family:var(--pl-mono-font);font-size:20px;letter-spacing:.12em;padding:10px 16px;border-radius:10px;border:2px dashed var(--pl-accent);color:var(--pl-accent);background:transparent}
.pl-spin__fine{max-width:52ch}
@keyframes pl-tick{from{transform:translateX(-50%) rotate(-10deg)}to{transform:translateX(-50%) rotate(8deg)}}
@keyframes pl-bulb{50%{opacity:.25}}

/* finder */
.pl-finder__box{max-width:980px;margin:0 auto;padding:clamp(24px,4vw,48px);border-radius:calc(var(--pl-radius) + 10px);background:var(--pl-surface);box-shadow:0 40px 80px -60px rgba(0,0,0,.5),0 1px 0 var(--pl-line)}
.pl-finder__dots{display:flex;justify-content:center;gap:8px;list-style:none;margin:0 0 22px;padding:0}
.pl-finder__dots li{width:34px;height:5px;border-radius:5px;background:var(--pl-line);transition:background-color .3s ease}
.pl-finder__dots li.is-on{background:var(--pl-accent)}
.pl-finder__step{border:0;margin:0;padding:0;min-width:0;text-align:center}
.pl-finder__step.is-in{animation:pl-rise .4s ease both}
.pl-finder__step legend{display:block;width:100%;font-family:var(--pl-heading-font);font-size:clamp(26px,3vw,38px);line-height:1.1;margin-bottom:22px;padding:0}
.pl-finder__n{display:block;font-family:var(--pl-mono-font);font-size:12px;letter-spacing:.14em;color:var(--pl-faint);margin-bottom:10px}
.pl-finder__opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pl-finder__back{margin-top:18px}
.pl-finder__sum{text-align:center;font-family:var(--pl-heading-font);font-size:clamp(22px,2.4vw,30px);margin-bottom:22px}
.pl-finder .pl-btns{justify-content:center;margin-top:28px}

/* recipients */
.pl-recip__tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 14px;margin:0 0 26px;scrollbar-width:none;justify-content:flex-start}
.pl-recip__tabs::-webkit-scrollbar{display:none}
.pl-recip__tabs .pl-pill{flex:none}
@media (min-width:960px){.pl-recip__tabs{justify-content:center;flex-wrap:wrap}}
.pl-recip__panel{display:grid;gap:28px;align-items:center}
.pl-recip__panel.is-in .pl-recip__media{animation:pl-pop .5s ease both}
.pl-recip__panel.is-in .pl-recip__copy{animation:pl-rise .5s .08s ease both}
@media (min-width:960px){.pl-recip__panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.pl-recip__media{margin:0;border-radius:calc(var(--pl-radius) + 6px);overflow:hidden;aspect-ratio:1/1}
.pl-recip__media img{width:100%;height:100%;object-fit:cover}
.pl-recip__title{font-size:clamp(30px,3.4vw,46px)}
.pl-recip__picks{display:grid;gap:10px;margin-bottom:18px}

/* budget */
.pl-budget__ctl{max-width:760px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.pl-budget__label{display:block;font-family:var(--pl-heading-font);font-size:clamp(26px,3vw,40px);margin-bottom:16px}
.pl-budget__label output{color:var(--pl-accent-hover)}
.pl-budget input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:10px;background:linear-gradient(90deg,var(--pl-accent) var(--pl-pct,50%),var(--pl-line) var(--pl-pct,50%));outline-offset:6px;cursor:pointer}
.pl-budget input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:3px solid var(--pl-ink);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.pl-budget input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--pl-ink)}
.pl-budget__ticks{display:flex;justify-content:space-between;list-style:none;margin:12px 0 0;padding:0;font-size:13.5px;color:var(--pl-faint)}
.pl-budget__ticks li{cursor:pointer;padding:4px}
.pl-budget__ticks li.is-on{color:var(--pl-ink);font-weight:700}
.pl-budget__count{margin-top:10px;font-size:14.5px;color:var(--pl-muted)}

/* doors */
.pl-doors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:700px){.pl-doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.pl-doors{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pl-door{position:relative;aspect-ratio:4/5;perspective:1200px}
.pl-door__front,.pl-door__back{position:absolute;inset:0;border-radius:var(--pl-radius);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s cubic-bezier(.3,1.4,.4,1)}
.pl-door__front{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:16px;border:0;cursor:pointer;text-align:left;color:#fff;background:var(--pl-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 18px 30px -22px rgba(0,0,0,.6);overflow:hidden}
.pl-door:nth-child(3n+2) .pl-door__front{background:color-mix(in srgb,var(--pl-ink) 82%,#fff 18%)}
.pl-door:nth-child(4n+3) .pl-door__front{background:color-mix(in srgb,var(--pl-ink) 92%,var(--pl-accent) 8%)}
.pl-door__front::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(62% - 9px),var(--pl-accent) calc(62% - 9px),var(--pl-accent) calc(62% + 9px),transparent calc(62% + 9px)),linear-gradient(180deg,transparent calc(38% - 9px),var(--pl-accent) calc(38% - 9px),var(--pl-accent) calc(38% + 9px),transparent calc(38% + 9px));opacity:.95}
.pl-door:nth-child(even) .pl-door__front::before{background:linear-gradient(90deg,transparent calc(62% - 9px),#afdedc calc(62% - 9px),#afdedc calc(62% + 9px),transparent calc(62% + 9px)),linear-gradient(180deg,transparent calc(38% - 9px),#afdedc calc(38% - 9px),#afdedc calc(38% + 9px),transparent calc(38% + 9px))}
.pl-door__front::after{content:"";position:absolute;left:62%;top:38%;width:44px;height:30px;transform:translate(-50%,-80%);pointer-events:none;background:radial-gradient(ellipse 48% 50% at 25% 60%,transparent 38%,var(--pl-accent) 40% 70%,transparent 72%),radial-gradient(ellipse 48% 50% at 75% 60%,transparent 38%,var(--pl-accent) 40% 70%,transparent 72%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.pl-door:nth-child(even) .pl-door__front::after{background:radial-gradient(ellipse 48% 50% at 25% 60%,transparent 38%,#afdedc 40% 70%,transparent 72%),radial-gradient(ellipse 48% 50% at 75% 60%,transparent 38%,#afdedc 40% 70%,transparent 72%)}
.pl-door__front:hover::after{animation:pl-wiggle .6s ease}
@keyframes pl-wiggle{30%{transform:translate(-50%,-80%) rotate(-10deg)}60%{transform:translate(-50%,-80%) rotate(8deg)}}
.pl-door__front:hover{transform:rotateY(-12deg)}
.pl-door__n{position:relative;display:grid;place-items:center;width:clamp(44px,5vw,58px);height:clamp(44px,5vw,58px);border-radius:50%;background:#fff;color:var(--pl-ink);font-family:var(--pl-heading-font);font-size:clamp(22px,2.6vw,30px);line-height:1;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.pl-door__t{position:relative;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);font-size:14px;font-weight:600;line-height:1.3;color:#fff}
.pl-door__back{transform:rotateY(180deg);background:var(--pl-surface);overflow:hidden;box-shadow:0 18px 30px -22px rgba(0,0,0,.5),0 1px 0 var(--pl-line)}
.pl-door.is-open .pl-door__front{transform:rotateY(-180deg);pointer-events:none}
.pl-door.is-open .pl-door__back{transform:rotateY(0)}
.pl-door__link{display:flex;flex-direction:column;height:100%;color:var(--pl-ink)!important}
.pl-door__img{flex:1;min-height:0;overflow:hidden}
.pl-door__img img{width:100%;height:100%;object-fit:cover}
.pl-door__name{padding:12px 14px 2px;font-weight:600;font-size:15px;line-height:1.3}
.pl-door__price{padding:0 14px 14px;font-size:13.5px;color:var(--pl-muted)}
.pl:not(.pl-js) .pl-door__front{display:none}
.pl:not(.pl-js) .pl-door__back{transform:none}

/* offer */
.pl-offer__grid{display:grid;gap:36px;align-items:center}
@media (min-width:960px){.pl-offer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.pl-offer__gift{position:relative;display:flex;align-items:center;gap:18px;margin-bottom:24px;padding:14px;border-radius:calc(var(--pl-radius) + 4px);background:var(--pl-surface);box-shadow:0 1px 0 var(--pl-line);max-width:460px;transition:box-shadow .4s ease,transform .4s ease}
.pl-offer__gimg{width:96px;flex:none;aspect-ratio:1/1;border-radius:var(--pl-radius);overflow:hidden;filter:grayscale(.85) opacity(.7);transition:filter .5s ease}
.pl-offer__gimg img{width:100%;height:100%;object-fit:cover}
.pl-offer__gname{font-weight:700;font-size:17px;color:var(--pl-ink)!important}
.pl-offer__gval{font-size:14px;color:var(--pl-muted)}
.pl-offer.is-unlocked .pl-offer__gift{box-shadow:0 0 0 3px var(--pl-accent),0 20px 40px -24px rgba(250,162,27,.7);transform:translateY(-3px)}
.pl-offer.is-unlocked .pl-offer__gimg{filter:none}
.pl-offer__try{padding:clamp(22px,3vw,34px);border-radius:calc(var(--pl-radius) + 8px);background:var(--pl-surface);box-shadow:0 40px 70px -55px rgba(0,0,0,.5),0 1px 0 var(--pl-line)}
.pl-offer__ttitle{font-weight:700;margin-bottom:14px}
.pl-offer__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pl-offer__chips .pl-pill{min-height:40px;padding:0 14px;font-size:14px}
.pl-offer__meter{position:relative;height:14px;border-radius:14px;background:var(--pl-line);overflow:visible}
.pl-offer__meter span{display:block;height:100%;width:0;border-radius:14px;background:linear-gradient(90deg,var(--pl-accent),color-mix(in srgb,var(--pl-accent) 70%,#fff 30%));transition:width .6s cubic-bezier(.2,.9,.3,1.1)}
.pl-offer__flag{position:absolute;right:-6px;top:50%;width:26px;height:26px;transform:translateY(-50%);border-radius:50%;background:#fff;border:3px solid var(--pl-line);transition:border-color .3s ease,background-color .3s ease}
.pl-offer.is-unlocked .pl-offer__flag{border-color:var(--pl-accent);background:var(--pl-accent)}
.pl-offer__status{margin-top:14px;font-size:15px;color:var(--pl-muted)}
.pl-offer__status strong{color:var(--pl-ink);font-size:18px}
.pl-offer.is-unlocked .pl-offer__status span{color:var(--pl-accent-hover);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .pl-gbox__closed,.pl-gcard,.pl-gbox__idea,.pl-recip__panel *,.pl-count__left{animation:none!important}
  .pl-door__front,.pl-door__back,.pl-offer__meter span{transition:none}
}
/* ===== END: product-landing gifting ===== */
/* ===== START: upload progress card (px-upload-dialog progress screen). Card = color-secondary, spinner and bar = color-primary. 24 Oct 2026 ===== */
html body .px-upload-dialog[data-screen=progress] {
  background: #2d2d2d;
  color: #ffffff;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  width: min(440px, calc(100% - 32px));
  max-width: none;
  bottom: 20px;
  padding: 16px 48px 24px 18px;
  overflow: hidden;
  animation: pxud-rise .25s ease-out;
}
html body .px-upload-dialog[data-screen=progress]::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 12px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(#1a3a6b, #1a3a6b) no-repeat, rgba(255, 255, 255, .18);
  background-size: 35% 100%, 100% 100%;
  animation: pxud-bar 1.4s ease-in-out infinite;
}
html body .px-upload-dialog[data-screen=progress] .px-ud-progress {
  justify-content: flex-start;
  padding: 0;
}
html body .px-upload-dialog[data-screen=progress] .px-ud-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #1a3a6b;
  border-right-color: #1a3a6b;
  flex: none;
}
html body .px-upload-dialog[data-screen=progress] .px-upload-info {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}
html body .px-upload-dialog[data-screen=progress] .px-ud-close {
  filter: invert(1);
  opacity: .7;
}
@keyframes pxud-rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pxud-bar { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
/* ===== END: upload progress card ===== */
/* ===== START: B2B tool boot (Business Cards 3.2.2, 2 Nov 2026) =====
   Template-level (Shopper 24). A tool root that the product snippet renders with ff-booting owns the product page from
   the first paint: the stock gallery, title, price and description stay hidden and the tool shows its designed loader
   until its script removes ff-booting. Loaded in the head, so nothing of the stock page is ever painted.
   Fallback: if a script never runs, the tool's own markup shows after 10 s. */
.product-single:has(.ff-root.ff-booting:not([data-owns-page="false"]))>.col-md-7{display:none}
.product-single:has(.ff-root.ff-booting:not([data-owns-page="false"]))>.col-md-5{flex:0 0 100%;max-width:100%}
.product-single:has(.ff-root.ff-booting:not([data-owns-page="false"])) .product-details>:not(.product-form){display:none!important}
.product-single:has(.ff-root.ff-booting:not([data-owns-page="false"])) .product-form form>:not(:has(.ff-root)),
.product-single:has(.ff-root.ff-booting:not([data-owns-page="false"])) .product-form .variant-selector>:not(:has(.ff-root)),
.product-single:has(.ff-root.ff-booting:not([data-owns-page="false"])) .product-form px-option-selector>:not(.ff-root):not(:has(.ff-root)){display:none!important}
.ff-root.ff-booting{position:relative;min-height:560px}
.ff-root.ff-booting>:not(.ff-boot){visibility:hidden;animation:ffBootReveal 0s linear 10s forwards}
.ff-root .ff-boot{display:none}
.ff-root.ff-booting .ff-boot{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;left:0;right:0;top:0;height:min(560px,80vh);z-index:5;border-radius:var(--pxt-radius,14px);background:var(--pxt-stage,#efeee9);color:var(--pxt-ink-muted,#6b655c);animation:ffBootHide 0s linear 10s forwards}
@keyframes ffBootReveal{to{visibility:visible}}
@keyframes ffBootHide{to{visibility:hidden}}
.ff-root .pxb{flex:none;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;height:auto}
.ff-root .pxb-card{position:relative;width:168px;height:96px;background:#fff;border-radius:3px;box-shadow:0 0 0 1px var(--pxt-line,#e6e3dc),0 18px 24px -16px rgba(30,25,20,.45);animation:pxbLdCard 4.8s cubic-bezier(.5,0,.25,1) infinite}
.ff-root .pxb-card i,.ff-root .pxb-card b{position:absolute;display:block;background:var(--pxt-ink,#2d2d2d);border-radius:2px;clip-path:inset(0 100% 0 0)}
.ff-root .pxb-card .m{left:14px;top:14px;width:18px;height:18px;border-radius:50%;opacity:.9;clip-path:none;transform:scale(0);animation:pxbLdMark 4.8s ease infinite}
.ff-root .pxb-card .n{left:14px;top:46px;width:82px;height:7px;opacity:.85;animation:pxbLdLine 4.8s ease infinite .35s}
.ff-root .pxb-card .s{left:14px;top:58px;width:52px;height:4px;opacity:.4;animation:pxbLdLine 4.8s ease infinite .55s}
.ff-root .pxb-card .l1{right:14px;top:66px;width:44px;height:3px;opacity:.35;animation:pxbLdLine 4.8s ease infinite .75s}
.ff-root .pxb-card .l2{right:14px;top:74px;width:58px;height:3px;opacity:.35;animation:pxbLdLine 4.8s ease infinite .9s}
.ff-root .pxb-card .l3{right:14px;top:82px;width:38px;height:3px;opacity:.35;animation:pxbLdLine 4.8s ease infinite 1.05s}
@keyframes pxbLdCard{0%{transform:translateY(10px) rotate(-4deg);opacity:0}10%,88%{transform:none;opacity:1}100%{transform:translateY(-6px);opacity:0}}
@keyframes pxbLdMark{0%,12%{transform:scale(0)}22%,88%{transform:scale(1)}100%{transform:scale(1)}}
@keyframes pxbLdLine{0%,14%{clip-path:inset(0 100% 0 0)}30%,88%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
.ff-root .pxb-title{display:block;font:var(--pxt-weight-heading,500) 22px/1.2 var(--pxt-font-heading,inherit);color:var(--pxt-ink,#2d2d2d);letter-spacing:-.01em}
.ff-root .pxb-steps{display:block;position:relative;height:20px;width:min(320px,80vw);margin:-10px 0 0;font:12px/20px "DM Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--pxt-ink-muted,#6b655c)}
.ff-root .pxb-steps span{position:absolute;inset:0;opacity:0;animation:pxbLdStep 8s infinite}
.ff-root .pxb-steps span:nth-child(2){animation-delay:2s}
.ff-root .pxb-steps span:nth-child(3){animation-delay:4s}
.ff-root .pxb-steps span:nth-child(4){animation-delay:6s}
@keyframes pxbLdStep{0%{opacity:0;transform:translateY(6px)}4%,21%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
 .ff-root .pxb-card,.ff-root .pxb-card i,.ff-root .pxb-card b,.ff-root .pxb-steps span{animation:none!important;opacity:1;clip-path:none;transform:none}
 .ff-root .pxb-steps span:not(:first-child){opacity:0}
}
/* ===== END: B2B tool boot ===== */

/* ===== BEGIN: Shopper UI polish, photo crop screen and cart line (3 Nov 2026, scoped to the Adjust modal) ===== */
/* px-image-upload crop screen: compact controls (Shopper-wide). Scoped to the Adjust modal only; the Photo Prints tool reuses .px-image-adjust-tool in every print tile and must not be touched (ticket #1260). Rotate and Reset become icon buttons, Cancel and Submit sit
   on the same row, so the photo gets the screen. Phone: one bar at the bottom. Wider: the same bar under the photo. */
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-sidebar-container{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0!important;padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;box-sizing:border-box!important;border-top:1px solid rgba(0,0,0,.1);background:#fff;flex:none!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-controls-container{display:flex!important;flex-direction:row!important;gap:8px!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-edit-buttons-container,.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-reset-button-container{display:flex!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-controls-container .btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:44px!important;height:44px!important;min-width:0!important;padding:0!important;margin:0!important;font-size:0!important;line-height:0!important;border-radius:8px!important;background:#fff!important;border:1px solid rgba(0,0,0,.22)!important;color:#1f1f1f!important;box-shadow:none!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-controls-container .btn svg{width:18px!important;height:18px!important;margin:0!important;fill:currentColor}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-controls-container .btn:hover{border-color:rgba(0,0,0,.5)!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-action-buttons-container{display:flex!important;flex-direction:row!important;gap:8px!important;width:auto!important;height:auto!important;margin:0 0 0 auto!important;padding:0!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-action-buttons-container .btn{width:auto!important;min-width:0!important;height:44px!important;padding:0 18px!important;margin:0!important;font-size:15px!important;line-height:1!important;border-radius:8px!important;white-space:nowrap}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool{flex-direction:column!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-crop-container{flex:1 1 auto!important;min-height:0!important;height:auto!important;width:100%!important}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-reset-button-container .btn{width:auto!important;padding:0 12px!important;font-size:14px!important;line-height:1!important;border-color:transparent!important;text-decoration:underline;text-underline-offset:3px}
.px-image-upload-crop-modal-wrapper .px-image-adjust-tool .px-reset-button-container .btn svg{display:none!important}

/* Cart line: Edit is a real button under the thumbnail; quantity is a proper select (16px, so iOS does not zoom) */
.list-group-item .col-3 .btn.btn-light.btn-xxs{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:100%;max-width:96px;height:34px;padding:0 10px;font-size:13px;font-weight:600;line-height:1;text-transform:capitalize;color:#1f1f1f;background:#fff;border:1px solid rgba(0,0,0,.2);border-radius:8px;box-shadow:none}
.list-group-item .col-3 .btn.btn-light.btn-xxs:hover{border-color:rgba(0,0,0,.5);background:#fff}
.list-group-item .col-3 .btn.btn-light.btn-xxs::before{content:"";width:13px;height:13px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat}
.list-group-item select[name="orderline[quantity]"]{-webkit-appearance:none;appearance:none;height:40px;min-width:96px;padding:0 34px 0 12px;font-size:16px;line-height:1.2;color:#1f1f1f;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px 16px;border:1px solid rgba(0,0,0,.22);border-radius:8px;cursor:pointer}
.list-group-item select[name="orderline[quantity]"]:hover{border-color:rgba(0,0,0,.5)}
.list-group-item select[name="orderline[quantity]"]:focus{outline:2px solid rgba(0,0,0,.6);outline-offset:1px}
/* ===== END: Shopper UI polish, photo crop screen and cart line ===== */