/**
 * Clear Live Order Form — frontend styles.
 * Faithful port of the approved prototype design (light + dark),
 * fully scoped under .clv-root so theme styles are never affected.
 */

.clv-root {
	--page-bg: #ffffff;
	--shell-bg: #fbfbfd;
	--surface: #ffffff;
	--surface-alt: #f6f7fb;
	--selected-bg: #f0f1fa;
	--icon-bg: #e9eaf3;
	--border: #e3e4ec;
	--text: #23243a;
	--text-secondary: #4a4c5e;
	--text-muted: #8a8ca0;
	--text-faint: #b2b3c2;
	--disabled: #c7c8d6;
	--navy: var(--clv-navy, #00017a);
	--on-navy: #ffffff;
	--orange: var(--clv-orange, #fc9e5b);
	--on-orange: #1a1550;
	--red: #d85a30;
	--warn-bg: #fff3cd;
	--warn-text: #8a6d1a;
	--err-bg: #fadbd8;
	--err-text: #a93226;
	--info-bg: #f6f7fb;
	--overlay: rgba(0, 1, 30, 0.55);
	--sig-ink: #23243a;

	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--text);
	background: var(--page-bg);
	max-width: var(--clv-max-width, 1100px);
	margin: 0 auto;
	padding: 32px 20px;
	font-size: 15px;
	line-height: 1.5;
}

/* Dark theme: forced (theme=dark) or following the visitor OS (theme=auto). */
.clv-root[data-clv-theme="dark"] {
	--page-bg: #101120;
	--shell-bg: #101120;
	--surface: #1a1c2e;
	--surface-alt: #20223a;
	--selected-bg: #262a50;
	--icon-bg: #2a2c45;
	--border: #34364e;
	--text: #ecedf7;
	--text-secondary: #c7c8d6;
	--text-muted: #9294ac;
	--text-faint: #6b6d80;
	--disabled: #4a4c5e;
	--navy: var(--clv-navy-dark, #8388f5);
	--on-navy: #10112a;
	--orange: var(--clv-orange-dark, #fc9e5b);
	--red: #ff8a70;
	--warn-bg: #3b2e10;
	--warn-text: #f0c24b;
	--err-bg: #3a1712;
	--err-text: #ff8a75;
	--info-bg: #20223a;
	--overlay: rgba(0, 0, 10, 0.65);
}

@media (prefers-color-scheme: dark) {
	.clv-root[data-clv-theme="auto"] {
		--page-bg: #101120;
		--shell-bg: #101120;
		--surface: #1a1c2e;
		--surface-alt: #20223a;
		--selected-bg: #262a50;
		--icon-bg: #2a2c45;
		--border: #34364e;
		--text: #ecedf7;
		--text-secondary: #c7c8d6;
		--text-muted: #9294ac;
		--text-faint: #6b6d80;
		--disabled: #4a4c5e;
		--navy: var(--clv-navy-dark, #8388f5);
		--on-navy: #10112a;
		--orange: var(--clv-orange-dark, #fc9e5b);
		--red: #ff8a70;
		--warn-bg: #3b2e10;
		--warn-text: #f0c24b;
		--err-bg: #3a1712;
		--err-text: #ff8a75;
		--info-bg: #20223a;
		--overlay: rgba(0, 0, 10, 0.65);
	}
}

.clv-root *,
.clv-root *::before,
.clv-root *::after {
	box-sizing: border-box;
}

.clv-root h1,
.clv-root h2,
.clv-root h3,
.clv-root button,
.clv-root label {
	font-family: "Poppins", "Montserrat", sans-serif;
}

.clv-root input:focus,
.clv-root textarea:focus,
.clv-root button:focus-visible,
.clv-root [tabindex]:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 1px;
}

.clv-root ::placeholder {
	color: var(--text-faint);
	opacity: 1;
}

/* ---------------- Header & progress ---------------- */

.clv-header {
	margin-bottom: 20px;
}

.clv-brand {
	font-size: 13px;
	font-weight: 700;
	color: var(--orange);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.clv-title {
	margin: 2px 0 0;
	font-size: 26px;
	color: var(--navy);
	font-weight: 700;
	line-height: 1.3;
}

.clv-steps {
	display: flex;
	gap: 6px;
	margin-bottom: 24px;
}

.clv-step {
	flex: 1;
}

.clv-step-bar {
	height: 4px;
	border-radius: 2px;
	background: var(--border);
	margin-bottom: 6px;
}

.clv-step.is-done .clv-step-bar,
.clv-step.is-current .clv-step-bar {
	background: var(--orange);
}

.clv-step-label {
	font-size: 12px;
	color: var(--text-faint);
	text-align: center;
	font-weight: 400;
}

.clv-step.is-current .clv-step-label {
	color: var(--navy);
	font-weight: 700;
}

/* ---------------- Card & fields ---------------- */

.clv-card {
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 28px;
	min-height: 380px;
	background: var(--surface);
}

.clv-h3 {
	color: var(--navy);
	font-size: 20px;
	margin: 0 0 16px;
	font-weight: 600;
}

.clv-field {
	margin-bottom: 18px;
}

.clv-label {
	display: block;
	font-size: var(--clv-label-size, 16px);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.clv-req {
	color: var(--red);
}

.clv-error-text {
	font-size: var(--clv-note-size, 14px);
	color: var(--red);
	margin: 5px 0 0;
	font-weight: 600;
}

.clv-note {
	font-size: var(--clv-note-size, 14px);
	color: var(--text-muted);
	margin: 5px 0 0;
	line-height: 1.5;
}

.clv-input,
.clv-textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: var(--clv-input-size, 16px);
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-family: inherit;
	line-height: 1.4;
}

.clv-textarea {
	min-height: 72px;
	resize: vertical;
}

.clv-input.clv-invalid,
.clv-textarea.clv-invalid {
	border-color: var(--red);
}

.clv-grid-thirds {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}

.clv-grid-half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.clv-grid-thirds .clv-field,
.clv-grid-half .clv-field {
	margin-bottom: 0;
}

.clv-grid-wrap {
	margin-bottom: 18px;
}

.clv-panel {
	padding: 16px;
	background: var(--surface-alt);
	border-radius: 10px;
	margin: 4px 0 18px;
}

.clv-panel .clv-field:last-child {
	margin-bottom: 0;
}

/* ---------------- Radio button groups ---------------- */

.clv-radio-group {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.clv-radio-btn {
	padding: 9px 16px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--text);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
}

.clv-radio-btn.is-selected {
	border-color: var(--navy);
	background: var(--selected-bg);
	color: var(--navy);
	font-weight: 700;
}

.clv-radio-btn:disabled {
	color: var(--disabled);
	cursor: default;
}

.clv-radio-btn.is-selected:disabled {
	color: var(--navy);
	opacity: 0.75;
}

/* ---------------- Checkboxes & accept boxes ---------------- */

.clv-check-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0;
}

.clv-check-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--navy);
	flex-shrink: 0;
	margin: 0;
}

.clv-check-row label {
	font-size: 15px;
	color: var(--text);
	cursor: pointer;
}

.clv-accept-box {
	padding: 12px 14px;
	background: var(--surface-alt);
	border-radius: 8px;
	border: 1px solid var(--border);
	margin-bottom: 18px;
}

.clv-accept-box.clv-invalid {
	background: var(--err-bg);
	border-color: var(--red);
}

.clv-accept-inner {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.clv-accept-inner input[type="checkbox"] {
	margin-top: 2px;
	accent-color: var(--navy);
	flex-shrink: 0;
}

.clv-accept-inner span {
	font-size: 14.5px;
	color: var(--text);
}

.clv-tc-link {
	color: var(--navy);
	text-decoration: underline;
	font-weight: 600;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
}

/* ---------------- Notices ---------------- */

.clv-notice {
	border-radius: 6px;
	padding: 10px 14px;
	font-size: var(--clv-note-size, 14px);
	margin: 10px 0;
	line-height: 1.5;
	border-left: 3px solid var(--navy);
	background: var(--info-bg);
	color: var(--text-secondary);
}

.clv-notice.is-warn {
	background: var(--warn-bg);
	color: var(--warn-text);
	border-left-color: var(--orange);
}

.clv-notice.is-err {
	background: var(--err-bg);
	color: var(--err-text);
	border-left-color: var(--red);
}

/* ---------------- Service selector ---------------- */

.clv-service-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.clv-service-btn {
	text-align: left;
	padding: 14px 16px;
	border-radius: 10px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	cursor: pointer;
	font-family: inherit;
}

.clv-service-btn.is-selected {
	border-color: var(--navy);
	background: var(--selected-bg);
}

.clv-service-label {
	font-weight: 700;
	font-size: 16px;
	color: var(--navy);
}

.clv-service-sub {
	font-size: 13.5px;
	color: var(--text-muted);
	margin-top: 2px;
}

/* ---------------- Catalog & quantity cards ---------------- */

.clv-item-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border-radius: 10px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	min-width: 0;
}

.clv-item-card.is-selected {
	border-color: var(--navy);
	background: var(--selected-bg);
}

.clv-item-top {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.clv-item-img {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid var(--border);
	flex-shrink: 0;
}

.clv-item-ph {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--icon-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.clv-item-ph svg {
	stroke: var(--navy);
}

.clv-item-info {
	flex: 1;
	min-width: 0;
}

.clv-item-name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--navy);
	overflow: visible;
	text-overflow: ellipsis;
	white-space: normal;
}

.clv-item-sku {
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.clv-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.clv-item-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
}

.clv-item-price .clv-per {
	font-weight: 500;
	font-size: 12.5px;
}

.clv-qty {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.clv-qty-btn {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	padding: 0;
	font-family: inherit;
}

.clv-qty-num {
	font-size: 15px;
	font-weight: 700;
	width: 24px;
	text-align: center;
}

.clv-item-list {
	display: grid;
	gap: 8px;
}

/* Catalog browser */

.clv-cat-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

.clv-cat-tab {
	padding: 7px 14px;
	border-radius: 20px;
	border: 1.5px solid var(--border);
	background: var(--surface);
	color: var(--text-secondary);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}

.clv-cat-tab.is-active {
	border-color: var(--navy);
	background: var(--navy);
	color: var(--on-navy);
}

.clv-cat-search {
	margin-bottom: 14px;
}

.clv-cat-scroll {
	max-height: 680px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
}

.clv-cat-group {
	margin-bottom: 16px;
}

.clv-cat-subhead {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-muted);
	letter-spacing: 0.4px;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.clv-cat-empty {
	font-size: 14px;
	color: var(--text-muted);
}

/* Add-on cards */

.clv-addon-card {
	padding: 14px;
	border-radius: 10px;
	border: 1.5px solid var(--border);
	background: var(--surface);
}

.clv-addon-card.is-selected {
	border-color: var(--navy);
	background: var(--selected-bg);
}

.clv-addon-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.clv-addon-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
}

.clv-addon-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--orange);
	flex-shrink: 0;
}

