/*
 * Pathway Volume Calculator — frontend styles.
 *
 * SkilledService brand theme:
 *   Primary   Navy  #00132B  (dominant)
 *   Accent    Gold  #F1B01D  (active / focus / selected states)
 *
 * Every rule is scoped under .pathway-volume-calculator so the
 * plugin never touches theme-level elements (body, h1, button,
 * input, form, img, ...) and looks the same on any active theme.
 *
 * This file is presentation only — it relies on the classes and
 * state hooks the template and calculator.js already produce
 * (.is-active on tabs/panels, .has-qty on item cards, .is-error on
 * form messages, [aria-invalid] on fields). No markup or script
 * change is required.
 */

.pathway-volume-calculator {
	/* Brand */
	--pvc-navy: #00132b;
	--pvc-gold: #f1b01d;

	/* Derived brand shades */
	--pvc-navy-hover: #001f45;
	--pvc-gold-dark: #c4890c;
	--pvc-gold-soft: #fdf6e6;
	--pvc-navy-soft: #f2f5f9;
	--pvc-navy-10: rgba(0, 19, 43, 0.1);
	--pvc-navy-18: rgba(0, 19, 43, 0.18);
	--pvc-gold-ring: rgba(241, 176, 29, 0.28);

	/* Semantic aliases used throughout the file */
	--pvc-primary: var(--pvc-navy);
	--pvc-primary-dark: var(--pvc-navy-hover);
	--pvc-accent: var(--pvc-gold);
	--pvc-accent-dark: var(--pvc-gold-dark);
	/* Validation only — a deep, muted red, never the old brand red. */
	--pvc-danger: #b42318;

	--pvc-text: #00132b;
	--pvc-text-light: #5b6b80;
	--pvc-border: var(--pvc-navy-18);
	--pvc-border-strong: var(--pvc-navy);
	--pvc-bg: #f4f6f9;
	--pvc-surface: #ffffff;
	--pvc-radius: 12px;
	--pvc-radius-sm: 8px;
	--pvc-shadow: 0 1px 2px rgba(0, 19, 43, 0.05), 0 2px 6px rgba(0, 19, 43, 0.06);
	--pvc-shadow-md: 0 6px 18px rgba(0, 19, 43, 0.1);
	--pvc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	box-sizing: border-box;
	/*
	 * Full width of whatever content area the shortcode is dropped
	 * into — no narrow inner box of our own. The page/theme still
	 * decides the overall content width; we just use all of it.
	 * max-width: 100% (never more) guarantees we can't introduce
	 * horizontal page overflow.
	 */
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	background: var(--pvc-bg);
	border-radius: var(--pvc-radius);
	font-family: var(--pvc-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--pvc-text);
	/*
	 * Page builders (Elementor especially) routinely embed a widget
	 * inside a column/section narrower than the browser viewport —
	 * e.g. a boxed layout, a multi-column section, a sidebar template.
	 * Viewport-based @media breakpoints don't know that: on a wide
	 * viewport they can switch this calculator into its wide layout
	 * even though the box it actually has to render in is mobile-width,
	 * squeezing everything into one narrow column. container-type here
	 * makes every breakpoint below respond to the calculator's own
	 * rendered width instead, so it looks right regardless of what
	 * it's embedded inside.
	 */
	container-type: inline-size;
	container-name: pvc;
}

.pathway-volume-calculator,
.pathway-volume-calculator *,
.pathway-volume-calculator *::before,
.pathway-volume-calculator *::after {
	box-sizing: border-box;
}

.pathway-volume-calculator img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Page builders and themes commonly apply global styling to bare
 * button/input/select/textarea elements (Elementor's Global Buttons,
 * a theme's default form-control skin, etc.). Every interactive
 * element below gets its own explicit class-based style, but this
 * reset neutralizes the properties themes/builders most often set
 * globally — box-shadow, border-radius, text-transform, native OS
 * chrome — so nothing bleeds through before that explicit styling
 * applies, regardless of what page or builder the calculator sits in.
 */
.pathway-volume-calculator button,
.pathway-volume-calculator input,
.pathway-volume-calculator select,
.pathway-volume-calculator textarea {
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}

.pathway-volume-calculator select {
	/* Restore a visible dropdown affordance after removing native chrome above. */
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 6 5-6' stroke='%2300132b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	padding-right: 34px;
}

.pathway-volume-calculator :focus-visible {
	outline: 2px solid var(--pvc-gold);
	outline-offset: 2px;
}

.pathway-volume-calculator [hidden] {
	display: none !important;
}

.pathway-volume-calculator .pvc-pane-heading {
	margin: 0 0 16px;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--pvc-navy);
}

