/* ===================================================================
   Kaarigar Order Flow — themed to match the Kaarigar Homepage palette
   (rose/gold/charcoal, same card radii and spacing), but using a single
   plain sans family (Jost) throughout for readability — no decorative
   serif/display type on headings, labels, or numbers.
   =================================================================== */

.kof-form-wrap {
	--khb-rose: #B76E79;
	--khb-rose-deep: #8C4A55;
	--khb-gold: #C9A24B;
	--khb-gold-deep: #9C7A2F;
	--khb-charcoal: #3A332F;
	--khb-blush: #FBEDE8;
	--khb-paper: #FFFDFB;
	--khb-ink: #3A332F;
	--khb-ink-soft: #8A7E77;
	--khb-line: #EFDCD3;

	/* Fallbacks, so this page still looks right on its own if the Kaarigar
	   Homepage plugin (which declares these tokens) isn't active. */
	--khb-max-full: 1600px;
	--khb-gutter: 44px;

	/* The order form states its own width rather than inheriting whatever
	   the homepage happens to use. It takes the full shell: this is a
	   working screen with a form and a summary side by side, and at 1140px
	   it sat noticeably narrower than the site header directly above it,
	   with dead margin down both sides. */
	max-width: var(--khb-max-full);
	margin: 0 auto;
	padding: 56px var(--khb-gutter) 90px;
	font-family: 'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--khb-ink);
}

/* Form panel + sticky order summary. The summary grows a little with the
   extra room, and the form column is capped by its own content rather
   than being allowed to sprawl into unreadably long field rows. */
.kof-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 32px;
	align-items: start;
}
.kof-form-wrap *{ box-sizing: border-box; }
.kof-hidden {
	display: none !important;
}

.kof-form-title {
	font-family: 'Marcellus', serif;
	font-weight: 400;
	font-size: 36px;
	line-height: 1.3;
	color: var(--khb-rose-deep);
	text-align: center;
	margin: 0 0 1rem;
}

/* Keeps the step indicator (title + tabs) on screen no matter how far
   the customer has scrolled into a long step (Style in particular runs
   long) — pins directly beneath the site header once its normal position
   scrolls past. --kof-header-h is measured and set by kof-frontend.js,
   since the header's real height varies by plugin combo and viewport. */
.kof-progress-sticky {
	position: sticky;
	top: var(--kof-header-h, 0px);
	z-index: 30;
	background: var(--khb-paper);
	padding-top: 20px;
	margin: -20px 0 1.5rem;
	border-bottom: 1px solid var(--khb-line);
}
.kof-progress-sticky .kof-tabs {
	margin-bottom: 14px;
}

/* Tab bar — pill nav, same shape language as .khb-nav-links a */
.kof-tabs {
	display: flex;
	gap: 6px;
	background: var(--khb-blush);
	padding: 6px;
	border-radius: 100px;
	margin-bottom: 1.5rem;
}
.kof-tab {
	flex: 1;
	text-align: center;
	padding: 10px 6px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	color: var(--khb-ink-soft);
	cursor: pointer;
	transition: color .25s ease, background .25s ease;
}
.kof-tab-num {
	display: inline-block;
	margin-right: 4px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.kof-tab.kof-tab-active {
	background: var(--khb-rose-deep);
	color: var(--khb-paper);
	font-weight: 600;
}
.kof-tab.kof-tab-done {
	color: var(--khb-rose-deep);
}

/* Panel */
.kof-panel {
	border: 1px solid var(--khb-line);
	border-radius: 20px;
	padding: 2.75rem;
	background: var(--khb-paper);
}
.kof-panel-step h3 {
	margin: 0 0 1.25rem;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 19px;
	color: var(--khb-ink);
}

/* Option grid (icon cards) */
.kof-option-grid {
	display: grid;
	gap: 12px;
	margin-bottom: 1.25rem;
}
.kof-option-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kof-option-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* When a region only offers one option in a group, the remaining card
   goes full width and centred rather than sitting in a half-width column
   with an empty gap beside it. Set by rebalanceGrid() in the JS. */
.kof-option-grid-1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}
.kof-option-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 18px 12px;
	border-radius: 14px;
	border: 1px solid var(--khb-line);
	cursor: pointer;
	position: relative;
	transition: border-color .2s ease, background .2s ease;
}
.kof-option-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.kof-option-card:has(input:checked),
.kof-option-card.kof-selected {
	border: 2px solid var(--khb-rose-deep);
	background: var(--khb-blush);
}
.kof-option-icon {
	font-size: 22px;
	color: var(--khb-gold-deep);
	margin-bottom: 8px;
}
.kof-option-title {
	font-family: 'Jost', sans-serif;
	font-weight: 500;
	font-size: 13.5px;
	color: var(--khb-ink);
	margin-bottom: 3px;
}
/* Every card carries this slot, priced or not. Reserving the line height
   is what keeps a card with no price line sitting on the same baseline as
   the one beside it, instead of standing short and looking broken. */
.kof-option-price {
	display: block;
	min-height: 1.25em;
	line-height: 1.25;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--khb-rose-deep);
}

/* Conditional fields + generic field grid */
.kof-conditional {
	margin-top: 1.25rem;
}
.kof-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
/* Pay step's contact fields — locked to a firm 2-column pairing
   (name+WhatsApp, then country+city) rather than the flexible
   auto-fit used elsewhere, so the row always reads as two neat
   pairs regardless of container width. Falls back to one column
   at the same mobile breakpoint as every other field grid. */
