/* Surgical Instruments Inquiry Form - front-end styles
 * Everything is scoped to .swif-wrapper. A control reset plus defensive
 * declarations keep the form looking identical under any theme.
 * No external fonts or assets are used. */

.swif-wrapper {
	--swif-accent: #2563eb;

	/* Light palette (default) */
	--swif-bg: #ffffff;
	--swif-fg: #0f172a;
	--swif-muted: #64748b;
	--swif-address: #475569;
	--swif-border: #e2e8f0;
	--swif-field-bg: #ffffff;
	--swif-field-fg: #0f172a;
	--swif-field-border: #cbd5e1;
	--swif-field-border-hover: #94a3b8;
	--swif-placeholder: #5b6b7f;
	--swif-card-bg: #ffffff;
	--swif-card-border: #e2e8f0;
	--swif-card-border-hover: #94a3b8;
	--swif-card-img-bg: #f1f5f9;
	--swif-noimg-fg: #cbd5e1;
	--swif-upload-bg: #f8fafc;
	--swif-chip-bg: #f1f5f9;
	--swif-chip-fg: #475569;
	--swif-option-bg: #ffffff;
	--swif-shadow: 0 12px 34px rgba(15, 23, 42, 0.10);
	--swif-focus-ring: rgba(37, 99, 235, 0.20);
	--swif-file-fg: #15803d;
	--swif-success-bg: #dcfce7;
	--swif-success-fg: #15803d;
	--swif-error-bg: #fee2e2;
	--swif-error-fg: #b91c1c;

	color-scheme: light;
	background: var(--swif-bg);
	color: var(--swif-fg);
	padding: 30px;
	border-radius: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
	box-shadow: var(--swif-shadow);
	text-align: left;
}

/* ---- Dark palette ---- */
.swif-dark-vars,
.swif-wrapper.swif-theme-dark {
	--swif-bg: #0f172a;
	--swif-fg: #f1f5f9;
	--swif-muted: #94a3b8;
	--swif-address: #cbd5e1;
	--swif-border: #1e293b;
	--swif-field-bg: #1e293b;
	--swif-field-fg: #f1f5f9;
	--swif-field-border: #334155;
	--swif-field-border-hover: #475569;
	--swif-placeholder: #8496ac;
	--swif-card-bg: #1e293b;
	--swif-card-border: #334155;
	--swif-card-border-hover: #475569;
	--swif-card-img-bg: #0b1220;
	--swif-noimg-fg: #475569;
	--swif-upload-bg: #172033;
	--swif-chip-bg: #1e293b;
	--swif-chip-fg: #cbd5e1;
	--swif-option-bg: #1e293b;
	--swif-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
	--swif-focus-ring: rgba(37, 99, 235, 0.35);
	--swif-file-fg: #4ade80;
	--swif-success-bg: #0d3320;
	--swif-success-fg: #4ade80;
	--swif-error-bg: #3f1212;
	--swif-error-fg: #f87171;
}

.swif-wrapper.swif-theme-dark {
	color-scheme: dark;
}

/* ---- Auto: follow the visitor's device ---- */
.swif-wrapper.swif-theme-auto {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	.swif-wrapper.swif-theme-auto {
		--swif-bg: #0f172a;
		--swif-fg: #f1f5f9;
		--swif-muted: #94a3b8;
		--swif-address: #cbd5e1;
		--swif-border: #1e293b;
		--swif-field-bg: #1e293b;
		--swif-field-fg: #f1f5f9;
		--swif-field-border: #334155;
		--swif-field-border-hover: #475569;
		--swif-placeholder: #8496ac;
		--swif-card-bg: #1e293b;
		--swif-card-border: #334155;
		--swif-card-border-hover: #475569;
		--swif-card-img-bg: #0b1220;
		--swif-noimg-fg: #475569;
		--swif-upload-bg: #172033;
		--swif-chip-bg: #1e293b;
		--swif-chip-fg: #cbd5e1;
		--swif-option-bg: #1e293b;
		--swif-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
		--swif-focus-ring: rgba(37, 99, 235, 0.35);
		--swif-file-fg: #4ade80;
		--swif-success-bg: #0d3320;
		--swif-success-fg: #4ade80;
		--swif-error-bg: #3f1212;
		--swif-error-fg: #f87171;
	}
}

/* ---- Reset (theme isolation) ----
 * The active theme styles inputs/selects/buttons too. These rules re-assert the
 * box model and typography with !important so a form control looks the same
 * regardless of theme. */
.swif-wrapper *,
.swif-wrapper *::before,
.swif-wrapper *::after {
	box-sizing: border-box;
}

.swif-wrapper .swif-input,
.swif-wrapper .swif-select,
.swif-wrapper .swif-textarea,
.swif-wrapper .swif-check-btn,
.swif-wrapper .swif-btn {
	box-sizing: border-box !important;
	margin: 0 !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	text-transform: none;
	min-width: 0 !important;
	max-width: 100% !important;
	float: none !important;
	outline-offset: 0;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	/* Some themes hide every native <select> by default ( visibility:hidden,
	   not display:none ) and only reveal it via a one-time "custom dropdown"
	   enhancer script that runs once at page load. A <select> we add later
	   ( "+ Add a New Size", a per-product spec field, etc. ) never gets
	   touched by that script, so without this override it would silently
	   stay invisible forever - present in the layout ( taking up its space )
	   but blank, which is exactly what "the new line has no size dropdown"
	   looks like. */
	visibility: visible !important;
}

