/* =========================================================
   Ombelo — main.css
   Tokens · base · header · footer · buttons · chips · notch card
   ========================================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
	font-family: "Sora";
	src: url("../fonts/sora-var.woff2") format("woff2");
	font-weight: 100 800;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/plex-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/plex-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--om-ink: #17161c;
	--om-ink-60: #5d5b66;
	/* The quiet tier. It was #8f8d99, which is 3.26:1 on white and 3.1:1 on the
	   canvas — under the 4.5:1 AA floor, and it is used for 68 pieces of small
	   copy: footer headings, the shop result count, struck sale prices, order
	   table headers, form hints. One token was failing on all fifteen surfaces.
	   #6b6976 keeps the same cool grey-violet cast but clears AA against every
	   background the theme actually puts it on — white 5.37:1, canvas 5.11:1,
	   surface 4.71:1 — with room to spare rather than sitting on the line. Five
	   hover borders also reference this token; a darker hairline is no loss. */
	--om-ink-40: #6b6976;
	--om-canvas: #faf9f7;
	--om-surface: #f1f0ec;
	--om-line: #e6e4de;
	--om-white: #ffffff;
	--om-indigo: #5750fd;
	--om-indigo-deep: #4038e0;
	--om-indigo-wash: #edecfe;
	--om-lav: #e8e4fa;
	--om-cream: #faeedd;
	--om-mint: #dcefe6;
	--om-peach: #fde3d3;
	--om-blush: #fbe3ea;
	--om-amber: #f5a524;

	--om-display: "Sora", system-ui, sans-serif;
	--om-body: "Hanken Grotesk", system-ui, sans-serif;
	--om-mono: "IBM Plex Mono", ui-monospace, monospace;

	--om-radius: 20px;
	--om-radius-sm: 12px;
	--om-shadow: 0 1px 2px rgba(23, 22, 28, 0.04), 0 12px 32px -12px rgba(23, 22, 28, 0.14);
	--om-shadow-lift: 0 2px 4px rgba(23, 22, 28, 0.05), 0 24px 48px -16px rgba(23, 22, 28, 0.22);

	/* Color behind a notched card — sections override this. */
	--om-behind: var(--om-canvas);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	font-family: var(--om-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--om-ink);
	background: var(--om-canvas);
}
img {
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
}
h1,
h2,
h3,
h4 {
	font-family: var(--om-display);
	line-height: 1.15;
	margin: 0 0 0.5em;
	letter-spacing: -0.02em;
}
p {
	margin: 0 0 1em;
}
:focus-visible {
	outline: 2px solid var(--om-indigo);
	outline-offset: 2px;
	border-radius: 4px;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.om-skip {
	position: absolute;
	left: 12px;
	top: -48px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--om-ink);
	color: var(--om-white);
	border-radius: 0 0 10px 10px;
	text-decoration: none;
	transition: top 0.15s ease;
}
.om-skip:focus {
	top: 0;
}

.om-shell {
	max-width: 96rem;
	margin-inline: auto;
	padding-inline: clamp(24px, 3vw, 48px);
}

/* ---------- Promo bar ---------- */
.om-promo {
	background: var(--om-ink);
	color: rgba(250, 249, 247, 0.85);
	text-align: center;
	font-size: 0.85rem;
	padding: 9px 16px;
}
.om-promo p {
	margin: 0;
}
.om-promo strong {
	color: var(--om-white);
	font-family: var(--om-mono);
	font-weight: 500;
	background: rgba(87, 80, 253, 0.35);
	padding: 2px 8px;
	border-radius: 6px;
}

/* ---------- Header ---------- */
.om-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--om-white);
	border-bottom: 1px solid var(--om-line);
}
.om-header__row {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 68px;
}
.om-brand {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.om-brand__img {
	display: block;
	width: auto;
	height: 34px;
	max-height: 34px;
	object-fit: contain;
}
.om-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}
.om-nav__list {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.om-nav__list a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--om-ink-60);
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
}
.om-nav__list a:hover {
	color: var(--om-ink);
	background: var(--om-surface);
}
.om-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.om-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	color: var(--om-ink);
	transition: background 0.15s ease;
}
.om-icon-link:hover {
	background: var(--om-surface);
}
/* The glyph is 20px centred in a 40px hit box, so pinning the bubble to the box
   corner leaves it floating in the padding, a good 10px clear of the bag. It has
   to come in far enough to read as attached — but no further: the bag's handle
   runs to 22.5px across the box, and a bubble that crosses it turns the bag into
   a hook. At 14px on the right edge the ring stops at 24px, so it kisses the
   bag's top-right corner and leaves the handle whole. */
