/**
 * VisionaryCue Commerce Pro - global styles.
 *
 * Scoped to .vc- prefixed classes so the plugin never leaks styles into the
 * host theme. Every colour, radius and space comes from a custom property.
 */

/* ---------------------------------------------------------------- Base --- */

.vc-app,
.vc-root {
	font-family: var(--vc-font);
	font-size: var(--vc-font-size);
	font-weight: var(--vc-font-weight);
	line-height: var(--vc-line-height);
	letter-spacing: var(--vc-letter-spacing);
	color: var(--vc-text);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

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

/* ------------------------------------------------- Typography ownership --- */

/*
 * Setting fonts on .vc-app above only reaches descendants by inheritance, and
 * inheritance loses to ANY direct rule at ANY specificity. A theme styling
 * `h2` or `.entry-content h2` therefore wins over the plugin's own type scale,
 * which is how theme heading sizes leaked into plugin UI.
 *
 * The class is doubled to reach (0,2,0), enough to beat the descendant
 * selectors themes normally use. :where() keeps the element list at zero
 * specificity so it never inflates past that.
 *
 * This block deliberately does NOT set font-size for elements carrying a
 * plugin class — those size themselves, and their rules are written at (0,2,0)
 * too so they win here on source order and against the theme.
 */
.vc-app.vc-app :where(h1, h2, h3, h4, h5, h6),
.vc-root.vc-root :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: inherit;
	font-weight: var(--vc-heading-weight);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-transform: none;
	color: inherit;
}

/*
 * Anything inside plugin UI that is not one of our own components takes the
 * plugin's type scale outright. Excluding elements that carry a vc- class
 * keeps every component's own sizing intact.
 */
.vc-app.vc-app :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, label, small, figcaption, blockquote, address):not([class*="vc-"]),
.vc-root.vc-root :where(h1, h2, h3, h4, h5, h6, p, li, dt, dd, td, th, label, small, figcaption, blockquote, address):not([class*="vc-"]) {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.vc-app img {
	max-width: 100%;
	height: auto;
}

.vc-container {
	width: 100%;
	max-width: var(--vc-container);
	margin-inline: auto;
	padding-inline: var(--vc-space-4);
}

.vc-section {
	margin-block: var(--vc-space-7);
}

.vc-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vc-space-4);
	margin-bottom: var(--vc-space-4);
	flex-wrap: wrap;
}

.vc-section__title.vc-section__title {
	margin: 0;
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	font-weight: var(--vc-heading-weight);
	letter-spacing: -0.01em;
	color: var(--vc-text);
	line-height: 1.25;
}

.vc-section__subtitle.vc-section__subtitle {
	margin: 4px 0 0;
	color: var(--vc-muted);
	font-size: 0.9em;
}

.vc-muted { color: var(--vc-muted); }
.vc-strong { font-weight: 600; }
.vc-nowrap { white-space: nowrap; }
.vc-hidden { display: none !important; }

/* ------------------------------------------------------- Accessibility --- */

.vc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vc-app :focus-visible,
.vc-root :focus-visible {
	outline: 2px solid var(--vc-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.vc-skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: var(--vc-z-toast);
	padding: 10px 16px;
	background: var(--vc-surface);
	border-radius: var(--vc-radius-sm);
	box-shadow: var(--vc-shadow-lg);
}

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

.vc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: var(--vc-button-radius);
	background: var(--vc-primary);
	color: var(--vc-on-primary);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--vc-transition) var(--vc-ease),
		border-color var(--vc-transition) var(--vc-ease),
		color var(--vc-transition) var(--vc-ease),
		transform var(--vc-transition) var(--vc-ease);
	-webkit-appearance: none;
	appearance: none;
}

.vc-btn:hover:not(:disabled) {
	background: var(--vc-primary-dark);
	color: var(--vc-on-primary);
}

.vc-btn:active:not(:disabled) { transform: translateY(1px); }

.vc-btn:disabled,
.vc-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.vc-btn--secondary {
	background: var(--vc-surface);
	color: var(--vc-text);
	border-color: var(--vc-border-strong);
}

.vc-btn--secondary:hover:not(:disabled) {
	background: var(--vc-background);
	color: var(--vc-text);
	border-color: var(--vc-text);
}

.vc-btn--ghost {
	background: transparent;
	color: var(--vc-primary);
	border-color: transparent;
}

.vc-btn--ghost:hover:not(:disabled) {
	background: var(--vc-primary-soft);
	color: var(--vc-primary-dark);
}

.vc-btn--outline {
	background: transparent;
	color: var(--vc-primary);
	border-color: var(--vc-primary);
}

