/*!
 * WhatsApp Checkout 1.0.3 - templates: clean (light), dark (premium), sheet (compact bottom sheet)
 * Everything is scoped to .wac-* so the store theme (Bootstrap 3/5, Journal3) is not touched.
 * Layout is mobile-first; @container queries switch to the desktop layout from 768px of available width.
 */

.wac-root,
.wac-trigger {
	--wac-accent: #245fd4;
	--wac-on-accent: #fff;
	--wac-accent-text: #245fd4;
	--wac-cta: #0f7b41;
	--wac-on-cta: #fff;
	--wac-font: inherit;
}

.wac-root {
	--wac-bg: #fff;
	--wac-surface: #f4f7fb;
	--wac-surface-2: #eaf0f8;
	--wac-border: #dbe2ec;
	--wac-border-strong: #737f92;
	--wac-text: #0f1b2d;
	--wac-muted: #526075;
	--wac-danger: #b42318;
	--wac-danger-bg: #fdecea;
	--wac-ok: #0f7b41;
	--wac-overlay: rgba(12, 20, 33, .56);
	--wac-shadow: 0 24px 64px rgba(15, 27, 45, .22), 0 2px 8px rgba(15, 27, 45, .08);
	--wac-radius: 16px;
	--wac-radius-sm: 10px;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	container: wac / inline-size;
	font-family: var(--wac-font);
	font-size: 15px;
	line-height: 1.45;
	color: var(--wac-text);
	text-align: left;
	letter-spacing: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.wac-root[hidden] { display: none !important; }

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

/* themes style bare elements (OpenCart 4 gives footer position:absolute); keep ours neutral */
.wac-root .wac-head,
.wac-root .wac-foot,
.wac-root .wac-body,
.wac-root .wac-section,
.wac-root .wac-side { position: relative; inset: auto; width: auto; margin: 0; float: none; color: var(--wac-text); }

.wac-root.wac--dark {
	--wac-bg: #10151f;
	--wac-surface: #171e2b;
	--wac-surface-2: #1f2838;
	--wac-border: #2b3547;
	--wac-border-strong: #7d8aa0;
	--wac-text: #edf1f7;
	--wac-muted: #a3aec0;
	--wac-danger: #ff8a80;
	--wac-danger-bg: #3a1d1f;
	--wac-ok: #4ade80;
	--wac-overlay: rgba(3, 6, 12, .72);
	color-scheme: dark;
	--wac-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05);
}

html.wac-lock,
html.wac-lock body { overflow: hidden !important; }

/* ------------------------------------------------------------------ shell */

.wac-overlay {
	position: absolute;
	inset: 0;
	background: var(--wac-overlay);
	opacity: 0;
	transition: opacity .2s ease;
}

.wac-dialog {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background: var(--wac-bg);
	color: var(--wac-text);
	box-shadow: var(--wac-shadow);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
	outline: none;
	overflow: hidden;
}

.wac-open .wac-overlay { opacity: 1; }
.wac-open .wac-dialog { opacity: 1; transform: none; }

.wac-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--wac-border);
	flex-shrink: 0;
}

.wac-handle { display: none; }

.wac-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 12px;
	background: var(--wac-cta);
	color: var(--wac-on-cta);
}

.wac-badge .wac-ico { width: 22px; height: 22px; }

.wac-head-text { min-width: 0; flex: 1; }

.wac-root .wac-title {
	margin: 0;
	padding: 0;
	font-family: var(--wac-font);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	font-style: normal;
	color: var(--wac-text);
	letter-spacing: -.01em;
	text-transform: none;
	border: 0;
}

.wac-root .wac-sub {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--wac-muted);
}

.wac-root .wac-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -4px -6px -4px 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--wac-muted);
	cursor: pointer;
	flex-shrink: 0;
}

.wac-root .wac-x:hover { background: var(--wac-surface); color: var(--wac-text); }

.wac-ico { width: 20px; height: 20px; display: block; flex-shrink: 0; }

.wac-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.wac-foot {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--wac-border);
	background: var(--wac-bg);
	flex-shrink: 0;
}

