/* ==========================================================================
   Oops, Mine Co. — brand layer on top of Moderno
   Loaded after the parent's combined CSS (ideapark-core) and the child style.css.
   ========================================================================== */

:root {
	/* Brand palette: white/ivory grounds, light pink and brown accents. No black, no red, no orange. */
	--omc-ink: #3a2b26;                       /* deep brown: body text, headings, solid buttons, dark bands */
	--omc-text: #4a3f3a;                      /* paragraph brown */
	--omc-muted: #8a7d76;                     /* meta / counts / legal (small caps, never body copy) */
	--omc-cream: #f7f2ed;
	--omc-sand: #efe6de;
	--omc-pink: #f3dcd6;                      /* soft pink ground (light eyebrows on photos, tinted panels) */
	--omc-pink-deep: #e8c9c1;                 /* deeper pink: hairlines, badges, hover fills */
	--omc-rose: #b98b7e;
	--omc-rose-dark: #9c6f63;                 /* also the sale/price/alert accent — never red */
	--omc-rose-light: #e9d3ca;
	--omc-line: #e9e1da;
	--omc-band: rgba(58, 43, 38, .78);        /* brown wash over photos on the dark bands (story, testimonials) */
	--omc-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--omc-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--omc-gutter: clamp(16px, 4vw, 48px);
	--omc-section: clamp(56px, 8vw, 112px);   /* inner padding of full-bleed bands (story, newsletter, About CTA) */
	--omc-gap: clamp(32px, 4vw, 56px);        /* distance between consecutive home sections */
	--omc-seam: clamp(14px, 1.7vw, 26px);     /* the thin seam between the stacked bands under the hero */
	--omc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ─── Logo: the brand PNGs in assets/img (1071×729, transparent) via templates/header-logo*.php.
   The parent sizes the header image with these variables; the artwork is landscape, so the width binds. ─── */
.c-header {
	--logo-size: 124px;          /* desktop: 124×84 */
	--logo-size-sticky: 96px;    /* sticky header: 96×65 */
	--logo-size-mobile: 78px;    /* phones: capped by the row below → 64×44 */
	/* The parent's default is 60px. 72px held the mark alone; the tagline underneath needs the
	   rest, and the mark gives some of it back so the bar does not become a third of the screen. */
	--header-height-mobile: 88px;
	--sticky-header-height-mobile: 64px; /* 44px logo while scrolled */
}
.c-header__logo-img { display: block; }
.c-header__logo--desktop { padding-top: 4px; padding-bottom: 4px; }

/* ─── Watermark: the monogram stamped, semi-transparent, on every photo. Bottom-right by default; bottom-left
   where the copy sits on the right; top-right on carousel slides whose label bar owns the bottom edge.
   White logo on photography, rose logo (lighter) on white product shots. Per host: --omc-wm (width),
   --omc-wm-inset, --omc-wm-opacity. ─── */
.omc-hero::before,
.omc-banner__media::after,
.omc-mosaic__item::before,
.omc-carousel__media::after,
.omc-live__media::after,
.omc-cat__media::after,
.omc-card__media::after,
.whd-story__figure::after,
.omc-modal__figure::after,
.c-product-grid__thumb-wrap::after {
	content: "";
	position: absolute;
	right: var(--omc-wm-inset, 12px);
	bottom: var(--omc-wm-inset, 12px);
	width: var(--omc-wm, 56px);
	aspect-ratio: 1071 / 729;
	background: url(../img/oops-logo-white-400.png) center / contain no-repeat;
	opacity: var(--omc-wm-opacity, .55);
	filter: drop-shadow(0 1px 6px rgba(58, 43, 38, .28));
	z-index: 2;
	pointer-events: none;
}
.omc-banner__media, .omc-carousel__media, .omc-cat__media, .omc-card__media { position: relative; }
.omc-hero { --omc-wm: clamp(72px, 8vw, 120px); --omc-wm-inset: clamp(16px, 2.5vw, 36px); }
.omc-banner--wide .omc-banner__media { --omc-wm: clamp(64px, 7vw, 104px); --omc-wm-inset: clamp(14px, 2vw, 28px); }
.omc-banner--wide.omc-banner--pos-br .omc-banner__media::after { right: auto; left: var(--omc-wm-inset, 12px); } /* "Knits worth keeping": copy bottom-right */
.omc-banner--split .omc-banner__media { --omc-wm: clamp(60px, 6vw, 88px); --omc-wm-inset: 18px; }
.omc-mosaic__item { --omc-wm: 48px; --omc-wm-inset: 12px; }
.omc-mosaic__item--2x2 { --omc-wm: 76px; --omc-wm-inset: 16px; }
.omc-carousel__media { --omc-wm: 40px; --omc-wm-inset: 10px; }
.omc-carousel__media::after { bottom: auto; top: var(--omc-wm-inset, 10px); }
.omc-live__media { --omc-wm: 64px; --omc-wm-inset: 14px; }
.omc-card__media { --omc-wm: 56px; --omc-wm-inset: 12px; }
.omc-cat__media, .c-product-grid__thumb-wrap { --omc-wm: 40px; --omc-wm-inset: 8px; --omc-wm-opacity: .34; }
.omc-cat__media::after, .c-product-grid__thumb-wrap::after { background-image: url(../img/oops-logo-rose-400.png); filter: none; }
/* The story spreads: the same product photography as the cards, so the same rose mark — but these
   are half-page pictures, so it is sized to them rather than to a thumbnail. */
/* A halo rather than a shadow. These frames are white studio backgrounds with a dark garment in
   them, so the corner the mark sits in is sometimes paper and sometimes black fabric; a pale glow
   separates it from the dark without turning into a smudge on the white. */
.whd-story__figure::after {
	background-image: url(../img/oops-logo-rose-400.png);
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)) drop-shadow(0 1px 2px rgba(58, 43, 38, .2));
}
.whd-story__figure { --omc-wm: clamp(56px, 6vw, 88px); --omc-wm-inset: clamp(14px, 1.8vw, 24px); --omc-wm-opacity: .62; }
/* Flipped rows put the picture on the left, where the copy no longer crowds its bottom-right. */
.whd-story__row--flip .whd-story__figure::after { right: auto; left: var(--omc-wm-inset, 12px); }
.c-product-grid__thumb-wrap::after { right: auto; left: var(--omc-wm-inset, 8px); } /* the cart icon sits bottom-right on phones */
.c-product-grid__item:hover .c-product-grid__thumb-wrap::after { opacity: 0; }   /* the add-to-cart bar slides over that corner */

/* ─── Header: text logo fallback (only if the logo files are missing) ─── */
.c-header__logo-empty {
	font-family: var(--omc-serif);
	font-weight: 500;
	font-size: clamp(22px, 2.2vw, 30px);
	letter-spacing: .02em;
	text-transform: none;
	color: var(--omc-ink);
	white-space: nowrap;
}
/* The theme trims trailing punctuation from the site name; the brand is written "Oops, Mine Co." */
.c-header__logo-empty::after { content: "."; }

/* The OMC templates draw their own hero — hide the theme's page-title band there. */
.omc-home-page .c-page-header,
.omc-about-page .c-page-header {
	display: none;
}

/* ─── Shared primitives ─── */
.omc-eyebrow {
	margin: 0;
	font: 500 11px/1.4 var(--omc-sans);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--omc-rose);
}
.omc-eyebrow--light { color: var(--omc-rose-light); }

.omc-section__title,
.omc-story__title,
.omc-hero__title,
.omc-about__title {
	font-family: var(--omc-serif);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -.005em;
	color: var(--omc-ink);
	margin: 10px 0 0;
}
/* Section titles follow one pattern site-wide: rose-gold words with the key word in italic ink
   ("Find your next *favourite*"). On dark bands the colours flip (see .omc-quotes__head). */
.omc-section__title { font-size: clamp(30px, 3.4vw, 46px); color: var(--omc-rose-dark); }
.omc-section__title em { font-style: italic; color: var(--omc-ink); }

.omc-section {
	padding: var(--omc-gap) 0 0;
}
.omc-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 clamp(24px, 3vw, 40px);
}
.omc-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 600 12px/1 var(--omc-sans);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--omc-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--omc-ink);
	padding-bottom: 6px;
	white-space: nowrap;
	transition: color .25s var(--omc-ease), border-color .25s var(--omc-ease);
}
.omc-link:hover { color: var(--omc-rose-dark); border-color: var(--omc-rose-dark); }
.omc-link .omc-icon { width: 16px; height: 16px; transition: transform .25s var(--omc-ease); }
.omc-link:hover .omc-icon { transform: translateX(4px); }

.omc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 30px;
	font: 600 12px/1 var(--omc-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .25s var(--omc-ease), color .25s var(--omc-ease), border-color .25s var(--omc-ease), transform .25s var(--omc-ease);
}
.omc-btn:hover { transform: translateY(-1px); }
.omc-btn--solid { background: var(--omc-ink); color: var(--omc-cream); border-color: var(--omc-ink); }
.omc-btn--solid:hover { background: var(--omc-rose-dark); border-color: var(--omc-rose-dark); color: var(--omc-cream); }
.omc-btn--outline { background: transparent; color: var(--omc-ink); border-color: var(--omc-ink); }
.omc-btn--outline:hover { background: var(--omc-ink); color: var(--omc-cream); }
.omc-btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); }
.omc-btn--ghost:hover { background: #fff; color: var(--omc-ink); border-color: #fff; }

/* Scroll reveal (progressively enhanced by omc.js; no-JS shows everything) */
.js .omc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--omc-ease), transform .8s var(--omc-ease); }
.js .omc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .omc-reveal { opacity: 1; transform: none; transition: none; }
	.omc-btn, .omc-link .omc-icon, .omc-cat__img, .omc-card__img { transition: none !important; }
}

/* ─── Hero ─── */
.omc-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(86vh, 820px);
	overflow: hidden;
	color: #fff;
	background: var(--omc-sand);
	isolation: isolate;
}
.omc-hero__media, .omc-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Tuned for the hero photographs, which are landscape and put their subject right of centre.
   A phone crops a 3:2 frame down to something nearly portrait, so the same percentage cuts
   the woman in half at the edge; shifting right keeps her in the picture. */
.omc-hero__media img { object-fit: cover; object-position: 64% 32%; }
/* hero slideshow: the photos stack; the active one is sharp, the others sit blurred and faded underneath,
   so each change is a soft blur-through dissolve with a slow drift (assets/js/omc.js, .js-omc-fade) */
.omc-hero__media--fade .omc-hero__img {
	opacity: 0;
	filter: blur(18px);
	transform: scale(1.08);
	transition: opacity 1.6s var(--omc-ease), filter 1.6s var(--omc-ease), transform 9s linear;
	will-change: opacity, filter, transform;
}
.omc-hero__media--fade .omc-hero__img.is-active { opacity: 1; filter: blur(0); transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
	.omc-hero__media--fade .omc-hero__img { transition: opacity .3s; filter: none; transform: none; }
}
.omc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	/* The wash is gone: a flat scrim over the whole photograph was muddying it, and the
	   photographs now have enough going on to be worth seeing. What is left is a soft foot —
	   the band behind the buttons and the press credit, where white type would otherwise sit on
	   pale pavement — and it fades out before it reaches the middle of the picture. */
	background: linear-gradient(180deg,
		rgba(58, 43, 38, .22) 0%,
		rgba(58, 43, 38, .06) 26%,
		rgba(58, 43, 38, 0) 46%,
		rgba(58, 43, 38, .34) 82%,
		rgba(58, 43, 38, .58) 100%);
	z-index: 1;
}
/* The wash came off the photograph and the headline promptly stopped being readable — white
   serif over a sunlit pavement measures 1.4:1, which is not type, it is decoration. So the
   shade is now only where the words are: a soft ellipse behind the copy that fades out well
   before the edges, leaving the picture itself untouched. */