.swif-wrapper button.swif-btn,
.swif-wrapper button.swif-check-btn {
	width: auto;
	text-transform: uppercase !important;
	height: auto !important;
}

.swif-wrapper .swif-btn {
	width: 100% !important;
}

/* Off-screen honeypot - must not be display:none */
.swif-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---- Extra theme / page-builder isolation guards ----
 * These target the elements a theme or builder is most likely to restyle
 * globally (checkboxes, list markers, inherited fonts). Everything stays
 * scoped to .swif-wrapper so nothing leaks out to the host page. */

.swif-wrapper {
	position: relative;
	isolation: isolate; /* own stacking context - themed chrome can't slice through */
}

/* Keep our font + text rendering on every element, even under theme rules like
   "p { font-family: Georgia !important }". font-family has no layout impact. */
.swif-wrapper p,
.swif-wrapper span,
.swif-wrapper div,
.swif-wrapper a,
.swif-wrapper strong,
.swif-wrapper small,
.swif-wrapper label,
.swif-wrapper li,
.swif-wrapper h2,
.swif-wrapper h3,
.swif-wrapper button,
.swif-wrapper input,
.swif-wrapper select,
.swif-wrapper textarea {
	font-family: inherit !important;
	word-spacing: normal !important;
}

/* Header + secondary text carry no !important size of their own, so pin them
   here against theme rules like "p { font-size: 20px !important }". */
.swif-wrapper .swif-header h2 { font-size: 25px !important; }
.swif-wrapper .swif-header p { font-size: 14px !important; }
.swif-wrapper .swif-header .swif-address { font-size: 13px !important; }
.swif-wrapper .swif-spec-hint,
.swif-wrapper .swif-qty-recap,
.swif-wrapper .swif-file-item,
.swif-wrapper .swif-combo-opt,
.swif-wrapper .swif-combo-empty { font-size: 13px !important; }
.swif-wrapper .swif-qty-grand { font-size: 14px !important; }
.swif-wrapper .swif-qty-summary-title,
.swif-wrapper .swif-cat-count,
.swif-wrapper .swif-cq-size-label,
.swif-wrapper .swif-cq-sub,
.swif-wrapper .swif-cq-specs-title { font-size: 11px !important; }
.swif-wrapper .swif-response-msg { font-size: 14px !important; }

/* Native checkbox / radio rendering. Themes and builders (Astra, Kadence,
   GeneratePress, Elementor, …) frequently replace these globally, which would
   otherwise hide or distort the shipping options and the "email me a copy" box. */
.swif-wrapper input[type="checkbox"],
.swif-wrapper input[type="radio"] {
	-webkit-appearance: checkbox !important;
	-moz-appearance: checkbox !important;
	appearance: auto !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 0 !important;
	max-width: 16px !important;
	max-height: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	inset: auto !important;
	opacity: 1 !important;
	clip: auto !important;
	clip-path: none !important;
	transform: none !important;
	pointer-events: auto !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	flex: 0 0 auto;
	vertical-align: middle;
	accent-color: var(--swif-accent);
}

.swif-wrapper input[type="radio"] {
	-webkit-appearance: radio !important;
	-moz-appearance: radio !important;
	border-radius: 50% !important;
}

/* Neutralise theme list styling on our own lists. */
.swif-wrapper .swif-file-list,
.swif-wrapper .swif-qty-recap {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.swif-wrapper .swif-file-list > li,
.swif-wrapper .swif-qty-recap > li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
	background: none !important;
	overflow-wrap: anywhere;
}

.swif-wrapper .swif-file-list > li::before,
.swif-wrapper .swif-file-list > li::after,
.swif-wrapper .swif-qty-recap > li::before,
.swif-wrapper .swif-qty-recap > li::after {
	content: none !important;
}

/* A stray theme <hr> or clearfix inside a builder wrapper shouldn't show. */
.swif-wrapper hr {
	display: none !important;
}

/* ---- Header ---- */
.swif-header {
	text-align: center;
	margin-bottom: 30px;
	border-bottom: 1px solid var(--swif-border);
	padding-bottom: 20px;
}

.swif-header h2 {
	color: var(--swif-fg);
	font-size: 25px;
	font-weight: 800;
	text-transform: uppercase;
	margin: 0 0 5px;
	letter-spacing: 0.5px;
	line-height: 1.2;
}

.swif-header p {
	color: var(--swif-muted);
	font-size: 14px;
	margin: 0;
}

.swif-header .swif-address {
	color: var(--swif-address);
	font-size: 13px;
	line-height: 1.5;
	margin-top: 8px;
}

.swif-section {
	margin-bottom: 34px;
}

.swif-section:last-of-type {
	margin-bottom: 0;
}

/* Section headings are <h2> for SEO / a11y - re-assert our look over the theme. */
.swif-wrapper .swif-section-title {
	color: var(--swif-accent) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.swif-wrapper .swif-section-title span {
	color: var(--swif-fg);
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
}

/* Category name is <h3> - neutralise theme heading styles. */
.swif-wrapper .swif-cat-heading {
	margin: 0 !important;
	padding: 0 !important;
	font: inherit !important;
	border: 0 !important;
}

.swif-wrapper .swif-cat-name {
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.2px !important;
	text-transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit;
}

/* ---- Inputs ---- */
.swif-wrapper .swif-input,
.swif-wrapper .swif-select,
.swif-wrapper .swif-textarea {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 46px !important;
	background-color: var(--swif-field-bg) !important;
	background-clip: padding-box !important;
	border: 1px solid var(--swif-field-border) !important;
	color: var(--swif-field-fg) !important;
	margin: 0 !important;
	padding: 11px 14px !important;
	border-radius: 6px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-shadow: none !important;
}

.swif-wrapper .swif-textarea {
	min-height: 110px !important;
	resize: vertical;
}

/* Dropdown chevron (right side) */
.swif-wrapper .swif-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
	padding-right: 42px !important;
	cursor: pointer;
}