/* ---------------------------------------------------------------- */
/* Header                                                            */
/* ---------------------------------------------------------------- */

.pathway-volume-calculator .pvc-header {
	margin-bottom: 24px;
	text-align: center;
}

.pathway-volume-calculator .pvc-title {
	margin: 0 0 10px;
	font-size: 1.75em;
	font-weight: 700;
	color: var(--pvc-navy);
	line-height: 1.25;
}

/* Small gold rule under the title — the one decorative accent. */
.pathway-volume-calculator .pvc-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 2px;
	background: var(--pvc-gold);
}

.pathway-volume-calculator .pvc-subtitle {
	margin: 0;
	color: var(--pvc-text-light);
	font-size: 1em;
}

.pathway-volume-calculator .pvc-empty-notice,
.pathway-volume-calculator .pvc-noscript-notice {
	background: var(--pvc-gold-soft);
	border: 1px solid var(--pvc-gold);
	color: var(--pvc-navy);
	padding: 14px 16px;
	border-radius: var(--pvc-radius-sm);
}

/* ---------------------------------------------------------------- */
/* Category bar                                                      */
/* ---------------------------------------------------------------- */

.pathway-volume-calculator .pvc-categories-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	/* Same automatic-minimum-size fix as .pvc-layout below — without
	   it the horizontally-scrolling tab row pushes this wider than
	   its container instead of scrolling within it. */
	min-width: 0;
}

.pathway-volume-calculator .pvc-scroll-arrow {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--pvc-navy);
	border-radius: var(--pvc-radius-sm);
	background: var(--pvc-surface);
	color: var(--pvc-navy);
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pathway-volume-calculator .pvc-scroll-arrow:hover {
	background: var(--pvc-navy);
	border-color: var(--pvc-navy);
	color: #fff;
}

.pathway-volume-calculator .pvc-mobile-category-label {
	/* Visually hidden but still announced by screen readers — see
	   .screen-reader-text below (applied alongside this class in the
	   template). */
}

.pathway-volume-calculator .pvc-mobile-category-select {
	flex: 1;
	display: block;
	width: 100%;
	padding: 10px 34px 10px 14px;
	border: 1px solid var(--pvc-navy);
	border-radius: var(--pvc-radius-sm);
	background-color: var(--pvc-surface);
	color: var(--pvc-navy);
	font-weight: 600;
	min-height: 46px;
}

.pathway-volume-calculator .pvc-mobile-category-select:focus {
	border-color: var(--pvc-gold);
	box-shadow: 0 0 0 3px var(--pvc-gold-ring);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.pathway-volume-calculator .pvc-categories {
	display: none;
}

.pathway-volume-calculator .pvc-category-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	background: var(--pvc-surface);
	border: 1px solid var(--pvc-navy-18);
	border-radius: var(--pvc-radius-sm);
	color: var(--pvc-navy);
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	min-height: 44px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pathway-volume-calculator .pvc-category-btn:hover {
	background: var(--pvc-gold-soft);
	border-color: var(--pvc-gold);
	color: var(--pvc-navy);
}

/*
 * Active category tab. `is-active` is toggled by calculator.js's
 * switchCategory() on every tab change (click, keyboard arrows and
 * the mobile <select>), so this follows the selection automatically —
 * nothing here is tied to a specific category.
 *
 * Brand spec: gold fill (#F1B01D), white label, gold border.
 */
.pathway-volume-calculator .pvc-category-btn.is-active,
.pathway-volume-calculator .pvc-category-btn[aria-selected="true"] {
	background: var(--pvc-gold);
	border-color: var(--pvc-gold);
	color: #fff;
	font-weight: 700;
}

.pathway-volume-calculator .pvc-category-btn.is-active:hover,
.pathway-volume-calculator .pvc-category-btn[aria-selected="true"]:hover {
	background: var(--pvc-gold);
	border-color: var(--pvc-gold-dark);
	color: #fff;
}

.pathway-volume-calculator .pvc-category-icon {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------- */
/* Layout: items + selected-items side panel                         */
/* ---------------------------------------------------------------- */

.pathway-volume-calculator .pvc-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-bottom: 24px;
	/* A grid track's default automatic minimum size is content-based,
	   not 0 — without this, a wide inner element can grow the track
	   (and the page with it) instead of wrapping/scrolling within it. */
	min-width: 0;
}

.pathway-volume-calculator .pvc-items-pane {
	min-width: 0;
}

.pathway-volume-calculator .pvc-items-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
	/* Equal-height cards across each row. */
	align-items: stretch;
}

