/* ORGANIZO configurator, organizer visual, modules strip, kits. */

:root {
	--ozc-ink: var(--wp--preset--color--ink, #141517);
	--ozc-muted: var(--wp--preset--color--muted, #5B6065);
	--ozc-line: var(--wp--preset--color--line, #DEDFDA);
	--ozc-paper: var(--wp--preset--color--paper, #F4F4F1);
	--ozc-surface: var(--wp--preset--color--surface, #FFFFFF);
	--ozc-sheet: var(--wp--preset--color--sheet-1, #E4EBE6);
	--ozc-accent: var(--wp--preset--color--accent, #2F6B5A);
	--ozc-ease: cubic-bezier(.2, .7, .2, 1);
	--ozc-fast: 160ms;
	--ozc-base: 260ms;
}

/* =========================================================
   Organizer visual (.ozv) — layered 2D, no WebGL
   ========================================================= */
.ozv {
	--thick: calc(2px + var(--pages, 0) * 0.04px);
	position: relative;
	aspect-ratio: 0.86;
	width: 100%;
	max-width: var(--ozv-w, 420px);
	margin-inline: auto;
	container-type: inline-size;
	isolation: isolate;
}
.ozv--hero { --ozv-w: 460px; }
.ozv--card { --ozv-w: 250px; }
.ozv--demo { --ozv-w: 360px; }
.ozv--stage { --ozv-w: 440px; }

.ozv__cover {
	position: absolute;
	inset: 0 12% 0 0;
	z-index: 3;
	border-radius: 7% / 5.8%;
	background-color: var(--cover);
	background-image:
		radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.16), transparent 55%),
		linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.14));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset -3px 0 0 rgba(0, 0, 0, 0.08),
		0 28px 50px -24px rgba(20, 20, 20, 0.5),
		0 2px 6px rgba(20, 20, 20, 0.12);
	transition: background-color var(--ozc-base) var(--ozc-ease);
}
/* stitching */
.ozv__cover::after {
	content: "";
	position: absolute;
	inset: 3.6%;
	border: max(1px, 0.35cqw) dashed rgba(255, 255, 255, 0.34);
	border-radius: 5.4% / 4.4%;
	mix-blend-mode: soft-light;
}
/* blind-embossed wordmark, small, near the spine */
.ozv__emboss {
	position: absolute;
	left: 10%;
	bottom: 8%;
	font: 700 2.6cqw/1 var(--wp--preset--font-family--display, sans-serif);
	letter-spacing: 0.22em;
	color: rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14);
	user-select: none;
}
/* closing strap wrapping from the back */
.ozv__strap {
	position: absolute;
	right: -1px;
	top: 43%;
	width: 24%;
	height: 11%;
	border-radius: 999px 0 0 999px;
	background: inherit;
	background-color: var(--cover);
	filter: brightness(0.9);
	box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.22);
	transition: background-color var(--ozc-base) var(--ozc-ease);
}
.ozv__strap::after {
	content: "";
	position: absolute;
	inset: 18% 0 18% 10%;
	border: max(1px, 0.3cqw) dashed rgba(255, 255, 255, 0.3);
	border-right: 0;
	border-radius: 999px 0 0 999px;
}
/* paper block peeking out: thickness follows page count */
.ozv__paper {
	position: absolute;
	z-index: 1;
	top: 2.4%;
	bottom: 2.4%;
	left: 4%;
	right: 12%;
	border-radius: 3%;
	background: repeating-linear-gradient(90deg, #FBFAF6 0 2px, #E9E7E0 2px 3px);
	transform: translateX(var(--thick));
	box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.4);
	transition: transform var(--ozc-base) var(--ozc-ease);
}
/* module tabs = layers */
.ozv__tabs {
	position: absolute;
	z-index: 2;
	top: 7%;
	bottom: 7%;
	left: 70%;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 1.4cqw;
}
.ozv__tab {
	flex: 0 0 auto;
	height: 7.4cqw;
	max-height: 11%;
	border-radius: 0 1.6cqw 1.6cqw 0;
	background: var(--tab);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 1.6cqw;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08), 2px 2px 4px rgba(0, 0, 0, 0.08);
	transform: translateX(0);
	opacity: 1;
	transition: transform var(--ozc-base) var(--ozc-ease), opacity var(--ozc-fast) linear;
}
.ozv__tab > span {
	font: 600 2.1cqw/1 var(--wp--preset--font-family--body, sans-serif);
	color: rgba(20, 21, 23, 0.72);
	white-space: nowrap;
	overflow: hidden;
	max-width: 12cqw;
	text-overflow: ellipsis;
}
.ozv--card .ozv__tab > span { display: none; }
.ozv__tab.is-entering,
.ozv__tab.is-leaving { transform: translateX(-60%); opacity: 0; }
.ozv.is-bump .ozv__cover { animation: ozv-bump 220ms var(--ozc-ease); }
@keyframes ozv-bump { 50% { transform: scale(1.012); } }

/* =========================================================
   Homepage demo
   ========================================================= */
.oz-demo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.oz-demo__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oz-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1.5px solid var(--ozc-line);
	background: var(--ozc-surface);
	color: var(--ozc-ink);
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: border-color var(--ozc-fast), background-color var(--ozc-fast), transform var(--ozc-fast);
}
.oz-chip:hover { border-color: var(--ozc-ink); }
.oz-chip:active { transform: scale(0.97); }
.oz-chip__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--tab); }
.oz-chip[aria-pressed="true"] { background: var(--ozc-ink); color: var(--ozc-surface); border-color: var(--ozc-ink); }
.oz-demo__meta { margin: 1.5rem 0 0.75rem; color: var(--ozc-muted); font-variant-numeric: tabular-nums; }
.oz-demo__meta strong { color: var(--ozc-ink); }
.oz-demo__cta { font-weight: 600; text-decoration: none; }
@media (max-width: 781px) {
	.oz-demo { grid-template-columns: minmax(0, 1fr); }
	.oz-demo .ozv { max-width: 260px; }
}