.wac-foot:empty { display: none; }

.wac-foot-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--wac-muted);
}

.wac-foot-total strong {
	font-size: 20px;
	font-weight: 800;
	color: var(--wac-text);
	font-variant-numeric: tabular-nums;
}

.wac-root .wac-note {
	margin: 0;
	font-size: 12.5px;
	color: var(--wac-muted);
	text-align: center;
}

.wac-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

.wac-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
}

.wac-main { padding: 4px 16px 8px; min-width: 0; }

.wac-section { padding: 16px 0; border-bottom: 1px solid var(--wac-border); }
.wac-section:last-child { border-bottom: 0; }
.wac-section[hidden] { display: none; }

.wac-root .wac-h {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--wac-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	font-style: normal;
	color: var(--wac-text);
	text-transform: none;
	letter-spacing: 0;
}

.wac-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--wac-surface-2);
	color: var(--wac-accent-text);
	font-size: 12.5px;
	font-weight: 800;
}

.wac-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

.wac-field { min-width: 0; }

.wac-root .wac-label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--wac-text);
	text-transform: none;
	letter-spacing: 0;
}

.wac-opt-tag { font-weight: 500; color: var(--wac-muted); }
.wac-req { color: var(--wac-danger); }

.wac-root .wac-input {
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px;
	font-family: var(--wac-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	font-style: normal;
	color: var(--wac-text);
	background: var(--wac-bg);
	border: 1px solid var(--wac-border-strong);
	border-radius: var(--wac-radius-sm);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s, box-shadow .15s;
}

.wac-root textarea.wac-input { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }

.wac-root select.wac-input {
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23738092' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
}

.wac-root .wac-input::placeholder { color: var(--wac-muted); opacity: .85; }

.wac-root .wac-input:hover { border-color: var(--wac-text); }

.wac-root .wac-input:focus {
	outline: none;
	border-color: var(--wac-accent-text);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wac-accent-text) 30%, transparent);
}

.wac-root .wac-input[aria-invalid="true"] {
	border-color: var(--wac-danger);
	box-shadow: 0 0 0 1px var(--wac-danger);
}

.wac-phone { display: flex; gap: 8px; }
.wac-root .wac-phone .wac-prefix { width: 112px; flex-shrink: 0; padding-left: 12px; font-variant-numeric: tabular-nums; }

.wac-root .wac-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--wac-muted); }

.wac-root .wac-err {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--wac-danger);
}

.wac-root .wac-err[hidden] { display: none; }

.wac-root .wac-err-general {
	margin: 0;
	padding: 10px 12px;
	border-radius: var(--wac-radius-sm);
	background: var(--wac-danger-bg);
	text-align: center;
}

/* radio cards */

.wac-radios { display: grid; gap: 8px; }

.wac-root .wac-opt {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 13px 14px;
	border: 1px solid var(--wac-border);
	border-radius: var(--wac-radius-sm);
	background: var(--wac-bg);
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}

.wac-root .wac-opt:hover { border-color: var(--wac-border-strong); }

.wac-root .wac-opt:has(input:checked) {
	border-color: var(--wac-accent-text);
	background: color-mix(in srgb, var(--wac-accent-text) 7%, var(--wac-bg));
	box-shadow: inset 0 0 0 1px var(--wac-accent-text);
}

.wac-root .wac-opt:has(input:disabled) { opacity: .6; cursor: not-allowed; }

.wac-root .wac-opt input,
.wac-root .wac-check input {
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	flex-shrink: 0;
	accent-color: var(--wac-accent);
	cursor: pointer;
}

.wac-root .wac-opt input:focus-visible,
.wac-root .wac-check input:focus-visible {
	outline: 3px solid var(--wac-accent-text);
	outline-offset: 2px;
}

.wac-opt-body {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	flex: 1;
	min-width: 0;
}