.clv-addon-desc {
	font-size: var(--clv-note-size, 14px);
	color: var(--text-muted);
	margin: 4px 0 8px;
}

.clv-addon-qty-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.clv-addon-qty-label {
	font-size: 13px;
	color: var(--text-muted);
}

/* ---------------- LOA block & signature ---------------- */

.clv-loa {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 18px;
}

.clv-loa-head {
	font-size: 15px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 10px;
}

.clv-file-label {
	display: block;
	width: 100%;
	padding: 10px 12px;
	font-size: var(--clv-input-size, 16px);
	border-radius: 8px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-muted);
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: inherit;
	font-weight: 400;
}

.clv-file-label.has-file {
	color: var(--text);
}

.clv-file-label input[type="file"] {
	display: none;
}

.clv-sig-canvas {
	width: 100%;
	height: 110px;
	background: #ffffff;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	touch-action: none;
	cursor: crosshair;
	display: block;
}

.clv-sig-canvas.clv-invalid {
	border-color: var(--red);
}

.clv-sig-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 6px;
}

.clv-sig-status {
	font-size: 13px;
	color: var(--text-muted);
}

.clv-sig-status.is-signed {
	color: var(--navy);
	font-weight: 700;
}

.clv-sig-clear {
	font-size: 13px;
	color: var(--text-muted);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	font-family: inherit;
	padding: 0;
}