.omc-hero__content::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: min(1180px, 108%);
	height: 128%;
	background: radial-gradient(ellipse 54% 50% at 50% 50%,
		rgba(42, 31, 27, .62) 0%,
		rgba(42, 31, 27, .44) 46%,
		rgba(42, 31, 27, .16) 72%,
		rgba(42, 31, 27, 0) 100%);
	z-index: -1;
	pointer-events: none;
}
.omc-hero__content > * { text-shadow: 0 2px 22px rgba(42, 31, 27, .6), 0 1px 4px rgba(42, 31, 27, .35); }
.omc-hero .omc-eyebrow--light { color: var(--omc-pink); }
.omc-hero__logo { display: block; width: clamp(120px, 11vw, 168px); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 6px 28px rgba(58, 43, 38, .35)); }
/* The theme's .l-section__container centres a 1170px column (fluid + padded on small screens);
   we keep that and centre the text inside it, so it adapts to every viewport. */
.omc-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding-top: clamp(120px, 20vh, 220px);
	padding-bottom: clamp(48px, 7vw, 88px);
	padding-left: var(--omc-gutter);
	padding-right: var(--omc-gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.omc-hero__title {
	color: #fff;
	font-size: clamp(38px, 5.2vw, 76px);
	margin-top: 14px;
	max-width: 24ch; /* two lines on desktop: the markup breaks after "intention." */
	text-wrap: balance;
}
.omc-hero__title em { font-style: italic; color: var(--omc-rose-light); }
/* rotating phrase: the outgoing line lifts and fades, the incoming one floats up into place */
.omc-rotate { display: inline-block; transition: opacity .5s var(--omc-ease), transform .5s var(--omc-ease); will-change: opacity, transform; }
.omc-rotate.is-out { opacity: 0; transform: translateY(-.35em); }
.omc-rotate.is-pre { transition: none; opacity: 0; transform: translateY(.35em); }
.omc-hero__lede {
	max-width: 560px;
	margin: 20px auto 0;
	font: 400 clamp(16px, 1.3vw, 19px)/1.6 var(--omc-sans);
	color: rgba(255, 255, 255, .88);
	text-wrap: pretty;
}
.omc-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ─── Announcement bar (theme "advert bar" block) ─── */
.c-header__advert_bar { position: relative; background: var(--omc-ink); color: #fff; }
.c-header__advert_bar .entry-content { max-width: none; }
/* social icons pinned to the left edge of the bar (markup prepended by omc_advert_bar_social()) */
.omc-announce__social { position: absolute; left: calc(var(--omc-gutter) - 6px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; z-index: 2; }
.omc-announce__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: rgba(255, 255, 255, .85) !important;
	background: none !important;
	border: 0 !important;
	text-decoration: none !important;
	transition: color .2s var(--omc-ease), transform .2s var(--omc-ease);
}
.omc-announce__social a:hover { color: var(--omc-rose-light) !important; transform: translateY(-1px); }
.omc-announce__social .omc-icon { width: 15px; height: 15px; }
@media (min-width: 768px) { .omc-announce__social { display: none; } } /* on desktop the icons live in the logo row instead */

/* ─── Social icons in the desktop header's logo row, top-left cell (child templates/header-other.php) ─── */
.omc-header-social { display: flex; align-items: center; gap: 18px; } /* same rhythm as the account/search/wishlist/cart icons on the right */
.omc-header-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--omc-ink);
	transition: color .2s var(--omc-ease), transform .2s var(--omc-ease);
}
.omc-header-social a:hover { color: var(--omc-rose-dark); transform: translateY(-1px); }
.omc-header-social .omc-icon { width: 18px; height: 18px; } /* the theme's header glyphs are 18px */
/* The parent paints every <svg> in the header with a fill, which turned the outlined Instagram and email glyphs into
   solid blocks. Our icons are line icons: no fill, current-colour stroke — except the shapes that ask for a fill. */
.omc-icon { fill: none; stroke: currentColor; }
.omc-icon [fill="currentColor"] { fill: currentColor; stroke: none; }
.c-header__top .omc-header-social { display: none; } /* the parent repeats this block inside the mobile menu, which already lists its own social links */
.omc-announce {
	margin: 0;
	padding: 10px var(--omc-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 0;
	font: 500 11px/1.5 var(--omc-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	text-align: center;
}
.omc-announce > * { padding: 0 18px; position: relative; white-space: nowrap; }
.omc-announce > * + *::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--omc-rose);
	transform: translateY(-50%);
}
/* The theme paints links inside .entry-content with its text colour at higher specificity — force ours. */
.c-header__advert_bar .entry-content .omc-announce a,
.c-header__advert_bar .omc-announce a {
	color: var(--omc-rose-light) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(233, 211, 202, .5);
	padding-bottom: 1px;
	background: none !important;
}
.c-header__advert_bar .entry-content .omc-announce a:hover,
.c-header__advert_bar .omc-announce a:hover { color: #fff !important; border-color: #fff; }
@media (max-width: 767px) {
	/* phones: icons on the left, one message on the right ("Our story" lives in the mobile menu as About) */
	.omc-announce { padding: 8px var(--omc-gutter) 8px 124px; justify-content: flex-end; font-size: 10px; letter-spacing: .16em; }
	.omc-announce > * { padding: 0; }
	.omc-announce > *:nth-child(n+2) { display: none; }
	.omc-announce__social { left: calc(var(--omc-gutter) - 5px); gap: 0; }
	.omc-announce__social a { width: 26px; height: 26px; }
	.omc-announce__social .omc-icon { width: 14px; height: 14px; }
}

/* ─── Trust strip ─── */
.omc-usp { background: var(--omc-cream); border-bottom: 1px solid var(--omc-line); }
.omc-usp__list {
	list-style: none;
	margin: 0 auto;
	padding: 18px var(--omc-gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.omc-usp__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font: 500 12px/1.3 var(--omc-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--omc-text);
}
.omc-usp__item .omc-icon { color: var(--omc-rose); flex: 0 0 auto; }

/* ─── Category cards ─── */
.omc-section.omc-cats { padding-top: clamp(20px, 2.4vw, 36px); } /* sits close under the banner cluster */
.omc-section.omc-banners { padding-top: clamp(24px, 3vw, 44px); } /* banner rows follow a product grid closely, not at full section distance */
.omc-type { color: var(--omc-ink); font-style: italic; white-space: nowrap; }
.omc-type.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: .9em;
	margin-left: 4px;
	vertical-align: -.08em;
	background: var(--omc-rose);
	animation: omc-caret 1s steps(1) infinite;
}
@keyframes omc-caret { 50% { opacity: 0; } }
.omc-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(14px, 1.8vw, 28px);
}
.omc-cat {
	display: flex;
	flex-direction: column;
	padding: clamp(10px, 1vw, 14px);
	border: 1px solid var(--omc-line);
	background: #f3eae2; /* very light brown card, inside the border (photo + name row sit on it) */
	text-decoration: none;
	color: var(--omc-ink);
	transition: border-color .3s var(--omc-ease), box-shadow .3s var(--omc-ease), transform .3s var(--omc-ease);
}
.omc-cat:hover { border-color: var(--omc-rose); box-shadow: 0 24px 48px -30px rgba(58, 43, 38, .35); transform: translateY(-3px); }
.omc-cat__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #fff; /* the photo stays as shot, on white */
	border: 1px solid var(--omc-line);
}
.omc-cat__img {
	width: 100%;
	height: 100%;
	object-fit: contain;      /* white-background product shots on a white frame: show the whole piece, never crop it */
	object-position: center;
	padding: 6%;
	box-sizing: border-box;
	transition: transform 1.1s var(--omc-ease);
}
.omc-cat:hover .omc-cat__img { transform: scale(1.04); }
.omc-cat__body { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 4px 4px; margin-top: 4px; }
.omc-cat__name {
	font-family: var(--omc-serif);
	font-size: clamp(22px, 1.9vw, 27px);
	font-weight: 500;
	line-height: 1.1;
	position: relative;
}
.omc-cat__name::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: -3px;
	height: 1px;
	background: var(--omc-rose-dark);
	transition: right .4s var(--omc-ease);
}
.omc-cat:hover .omc-cat__name::after { right: 0; }
.omc-cat__count { font: 500 11px/1 var(--omc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--omc-muted); }

/* ─── Product sections: the theme's product cards restyled to match the category cards
   (sand card inside a hairline border, square white photo frame, serif name). Hover buttons,
   quick view, wishlist, badges and swatches are the parent's and keep working. ─── */
.omc-products__grid .c-product-grid__wrap { margin-bottom: 0; }
/* The [products] shortcode comes back wrapped in the theme's own boxed container (1170px, set by the
   Customizer's product_grid_width). Sitting inside our wide home sections that left the product cards
   ~50px narrower than the category cards beside them, with dead space down both edges. Scoped to the
   home grids, so the shop and category screens keep the contained layout the Customizer asks for. */
.omc-products__grid .l-section--container { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.omc-products .c-product-grid__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 28px); }
.omc-products .c-product-grid__item,
.omc-products .c-product-grid__item--background {
	width: auto;
	padding: clamp(10px, 1vw, 14px);
	border: 1px solid var(--omc-line);
	background: #f3eae2;
	transition: border-color .3s var(--omc-ease), box-shadow .3s var(--omc-ease), transform .3s var(--omc-ease);
}
.omc-products .c-product-grid__item::after { display: none; } /* the parent's overlapping hairline */
.omc-products .c-product-grid__item:hover { border-color: var(--omc-rose); box-shadow: 0 24px 48px -30px rgba(58, 43, 38, .35); transform: translateY(-3px); }
.omc-products .c-product-grid__thumb-wrap { padding-bottom: 100%; border: 1px solid var(--omc-line); background: #fff; }   /* square frame */
.omc-products .c-product-grid__item:hover .c-product-grid__thumb-wrap { background: #fff; }
.omc-products .c-product-grid__thumb { object-fit: contain; padding: 6%; box-sizing: border-box; } /* show the whole piece, never crop */
.omc-products .c-product-grid__details { padding: 14px 4px 4px; }
.omc-products .c-product-grid__short-desc { display: none; } /* brand, name, price — like the category cards; the blurb lives on the product page */
.omc-products .c-product-grid__category-list { font: 500 10px/1.4 var(--omc-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--omc-muted); }
.omc-products .c-product-grid__category-item { color: inherit; }
.omc-products .woocommerce-loop-product__title {
	font-family: var(--omc-serif);
	font-size: clamp(19px, 1.5vw, 23px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	color: var(--omc-ink);
	margin: 6px 0 0;
}
.omc-products .c-product-grid__price-wrap { margin-top: 8px; font: 500 13px/1.4 var(--omc-sans); letter-spacing: .02em; color: var(--omc-ink); }
.omc-products .c-product-grid__price-wrap ins { color: var(--omc-rose-dark); }

/* ─── The edit (editorial) ─── */
.omc-edit { background: var(--omc-cream); margin-top: var(--omc-section); padding: var(--omc-section) 0; }
.omc-edit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}
.omc-edit__media { position: relative; padding-right: 18%; padding-bottom: 14%; }
.omc-edit__img { margin: 0; overflow: hidden; background: var(--omc-sand); }
.omc-edit__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.omc-edit__img--a { aspect-ratio: 4 / 5; }
.omc-edit__img--b {
	position: absolute;
	right: 0; bottom: 0;
	width: 46%;
	aspect-ratio: 3 / 4;
	border: 10px solid var(--omc-cream);
	box-shadow: 0 30px 60px -30px rgba(58, 43, 38, .35);
}
.omc-edit__copy p:not(.omc-eyebrow) { font: 400 clamp(15px, 1.15vw, 17px)/1.75 var(--omc-sans); color: var(--omc-text); margin: 18px 0 0; }
.omc-edit__copy .omc-btn { margin-top: 28px; }

/* ─── Brand story band ─── */
.omc-story { position: relative; isolation: isolate; overflow: hidden; background: var(--omc-ink); color: #fff; margin-top: clamp(24px, 3vw, 44px); padding: var(--omc-section) 0; text-align: center; } /* sits close under the category grid */
/* blurred, rose-tinted photo behind the story copy; the dark wash keeps the white text at full contrast */
.omc-story__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.omc-story__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: blur(9px) saturate(1.05); transform: scale(1.08); } /* scale hides the blur's soft edge */
.omc-story__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(185, 139, 126, .38) 0%, rgba(185, 139, 126, 0) 55%),
		linear-gradient(180deg, var(--omc-band) 0%, rgba(58, 43, 38, .8) 100%);
}
.omc-story__inner { position: relative; max-width: 760px; }
.omc-story .omc-eyebrow { color: var(--omc-rose-light); } /* the mid rose sinks into the tinted backdrop */
.omc-story + .omc-section { padding-top: clamp(24px, 3vw, 44px); } /* the section after the band sits as close below it as the grid does above */
.omc-story__title { color: #fff; font-size: clamp(56px, 9vw, 128px); font-style: italic; font-weight: 400; margin-top: 8px; }
.omc-story__text { font: 400 clamp(16px, 1.3vw, 19px)/1.7 var(--omc-sans); color: rgba(255, 255, 255, .78); margin: 18px auto 0; max-width: 620px; }
.omc-story .omc-btn { margin-top: 30px; }

/* ─── Journal cards ─── */
.omc-journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); }
.omc-card { display: flex; flex-direction: column; }
.omc-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--omc-sand); }
.omc-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--omc-ease); }
.omc-card:hover .omc-card__img { transform: scale(1.04); }
.omc-card__body { padding: 16px 2px 0; }
.omc-card__date { display: block; font: 500 11px/1 var(--omc-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--omc-muted); }
.omc-card__title { font-family: var(--omc-serif); font-size: clamp(22px, 1.8vw, 26px); font-weight: 500; line-height: 1.2; margin: 10px 0 8px; }
.omc-card__title a { color: var(--omc-ink); text-decoration: none; }
.omc-card__title a:hover { color: var(--omc-rose-dark); }
.omc-card__excerpt { margin: 0; font: 400 15px/1.65 var(--omc-sans); color: var(--omc-text); }