/* =========================================================
   Modules strip
   ========================================================= */
.oz-strip { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--wp--style--root--padding-left, 1rem) * -1); padding-inline: var(--wp--style--root--padding-left, 1rem); scrollbar-width: thin; }
.oz-strip__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 0 0 1rem; }
@media (min-width: 1100px) { .oz-strip__list { grid-auto-columns: calc((100% - 4rem) / 5); } }
.oz-mcard {
	scroll-snap-align: start;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem 1.25rem 1.1rem;
	background: var(--ozc-surface);
	border-radius: 18px;
	border: 1px solid var(--ozc-line);
	overflow: hidden;
}
.oz-mcard__tab { position: absolute; top: 1.25rem; right: 0; width: 28px; height: 22px; border-radius: 6px 0 0 6px; background: var(--tab); }
.oz-mcard__group { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ozc-muted); }
.oz-mcard__name { margin: 0; font-size: 1.25rem; }
.oz-mcard__desc { margin: 0; color: var(--ozc-muted); font-size: 0.9375rem; flex: 1; }
.oz-mcard__meta { display: flex; justify-content: space-between; margin: 0.75rem 0 0; font-variant-numeric: tabular-nums; }
.oz-mcard__meta span { color: var(--ozc-muted); }
.oz-mcard__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--ozc-line); }
.oz-mcard__buy { font: inherit; font-size: 0.9375rem; font-weight: 600; min-height: 44px; width: 100%; padding: 0 1rem; border-radius: 999px; border: 0; background: var(--ozc-ink, #141517); color: #fff; cursor: pointer; white-space: nowrap; transition: background-color 160ms ease; }
.oz-mcard__buy:hover { background: #2B2D30; }
.oz-mcard__buy.is-added { background: var(--ozc-accent, #2F6B5A); }
.oz-mcard__buy:disabled { cursor: default; }
.oz-mcard__config { font-size: 0.875rem; font-weight: 500; color: var(--ozc-muted); text-decoration: none; min-height: 40px; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.oz-mcard__config:hover { color: var(--ozc-ink); text-decoration: underline; }
.oz-mcard__config::after { content: "\00a0→"; }
.oz-mcard__actions > .oz-mcard__config:only-child { justify-content: flex-start; font-weight: 600; color: var(--ozc-ink); }
.oz-mcard__actions > .oz-mcard__config:only-child::after { content: "\00a0+"; }
.oz-mcard__soldout { font-size: 0.875rem; color: var(--ozc-muted); min-height: 44px; display: flex; align-items: center; }
.oz-strip__status { position: fixed; z-index: 60; inset-inline: 1rem; bottom: 1rem; max-width: 30rem; margin: 0 auto; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--ozc-ink); color: #fff; font-size: 0.9375rem; box-shadow: 0 12px 32px rgb(0 0 0 / 0.18); }
.oz-strip__status a { color: #fff; font-weight: 600; }
.oz-strip__status:empty { display: none; }

/* =========================================================
   Kits
   ========================================================= */
.oz-kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.oz-kit { background: var(--ozc-surface); border-radius: 28px; border: 1px solid var(--ozc-line); overflow: hidden; display: flex; flex-direction: column; }
.oz-kit__visual { background: var(--ozc-sheet); padding: 2.5rem 2rem; }
.oz-kit:nth-child(2) .oz-kit__visual { background: var(--wp--preset--color--sheet-3, #E2E6EF); }
.oz-kit:nth-child(3) .oz-kit__visual { background: var(--wp--preset--color--sheet-2, #ECE5DC); }
.oz-kit__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.oz-kit__name { margin: 0; font-size: 1.5rem; }
.oz-kit__for { margin: 0; color: var(--ozc-muted); }
.oz-kit__modules { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.oz-kit__modules li { font-size: 0.8125rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--ozc-paper); }
.oz-kit__meta { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ozc-muted); }
.oz-kit__price { margin: 0; font-family: var(--wp--preset--font-family--display, sans-serif); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; flex: 1; display: flex; align-items: flex-end; }
.oz-kit__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }

.oz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.75rem 1.25rem;
	border-radius: 999px;
	border: 0;
	background: var(--ozc-ink);
	color: var(--ozc-surface);
	font: 600 0.9375rem/1.2 var(--wp--preset--font-family--body, sans-serif);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ozc-fast), transform var(--ozc-fast), opacity var(--ozc-fast);
}
.oz-btn:hover { background: #2B2D30; color: var(--ozc-surface); }
.oz-btn:active { transform: scale(0.98); }
.oz-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.oz-btn--ghost { background: transparent; color: var(--ozc-ink); box-shadow: inset 0 0 0 1.5px var(--ozc-ink); }
.oz-btn--ghost:hover { background: var(--ozc-ink); color: var(--ozc-surface); }

/* =========================================================
   Configurator (.ozc)
   ========================================================= */
.ozc { --bar-h: 84px; position: relative; }
.ozc h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 0.35rem; outline: none; }
.ozc-lead { color: var(--ozc-muted); margin: 0 0 1.5rem; }

.ozc__stage { background: var(--ozc-sheet); display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem 1.5rem; }
.ozc__visual { width: 100%; display: grid; place-items: center; }
.ozc__caption { margin: 0; font-size: 0.875rem; color: var(--ozc-muted); font-variant-numeric: tabular-nums; text-align: center; min-height: 1.3em; }

.ozc__panel { padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2rem; }
.ozc__body { animation: ozc-in var(--ozc-base) var(--ozc-ease); }
@keyframes ozc-in { from { opacity: 0; transform: translateY(6px); } }

.ozc__steps { display: flex; gap: 0.35rem; overflow-x: auto; margin: 0 0 1.75rem; padding-bottom: 2px; scrollbar-width: none; }
.ozc-step {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.35rem 0.85rem 0.35rem 0.4rem;
	border-radius: 999px;
	border: 1px solid var(--ozc-line);
	background: transparent;
	color: var(--ozc-muted);
	font: 500 0.875rem/1 var(--wp--preset--font-family--body, sans-serif);
	cursor: pointer;
}
.ozc-step__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ozc-surface); font-weight: 600; font-variant-numeric: tabular-nums; }
.ozc-step[aria-current="step"] { background: var(--ozc-ink); border-color: var(--ozc-ink); color: var(--ozc-surface); }
.ozc-step[aria-current="step"] .ozc-step__n { background: var(--ozc-surface); color: var(--ozc-ink); }

/* step 1: swatches */
.ozc-own { grid-column: 1 / -1; display: grid; gap: 0.15rem; text-align: left; font: inherit; padding: 0.9rem 1rem; border-radius: 14px; border: 1px dashed var(--ozc-line); background: transparent; color: var(--ozc-ink); cursor: pointer; margin-top: 0.4rem; }
.ozc-own[aria-checked="true"] { border: 2px solid var(--ozc-ink); background: var(--ozc-surface, #fff); }
.ozc-own__name { font-weight: 600; }
.ozc-own__desc { font-size: 0.875rem; color: var(--ozc-muted); }
.ozv.is-own .ozv__cover { opacity: 0.16; filter: grayscale(1); }
.ozc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.6rem; }
.ozc-swatch {
	display: grid;
	justify-items: start;
	gap: 0.15rem;
	padding: 0.85rem;
	border-radius: 16px;
	border: 1.5px solid var(--ozc-line);
	background: var(--ozc-surface);
	color: var(--ozc-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--ozc-fast), transform var(--ozc-fast);
}
.ozc-swatch:hover:not(:disabled) { border-color: var(--ozc-ink); }
.ozc-swatch:active:not(:disabled) { transform: scale(0.97); }
.ozc-swatch:disabled { opacity: 0.45; cursor: not-allowed; }
.ozc-swatch__dot { width: 40px; height: 40px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); margin-bottom: 0.5rem; transition: box-shadow var(--ozc-fast); }
.ozc-swatch__name { font-weight: 600; }
.ozc-swatch__stock { font-size: 0.8125rem; color: var(--ozc-muted); }
.ozc-swatch[aria-checked="true"] { border-color: var(--ozc-ink); }
.ozc-swatch[aria-checked="true"] .ozc-swatch__dot { box-shadow: 0 0 0 3px var(--ozc-surface), 0 0 0 5px var(--ozc-ink); }

/* step 2: planning cards */
.ozc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.ozc-card {
	display: grid;
	gap: 0.25rem;
	align-content: start;
	padding: 1rem;
	min-height: 150px;
	border-radius: 18px;
	border: 1.5px solid var(--ozc-line);
	background: var(--ozc-surface);
	color: var(--ozc-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--ozc-fast), transform var(--ozc-fast);
}
.ozc-card:hover { border-color: var(--ozc-ink); }
.ozc-card:active { transform: scale(0.98); }
.ozc-card[aria-checked="true"] { border-color: var(--ozc-ink); box-shadow: inset 0 0 0 1px var(--ozc-ink); }
.ozc-card__tabs { display: flex; gap: 4px; min-height: 14px; margin-bottom: 0.5rem; }
.ozc-card__tabs i { width: 22px; height: 14px; border-radius: 0 5px 5px 0; background: var(--tab); }
.ozc-card__name { font-weight: 700; font-size: 1.125rem; }
.ozc-card__desc { color: var(--ozc-muted); font-size: 0.9375rem; }
.ozc-card__meta { margin-top: auto; padding-top: 0.5rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* step 3: modules */
.ozc-capacity { position: relative; height: 34px; border-radius: 999px; background: var(--ozc-surface); border: 1px solid var(--ozc-line); overflow: hidden; margin-bottom: 1.5rem; }
.ozc-capacity__bar { position: absolute; inset: 0 auto 0 0; width: var(--pct); background: var(--ozc-sheet); transition: width var(--ozc-base) var(--ozc-ease); }
.ozc-capacity__label { position: relative; display: flex; align-items: center; height: 100%; padding: 0 1rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ozc-group + .ozc-group { margin-top: 1.25rem; }
.ozc-group__name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ozc-muted); margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--body, sans-serif); }
.ozc-module {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 32px;
	align-items: center;
	gap: 0.75rem;
	min-height: 64px;
	padding: 0.75rem 0.85rem 0.75rem 1.4rem;
	margin-bottom: 0.45rem;
	border-radius: 14px;
	border: 1.5px solid var(--ozc-line);
	background: var(--ozc-surface);
	color: var(--ozc-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: border-color var(--ozc-fast), transform var(--ozc-fast);
}
.ozc-module:hover:not(:disabled) { border-color: var(--ozc-ink); }
.ozc-module:active:not(:disabled) { transform: scale(0.99); }
.ozc-module:disabled { opacity: 0.45; cursor: not-allowed; }
.ozc-module__tab { position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--tab); }
.ozc-module__text { display: grid; gap: 0.1rem; min-width: 0; }
.ozc-module__name { font-weight: 600; }
.ozc-module__desc { font-size: 0.875rem; color: var(--ozc-muted); }
.ozc-module__meta { display: grid; justify-items: end; font-size: 0.8125rem; color: var(--ozc-muted); font-variant-numeric: tabular-nums; }
.ozc-module__meta b { color: var(--ozc-ink); font-size: 0.9375rem; }
.ozc-module__toggle { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ozc-ink); position: relative; transition: background-color var(--ozc-fast); }
.ozc-module__toggle::before,
.ozc-module__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ozc-ink); transform: translate(-50%, -50%); transition: transform var(--ozc-base) var(--ozc-ease), background-color var(--ozc-fast); }
.ozc-module__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.ozc-module[aria-pressed="true"] { border-color: var(--ozc-ink); }
.ozc-module[aria-pressed="true"] .ozc-module__toggle { background: var(--ozc-ink); }
.ozc-module[aria-pressed="true"] .ozc-module__toggle::before { background: var(--ozc-surface); width: 6px; transform: translate(-95%, 0) rotate(45deg); }
.ozc-module[aria-pressed="true"] .ozc-module__toggle::after { background: var(--ozc-surface); width: 11px; transform: translate(-30%, -30%) rotate(-45deg); }

/* step 4: summary */
.ozc-sum { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--ozc-line); }
.ozc-sum li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--ozc-line); font-variant-numeric: tabular-nums; }
.ozc-sum__swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--swatch); }
.ozc-sum__tab { width: 18px; height: 12px; border-radius: 0 4px 4px 0; background: var(--tab); }
.ozc-addons { margin-bottom: 1.5rem; }
.ozc-addon {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 56px;
	padding: 0.75rem 1rem;
	border-radius: 14px;
	border: 1.5px solid var(--ozc-line);
	background: var(--ozc-surface);
	color: var(--ozc-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.ozc-addon small { display: block; color: var(--ozc-muted); }
.ozc-addon[aria-pressed="true"] { border-color: var(--ozc-ink); box-shadow: inset 0 0 0 1px var(--ozc-ink); }
.ozc-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1rem; }
.ozc-totals div { background: var(--ozc-surface); border-radius: 14px; padding: 0.75rem 1rem; }
.ozc-totals dt { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ozc-muted); }
.ozc-totals dd { margin: 0.2rem 0 0; font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ozc-totals .is-total { background: var(--ozc-ink); color: var(--ozc-surface); }
.ozc-totals .is-total dt { color: #A7ABAE; }
.ozc-note { font-size: 0.8125rem; color: var(--ozc-muted); }
.ozc-note.is-error { color: #A4342A; font-weight: 500; }
.ozc-note.is-warn { margin: -0.75rem 0 1.5rem; padding: 0.8rem 1rem; border-radius: 12px; background: #FBF1DE; color: #6B4A12; font-size: 0.875rem; line-height: 1.45; }
.ozc-note.is-warn strong { display: block; color: #4F360A; }
.ozc-capacity.is-over { border-color: #E3B461; }
.ozc-capacity.is-over .ozc-capacity__bar { background: #F6DFB3; }
.ozc-sum__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.ozc-link { background: none; border: 0; padding: 0.5rem 0; min-height: 44px; font: inherit; font-size: 0.9375rem; color: var(--ozc-ink); text-decoration: underline; cursor: pointer; }

/* bottom bar */
.ozc__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
	padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
	background: var(--ozc-surface);
	border-top: 1px solid var(--ozc-line);
}
.ozc__summary-toggle { display: grid; justify-items: start; gap: 0.1rem; background: none; border: 0; padding: 0.25rem 0; color: var(--ozc-ink); font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.ozc__total { font: 700 1.375rem/1.1 var(--wp--preset--font-family--display, sans-serif); font-variant-numeric: tabular-nums; }
.ozc__sub { font-size: 0.8125rem; color: var(--ozc-muted); font-variant-numeric: tabular-nums; }
.ozc__nav { display: flex; gap: 0.5rem; }
.ozc__nav .oz-btn { min-width: 112px; }
.ozc__nav [hidden] { display: none; }

/* ---- mobile: product on top, options below, bar under the thumb ---- */
@media (max-width: 899px) {
	.ozc { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }
	.ozc__stage {
		--stage-h: 42svh;
		position: sticky;
		top: 0;
		z-index: 20;
		height: var(--stage-h);
		grid-template-rows: minmax(0, 1fr) auto;
		align-content: stretch;
		gap: 0.5rem;
		padding: 1rem;
		transition: height var(--ozc-base) var(--ozc-ease), padding var(--ozc-base) var(--ozc-ease);
		border-radius: 0 0 24px 24px;
		box-shadow: 0 8px 20px -18px rgba(0, 0, 0, 0.5);
	}
	.ozc__visual { min-height: 0; }
	/* width derived from the stage height: container-type needs an explicit width */
	.ozc__visual .ozv { width: calc((var(--stage-h) - 3.6rem) * 0.86); max-width: 100%; transition: width var(--ozc-base) var(--ozc-ease); }
	.ozc.is-compact .ozc__stage { --stage-h: 140px; padding-block: 0.6rem; }
	.ozc.is-compact .ozc__caption { font-size: 0.75rem; }
	.ozc__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, 0.4); }
	.ozc__nav [data-oz-back] { display: none; }
	.ozc-cards { grid-template-columns: minmax(0, 1fr); }
	.ozc-card { min-height: 0; }
	.ozc-module__desc { display: none; }
}

/* ---- desktop: large product left, panel right with sticky bar ---- */
@media (min-width: 900px) {
	.ozc {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.9fr);
		grid-template-rows: 1fr auto;
		min-height: calc(100svh - var(--oz-header-h, 72px));
	}
	.ozc__stage {
		grid-row: 1 / span 2;
		position: sticky;
		top: var(--oz-header-h, 72px);
		height: calc(100svh - var(--oz-header-h, 72px));
		padding: 3rem;
	}
	.admin-bar .ozc__stage { top: calc(var(--oz-header-h, 72px) + 32px); height: calc(100svh - var(--oz-header-h, 72px) - 32px); }
	.ozc__visual .ozv { width: min(440px, 70%); }
	.ozc__panel { padding-top: 2rem; max-width: 620px; }
	.ozc__bar { position: sticky; bottom: 0; grid-column: 2; }
}

/* ==========================================================================
   Inquiry form (Dla firm)
   ========================================================================== */
.oz-form { display: grid; gap: 1rem; max-width: 760px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--ozc-surface, #fff); border: 1px solid var(--ozc-line); border-radius: 22px; }
.oz-form label { display: grid; gap: 0.35rem; font-size: 0.9375rem; font-weight: 600; }
.oz-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.oz-form :is(input[type=text], input[type=email], input[type=tel], select, textarea) { font: inherit; font-weight: 400; width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; border: 1px solid var(--ozc-line); border-radius: 12px; background: var(--ozc-paper, #F4F4F1); color: var(--ozc-ink); box-sizing: border-box; }
.oz-form textarea { min-height: 9rem; resize: vertical; }
.oz-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--ozc-ink); outline-offset: 1px; }
.oz-form__needs { border: 0; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.oz-form__needs legend { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; padding: 0; }
.oz-form label.oz-form__check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.oz-form__check input { width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--ozc-ink); flex: none; }
.oz-form__consent { font-size: 0.875rem !important; color: var(--ozc-muted); }
.oz-form button[type=submit] { justify-self: start; }
.oz-form__alt { margin: 0; font-size: 0.9375rem; color: var(--ozc-muted); }
.oz-form__error { margin: 0; padding: 0.8rem 1rem; border-radius: 12px; background: #FBEDEA; color: #8A2A1F; }
.oz-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.oz-form--done .oz-form__title { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; margin: 0; }
.oz-form--done p { margin: 0; }

/* =========================================================
   Newsletter form
   ========================================================= */
.oz-nl { display: grid; gap: 0.75rem; max-width: 34rem; }
.oz-nl__row { display: flex; gap: 0.5rem; padding: 0.35rem; border-radius: 999px; background: var(--wp--preset--color--surface, #fff); border: 1.5px solid var(--wp--preset--color--line, #DEDFDA); transition: border-color 160ms ease; }
.oz-nl__row:focus-within { border-color: var(--wp--preset--color--ink, #141517); }
.oz-nl__field { flex: 1; min-width: 0; display: flex; }
.oz-nl__field input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; padding: 0 0.9rem; font: inherit; font-size: 1rem; color: inherit; outline: none; }
.oz-nl__btn { flex: none; min-height: 44px; padding: 0 1.3rem; border: 0; border-radius: 999px; background: var(--wp--preset--color--ink, #141517); color: #fff; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform 160ms ease, opacity 160ms ease; }
.oz-nl__btn:active { transform: scale(0.97); }
.oz-nl.is-busy .oz-nl__btn { opacity: 0.6; cursor: progress; }
.oz-nl__consent { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.8125rem; line-height: 1.45; color: var(--wp--preset--color--muted, #5B6065); cursor: pointer; }
.oz-nl__consent input { flex: none; width: 1.05rem; height: 1.05rem; margin: 0.1rem 0 0; accent-color: var(--wp--preset--color--ink, #141517); }
.oz-nl__consent a { color: inherit; }
.oz-nl__status { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.oz-nl__status:empty { display: none; }
.oz-nl__status[data-state="ok"] { color: var(--wp--preset--color--accent, #2F6B5A); }
.oz-nl__status[data-state="error"] { color: #B3261E; }
.oz-nl.is-done .oz-nl__row, .oz-nl.is-done .oz-nl__consent { display: none; }
.oz-nl.is-done .oz-nl__status { padding: 0.9rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--wp--preset--color--accent, #2F6B5A) 10%, transparent); }
@media (max-width: 480px) {
	.oz-nl__row { flex-direction: column; border-radius: 18px; }
	.oz-nl__btn { width: 100%; }
}

/* =========================================================
   Countdown and cover colours (coming soon)
   ========================================================= */
.oz-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 5.5rem)); gap: 0.6rem; margin-block: 2rem; }
.oz-cd__cell { display: grid; justify-items: center; gap: 0.2rem; padding: 0.9rem 0.4rem 0.7rem; border-radius: 18px; background: var(--wp--preset--color--surface, #fff); border: 1px solid var(--wp--preset--color--line, #DEDFDA); }
.oz-cd__num { font-family: var(--wp--preset--font-family--display, inherit); font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.oz-cd__label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted, #5B6065); }
.oz-cd.is-live .oz-cd__cell { background: var(--wp--preset--color--accent, #2F6B5A); color: #fff; border-color: transparent; }
.oz-cd.is-live .oz-cd__label { color: rgb(255 255 255 / .75); }

.oz-cycle { display: grid; justify-items: center; gap: 1.1rem; }
.oz-cycle__stage { width: min(100%, 420px); }
.oz-cycle .ozv__cover { transition: background-color 700ms var(--ozc-ease, ease); }
.oz-cycle__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.oz-cycle__dot { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: var(--dot); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.oz-cycle__dot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--wp--preset--color--paper, #F4F4F1), 0 0 0 5px var(--dot); transform: scale(1.05); }
.oz-cycle__name { margin: 0; font-size: 0.9375rem; color: var(--wp--preset--color--muted, #5B6065); }
.oz-cycle__name span { color: var(--wp--preset--color--ink, #141517); font-weight: 600; }

/* =========================================================
   Cover photos (cut-out) replacing the drawn cover
   ========================================================= */
.ozv.has-photo { aspect-ratio: 0.91; }
.ozv:not(.has-photo) .ozv__photo { display: none; }
.ozv.has-photo .ozv__cover { background: none; box-shadow: none; border-radius: 0; }
.ozv.has-photo .ozv__cover::after,
.ozv.has-photo .ozv__emboss,
.ozv.has-photo .ozv__strap { display: none; }
.ozv.has-photo .ozv__paper { top: 3.5%; bottom: 3.5%; right: 13%; }
.ozv__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	filter: drop-shadow(0 24px 22px rgb(20 20 20 / .26)) drop-shadow(0 2px 3px rgb(20 20 20 / .14));
	user-select: none;
	-webkit-user-drag: none;
	animation: ozv-photo-in 420ms var(--ozc-ease);
}
@keyframes ozv-photo-in { from { opacity: 0.4; } }

/* =========================================================
   Insert peek: a small round crop, never the whole page
   ========================================================= */
.oz-peek { position: absolute; z-index: 5; }
.oz-peek__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--ozc-line);
	background: var(--ozc-surface);
	color: var(--ozc-ink);
	cursor: zoom-in;
	transition: border-color var(--ozc-fast), transform var(--ozc-fast) var(--ozc-ease);
}
.oz-peek__btn:hover, .oz-peek.is-open .oz-peek__btn { border-color: var(--ozc-ink); transform: scale(1.06); }
.oz-peek__btn svg { width: 17px; height: 17px; }
.oz-peek__lens {
	position: absolute;
	top: calc(100% + 8px);
	right: -6px;
	width: 200px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 5px var(--ozc-surface), 0 0 0 6.5px var(--ozc-line), 0 22px 44px -12px rgb(20 20 20 / .35);
	opacity: 0;
	transform: scale(0.6);
	transform-origin: calc(100% - 24px) -20px;
	pointer-events: none;
	transition: opacity var(--ozc-fast) linear, transform var(--ozc-base) var(--ozc-ease);
}
.oz-peek__lens img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.oz-peek__cap { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ozc-muted); }
.oz-peek__cap span { padding: 0.2rem 0.5rem; border-radius: 999px; background: rgb(255 255 255 / .9); }
.oz-peek.is-open .oz-peek__lens { opacity: 1; transform: scale(1); pointer-events: auto; }
@media (hover: hover) {
	.oz-peek:hover .oz-peek__lens { opacity: 1; transform: scale(1); }
}
/* On cards the lens opens inside the card, so the scrolling strip cannot clip it. */
.oz-mcard .oz-peek { display: contents; }
.oz-mcard .oz-peek__btn { position: absolute; top: 0.85rem; right: 2.5rem; }
.oz-mcard .oz-peek__lens { top: 3.6rem; right: auto; left: 50%; width: 180px; margin-left: -90px; transform-origin: 75% -10px; }
/* Configurator rows: the peek button sits left of the +/− toggle. */
.ozc-modrow { position: relative; }
.ozc-module.has-peek { grid-template-columns: minmax(0, 1fr) auto 36px 32px; }
.ozc-modrow .oz-peek { top: 50%; right: calc(0.85rem + 32px + 0.75rem); transform: translateY(-50%); margin-top: -0.225rem; }
.ozc-modrow .oz-peek__lens { z-index: 20; }

/* =========================================================
   Poradnik: inserts from the article, year in weeks
   ========================================================= */
.oz-picks { margin-block: 2rem; }
.oz-picks__title { margin: 0 0 .75rem; font: 700 .75rem/1.2 var(--wp--preset--font-family--display, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ozc-muted); }
.oz-picks__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .6rem; }
@media (max-width: 600px) { .oz-picks__row { grid-template-columns: 1fr 1fr; } .oz-picks__lens { width: 44px; height: 44px; } .oz-picks__card { gap: .6rem; padding: .55rem; } }
.oz-picks__card { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem .7rem .7rem; border-radius: 16px; background: var(--ozc-surface); border: 1px solid var(--ozc-line); color: inherit; text-decoration: none; transition: border-color var(--ozc-fast), transform var(--ozc-fast); }
.oz-picks__card:hover { border-color: var(--ozc-ink); transform: translateY(-1px); }
.oz-picks__lens { flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--tab); box-shadow: inset 0 0 0 3px var(--tab); }
.oz-picks__lens { border: 3px solid var(--tab); box-shadow: none; }
.oz-picks__lens img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); transform-origin: 40% 40%; pointer-events: none; }
.oz-picks__body { display: grid; gap: .15rem; min-width: 0; }
.oz-picks__name { font-weight: 700; line-height: 1.2; }
.oz-picks__meta { font-size: .85rem; color: var(--ozc-muted); }

.oz-year { margin: 1.75rem 0; padding: 1.25rem; border-radius: 16px; background: var(--ozc-surface); border: 1px solid var(--ozc-line); }
.oz-year__label { margin-bottom: .75rem; font: 700 .75rem/1.2 var(--wp--preset--font-family--display, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ozc-muted); }
.oz-year__grid { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; }
.oz-year__w { aspect-ratio: 1; border-radius: 3px; background: var(--ozc-accent); }
.oz-year__w.is-lost { background: transparent; box-shadow: inset 0 0 0 1.5px #C9A9A0; background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(194,65,45,.28) 3px 4px); }
.oz-year__w.is-skip { background: transparent; box-shadow: inset 0 0 0 1px var(--ozc-line); opacity: .45; }
.oz-year__sum { margin: .75rem 0 0; font-weight: 700; }
.oz-year.is-dated .oz-year__sum { color: #A63A28; }
.oz-year.is-undated .oz-year__sum { color: var(--ozc-accent); }
@media (min-width: 700px) { .oz-year__grid { grid-template-columns: repeat(26, 1fr); } }

/* =========================================================
   Motion (assets/js/motion.js). Everything here only applies
   when JS added .oz-motion, i.e. never with reduced motion.
   ========================================================= */
.oz-motion [data-oz-reveal] {
	opacity: 0;
	transform: translate3d(0, 34px, 0) scale(0.985);
	filter: blur(6px);
	transition:
		opacity 900ms var(--ozc-ease) var(--oz-d, 0ms),
		transform 1100ms cubic-bezier(.16, 1, .3, 1) var(--oz-d, 0ms),
		filter 900ms var(--ozc-ease) var(--oz-d, 0ms);
}
.oz-motion [data-oz-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Hero: headline words rise out of a mask, organizer floats in and tabs fan out */
.oz-motion .oz-hero__title .oz-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.oz-motion .oz-hero__title .oz-w > span { display: inline-block; transform: translateY(105%); transition: transform 1000ms cubic-bezier(.16, 1, .3, 1) calc(120ms + var(--i) * 90ms); }
.oz-motion .oz-hero.is-played .oz-hero__title .oz-w > span { transform: none; }
.oz-motion .oz-hero.is-intro .is-style-spec,
.oz-motion .oz-hero.is-intro .oz-lead,
.oz-motion .oz-hero.is-intro .wp-block-buttons { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ozc-ease), transform 900ms cubic-bezier(.16, 1, .3, 1); }
.oz-motion .oz-hero.is-intro .oz-lead { transition-delay: 380ms; }
.oz-motion .oz-hero.is-intro .wp-block-buttons { transition-delay: 520ms; }
.oz-motion .oz-hero.is-played .is-style-spec,
.oz-motion .oz-hero.is-played .oz-lead,
.oz-motion .oz-hero.is-played .wp-block-buttons { opacity: 1; transform: none; }

.oz-motion .oz-hero.is-intro .ozv { opacity: 0; translate: 0 40px; rotate: 4deg; transition: opacity 1000ms var(--ozc-ease) 200ms, translate 1400ms cubic-bezier(.16, 1, .3, 1) 200ms, rotate 1400ms cubic-bezier(.16, 1, .3, 1) 200ms; }
.oz-motion .oz-hero.is-played .ozv { opacity: 1; translate: 0 calc(var(--oz-scroll, 0) * -70px); rotate: calc(var(--oz-scroll, 0) * -5deg); }
.oz-motion .oz-hero.is-intro .ozv__tab { transform: translateX(-70%); opacity: 0; transition: transform 800ms cubic-bezier(.16, 1, .3, 1), opacity 500ms var(--ozc-ease); transition-delay: calc(900ms + var(--i, 0) * 110ms); }
.oz-motion .oz-hero.is-played .ozv__tab { transform: none; opacity: 1; }
.oz-motion .oz-hero.is-played .ozv__paper { transition: width 600ms var(--ozc-ease); }

/* Pointer tilt with a soft moving highlight */
.oz-tilt { perspective: 1100px; }
.oz-tilt .ozv { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.oz-tilt .ozv.is-tilting { transition-duration: 160ms; }
.oz-tilt .ozv__cover::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(40% 35% at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .22), transparent 70%);
	opacity: 0;
	transition: opacity 400ms var(--ozc-ease);
	pointer-events: none;
	z-index: 1;
}
.oz-tilt .ozv.is-tilting .ozv__cover::before { opacity: 1; }
.oz-tilt .ozv.is-tilting .ozv__tab { transform: translateX(calc(var(--i, 0) * 0px + 6%)); }

/* Tabs peek out a little more on hover anywhere */
@media (hover: hover) {
	.ozv__tab { transition: transform 420ms cubic-bezier(.16, 1, .3, 1), opacity var(--ozc-base) var(--ozc-ease); }
	.oz-kit:hover .ozv__tab { transform: translateX(8%); }
	.oz-kit:hover .ozv__tab:nth-child(2) { transition-delay: 40ms; }
	.oz-kit:hover .ozv__tab:nth-child(3) { transition-delay: 80ms; }
	.oz-kit:hover .ozv__tab:nth-child(4) { transition-delay: 120ms; }
	.oz-kit:hover .ozv__tab:nth-child(5) { transition-delay: 160ms; }
}

/* Magnetic buttons */
.oz-magnet { translate: var(--mx, 0px) var(--my, 0px); transition: translate 380ms cubic-bezier(.16, 1, .3, 1), background-color var(--ozc-fast), box-shadow 300ms; }
.oz-magnet:hover { box-shadow: 0 14px 30px -14px rgba(20, 21, 23, .55); }

/* =========================================================
   Homepage scroll story (organizo/story)
   ========================================================= */
.oz-story {
	--story-bg: #121315;
	position: relative;
	background: var(--story-bg);
	color: #EDEDEA;
	padding-inline: var(--wp--style--root--padding-left, 1.25rem) var(--wp--style--root--padding-right, 1.25rem);
	overflow: clip;
}
.oz-story__inner { max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: 1fr; }
.oz-story__stage { display: none; }
.oz-story__steps { list-style: none; margin: 0; padding: clamp(3rem, 8vw, 6rem) 0; display: grid; gap: 2.5rem; }
.oz-story__no { margin: 0 0 .75rem; font: 700 .8rem/1 var(--wp--preset--font-family--display, sans-serif); letter-spacing: .14em; color: #8E9398; }
.oz-story__title { margin: 0 0 .75rem; color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.025em; }
.oz-story__text { margin: 0; max-width: 34ch; color: #B9BDC0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; }
.oz-story__cta { margin: 2rem 0 0; }
.oz-story__cta .wp-block-button__link { background: #fff; color: #141517; }

.oz-story.is-live .oz-story__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); }
.oz-story.is-live .oz-story__steps { padding: 0; gap: 0; order: -1; }
.oz-story.is-live .oz-story__step { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transform: translateY(12px); transition: opacity 600ms var(--ozc-ease), transform 800ms cubic-bezier(.16, 1, .3, 1); }
.oz-story.is-live .oz-story__step { padding-block: 20vh; box-sizing: border-box; }
.oz-story.is-live .oz-story__step:first-child { min-height: 92vh; }
.oz-story.is-live .oz-story__step:last-child { min-height: 100vh; }
.oz-story.is-live .oz-story__step.is-active { opacity: 1; transform: none; }
.oz-story.is-live .oz-story__stage {
	display: grid;
	place-items: center;
	position: sticky;
	top: calc(var(--oz-header-h, 72px) + 2vh);
	height: calc(100vh - var(--oz-header-h, 72px) - 4vh);
	isolation: isolate;
}
.oz-story__visual { width: min(100%, 440px); transition: transform 900ms cubic-bezier(.16, 1, .3, 1); transform: rotate(calc(-3deg + var(--oz-story-t, 0) * 3deg)); }
.oz-story__visual .ozv { --ozv-w: 440px; }
.oz-story__visual .ozv__tab > span { display: block; }
.oz-story__glow {
	position: absolute;
	inset: 12% 8%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--glow, #6BA38F) 55%, transparent), transparent);
	filter: blur(40px);
	opacity: .55;
	transition: background 800ms var(--ozc-ease);
}
.oz-story[data-cover="black"] { --glow: #6c6f75; }
.oz-story[data-cover="brown"] { --glow: #8A4A2C; }
.oz-story[data-cover="dark-blue"] { --glow: #2F57B8; }
.oz-story[data-cover="light-blue"] { --glow: #9DBDCF; }
.oz-story[data-cover="green"] { --glow: #6BA38F; }
.oz-story[data-cover="purple"] { --glow: #7E5FA8; }
.oz-story[data-cover="pink"] { --glow: #D6A2A4; }
.oz-story[data-cover="grey"] { --glow: #8B8E8F; }
.oz-story__meter {
	position: absolute;
	bottom: 4%;
	left: 50%;
	translate: -50% 0;
	display: flex;
	gap: .5rem;
	margin: 0;
	font: 600 .85rem/1 var(--wp--preset--font-family--body, sans-serif);
	white-space: nowrap;
}
.oz-story__meter span { padding: .55rem .9rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); }
.oz-story[data-scene="cover"] .oz-story__meter { opacity: 0; }
.oz-story__meter { transition: opacity 500ms var(--ozc-ease); }

@media (max-width: 859px) {
	.oz-story.is-live .oz-story__inner { grid-template-columns: 1fr; gap: 0; }
	.oz-story.is-live .oz-story__stage { order: -2; top: 0; height: 54vh; z-index: 1; background: linear-gradient(var(--story-bg) 94%, transparent); }
	.oz-story__visual { width: min(56vw, 220px); margin-top: -4vh; }
	.oz-story.is-live .oz-story__step { min-height: 70vh; justify-content: flex-start; padding-top: 4vh; }
	.oz-story.is-live .oz-story__step:first-child { min-height: 60vh; padding-top: 4vh; }
	.oz-story.is-live .oz-story__step:last-child { min-height: 0; padding-bottom: 10vh; }
	.oz-story__meter { font-size: .75rem; bottom: 8%; }
	.oz-story.is-live .oz-story__step:not(.is-active) { opacity: 0; }
}

/* Scroll-linked extras */
.oz-motion .oz-open img, .oz-motion .oz-crop img, .oz-motion .oz-article__hero img { translate: 0 var(--py, 0px); scale: 1.06; transition: translate 120ms linear; }
.oz-lead.is-scrub .oz-scrub { color: currentColor; opacity: .18; transition: opacity 350ms var(--ozc-ease); }
.oz-lead.is-scrub .oz-scrub.is-lit { opacity: 1; }

/* =========================================================
   /wklady/ catalog: filter chips + category sections
   ========================================================= */
.oz-catalog__filters { position: relative; margin: 0 calc(var(--wp--style--root--padding-left, 1rem) * -1) 2rem; padding-inline: var(--wp--style--root--padding-left, 1rem); overflow-x: auto; scrollbar-width: none; }
.oz-catalog__filters::-webkit-scrollbar { display: none; }
.oz-catalog__filters ul { display: flex; gap: .5rem; width: max-content; list-style: none; margin: 0; padding: .25rem 0; }
.oz-catalog__chip { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--ozc-line); background: var(--ozc-surface); color: var(--ozc-ink); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.oz-catalog__chip span { font-weight: 500; font-size: .8125rem; color: var(--ozc-muted); font-variant-numeric: tabular-nums; }
.oz-catalog__chip:hover { border-color: var(--ozc-ink); }
.oz-catalog__chip[aria-current="true"] { background: var(--ozc-ink); border-color: var(--ozc-ink); color: #fff; }
.oz-catalog__chip[aria-current="true"] span { color: rgb(255 255 255 / .7); }
.oz-catalog__grid > [hidden] { display: none; }
.oz-catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.oz-mcard__name a { color: inherit; text-decoration: none; }
.oz-mcard__name a:hover { text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 600px) { .oz-catalog__grid { grid-template-columns: 1fr 1fr; gap: .75rem; } .oz-catalog__grid .oz-mcard { padding: 1rem .9rem .9rem; } .oz-catalog__grid .oz-mcard__name { font-size: 1.05rem; } .oz-catalog__grid .oz-mcard__desc { font-size: .85rem; } .oz-catalog__grid .oz-mcard__config { white-space: normal; text-align: center; font-size: .8rem; } .oz-catalog__grid .oz-mcard__buy { padding: 0 .5rem; } }
.oz-catalog__grid .oz-mcard__meta { flex-wrap: wrap; gap: 0 .5rem; }
@media (max-width: 600px) { .oz-catalog__grid .oz-mcard__group { padding-right: 4.25rem; font-size: .65rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oz-catalog__grid .oz-mcard__meta span { font-size: .85rem; } }
.oz-mcard__badge { display: inline-block; margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px; background: var(--ozc-ink); color: #fff; font-size: .62rem; letter-spacing: .08em; vertical-align: 1px; }
.oz-mcard.is-soon .oz-mcard__meta strong { color: var(--ozc-muted); font-weight: 600; }
.oz-product__soon { margin: 0; padding: .9rem 1.1rem; border-radius: 14px; background: var(--ozc-surface, #fff); border: 1px dashed var(--ozc-line); }
.oz-product--upcoming .oz-product__trust { display: none; }