.wac-opt-title { font-weight: 600; color: var(--wac-text); }
.wac-opt-price { font-weight: 700; color: var(--wac-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wac-opt-desc { grid-column: 1 / -1; font-size: 13px; color: var(--wac-muted); }

.wac-root .wac-notice {
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--wac-radius-sm);
	background: var(--wac-surface);
	color: var(--wac-muted);
	font-size: 14px;
}

/* extras */

.wac-extras { display: grid; gap: 12px; }

.wac-more > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	color: var(--wac-accent-text);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	border-radius: 8px;
}

.wac-more > summary::-webkit-details-marker { display: none; }
.wac-more[open] > summary { margin-bottom: 4px; }
.wac-more[open] > summary .wac-ico { transform: rotate(45deg); }

.wac-root .wac-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 24px;
}

.wac-root .wac-check label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--wac-text);
	cursor: pointer;
}

.wac-root .wac-check a { color: var(--wac-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.wac-account[hidden] { display: none; }

.wac-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

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

.wac-side {
	padding: 4px 16px 16px;
	background: var(--wac-surface);
	border-top: 1px solid var(--wac-border);
	min-width: 0;
}

.wac-side[aria-busy="true"] .wac-totals,
.wac-side[aria-busy="true"] .wac-products { opacity: .55; transition: opacity .15s; }

.wac-summary > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	cursor: pointer;
	list-style: none;
	border-radius: 8px;
}

.wac-summary > summary::-webkit-details-marker { display: none; }
.wac-summary > summary .wac-h { margin: 0; }
.wac-count { margin-left: auto; font-size: 13px; color: var(--wac-muted); }
.wac-chev { transition: transform .2s; color: var(--wac-muted); }
.wac-summary[open] .wac-chev { transform: rotate(180deg); }

.wac-root .wac-products {
	display: grid;
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.wac-product {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 10px;
	border-radius: var(--wac-radius-sm);
	background: var(--wac-bg);
	border: 1px solid var(--wac-border);
}

.wac-nostock { border-color: var(--wac-danger); }

.wac-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--wac-surface-2);
	color: var(--wac-muted);
}

.wac-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.wac-pinfo { display: grid; gap: 3px; min-width: 0; }
.wac-pname { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.wac-popts { display: grid; font-size: 12.5px; color: var(--wac-muted); }
.wac-pstock { font-size: 12.5px; font-weight: 600; color: var(--wac-danger); }
.wac-prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.wac-ptotal { font-weight: 700; font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }

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

.wac-root .wac-qbtn,
.wac-root .wac-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wac-text);
	cursor: pointer;
}

.wac-root .wac-qbtn .wac-ico { width: 16px; height: 16px; }
.wac-root .wac-qbtn:disabled { color: var(--wac-muted); opacity: .45; cursor: default; }
.wac-root .wac-qbtn:not(:disabled):hover { background: var(--wac-surface-2); }
.wac-qval { min-width: 26px; text-align: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

.wac-root .wac-remove { width: 36px; height: 36px; border-radius: 8px; color: var(--wac-muted); }
.wac-root .wac-remove:hover { background: var(--wac-danger-bg); color: var(--wac-danger); }

.wac-root .wac-totals { display: grid; gap: 6px; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--wac-border-strong); }
.wac-trow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.wac-root .wac-trow dt { margin: 0; font-weight: 500; color: var(--wac-muted); }
.wac-root .wac-trow dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wac-trow.wac-grand { padding-top: 6px; font-size: 16px; }
.wac-root .wac-trow.wac-grand dt { color: var(--wac-text); font-weight: 700; }
.wac-root .wac-trow.wac-grand dd { font-weight: 800; }

.wac-root .wac-secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--wac-muted);
}

.wac-root .wac-secure .wac-ico { width: 16px; height: 16px; }

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

.wac-root .wac-btn,
.wac-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	margin: 0;
	padding: 12px 22px;
	border: 0;
	border-radius: 12px;
	font-family: var(--wac-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: filter .15s, transform .15s, box-shadow .15s, background-color .15s;
	-webkit-tap-highlight-color: transparent;
}

.wac-root .wac-btn-cta,
.wac-trigger {
	width: 100%;
	background: var(--wac-cta);
	color: var(--wac-on-cta);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wac-cta) 30%, transparent);
}