/* ─── Shop-the-look mosaic: a fixed, balanced pattern on four columns. Square tiles set the row height;
   spanning tiles stretch to fill, so every row lines up without JavaScript. ─── */
.omc-section.omc-mosaic-section { padding-top: clamp(24px, 3vw, 44px); }
.omc-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 18px); }
.omc-mosaic__item { position: relative; display: block; overflow: hidden; background: var(--omc-sand); border: 1px solid var(--omc-line); isolation: isolate; }
.omc-mosaic__item--1x1 { aspect-ratio: 1 / 1; }
.omc-mosaic__item--2x2 { grid-column: span 2; grid-row: span 2; }
.omc-mosaic__item--1x2 { grid-row: span 2; }
.omc-mosaic__item--2x1 { grid-column: span 2; }
.omc-mosaic__item img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 20%; transition: transform 1.2s var(--omc-ease); }
.omc-mosaic__item:hover img { transform: scale(1.05); }
.omc-mosaic__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 43, 38, 0) 60%, rgba(58, 43, 38, .28) 100%); opacity: 0; transition: opacity .4s var(--omc-ease); pointer-events: none; }
.omc-mosaic__item:hover::after { opacity: 1; }
.omc-mosaic__label {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px 9px 14px;
	background: rgba(255, 255, 255, .94);
	color: var(--omc-ink);
	font: 600 10px/1 var(--omc-sans);
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: background .3s var(--omc-ease), color .3s var(--omc-ease);
}
.omc-mosaic__label .omc-icon { width: 12px; height: 12px; }
.omc-mosaic__item:hover .omc-mosaic__label { background: var(--omc-ink); color: var(--omc-cream); }
.omc-mosaic__item:focus-visible { outline: 2px solid var(--omc-rose); outline-offset: 2px; }

/* ─── Next Facebook Live band (under the trust strip) ─── */
.omc-live { padding-top: var(--omc-seam); } /* a little air above the card */
.omc-live__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); /* photo | copy + form */
	align-items: stretch;
	background: #f3eae2;
	border: 1px solid var(--omc-line);
	overflow: hidden;
}
.omc-live__media { position: relative; min-height: 100%; background: var(--omc-sand); }
.omc-live__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } /* keep the face in frame in every crop */
.omc-live__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(26px, 3vw, 46px) clamp(22px, 3.4vw, 56px); }
.omc-live__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 11px/1 var(--omc-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--omc-rose-dark); }
.omc-live__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--omc-rose-dark); box-shadow: 0 0 0 0 rgba(156, 111, 99, .55); animation: omc-pulse 1.8s ease-out infinite; }
@keyframes omc-pulse {
	0% { box-shadow: 0 0 0 0 rgba(156, 111, 99, .55); }
	70% { box-shadow: 0 0 0 10px rgba(156, 111, 99, 0); }
	100% { box-shadow: 0 0 0 0 rgba(156, 111, 99, 0); }
}
.omc-live__title { margin: 2px 0 0; font-family: var(--omc-serif); font-weight: 500; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; color: var(--omc-ink); }
.omc-live__text { margin: 0; max-width: 54ch; font: 400 15px/1.7 var(--omc-sans); color: var(--omc-text); }
.omc-live__count { display: flex; gap: clamp(8px, 1vw, 14px); margin-top: 6px; }
.omc-live__cell { display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 10px 6px 8px; background: #fff; border: 1px solid var(--omc-line); }
.omc-live__num { font-family: var(--omc-serif); font-size: clamp(24px, 2.2vw, 32px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--omc-ink); } /* lining figures: old-style ones jump around in a ticking counter */
.omc-live__unit { margin-top: 5px; font: 600 9px/1 var(--omc-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--omc-muted); }
.omc-live__status { display: none; margin: 6px 0 0; font-family: var(--omc-serif); font-style: italic; font-size: 22px; color: var(--omc-rose-dark); }
.omc-live__card.is-live .omc-live__count, .omc-live__card.is-over .omc-live__count { display: none; }
.omc-live__card.is-live .omc-live__status--now, .omc-live__card.is-over .omc-live__status--over { display: block; }
/* the sign-up form inside the card: left-aligned, input and button on one line */
.omc-live__form { width: 100%; max-width: 520px; margin-top: 8px; justify-content: flex-start; gap: 8px; }
.omc-live__form .omc-newsletter__input { flex: 1 1 220px; min-height: 48px; border-color: var(--omc-line); }
.omc-live__form .omc-newsletter__input:focus { border-color: var(--omc-ink); }
.omc-live__form .omc-btn { min-height: 48px; }
.omc-live__form .omc-newsletter__note { margin-top: 2px; text-align: left; }
.omc-live__form .omc-newsletter__note:empty { min-height: 0; margin: 0; } /* no phantom line between the button and the date until there is a message */
.omc-live__form.is-done .omc-newsletter__input, .omc-live__form.is-done .omc-btn { display: none; } /* after a successful sign-up only the confirmation stays */
.omc-live__after { margin-top: 2px; }
.omc-live__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.omc-live__btn .omc-icon { width: 14px; height: 14px; }
.omc-live__foot { margin: 6px 0 0; font: 600 11px/1.5 var(--omc-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--omc-muted); }
@media (prefers-reduced-motion: reduce) { .omc-live__dot { animation: none; } }

/* ─── Testimonials: one spotlight quote at a time — the reviewed piece on the left, a large italic quote on the
   right, cross-fading; arrows + counter in the band's header (assets/js/omc.js, .js-omc-quotes) ─── */
.omc-quotes__band { /* full-bleed, like the story and newsletter bands; the inner container centres the content */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--omc-ink);
	color: #fff;
	text-align: center;
	padding: var(--omc-gap) 0; /* same measure as the space between sections, above and below */
}
.omc-quotes__inner { position: relative; }
/* blurred, rose-tinted photo under a dark wash — the story band's treatment */
.omc-quotes__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.omc-quotes__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: blur(14px) saturate(1.05); transform: scale(1.1); }
.omc-quotes__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(185, 139, 126, .34) 0%, rgba(185, 139, 126, 0) 55%),
		linear-gradient(180deg, var(--omc-band) 0%, rgba(58, 43, 38, .8) 100%);
}
.omc-quotes__head { margin-bottom: clamp(18px, 2.2vw, 32px); }
.omc-quotes__head .omc-eyebrow { color: var(--omc-rose-light); }
.omc-quotes__head .omc-section__title { margin-top: 10px; color: #fff; }
.omc-quotes__head .omc-section__title em { color: var(--omc-rose-light); }
/* slides share one grid cell, so the band keeps the height of the tallest quote and nothing jumps */
.omc-quotes__slides { display: grid; max-width: 860px; margin: 0 auto; }
.omc-quotes__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .8s var(--omc-ease), transform .8s var(--omc-ease), visibility 0s .8s;
}
.omc-quotes__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--omc-ease) .1s, transform .8s var(--omc-ease) .1s, visibility 0s; }
.omc-quotes__body { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.omc-quotes__stars { display: flex; gap: 5px; color: var(--omc-rose-light); }
.omc-quotes__stars .omc-icon { width: 17px; height: 17px; }
.omc-quotes__text { margin: 0; font-family: var(--omc-serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.3; color: #fff; text-wrap: balance; }
.omc-quotes__text p { margin: 0; }
.omc-quotes__text p::before { content: "\201C"; }
.omc-quotes__text p::after { content: "\201D"; }
.omc-quotes__by { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 20px; position: relative; }
.omc-quotes__by::before { content: ""; position: absolute; left: 50%; top: 0; width: 44px; height: 1px; background: var(--omc-rose); transform: translateX(-50%); }
.omc-quotes__name { font: 600 12px/1.4 var(--omc-sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.omc-quotes__meta { font: 400 13px/1.6 var(--omc-sans); color: rgba(255, 255, 255, .72); }
.omc-quotes__meta a { color: var(--omc-rose-light); text-decoration: none; border-bottom: 1px solid rgba(233, 211, 202, .45); }
.omc-quotes__meta a:hover { color: #fff; border-color: currentColor; }
.omc-quotes__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: clamp(20px, 2.4vw, 34px); }
.omc-quotes__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .25s var(--omc-ease), color .25s var(--omc-ease), border-color .25s var(--omc-ease);
}
.omc-quotes__btn:hover { background: #fff; border-color: #fff; color: var(--omc-ink); }
.omc-quotes__btn:focus-visible { outline: 2px solid var(--omc-rose-light); outline-offset: 2px; }
.omc-quotes__btn .omc-icon { width: 18px; height: 18px; }
.omc-quotes__btn--prev .omc-icon { transform: scaleX(-1); }
.omc-quotes__count { min-width: 64px; text-align: center; font-family: var(--omc-serif); font-size: 18px; letter-spacing: .06em; color: rgba(255, 255, 255, .6); font-variant-numeric: lining-nums tabular-nums; }
.omc-quotes__count b { font-weight: 500; color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.omc-quotes__slide, .omc-quotes__slide.is-active { transition: opacity .2s, visibility 0s; transform: none; }
}

/* ─── Newsletter (blurred, sand-washed photo behind the form) ─── */
.omc-newsletter { position: relative; isolation: isolate; overflow: hidden; background: var(--omc-sand); margin-top: var(--omc-gap); padding: var(--omc-section) 0; text-align: center; }
.omc-newsletter__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.omc-newsletter__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: blur(10px) saturate(1.05); transform: scale(1.08); }
.omc-newsletter__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(135deg, rgba(185, 139, 126, .3) 0%, rgba(185, 139, 126, 0) 55%),
		linear-gradient(180deg, rgba(239, 230, 222, .8) 0%, rgba(247, 242, 237, .84) 100%);
}
.omc-newsletter__inner { position: relative; max-width: 640px; }
.omc-newsletter__text { font: 400 16px/1.7 var(--omc-sans); color: var(--omc-text); margin: 14px 0 0; }
.omc-newsletter__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.omc-newsletter__input {
	flex: 1 1 280px;
	min-height: 50px;
	padding: 0 18px;
	border: 1px solid var(--omc-ink);
	background: #fff;
	font: 400 15px/1 var(--omc-sans);
	color: var(--omc-ink);
	border-radius: 0;
}
.omc-newsletter__input:focus { outline: 2px solid var(--omc-rose); outline-offset: 1px; }
/* The modals ask for a first name too.
   Both boxes then share a row and the button takes the width underneath. Giving the name box a
   width of its own left it as a short stub floating above a full-width email — the two fields
   belong to each other and should look it. Below about 480px of form there is no room for two,
   and they stack. */
.omc-newsletter__form--named .omc-newsletter__input { flex: 1 1 150px; }
.omc-newsletter__form--named .omc-btn { flex: 1 1 100%; }
.omc-newsletter__note { flex-basis: 100%; margin: 6px 0 0; min-height: 1.4em; font: 500 13px/1.4 var(--omc-sans); color: var(--omc-rose-dark); }
.omc-newsletter__note.is-error { color: #8a4a3d; }

/* ─── About page ─── */
.omc-about__hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(72vh, 680px);
	overflow: hidden;
	background: var(--omc-ink);
	color: #fff;
	isolation: isolate;
}
.omc-about__media, .omc-about__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.omc-about__media img { object-fit: cover; object-position: 70% 40%; }
.omc-about__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 43, 38, .05) 30%, rgba(58, 43, 38, .62) 100%); z-index: 1; }
.omc-about__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: clamp(100px, 16vh, 180px) var(--omc-gutter) clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.omc-about__content > * { text-shadow: 0 2px 28px rgba(58, 43, 38, .35); }
.omc-about__title { color: #fff; font-size: clamp(38px, 5.4vw, 76px); margin-top: 14px; max-width: 20ch; text-wrap: balance; }
.omc-about__tagline { margin: 16px auto 0; font-family: var(--omc-serif); font-style: italic; font-size: clamp(20px, 2vw, 28px); color: var(--omc-rose-light); }

/* 640px is the site's reading measure — the same one the landing, FAQ, policy and journal
   pages use, so the About copy starts where every other page's copy starts. */
.omc-prose { max-width: 640px; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(32px, 5vw, 64px); }
.omc-prose p { font: 400 clamp(16px, 1.25vw, 18px)/1.8 var(--omc-sans); color: var(--omc-text); margin: 0 0 1.4em; }
.omc-prose .omc-lead { font-family: var(--omc-serif); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.4; color: var(--omc-ink); }
.omc-prose h2 { font-family: var(--omc-serif); font-weight: 500; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.15; color: var(--omc-ink); margin: 2.2em 0 .6em; }
.omc-prose h2 em { font-style: italic; color: var(--omc-rose-dark); }
.omc-prose .omc-eyebrow { margin-top: 2.4em; }
.omc-prose .omc-eyebrow + h2 { margin-top: .3em; }
.omc-prose .omc-pull {
	margin: 2.4em 0;
	padding: 1.6em 0 1.6em 1.4em;
	border-left: 2px solid var(--omc-rose);
	font-family: var(--omc-serif);
	font-style: italic;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.3;
	color: var(--omc-ink);
}
.omc-prose .omc-pull p { font: inherit; color: inherit; margin: 0; }
.omc-prose .omc-values {
	list-style: none;
	margin: 2.4em 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.omc-prose .omc-values li { background: var(--omc-cream); padding: 22px 20px; }
.omc-prose .omc-values strong { display: block; font-family: var(--omc-serif); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--omc-ink); margin-bottom: 8px; }
.omc-prose .omc-values span { font: 400 14px/1.6 var(--omc-sans); color: var(--omc-text); }
.omc-prose .omc-signoff { font-family: var(--omc-serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.3; color: var(--omc-ink); }
.omc-about__cta { background: var(--omc-cream); padding: var(--omc-section) 0; text-align: center; }
.omc-about__cta-inner { max-width: 640px; }
.omc-about__cta .omc-hero__actions { justify-content: center; }

/* ─── Banners (image + overlaid copy + "Shop now") ─── */
.omc-banners__grid { display: grid; gap: clamp(12px, 1.6vw, 24px); }
.omc-banners__grid--2 { grid-template-columns: 1fr 1fr; }
.omc-banner {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: var(--omc-ink);
	background: var(--omc-sand);
	isolation: isolate;
}
.omc-banner__media { display: block; height: 100%; }
.omc-banner__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--omc-ease); }
.omc-banner:hover .omc-banner__img { transform: scale(1.035); }
.omc-banner--tile .omc-banner__media { aspect-ratio: 4 / 5; }
.omc-banner--wide .omc-banner__media { aspect-ratio: 21 / 9; min-height: 380px; }
.omc-banner--tile::after, .omc-banner--wide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(58, 43, 38, 0) 45%, rgba(58, 43, 38, .55) 100%);
	z-index: 1;
	pointer-events: none;
}
/* wide banners carry copy over bright photography: darken the copy side too */
.omc-banner--wide.omc-banner--pos-bl::after {
	background:
		linear-gradient(90deg, rgba(58, 43, 38, .58) 0%, rgba(58, 43, 38, .28) 38%, rgba(58, 43, 38, 0) 62%),
		linear-gradient(180deg, rgba(58, 43, 38, 0) 55%, rgba(58, 43, 38, .45) 100%);
}
.omc-banner--wide.omc-banner--pos-br::after {
	background:
		linear-gradient(270deg, rgba(58, 43, 38, .58) 0%, rgba(58, 43, 38, .28) 38%, rgba(58, 43, 38, 0) 62%),
		linear-gradient(180deg, rgba(58, 43, 38, 0) 55%, rgba(58, 43, 38, .45) 100%);
}
.omc-banner--wide .omc-banner__img { object-position: 68% 50%; }
.omc-banner--wide.omc-banner--pos-br .omc-banner__img { object-position: 32% 50%; } /* copy on the right: keep the subject on the left */
.omc-banner__content {
	position: absolute;
	z-index: 2;
	left: clamp(20px, 3vw, 44px);
	right: clamp(20px, 3vw, 44px);
	bottom: clamp(20px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	color: #fff;
	text-shadow: 0 2px 20px rgba(58, 43, 38, .35);
}
.omc-banner--pos-br .omc-banner__content { align-items: flex-end; text-align: right; }
.omc-banner--pos-c .omc-banner__content { align-items: center; text-align: center; top: 0; justify-content: center; }
.omc-banner__content .omc-eyebrow { color: var(--omc-rose-light); }
.omc-banner__title {
	font-family: var(--omc-serif);
	font-weight: 500;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.05;
	letter-spacing: -.005em;
	color: #fff;
	text-wrap: balance;
}
.omc-banner--wide .omc-banner__title { font-size: clamp(34px, 4.2vw, 62px); max-width: 16ch; }
.omc-banner__text { max-width: 44ch; font: 400 15px/1.6 var(--omc-sans); color: rgba(255, 255, 255, .9); }
.omc-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	padding-bottom: 5px;
	border-bottom: 1px solid currentColor;
	font: 600 11px/1 var(--omc-sans);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: inherit;
}
.omc-banner__cta .omc-icon { width: 15px; height: 15px; transition: transform .25s var(--omc-ease); }
.omc-banner:hover .omc-banner__cta .omc-icon { transform: translateX(4px); }