.swif-wrapper .swif-select::-ms-expand {
	display: none;
}

.swif-wrapper .swif-input:hover,
.swif-wrapper .swif-select:hover,
.swif-wrapper .swif-textarea:hover {
	border-color: var(--swif-field-border-hover) !important;
}

.swif-wrapper .swif-input:focus,
.swif-wrapper .swif-select:focus,
.swif-wrapper .swif-textarea:focus {
	border-color: var(--swif-accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px var(--swif-focus-ring) !important;
}

.swif-wrapper .swif-input::placeholder,
.swif-wrapper .swif-textarea::placeholder {
	color: var(--swif-placeholder) !important;
	opacity: 1 !important;
}

.swif-custom-write {
	margin-top: 8px;
}

.swif-select option {
	background-color: var(--swif-option-bg);
	color: var(--swif-field-fg);
}

.swif-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 18px;
	align-items: start;
}

@media (max-width: 900px) {
	.swif-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.swif-grid {
		grid-template-columns: 1fr;
	}
}

/* Field label (contact section + date picker) */
.swif-wrapper .swif-field-label {
	display: flex !important;
	flex-direction: column !important;
	gap: 7px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-weight: 400 !important;
	color: var(--swif-fg);
}

.swif-wrapper .swif-label-text {
	display: block !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	color: var(--swif-muted) !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.swif-req {
	color: var(--swif-accent) !important;
	font-weight: 700 !important;
}

.swif-optional {
	color: var(--swif-placeholder) !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.swif-input[type="date"] {
	min-height: 46px;
}

/* ---- Product list ( one row per product, not a card grid ) ----
   Unselected: a compact single-line row ( thumbnail + name ) - keeps a
   catalogue of hundreds of products scannable. Selected: the row opens
   downward - a bigger photo + name on top, its size/color/quantity line(s)
   directly below that, then its own specifications underneath - one simple
   column instead of a side-by-side grid, so nothing has to squeeze. */
.swif-products-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

.swif-product-card {
	background: var(--swif-card-bg);
	border: 1px solid var(--swif-card-border);
	border-radius: 10px;
	text-align: left;
	user-select: none;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
	position: relative;
	/* Clips corner-hugging elements ( the tick badge, the "Add to Inquiry"
	   footer bar's bottom-rounded corners ) to the card's own rounded shape. */
	overflow: hidden;
}

/* Photo on top, name below - not side by side any more. Margin-right gives
   the size/units/color row its own breathing room instead of crowding right
   up against the photo column. */
.swif-card-hit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 120px;
	margin-right: 8px;
	border-radius: inherit;
	flex: 0 0 auto;
}

/* Confirmed ( "Add to Inquiry" clicked while this product had a real
   quantity - see the click handler in buildCardQty() ): a soft tint + the
   tick below both read off one custom property, so the card border and the
   tick always match whatever color the "Add to Inquiry" / "Update Inquiry"
   button itself is showing - green once saved, amber the moment something
   is edited again ( .needs-update, toggled alongside the button's own class
   in refreshQty() ). Typing a quantity alone is not enough - .active ( see
   refreshQty() ) tracks that for submission purposes, but the visual
   confirmation waits for the click. */
.swif-product-card.confirmed {
	--swif-confirm-color: var(--swif-success-fg, #16a34a);
	border-color: var(--swif-confirm-color);
	background: color-mix(in srgb, var(--swif-confirm-color) 5%, var(--swif-card-bg));
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.swif-product-card.confirmed.needs-update {
	--swif-confirm-color: #d97706;
}

/* The tick only ever appears once "Add to Inquiry" has been clicked - never
   just from typing a quantity. */
.swif-product-card.confirmed::after {
	content: "\2713";
	position: absolute;
	top: 12px;
	right: 12px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 11px;
	text-align: center;
	border-radius: 50%;
	background: var(--swif-confirm-color);
	color: #fff;
	z-index: 1;
}

/* Clear / remove-from-inquiry - top-right corner too, sitting just to the
   left of the tick ( same row, same size, small gap between ), so both read
   as one "included in the inquiry" cluster. Only shown once confirmed;
   resets the product back out rather than just hiding the row, which stays
   for every product. A reddish tint ( not just on hover ) signals "this
   deletes / removes" at a glance rather than reading as a neutral icon. */
.swif-wrapper .swif-card-clear {
	display: none !important;
}

.swif-wrapper .swif-product-card.confirmed .swif-card-clear {
	display: flex !important;
	position: absolute;
	top: 12px;
	right: 38px;
	width: 20px !important;
	height: 20px !important;
	min-height: 0 !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--swif-error-bg, #fee2e2) !important;
	background-image: none !important;
	border: 1px solid var(--swif-error-fg) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	color: var(--swif-error-fg) !important;
	cursor: pointer;
	z-index: 1;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.swif-wrapper .swif-card-clear svg {
	width: 12px;
	height: 12px;
}

.swif-wrapper .swif-card-clear:hover {
	color: #fff !important;
	border-color: var(--swif-error-fg) !important;
	background: var(--swif-error-fg) !important;
}

/* Armed - first click primes it ( solid red, brief pulse ), a second click
   within the timeout actually clears; letting it sit disarms automatically.
   Stops one stray click from silently wiping a filled-in product. */
.swif-wrapper .swif-card-clear.is-confirming {
	color: #fff !important;
	border-color: var(--swif-error-fg) !important;
	background: var(--swif-error-fg) !important;
	animation: swif-clear-pulse 0.9s ease-in-out infinite;
}

@keyframes swif-clear-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
	.swif-wrapper .swif-card-clear.is-confirming {
		animation: none;
	}
}

.swif-card-img {
	flex: 0 0 auto;
	width: 120px;
	height: 120px;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid var(--swif-card-border);
	border-radius: 6px;
	padding: 6px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swif-card-img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;              /* never upscale a small photo (keeps it sharp) */
	height: auto;             /* never squash a non-square photo */
	object-fit: contain;
	display: block;
}

.swif-card-noimg {
	color: var(--swif-noimg-fg);
}

.swif-card-noimg svg {
	width: 44px;
	height: 44px;
	opacity: 0.5;
}

/* Below the photo now, not beside it - wraps onto a second line instead of
   truncating, and is centered under the ( narrow, 100px ) image column. */
.swif-card-hit span {
	width: 100%;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--swif-fg);
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	overflow-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Every product shows its size/color/quantity row right away - no click
   needed to reveal it. Photo, size, quantity and color sit in one row - the
   "well known" shape of a size/quantity order line - with anything past the
   first line ( "add another line", "Add to Inquiry", specifications )
   wrapping to its own full-width row below. `display: contents` on
   `.swif-card-qty` and `.swif-cq-inner` unwraps them so their children
   become flex items of `.swif-product-card` directly, sitting beside
   `.swif-card-hit`. `.active` ( a real quantity entered - see refreshQty() )
   only changes the tint / left accent bar / checkmark above, never this
   layout. */
.swif-product-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
	row-gap: 8px;
	padding: 14px 16px 16px;
}

.swif-card-qty {
	display: contents;
}

.swif-cq-inner {
	display: contents;
}

.swif-cq-single,
.swif-cq-rows {
	flex: 1 1 260px;
}


/* A merged footer bar, not just another row: `order` moves it after
   .swif-cq-specs regardless of DOM position ( it's built before the specs
   are, so without this it would render above "Advanced Options" instead of
   below everything ). Deliberately flex: 0 0 auto, not flex-basis:100% - the
   button's own oversized `width` ( canceling the card's padding, see below )
   is what makes it full-bleed; a flex-basis here would win over that width
   for sizing and shrink it back to the card's inset content width. */
.swif-cq-add-to-inquiry {
	flex: 0 0 auto;
	order: 10;
}

/* Sits just above the footer bar ( order: 9, one below the button's 10 ) -
   spells out what the amber color means so a customer doesn't have to infer
   it from color alone. */
.swif-cq-update-hint {
	flex-basis: 100%;
	order: 9;
}

.swif-wrapper .swif-cq-update-hint:not([hidden]) {
	display: block !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
	color: #d97706 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-align: center;
}

/* No margin/padding/border of its own - the "Advanced Options" toggle inside
   already has its own top divider + padding ( see .swif-cq-advanced-toggle ),
   so adding more here just doubled up the space above it for no reason. */
.swif-cq-specs {
	flex-basis: 100%;
}

/* ---- Category accordions (section 2) - one continuous box ---- */
.swif-accordion {
	margin-bottom: 12px;
	border: 1px solid var(--swif-card-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--swif-chip-bg);
}

.swif-cat {
	background: transparent;
	border-bottom: 1px solid var(--swif-border);
	transition: background 0.2s;
}

.swif-accordion > .swif-cat:last-child {
	border-bottom: 0;
}

.swif-cat.is-open {
	background: var(--swif-chip-bg);
}

.swif-wrapper .swif-cat-toggle {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100% !important;
	margin: 0 !important;
	padding: 15px 18px !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.2px !important;
	text-transform: none !important;
	color: var(--swif-fg) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: background 0.2s;
}

.swif-wrapper .swif-cat-toggle:hover {
	background: rgba(148, 163, 184, 0.14) !important;
}

.swif-cat.is-open > .swif-cat-toggle {
	color: var(--swif-accent) !important;
}

.swif-cat-name {
	flex: 1 1 auto;
	min-width: 0;
}

.swif-cat-meta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Count circle - shows the category product total, or (highlighted) the
   number of products the customer has selected from it. */
.swif-cat-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: var(--swif-chip-bg);
	color: var(--swif-chip-fg);
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s, transform 0.15s;
}

.swif-cat-count.has-selected {
	background: var(--swif-accent);
	color: #fff;
	transform: scale(1.08);
}

.swif-cat-chevron {
	display: inline-flex;
	color: var(--swif-muted);
	transition: transform 0.25s ease;
}

.swif-cat-chevron svg {
	width: 16px;
	height: 16px;
}

.swif-cat.is-open .swif-cat-chevron {
	transform: rotate(180deg);
	color: var(--swif-accent);
}

/* Expand / collapse via animatable grid rows - no JS height measurement */
.swif-cat-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}