.vc-btn--outline:hover:not(:disabled) {
	background: var(--vc-primary);
	color: var(--vc-on-primary);
}

.vc-btn--danger { background: var(--vc-error); }
.vc-btn--danger:hover:not(:disabled) { background: #b91c1c; }

.vc-btn--dark { background: var(--vc-secondary); }
.vc-btn--dark:hover:not(:disabled) { background: #000; }

.vc-btn--block { display: flex; width: 100%; }
.vc-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 0.875em; }
.vc-btn--lg { min-height: 52px; padding: 14px 26px; font-size: 1.05em; }

.vc-btn--icon {
	min-height: 40px;
	width: 40px;
	padding: 0;
	border-radius: var(--vc-radius-pill);
}

.vc-btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.vc-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--vc-on-primary);
	animation: vc-spin 0.7s linear infinite;
}

.vc-btn--secondary.is-loading::after,
.vc-btn--outline.is-loading::after,
.vc-btn--ghost.is-loading::after { color: var(--vc-text); }

@keyframes vc-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- Forms --- */

.vc-field { margin-bottom: var(--vc-space-4); }

.vc-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--vc-text);
}

.vc-label__optional {
	font-weight: 400;
	color: var(--vc-muted);
}

.vc-input,
.vc-select,
.vc-textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	font: inherit;
	color: var(--vc-text);
	background: var(--vc-surface);
	border: 1px solid var(--vc-border-strong);
	border-radius: var(--vc-radius-sm);
	transition: border-color var(--vc-transition) var(--vc-ease),
		box-shadow var(--vc-transition) var(--vc-ease);
	-webkit-appearance: none;
	appearance: none;
}

.vc-textarea { min-height: 96px; resize: vertical; }

.vc-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='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 38px;
}

.vc-input:focus,
.vc-select:focus,
.vc-textarea:focus {
	border-color: var(--vc-primary);
	box-shadow: 0 0 0 3px var(--vc-primary-soft);
	outline: none;
}

.vc-input::placeholder,
.vc-textarea::placeholder { color: var(--vc-muted); }

.vc-field.has-error .vc-input,
.vc-field.has-error .vc-select,
.vc-field.has-error .vc-textarea {
	border-color: var(--vc-error);
}

.vc-field__error {
	display: block;
	margin-top: 6px;
	font-size: 0.8em;
	color: var(--vc-error);
}

.vc-field__hint {
	display: block;
	margin-top: 6px;
	font-size: 0.8em;
	color: var(--vc-muted);
}

.vc-checkbox,
.vc-radio {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-size: 0.92em;
}

.vc-checkbox input,
.vc-radio input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--vc-primary);
}

.vc-input-group { display: flex; gap: 8px; }
.vc-input-group .vc-input { flex: 1 1 auto; min-width: 0; }

.vc-password { position: relative; }
.vc-password .vc-input { padding-right: 46px; }

.vc-password__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	color: var(--vc-muted);
	cursor: pointer;
	border-radius: var(--vc-radius-sm);
}

.vc-password__toggle:hover { color: var(--vc-text); background: var(--vc-background); }

.vc-strength { margin-top: 8px; }

.vc-strength__bar {
	height: 4px;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-border);
	overflow: hidden;
}

.vc-strength__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--vc-error);
	transition: width var(--vc-transition) var(--vc-ease), background var(--vc-transition) var(--vc-ease);
}

.vc-strength[data-level="2"] .vc-strength__fill { width: 50%; background: var(--vc-warning); }
.vc-strength[data-level="3"] .vc-strength__fill { width: 78%; background: var(--vc-info); }
.vc-strength[data-level="4"] .vc-strength__fill { width: 100%; background: var(--vc-success); }
.vc-strength[data-level="1"] .vc-strength__fill { width: 25%; }

.vc-strength__label.vc-strength__label {
	display: block;
	margin-top: 5px;
	font-size: 0.78em;
	color: var(--vc-muted);
}

/* --------------------------------------------------------------- Cards --- */

.vc-card {
	background: var(--vc-card);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
	box-shadow: var(--vc-shadow);
}

.vc-panel {
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	padding: var(--vc-space-5);
}

.vc-panel__title.vc-panel__title {
	margin: 0 0 var(--vc-space-3);
	font-size: 1.02em;
	font-weight: var(--vc-heading-weight);
}

/* -------------------------------------------------------------- Badges --- */

.vc-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: var(--vc-radius-pill);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	text-transform: uppercase;
	background: var(--vc-background);
	color: var(--vc-muted);
}