.wac-root .wac-btn-cta:hover,
.wac-trigger:hover { filter: brightness(1.06); color: var(--wac-on-cta); text-decoration: none; }

.wac-root .wac-btn-cta:active,
.wac-trigger:active { transform: translateY(1px); }

.wac-root .wac-btn-cta:disabled,
.wac-trigger:disabled { filter: saturate(.6); opacity: .75; cursor: progress; }

.wac-root .wac-btn-cta .wac-ico,
.wac-trigger .wac-ico { width: 22px; height: 22px; }

.wac-root .wac-btn-ghost {
	min-height: 46px;
	background: var(--wac-surface);
	color: var(--wac-text);
	border: 1px solid var(--wac-border);
	font-size: 15px;
	font-weight: 600;
}

.wac-root .wac-btn-ghost:hover { background: var(--wac-surface-2); }

.wac-root a:focus-visible,
.wac-root button:focus-visible,
.wac-root summary:focus-visible,
.wac-trigger:focus-visible {
	outline: 3px solid var(--wac-accent-text);
	outline-offset: 2px;
}

.wac-root .wac-btn-cta:focus-visible,
.wac-trigger:focus-visible { outline-color: var(--wac-text, #0f1b2d); box-shadow: 0 0 0 2px var(--wac-bg, #fff); }

/* store-page triggers */

.wac-trigger-wrap { width: 100%; flex: 1 0 100%; margin: 12px 0 0; }

.wac-trigger { font-family: var(--wac-font); }

.wac-trigger-cart { width: auto; min-height: 46px; margin: 0 0 0 10px; vertical-align: middle; }

/* outline style: the theme's add-to-cart button stays the main action */
.wac-trigger.wac-outline,
.wac-trigger.wac-outline:hover {
	background: #fff;
	color: var(--wac-cta-text, #0f7b41);
	box-shadow: inset 0 0 0 1.5px var(--wac-cta-text, #0f7b41);
}

.wac-trigger.wac-outline:hover { background: color-mix(in srgb, var(--wac-cta-text, #0f7b41) 7%, #fff); filter: none; }

/* sized like the theme's own button (height, corners, lettering copied at runtime) */
.wac-trigger.wac-match {
	min-height: var(--wac-m-h);
	height: var(--wac-m-h);
	padding: 0 16px;
	gap: 8px;
	border-radius: var(--wac-m-r);
	font-size: var(--wac-m-fs);
	font-weight: var(--wac-m-fw);
	text-transform: var(--wac-m-tt);
	letter-spacing: var(--wac-m-ls);
}

.wac-trigger.wac-match:not(.wac-outline) { box-shadow: none; }
.wac-trigger.wac-match .wac-ico { width: 18px; height: 18px; }
.wac-trigger-wrap:has(.wac-match) { margin-top: 10px; }

.wac-trigger-msg {
	display: grid;
	gap: 2px;
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdecea;
	color: #8f1d14;
	font-size: 14px;
	font-weight: 600;
}

.wac-trigger-msg[hidden] { display: none; }

/* Journal3 product page: quantity, add to cart and the WhatsApp button on one even grid */
.stepper-group.cart-group:has(> .wac-trigger-wrap) {
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.stepper-group.cart-group:has(> .wac-trigger-wrap) > #button-cart,
.stepper-group.cart-group:has(> .wac-trigger-wrap) > .stepper {
	margin: 0 !important;
}

.stepper-group.cart-group > .wac-trigger-wrap {
	flex: 1 0 100%;
	margin: 0 !important;
}

/* ------------------------------------------------------------------ lordiam.ro buy box (Journal3 + Lordiam Pro, html.lp only) */
html.lp #product.product-details { padding: 28px 28px 24px; }

html.lp #product .title.page-title {
	margin: 0 0 18px;
	padding: 0;
	font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--color-fg);
}

html.lp #product .title.page-title::after,
html.lp #product .title.page-title::before { display: none !important; }

/* price first, then the details */
html.lp #product .product-price-group { display: flex; flex-direction: column; gap: 18px; margin: 0 0 22px; padding: 0; border: 0; }
html.lp #product .product-price-group .price-wrapper { order: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 0; border: 0; }
html.lp #product .product-price-group .product-stats { order: 1; margin: 0; padding: 0; border: 0; width: 100%; }
html.lp #product .product-price { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem) !important; line-height: 1; letter-spacing: -.02em; }
html.lp #product .product-tax { margin: 0; font-size: .875rem; font-weight: 500; color: var(--color-fg-muted); }

/* details as a quiet two-column table */
html.lp #product .product-stats ul { display: grid; margin: 0; padding: 4px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); list-style: none; }
html.lp #product .product-stats li { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: .875rem; line-height: 1.35; }
html.lp #product .product-stats li:last-child { border-bottom: 0; }
html.lp #product .product-stats li::before,
html.lp #product .product-stats li::marker { display: none; content: none; }
html.lp #product .product-stats li b { flex-shrink: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-fg-muted); }
html.lp #product .product-stats li span { font-weight: 600; color: var(--color-fg); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* stock as a status pill */
html.lp #product .product-stats li.product-stock span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--radius-pill); background: #E7F3EB; color: var(--color-success) !important; font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
html.lp #product .product-stats li.product-stock span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
html.lp #product .product-stats li.product-stock:not(.in-stock) span { background: #FFF3E0; color: var(--color-warning) !important; }

/* quantity, add to cart and WhatsApp: one 48px grid with even 10px gaps */
html.lp #product .stepper-group.cart-group { gap: 10px; }
html.lp #product .cart-group .stepper { height: 48px; width: 92px; border: 1px solid var(--color-border-strong); border-radius: 10px; background: var(--color-surface); overflow: hidden; }
html.lp #product .cart-group .stepper input { height: 100%; border: 0 !important; font-size: 1rem; font-weight: 700; color: var(--color-fg); text-align: center; background: transparent; }
html.lp #product .cart-group .stepper > span { border-left: 1px solid var(--color-border) !important; }
html.lp #product .cart-group .stepper > span i { color: var(--color-fg-muted); }
html.lp #product .cart-group #button-cart { height: 48px; border-radius: 10px !important; font-size: .82rem; font-weight: 800; letter-spacing: .04em; box-shadow: 0 6px 16px rgba(36, 95, 212, .22); }
html.lp #product .cart-group #button-cart:hover { background: var(--color-accent-hover) !important; }
html.lp #product .cart-group .wac-trigger.wac-trigger-product { height: 48px; min-height: 48px; border-radius: 10px; font-size: .82rem; font-weight: 800; letter-spacing: .04em; }
html.lp #product .cart-group .wac-trigger.wac-trigger-product .wac-ico { width: 20px; height: 20px; }
html.lp #product .cart-group .wac-trigger.wac-trigger-product.wac-outline { background: #E9F5EE; color: #0B5E31; box-shadow: inset 0 0 0 1px #A9D6BB; }
html.lp #product .cart-group .wac-trigger.wac-trigger-product.wac-outline:hover { background: #DDF0E5; }
html.lp #product .cart-group .wac-trigger.wac-trigger-product.wac-outline .wac-ico { color: #0F7B41; }

@media (min-width: 768px) {
	html.lp #product .button-group-page { margin: 0; padding: 0; border: 0; background: none; }
}

@media (max-width: 767px) {
	html.lp #product.product-details { padding: 20px 16px; }
	html.lp #product .cart-group .stepper { width: 80px; }
	html.lp #product .product-stats li { min-height: 36px; padding: 6px 0; }
	html.lp #product .cart-group .stepper,
	html.lp #product .cart-group #button-cart,
	html.lp #product .cart-group .wac-trigger.wac-trigger-product { height: 46px; min-height: 46px; }
}

/* ------------------------------------------------------------------ states */

.wac-loading,
.wac-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 260px;
	padding: 32px 20px;
	text-align: center;
	color: var(--wac-muted);
}

.wac-empty p { margin: 0; font-size: 16px; color: var(--wac-text); }
.wac-empty-ico .wac-ico { width: 40px; height: 40px; }

.wac-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--wac-border);
	border-top-color: var(--wac-accent-text);
	border-radius: 50%;
	animation: wac-spin .8s linear infinite;
}

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

.wac-success {
	display: grid;
	justify-items: center;
	gap: 14px;
	max-width: 520px;
	margin: 0 auto;
	padding: 32px 20px 28px;
	text-align: center;
	outline: none;
}

.wac-success-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wac-ok) 14%, var(--wac-bg));
	color: var(--wac-ok);
}