.clv-number-list {
	display: grid;
	gap: 8px;
}

/* ---------------- Line setup (ported + new) & per-line choice ---------------- */

.clv-line-setup {
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	padding: 4px 14px;
}

.clv-line-setup.clv-invalid {
	border-color: var(--red);
}

.clv-line-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

.clv-line-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.clv-line-label {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}

.clv-line-sub {
	font-size: 13px;
	color: var(--text-muted);
}

.clv-line-total {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	font-size: 14px;
	color: var(--text-secondary);
}

.clv-line-total strong {
	color: var(--navy);
	font-size: 16px;
}

.clv-line-choices {
	display: grid;
	gap: 10px;
}

.clv-line-choice {
	display: grid;
	gap: 8px;
	padding: 12px 14px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
}

.clv-line-choice-head {
	font-size: 14px;
	font-weight: 700;
	color: var(--navy);
}

.clv-line-choice .clv-radio-group {
	flex-wrap: wrap;
}

.clv-line-area-wrap {
	display: grid;
	gap: 4px;
	max-width: 220px;
}

/* ---------------- Order summary ---------------- */

.clv-summary {
	background: var(--surface-alt);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 18px;
}

.clv-summary-head {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-muted);
	letter-spacing: 0.5px;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.clv-summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--text);
	padding: 3px 0;
	gap: 12px;
}