.vc-badge--sale { background: var(--vc-sale); color: #fff; }
.vc-badge--success { background: color-mix(in srgb, var(--vc-success) 14%, transparent); color: var(--vc-success); }
.vc-badge--warning { background: color-mix(in srgb, var(--vc-warning) 16%, transparent); color: var(--vc-warning); }
.vc-badge--error { background: color-mix(in srgb, var(--vc-error) 12%, transparent); color: var(--vc-error); }
.vc-badge--info { background: color-mix(in srgb, var(--vc-info) 12%, transparent); color: var(--vc-info); }
.vc-badge--accent { background: var(--vc-accent); color: #1a1300; }

/* -------------------------------------------------------------- Rating --- */

.vc-rating {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 0.82em;
	color: var(--vc-muted);
}

.vc-rating__stars {
	position: relative;
	display: inline-block;
	width: 74px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14' viewBox='0 0 74 14'%3E%3Cg fill='%23d1d5db'%3E%3Cpath d='M7 1l1.8 3.8L13 5.4l-3 2.9.7 4.1L7 10.5 3.3 12.4 4 8.3 1 5.4l4.2-.6z'/%3E%3Cpath d='M22 1l1.8 3.8L28 5.4l-3 2.9.7 4.1L22 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3Cpath d='M37 1l1.8 3.8L43 5.4l-3 2.9.7 4.1L37 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3Cpath d='M52 1l1.8 3.8L58 5.4l-3 2.9.7 4.1L52 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3Cpath d='M67 1l1.8 3.8L73 5.4l-3 2.9.7 4.1L67 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3C/g%3E%3C/svg%3E");
}

.vc-rating__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='14' viewBox='0 0 74 14'%3E%3Cg fill='%23f59e0b'%3E%3Cpath d='M7 1l1.8 3.8L13 5.4l-3 2.9.7 4.1L7 10.5 3.3 12.4 4 8.3 1 5.4l4.2-.6z'/%3E%3Cpath d='M22 1l1.8 3.8L28 5.4l-3 2.9.7 4.1L22 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3Cpath d='M37 1l1.8 3.8L43 5.4l-3 2.9.7 4.1L37 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3Cpath d='M52 1l1.8 3.8L58 5.4l-3 2.9.7 4.1L52 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3Cpath d='M67 1l1.8 3.8L73 5.4l-3 2.9.7 4.1L67 10.5l-3.7 1.9.7-4.1-3-2.9 4.2-.6z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

.vc-rating__value { font-weight: 600; color: var(--vc-text); }

/* ------------------------------------------------------------- Prices ---- */

.vc-price {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
	font-weight: 700;
	color: var(--vc-text);
}

.vc-price del,
.vc-price .vc-price__was {
	font-weight: 400;
	font-size: 0.85em;
	color: var(--vc-muted);
	text-decoration: line-through;
}

.vc-price ins { text-decoration: none; }

.vc-price__off {
	font-size: 0.72em;
	font-weight: 700;
	color: var(--vc-sale);
}

.vc-price__saved {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.78em;
	font-weight: 600;
	color: var(--vc-success);
}

/* ----------------------------------------------------------- Skeletons --- */

.vc-skeleton {
	position: relative;
	overflow: hidden;
	background: var(--vc-border);
	border-radius: var(--vc-radius-sm);
}

.vc-skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.6),
		transparent
	);
	animation: vc-shimmer 1.2s infinite;
}

@keyframes vc-shimmer { to { transform: translateX(100%); } }

.vc-skeleton-card {
	background: var(--vc-card);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
	padding: var(--vc-space-2);
}

.vc-skeleton-card__img {
	aspect-ratio: var(--vc-card-ratio);
	width: 100%;
	margin-bottom: var(--vc-space-3);
	border-radius: var(--vc-radius-sm);
}

.vc-skeleton-line { height: 12px; margin-bottom: 8px; }
.vc-skeleton-line--sm { width: 45%; }
.vc-skeleton-line--md { width: 70%; }
.vc-skeleton-line--lg { width: 100%; }

.vc-skeleton-wrap { display: flex; flex-direction: column; gap: var(--vc-space-3); }

/* One list row: thumbnail, two lines of text, a trailing value. Used for
   cart lines, order rows and anything else with the same rhythm. */
.vc-skeleton-row {
	display: flex;
	align-items: center;
	gap: var(--vc-space-3);
	padding: 10px 0;
	border-bottom: 1px solid var(--vc-border);
}

.vc-skeleton-row:last-child { border-bottom: 0; }

.vc-skeleton-row__media {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: var(--vc-radius-sm);
}

.vc-skeleton-row__body { flex: 1 1 auto; min-width: 0; }
.vc-skeleton-row__body .vc-skeleton-line:last-child { margin-bottom: 0; }
.vc-skeleton-row__aside { flex: none; width: 56px; height: 14px; }