.wac-success-ico .wac-ico { width: 34px; height: 34px; }

.wac-root .wac-success-title { margin: 0; font-family: var(--wac-font);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	font-style: normal; color: var(--wac-text); }
.wac-root .wac-success-text { margin: 0; color: var(--wac-muted); }
.wac-success-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }

.wac-root .wac-message {
	width: 100%;
	max-height: 180px;
	margin: 4px 0 0;
	padding: 12px 14px;
	overflow: auto;
	border-radius: var(--wac-radius-sm);
	border: 1px solid var(--wac-border);
	background: var(--wac-surface);
	color: var(--wac-text);
	font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
	text-align: left;
	white-space: pre-wrap;
}

.wac-pay { width: 100%; padding: 14px; border: 1px solid var(--wac-border); border-radius: var(--wac-radius-sm); background: var(--wac-surface); text-align: left; }
.wac-pay .wac-h { margin-bottom: 4px; }

/* ------------------------------------------------------------------ sheet (mobile first) */

.wac--sheet .wac-dialog {
	inset: auto 0 0 0;
	max-height: 94%;
	border-radius: 22px 22px 0 0;
	transform: translateY(100%);
	transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}

.wac--sheet.wac-open .wac-dialog { transform: none; }

.wac--sheet .wac-head { padding-top: 22px; border-bottom: 0; touch-action: none; }