.pathway-volume-calculator .pvc-category-empty {
	color: var(--pvc-text-light);
	grid-column: 1 / -1;
}

.pathway-volume-calculator .pvc-item-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	text-align: center;
	background: var(--pvc-surface);
	border: 1px solid var(--pvc-navy);
	border-radius: var(--pvc-radius-sm);
	padding: 20px 16px;
	min-height: 132px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pathway-volume-calculator .pvc-item-card:hover {
	border-color: var(--pvc-gold);
	box-shadow: 0 4px 12px rgba(0, 19, 43, 0.08);
	transform: translateY(-1px);
}

/* Card with a quantity selected — gold accent marks the selection. */
.pathway-volume-calculator .pvc-item-card.has-qty {
	border-color: var(--pvc-gold);
	background: var(--pvc-gold-soft);
	box-shadow: 0 0 0 1px var(--pvc-gold);
}

.pathway-volume-calculator .pvc-item-name {
	/* Grows to fill the space above the stepper so the quantity
	   controls line up across a row whether the name wraps or not. */
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2px 0;
	font-weight: 700;
	font-size: 0.95em;
	line-height: 1.35;
	color: var(--pvc-navy);
}

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

.pathway-volume-calculator .pvc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 16px;
	border-radius: var(--pvc-radius-sm);
	border: 1px solid transparent;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.pathway-volume-calculator .pvc-btn-submit {
	width: 100%;
	min-height: 52px;
	background: var(--pvc-navy);
	border-color: var(--pvc-navy);
	color: #fff;
	font-size: 1.05em;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-top: 8px;
}

/*
 * Gold on hover / focus / press — always with navy text, so the
 * label stays fully readable in the gold state (including while the
 * button is held down).
 */
.pathway-volume-calculator .pvc-btn-submit:hover,
.pathway-volume-calculator .pvc-btn-submit:focus-visible,
.pathway-volume-calculator .pvc-btn-submit:active {
	background: var(--pvc-gold);
	border-color: var(--pvc-gold);
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-btn-submit[disabled] {
	background: var(--pvc-navy);
	border-color: var(--pvc-navy);
	color: #fff;
	opacity: 0.55;
	cursor: not-allowed;
}

.pathway-volume-calculator .pvc-stepper {
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: fit-content;
	margin: 0 auto;
	border: 1px solid var(--pvc-navy);
	border-radius: var(--pvc-radius-sm);
	background: var(--pvc-surface);
	overflow: hidden;
}

.pathway-volume-calculator .pvc-stepper-btn {
	width: 34px;
	height: 34px;
	border: none;
	background: var(--pvc-surface);
	color: var(--pvc-navy);
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pathway-volume-calculator .pvc-stepper-btn:hover,
.pathway-volume-calculator .pvc-stepper-btn:active {
	background: var(--pvc-navy);
	color: #fff;
}

.pathway-volume-calculator .pvc-stepper-qty {
	min-width: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pvc-surface);
	border-left: 1px solid var(--pvc-navy);
	border-right: 1px solid var(--pvc-navy);
	color: var(--pvc-navy);
	font-weight: 700;
}

/* ---------------------------------------------------------------- */
/* Summary panel                                                     */
/* ---------------------------------------------------------------- */

.pathway-volume-calculator .pvc-summary {
	background: var(--pvc-surface);
	border: 1px solid var(--pvc-navy);
	border-radius: var(--pvc-radius);
	box-shadow: var(--pvc-shadow);
	padding: 22px 24px;
}

.pathway-volume-calculator .pvc-selected-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pathway-volume-calculator .pvc-selected-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pvc-navy-10);
}