.kof-pay-details-grid {
	grid-template-columns: repeat(2, 1fr);
}
.kof-panel label {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 500;
	color: var(--khb-ink-soft);
}
.kof-link-fields label:last-child {
	margin-bottom: 0;
}
.kof-panel input[type="text"],
.kof-panel input[type="number"],
.kof-panel input[type="url"],
.kof-panel input[type="file"],
.kof-panel textarea {
	width: 100%;
	height: auto;
	padding: 12px 14px;
	margin-top: 6px;
	border: 1px solid var(--khb-line);
	border-radius: 8px;
	box-sizing: border-box;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--khb-ink);
	background: var(--khb-paper);
}
.kof-panel textarea {
	resize: vertical;
	min-height: 4.5em;
}
/* The active theme (Astra) forces `height: 40px` on every native select
   site-wide via an unscoped `select { height: 40px; }` rule. We never
   declared our own height, so theirs won by default — and it's too
   short for 14px top/bottom padding plus a 15px line of text, which is
   what was clipping the option text. Declaring it ourselves (with
   !important, since this exact property is the one actively fought
   over) is the real fix, not another padding/line-height adjustment. */
.kof-panel select {
	width: 100%;
	height: auto !important;
	padding: 14px 34px 14px 14px;
	margin-top: 6px;
	border: 1px solid var(--khb-line);
	border-radius: 8px;
	box-sizing: border-box;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	line-height: normal;
	color: var(--khb-ink);
	background-color: var(--khb-paper);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238A7E77'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.kof-panel input:focus,
.kof-panel select:focus,
.kof-panel textarea:focus {
	outline: none;
	border-color: var(--khb-rose-deep);
}
.kof-note {
	font-size: 12.5px;
	color: var(--khb-ink-soft);
}
.kof-panel-step h4 {
	margin: 1.75rem 0 1rem;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--khb-rose-deep);
	padding-top: 1.5rem;
	border-top: 1px solid var(--khb-line);
}
.kof-inline-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: -4px 0 1.25rem;
}
.kof-inline-checks label {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 13px;
}
.kof-inline-checks input[type="checkbox"] {
	width: auto;
	margin: 0;
}
.kof-sub-panel {
	border: 1px solid var(--khb-line);
	border-radius: 16px;
	padding: 1.25rem 1.25rem 0.25rem;
	margin-bottom: 1rem;
	background: var(--khb-paper);
}
.kof-sub-panel-title {
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--khb-rose-deep);
	margin: 0 0 1rem;
}
.kof-placement-row {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed var(--khb-line);
}
.kof-placement-row:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.kof-placement-type-label {
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: var(--khb-ink);
	margin-bottom: 6px;
	display: block;
}
.kof-qty-select {
	max-width: 220px;
	margin-bottom: 10px !important;
}
.kof-emb-type-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0 !important;
	font-size: 14.5px;
	cursor: pointer;
}
.kof-emb-type-toggle input {
	width: auto;
	margin: 0;
}
.kof-emb-type .kof-emb-type-body {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--khb-line);
}
.kof-swatch.kof-design-swatch {
	width: 210px;
	flex: 0 0 auto;
	scroll-snap-align: start;
}
.kof-swatch.kof-design-swatch img {
	width: 160px;
	height: 160px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.kof-swatch.kof-design-swatch:hover img {
	transform: scale(1.12);
	box-shadow: 0 6px 18px rgba(58,51,47,0.18);
	position: relative;
	z-index: 2;
}
.kof-design-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.kof-design-carousel-track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	padding: 4px 2px 4px;
	flex: 1 1 auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.kof-design-carousel-track::-webkit-scrollbar {
	display: none;
	height: 0;
}
.kof-carousel-arrow {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--khb-line);
	background: var(--khb-paper);
	color: var(--khb-rose-deep);
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}
.kof-carousel-arrow:hover {
	background: var(--khb-blush);
}
.kof-carousel-arrow:disabled {
	opacity: 0.35;
	cursor: default;
}
.kof-placement-card {
	padding: 12px 14px;
	border: 1px solid var(--khb-line);
	border-radius: 12px;
}
.kof-placement-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--khb-ink);
	cursor: pointer;
}
.kof-placement-check input {
	width: auto;
	margin: 0;
}
.kof-tier-select-wrap {
	margin-top: 10px;
}
.kof-tier-select-wrap select {
	width: 100%;
	max-width: none;
}
/* A placement that's checked but still has no tier picked — same red
   highlight already used for other incomplete required fields on this
   step, so it reads as one consistent "you missed this" language. */
.kof-placement-card.kof-needs-selection {
	border-color: #E24B4A;
}

/* Path B link preview — mirrors .kof-option-grid-2's column split so the
   link/brand/price fields line up under "I have the garment" and the
   preview thumbnail lines up under "Buy it for me". Actual height is
   pinned in px by JS (syncLinkThumbHeight) once the fields are visible;
   the min-height below is only a fallback before that runs. */