.clv-summary-row .clv-sum-price {
	font-weight: 600;
	flex-shrink: 0;
}

.clv-summary-total {
	display: flex;
	justify-content: space-between;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--navy);
	border-top: 1px solid var(--border);
	margin-top: 8px;
	padding-top: 8px;
}

.clv-summary-foot {
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: 6px;
}

/* ---------------- Terms modal ---------------- */

.clv-modal-overlay {
	position: fixed;
	inset: 0;
	background: var(--overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}

.clv-modal {
	background: var(--surface);
	border-radius: 14px;
	max-width: 640px;
	width: 100%;
	max-height: 80vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.clv-modal-head {
	padding: 18px 22px;
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.clv-modal-head h3 {
	margin: 0;
	color: var(--navy);
	font-size: 18px;
}

.clv-modal-close {
	border: none;
	background: none;
	font-size: 20px;
	cursor: pointer;
	color: var(--text-muted);
	line-height: 1;
	padding: 0 2px;
	font-family: inherit;
}

.clv-modal-body {
	padding: 22px;
	overflow-y: auto;
}

.clv-tc-h {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--navy);
	margin-bottom: 3px;
}

.clv-tc-p {
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.6;
	margin: 0 0 14px;
}

/* ---------------- Navigation buttons ---------------- */

.clv-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	gap: 12px;
}

.clv-btn {
	padding: 10px 20px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.4;
}

.clv-btn-back {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text);
}

.clv-btn-back:disabled {
	color: var(--disabled);
	cursor: default;
}

.clv-btn-continue {
	border: none;
	background: var(--orange);
	color: var(--on-orange);
	font-weight: 700;
	padding: 10px 24px;
}

.clv-btn-submit {
	border: none;
	background: var(--navy);
	color: var(--on-navy);
	font-weight: 700;
	padding: 10px 24px;
}

.clv-btn-submit:disabled {
	opacity: 0.7;
	cursor: default;
}

/* Honeypot — visually hidden, still fillable by bots. */
.clv-hp-wrap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

@media (max-width: 560px) {
	.clv-root {
		padding: 20px 12px;
	}

	.clv-card {
		padding: 18px 14px;
	}

	.clv-grid-thirds {
		grid-template-columns: 1fr;
	}

	.clv-service-grid {
		grid-template-columns: 1fr;
	}

	.clv-step-label {
		display: none;
	}
}

/* ---------------- 1.1: theme color-scheme, typed fields ---------------- */

.clv-root[data-clv-theme="light"] {
	color-scheme: light;
}

.clv-root[data-clv-theme="dark"] {
	color-scheme: dark;
}