/* Banners sit back to back (Chicwish rhythm): a small gap between one banner section and the next. */
.omc-campaign { padding-top: clamp(12px, 1.6vw, 24px); }
.omc-banners--tight { padding-top: clamp(12px, 1.6vw, 24px); }

/* split campaign banner: photo left, cream copy panel right (full-bleed) */
.omc-banner--split {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	background: var(--omc-cream);
	color: var(--omc-ink);
}
.omc-banner--split .omc-banner__media { aspect-ratio: auto; min-height: 520px; }
.omc-banner--split .omc-banner__img { object-position: 22% 30%; }
/* mirrored: copy on the left, photo on the right */
.omc-banner--split.omc-banner--media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.omc-banner--split.omc-banner--media-right .omc-banner__media { order: 2; }
.omc-banner--split.omc-banner--media-right .omc-banner__img { object-position: 50% 30%; }
/* cross-fading photo stack: every image fills the media box; the .is-active one is visible */
.omc-banner--fade .omc-banner__media { position: relative; overflow: hidden; }
.omc-banner--fade .omc-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1.4s var(--omc-ease), transform 6s linear;
	will-change: opacity;
}
.omc-banner--fade .omc-banner__img.is-active { opacity: 1; transform: scale(1); }
.omc-banner--fade:hover .omc-banner__img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	.omc-banner--fade .omc-banner__img { transition: opacity .3s; transform: none; }
}
.omc-banner--split .omc-banner__content {
	position: static;
	align-items: flex-start;
	text-align: left;
	justify-content: center;
	padding: clamp(40px, 6vw, 96px) clamp(32px, 6vw, 96px);
	color: var(--omc-ink);
	text-shadow: none;
	gap: 12px;
}
.omc-banner--split .omc-banner__content .omc-eyebrow { color: var(--omc-rose); }
.omc-banner--split .omc-banner__title { color: var(--omc-ink); font-size: clamp(36px, 4vw, 60px); }
.omc-banner--split .omc-banner__text { color: var(--omc-text); font-size: clamp(15px, 1.15vw, 17px); }
.omc-banner--split .omc-banner__cta { margin-top: 12px; color: var(--omc-ink); }