.om-cart-link__count {
	position: absolute;
	top: 3px;
	right: 0;
	min-width: 14px;
	height: 14px;
	padding-inline: 3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--om-indigo);
	color: var(--om-white);
	font-family: var(--om-mono);
	font-size: 0.58rem;
	line-height: 1;
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--om-white);
}
.om-icon-link:hover .om-cart-link__count {
	box-shadow: 0 0 0 2px var(--om-surface);
}
/* The element stays for WooCommerce's fragment selector even when the cart is
   empty, so the hidden attribute has to beat the display above. */
.om-cart-link__count[hidden] {
	display: none;
}
.om-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--om-ink);
	cursor: pointer;
}
.om-burger:hover {
	background: var(--om-surface);
}

/* ---------- Currency switch (India only) ----------

   A segmented pill rather than a dropdown: there are exactly two states, and a
   select would hide the one the visitor is not in behind a click. It sits left
   of the account and cart glyphs so it reads as a setting rather than a third
   destination, and it is built by assets/js/currency.js — so it exists only for
   the visitors it is meant for.

   The unselected half stays quiet. This is a preference, not a call to action,
   and it must never out-shout the buy button further down the page. */
.om-header__currency {
	display: flex;
	margin-right: 4px;
}
.om-currency {
	display: inline-flex;
	align-items: center;
	padding: 2px;
	border: 1px solid var(--om-line);
	border-radius: 999px;
	background: var(--om-canvas);
}
.om-currency__btn {
	border: 0;
	padding: 5px 10px;
	border-radius: 999px;
	background: none;
	color: var(--om-ink-40);
	font-family: var(--om-body);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}
.om-currency__btn:hover {
	color: var(--om-ink);
}
.om-currency__btn[aria-pressed="true"] {
	background: var(--om-white);
	color: var(--om-ink);
	box-shadow: 0 1px 2px rgba(23, 22, 28, 0.08);
	cursor: default;
}

/* The line that keeps the conversion honest. It is attached to the cart and
   checkout totals — where somebody is about to hand over a card — so it is
   styled to be read rather than skipped, sitting under the total it qualifies. */
.om-currency__note {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: var(--om-radius-sm);
	background: var(--om-indigo-wash);
	color: var(--om-ink-60);
	font-size: 0.82rem;
	line-height: 1.45;
}

/* ---------- Buttons ---------- */
.om-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 14px;
	border: 1px solid transparent;
	font-family: var(--om-body);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.om-btn--primary {
	background: var(--om-indigo);
	color: var(--om-white);
}
.om-btn--primary:hover {
	background: var(--om-indigo-deep);
}
.om-btn--ghost {
	border-color: var(--om-line);
	color: var(--om-ink);
	background: transparent;
}
.om-btn--ghost:hover {
	border-color: var(--om-ink);
}
/* The black button both cart references end on. */
.om-btn--ink {
	background: var(--om-ink);
	color: var(--om-white);
}
.om-btn--ink:hover {
	background: #000;
}

/* ---------- Chips (file extensions) ---------- */
.om-chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 8px;
	background: var(--om-indigo-wash);
	color: var(--om-indigo-deep);
	font-family: var(--om-mono);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
}
.om-chip--solid {
	background: var(--om-indigo);
	color: var(--om-white);
}
/* Shown instead of stars until a product has real reviews. */
.om-chip--new {
	background: var(--om-mint);
	color: #1f6b52;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 3px 9px;
}

/* ---------- Category tones ----------
   One pastel per category slug, exposed as --om-pastel so chips, headers and
   badges on any page can tint themselves without repeating the map. */
.om-tone--webapp           { --om-pastel: var(--om-indigo-wash); }
.om-tone--notion-templates { --om-pastel: var(--om-lav); }
.om-tone--pdf-templates    { --om-pastel: var(--om-peach); }
.om-tone--excel-templates  { --om-pastel: var(--om-mint); }
.om-tone--2d-design-assets { --om-pastel: var(--om-blush); }
.om-tone--3d-models        { --om-pastel: var(--om-indigo-wash); }
.om-tone--digital-goods    { --om-pastel: var(--om-cream); }