.swif-cat.is-open .swif-cat-panel {
	grid-template-rows: 1fr;
}

.swif-cat-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.swif-cat.is-open .swif-cat-panel-inner {
	padding: 12px 16px 18px;
	background: var(--swif-bg);
	border-top: 1px solid var(--swif-border);
}

@media (prefers-reduced-motion: reduce) {
	.swif-cat-panel,
	.swif-cat-chevron {
		transition: none;
	}
}

.swif-products-section .swif-products-grid {
	gap: 6px;
	margin-bottom: 0;
}

/* ---- Layout: "flat with headings" ---- */
.swif-cat-static {
	border: none;
	background: transparent;
	box-shadow: none;
	margin-bottom: 18px;
}

.swif-cat-static-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 2px 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--swif-border);
	font-size: 13px;
	font-weight: 700;
	color: var(--swif-fg);
}

/* ---- Layout: "one flat grid" - extra breathing room ---- */
.swif-products-section[data-layout="flat"] .swif-products-grid {
	margin-bottom: 4px;
}

/* ---- General specifications ( apply once to the whole order ) ---- */
.swif-spec-hint {
	color: var(--swif-muted);
	font-size: 13px;
	margin: 0 0 4px;
	padding: 12px 14px;
	background: var(--swif-chip-bg);
	border: 1px dashed var(--swif-field-border);
	border-radius: 8px;
}