/* ─── Square carousel (Chicwish's second row): snap-scrolling track + arrows + gentle autoplay ─── */
.omc-carousel-section { padding-top: clamp(12px, 1.6vw, 24px); }
.omc-carousel { position: relative; --omc-slides: 5; --omc-slide-gap: clamp(10px, 1.2vw, 18px); }
.omc-carousel__track {
	display: flex;
	gap: var(--omc-slide-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.omc-carousel__track::-webkit-scrollbar { display: none; }
.omc-carousel__track:focus-visible { outline: 2px solid var(--omc-rose); outline-offset: 4px; }
.omc-carousel__item {
	position: relative;
	flex: 0 0 calc((100% - var(--omc-slide-gap) * (var(--omc-slides) - 1)) / var(--omc-slides));
	scroll-snap-align: start;
	display: block;
	overflow: hidden;
	background: var(--omc-sand);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
.omc-carousel__media { display: block; aspect-ratio: 1 / 1; }
.omc-carousel__media img { display: block; width: 100% !important; height: 100% !important; max-width: 100%; object-fit: cover; object-position: top; transition: transform 1s var(--omc-ease); }
.omc-carousel__item:hover img { transform: scale(1.05); }
.omc-carousel__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 43, 38, 0) 55%, rgba(58, 43, 38, .58) 100%); pointer-events: none; }
.omc-carousel__label {
	position: absolute;
	left: 14px; right: 14px; bottom: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-family: var(--omc-serif);
	font-size: clamp(18px, 1.5vw, 22px);
	font-weight: 500;
	line-height: 1.1;
	text-shadow: 0 2px 16px rgba(58, 43, 38, .4);
}
.omc-carousel__label .omc-icon { width: 16px; height: 16px; flex: 0 0 auto; opacity: .85; transition: transform .25s var(--omc-ease); }
.omc-carousel__item:hover .omc-carousel__label .omc-icon { transform: translateX(4px); }
.omc-carousel__btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 1px solid var(--omc-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	color: var(--omc-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(58, 43, 38, .4);
	transition: background-color .2s var(--omc-ease), color .2s var(--omc-ease);
}
.omc-carousel__btn:hover { background: var(--omc-ink); color: var(--omc-cream); border-color: var(--omc-ink); }
.omc-carousel__btn .omc-icon { width: 18px; height: 18px; }
.omc-carousel__btn--prev { left: -22px; }
.omc-carousel__btn--prev .omc-icon { transform: rotate(180deg); }
.omc-carousel__btn--next { right: -22px; }
@media (prefers-reduced-motion: reduce) { .omc-carousel__track { scroll-behavior: auto; } .omc-carousel__media img { transition: none; } }

/* framed "editor's pick" product feature */
.omc-feature { display: block; text-decoration: none; color: var(--omc-ink); }
.omc-feature__frame { display: block; padding: clamp(14px, 1.6vw, 22px); background: var(--omc-cream); border: 1px solid var(--omc-line); }
.omc-feature__frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: #fff; transition: transform .9s var(--omc-ease); }
.omc-feature:hover .omc-feature__frame img { transform: scale(1.02); }
.omc-feature__caption { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 16px 2px 0; }
.omc-feature__name { font-family: var(--omc-serif); font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.15; }
.omc-feature__price { font: 500 14px/1 var(--omc-sans); color: var(--omc-muted); }
.omc-feature__price del { opacity: .6; margin-right: 6px; }
.omc-feature__price ins { text-decoration: none; color: var(--omc-rose-dark); }
.omc-feature .omc-banner__cta { color: var(--omc-ink); }

/* ─── Footer (child footer.php replaces the parent's Elementor footer page) ─── */
.c-footer.omc-footer { background: var(--omc-cream); color: var(--omc-text); border-top: 1px solid var(--omc-line); padding: 0; }
.omc-footer__inner { padding-top: clamp(44px, 5vw, 72px); padding-bottom: 26px; }
.omc-footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.6fr; gap: 40px clamp(24px, 4vw, 64px); align-items: start; }
.omc-footer__grid--3 { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(48px, 9vw, 160px); } /* front page: brand left, link columns grouped right */
.omc-footer__logo { display: inline-block; line-height: 0; }
.omc-footer__logo img { display: block; width: 160px; height: auto; transition: opacity .25s var(--omc-ease); }
.omc-footer__logo:hover img { opacity: .7; }
.omc-footer__tagline { margin: 12px 0 0; font-family: var(--omc-serif); font-style: italic; font-size: 19px; line-height: 1.3; color: var(--omc-rose-dark); }
.omc-footer__blurb { margin: 12px 0 0; max-width: 36ch; font: 400 14px/1.75 var(--omc-sans); color: var(--omc-text); }
.omc-footer__social { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.omc-footer__social a { font: 600 11px/1 var(--omc-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--omc-ink); text-decoration: none; }
.omc-footer__heading { margin: 0 0 18px; font: 600 11px/1 var(--omc-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--omc-ink); }
.omc-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.omc-footer__col li { margin: 0; padding: 0; }
.omc-footer__col a { font: 400 14px/1.5 var(--omc-sans); color: var(--omc-text); text-decoration: none; }
.omc-footer__col a:hover, .omc-footer__social a:hover, .omc-footer__legal a:hover { color: var(--omc-rose-dark); }
.omc-footer__newsletter p { margin: 0; font: 400 14px/1.75 var(--omc-sans); color: var(--omc-text); }
.omc-footer__newsletter .omc-newsletter__form { margin-top: 16px; justify-content: flex-start; }
.omc-footer__newsletter .omc-newsletter__input { flex-basis: 190px; min-height: 46px; }
.omc-footer__newsletter .omc-btn { min-height: 46px; }
/* The security and payment marks. A grid rather than a row of pills: four cards that size
   themselves to their text never line up, and six of them wrapped four-and-two with a ragged gap.
   Equal columns, equal heights, and the artwork left in the brands' own colours - a Stripe mark
   recoloured to the palette stops being the thing a shopper recognises. */
/* ─── The trust band ───
   Four claims the shop can stand behind, read as one line across the bottom of the footer rather
   than as four boxes. Boxes were the problem: a border and a fill on cream reads as a form, the
   card logos made one of them taller than its neighbours, and a solid purple glyph among three
   thin rose ones made the row look assembled from spare parts. One ground, hairlines between,
   every mark drawn at the same weight. */
.omc-footer__trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: clamp(30px, 3.4vw, 44px) 0 0;
	padding: clamp(20px, 2.4vw, 26px) 0 0;
	border-top: 1px solid var(--omc-line);
	list-style: none;
}
.omc-footer__trust-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 2px clamp(16px, 2vw, 26px);
	border-left: 1px solid var(--omc-line);
}
.omc-footer__trust-item:first-child {
	padding-left: 0;
	border-left: 0;
}
.omc-footer__trust-item:last-child { padding-right: 0; }

.omc-footer__trust-link {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: inherit;
	text-decoration: none;
}

/* One slot for the mark whatever shape it is, so the words start at the same x in all four. */
.omc-footer__trust-item > svg,
.omc-footer__trust-link > svg {
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	margin-top: 1px;
}
/* Line icons: drawn, not filled, in the one accent this footer uses. */
.omc-footer__trust-item--lock > svg,
.omc-footer__trust-item--globe > svg,
.omc-footer__trust-item--return > svg,
.omc-footer__trust-link > svg {
	fill: none;
	stroke: var(--omc-rose);
	stroke-width: 1.4;
}
/*
 * The Stripe mark is a solid shape and would shout next to three hairline drawings, so it is set
 * in the footer's own ink at the same optical size. Monochrome is within Stripe's own guidance.
 */
.omc-footer__trust-item--brand > svg,
.omc-footer__trust-item--brand .omc-footer__trust-link > svg {
	/* A solid glyph covers more ink than a hairline drawing, so it is set smaller and softer to
	   weigh the same on the page. */
	flex-basis: 17px;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	fill: var(--omc-rose-dark) !important;
	stroke: none;
	opacity: .8;
}

.omc-footer__trust-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.omc-footer__trust-text strong {
	font: 600 11px/1.35 var(--omc-sans);
	letter-spacing: .085em;
	text-transform: uppercase;
	color: var(--omc-ink);
	text-wrap: balance;
}
.omc-footer__trust-text em {
	font: 400 12px/1.5 var(--omc-sans);
	font-style: normal;
	color: var(--omc-muted);
	text-wrap: pretty;
}

/* The cards Stripe settles. Greyed back so they support the claim above rather than compete. */
.omc-footer__cards {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 3px;
	opacity: .75;
	filter: grayscale(1);
	transition: opacity .25s ease, filter .25s ease;
}
.omc-footer__trust-item--brand:hover .omc-footer__cards {
	opacity: 1;
	filter: none;
}

.omc-footer__trust-link:hover .omc-footer__trust-text strong,
.omc-footer__trust-link:focus-visible .omc-footer__trust-text strong { color: var(--omc-rose-dark); }
.omc-footer__trust-link:hover .omc-footer__trust-text em { color: var(--omc-text); }
.omc-footer__trust-link:focus-visible { outline: 2px solid var(--omc-rose); outline-offset: 4px; }

@media (max-width: 1023px) {
	/* Two and two: the divider that was vertical becomes the rule between the rows. */
	.omc-footer__trust { grid-template-columns: repeat(2, 1fr); row-gap: clamp(18px, 2.6vw, 24px); }
	.omc-footer__trust-item:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
	.omc-footer__trust-item:nth-child(even) { padding-right: 0; }
	.omc-footer__trust-item:nth-child(n + 3) {
		padding-top: clamp(18px, 2.6vw, 24px);
		border-top: 1px solid var(--omc-line);
	}
}
@media (max-width: 519px) {
	.omc-footer__trust { grid-template-columns: 1fr; row-gap: 0; }
	.omc-footer__trust-item {
		padding: 14px 0;
		border-left: 0;
		border-top: 1px solid var(--omc-line);
	}
	.omc-footer__trust-item:first-child {
		padding-top: 0;
		border-top: 0;
	}
	.omc-footer__trust-item:nth-child(n + 3) {
		padding-top: 14px;
		border-top: 1px solid var(--omc-line);
	}
	.omc-footer__trust-item:last-child { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.omc-footer__cards { transition: none; }
}

.omc-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; margin-top: clamp(36px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--omc-line); }
.omc-footer__copy { margin: 0; font: 500 12px/1.5 var(--omc-sans); color: var(--omc-muted); }
.omc-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.omc-footer__legal li { margin: 0; }
.omc-footer__legal a { font: 500 12px/1.5 var(--omc-sans); color: var(--omc-muted); text-decoration: none; }