.vc-skeleton-block {
	padding: var(--vc-space-4);
	background: var(--vc-card);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-card-radius);
}

.vc-skeleton-block .vc-skeleton-line:last-of-type { margin-bottom: 0; }
.vc-skeleton-block--stat { padding: var(--vc-space-3) var(--vc-space-4); }
.vc-skeleton-block--stat .vc-skeleton-line--md { height: 20px; margin-bottom: 0; }
.vc-skeleton-btn { height: 36px; margin-top: 12px; border-radius: var(--vc-button-radius); }

/* -------------------------------------------------------------- Toasts --- */

.vc-toasts {
	position: fixed;
	z-index: var(--vc-z-toast);
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: min(360px, calc(100vw - 24px));
	pointer-events: none;
}

.vc-toasts[data-position="bottom-right"] { right: 16px; bottom: 16px; }
.vc-toasts[data-position="top-right"] { right: 16px; top: 16px; }
.vc-toasts[data-position="top-center"] { top: 16px; left: 50%; transform: translateX(-50%); }
.vc-toasts[data-position="bottom-center"] { bottom: 16px; left: 50%; transform: translateX(-50%); }

.vc-toast {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: var(--vc-secondary);
	color: #fff;
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow-lg);
	pointer-events: auto;
	animation: vc-toast-in 0.2s var(--vc-ease);
	font-size: 0.9em;
}

.vc-toast.is-leaving { animation: vc-toast-out 0.16s var(--vc-ease) forwards; }
.vc-toast__icon { flex: none; margin-top: 1px; }
.vc-toast__body { flex: 1 1 auto; }
.vc-toast--success .vc-toast__icon { color: #6ee7a8; }
.vc-toast--error { background: var(--vc-error); }
.vc-toast--warning { background: var(--vc-warning); }

.vc-toast__close {
	flex: none;
	border: 0;
	background: none;
	color: inherit;
	opacity: 0.65;
	cursor: pointer;
	padding: 0;
	line-height: 0;
}

.vc-toast__close:hover { opacity: 1; }

@keyframes vc-toast-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

@keyframes vc-toast-out {
	to { opacity: 0; transform: translateY(6px); }
}

/* -------------------------------------------------------------- Modals --- */

.vc-modal {
	position: fixed;
	inset: 0;
	z-index: var(--vc-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--vc-space-4);
}

.vc-modal[hidden] { display: none; }

.vc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--vc-overlay);
	animation: vc-fade-in var(--vc-transition) var(--vc-ease);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.vc-modal__dialog {
	position: relative;
	width: min(680px, 100%);
	max-height: min(90vh, 780px);
	display: flex;
	flex-direction: column;
	background: var(--vc-surface);
	border-radius: var(--vc-radius-lg);
	box-shadow: var(--vc-shadow-lg);
	overflow: hidden;
	animation: vc-modal-in 0.22s var(--vc-ease);
}

.vc-modal--sm .vc-modal__dialog { width: min(440px, 100%); }
.vc-modal--lg .vc-modal__dialog { width: min(920px, 100%); }

.vc-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-3);
	padding: var(--vc-space-4) var(--vc-space-5);
	border-bottom: 1px solid var(--vc-border);
}

.vc-modal__title.vc-modal__title {
	margin: 0;
	font-size: 1.05em;
	font-weight: var(--vc-heading-weight);
}

.vc-modal__body {
	padding: var(--vc-space-5);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.vc-modal__footer {
	padding: var(--vc-space-4) var(--vc-space-5);
	border-top: 1px solid var(--vc-border);
	display: flex;
	gap: var(--vc-space-2);
	justify-content: flex-end;
	flex-wrap: wrap;
}

.vc-modal__close {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-background);
	color: var(--vc-muted);
	cursor: pointer;
	transition: background var(--vc-transition) var(--vc-ease);
}

.vc-modal__close:hover { background: var(--vc-border); color: var(--vc-text); }

@keyframes vc-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes vc-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

body.vc-no-scroll { overflow: hidden; }

/* ------------------------------------------------------- Empty & error --- */

.vc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--vc-space-2);
	padding: var(--vc-space-8) var(--vc-space-4);
}

.vc-empty__icon {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin-bottom: var(--vc-space-2);
	border-radius: 50%;
	background: var(--vc-background);
	color: var(--vc-muted);
}

.vc-empty__icon .vc-icon { width: 34px; height: 34px; }

.vc-empty__title.vc-empty__title {
	margin: 0;
	font-size: 1.15em;
	font-weight: var(--vc-heading-weight);
}