.kof-link-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	align-items: start;
}
.kof-link-thumb-wrap {
	min-height: 150px;
}
.kof-link-thumb,
.kof-link-thumb-ph {
	width: 100%;
	height: 100%;
	min-height: 150px;
	border-radius: 14px;
	border: 1px solid var(--khb-line);
	background: var(--khb-blush);
}
.kof-link-thumb {
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
	display: block;
}
.kof-link-thumb-ph {
	background: var(--khb-blush);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kof-link-thumb-ph i {
	font-size: 32px;
	color: var(--khb-ink-soft);
}

/* Embellishment groups */
.kof-embellishment-group {
	margin-bottom: 12px;
	border: 1px solid var(--khb-line);
	border-radius: 14px;
	overflow: hidden;
}
.kof-group-toggle {
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	background: var(--khb-blush);
	border: none;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--khb-ink);
	cursor: pointer;
}
.kof-group-body {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 16px;
	background: var(--khb-paper);
}
.kof-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 84px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--khb-ink-soft);
	text-align: center;
	cursor: pointer;
}
.kof-swatch input {
	margin: 0 0 4px;
}
.kof-swatch img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--khb-line);
}
.kof-swatch-none {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var(--khb-blush);
	color: var(--khb-ink-soft);
}
.kof-price {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--khb-rose-deep);
}

/* Sticky order-summary sidebar — sits next to the form panel on wide
   screens so the total is visible at every step, not just the last one.
   Its offset stacks beneath both the site header and the progress bar
   above (see kof-frontend.js for how --kof-header-h/--kof-progress-h
   get set); the 156px fallback only applies before JS has run. */
.kof-summary {
	position: sticky;
	top: calc(var(--kof-header-h, 0px) + var(--kof-progress-h, 156px));
	border: 1px solid var(--khb-line);
	border-radius: 20px;
	background: var(--khb-blush);
	padding: 1.75rem;
}
.kof-summary-title {
	margin: 0 0 1.1rem;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--khb-ink);
}
.kof-summary-note {
	margin: .9rem 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--khb-ink-soft);
}

/* Running total bar — now nested inside .kof-summary, so it carries no
   background/padding of its own (avoids a box within a box). */
.kof-total-bar {
	margin-top: 0;
}
#kof-summary-groups {
	font-size: 12.5px;
	font-weight: 500;
	color: var(--khb-ink-soft);
}
.kof-breakdown-row {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
}
.kof-breakdown-row span:last-child {
	font-variant-numeric: tabular-nums;
}
.kof-total-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 13px;
	font-weight: 500;
	color: var(--khb-ink-soft);
	padding-top: 6px;
	border-top: 1px solid var(--khb-line);
	margin-top: 6px;
}
.kof-total-row strong {
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: 20px;
	font-variant-numeric: tabular-nums;
	color: var(--khb-rose-deep);
}

.kof-step-error {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #791F1F;
	background: #FCEBEB;
	border: 2px solid #E24B4A;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	margin: 0.75rem 0 0;
	padding: 10px 14px;
}
.kof-step-error i {
	font-size: 18px;
	color: #A32D2D;
	flex: none;
}
.kof-option-grid.kof-needs-selection .kof-option-card {
	border-color: #E24B4A;
}

/* Nav buttons — same pill shape as .khb-btn */
.kof-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 1.5rem;
}
.kof-nav button {
	padding: 13px 30px;
	font-family: 'Jost', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 100px;
	cursor: pointer;
	transition: opacity .2s ease;
}
#kof-back-btn {
	background: var(--khb-paper);
	border: 1px solid var(--khb-rose-deep);
	color: var(--khb-rose-deep);
}
#kof-next-btn,
#kof-review-btn {
	background: var(--khb-rose-deep);
	color: var(--khb-paper);
	border: none;
}
#kof-review-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.kof-success {
	background: var(--khb-blush);
	color: var(--khb-ink);
	padding: 34px 24px;
	border-radius: 20px;
	margin-top: 1.5rem;
	text-align: center;
	border: 1px solid var(--khb-line);
}
.kof-success-title {
	margin: 0 0 10px;
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--khb-ink);
}
.kof-order-number {
	margin: 0 0 16px;
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	color: var(--khb-rose-deep);
}
.kof-success-message {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--khb-ink-soft);
	line-height: 1.6;
}
.kof-success-actions {
	margin-top: 18px;
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ===================================================================
   Order summary card — the photo slot only ever appears once an order
   is placed (Path B only, pulled from the fetched product-link
   thumbnail). While filling the form it's just the running total, no
   photo. Once placed, .kof-summary-final spans the full width to match
   the thank-you box below it rather than sitting narrow next to a form
   that's no longer there.
   =================================================================== */
.kof-summary-row {
	display: flex;
	gap: 24px;
	align-items: stretch;
}
.kof-summary-main {
	flex: 1 1 auto;
	min-width: 0;
}
.kof-summary-photo {
	flex: 0 0 200px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--khb-line);
}
.kof-summary-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kof-summary-final {
	grid-column: 1 / -1;
}
@media (max-width: 640px) {
	.kof-summary-row { flex-direction: column; }
	.kof-summary-photo { flex-basis: auto; max-height: 220px; }
}

/* ===================================================================
   Buttons shared by the review modal's footer and the success card's
   "View order details" — same pill shape as the step-nav buttons.
   =================================================================== */
.kof-btn-primary,
.kof-btn-secondary {
	padding: 12px 26px;
	font-family: 'Jost', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 100px;
	cursor: pointer;
	transition: opacity .2s ease;
}
.kof-btn-primary {
	background: var(--khb-rose-deep);
	color: var(--khb-paper);
	border: none;
}
.kof-btn-secondary {
	background: var(--khb-paper);
	border: 1px solid var(--khb-rose-deep);
	color: var(--khb-rose-deep);
}