/* ─── Responsive ─── */
@media (max-width: 1023px) {
	.omc-footer__grid, .omc-footer__grid--3 { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
	.omc-footer__brand, .omc-footer__newsletter { grid-column: 1 / -1; }
	.omc-cats__grid { grid-template-columns: repeat(2, 1fr); }
	.omc-live__card { grid-template-columns: 1fr; }
	.omc-live__media { min-height: 0; aspect-ratio: 16 / 9; }
	/* Product cards go 2-up on tablets, matching the category grid above. Four columns here squeezed
	   each card to ~167px, half the width of the category card beside it. Two also divides 8 and 4
	   evenly, so there is still no orphan row — which is why this was 4-up before. */
	.omc-products .c-product-grid__list:not(.owl-carousel):not(.c-product-grid__list--carousel) { grid-template-columns: repeat(2, 1fr); }
	.omc-products .c-product-grid__item, .omc-products .c-product-grid__item--background { padding: 8px; }
	.omc-products .woocommerce-loop-product__title { font-size: 18px; }
	.omc-products .c-product-grid__details { padding: 12px 2px 2px; }
	.omc-usp__list { grid-template-columns: repeat(2, 1fr); }
	.omc-journal__grid { grid-template-columns: repeat(2, 1fr); }
	.omc-edit__grid { grid-template-columns: 1fr; }
	.omc-edit__media { padding-right: 24%; padding-bottom: 18%; max-width: 640px; }
	.omc-banner--wide .omc-banner__media { aspect-ratio: 16 / 9; min-height: 320px; }
	/* split banners stack below desktop widths: photo first, copy panel second, both orientations.
	   (Side by side, the copy column shrinks to ~220px on tablets.) The desktop media-right rule has higher
	   specificity, so it is repeated here, and its media order is reset. */
	.omc-banner--split,
	.omc-banner--split.omc-banner--media-right { grid-template-columns: 1fr; }
	.omc-banner--split.omc-banner--media-right .omc-banner__media { order: 0; }
	.omc-banner--split .omc-banner__media { aspect-ratio: 16 / 10; min-height: 0; }
	.omc-banner--split .omc-banner__content { padding: 40px clamp(24px, 6vw, 64px) 48px; max-width: 680px; }
	.omc-carousel { --omc-slides: 3; }
	.omc-quotes__text { font-size: clamp(22px, 3.2vw, 30px); }
	.omc-carousel__btn--prev { left: 6px; }
	.omc-carousel__btn--next { right: 6px; }
}
@media (max-width: 767px) {
	/* svh is the viewport with the browser's own bars showing, which is what a phone actually has;
	   vh stays first for anything that does not know the unit. */
	.omc-hero { min-height: 70vh; min-height: 70svh; align-items: center; }
	/* A phone shows a tall slice of the picture with the copy across the middle of it, so it
	   needs more help than a wide screen does — but still a foot rather than a sheet. */
	.omc-hero::after {
		background: linear-gradient(180deg,
			rgba(58, 43, 38, .30) 0%,
			rgba(58, 43, 38, .16) 30%,
			rgba(58, 43, 38, .22) 58%,
			rgba(58, 43, 38, .60) 100%);
	}
	/* The hero photographs are landscape with the subject right of centre, and a phone crops a
	   3:2 frame to something near portrait — so only the horizontal matters, and 56% cut the
	   woman in half at the edge. */
	.omc-hero__media img { object-position: 74% 50%; }
	/* Centred, with the foot left clear for the credit pinned in the corner. */
	.omc-hero__content {
		padding-top: clamp(28px, 5vh, 48px);
		padding-bottom: clamp(84px, 13vh, 116px);
	}
	.omc-hero__title { font-size: clamp(28px, 8.6vw, 37px); }
	.omc-hero__lede { font-size: 14px; }
	.omc-section__head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.omc-usp__list { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-top: 14px; padding-bottom: 14px; }
	/* Tighter tracking on a phone buys about two characters a line, which is the difference
	   between four items on one line each and one of them wrapping. */
	.omc-usp__item { justify-content: flex-start; font-size: 10px; letter-spacing: .05em; gap: 7px; }
	.omc-usp__item .omc-icon { width: 18px; height: 18px; }
	.omc-journal__grid { grid-template-columns: 1fr; }
	.omc-prose .omc-values { grid-template-columns: 1fr; }
	/* 2-up tiles and editor's picks stay side by side on phones (two compact columns beat two screen-tall blocks) */
	.omc-banners__grid--2 { grid-template-columns: 1fr 1fr; gap: 10px; }
	.omc-banner--tile .omc-banner__content { left: 12px; right: 12px; bottom: 12px; gap: 4px; }
	.omc-banner--tile .omc-banner__title { font-size: 19px; }
	.omc-banner--tile .omc-banner__content .omc-eyebrow { font-size: 9px; letter-spacing: .18em; }
	.omc-banner--tile .omc-banner__cta { font-size: 9px; letter-spacing: .14em; }
	/* on a 175px tile the copy starts halfway up the photo: scrim has to start higher and end darker */
	.omc-banner--tile::after { background: linear-gradient(180deg, rgba(58, 43, 38, 0) 22%, rgba(58, 43, 38, .3) 50%, rgba(58, 43, 38, .74) 100%); }
	.omc-feature__frame { padding: 8px; }
	.omc-feature__caption { padding-top: 10px; gap: 4px; }
	.omc-feature__caption .omc-eyebrow { font-size: 9px; }
	.omc-feature__name { font-size: 17px; }
	.omc-feature__price { font-size: 12px; }
	.omc-feature .omc-banner__cta { font-size: 9px; letter-spacing: .14em; }
	/* home product grids on phones: photo, brand, name, price — the short description made every card screen-tall */
	.omc-products .c-product-grid__list { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.omc-products .c-product-grid__item, .omc-products .c-product-grid__item--background { padding: 8px; }
	.omc-products .c-product-grid__details { padding: 10px 2px 2px; }
	.omc-products .woocommerce-loop-product__title { font-size: 17px; }
	.omc-products .c-product-grid__price-wrap { font-size: 12px; margin-top: 6px; }
	.omc-carousel { --omc-slides: 2.2; }   /* a peek of the next slide invites the swipe */
	/* testimonials on phones: tighter band, smaller quote, compact nav */
	.omc-quotes__band { padding: 32px 0 30px; }
	.omc-quotes__head { margin-bottom: 18px; }
	.omc-quotes__btn { width: 40px; height: 40px; }
	.omc-quotes__text { font-size: 22px; }
	.omc-quotes__stars .omc-icon { width: 15px; height: 15px; }
	.omc-quotes__nav { margin-top: 26px; }
	.omc-carousel__btn { display: none; }
	.omc-carousel__label { font-size: 17px; left: 10px; right: 10px; bottom: 10px; }
	.omc-banner--wide .omc-banner__media { aspect-ratio: 4 / 5; min-height: 0; }
	.omc-banner--wide.omc-banner--pos-bl::after,
	.omc-banner--wide.omc-banner--pos-br::after {
		background: linear-gradient(180deg, rgba(58, 43, 38, .05) 0%, rgba(58, 43, 38, .2) 45%, rgba(58, 43, 38, .72) 100%);
	}
	.omc-banner--wide.omc-banner--pos-br .omc-banner__img { object-position: 40% 50%; }
	/* split banners (already stacked from the 1023px block): tighter photo and panel on phones */
	.omc-banner--split .omc-banner__media { aspect-ratio: 4 / 3; }
	.omc-banner--split .omc-banner__content { padding: 32px var(--omc-gutter) 40px; max-width: none; }
	:root { --omc-seam: 12px; }
	.omc-live__media { aspect-ratio: 4 / 3; }
	.omc-live__body { padding: 20px 16px 22px; gap: 10px; }
	.omc-live__title { font-size: 28px; }
	.omc-live__text { font-size: 14px; }
	.omc-live__count { width: 100%; gap: 8px; }
	.omc-live__cell { flex: 1 1 0; min-width: 0; padding: 10px 4px 8px; }
	.omc-live__num { font-size: 26px; }
	.omc-live__form { max-width: none; }
	.omc-live__form .omc-newsletter__input { flex-basis: 100%; }
	/* mosaic on phones: two columns — [2×2] / [1×1][tall] / [1×1][tall] / [1×1][1×1] / [wide] */
	.omc-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.omc-mosaic__item--2x2 { aspect-ratio: 1 / 1; }   /* alone in its rows, so it sets their height */
	.omc-mosaic__item--2x1 { aspect-ratio: 2 / 1; }
	.omc-mosaic__label { left: 8px; bottom: 8px; padding: 7px 9px 7px 10px; font-size: 9px; letter-spacing: .14em; gap: 6px; }
	/* banner rows sit tight on phones (Chicwish-style stack): one consistent 10px seam, not 40px */
	.omc-campaign, .omc-carousel-section, .omc-banners--tight { padding-top: 10px; }
	.omc-cat__body { flex-direction: column; gap: 4px; }
	.omc-btn { width: 100%; }
	.omc-hero__actions { flex-direction: column; }
	/* footer: brand on top, Shop/Help side by side, newsletter full width */
	.omc-footer__inner { padding-top: 40px; padding-bottom: 22px; }
	.omc-footer__grid, .omc-footer__grid--3 { gap: 30px 18px; }
	.omc-footer__logo img { width: 132px; }
	.omc-hero__logo { width: 100px; margin-bottom: 14px; }
	.omc-footer__tagline { font-size: 17px; margin-top: 8px; }
	.omc-footer__blurb { font-size: 13px; margin-top: 10px; }
	.omc-footer__heading { margin-bottom: 14px; }
	.omc-footer__col ul { gap: 9px; }
	.omc-footer__col a { font-size: 13px; }
	.omc-footer__newsletter .omc-newsletter__input { flex-basis: 100%; }
	.omc-footer__bottom { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 30px; padding-top: 16px; }
	.omc-footer__legal { gap: 6px 16px; }
}


/* ─── Style videos on the home page ─────────────────────────────────────────
   The cards themselves come from omc-video.css, which is enqueued here too.
   This only adds the lede paragraph and the row spacing. ─────────────────── */
/* Full width of the section, like the heading above it and the cards below — a 640px column
   under a full-width head read as a mistake. The type steps up with the measure so the line
   length stays something a person can follow back to the left edge. */
.omc-vidrow__lede {
	margin: clamp(10px, 1.4vw, 18px) 0 clamp(22px, 2.6vw, 34px);
	font: 400 clamp(16px, 1.35vw, 20px)/1.7 var(--omc-sans);
	color: var(--omc-text);
	text-wrap: pretty;
}
.omc-vidrow__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ─── "As seen on", in the hero ───────────────────────────────────────────
   A credit rather than a band: one mark at a time cross-fades (assets/js/omc.js, .js-omc-fade)
   with the count and its source beneath it. Three layouts, because the hero has three shapes —
   pinned to the left of the photograph where there is room beside the centred copy, a single
   centred line above the wordmark where there is not, and tighter still on a phone. ────────── */
/* The hero is what the step-out below is measured against. */
.omc-hero { container-type: inline-size; }
.omc-seen {
	--omc-seen-h: clamp(20px, 2vw, 27px);
	position: absolute;
	left: 50%;
	bottom: var(--omc-wm-inset, 16px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 11px;
	text-align: left;
	/* The credit lives inside the 1170px column; the monogram it answers is pinned to the edge of
	   the full-bleed hero. The column is centred, so its own 50% is the hero's centre, and stepping
	   half the hero back from there lands on the hero's edge. */
	margin: 0 0 0 calc(var(--omc-wm-inset, 16px) - 50vw);
}
/* Measured against the hero itself rather than the viewport, because 100vw counts a scrollbar the
   hero does not have, and the mirror would sit that half-scrollbar too far out. */
@supports (width: 1cqi) {
	.omc-seen { margin-left: calc(var(--omc-wm-inset, 16px) - 50cqi); }
}
/* The marks are flat ink on transparency, so over a photograph they are reversed out to white —
   one filter, rather than a second set of files to keep in step with the first. */
.omc-seen__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: calc(var(--omc-seen-h) * var(--omc-press-scale, 1));
	width: auto;
	max-width: 100%;
	object-fit: contain;
	opacity: 0;
	filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(58, 43, 38, .55));
	transition: opacity .3s var(--omc-ease);
}
/* One mark leaves before the next arrives. Photographs may cross-fade through each other; two
   wordmarks doing it read as a double exposure, so the incoming one waits out the departure. */
.omc-seen__logo.is-active { opacity: .96; transition-delay: .3s; }
/* The mark is what the rule introduces, so it sits on the far side of it. */
.omc-seen__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-left: 11px;
	border-left: 1px solid rgba(255, 255, 255, .26);
}
.omc-seen__stage {
	position: relative;
	width: clamp(64px, 6vw, 86px);
	height: calc(var(--omc-seen-h) * 1.5);
	flex: none;
}
.omc-seen__eyebrow {
	margin: 0;
	font: 600 clamp(9.5px, .8vw, 11px)/1 var(--omc-sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .66);
	white-space: nowrap;
}
.omc-seen__count {
	margin: 0;
	font: 600 clamp(10.5px, .92vw, 13px)/1.35 var(--omc-sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .95);
	text-wrap: balance;
}
.omc-seen__by {
	margin: 0;
	font: 400 clamp(9.5px, .8vw, 11px)/1.35 var(--omc-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}
/* The source's name stays whole, so the only place this line can turn is the space in front of it:
   "Verified by / The Buzz Blast", never "...the / Buzz Blast". */
.omc-seen__src { white-space: nowrap; }
.omc-seen__by a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 1px; }
.omc-seen__by a:hover { color: #fff; border-bottom-color: currentColor; }

/* The names the cycling marks stand for, for anything that cannot see them. */
.omc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Wide enough for the centred copy and a column beside it: the credit sits in the bottom-left
   corner of the photograph, inset by the same amount as the watermark in the opposite corner, and
   on the left edge of the container the rest of the page uses — so it lines up with everything
   below the fold and the two corner marks answer each other. */
/* Between a phone and a desktop the copy still sits at the foot of the picture, so the corner the
   credit occupies has to be given back to it. */
@media (min-width: 768px) and (max-width: 1023px) {
	.omc-hero__content { padding-bottom: clamp(104px, 13vh, 150px); }
}

/* Room for a column: the mark gets a line of its own above the footnote, and more height with it. */
@media (min-width: 1024px) {
	.omc-seen { --omc-seen-h: clamp(24px, 2.3vw, 33px); gap: 14px; }
	.omc-seen__text { width: clamp(136px, 11.5vw, 170px); padding-left: 14px; gap: 7px; }
	.omc-seen__stage { height: calc(var(--omc-seen-h) * 1.6); }
}

/* Phones: the mark sits beside its label rather than above it, so the corner block stays short
   enough to leave the copy the middle of the picture. */
@media (max-width: 767px) {
	.omc-seen { --omc-seen-h: 17px; gap: 9px; }
	.omc-seen__text { gap: 3px; padding-left: 9px; }
	.omc-seen__stage { width: 62px; height: calc(var(--omc-seen-h) * 1.45); }
	.omc-seen__eyebrow { font-size: 8.5px; letter-spacing: .16em; }
	.omc-seen__count { font-size: 9.5px; letter-spacing: .09em; }
	.omc-seen__by { font-size: 8.5px; letter-spacing: .07em; }
}

/* Nothing moves: show the marks together instead of cycling through them. */
@media (prefers-reduced-motion: reduce) {
	.omc-seen__stage {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 10px 14px;
		width: auto;
		height: auto;
	}
	.omc-seen__logo { position: static; transform: none; opacity: .9; }
}

/* ─── Footer: what is true about paying here ─────────────────────────────── */
.omc-footer__badges {
	list-style: none;
	margin: clamp(28px, 3.4vw, 44px) 0 0;
	padding: clamp(24px, 2.8vw, 34px) 0 0;
	border-top: 1px solid var(--omc-footer-line, rgba(247, 242, 237, .16));
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 32px);
}
.omc-footer__badge { display: flex; align-items: flex-start; gap: 10px; }
.omc-footer__badge svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	stroke: currentColor;
	stroke-width: 1.4;
	fill: none;
	opacity: .8;
}
.omc-footer__badge span { display: block; }
.omc-footer__badge strong {
	display: block;
	font: 500 13px/1.35 var(--omc-sans);
	letter-spacing: .01em;
}
.omc-footer__badge em {
	display: block;
	margin-top: 3px;
	font: 400 12px/1.45 var(--omc-sans);
	font-style: normal;
	opacity: .62;
}