.vc-empty__text {
	margin: 0;
	max-width: 42ch;
	color: var(--vc-muted);
}

.vc-empty__actions { margin-top: var(--vc-space-3); }

.vc-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border-radius: var(--vc-radius-sm);
	border: 1px solid var(--vc-border);
	background: var(--vc-surface);
	font-size: 0.92em;
	margin-bottom: var(--vc-space-4);
}

.vc-notice--error {
	border-color: color-mix(in srgb, var(--vc-error) 40%, var(--vc-border));
	background: color-mix(in srgb, var(--vc-error) 6%, var(--vc-surface));
	color: var(--vc-error);
}

.vc-notice--success {
	border-color: color-mix(in srgb, var(--vc-success) 40%, var(--vc-border));
	background: color-mix(in srgb, var(--vc-success) 6%, var(--vc-surface));
	color: var(--vc-success);
}

.vc-notice--info {
	border-color: color-mix(in srgb, var(--vc-info) 35%, var(--vc-border));
	background: color-mix(in srgb, var(--vc-info) 5%, var(--vc-surface));
}

.vc-notice__icon { flex: none; margin-top: 1px; }

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

.vc-header {
	position: relative;
	z-index: var(--vc-z-header);
	background: var(--vc-header-bg);
	border-bottom: 1px solid var(--vc-border);
}

.vc-header.is-sticky {
	position: sticky;
	top: 0;
}

.vc-header__inner {
	display: flex;
	align-items: center;
	gap: var(--vc-space-4);
	min-height: var(--vc-header-height);
	padding-block: var(--vc-space-2);
}

.vc-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: var(--vc-heading-weight);
	font-size: 1.1em;
	color: var(--vc-text);
	text-decoration: none;
	flex: none;
}

.vc-header__logo img {
	max-height: calc(var(--vc-header-height) - 28px);
	width: auto;
}

.vc-header__location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 0;
	border-radius: var(--vc-radius-sm);
	background: transparent;
	color: var(--vc-text);
	cursor: pointer;
	text-align: left;
	font: inherit;
	max-width: 220px;
}

.vc-header__location:hover { background: var(--vc-background); }

.vc-header__location-label {
	display: block;
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--vc-muted);
	line-height: 1.3;
}

.vc-header__location-value {
	display: block;
	font-size: 0.88em;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vc-header__search { flex: 1 1 auto; min-width: 0; max-width: 620px; }
.vc-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }

.vc-header__action {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 0;
	border-radius: var(--vc-radius-sm);
	background: transparent;
	color: var(--vc-text);
	font: inherit;
	font-size: 0.88em;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	min-height: 44px;
	transition: background var(--vc-transition) var(--vc-ease);
}

.vc-header__action:hover { background: var(--vc-background); color: var(--vc-text); }

.vc-header__action--cart {
	background: var(--vc-primary);
	color: var(--vc-on-primary);
	padding-inline: 16px;
}

.vc-header__action--cart:hover { background: var(--vc-primary-dark); color: var(--vc-on-primary); }

.vc-count {
	position: absolute;
	top: 2px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-sale);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.vc-count.is-zero { display: none; }
.vc-count.is-bumping { animation: vc-bump 0.35s var(--vc-ease); }

@keyframes vc-bump {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

.vc-header__mobile-toggle { display: none; }

/* --------------------------------------------- Standalone header actions - */

/*
 * [vc_header_actions] — account, wishlist, cart and orders icons on their own,
 * plus an optional hamburger, for dropping into a theme's own header. Every
 * colour comes from a design token, so it follows the admin palette rather
 * than imposing one.
 */
.vc-hactions {
	display: flex;
	align-items: center;
	gap: var(--vc-hactions-gap, 6px);
}

.vc-hactions--left { justify-content: flex-start; }
.vc-hactions--center { justify-content: center; }
.vc-hactions--right { justify-content: flex-end; }

/* Framed variant: the whole cluster sits in one pill. */
.vc-hactions--pill {
	display: inline-flex;
	padding: 8px;
	background: var(--vc-surface);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-pill);
}

.vc-hactions__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--vc-muted);
	font: inherit;
	font-size: 0.88em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--vc-transition) var(--vc-ease),
		color var(--vc-transition) var(--vc-ease),
		transform var(--vc-transition) var(--vc-ease);
}

.vc-hactions__btn:hover,
.vc-hactions__btn:focus-visible {
	background: var(--vc-primary);
	color: var(--vc-on-primary);
	transform: translateY(-2px);
}

.vc-hactions__btn:active { transform: translateY(0); }

/* With a label the control grows into a pill instead of staying a circle. */
.vc-hactions__label { white-space: nowrap; }