/* ===================================================================
   Review modal — opened from Step 5's "Review order" (pre-submit) and
   from the success card's "View order details" (post-submit, read-only
   + downloadable). A pop-up within the same window, not a new tab —
   sized smaller than the page so it clearly reads as "still here",
   scrolls internally so a long order never pushes its own footer
   buttons off-screen.
   =================================================================== */
body.kof-modal-open {
	overflow: hidden;
}
.kof-modal-overlay {
	/* The modal is appended to document.body — outside .kof-form-wrap,
	   which is where every --khb-* color is actually defined. Without
	   redefining them here, every var(--khb-x) below silently resolves
	   to nothing, leaving the modal with a transparent background (the
	   page behind bleeding straight through it). */
	--khb-rose: #B76E79;
	--khb-rose-deep: #8C4A55;
	--khb-gold: #C9A24B;
	--khb-gold-deep: #9C7A2F;
	--khb-charcoal: #3A332F;
	--khb-blush: #FBEDE8;
	--khb-paper: #FFFDFB;
	--khb-ink: #3A332F;
	--khb-ink-soft: #8A7E77;
	--khb-line: #EFDCD3;

	position: fixed;
	inset: 0;
	background: rgba(58, 51, 47, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 9999;
}
.kof-modal {
	background: var(--khb-paper);
	color: var(--khb-ink);
	border-radius: 20px;
	width: 100%;
	max-width: 640px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
	font-family: 'Jost', sans-serif;
}
.kof-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 26px;
	border-bottom: 1px solid var(--khb-line);
	flex: 0 0 auto;
}
.kof-modal-title {
	margin: 0;
	font-family: 'Marcellus', serif;
	font-weight: 400;
	font-size: 22px;
	color: var(--khb-rose-deep);
}
.kof-modal-close {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: none;
	background: var(--khb-blush);
	color: var(--khb-ink-soft);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.kof-modal-body {
	padding: 22px 26px;
	overflow-y: auto;
	flex: 1 1 auto;
}
.kof-modal-foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 18px 26px;
	border-top: 1px solid var(--khb-line);
	flex: 0 0 auto;
}

/* ---- Review content shared by both modal modes ---- */
.kof-review-order-number {
	margin: 0 0 16px;
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: 17px;
	color: var(--khb-rose-deep);
}
.kof-review-header {
	display: grid;
	grid-template-columns: 1fr 140px;
	gap: 16px;
	align-items: start;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--khb-line);
}
.kof-review-header-nophoto {
	grid-template-columns: 1fr;
}
.kof-review-header-photo {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--khb-line);
}
.kof-review-header-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kof-review-section {
	margin-bottom: 20px;
}
.kof-review-section:last-child {
	margin-bottom: 0;
}
.kof-review-section h5 {
	margin: 0 0 10px;
	font-family: 'Marcellus', serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--khb-rose-deep);
}
.kof-review-subsection {
	margin-bottom: 14px;
}
.kof-review-subsection:last-child {
	margin-bottom: 0;
}
.kof-review-subsection h6 {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--khb-gold-deep);
}
.kof-review-rows {
	font-size: 13.5px;
}
.kof-review-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	color: var(--khb-ink-soft);
}
.kof-review-row span:last-child {
	color: var(--khb-ink);
	font-weight: 500;
	text-align: right;
}
.kof-review-checks {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--khb-ink-soft);
}
.kof-review-comments {
	margin: 6px 0 0;
	font-size: 13px;
	font-style: italic;
	color: var(--khb-ink-soft);
}
.kof-review-note {
	margin: 0;
	font-size: 13.5px;
	color: var(--khb-ink-soft);
}

/* ===================================================================
   Review modal — Fit / Style / Embellishments accordions

   Closed by default: together these three are the longest part of the
   review, and a customer checking one (say, what they added to the
   dupatta) shouldn't have to scroll past the other two to find it. The
   subtitle stays visible while closed, so there's still something to
   read without opening anything.
   =================================================================== */

.kof-review-acc {
	border: 1px solid var(--khb-line);
	border-radius: 14px;
	margin-bottom: 14px;
	overflow: hidden;
}
.kof-review-acc:last-child { margin-bottom: 0; }

.kof-review-acc-head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	border: 0;
	background: var(--khb-paper);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.kof-review-acc-head:focus-visible { outline: 2px solid var(--khb-rose); outline-offset: -2px; }
.kof-review-acc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kof-review-acc-title {
	font-family: 'Marcellus', serif;
	font-weight: 400;
	font-size: 15.5px;
	color: var(--khb-rose-deep);
}
.kof-review-acc-sub {
	font-size: 12.5px;
	color: var(--khb-ink-soft);
	line-height: 1.4;
}
.kof-review-acc-caret {
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--khb-ink-soft);
	transition: transform .18s ease;
}
.kof-review-acc-open .kof-review-acc-caret { transform: rotate(-180deg); }
.kof-review-acc-open .kof-review-acc-head { border-bottom: 1px solid var(--khb-line); }
.kof-review-acc-body {
	padding: 16px;
	animation: kof-fade-in .15s ease-out both;
}