/* ---------- Notched card (from the logo's scooped "O") ---------- */
.om-file {
	position: relative;
	background: var(--om-white);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-file__tab {
	position: absolute;
	right: -6px;
	bottom: -6px;
	z-index: 2;
	line-height: 0;
}
.om-file__tab .om-chip {
	box-shadow: 0 0 0 6px var(--om-behind);
}

/* ---------- Sections ---------- */
.om-section {
	padding-block: 96px;
}
.om-section--tint {
	background: var(--om-surface);
	--om-behind: var(--om-surface);
}
.om-section__head {
	position: relative;
	margin-bottom: 48px;
}
.om-eyebrow {
	font-family: var(--om-mono);
	font-size: 0.78rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--om-ink-60);
	margin: 0 0 12px;
}
.om-eyebrow--light {
	color: rgba(250, 249, 247, 0.6);
}
.om-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 2px;
	background: var(--om-indigo);
	vertical-align: middle;
	margin-right: 10px;
}
.om-section__title {
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 600;
	max-width: 22ch;
}
.om-section__more {
	position: absolute;
	right: 0;
	bottom: 0;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--om-indigo-deep);
	text-decoration: none;
}
.om-section__more:hover {
	text-decoration: underline;
}

/* ---------- Stars / badges / avatars ---------- */
.om-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--om-ink);
}
.om-stars__glyphs {
	color: var(--om-amber);
	letter-spacing: 2px;
	font-size: 0.9rem;
}
.om-stars__count {
	color: var(--om-ink-40);
	font-weight: 500;
}
/* Five stars with a partial fill — used wherever a real average is shown. */
.om-rate {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: 2px;
	font-size: 0.95rem;
	color: var(--om-line);
}
.om-rate__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	color: var(--om-amber);
}
.om-rate--lg {
	font-size: 1.35rem;
	letter-spacing: 3px;
}

/* Small status pill (mint = good news). */
.om-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
}
.om-pill--mint {
	background: var(--om-mint);
	color: #1f6b52;
}
/* Amber = "Coming soon" on a category that has no products yet. */
.om-pill--soon {
	background: var(--om-amber);
	color: var(--om-ink);
	font-family: var(--om-body);
	white-space: nowrap;
}

.om-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--om-amber);
	color: var(--om-ink);
	font-family: var(--om-mono);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 5px 10px;
	border-radius: 8px;
}
.om-avatars {
	display: inline-flex;
}
.om-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid var(--om-canvas);
	margin-left: -10px;
	font-family: var(--om-display);
	font-style: normal;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--om-white);
}
.om-avatar:first-child {
	margin-left: 0;
}
.om-avatar--ink { background: var(--om-ink); }
.om-avatar--indigo { background: var(--om-indigo); }
.om-avatar--mint { background: #3f9d78; }
.om-avatar--amber { background: var(--om-amber); color: var(--om-ink); }
.om-avatar--more { background: var(--om-white); color: var(--om-ink); border-color: var(--om-line); font-size: 0.7rem; }

/* ---------- Product cards ---------- */
.om-products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.om-product {
	display: flex;
	flex-direction: column;
	overflow: visible;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.om-product:hover {
	transform: translateY(-4px);
	box-shadow: var(--om-shadow-lift);
}
.om-product__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--om-radius) var(--om-radius) 0 0;
	background: var(--om-indigo-wash);
}
.om-product__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.25s ease;
}
.om-product:hover .om-product__media img {
	transform: scale(1.04);
}
.om-product__quick {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--om-white);
	color: var(--om-ink);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	box-shadow: var(--om-shadow);
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.om-product__quick:hover {
	background: var(--om-indigo);
	color: var(--om-white);
	transform: scale(1.08);
}
.om-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 5px;
	padding: 16px 18px 20px;
}
.om-product__rating {
	margin: 0;
}
.om-product__name {
	font-family: var(--om-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--om-ink);
	text-decoration: none;
}
.om-product__name:hover {
	color: var(--om-indigo-deep);
}
.om-product__price {
	/* Keeps prices on one baseline when a product name wraps to two lines. */
	margin-top: auto;
	padding-top: 4px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--om-ink);
}
.om-product__price ins {
	text-decoration: none;
}
.om-product__price del {
	color: var(--om-ink-40);
	font-weight: 500;
	margin-right: 6px;
}
/* WooCommerce injects a "View cart" link after an AJAX add — the card shows
   its own tick state instead. */