.pathway-volume-calculator .pvc-selected-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.pathway-volume-calculator .pvc-selected-name {
	font-weight: 600;
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-selected-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--pvc-text-light);
	font-size: 0.9em;
}

.pathway-volume-calculator .pvc-selected-remove {
	background: none;
	border: none;
	color: var(--pvc-text-light);
	cursor: pointer;
	font-size: 0.85em;
	text-decoration: underline;
	min-height: 32px;
	padding: 0 4px;
	transition: color 0.15s ease;
}

.pathway-volume-calculator .pvc-selected-remove:hover {
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-selected-empty {
	color: var(--pvc-text-light);
	font-style: italic;
}

.pathway-volume-calculator .pvc-total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 2px solid var(--pvc-navy);
}

.pathway-volume-calculator .pvc-total-label {
	font-weight: 700;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pvc-text-light);
}

.pathway-volume-calculator .pvc-total-value {
	font-size: 1.6em;
	font-weight: 700;
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-vehicle-panel {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: var(--pvc-radius-sm);
	background: var(--pvc-navy-soft);
	border: 1px solid var(--pvc-navy-18);
	border-left: 3px solid var(--pvc-gold);
}

.pathway-volume-calculator .pvc-vehicle-heading {
	margin: 0 0 4px;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pvc-text-light);
}