.wac--sheet .wac-handle {
	display: block;
	position: absolute;
	top: 8px;
	left: 50%;
	width: 44px;
	height: 5px;
	margin-left: -22px;
	border-radius: 999px;
	background: var(--wac-border-strong);
	opacity: .55;
}

.wac--sheet .wac-badge { width: 34px; height: 34px; border-radius: 10px; }
.wac--sheet .wac-badge .wac-ico { width: 19px; height: 19px; }
.wac--sheet .wac-sub { display: none; }

.wac--sheet .wac-form { display: flex; flex-direction: column; }
.wac--sheet .wac-side { order: -1; margin: 0 16px; padding: 0 14px; border: 1px solid var(--wac-border); border-radius: var(--wac-radius); }
.wac--sheet .wac-summary:not([open]) + .wac-totals { display: none; }
.wac--sheet .wac-totals { margin-bottom: 14px; }
.wac--sheet .wac-secure { display: none; }
.wac--sheet .wac-section { padding: 14px 0; }
.wac--sheet .wac-step { display: none; }
.wac--sheet .wac-root .wac-input,
.wac--sheet .wac-input { height: 46px; }
.wac--sheet .wac-foot { grid-template-columns: auto 1fr; align-items: center; }
.wac--sheet .wac-foot-total { flex-direction: column; align-items: flex-start; gap: 0; font-size: 12.5px; }
.wac--sheet .wac-foot-total strong { font-size: 18px; }
.wac--sheet .wac-note,
.wac--sheet .wac-err-general { grid-column: 1 / -1; }
.wac--sheet .wac-note { order: 3; }

/* small screens: keep the header and the sticky footer short */
@container wac (max-width: 559px) {
	.wac-root .wac-sub,
	.wac-root .wac-note { display: none; }
	.wac--sheet .wac-foot .wac-btn-cta { min-height: 50px; padding: 10px 14px; gap: 8px; font-size: 15px; }
	.wac-head { padding: 10px 12px 10px 16px; }
	.wac-badge { width: 36px; height: 36px; border-radius: 10px; }
	.wac-foot { gap: 6px; padding-top: 10px; }
	.wac-foot-total strong { font-size: 18px; }
}