.om-product .added_to_cart {
	display: none;
}
.om-product__quick.loading {
	opacity: 0.6;
	pointer-events: none;
}
.om-product__quick.is-added,
.om-product__quick.added {
	background: #3f9d78;
	color: var(--om-white);
}

/* ---------- Footer ---------- */
.om-footer {
	background: var(--om-white);
	border-top: 1px solid var(--om-line);
	padding-top: 64px;
}
.om-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
}
.om-footer__tag {
	font-family: var(--om-display);
	font-weight: 600;
	font-size: 1.05rem;
	margin: 14px 0 6px;
}
.om-footer__meta {
	color: var(--om-ink-60);
	font-size: 0.9rem;
	margin: 0;
}
.om-footer__h {
	font-size: 0.8rem;
	font-family: var(--om-mono);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--om-ink-40);
	margin-bottom: 14px;
}
.om-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.om-footer__col a {
	color: var(--om-ink-60);
	text-decoration: none;
	font-size: 0.95rem;
}
.om-footer__col a:hover {
	color: var(--om-ink);
}
.om-footer__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-block: 20px;
	border-top: 1px solid var(--om-line);
	font-size: 0.85rem;
	color: var(--om-ink-40);
}
.om-footer__bar p {
	margin: 0;
}
.om-footer__pay {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--om-mono);
	font-size: 0.78rem;
}

/* ---------- Payment marks ----------
   PayPal, Visa, Mastercard, Amex as CSS chips (ombelo_payment_marks in
   inc/helpers.php). Used under the buy button, under the cart total and in
   the footer bar, so it lives here rather than in a page sheet. The
   Mastercard mark is two overlapping discs; the others are set in type. */
.om-pay {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.om-pay__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	min-width: 42px;
	padding: 0 7px;
	border: 1px solid var(--om-line);
	border-radius: 6px;
	background: var(--om-white);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--om-ink);
}
.om-pay__mark--visa span {
	color: #1a1f71;
	font-style: italic;
	font-size: 0.8rem;
	letter-spacing: -0.02em;
}
.om-pay__mark--mc i {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #eb001b;
}
.om-pay__mark--mc i + i {
	margin-left: -6px;
	background: #f79e1b;
	mix-blend-mode: multiply;
}
.om-pay__mark--amex {
	background: #016fd0;
	border-color: #016fd0;
}
.om-pay__mark--amex span {
	color: #fff;
	font-size: 0.66rem;
	letter-spacing: 0.04em;
}
.om-pay__mark--pp span {
	color: #003087;
	font-style: italic;
	font-size: 0.78rem;
	letter-spacing: -0.02em;
}
.om-pay__mark--pp b {
	color: #009cde;
	font-weight: inherit;
}
/* The four legal documents, in the bottom bar of both the full and the slim
   checkout footer — build-guide 09 §4. */
.om-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.om-footer__legal a {
	color: var(--om-ink-40);
	text-decoration: none;
}
.om-footer__legal a:hover {
	color: var(--om-ink);
}

/* ---------- Breadcrumbs (shop + product pages) ---------- */
.om-crumbs {
	font-family: var(--om-mono);
	font-size: 0.78rem;
	color: var(--om-ink-40);
	margin-bottom: 28px;
}
/* Rank Math renders its trail as a paragraph, so the crumbs read as a block of
   text with links in it — and colour alone is not allowed to be the only thing
   that marks a link (WCAG 1.4.1). A hairline underline in the line colour keeps
   the crumb quiet while still being a non-colour cue; it firms up on hover. */