.swif-spec-dynamic:empty {
	display: none;
}

/* An aggressive theme rule can beat the [hidden] attribute - re-assert it. */
.swif-wrapper [hidden] {
	display: none !important;
}

.swif-wrapper .swif-spec-other {
	margin-top: 8px;
}

/* ---- Per-product size & quantity: unwrapped into the card's own row - see
   the .swif-card-qty / .swif-cq-inner "display: contents" rules above ---- */
.swif-cq-single,
.swif-cq-rows,
.swif-cq-grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* size control and units box share one row */
.swif-cq-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 10px;
	gap: 10px;
}

/* Size ( or its label / custom-text stand-in ) and its quantity box, grouped
   so the row can only ever wrap between this group and the colors that
   follow - never split size away from its own quantity box, which is what
   made a wrapped line look broken/incomplete on a narrower theme. */
.swif-cq-size-units {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	min-width: 0;
	/* Not flex-grow:1 - the group's own children are already fixed-width, so
	   growing just stretched the box wider than its content and left a bare
	   gap before the colors that follow. Sized to content; still allowed to
	   shrink ( flex-shrink:1 ) if the row is genuinely too narrow. */
	flex: 0 1 auto;
}

.swif-cq-size-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--swif-fg);
	line-height: 1.2;
}

.swif-cq-size-label.is-qty {
	color: var(--swif-muted);
	font-weight: 600;
}

/* Fixed width ( not flex:1 1 auto ) so every line's size dropdown is the same
   size whether or not that row also has a remove "x" button - a flex-grow
   value here would let the first (non-removable) row stretch wider than the
   rest to fill the extra space the "x" takes up on other rows. */
.swif-wrapper .swif-cq-line .swif-cq-size {
	display: block !important;
	flex: 0 1 150px;
	width: 150px !important;
	min-width: 0 !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 9px 28px 9px 12px !important;
	background-size: 14px 14px !important;
	background-position: right 10px center !important;
	font-size: 13.5px !important;
	border-radius: 6px !important;
}

.swif-wrapper .swif-cq-line .swif-cq-units {
	display: inline-block !important;
	flex: 0 0 80px;
	width: 80px !important;
	max-width: 80px !important;
	min-height: 42px !important;
	text-align: center;
	padding: 9px 6px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
}

.swif-wrapper .swif-cq-rm {
	flex: 0 0 auto;
	width: auto !important;
	min-height: 0 !important;
	padding: 0 2px !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--swif-muted) !important;
	font: inherit !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.swif-cq-rm:hover {
	color: var(--swif-error-fg) !important;
}

.swif-wrapper .swif-cq-add {
	align-self: flex-start;
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--swif-accent) !important;
	font: inherit !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.swif-cq-add:hover {
	text-decoration: underline;
}

/* Top-right corner, just left of the clear icon's slot ( right: 38px, 20px
   wide ) - out of normal flow entirely ( not a flex item any more ) so it no
   longer adds a whole extra row's height to the card. Positioned the same
   whether or not the clear icon / tick are actually showing ( those only
   appear once confirmed; this shows any time there's a real quantity ), so
   it never collides with them. */
.swif-cq-sub {
	position: absolute;
	top: 12px;
	right: 78px;
	line-height: 20px;
	font-size: 11px;
	font-weight: 600;
	color: var(--swif-muted);
	white-space: nowrap;
	text-align: right;
	z-index: 1;
}

.swif-cq-sub strong {
	color: var(--swif-fg);
}

/* Confirm CTA - shown only once the customer has entered something for this
   product. A merged footer bar rather than an inset button: flush against
   the card's own left/right/bottom edges ( negative margins cancel the
   card's padding, `order: 10` above puts it after everything else including
   "Advanced Options" ), rounded only on the bottom to match the card's own
   corners there and flat on top since it's attached to the content above. */