.vc-hactions__btn:has(.vc-hactions__label) {
	width: auto;
	padding: 0 16px;
	border-radius: var(--vc-radius-pill);
}

/* Fallback for browsers without :has() — labels are opt-in, so widen every
   control in the labelled variant instead. */
.vc-hactions:not(.vc-hactions--icons) .vc-hactions__btn {
	width: auto;
	padding: 0 16px;
	border-radius: var(--vc-radius-pill);
}

.vc-hactions__divider {
	width: 1px;
	height: 22px;
	background: var(--vc-border);
	flex: none;
}

/* The badge carries a ring in the surface colour so it reads as a cut-out,
   and inverts on hover to stay legible against the accent fill. */
.vc-hactions__btn .vc-count {
	top: 2px;
	right: 2px;
	border: 2px solid var(--vc-surface);
}

.vc-hactions__btn:hover .vc-count,
.vc-hactions__btn:focus-visible .vc-count {
	background: var(--vc-on-primary);
	color: var(--vc-primary);
	border-color: var(--vc-primary);
}

/* --------------------------------------------------------- Menu toggle --- */

.vc-hactions__burger {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	flex: none;
	padding: 0;
	border: 1px solid var(--vc-border);
	border-radius: 50%;
	background: var(--vc-surface);
	cursor: pointer;
	transition: background var(--vc-transition) var(--vc-ease),
		border-color var(--vc-transition) var(--vc-ease),
		transform var(--vc-transition) var(--vc-ease);
}

.vc-hactions__burger span {
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--vc-text);
	transition: transform 0.28s var(--vc-ease), opacity 0.2s var(--vc-ease), width 0.2s var(--vc-ease), background var(--vc-transition) var(--vc-ease);
}

.vc-hactions__burger:hover,
.vc-hactions__burger:focus-visible {
	background: var(--vc-primary);
	border-color: var(--vc-primary);
	transform: translateY(-2px);
}

.vc-hactions__burger:hover span,
.vc-hactions__burger:focus-visible span { background: var(--vc-on-primary); }

/* is-active is set by the drawer itself, so the bars cross whichever way the
   menu was opened or closed. */
.vc-hactions__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vc-hactions__burger.is-active span:nth-child(2) { opacity: 0; width: 0; }
.vc-hactions__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/*
 * Where the menu toggle appears is an admin setting, so the media query is
 * emitted alongside the design tokens rather than hardcoded here. Without a
 * breakpoint it simply shows at every width.
 */

/* ------------------------------------------------------- Off-canvas nav --- */

.vc-offcanvas .vc-drawer__panel { width: min(320px, 86vw); }
.vc-offcanvas__brand {
	display: inline-flex;
	align-items: center;
	font-weight: var(--vc-heading-weight);
	font-size: 1.05em;
	color: var(--vc-text);
	text-decoration: none;
}

.vc-offcanvas__logo { max-height: 40px; width: auto; display: block; }

.vc-offcanvas__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--vc-space-3);
}

.vc-offcanvas__link,
.vc-offcanvas__menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 12px;
	border-radius: var(--vc-radius-sm);
	color: var(--vc-text);
	text-decoration: none;
	font-size: 0.95em;
	font-weight: 500;
	transition: background var(--vc-transition) var(--vc-ease),
		color var(--vc-transition) var(--vc-ease),
		padding-left var(--vc-transition) var(--vc-ease);
}

.vc-offcanvas__link:hover,
.vc-offcanvas__link:focus-visible,
.vc-offcanvas__menu a:hover,
.vc-offcanvas__menu a:focus-visible {
	background: var(--vc-primary-soft);
	color: var(--vc-primary);
	padding-left: 18px;
}

.vc-offcanvas__link .vc-icon { flex: none; }

/* A theme menu arrives as nested lists; flatten it to the same rhythm. */
.vc-offcanvas__menu,
.vc-offcanvas__menu ul { list-style: none; margin: 0; padding: 0; }
.vc-offcanvas__menu ul { padding-left: var(--vc-space-4); }

.vc-offcanvas__foot {
	margin-top: auto;
	padding: var(--vc-space-4) var(--vc-space-5);
	border-top: 1px solid var(--vc-border);
	font-size: 0.8em;
	color: var(--vc-muted);
}

/*
 * A navigation drawer stays a side panel on mobile. The cart drawer becomes a
 * bottom sheet there, which is right for a cart and wrong for a menu.
 */