.om-crumbs a {
	color: var(--om-ink-60);
	text-decoration: underline;
	text-decoration-color: var(--om-line);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.om-crumbs a:hover {
	color: var(--om-indigo-deep);
	text-decoration-color: currentColor;
}
.om-crumbs__sep {
	margin-inline: 8px;
	color: var(--om-line);
}

/* ---------- Category chip rail ----------
   Lives here rather than in shop.css because template-parts/shop-chips.php is
   pulled in by three templates now — the shop archive, the 404 and search —
   and only the first of those loads shop.css. */
.om-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}
.om-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid var(--om-line);
	/* --om-pastel comes from the .om-tone--{slug} class above; the "All" chip
	   has no tone and falls back to white. */
	background: var(--om-pastel, var(--om-white));
	color: var(--om-ink);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.om-chips__item:hover {
	transform: translateY(-2px);
	box-shadow: var(--om-shadow);
}
.om-chips__count {
	font-family: var(--om-mono);
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--om-ink-60);
	background: rgba(255, 255, 255, 0.72);
	border-radius: 999px;
	padding: 1px 7px;
}
.om-chips__item.is-active {
	background: var(--om-indigo);
	border-color: var(--om-indigo);
	color: var(--om-white);
}
.om-chips__item.is-active .om-chips__count {
	background: rgba(255, 255, 255, 0.22);
	color: var(--om-white);
}
.om-chips__count--soon,
.om-chips__item.is-active .om-chips__count--soon {
	background: var(--om-amber);
	color: var(--om-ink);
	font-weight: 600;
}

/* ---------- Quantity stepper (product page + cart) ----------
   woocommerce/global/quantity-input.php prints − [n] + around core's field.
   ".quantity.om-qty" out-ranks WooCommerce's own ".woocommerce .quantity .qty". */
.quantity.om-qty {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 5px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: 14px;
	transition: border-color 0.15s ease;
}
.quantity.om-qty:focus-within {
	border-color: var(--om-indigo);
}
.om-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--om-indigo-wash);
	color: var(--om-indigo);
	font-family: var(--om-body);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.om-qty__btn:hover:not(:disabled) {
	background: var(--om-indigo);
	color: var(--om-white);
}
.om-qty__btn:focus-visible {
	outline: 2px solid var(--om-indigo);
	outline-offset: 2px;
}
.om-qty__btn:disabled {
	background: var(--om-surface);
	color: var(--om-ink-40);
	cursor: not-allowed;
}
.quantity.om-qty input.qty {
	width: 42px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--om-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--om-ink);
	-moz-appearance: textfield;
	appearance: textfield;
}
.quantity.om-qty input.qty::-webkit-outer-spin-button,
.quantity.om-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.quantity.om-qty input.qty:focus {
	outline: none;
}

/* ---------- Value strip (shop + product pages) ---------- */
.om-value {
	background: var(--om-surface);
	--om-behind: var(--om-surface);
	border-top: 1px solid var(--om-line);
	padding-block: 40px;
}
.om-value__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.om-value__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.om-value__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	color: var(--om-ink);
}
.om-value__ico--lav { background: var(--om-lav); }
.om-value__ico--mint { background: var(--om-mint); }
.om-value__ico--peach { background: var(--om-peach); }
.om-value__item h2 {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 2px;
}
.om-value__item p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--om-ink-60);
}

/* ---------- WooCommerce notices ----------
   Cart, checkout and account all speak through these three classes, so they
   are styled here rather than in a page stylesheet. WooCommerce's own rules
   are single-class and load before this file, so matching them is enough —
   except for the icon glyph, which comes from its icon font. */
.woocommerce-notices-wrapper:empty {
	display: none;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	width: auto;
	margin: 0 0 20px;
	padding: 15px 20px 15px 48px;
	border: 1px solid var(--om-line);
	border-top: 1px solid var(--om-line);
	border-radius: 14px;
	background: var(--om-white);
	color: var(--om-ink);
	font-size: 0.95rem;
	line-height: 1.5;
	list-style: none outside;
}
/* An error notice is one <ul> with an <li> per message, and each <li> can
   carry its own action button. Laying the row out keeps two buttons from
   landing on top of each other, which floating them does. */
.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	list-style: none;
}
/* ...but only where there actually is a button. WooCommerce writes a message
   as a bare <strong> lead-in followed by a loose text node, and flex promotes
   those to two flex items — so "Error:" or "Too many attempts." gets a column
   of its own and the sentence gets another. At 1243px that reads as an odd
   gap; at 390px it is two ragged columns of three words each. Scoping the row
   layout to the case it was written for leaves plain prose as prose. */