.pathway-volume-calculator .pvc-vehicle-name {
	margin: 0 0 2px;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-vehicle-note {
	margin: 0;
	font-size: 0.82em;
	color: var(--pvc-text-light);
}

.pathway-volume-calculator .pvc-vehicle-exceeded {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: var(--pvc-radius-sm);
	background: var(--pvc-gold-soft);
	border: 1px solid var(--pvc-gold);
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-vehicle-exceeded p {
	margin: 0;
}

/* ---------------------------------------------------------------- */
/* Lead form                                                          */
/* ---------------------------------------------------------------- */

.pathway-volume-calculator .pvc-form-section {
	background: var(--pvc-surface);
	border: 1px solid var(--pvc-navy);
	border-radius: var(--pvc-radius);
	box-shadow: var(--pvc-shadow);
	padding: 26px;
}

.pathway-volume-calculator .pvc-form-title {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--pvc-navy-10);
	font-size: 1.2em;
	font-weight: 700;
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-form-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 20px;
}

.pathway-volume-calculator .pvc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pathway-volume-calculator .pvc-field label {
	font-weight: 600;
	font-size: 0.88em;
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-required {
	color: var(--pvc-gold-dark);
}

.pathway-volume-calculator .pvc-field input,
.pathway-volume-calculator .pvc-field select {
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid var(--pvc-navy);
	border-radius: var(--pvc-radius-sm);
	background-color: var(--pvc-surface);
	color: var(--pvc-navy);
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pathway-volume-calculator .pvc-field select {
	/* Extra right padding so text never sits under the dropdown arrow icon. */
	padding-right: 34px;
}

/* Gold focus state. */
.pathway-volume-calculator .pvc-field input:focus,
.pathway-volume-calculator .pvc-field select:focus {
	border-color: var(--pvc-gold);
	box-shadow: 0 0 0 3px var(--pvc-gold-ring);
	/* Transparent (not removed) so Windows High Contrast still shows a ring. */
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.pathway-volume-calculator .pvc-field input[aria-invalid="true"],
.pathway-volume-calculator .pvc-field select[aria-invalid="true"] {
	border-color: var(--pvc-danger);
}

.pathway-volume-calculator .pvc-field input[aria-invalid="true"]:focus,
.pathway-volume-calculator .pvc-field select[aria-invalid="true"]:focus {
	border-color: var(--pvc-gold);
}

.pathway-volume-calculator .pvc-field-error {
	color: var(--pvc-danger);
	font-size: 0.82em;
	min-height: 1em;
}

.pathway-volume-calculator .pvc-hp-field {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pathway-volume-calculator .pvc-form-messages {
	margin-top: 16px;
	font-size: 0.92em;
	color: var(--pvc-navy);
}

.pathway-volume-calculator .pvc-form-messages:empty {
	display: none;
}

.pathway-volume-calculator .pvc-form-messages.is-error {
	color: var(--pvc-danger);
}

.pathway-volume-calculator .pvc-success-panel {
	background: var(--pvc-navy-soft);
	border: 1px solid var(--pvc-navy-18);
	border-left: 3px solid var(--pvc-gold);
	border-radius: var(--pvc-radius);
	padding: 22px;
	color: var(--pvc-navy);
	white-space: pre-line;
}

/* ---------------------------------------------------------------- */
/* Screen-reader only helper                                         */
/* ---------------------------------------------------------------- */

.pathway-volume-calculator .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ---------------------------------------------------------------- */
/* Motion preference                                                 */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pathway-volume-calculator * {
		transition-duration: 0.01ms !important;
	}

	.pathway-volume-calculator .pvc-item-card:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------- */
/* Responsive breakpoints                                            */
/*                                                                    */
/* Every structural breakpoint below is a container query keyed to   */
/* "pvc" (declared on .pathway-volume-calculator above) — they       */
/* respond to the calculator's own rendered width, not the browser   */
/* viewport, so the layout is correct however narrow or wide a       */
/* column/widget-area it's embedded in. An element can't query the   */
/* container it itself establishes, so the two purely-cosmetic       */
/* padding bumps below are the one thing still gated on the regular  */
/* viewport — harmless, since they never change the layout mode.     */
/* Browsers without container query support simply keep this         */
/* calculator in its single-column, mobile-first base layout, which  */
/* is always fully usable — never a broken state.                    */
/* ---------------------------------------------------------------- */

@media (min-width: 768px) {
	.pathway-volume-calculator {
		padding: 32px;
	}
}

@media (min-width: 1440px) {
	.pathway-volume-calculator {
		padding: 40px;
	}
}

/* ≥480px: slightly roomier item grid */
@container pvc (min-width: 480px) {
	.pathway-volume-calculator .pvc-items-grid {
		grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
	}
}

/*
 * Horizontal tabs + scroll arrows instead of the mobile select, from
 * (almost) any width — the reference design uses tabs, not a
 * dropdown, and since the tab row already scrolls horizontally with
 * the arrows there's no real width it needs to "wait" for.
 *
 * Container queries measure the query container's CONTENT-BOX size
 * (padding excluded), even with box-sizing: border-box — so this
 * 200px is compared against .pathway-volume-calculator's inner width
 * after its own ~20-40px of padding, not its full rendered width.
 * That keeps tabs showing in effectively every real embedding
 * (verified from ~295px content width upward); it's a floor against
 * a genuinely unusable embed width, not a real mobile/desktop split.
 */
@container pvc (min-width: 200px) {
	.pathway-volume-calculator .pvc-mobile-category-label,
	.pathway-volume-calculator .pvc-mobile-category-select {
		display: none;
	}

	.pathway-volume-calculator .pvc-scroll-arrow {
		display: inline-flex;
	}

	.pathway-volume-calculator .pvc-categories {
		display: flex;
		gap: 10px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
		padding: 2px;
	}
}

/* ≥1024px: items grid + selected-items side panel, sticky while scrolling */
@container pvc (min-width: 1024px) {
	.pathway-volume-calculator .pvc-layout {
		grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr);
		align-items: start;
		gap: 28px;
	}

	.pathway-volume-calculator .pvc-summary {
		position: sticky;
		top: 20px;
	}
}

/* ≥1440px: a little extra breathing room on large desktops */
@container pvc (min-width: 1440px) {
	.pathway-volume-calculator .pvc-items-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	.pathway-volume-calculator .pvc-layout {
		grid-template-columns: minmax(0, 3fr) minmax(320px, 380px);
	}
}

/* Below 768px: single-column lead form (grid default already is 2-col; override here) */
@container pvc (max-width: 767.98px) {
	.pathway-volume-calculator .pvc-form-grid {
		grid-template-columns: 1fr;
	}

	.pathway-volume-calculator .pvc-form-section {
		padding: 20px;
	}

	.pathway-volume-calculator .pvc-summary {
		padding: 18px;
	}

	.pathway-volume-calculator .pvc-selected-row {
		flex-wrap: wrap;
	}
}

/* Very narrow embeds / small phones: keep the item grid usable. */
@container pvc (max-width: 400px) {
	.pathway-volume-calculator .pvc-items-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
		gap: 12px;
	}

	.pathway-volume-calculator .pvc-item-card {
		padding: 16px 12px;
	}
}