@container wac (max-width: 419px) {
	.wac--sheet .wac-foot { grid-template-columns: 1fr; }
	.wac--sheet .wac-foot-total { flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ------------------------------------------------------------------ wide screens */

@container wac (min-width: 560px) {
	.wac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wac-wide { grid-column: 1 / -1; }
}

@container wac (min-width: 768px) {
	.wac-root:not(.wac--sheet) .wac-dialog {
		inset: auto;
		top: 50%;
		left: 50%;
		width: min(1000px, calc(100cqw - 48px));
		max-height: min(900px, calc(100% - 48px));
		height: auto;
		border-radius: 20px;
		transform: translate(-50%, calc(-50% + 14px)) scale(.985);
	}

	.wac-root:not(.wac--sheet).wac-open .wac-dialog { transform: translate(-50%, -50%); }

	.wac-root:not(.wac--sheet) .wac-head { padding: 18px 24px; }
	.wac-root:not(.wac--sheet) .wac-title { font-size: 19px; }

	.wac-root:not(.wac--sheet) .wac-form {
		grid-template-columns: minmax(0, 1fr) 360px;
		align-items: start;
	}

	.wac-root:not(.wac--sheet) .wac-main { padding: 8px 28px 16px; }

	.wac-root:not(.wac--sheet) .wac-side {
		position: sticky;
		top: 0;
		min-height: 100%;
		padding: 12px 24px 24px;
		border-top: 0;
		border-left: 1px solid var(--wac-border);
	}

	.wac-root:not(.wac--sheet) .wac-summary > summary { pointer-events: none; }
	.wac-root:not(.wac--sheet) .wac-summary > summary .wac-chev { display: none; }

	.wac-root:not(.wac--sheet) .wac-foot {
		grid-template-columns: 1fr auto;
		align-items: center;
		padding: 14px 24px;
		column-gap: 20px;
	}

	.wac-root:not(.wac--sheet) .wac-foot .wac-btn-cta { width: auto; min-width: 320px; }
	.wac-root:not(.wac--sheet) .wac-foot-total { justify-content: flex-start; }
	.wac-root:not(.wac--sheet) .wac-note { grid-column: 1 / -1; text-align: right; }
	.wac-root:not(.wac--sheet) .wac-err-general { grid-column: 1 / -1; }

	/* sheet becomes a compact drawer on the right */
	.wac--sheet .wac-dialog {
		inset: 0 0 0 auto;
		width: min(460px, 100cqw);
		max-height: none;
		border-radius: 0;
		transform: translateX(100%);
	}

	.wac--sheet .wac-handle { display: none; }
	.wac--sheet .wac-head { padding-top: 16px; border-bottom: 1px solid var(--wac-border); touch-action: auto; }
	.wac--sheet .wac-side { margin-top: 14px; }
}

/* dark premium polish */

.wac--dark .wac-dialog { background: linear-gradient(180deg, #131a26 0%, var(--wac-bg) 220px); }
.wac--dark .wac-head { border-bottom-color: rgba(255, 255, 255, .07); }
.wac--dark .wac-side { background: rgba(255, 255, 255, .025); }
.wac--dark .wac-product { background: var(--wac-surface); }
.wac--dark select.wac-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23a3aec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wac--dark .wac-root .wac-input,
.wac-root.wac--dark .wac-input { background-color: #0c111a; }
.wac--dark .wac-badge { box-shadow: 0 0 0 4px rgba(15, 123, 65, .18); }

/* ------------------------------------------------------------------ admin preview */

.wac-stage { position: relative; height: 100%; overflow: hidden; border-radius: 14px; }
.wac-inline { position: absolute; }
.wac-inline .wac-dialog { transition: none; }

/* ------------------------------------------------------------------ motion & print */

@media (prefers-reduced-motion: reduce) {
	.wac-root *,
	.wac-trigger { transition: none !important; animation-duration: .01ms !important; }
	.wac-spinner { animation: none; border-top-color: var(--wac-border-strong); }
}

@media (forced-colors: active) {
	.wac-root .wac-btn-cta,
	.wac-trigger { border: 2px solid ButtonText; }
	.wac-root .wac-opt:has(input:checked) { outline: 2px solid Highlight; }
}