.woocommerce-message li:has( a.button ),
.woocommerce-info li:has( a.button ),
.woocommerce-error li:has( a.button ) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.woocommerce-message li + li,
.woocommerce-info li + li,
.woocommerce-error li + li {
	margin-top: 10px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: absolute;
	left: 17px;
	top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	font-family: var(--om-display);
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--om-white);
	background: var(--om-indigo);
	content: "i";
}
.woocommerce-message {
	background: #f1faf5;
	border-color: #cde9db;
}
.woocommerce-message::before {
	content: "\2713";
	background: #2f9e6f;
}
.woocommerce-info {
	background: var(--om-indigo-wash);
	border-color: #d7d4fb;
}
.woocommerce-error {
	background: #fdf2f4;
	border-color: #f3ccd6;
}
.woocommerce-error::before {
	content: "!";
	background: #d4405f;
}
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
	float: right;
	flex: none;
	margin-left: 16px;
	padding: 8px 16px;
	white-space: nowrap;
	border: 0;
	border-radius: 10px;
	background: var(--om-ink);
	color: var(--om-white);
	font-family: var(--om-body);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
	background: #000;
	color: var(--om-white);
}

/* ---------- Generic page ---------- */
.om-page {
	padding-block: 64px;
}
.om-entry__title {
	font-size: clamp(2rem, 4vw, 2.8rem);
}

/* ---------- Empty-state tile ----------
   The account endpoints and the search page all reach a "nothing here" moment,
   and they are three different stylesheets. The modifier carries everything it
   needs so it does not depend on the .om-empty base, which shop.css and
   cart-checkout.css each define differently for their own surface. */
.om-empty--tile {
	display: grid;
	justify-items: center;
	gap: 4px;
	max-width: none;
	margin: 0;
	padding: 44px 28px;
	text-align: center;
	background: var(--om-canvas);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: none;
}
.om-empty--tile .om-empty__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: var(--om-indigo-wash);
	color: var(--om-indigo-deep);
}
.om-empty--tile h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
}
.om-empty--tile p {
	max-width: 44ch;
	margin: 0;
	color: var(--om-ink-60);
	font-size: 0.95rem;
}
.om-empty--tile .om-btn {
	margin-top: 18px;
}

/* ---------- Downloads list + receipt ----------
   Both are rendered by order/order-details.php, which runs on the order-received
   page (cart-checkout.css) and on the account's view-order endpoint
   (account.css). Shared markup wants shared styles, so they live here. */
.om-dl {
	padding: 24px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
	box-shadow: var(--om-shadow);
}
.om-dl__h {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
}
.om-dl__h span {
	font-family: var(--om-body);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--om-ink-40);
}
.om-dl__list {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.om-dl__item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 14px;
	border: 1px solid var(--om-line);
	border-radius: 16px;
	background: var(--om-canvas);
}
.om-dl__media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background: var(--om-pastel, var(--om-surface));
	overflow: hidden;
}
.om-dl__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.om-dl__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}
.om-dl__name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}
.om-dl__name a {
	color: inherit;
	text-decoration: none;
}
.om-dl__name a:hover {
	color: var(--om-indigo);
}
.om-dl__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.82rem;
	color: var(--om-ink-40);
}
.om-dl__file {
	font-family: var(--om-mono);
	font-size: 0.76rem;
}
.om-dl__go {
	flex: none;
	padding: 13px 22px;
	border-radius: 12px;
	font-size: 0.95rem;
}

/* Licence keys (inc/licenses.php) reuse the downloads card; only the key
   line is new. It sits between the downloads and the receipt. */
.om-keys {
	margin-top: 22px;
}
.om-keys__item {
	display: grid;
	gap: 6px;
	padding: 16px 18px;
	border: 1px solid var(--om-line);
	border-radius: 16px;
	background: var(--om-canvas);
}
.om-keys__name {
	font-size: 0.95rem;
	font-weight: 600;
}
.om-keys__key {
	font-family: var(--om-mono);
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	color: var(--om-indigo);
	word-break: break-all;
	user-select: all;
}
.om-keys__how {
	font-size: 0.82rem;
	color: var(--om-ink-40);
}