/* Style's one-line-per-garment summary — the section name from the
   admin's "Section name (order review)" field, then every choice for
   that garment comma-joined with no field labels, since the label was
   already the point of picking from the dropdown. */
.kof-review-style-line {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	padding: 8px 0;
	border-top: 1px solid var(--khb-line);
	font-size: 13.5px;
	line-height: 1.5;
}
.kof-review-style-line:first-child { border-top: 0; padding-top: 0; }
.kof-review-style-name {
	font-weight: 600;
	color: var(--khb-ink);
	flex: none;
}
.kof-review-style-name::after { content: '\2014'; margin-left: 8px; color: var(--khb-ink-soft); font-weight: 400; }
.kof-review-style-values { color: var(--khb-ink-soft); flex: 1; min-width: 0; }

/* Embellishments, grouped by garment in the same Shirt/Shalwar/Dupatta
   order used throughout the rest of the form. */
.kof-review-emb-group { margin-bottom: 16px; }
.kof-review-emb-group:last-child { margin-bottom: 0; }
.kof-review-emb-group h6 {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--khb-gold-deep);
}
.kof-review-emb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.kof-review-emb-card {
	display: flex;
	gap: 12px;
	align-items: center;
	border: 1px solid var(--khb-line);
	border-radius: 12px;
	padding: 9px;
	background: var(--khb-blush);
}
.kof-review-emb-card img {
	width: 52px;
	height: 62px;
	border-radius: 8px;
	object-fit: cover;
	display: block;
	flex: none;
}
.kof-review-emb-noimg {
	width: 52px;
	height: 62px;
	border-radius: 8px;
	background: var(--khb-line);
	flex: none;
	display: grid;
	place-items: center;
	color: var(--khb-ink-soft);
	font-size: 18px;
}
.kof-review-emb-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kof-review-emb-design {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--khb-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kof-review-emb-meta {
	font-size: 12px;
	color: var(--khb-ink-soft);
	line-height: 1.4;
}
.kof-review-emb-price {
	font-size: 13px;
	font-weight: 500;
	color: var(--khb-rose-deep);
	font-variant-numeric: tabular-nums;
	margin-top: 1px;
}
.kof-review-screenshot {
	max-width: 100%;
	max-height: 260px;
	border-radius: 12px;
	border: 1px solid var(--khb-line);
	display: block;
}
.kof-review-pricing .kof-breakdown-row {
	font-size: 13px;
}
.kof-review-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 14px;
	font-weight: 500;
	color: var(--khb-ink-soft);
	padding-top: 8px;
	margin-top: 8px;
	border-top: 1px solid var(--khb-line);
}
.kof-review-total strong {
	font-size: 19px;
	font-weight: 700;
	color: var(--khb-rose-deep);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
	.kof-modal-overlay { padding: 0; }
	.kof-modal { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
	.kof-review-header { grid-template-columns: 1fr; }
	.kof-review-header-photo { max-height: 200px; }
}

/* Download = the browser's own Print / Save as PDF dialog — only the
   open modal's content should end up on the page, everything else
   (backdrop, close button, footer buttons) is hidden for print. */
@media print {
	body * {
		visibility: hidden;
	}
	.kof-modal-overlay,
	.kof-modal-overlay * {
		visibility: visible;
	}
	.kof-modal-overlay {
		position: absolute;
		inset: 0;
		background: none;
		padding: 0;
	}
	.kof-modal {
		max-width: 100%;
		max-height: none;
		box-shadow: none;
		border-radius: 0;
	}
	.kof-modal-close,
	.kof-modal-foot {
		display: none !important;
	}
}
.kof-error {
	background: #FBEAEA;
	color: #8A1F1F;
	padding: 16px;
	border-radius: 10px;
	margin-top: 1rem;
	font-size: 13px;
	font-weight: 500;
}

/* ===================================================================
   Delivery region — Step 1's first question, and everything it drives
   =================================================================== */

/* The dropdown is deliberately narrower than full width: it's one short
   answer, and a full-width select on a 960px panel reads as a mistake. */
.kof-region-row {
	max-width: 420px;
	margin-bottom: 0.5rem;
}
.kof-region-label {
	margin-bottom: 8px !important;
}
.kof-region-timeline {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--khb-gold-deep);
	font-weight: 500;
}
.kof-region-timeline::before {
	content: "";
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--khb-gold);
}

/* The source question is a second question on the same panel, so it gets
   the same separation a new sub-section gets elsewhere in the form. */
.kof-source-heading {
	margin-top: 1.75rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--khb-line);
}

/* Shared message panel — used identically by Step 1's garment pickup and
   Step 3's sample, so both read as the same kind of message rather than
   two unrelated boxes. Soft, not an alert: this is information, not a
   warning about something the customer got wrong. */
.kof-dispatch-note {
	background: var(--khb-blush);
	border: 1px solid var(--khb-line);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 1.25rem;
}
.kof-dispatch-note .kof-dn-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.65;
	color: var(--khb-ink);
}
.kof-dispatch-note .kof-dn-address {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed var(--khb-line);
}
.kof-dn-address-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--khb-ink-soft);
	margin-bottom: 6px;
}
.kof-dn-address address {
	font-style: normal;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--khb-rose-deep);
	margin: 0 0 10px;
}
.kof-copy-address {
	padding: 7px 16px;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	border-radius: 100px;
	border: 1px solid var(--khb-rose-deep);
	background: var(--khb-paper);
	color: var(--khb-rose-deep);
	cursor: pointer;
	transition: background .2s ease;
}
.kof-copy-address:hover {
	background: var(--khb-paper);
	opacity: .8;
}