@media (max-width: 767px) {
	/* The class is doubled because the generic mobile drawer rules further
	   down the file turn a --left drawer into a bottom sheet at the same
	   specificity, and being later would otherwise win. */
	.vc-drawer--nav.vc-drawer--nav .vc-drawer__panel {
		top: 0;
		width: min(320px, 86vw);
		height: 100%;
		border-radius: 0;
		transform: translateX(-100%);
	}

	.vc-drawer--nav.vc-drawer--nav.is-open .vc-drawer__panel { transform: none; }
}

/* ----------------------------------------------------- Mobile bottom nav - */

.vc-mobilenav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--vc-z-mobilenav);
	display: none;
	background: var(--vc-mobilenav-bg);
	border-top: 1px solid var(--vc-border);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.vc-mobilenav__list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-mobilenav__item { flex: 1 1 0; }

.vc-mobilenav__link {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: var(--vc-mobilenav-height);
	padding: 8px 4px;
	border: 0;
	width: 100%;
	background: none;
	color: var(--vc-muted);
	font: inherit;
	font-size: 0.68em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.vc-mobilenav__link.is-active,
.vc-mobilenav__link:hover { color: var(--vc-mobilenav-active); }

.vc-mobilenav__link .vc-count { top: 4px; right: calc(50% - 22px); }

/* --------------------------------------------------------- Scroll rows --- */

.vc-scroller {
	display: flex;
	gap: var(--vc-space-3);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding-bottom: var(--vc-space-2);
	-webkit-overflow-scrolling: touch;
}

.vc-scroller > * { scroll-snap-align: start; flex: 0 0 auto; }

.vc-scroller::-webkit-scrollbar { height: 6px; }
.vc-scroller::-webkit-scrollbar-thumb { background: var(--vc-border-strong); border-radius: 999px; }
.vc-scroller::-webkit-scrollbar-track { background: transparent; }

.vc-scroller--hide-bar { scrollbar-width: none; }
.vc-scroller--hide-bar::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------- Breadcrumbs --- */

.vc-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--vc-space-3);
	padding: 0;
	list-style: none;
	font-size: 0.82em;
	color: var(--vc-muted);
}

.vc-breadcrumb a { color: var(--vc-muted); text-decoration: none; }
.vc-breadcrumb a:hover { color: var(--vc-primary); text-decoration: underline; }
.vc-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.vc-breadcrumb [aria-current="page"] { color: var(--vc-text); font-weight: 600; }

/* ------------------------------------------------------------ Progress --- */

.vc-progress {
	height: 6px;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-border);
	overflow: hidden;
}

.vc-progress__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--vc-primary), var(--vc-success));
	transition: width 0.32s var(--vc-ease);
}

.vc-freeship { padding: var(--vc-space-3) 0; }
.vc-freeship__text { margin: 0 0 7px; font-size: 0.85em; }
.vc-freeship__text strong { color: var(--vc-primary); }
.vc-freeship.is-complete .vc-freeship__text { color: var(--vc-success); }

/* ------------------------------------------------------------ Quantity --- */

.vc-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--vc-border-strong);
	border-radius: var(--vc-button-radius);
	overflow: hidden;
	background: var(--vc-surface);
}

.vc-qty__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--vc-text);
	cursor: pointer;
	transition: background var(--vc-transition) var(--vc-ease);
}

.vc-qty__btn:hover:not(:disabled) { background: var(--vc-background); }
.vc-qty__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/*
 * Two classes deep on purpose.
 *
 * A theme's own input[type="number"] rule is more specific than a single
 * class, so its padding, text-indent or font-size could squeeze the digit out
 * of this fixed-width box — and .vc-qty clips its overflow, so the number
 * disappeared entirely while the stepper still looked fine. Everything that
 * decides where the digit sits is pinned here.
 */
.vc-qty .vc-qty__input {
	/* Each context (card, drawer, product page, mobile) sets its own width, so
	   no min-width VALUE is imposed here — but min-width:0 is, because a flex
	   item otherwise defaults to min-width:auto and refuses to shrink below an
	   input's ~20-character intrinsic width. */
	flex: none;
	box-sizing: border-box;
	width: 46px;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--vc-border);
	border-radius: 0;
	text-align: center;
	text-indent: 0;
	font: inherit;
	font-weight: 700;
	line-height: normal;
	color: var(--vc-text);
	background: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.vc-qty .vc-qty__input:focus {
	outline: none;
	background: transparent;
	box-shadow: none;
}

.vc-qty__input::-webkit-outer-spin-button,
.vc-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------------ Spinners --- */

.vc-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--vc-border);
	border-top-color: var(--vc-primary);
	border-radius: 50%;
	animation: vc-spin 0.7s linear infinite;
}

.vc-loading-overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--vc-surface) 72%, transparent);
	border-radius: inherit;
	z-index: 2;
}

.is-busy { position: relative; }

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