.clv-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 34px;
	background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
	background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.clv-select.is-placeholder {
	color: var(--text-faint);
}

.clv-input.is-valid {
	border-color: var(--border);
}

/* Address autocomplete */
.clv-ac-wrap {
	position: relative;
}

.clv-ac-list {
	position: absolute;
	z-index: 50;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 1, 40, 0.14);
	max-height: 260px;
	overflow-y: auto;
}

.clv-ac-item {
	padding: 9px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--text);
}

.clv-ac-item small {
	display: block;
	color: var(--text-muted);
	font-size: 13px;
}

.clv-ac-item.is-active,
.clv-ac-item:hover {
	background: var(--selected-bg);
}

.clv-ac-foot {
	padding: 4px 10px 2px;
	font-size: 10px;
	color: var(--text-faint);
	text-align: right;
}

/* File field */
.clv-file-label.clv-invalid {
	border-color: var(--red);
}

.clv-file-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

.clv-file-row .clv-file-label {
	flex: 1;
	min-width: 0;
}

.clv-file-clear {
	border: none;
	background: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 13px;
	text-decoration: underline;
	padding: 0 2px;
	font-family: inherit;
}

/* Terms modal consent footer */
.clv-modal-foot {
	padding: 14px 22px;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.clv-consent-meta {
	font-size: 13px;
	color: var(--text-muted);
	margin: 6px 0 0 24px;
}

.clv-consent-meta.is-ok {
	color: var(--navy);
	font-weight: 600;
}

/* =====================================================================
 * 1.2 — readability, wide desktop layout with summary sidebar, catalog
 * grid with larger photos + lightbox, Due today / Monthly summary,
 * Long Distance rates, CAPTCHA. Sizes come from Settings (CSS vars).
 * ===================================================================== */

.clv-layout {
	display: block;
}

.clv-main {
	min-width: 0;
}

.clv-aside {
	display: none;
}

@media (min-width: 900px) {
	.clv-root.clv-has-aside .clv-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 330px;
		gap: 28px;
		align-items: start;
	}

	.clv-root.clv-has-aside .clv-aside {
		display: block;
		position: sticky;
		top: 24px;
	}

	.clv-root.clv-layout-wide:not(.clv-has-aside) .clv-layout {
		max-width: 860px;
		margin: 0 auto;
	}

	.clv-aside .clv-summary {
		border: 1px solid var(--border);
		background: var(--surface);
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}
}