/* Country/city locked to the chosen region — the hint text underneath
   is what communicates this now, so the field itself matches every
   other field in the row instead of standing out with its own tint;
   a customer photographing/scanning the row shouldn't see one subset
   visually flagged as "different" from the rest. */
.kof-panel input.kof-locked {
	cursor: default;
}
.kof-lock-hint {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--khb-ink-soft);
}

/* The delivery address is one long field, not half of a pair. */
.kof-field-grid .kof-field-full {
	grid-column: 1 / -1;
}

/* Region changes ease in instead of snapping, so the panel doesn't jump
   as options appear and disappear. */
@keyframes kof-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
.kof-anim {
	animation: kof-fade-in .15s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
	.kof-anim { animation: none; }
}

/* The old reserved height is gone: the card now renders all five blocks
   from the first screen (unreached ones greyed), so it no longer grows
   and shrinks a line at a time and has nothing to reserve against. */

/* ===================================================================
   Step 3 "Body measurements" / "Garment measurements" — both grouped
   per garment (Shirt / Shalwar / Dupatta) with a shared display name,
   sections not part of the chosen Step 2 package hidden outright by
   kof-hidden, toggled by updateGarmentMeasurementSections() /
   updateBodyMeasurementSections() in kof-frontend.js — identical
   mechanism to the Style step's own per-garment sections. Garment
   measurements additionally requires every meta question and every
   measurement field once its section is relevant (no visual lock —
   see updateGmRequiredState() in kof-frontend.js).
   =================================================================== */

/* Full-width tutorial video, with the intro line directly beneath it —
   changed from a side-by-side two-column layout (video previously
   fought the intro text for width, making it too small to be genuinely
   useful) to a single stacked column so the video gets real screen
   space to actually demonstrate the measurement being taken. */
.kof-video-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 1.75rem;
}

.kof-garment-intro {
	background: var(--khb-blush);
	border: 1px solid var(--khb-line);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 1.75rem;
	font-size: 13px;
	line-height: 1.6;
	color: var(--khb-ink);
}
.kof-video-row .kof-garment-intro {
	margin-bottom: 0;
	display: flex;
	align-items: center;
}
.kof-garment-intro .ti {
	color: var(--khb-gold-deep);
	margin-right: 6px;
	flex: 0 0 auto;
}

.kof-thumb-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--khb-line);
	background: var(--khb-charcoal);
}
.kof-thumb-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kof-thumb-ph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--khb-blush);
	color: var(--khb-ink-soft);
	font-size: 26px;
}
.kof-thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kof-thumb-play .ti {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--khb-rose-deep);
	font-size: 18px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* Inline video playback — clicking the play button (kof-frontend.js)
   swaps the thumbnail for a live player inside this same .kof-thumb-wrap
   box, rather than opening a new tab. This is this plugin's own
   implementation, independent of the Kaarigar Homepage plugin's version
   of the same idea. */
.kof-inline-video-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
	background: #000;
}
.kof-video-error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}
.kof-video-error p {
	color: #fff;
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
}


.kof-garment-section {
	margin-bottom: 2.25rem;
}
.kof-garment-section:last-child {
	margin-bottom: 0;
}
.kof-garment-section-title {
	font-family: 'Marcellus', serif;
	font-weight: 400;
	font-size: 21px;
	color: var(--khb-rose-deep);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--khb-line);
}

/* Meta-question grid — column count adapts to how many questions this
   section has, rather than assuming a fixed number: 1 question sits
   alone and narrow, 2-4 map to that many columns, 5+ wrap responsively
   via auto-fit rather than forcing an ever-narrower fixed column count.

   THE ALIGNMENT FIX: each field is its own two-row grid — a label row,
   then a control row — instead of a label and its select simply
   stacking inside a block. A label row is given a reserved minimum
   height, so a label that wraps to two lines still hands off to its
   select at the same y-position as a neighbour whose label stayed on
   one line. Every select in the row lines up regardless of how long
   any one of their questions is worded. */
.kof-meta-grid {
	display: grid;
	gap: 14px;
	margin-bottom: 1.5rem;
	align-items: start;
}
.kof-meta-grid[data-count="1"] {
	grid-template-columns: minmax(0, 360px);
}
.kof-meta-grid[data-count="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kof-meta-grid[data-count="3"] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kof-meta-grid[data-count="4"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kof-meta-grid[data-count-gt4] {
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.kof-panel .kof-meta-field {
	display: grid;
	grid-template-rows: auto auto;
	row-gap: 8px;
	height: 100%;
	margin-bottom: 0;
}
.kof-panel .kof-meta-field .q-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--khb-ink-soft);
	line-height: 1.4;
	display: flex;
	align-items: flex-end;
	min-height: 38px;
}
.kof-panel .kof-meta-field select {
	width: 100%;
	height: auto;
	padding: 11px 12px;
	border-radius: 10px;
	border: 1px solid var(--khb-line);
	background: #fff;
	color: var(--khb-ink);
	font-family: 'Jost', sans-serif;
	font-size: 14px;
}