@media (max-width: 1023px) {
	.vc-header__location { display: none; }
	.vc-header__action span:not(.vc-count) { display: none; }
	.vc-header__action--cart span:not(.vc-count) { display: inline; }
}

@media (max-width: 767px) {
	.vc-container { padding-inline: var(--vc-space-3); }
	.vc-section { margin-block: var(--vc-space-5); }

	.vc-header__inner { gap: var(--vc-space-2); }
	.vc-header__search { display: none; }
	.vc-header__mobile-toggle { display: inline-flex; }
	.vc-header__action--cart span:not(.vc-count) { display: none; }
	.vc-header__action--cart { padding-inline: 12px; }

	.vc-mobilenav { display: block; }

	body.vc-has-mobilenav { padding-bottom: calc(var(--vc-mobilenav-height) + env(safe-area-inset-bottom, 0px)); }

	.vc-modal { padding: 0; align-items: flex-end; }
	.vc-modal__dialog {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--vc-radius-lg) var(--vc-radius-lg) 0 0;
		animation: vc-sheet-in 0.24s var(--vc-ease);
	}
	.vc-modal--center .vc-modal__dialog { border-radius: var(--vc-radius-lg); }

	.vc-toasts { width: calc(100vw - 20px); left: 10px; right: 10px; transform: none; }
	.vc-toasts[data-position^="bottom"] { bottom: calc(var(--vc-mobilenav-height) + 12px); }
}

@keyframes vc-sheet-in {
	from { transform: translateY(16px); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.vc-app *,
	.vc-root * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.vc-skeleton::after { animation: none; }
}

/* ------------------------------------------------------------- Drawers --- */

.vc-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--vc-z-drawer);
	pointer-events: none;
}

.vc-drawer[hidden] { display: none; }

.vc-drawer__overlay {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: var(--vc-overlay);
	opacity: 0;
	cursor: pointer;
	transition: opacity var(--vc-transition) var(--vc-ease);
	pointer-events: auto;
}

.vc-drawer.is-open .vc-drawer__overlay { opacity: 1; }
.vc-drawer--no-overlay .vc-drawer__overlay { display: none; }

.vc-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(var(--vc-drawer-width), 100vw);
	background: var(--vc-surface);
	box-shadow: var(--vc-shadow-lg);
	transform: translateX(100%);
	transition: transform 0.26s var(--vc-ease);
	pointer-events: auto;
}

.vc-drawer.is-open .vc-drawer__panel { transform: none; }

.vc-drawer--left .vc-drawer__panel {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

.vc-drawer--fade .vc-drawer__panel {
	transform: none;
	opacity: 0;
	transition: opacity var(--vc-transition) var(--vc-ease);
}

.vc-drawer--fade.is-open .vc-drawer__panel { opacity: 1; }

.vc-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vc-space-3);
	padding: var(--vc-space-4) var(--vc-space-5);
	border-bottom: 1px solid var(--vc-border);
	flex: none;
}

.vc-drawer__title.vc-drawer__title {
	margin: 0;
	font-size: 1.02em;
	font-weight: var(--vc-heading-weight);
}

.vc-drawer__subtitle.vc-drawer__subtitle {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--vc-muted);
}

.vc-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--vc-space-4) var(--vc-space-5);
}

.vc-drawer__footer {
	flex: none;
	padding: var(--vc-space-4) var(--vc-space-5);
	padding-bottom: calc(var(--vc-space-4) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--vc-border);
	background: var(--vc-surface);
}

/* Icon button used across cards, drawers and toolbars. */
.vc-icon-btn {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius-pill);
	background: var(--vc-surface);
	color: var(--vc-muted);
	cursor: pointer;
	transition: color var(--vc-transition) var(--vc-ease),
		border-color var(--vc-transition) var(--vc-ease),
		background var(--vc-transition) var(--vc-ease);
}

.vc-icon-btn:hover { color: var(--vc-text); border-color: var(--vc-border-strong); }
.vc-icon-btn.is-active { color: var(--vc-sale); border-color: var(--vc-sale); }
.vc-icon-btn.is-active .vc-icon { fill: var(--vc-sale); }
.vc-icon-btn.is-loading { opacity: 0.6; pointer-events: none; }

@media (max-width: 767px) {
	.vc-drawer__panel {
		width: 100vw;
		top: auto;
		height: min(88vh, 100%);
		border-radius: var(--vc-radius-lg) var(--vc-radius-lg) 0 0;
		transform: translateY(100%);
	}

	.vc-drawer--left .vc-drawer__panel { transform: translateY(100%); }
	.vc-drawer.is-open .vc-drawer__panel { transform: none; }
}