@media (max-width: 1023px) {
	.omc-vidrow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.omc-footer__badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.omc-vidrow__grid { grid-template-columns: 1fr; }
	.omc-footer__badges { grid-template-columns: 1fr; gap: 14px; }
}


/* ─── Announcement bar: countdown to the next live ─────────────────────────
   Sits inside the parent's dark bar, so everything here is light-on-dark and
   sized to stay on one line down to about 900px, then wraps to two. ─────── */
.omc-livebar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 14px;
	line-height: 1;
	/* The parent's strip is a 26px line with no padding, so a bordered button sat taller than the
	   bar it was in. Give the row real height and centre everything in it. */
	min-height: 56px;
	padding: 11px 20px;
	box-sizing: border-box;
}
/* The strip itself has to stop constraining the row it now contains. */
.c-header__advert_bar { min-height: 0; height: auto; line-height: 1; }
.c-header__advert_bar .omc-announce__social { align-self: center; }
.omc-livebar__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--omc-rose-light, #e9d3ca);
	box-shadow: 0 0 0 0 rgba(233, 211, 202, .7);
	animation: omc-livebar-pulse 2.4s infinite;
}
@keyframes omc-livebar-pulse {
	70% { box-shadow: 0 0 0 7px rgba(233, 211, 202, 0); }
	100% { box-shadow: 0 0 0 0 rgba(233, 211, 202, 0); }
}
/* One face, one tracking, one set of relationships — but sized to be read rather than admired.
   Everything steps off --omc-livebar-size, so the whole strip scales from one number. */
.omc-livebar {
	--omc-livebar-size: 13px;
	--omc-livebar-clock: 18px;
}
.omc-livebar,
.omc-livebar__lead,
.omc-livebar__tag,
.omc-livebar__cta,
.omc-livebar__watch,
.omc-livebar__now {
	font-family: var(--omc-sans);
	font-size: var(--omc-livebar-size);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.omc-livebar__lead { font-weight: 600; opacity: 1; }
/* The clock is the reason the bar exists, so it is the one thing allowed to be bigger. Same face,
   same tracking, same case — a size step, not a second typographic system. */
.omc-livebar__clock {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	font-family: var(--omc-sans);
	font-size: var(--omc-livebar-clock);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.omc-livebar__unit { display: inline-flex; align-items: baseline; gap: 2px; }
/* .omc-live__num is shared with the home page's live card, where it is a 32px serif numeral in
   deep brown. On a dark bar that is invisible and four times too big, so the bar takes it back. */
.omc-livebar .omc-live__num,
.omc-livebar__unit b {
	display: inline;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: 700;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: .01em;
}
/* The unit letter rides with its number rather than sitting under it as a caption. */
.omc-livebar__unit i {
	font-style: normal;
	font-size: .66em;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: lowercase;
	opacity: .72;
}
.omc-livebar__tag { opacity: .85; font-weight: 500; letter-spacing: .1em; }
.omc-livebar__clock::before,
.omc-livebar__tag::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 16px;
	margin-right: 16px;
	background: currentColor;
	opacity: .3;
	vertical-align: -3px;
}
.omc-livebar__now,
.omc-livebar__watch { display: none; }

/* Countdown finished: the clock gives way to "we are live now" and a way in. */
.omc-livebar.is-live .omc-livebar__clock,
.omc-livebar.is-live .omc-livebar__lead,
.omc-livebar.is-live .omc-livebar__tag,
.omc-livebar.is-live .omc-livebar__cta { display: none; }
.omc-livebar.is-live .omc-livebar__now,
.omc-livebar.is-live .omc-livebar__watch { display: inline-flex; }
.omc-livebar.is-live .omc-livebar__now { font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.omc-livebar__cta,
.omc-livebar__watch {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, .42);
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 7px 16px;
	cursor: pointer;
	transition: background .25s var(--omc-ease), color .25s var(--omc-ease), border-color .25s var(--omc-ease);
}
.omc-livebar__watch:hover { background: #fff; color: var(--omc-ink); border-color: #fff; }
.omc-livebar__watch:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* The one thing on the bar we want clicked, so it stops looking like the text around it.
   A warm gold rather than a lemon: it carries black at about 12:1 and sits with the rose and
   cream instead of shouting over them. Note this is outside the stated brand palette. */
.omc-livebar__cta {
	--omc-livebar-cta: #f2c14e;
	background: var(--omc-livebar-cta);
	border-color: var(--omc-livebar-cta);
	color: #1c1917;
}
.omc-livebar__cta:hover {
	background: #ffd671;
	border-color: #ffd671;
	color: #1c1917;
}
.omc-livebar__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 767px) {
	/* The countdown takes the strip; the icons are in the footer and the logo row. */
	.omc-announce__social--compact { display: none; }
	.omc-livebar {
		--omc-livebar-size: 11px;
		--omc-livebar-clock: 15px;
		gap: 7px 12px;
		min-height: 50px;
		padding: 9px 14px;
		letter-spacing: .08em;
	}
	.omc-livebar__tag { display: none; }          /* the button already says what it is for */
	.omc-livebar__tag::before, .omc-livebar__clock::before { display: none; }
	.omc-livebar__clock { gap: 7px; }
	.omc-livebar__cta { padding: 6px 13px; }
}

/* ─── Reminder dialog ─── */
.omc-livemodal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.omc-livemodal[hidden] { display: none; }
.omc-livemodal__backdrop { position: absolute; inset: 0; background: rgba(28, 20, 17, .6); }
.omc-livemodal__panel {
	position: relative;
	width: min(480px, 100%);
	max-height: 90vh;
	overflow: auto;
	padding: clamp(26px, 4vw, 40px);
	background: var(--omc-cream);
	border: 1px solid var(--omc-line);
	box-shadow: 0 30px 80px rgba(28, 20, 17, .3);
	text-align: center;
}
.omc-livemodal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--omc-muted);
}
.omc-livemodal__close:hover { color: var(--omc-ink); }
.omc-livemodal__title {
	font-family: var(--omc-serif);
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	color: var(--omc-ink);
	margin: 8px 0 0;
}
.omc-livemodal__when {
	margin: 10px 0 0;
	font: 600 12px/1.5 var(--omc-sans);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--omc-rose-dark);
}
.omc-livemodal__text {
	margin: 12px 0 clamp(18px, 2.4vw, 26px);
	font: 400 15px/1.7 var(--omc-sans);
	color: var(--omc-text);
}
.omc-livemodal__link { margin: 16px 0 0; }

@media (prefers-reduced-motion: reduce) {
	.omc-livebar__dot { animation: none; }
}

/* ─── Floating discount tab ────────────────────────────────────────────────
   A tab down the right edge on desktop, a pill above the thumb on phones. It
   trades a real coupon for an email, so it earns being permanently on screen —
   but it stays small and stays out of the way of the cart and the content. ── */
.omc-disctab {
	position: fixed;
	z-index: 99998;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--omc-livebar-cta, #f2c14e);
	color: #1c1917;
	font: 700 14px/1 var(--omc-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 26px 15px;
	writing-mode: vertical-rl;
	/* Rounded on the side that meets the page, square against the edge it is stuck to. */
	border-radius: 6px 0 0 6px;
	box-shadow: -3px 0 22px rgba(28, 20, 17, .22);
	transition: background .25s var(--omc-ease), padding .25s var(--omc-ease);
}
.omc-disctab:hover { background: #ffd671; padding-right: 20px; }
.omc-disctab:focus-visible { outline: 2px solid var(--omc-ink); outline-offset: -4px; }

@media (max-width: 767px) {
	.omc-disctab {
		top: auto;
		bottom: 16px;
		right: 16px;
		transform: none;
		writing-mode: horizontal-tb;
		font-size: 13px;
		letter-spacing: .1em;
		padding: 15px 22px;
		border-radius: 999px;
		box-shadow: 0 6px 22px rgba(28, 20, 17, .26);
	}
}
/* It is a marketing prompt, and it loses to anything that takes money.
   On a phone the pill sits at bottom-right, which is exactly where the full-width Checkout button
   ends: measured on /cart/ at 390px the pill covered the button from x238 to x369 of its x21–369.
   A shopper reaching for Checkout hit a discount offer instead. It therefore stands down on the
   two pages where paying is the whole point, and underneath the slide-out cart wherever that
   opens — on a wide screen the tab is pinned to the right edge, which is the edge the drawer
   comes in from. Everywhere else it stays. */
@media (max-width: 767px) {
	.woocommerce-cart .omc-disctab,
	.woocommerce-checkout .omc-disctab { display: none; }
}
body:has(.js-cart-sidebar.c-shop-sidebar--active) .omc-disctab { display: none; }

@media print { .omc-disctab { display: none; } }

/* ─── Shared dialog shell (discount, and anything added later) ─── */
.omc-modal {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.omc-modal[hidden] { display: none; }
.omc-modal__backdrop { position: absolute; inset: 0; background: rgba(28, 20, 17, .62); }
.omc-modal__panel {
	position: relative;
	width: min(470px, 100%);
	max-height: 90vh;
	overflow: auto;
	padding: clamp(28px, 4vw, 42px);
	background: var(--omc-cream);
	border: 1px solid var(--omc-line);
	box-shadow: 0 30px 80px rgba(28, 20, 17, .32);
	text-align: center;
}
.omc-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--omc-muted);
}
.omc-modal__close:hover { color: var(--omc-ink); }
.omc-modal__title {
	font-family: var(--omc-serif);
	font-weight: 500;
	font-size: clamp(25px, 2.8vw, 34px);
	line-height: 1.12;
	color: var(--omc-ink);
	margin: 8px 0 0;
	text-wrap: balance;
}
.omc-modal__text {
	margin: 12px 0 clamp(18px, 2.4vw, 24px);
	font: 400 15px/1.7 var(--omc-sans);
	color: var(--omc-text);
}
.omc-modal__small { margin: 14px 0 0; font: 400 12px/1.5 var(--omc-sans); color: var(--omc-muted); }

.omc-modal__reveal { margin: clamp(18px, 2.4vw, 24px) 0 0; }
.omc-modal__code-label { margin: 0; font: 600 10px/1 var(--omc-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--omc-rose-dark); }
.omc-modal__code {
	margin: 8px 0 0;
	padding: 13px 16px;
	border: 1px dashed var(--omc-rose);
	background: #fff;
	font: 600 20px/1 var(--omc-sans);
	letter-spacing: .22em;
	color: var(--omc-ink);
}
.omc-modal__code-note { margin: 8px 0 14px; font: 400 13px/1.5 var(--omc-sans); color: var(--omc-muted); }
/* The code goes by email now, so what sat where the big code used to is a sentence. */
.omc-modal__sent { margin: 8px 0 16px; font: 400 15px/1.6 var(--omc-sans); color: var(--omc-text); }

/* ─── The discount dialog, as a boutique would do it ───────────────────────
   A cream box with a form in it asked for an email the way a utility would.
   The photograph does the work the words cannot: it says what the shop sells
   before anybody reads a line of it. Split in two on a wide screen, a band
   across the top on a narrow one — never hidden, because the picture is the
   reason the dialog looks like anything at all. ────────────────────────── */
.omc-modal__panel--split {
	width: min(880px, 100%);
	padding: 0;
	overflow: hidden;
	text-align: left;
	background: var(--omc-cream);
}
.omc-modal__panel--split .omc-modal__close {
	top: 10px;
	right: 14px;
	z-index: 2;
	color: var(--omc-ink);
}
.omc-modal__figure {
	position: relative;
	--omc-wm: 54px;
	--omc-wm-inset: 14px;
	overflow: hidden;
	background: var(--omc-sand);
	/* A band on a phone: tall enough to read as a photograph, short enough to
	   leave the form above the fold on a small screen. */
	height: 190px;
}
.omc-modal__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	display: block;
}
.omc-modal__body { padding: clamp(26px, 4vw, 40px); }
.omc-modal__rule {
	display: block;
	width: 44px;
	height: 1px;
	margin: 16px 0 0;
	background: var(--omc-rose);
}
.omc-modal__panel--split .omc-modal__title { margin-top: 10px; }
.omc-modal__panel--split .omc-modal__text { margin-top: 14px; }