@media (max-width: 700px) {
	.kof-meta-grid[data-count="2"],
	.kof-meta-grid[data-count="3"],
	.kof-meta-grid[data-count="4"] {
		grid-template-columns: 1fr;
	}
	.kof-meta-field .q-label {
		min-height: 0;
	}
}

/* ===================================================================
   Total card — deferred delivery + grouped embellishments
   =================================================================== */

/* Delivery is shown from Step 1 so it's never a surprise, but as a
   placeholder rather than a number — lighter, so it reads as pending
   rather than as an amount being charged. */
.kof-breakdown-row.kof-row-pending span:last-child {
	color: var(--khb-ink-soft);
	font-weight: 400;
	font-style: italic;
	opacity: .85;
}

/* ...and the moment it resolves at Step 5, it lands visibly instead of
   quietly appearing. */
@keyframes kof-resolve {
	0%   { background: transparent; }
	25%  { background: rgba(201, 162, 75, .28); }
	100% { background: transparent; }
}
.kof-breakdown-row.kof-row-resolved {
	animation: kof-resolve 1.1s ease-out both;
	border-radius: 6px;
	margin: 0 -6px;
	padding-left: 6px;
	padding-right: 6px;
}
@media (prefers-reduced-motion: reduce) {
	.kof-breakdown-row.kof-row-resolved { animation: none; }
}

/* One embellishment line that opens, rather than nine that don't. */
.kof-breakdown-group {
	margin: 2px 0;
}
button.kof-breakdown-row.kof-emb-summary {
	width: 100%;
	background: none;
	border: none;
	font-family: 'Jost', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--khb-ink);
	cursor: pointer;
	text-align: left;
	padding: 3px 0;
}
.kof-emb-summary span:last-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}
.kof-emb-caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--khb-rose-deep);
	transition: transform .18s ease;
}
.kof-breakdown-group.kof-open .kof-emb-caret {
	transform: rotate(-180deg);
}
.kof-emb-detail {
	padding: 2px 0 6px 10px;
	margin-left: 2px;
	border-left: 1px solid var(--khb-line);
	animation: kof-fade-in .15s ease-out both;
}
.kof-emb-garment {
	margin: 6px 0 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--khb-rose-deep);
}
.kof-breakdown-row.kof-emb-item {
	font-weight: 400;
	padding: 2px 0;
}
.kof-breakdown-row.kof-emb-item span:first-child {
	padding-right: 10px;
}


/* ===================================================================
   Summary card — grouped, in the order the form asks the questions
   =================================================================== */

/* Where it's going, pinned above the groups, since it's the one fact
   that governs every price underneath it. */
.kof-region-badge {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 1rem;
	padding: 9px 11px;
	border: 1px solid var(--khb-line);
	border-radius: 12px;
	background: var(--khb-paper);
	font-size: 12px;
	line-height: 1.4;
	color: var(--khb-ink-soft);
}
.kof-region-badge i { font-size: 15px; color: var(--khb-gold-deep); }

.kof-sum-group {
	padding: 11px 0;
	border-top: 1px solid var(--khb-line);
}
.kof-sum-group:first-child { border-top: 0; padding-top: 0; }
.kof-sum-head {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 3px;
}
/* Quieter than before — a plain muted digit rather than a bold,
   letter-spaced numeral, so the card reads as one continuous receipt
   instead of a stack of separately-badged steps. */
.kof-sum-num {
	font-size: 10px;
	font-weight: 400;
	color: var(--khb-ink-soft);
	opacity: .65;
	font-variant-numeric: tabular-nums;
}
.kof-sum-title {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--khb-ink-soft);
}
/* The choice itself, in the customer's terms, before any number. */
.kof-sum-detail {
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--khb-ink);
}
.kof-sum-sub {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--khb-ink-soft);
}
/* A step not reached yet: visible, so the shape of what's still coming
   is known from the first screen, but plainly not part of the total. */
.kof-sum-pending {
	margin: 0;
	font-size: 12.5px;
	font-weight: 400;
	font-style: italic;
	color: var(--khb-ink-soft);
	opacity: .75;
}
.kof-sum-group .kof-breakdown-row { margin-top: 4px; }
.kof-breakdown-row.kof-row-free span:last-child { color: var(--khb-gold-deep); }

/* Delivery — no numbered header and no group border of its own.
   Reads as the closing line of the receipt, sitting right above the
   total instead of as a 5th boxed section. */
.kof-sum-plain-group {
	padding-top: 8px;
}
.kof-sum-plain-group .kof-sum-sub {
	margin-bottom: 2px;
}
p.kof-sum-plain {
	margin: 8px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	font-style: italic;
	color: var(--khb-ink-soft);
	opacity: .75;
}

.kof-summary-help {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--khb-line);
	font-size: 12px;
	line-height: 1.5;
	color: var(--khb-ink-soft);
	text-decoration: none;
}
.kof-summary-help:hover { color: var(--khb-rose-deep); }
.kof-summary-help i { font-size: 17px; color: var(--khb-gold-deep); flex: none; }

/* ===================================================================
   Style step — per-garment chips
   =================================================================== */

.kof-garment-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.5rem;
}
.kof-garment-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border: 1px solid var(--khb-line);
	border-radius: 999px;
	background: var(--khb-paper);
	font-family: inherit;
	font-size: 13.5px;
	color: var(--khb-ink-soft);
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kof-garment-chip:hover { border-color: var(--khb-rose); color: var(--khb-ink); }
.kof-garment-chip.kof-chip-active {
	background: var(--khb-rose-deep);
	border-color: var(--khb-rose-deep);
	color: #fff;
}
.kof-garment-chip:focus-visible { outline: 2px solid var(--khb-rose); outline-offset: 2px; }