/* Catalog: grid of cards with large photos */
.clv-item-list {
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.clv-item-card {
	padding: 14px;
	gap: 10px;
}

.clv-item-top {
	align-items: flex-start;
	gap: 14px;
}

.clv-item-media {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	overflow: hidden;
}

button.clv-item-media {
	cursor: zoom-in;
	font: inherit;
	position: relative;
}

button.clv-item-media::after {
	content: "⤢";
	position: absolute;
	right: 5px;
	bottom: 3px;
	font-size: 13px;
	color: var(--text-muted);
	opacity: 0.8;
}

.clv-item-media .clv-item-img {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	object-fit: contain;
	background: transparent;
}

.clv-item-media .clv-item-ph {
	width: 100%;
	height: 100%;
	background: var(--icon-bg);
	border-radius: 8px;
}

.clv-item-desc {
	margin: 6px 0 0;
	font-size: calc(var(--clv-note-size, 14px) - 0.5px);
	color: var(--text-secondary);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.clv-item-bottom {
	margin-top: auto;
}

.clv-item-flag {
	font-size: 13px;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--info-bg);
	color: var(--text-secondary);
	border-left: 3px solid var(--navy);
}

.clv-item-flag.is-na {
	background: var(--warn-bg);
	color: var(--warn-text);
	border-left-color: var(--orange);
}

.clv-item-card.is-unavailable {
	background: var(--surface-alt);
}

.clv-item-card.is-unavailable .clv-item-media,
.clv-item-card.is-unavailable .clv-item-info {
	opacity: 0.55;
}

.clv-item-price.is-na {
	color: var(--text-faint);
	text-decoration: line-through;
}

.clv-qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

@media (min-width: 600px) {
	.clv-item-list,
	.clv-item-list.clv-addon-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.clv-item-top {
		flex-direction: column;
		align-items: stretch;
	}

	.clv-item-media {
		width: 100%;
		height: var(--clv-img-size, 130px);
	}
}

@media (min-width: 900px) {
	.clv-item-list {
		grid-template-columns: repeat(var(--clv-cat-cols, 3), minmax(0, 1fr));
	}

	.clv-item-list.clv-addon-list,
	.clv-root.clv-has-aside .clv-item-list.clv-addon-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.clv-root.clv-layout-narrow .clv-item-list {
	grid-template-columns: minmax(0, 1fr);
}

.clv-root.clv-layout-narrow .clv-item-top {
	flex-direction: row;
}

.clv-root.clv-layout-narrow .clv-item-media {
	width: 96px;
	height: 96px;
}

/* Photo lightbox */
.clv-zoom-box {
	max-width: 680px;
	padding: 20px 22px 18px;
	position: relative;
	align-items: center;
	text-align: center;
	overflow-y: auto;
}

.clv-zoom-box img {
	max-width: 100%;
	max-height: 62vh;
	object-fit: contain;
	background: #ffffff;
	border-radius: 10px;
}

.clv-zoom-box .clv-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 26px;
}

.clv-zoom-name {
	margin-top: 12px;
	font-weight: 700;
	color: var(--navy);
	font-size: 16px;
}

.clv-zoom-desc {
	margin: 6px 0 0;
	color: var(--text-secondary);
	font-size: 14px;
}

/* Order summary: Monthly / Due today */
.clv-summary-group + .clv-summary-group {
	margin-top: 16px;
}

.clv-summary-group-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--navy);
	margin: 6px 0 4px;
}

.clv-summary-row.is-variable .clv-sum-price {
	font-weight: 500;
	font-style: italic;
	color: var(--text-muted);
	text-align: right;
	max-width: 55%;
}

.clv-summary-empty {
	margin: 0;
	font-size: 14px;
	color: var(--text-muted);
}

.clv-summary-aside .clv-summary-row {
	font-size: 13.5px;
}

/* Quantity adjustment notice */
.clv-adjust-note div + div {
	margin-top: 4px;
}

/* Signature feedback */
.clv-sig-status.is-warn {
	color: var(--warn-text);
	font-weight: 600;
}

.clv-sig-canvas {
	height: 130px;
}

/* Long Distance rates */
.clv-ld-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	margin: 4px 0;
}

.clv-ld-table th {
	text-align: left;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--text-muted);
	padding: 6px 8px;
	border-bottom: 1px solid var(--border);
}

.clv-ld-table td {
	padding: 9px 8px;
	border-bottom: 1px solid var(--border);
	color: var(--text);
}

.clv-ld-table .clv-ld-num {
	font-weight: 700;
	color: var(--navy);
	white-space: nowrap;
}

.clv-ld-missing,
.clv-ld-wait {
	color: var(--warn-text);
	font-style: italic;
}

.clv-link-btn {
	margin-top: 8px;
	background: none;
	border: none;
	padding: 0;
	color: var(--navy);
	text-decoration: underline;
	font-weight: 600;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
}

.clv-modal-sm {
	max-width: 560px;
}

/* CAPTCHA */
.clv-captcha-host {
	margin-top: 16px;
	padding: 16px 20px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: var(--surface);
}

.clv-captcha-host .clv-field {
	margin: 0;
}

.clv-captcha-input {
	max-width: 160px;
}

@media (max-width: 560px) {
	.clv-title {
		font-size: 21px;
	}
}

/* Wide layout: break out of narrow theme content columns (centred on the
 * column, never wider than the viewport). No transform, so the fixed
 * pop-ups keep positioning against the viewport. */
@media (min-width: 900px) {
	.clv-root.clv-layout-wide {
		--clv-w: min(var(--clv-max-width, 1100px), calc(100vw - 48px));
		width: var(--clv-w);
		max-width: none;
		margin-left: calc(50% - var(--clv-w) / 2);
		margin-right: 0;
	}
}