.swif-wrapper .swif-cq-add-to-inquiry:not([hidden]) {
	display: block !important;
	width: calc(100% + 32px) !important;
	min-width: 0;
	min-height: 0 !important;
	margin: 10px -16px -16px !important;
	padding: 11px 16px !important;
	background: var(--swif-accent) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 0 10px 10px !important;
	box-shadow: none !important;
	color: #fff !important;
	font: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	text-align: center;
	letter-spacing: 0.2px;
	cursor: pointer;
	transition: background 0.15s;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.swif-wrapper .swif-cq-add-to-inquiry:hover {
	background: var(--swif-accent-hover, var(--swif-accent)) !important;
}

.swif-wrapper .swif-cq-add-to-inquiry:active {
	transform: scale(0.99);
}

/* Saved - stays this way ( not a temporary flash ) until something actually
   changes again. */
.swif-wrapper .swif-cq-add-to-inquiry.is-added {
	background: var(--swif-success-fg, #16a34a) !important;
}

/* The customer edited a confirmed product without re-clicking yet - a
   distinct color from both the default ( blue, "not confirmed" ) and saved
   ( green ) states so "you changed something, please confirm again" reads at
   a glance. */
.swif-wrapper .swif-cq-add-to-inquiry.needs-update {
	background: #d97706 !important;
}

/* ---- Per-line color swatches ---- */
.swif-cq-colors {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/* !important throughout: a swatch is a <button>, and without these a theme's
   own global button styling (width, min-height, padding, border) wins over a
   plain declaration - the same reason every other custom control in this file
   (.swif-btn, .swif-cq-rm, .swif-cq-add, …) is guarded the same way. Without
   this a swatch can render as a full-width rectangle instead of a small dot. */
.swif-wrapper .swif-swatch {
	display: inline-block !important;
	box-sizing: border-box !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 28px !important;
	max-height: 28px !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid var(--swif-card-bg) !important;
	border-radius: 50% !important;
	background-image: none !important;
	box-shadow: 0 0 0 1px var(--swif-card-border) !important;
	cursor: pointer;
	transition: transform 0.12s, box-shadow 0.12s;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.swif-wrapper .swif-swatch:hover {
	transform: scale(1.15);
	box-shadow: 0 0 0 1px var(--swif-card-border-hover) !important;
}

/* --swif-swatch-ring lets JS show the actual custom-picked color as the ring
   ( see commitPickedColor() in form.js ) - it has to go through a custom
   property, not a plain inline box-shadow, because that couldn't win against
   this rule's own !important ( needed to survive theme CSS ) no matter what
   JS set it to. Falls back to the normal accent color for named swatches. */
.swif-wrapper .swif-swatch.is-active {
	box-shadow: 0 0 0 2px var(--swif-swatch-ring, var(--swif-accent)) !important;
}

.swif-wrapper .swif-swatch.is-active:hover {
	transform: scale(1.15);
	box-shadow: 0 0 0 2px var(--swif-swatch-ring, var(--swif-accent)) !important;
}

.swif-wrapper .swif-swatch-other {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--swif-chip-bg) !important;
	color: var(--swif-muted) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
}

.swif-wrapper .swif-swatch-other:hover {
	color: var(--swif-fg) !important;
}

/* Once a custom color is actually picked, the circle itself fills with it
   ( --swif-swatch-fill, set from JS - see commitPickedColor() in form.js ) -
   the clearest possible confirmation that the pick registered, same as a
   named swatch's own fixed color. */
.swif-wrapper .swif-swatch-other.is-active {
	background: var(--swif-swatch-fill, var(--swif-chip-bg)) !important;
}

/* No preset colors on this product: a small labelled pill instead of a lone
   "+" circle, so it reads clearly as "add a color" rather than a stray icon. */
.swif-wrapper .swif-swatch-other-label {
	width: auto !important;
	max-width: none !important;
	height: 28px !important;
	max-height: none !important;
	padding: 0 10px !important;
	border-radius: 999px !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	border: 1px dashed var(--swif-field-border) !important;
	box-shadow: none !important;
}

.swif-wrapper .swif-swatch-other-label:hover {
	border-color: var(--swif-accent) !important;
	color: var(--swif-accent) !important;
}

.swif-wrapper .swif-swatch-other-label.is-active {
	border: 1px solid var(--swif-accent) !important;
	background: color-mix(in srgb, var(--swif-accent) 10%, var(--swif-chip-bg)) !important;
	color: var(--swif-accent) !important;
}

/* The native color input is never seen directly - it's opened via the "+"
   swatch button's colorPicker.click() call, so it's shrunk to nothing and
   parked out of the flow rather than display:none (which some browsers
   refuse to click programmatically). No pointer-events:none here - it isn't
   needed ( the button sits on top and is the only thing a real click can
   reach ) and risks a browser treating the input as non-interactive and
   refusing to open its native picker UI from .click(). */
.swif-wrapper .swif-cq-color-picker {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
}

/* size custom-text box - same fixed width as the size <select> it appears
   next to, so every line in the list stays the same size whether or not a
   custom size is being typed. The :not([hidden]) keeps this from
   out-specificity-ing the [hidden] rule above when the box is toggled off. */
.swif-wrapper .swif-cq-line .swif-cq-size-custom:not([hidden]) {
	display: block !important;
	flex: 0 1 150px;
	width: 150px !important;
	min-width: 0 !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 9px 12px !important;
	border-radius: 6px !important;
	font-size: 13.5px !important;
}

/* ---- Per-product specifications ( inside the size/color/quantity panel ) ---- */
/* Collapsed by default: most customers only need size/color/quantity, so the
   per-product specification fields stay out of the way behind this toggle. */
.swif-wrapper .swif-cq-advanced-toggle {
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 6px 0 !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-top: 1px dashed var(--swif-card-border) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: var(--swif-accent) !important;
	font: inherit !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.swif-cq-advanced-toggle::after {
	content: "  \25BE";
}

.swif-cq-advanced-toggle.is-open::after {
	content: "  \25B4";
}

.swif-cq-advanced-toggle:hover {
	text-decoration: underline;
}

.swif-cq-advanced-body {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 14px;
	margin-top: 12px;
}

.swif-cq-specs-title {
	grid-column: 1 / -1;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--swif-muted);
	margin-bottom: -2px;
}

/* Customer-defined specifications beyond the 6 shown fields. */
.swif-cq-custom-specs {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.swif-cq-custom-specs:not(:empty) {
	margin-top: 2px;
}

.swif-cq-custom-spec-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.swif-wrapper .swif-cq-custom-spec-row .swif-cq-custom-spec-name,
.swif-wrapper .swif-cq-custom-spec-row .swif-cq-custom-spec-value {
	min-height: 38px !important;
	padding: 8px 10px !important;
	border-radius: 6px !important;
	font-size: 12.5px !important;
}

.swif-wrapper .swif-cq-custom-spec-row .swif-cq-custom-spec-name {
	flex: 1 1 40%;
}

.swif-wrapper .swif-cq-custom-spec-row .swif-cq-custom-spec-value {
	flex: 1 1 60%;
}

.swif-cq-add-spec {
	grid-column: 1 / -1;
	margin-top: 2px !important;
}

/* ---- Searchable combobox ( Country / Region ) ---- */
.swif-combo {
	position: relative;
}

/* Same dropdown chevron as a real <select>, so it visually reads as one -
   click anywhere in the field opens the full list; typing searches it. */
.swif-wrapper .swif-combo-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
	padding-right: 42px !important;
	cursor: pointer;
}

.swif-combo-list {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	background: var(--swif-card-bg);
	border: 1px solid var(--swif-field-border);
	border-radius: 8px;
	box-shadow: var(--swif-shadow);
}

.swif-combo-opt {
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--swif-fg);
	cursor: pointer;
}

.swif-combo-opt:hover,
.swif-combo-opt.is-active {
	background: var(--swif-chip-bg);
}

.swif-combo-empty {
	padding: 8px 10px;
	font-size: 13px;
	color: var(--swif-muted);
}

/* ---- Order-quantities recap ( above the submit buttons ) ---- */
.swif-qty-summary {
	margin: 16px 0 4px;
	padding: 14px 16px;
	border: 1px solid var(--swif-card-border);
	border-left: 3px solid var(--swif-accent);
	border-radius: 8px;
	background: var(--swif-card-bg);
}

.swif-qty-summary-title {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--swif-muted);
	margin-bottom: 8px;
}

.swif-qty-recap {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--swif-fg);
}