/* "Not the garment on screen" — deliberately a different class from
   .kof-hidden, which still means "not part of this order" and is what
   the review and the tailor sheet read. */
.kof-garment-off { display: none; }

.kof-garment-step-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--khb-line);
}

/* ===================================================================
   Collapsed optional panels (embellishments, tailor notes)
   =================================================================== */

.kof-disclosure {
	border: 1px solid var(--khb-line);
	border-radius: 14px;
	background: var(--khb-paper);
	margin-top: 12px;
	overflow: hidden;
}
.kof-disclosure-head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 17px;
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.kof-disclosure-head:focus-visible { outline: 2px solid var(--khb-rose); outline-offset: -2px; }
.kof-disclosure-icon { font-size: 19px; color: var(--khb-gold-deep); flex: none; }
.kof-disclosure-text { flex: 1; min-width: 0; }
.kof-disclosure-title {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--khb-ink);
}
.kof-disclosure-sub {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--khb-ink-soft);
}
/* Once something has been added, the sub-line stops being a teaser and
   starts being a receipt — worth the colour change. */
.kof-disclosure-sub.kof-sub-active { color: var(--khb-rose-deep); font-weight: 500; }
.kof-disclosure-caret {
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--khb-ink-soft);
	transition: transform .18s ease;
}
.kof-disclosure-open { border-color: var(--khb-rose); }
.kof-disclosure-open .kof-disclosure-caret { transform: rotate(-180deg); }
.kof-disclosure-body {
	padding: 0 17px 15px;
	animation: kof-fade-in .15s ease-out both;
}
.kof-disclosure-body .kof-sub-panel:first-child { margin-top: 0; }
.kof-disclosure-body textarea.kof-note-field { width: 100%; }

/* ===================================================================
   Pay step — carried-over details and the amount to transfer
   =================================================================== */

.kof-prefill-banner {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 1.25rem;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--khb-blush);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--khb-rose-deep);
}
.kof-prefill-banner i { font-size: 16px; flex: none; margin-top: 1px; }

/* A box we filled in ourselves — still marked (not locked, and the
   mark clears the moment it's edited), but subtly, via border colour
   only rather than a filled background, so the row still reads as one
   consistent set of fields rather than some standing out from others. */
.kof-form-wrap input.kof-prefilled,
.kof-form-wrap textarea.kof-prefilled {
	border-color: var(--khb-gold);
}

.kof-pay-heading {
	margin: 1.75rem 0 .9rem;
	font-size: 15px;
	font-weight: 600;
	color: var(--khb-ink);
}
.kof-pay-amount {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--khb-blush);
	margin-bottom: 1rem;
}
.kof-pay-amount-label { font-size: 13px; color: var(--khb-rose-deep); }
.kof-pay-amount strong {
	font-family: 'Marcellus', serif;
	font-weight: 400;
	font-size: 26px;
	color: var(--khb-rose-deep);
	font-variant-numeric: tabular-nums;
}

/* Tablet and below: the sticky sidebar has no room to sit beside the
   form, so it drops to a single column and moves below the form panel
   (source order already puts it there — form panel comes first). */
@media (max-width: 900px) {
	.kof-layout { grid-template-columns: 1fr; gap: 20px; }
	.kof-summary { position: static; }
}

/* Between the two: keep the full-width shell, but stop the summary
   growing with it — a 380px card next to a 1200px form reads as a
   stray column. */
@media (max-width: 1280px) {
	.kof-form-wrap { padding-left: 28px; padding-right: 28px; }
	.kof-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 24px; }
}

@media (max-width: 600px) {
	.kof-form-wrap { padding: 60px 20px; }
	.kof-panel { padding: 1.25rem; }
	.kof-summary { padding: 1.25rem; }
	/* Five full labels don't fit a phone-width tab bar — numbers only,
	   same pattern the region/sizing cards already use for tight rows. */
	.kof-tab-label { display: none; }
	.kof-link-row { grid-template-columns: 1fr; }
	.kof-link-thumb-wrap { min-height: 200px; }

	/* Most traffic is Instagram, so the region-driven layouts are checked
	   here first: three sizing cards across is too tight on a phone, and a
	   single remaining card shouldn't be artificially narrowed. */
	.kof-option-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kof-option-grid-1 { max-width: none; }
	.kof-region-row { max-width: none; }
	.kof-field-grid { grid-template-columns: 1fr; }
	.kof-dispatch-note { padding: 14px 15px; }
	.kof-garment-chip { padding: 8px 14px; font-size: 13px; }
	.kof-garment-step-nav { flex-direction: column; }
	.kof-garment-step-nav button { width: 100%; }
	.kof-disclosure-head { padding: 13px 14px; gap: 10px; }
	.kof-disclosure-body { padding: 0 14px 13px; }
	.kof-pay-amount { padding: 14px 16px; }
	.kof-pay-amount strong { font-size: 23px; }
	.kof-review-emb-grid { grid-template-columns: 1fr; }
	.kof-review-acc-head { padding: 12px 14px; }
	.kof-review-acc-body { padding: 14px; }
}