.om-receipt {
	margin-top: 22px;
	padding: 24px;
	background: var(--om-white);
	border: 1px solid var(--om-line);
	border-radius: var(--om-radius);
}
.om-receipt__h {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}
.om-receipt__h span {
	font-family: var(--om-mono);
	font-size: 0.76rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--om-ink-40);
}
.om-receipt__items,
.om-receipt__totals {
	list-style: none;
	margin: 0;
	padding: 0;
}
.om-receipt__item,
.om-receipt__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	font-size: 0.94rem;
}
.om-receipt__item {
	border-bottom: 1px solid var(--om-line);
}
.om-receipt__name {
	min-width: 0;
	color: var(--om-ink-60);
}
.om-receipt__name .product-quantity {
	font-family: var(--om-mono);
	font-size: 0.8rem;
	color: var(--om-ink-40);
}
.om-receipt__note {
	display: block;
	margin-top: 4px;
	font-size: 0.84rem;
	color: var(--om-ink-40);
}
.om-receipt__val {
	flex: none;
	font-weight: 500;
}
.om-receipt__totals {
	margin-top: 8px;
}
.om-receipt__row span:first-child {
	color: var(--om-ink-60);
}
.om-receipt__row--order_total {
	margin-top: 4px;
	padding-top: 13px;
	border-top: 1px solid var(--om-line);
	font-family: var(--om-display);
	font-size: 1.1rem;
	font-weight: 600;
}
.om-receipt__row--order_total span:first-child {
	color: var(--om-ink);
}
.om-receipt__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.om-products {
		grid-template-columns: repeat(2, 1fr);
	}
	.om-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
	.om-value__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}
@media (max-width: 860px) {
	.om-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--om-white);
		border-bottom: 1px solid var(--om-line);
		padding: 12px 24px 20px;
	}
	.om-nav.is-open {
		display: block;
	}
	.om-nav__list {
		flex-direction: column;
		gap: 2px;
	}
	.om-nav__list a {
		display: block;
		padding: 12px 10px;
		border-radius: 10px;
		font-size: 1.05rem;
	}
	.om-burger {
		display: inline-flex;
	}
	/* The Download button drops under the file it belongs to rather than
	   squeezing the name into two words. */
	.om-dl__item {
		grid-template-columns: 56px minmax(0, 1fr);
	}
	.om-dl__media {
		width: 56px;
		height: 56px;
	}
	.om-dl__go {
		grid-column: 1 / -1;
		width: 100%;
	}
}
@media (max-width: 720px) {
	/* Chips scroll sideways instead of stacking six rows tall. The negative
	   margin lets the rail bleed to the screen edge inside a padded .om-shell. */
	.om-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(clamp(24px, 3vw, 48px) * -1);
		padding-inline: clamp(24px, 3vw, 48px);
		padding-block: 4px;
	}
	.om-chips::-webkit-scrollbar {
		display: none;
	}
	.om-chips__item {
		flex: 0 0 auto;
	}
	.om-chips__item:hover {
		transform: none;
	}
}
@media (max-width: 560px) {
	.om-section {
		padding-block: 64px;
	}
	.om-dl,
	.om-receipt {
		padding: 18px;
	}
	.om-products {
		grid-template-columns: 1fr;
	}
	.om-footer__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.om-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Sign in with Google

   Lives in main.css rather than account.css because the button appears in two
   places that load different stylesheets: the sign-in card on /my-account/ and
   the "shopped with us before?" panel on the checkout.

   The white-with-a-hairline treatment is not a style choice. Google's branding
   rules for the button are specific about the mark keeping its own colours on a
   plain white or plain dark surface — so it cannot take the indigo the rest of
   the theme's primary buttons wear, and is drawn as a neutral instead. That
   also reads correctly: it is an alternative route in, not the main one.
   ========================================================================== */

.om-gauth {
	margin-bottom: 22px;
}

.om-gauth__btn {
	width: 100%;
	gap: 10px;
	background: var(--om-white);
	border-color: var(--om-line);
	color: var(--om-ink);
}

.om-gauth__btn:hover,
.om-gauth__btn:focus-visible {
	background: var(--om-canvas);
	border-color: var(--om-ink-40);
}

.om-gauth__btn svg {
	flex: none;
}

/* A rule with the word sitting in a gap in it. The pseudo-elements are the two
   halves of the line, so the label never needs a background colour matched to
   whatever is behind it — which differs between the two places this renders. */
.om-gauth__or {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 0;
	font-size: 0.8125rem;
	color: var(--om-ink-40);
}

.om-gauth__or::before,
.om-gauth__or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--om-line);
}