@media (min-width: 720px) {
	.omc-modal__panel--split {
		display: grid;
		grid-template-columns: 0.82fr 1fr;
		align-items: stretch;
	}
	.omc-modal__figure {
		height: auto;
		min-height: 420px;
	}
	.omc-modal__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* ─── How it arrives ───
   show() takes the hidden attribute off, so the panel goes from display:none to displayed and
   every animation below starts from the beginning on its own — no class to add, no frame to
   wait for. The backdrop fades, the panel rises, and inside the split one the photograph settles
   out of a slow push-in while the copy comes up a line at a time. Short enough that somebody
   reaching for the close button is not waiting on it. ─── */
@keyframes omc-modal-veil {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes omc-modal-rise {
	from { opacity: 0; transform: translateY(14px) scale(.985); }
	to { opacity: 1; transform: none; }
}
@keyframes omc-modal-settle {
	from { transform: scale(1.07); }
	to { transform: scale(1); }
}
@keyframes omc-modal-line {
	from { opacity: 0; transform: translateY(9px); }
	to { opacity: 1; transform: none; }
}

.omc-modal__backdrop { animation: omc-modal-veil .26s var(--omc-ease) both; }
.omc-modal__panel { animation: omc-modal-rise .42s var(--omc-ease) both; }

.omc-modal__figure img { animation: omc-modal-settle .9s var(--omc-ease) both; }

/* The copy follows the panel in, a beat behind it and a beat apart from itself. */
.omc-modal__panel--split .omc-modal__body > * {
	animation: omc-modal-line .4s var(--omc-ease) both;
}
.omc-modal__panel--split .omc-modal__body > :nth-child(1) { animation-delay: .14s; }
.omc-modal__panel--split .omc-modal__body > :nth-child(2) { animation-delay: .19s; }
.omc-modal__panel--split .omc-modal__body > :nth-child(3) { animation-delay: .23s; }
.omc-modal__panel--split .omc-modal__body > :nth-child(4) { animation-delay: .27s; }
.omc-modal__panel--split .omc-modal__body > :nth-child(5) { animation-delay: .31s; }
.omc-modal__panel--split .omc-modal__body > :nth-child(n+6) { animation-delay: .35s; }

/* A reveal that is hidden must stay hidden: the stagger sets both, and `both` would otherwise
   hold the last frame of a thing that is not supposed to be on screen yet. */
.omc-modal__panel--split .omc-modal__body > [hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.omc-modal__backdrop,
	.omc-modal__panel,
	.omc-modal__figure img,
	.omc-modal__panel--split .omc-modal__body > * {
		animation: none;
	}
}

/* The form sits left with the copy rather than centred under it. */
.omc-modal__panel--split .omc-news__row { justify-content: flex-start; }
.omc-modal__panel--split .omc-modal__code { text-align: center; }


/* ─── Header tagline ───────────────────────────────────────────────────────
   The line that cycles under the logo. Every phrase is in the markup and they
   all share one grid cell, so the strip is as tall as the tallest of them and
   the header height never moves as they swap. ──────────────────────────── */
.omc-tagline {
	display: grid;
	margin: 7px 0 0;
	font-family: var(--omc-sans);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--omc-rose);
	text-align: center;
	/* Tracking leaves a gap after the last letter; pull it back so the line looks centred. */
	text-indent: .22em;
	pointer-events: none;
	user-select: none;
}
.omc-tagline__item,
.omc-phrases__item {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(3px);
	transition: opacity .5s var(--omc-ease), transform .5s var(--omc-ease);
}
.omc-tagline__item.is-on,
.omc-phrases__item.is-on {
	opacity: 1;
	transform: none;
}

/* ─── A heading that asks more than one question ───
   The same stack as the tagline, at heading size: every phrase in one grid cell, so the
   band is as tall as the longest of them and nothing below it moves as they change. The
   rise is a little longer than the taglines because the type is a great deal bigger and a
   3px nudge on a 34px line reads as a twitch. ─── */
/* A grid container does not fill its parent the way a plain heading does — on a phone this
   left the heading 196px wide inside a 350px column, and every phrase wrapped. */
.omc-phrases {
	display: grid;
	width: 100%;
	justify-items: inherit;
	/* A shade under a full section title: these have to clear the column on one line at every
	   width, and the band is narrower than a full-width heading because she stands beside it. */
	font-size: clamp(23px, 2.9vw, 40px);
}
.omc-phrases__item {
	/* One line, always. The cell is as tall as its tallest phrase, so a single question that
	   wrapped made the band two lines deep for all four — and left a gap under the three that
	   did not. */
	white-space: nowrap;
	transform: translateY(8px);
	transition: opacity .6s var(--omc-ease), transform .6s var(--omc-ease);
}
@media (prefers-reduced-motion: reduce) {
	/* No JavaScript runs, so the first phrase is the only one shown — and it must be shown. */
	.omc-phrases__item { transition: none; transform: none; }
	.omc-phrases__item:first-child { opacity: 1; }
}

/* The mark and the line become one centred block. */
.c-header__logo { flex-direction: column; }
.c-header__logo .c-header__logo-link { display: inline-block; }

@media (max-width: 767px) {
	/* The mobile header is a tight bar, so the line is there but quieter. */
	.omc-tagline {
		font-size: 8px;
		letter-spacing: .14em;
		text-indent: .14em;
		margin-top: 3px;
		line-height: 1.3;
		/* One line only: a phrase that would wrap is cut rather than pushing the bar taller. */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 46vw;
	}
	/* The logo cell is centred between the burger and the cart; it has to hold two things now. */
	.c-header__logo--mobile { justify-content: center; }
	/* Scrolled, the bar tightens back up and the line steps out of the way. */
	.c-header.is-sticky .omc-tagline,
	.c-header--sticky .omc-tagline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.omc-tagline__item { transition: none; transform: none; }
}


/* ─── Page transitions ─────────────────────────────────────────────────────
   The content cross-fades; the header, the countdown bar and the footer stay
   put, so moving between pages reads as the page changing rather than the
   whole site being rebuilt.

   Opacity only, and only on <main>. A transform would create a containing
   block for the fixed elements that live inside it — the shop's filter drawer
   among them — and put them in the wrong place. `backwards` holds the start
   state before the animation runs, so there is no flash of content first, and
   leaves nothing applied once it has finished: no lingering stacking context
   over the drawer or the dialogs. ─────────────────────────────────────── */
.js main.l-inner {
	animation: omc-page-in .5s var(--omc-ease) backwards;
}
@keyframes omc-page-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.js.is-leaving main.l-inner {
	opacity: 0;
	transition: opacity .2s var(--omc-ease);
	animation: none;
}

/* Something has to happen in the moment between the click and the new page. */
.omc-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 2px;
	width: 0;
	z-index: 100002;
	background: linear-gradient(90deg, var(--omc-rose), var(--omc-rose-light));
	opacity: 0;
	pointer-events: none;
	transition: width .25s ease-out, opacity .2s;
}
.is-leaving .omc-progress {
	width: 82%;
	opacity: 1;
	/* Creeps rather than completes: it cannot know how long the server will take. */
	transition: width 1.6s cubic-bezier(.1, .8, .3, 1), opacity .12s;
}

@media (prefers-reduced-motion: reduce) {
	.js main.l-inner,
	.js.is-leaving main.l-inner { animation: none; opacity: 1; transition: none; }
	.omc-progress { display: none; }
}

/* ─── The stylist band ─────────────────────────────────────────────────────
   A quiet invitation rather than a banner: the same sand as the rest of the
   page, centred, one button. The wizard it opens does the talking. ─────── */
.omc-stylist {
	/* Clear of the trust strip above: stacked edge to edge, two bordered panels read as one. The
	   same seam the live card leaves below it, so the band sits level between the two. */
	position: relative;
	overflow: hidden;                       /* she stands on the bottom hairline, not past it */
	margin-top: var(--omc-seam);
	padding: clamp(46px, 6vw, 88px) 0;
	background: var(--omc-sand);
	border-top: 1px solid var(--omc-line);
	border-bottom: 1px solid var(--omc-line);
	text-align: center;
}
.omc-stylist:not(.has-figure) .omc-stylist__inner { max-width: 760px; }

/* The room behind the band: a corner of a café blurred past recognition, under a sand veil heavy
   enough on the left that the copy never has to compete with it. The picture arrives as a custom
   property from the template, so this rule owns how much of it shows. */
.omc-stylist.has-room {
	background-image:
		linear-gradient(102deg,
			var(--omc-sand) 0 16%,
			rgba(239, 230, 222, .84) 38%,
			rgba(239, 230, 222, .46) 66%,
			rgba(239, 230, 222, .3) 100%),
		var(--omc-stylist-room);
	background-size: cover, cover;
	background-position: center, center 42%;
}
@media (max-width: 699px) {
	/* The copy is centred over the whole width here, so the veil has to be even. */
	.omc-stylist.has-room {
		background-image:
			linear-gradient(180deg, rgba(239, 230, 222, .88), rgba(239, 230, 222, .82)),
			var(--omc-stylist-room);
	}
}
.omc-stylist__eyebrow { margin-bottom: 10px; }
.omc-stylist .omc-section__title { margin: 0 0 14px; }
.omc-stylist__text {
	margin: 0 auto clamp(22px, 2.6vw, 30px);
	max-width: 58ch;
	font: 400 clamp(15px, 1.2vw, 17px)/1.75 var(--omc-sans);
	color: var(--omc-text);
	text-wrap: pretty;
}
.omc-stylist__go { cursor: pointer; }

.omc-stylist__note {
	margin: 16px 0 0;
	font: 400 12.5px/1.6 var(--omc-sans);
	color: var(--omc-muted);
}

/* With the figure: she takes the right of the container and the copy takes the left. Her feet are
   in the band's bottom padding, which is what the section clips. */
@media (min-width: 700px) {
	.omc-stylist.has-figure { text-align: left; }
	.omc-stylist.has-figure .omc-stylist__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;                /* the copy sits level with her, she stands on the floor */
		gap: clamp(28px, 4vw, 72px);
	}
	.omc-stylist.has-figure .omc-stylist__copy { max-width: 56ch; }
	.omc-stylist.has-figure .omc-stylist__text { margin-left: 0; margin-right: 0; }
	.omc-stylist__figure {
		display: block;
		align-self: end;
		justify-self: end;
		width: auto;
		height: clamp(300px, 36vw, 520px);
		margin-bottom: calc(-1 * clamp(46px, 6vw, 88px));
	}
}

/* The discount tab is fixed to the right edge, and below the container's full width that edge is
   where she is standing. Step her in by the width of the tab until there is margin to spare. */
@media (min-width: 700px) and (max-width: 1259px) {
	.omc-stylist__figure { margin-right: 44px; }
}

/* On a phone the two columns become one narrow one and a figure at the edge. Putting her behind the
   copy was the first answer and it only works for a dark figure: in cream on sand she either
   disappears or, turned up, has the heading written across her face. So the copy keeps to the left
   of her instead, which costs it a line of wrapping and nothing else. */
@media (max-width: 699px) {
	.omc-stylist.has-figure { text-align: left; }
	.omc-stylist.has-figure .omc-stylist__copy {
		position: relative;
		padding-right: 44%;
	}
	.omc-stylist.has-figure .omc-stylist__text { margin-left: 0; margin-right: 0; }
	/* The button's tracking is what decides whether the column can be this narrow: at the full .18em
	   "Start the stylist" needs 216px and wraps to two lines in it. */
	.omc-stylist.has-figure .omc-stylist__go { padding: 0 18px; letter-spacing: .12em; }
	/* Her box is a share of the width rather than a share of the height, so the column beside her is
	   the same width whatever the band's height turns out to be; contain keeps her in it. */
	.omc-stylist__figure {
		position: absolute;
		right: -2%;
		bottom: 0;
		width: 40%;
		height: 100%;
		object-fit: contain;
		object-position: bottom right;
	}
}