.swif-qty-grand {
	font-size: 14px;
	font-weight: 600;
	color: var(--swif-fg);
}

.swif-qty-grand strong {
	color: var(--swif-accent);
}

/* ---- Section 6: preferred shipping ---- */
.swif-ship-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px 14px;
	margin-bottom: 12px;
}

.swif-wrapper .swif-ship-opt {
	display: flex !important;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 1px solid var(--swif-field-border) !important;
	border-radius: 8px !important;
	background: var(--swif-field-bg) !important;
	color: var(--swif-fg) !important;
	font-weight: 400 !important;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.swif-wrapper .swif-ship-opt:hover {
	border-color: var(--swif-field-border-hover) !important;
}

.swif-wrapper .swif-ship-opt input {
	margin: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--swif-accent);
}

/* "Advise best option" / "Other" - visually set apart; they open a note field */
.swif-ship-special {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.swif-wrapper .swif-ship-opt-note {
	border-style: dashed !important;
	border-color: var(--swif-accent) !important;
	background: var(--swif-chip-bg) !important;
	background: color-mix(in srgb, var(--swif-accent) 7%, var(--swif-field-bg)) !important;
	font-weight: 600 !important;
}

.swif-wrapper .swif-ship-opt-note:hover {
	background: color-mix(in srgb, var(--swif-accent) 13%, var(--swif-field-bg)) !important;
}

.swif-ship-opt-hint {
	margin-left: auto;
	color: var(--swif-accent);
	font-size: 13px;
}

.swif-wrapper .swif-ship-note {
	border-left: 3px solid var(--swif-accent) !important;
	margin-top: 2px;
}

/* ---- Upload box ---- */
.swif-wrapper .swif-upload-box {
	display: block !important;
	width: 100% !important;
	border: 2px dashed var(--swif-field-border) !important;
	background: var(--swif-upload-bg) !important;
	margin: 0 !important;
	padding: 30px !important;
	text-align: center !important;
	border-radius: 8px !important;
	cursor: pointer;
	font-weight: 400 !important;
	transition: border-color 0.2s;
}

.swif-wrapper .swif-upload-box:hover,
.swif-wrapper .swif-upload-box.is-dragover {
	border-color: var(--swif-accent) !important;
}

/*
 * The native file input stays functional (it is inside the <label>) but must
 * never be visible. Some themes force `input { display: … }` which defeats the
 * plain `hidden` attribute, so hide it with the robust visually-hidden pattern.
 */
.swif-wrapper input.swif-file-input,
.swif-wrapper .swif-file-input[type="file"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-width: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.swif-wrapper .swif-upload-icon {
	font-size: 28px;
	display: block;
	margin: 0 0 6px !important;
	color: var(--swif-muted);
}

.swif-wrapper .swif-upload-text {
	display: block;
	color: var(--swif-muted) !important;
	font-size: 14px;
	font-weight: 400 !important;
}

.swif-wrapper .swif-upload-btn {
	background: var(--swif-accent) !important;
	color: #fff !important;
	padding: 10px 20px !important;
	font-weight: 700 !important;
	border: 0 !important;
	border-radius: 4px !important;
	display: inline-block !important;
	margin: 10px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

/* ---- Chosen files list ( multi-upload ) ---- */
.swif-wrapper .swif-file-list {
	list-style: none !important;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.swif-file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: var(--swif-card-bg);
	border: 1px solid var(--swif-card-border);
	border-radius: 8px;
	font-size: 13px;
	transition: border-color 0.15s;
}

.swif-file-item:hover {
	border-color: var(--swif-card-border-hover);
}

.swif-file-item-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	background: var(--swif-chip-bg);
	font-size: 15px;
	line-height: 1;
}

.swif-file-item-meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.swif-file-item-name {
	color: var(--swif-fg);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.swif-file-item-size {
	color: var(--swif-muted);
	font-size: 11px;
}

.swif-wrapper .swif-file-remove {
	flex: 0 0 auto;
	width: 26px !important;
	height: 26px;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 50%;
	box-shadow: none !important;
	color: var(--swif-muted) !important;
	font: inherit !important;
	font-size: 18px !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.swif-file-remove:hover {
	background: var(--swif-error-bg) !important;
	color: var(--swif-error-fg) !important;
}

/* ---- Spec grid ---- */
.swif-spec-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px 16px;
	align-items: start;
}

@media (max-width: 900px) {
	.swif-spec-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.swif-spec-grid,
	.swif-cq-advanced-body { grid-template-columns: 1fr; }

	/* On a narrow screen the photo+name block no longer fits next to the
	   size/units/color row, so it wraps onto its own line - margin:auto ( a
	   flex-item trick for centering along the row's main axis ) centers it
	   there instead of leaving it stuck against the card's left edge. */
	.swif-card-hit {
		margin: 0 auto;
	}
}

/* Each dropdown + its custom-text box read as one unit */
.swif-spec-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.swif-spec-item .swif-custom-write {
	margin-top: 0;
}

/* Specification dropdowns run dense (3 to a row) - a slightly smaller,
   shorter control keeps the row from feeling oversized next to its label. */
.swif-wrapper .swif-spec-item .swif-select,
.swif-wrapper .swif-spec-item .swif-input {
	min-height: 40px !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
}

.swif-wrapper .swif-spec-item .swif-select {
	padding-right: 36px !important;
	background-size: 14px 14px !important;
	background-position: right 12px center !important;
}

/* ---- Size / quantity chips ---- */
.swif-inline-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.swif-inline-options + .swif-custom-write {
	margin-top: 0;
}

.swif-wrapper .swif-check-btn {
	display: inline-block !important;
	width: auto !important;
	min-height: 0 !important;
	background: var(--swif-chip-bg) !important;
	background-image: none !important;
	border: 1px solid var(--swif-field-border) !important;
	color: var(--swif-chip-fg) !important;
	margin: 0 !important;
	padding: 8px 16px !important;
	border-radius: 4px !important;
	cursor: pointer;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	transition: all 0.2s;
	box-shadow: none !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.swif-wrapper .swif-check-btn:hover {
	border-color: var(--swif-field-border-hover) !important;
	color: var(--swif-fg) !important;
}

.swif-wrapper .swif-check-btn.active {
	background: var(--swif-accent) !important;
	color: #fff !important;
	border-color: var(--swif-accent) !important;
}

/* ---- "Email me a copy" ---- */
.swif-wrapper .swif-copy-me {
	display: flex !important;
	align-items: center;
	gap: 9px;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--swif-fg);
	cursor: pointer;
}

.swif-wrapper .swif-copy-me input {
	width: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto;
	accent-color: var(--swif-accent);
}

/* ---- Actions ---- */
.swif-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-top: 14px;
}

.swif-actions.swif-actions-solo {
	grid-template-columns: 1fr;
}

.swif-wrapper .swif-btn {
	background: var(--swif-accent) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 15px 18px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	border-radius: 8px !important;
	cursor: pointer;
	letter-spacing: 0.4px !important;
	transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none !important;
	text-shadow: none !important;
}

.swif-wrapper .swif-btn:hover {
	filter: brightness(0.94);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18) !important;
}

.swif-wrapper .swif-btn:active {
	transform: translateY(0);
}

.swif-wrapper .swif-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none !important;
	filter: none;
}

.swif-wrapper .swif-whatsapp-btn {
	background: #25d366 !important;
}

.swif-response-msg {
	margin-top: 15px;
	padding: 12px;
	border-radius: 6px;
	display: none;
	text-align: center;
	font-weight: bold;
}

.swif-response-msg.is-success {
	display: block;
	background: var(--swif-success-bg);
	color: var(--swif-success-fg);
}

.swif-response-msg.is-error {
	display: block;
	background: var(--swif-error-bg);
	color: var(--swif-error-fg);
}

@media (max-width: 600px) {
	.swif-wrapper {
		padding: 18px 14px;
		border-radius: 8px;
	}

	.swif-actions {
		grid-template-columns: 1fr;
	}
}