/*
Theme Name: MediEye
Theme URI: https://medieyeth.com
Author: MediEye
Description: Block theme for MediEye (เมดิอาย), eye-care products formulated by an ophthalmologist. Built from the MediEye homepage design v4.5 (design-source/). Every section is made of core blocks, so it can be edited in the Site Editor and the Block Editor.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.4.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medieye
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-logo
*/

/* =====================================================================
   How this file is organised
   1. Design tokens: the names from design-source/tokens.css, pointed at the theme.json presets,
      so a colour, font or size changed in Styles (Site Editor) changes the whole site.
   2. Base and buttons (every page).
   3. Header and footer template parts.
   4. Homepage sections. Every section's outer Group carries the class "mi" plus the design's own
      class names (hero, concern-grid, lid-panel...). Rules are scoped to .mi so they beat
      WordPress's default block spacing without !important.
   5. Page, post, blog and search templates.
   Icons are the design's line icons (assets/icons/*.svg), drawn as CSS masks so they take the text colour.
   ===================================================================== */

/* ===== 1. Tokens ===== */
:root {
	--clean-blue: var(--wp--preset--color--clean-blue);
	--pacific-blue: var(--wp--preset--color--pacific-blue);
	--light-blue: var(--wp--preset--color--light-blue);
	--brand-black: var(--wp--preset--color--brand-black);
	--white: var(--wp--preset--color--white);
	--deep-blue: var(--wp--preset--color--deep-blue);
	--deep-blue-hover: var(--wp--preset--color--deep-blue-hover);
	--ink-muted: var(--wp--preset--color--ink-muted);
	--mist: var(--wp--preset--color--mist);
	--line: var(--wp--preset--color--line);
	--field: var(--wp--preset--color--field);
	--ocuvita-lilac: var(--wp--preset--color--ocuvita-lilac);
	--ocuvita-plum: var(--wp--preset--color--ocuvita-plum);

	--bg: var(--white);
	--surface: var(--mist);
	--surface-brand: var(--light-blue);
	--text: var(--brand-black);
	--text-muted: var(--ink-muted);
	--link: var(--deep-blue);
	--action-bg: var(--deep-blue);
	--action-bg-hover: var(--deep-blue-hover);
	--action-text: var(--white);
	--focus-ring: var(--deep-blue);
	--highlight: var(--clean-blue);
	--divider: var(--line);
	--surface-dark: var(--deep-blue);
	--text-on-dark: var(--white);
	--text-on-dark-muted: var(--light-blue);
	--surface-ocuvita: var(--ocuvita-lilac);
	--accent-ocuvita: var(--ocuvita-plum);
	--text-on-sky: var(--text);
	--focus-ring-on-sky: var(--text);

	--weight-light: 300;
	--weight-regular: 400;
	--weight-semibold: 600;
	--fs-display: var(--wp--preset--font-size--display);
	--fs-h1: var(--wp--preset--font-size--heading-1);
	--fs-h2: var(--wp--preset--font-size--heading-2);
	--fs-h3: var(--wp--preset--font-size--heading-3);
	--fs-h4: var(--wp--preset--font-size--heading-4);
	--fs-lead: var(--wp--preset--font-size--body-lg);
	--text-body: var(--wp--preset--font-size--body);
	--text-small: var(--wp--preset--font-size--small);
	--text-label: var(--wp--preset--font-size--label);
	--leading-body: 1.75;
	--leading-small: 1.65;
	--leading-h3: 1.45;
	--leading-h4: 1.5;
	--lh-h1: 1.3;
	--lh-display: 1.25;
	--tracking-label: 0.08em;

	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-6: var(--wp--preset--spacing--6);
	--space-8: var(--wp--preset--spacing--8);
	--space-12: var(--wp--preset--spacing--12);
	--space-16: var(--wp--preset--spacing--16);

	--radius-sm: var(--wp--custom--radius--sm);
	--radius-full: var(--wp--custom--radius--full);
	--radius-panel: var(--wp--custom--radius--panel);
	--shadow-raised: var(--wp--preset--shadow--raised);
	--shadow-product-drop: drop-shadow(0 22px 18px rgba(22, 87, 125, 0.22));

	--container: var(--wp--custom--container);
	--gutter-x: 16px;
	--section-y: 64px;
	--header-inset: 12px;
	--header-h: 64px;
	--logo-h: 26px;
	--tap-min: var(--wp--custom--tap-min);
	--button-height: var(--wp--custom--button-height);
	--icon: 24px;
	--icon-disc: 56px;
	--scene-max: 640px;
	--measure: 38rem;
	--hero-copy-w: 30rem;
	--fs-hero-h1: clamp(30px, 3.2vw, 44px);
	--hero-min-h: 640px;
	--hero-max-h: 760px;
	--statement-min-h: 560px;
	--band-min-h: 640px;
	--bleed-photo-w: 55%;
	--buy-photo-max-m: 420px;
	--drift-duration: 26s;
	--drift-distance: 6%;
	--flag-x: 41%;
	--flag-y: 21%;
	--flag-w: 3.6%;
	--pole-w: max(2px, 0.16cqw);
	--fade-in: 1.2s;
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--duration: 160ms;
}
@media (min-width: 640px) {
	:root { --gutter-x: 24px; --section-y: 96px; }
}
@media (min-width: 960px) {
	:root { --logo-h: 30px; }
}
@media (prefers-reduced-motion: reduce) {
	:root { --duration: 0ms; }
}

/* ===== 2. Base ===== */
*, *::before, *::after { box-sizing: border-box; }
/* The templates set their own spacing; no automatic gap between header, main and footer. */
body .wp-site-blocks > * { margin-block: 0; }
html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 2 * var(--header-inset));
}
body {
	word-break: normal;
	overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { text-wrap: balance; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nowrap { white-space: nowrap; }
.screen-reader-text:not(:focus):not(:active) {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link.screen-reader-text:focus {
	background: var(--action-bg); color: var(--action-text); padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm); z-index: 100000; text-decoration: none;
}

/* Buttons: 48px tall, fully round. Fill = primary (Deep Blue); "Outline" style = secondary. */
.wp-block-button__link, .wp-element-button {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: var(--button-height);
	text-decoration: none;
	transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--surface-brand); color: var(--link);
}
/* small icons in front of a button label (class on the Button block) */
.btn-line > .wp-block-button__link::before,
.btn-shop > .wp-block-button__link::before {
	content: ""; width: var(--icon); height: var(--icon); flex: none;
	background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.btn-line { --i: url(assets/icons/chat.svg); }
.btn-shop { --i: url(assets/icons/bag.svg); }

/* ===== 3a. Header: a white pill floating over the page ===== */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 30; pointer-events: none;
	padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-inset));
	padding-left: max(var(--gutter-x), env(safe-area-inset-left, 0px));
	padding-right: max(var(--gutter-x), env(safe-area-inset-right, 0px));
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.mi .header-shell {
	pointer-events: auto; max-width: var(--container); margin-inline: auto;
	background: var(--bg); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised);
}
.mi .bar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-4);
	min-height: var(--header-h); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
}
.mi .bar .wp-block-site-logo { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.mi .bar .wp-block-site-logo img, .mi .footer-logo img { height: var(--logo-h); width: auto; min-width: 57px; }
/* The menu is mockup text for now (no links): see README, "Turn the mockup menu into real links". */
.mi .mockup-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.mi .mockup-nav > p { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text); }
.mi .bar .mockup-nav { margin-left: auto; }
.mi .header-cta { gap: var(--space-3); }
.menu-btn {
	display: none; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
	padding: 0 var(--space-4); background: var(--bg); color: var(--text);
	border: 1px solid var(--field); border-radius: var(--radius-full);
	font: inherit; font-size: var(--text-body); cursor: pointer;
}
.menu-btn svg { width: var(--icon); height: var(--icon); }
/* "ผลิตภัณฑ์" opens a list of the two product pages (owner, 2026-11-11). site.js turns the label into a button; without
   it the label stays a link to the homepage's product section and the list shows on hover. */
.mi .nav-products { position: relative; }
.mi .nav-products-label { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.nav-products-btn {
	display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--tap-min); padding: 0;
	background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.nav-products-btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--duration) var(--ease); }
.mi .nav-products.is-open .nav-products-btn svg { transform: rotate(180deg); }
.mi .nav-products-btn:hover, .mi .nav-products.is-open .nav-products-btn { color: var(--link); }
.mi .nav-sub { display: grid; gap: var(--space-1); }
.mi .nav-sub a {
	position: relative; display: block; min-height: 72px; padding: var(--space-2) var(--space-2) var(--space-2) 80px;
	border-radius: 24px; color: var(--text-muted); text-decoration: none;
	font-size: var(--text-small); line-height: var(--leading-small);
	transition: background-color var(--duration) var(--ease);
}
.mi .nav-sub a::before {
	content: ""; position: absolute; left: var(--space-2); top: 50%; width: 56px; height: 56px; margin-top: -28px;
	border-radius: 16px; background: var(--surface-brand) url(assets/img/menu-foam.webp) center / auto 48px no-repeat;
}
.mi .nav-sub-ocuvita a::before { background-color: var(--surface-ocuvita); background-image: url(assets/img/menu-ocuvita.webp); }
.mi .nav-sub a strong { display: block; font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text); }
.mi .nav-sub a:hover { background: var(--surface); }
.mi .nav-sub a:hover strong { color: var(--link); }
@media (min-width: 960px) {
	/* A white panel under the header pill, lined up with the label. */
	.mi .nav-sub {
		position: absolute; z-index: 1; top: calc(100% + var(--space-4) + var(--space-1)); left: calc(-1 * var(--space-4));
		width: 360px; padding: var(--space-2); background: var(--bg); border-radius: var(--radius-panel);
		box-shadow: var(--shadow-raised);
		opacity: 0; visibility: hidden; transform: translateY(-6px);
		transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility 0s linear var(--duration);
	}
	.mi .nav-products.is-open .nav-sub,
	html:not(.js) .mi .nav-products:is(:hover, :focus-within) .nav-sub {
		opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
	}
}
/* In the editor the list stays in view so it can be edited. */
.editor-styles-wrapper .mi .nav-sub { position: static; opacity: 1; visibility: visible; transform: none; }
@media (max-width: 959.98px) {
	.js .menu-btn { display: inline-flex; }
	.mi .bar .mockup-nav { flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; }
	.mi .bar .mockup-nav > * + * { border-top: 1px solid var(--divider); }
	/* Phone menu: the label is a full-width row; the two products open beneath it (open whenever the menu opens). */
	.mi .nav-products-label { display: flex; }
	.nav-products-btn { width: 100%; justify-content: space-between; }
	.js .mi .nav-sub { display: none; }
	.js .mi .nav-products.is-open .nav-sub { display: grid; padding-bottom: var(--space-2); }
	.mi .nav-sub a { margin-left: calc(-1 * var(--space-2)); }
	.js .mi .bar .mockup-nav, .js .mi .bar .header-cta { display: none; }
	.js .site-header.is-open .bar .mockup-nav { display: flex; flex-basis: 100%; padding: var(--space-2) var(--space-4) 0 0; }
	.js .site-header.is-open .bar .header-cta { display: flex; flex-basis: 100%; padding: var(--space-4) var(--space-4) var(--space-4) 0; }
	.mi .bar .header-cta .wp-block-button { width: 100%; }
	.mi .bar .header-cta .wp-block-button__link { width: 100%; }
}
/* the header stays in the flow while editing */
.editor-styles-wrapper .site-header { position: relative; pointer-events: auto; }

/* ===== 3b. Footer ===== */
.mi.site-footer { padding-block: var(--space-12); }
.mi .footer-grid { display: grid; gap: var(--space-8); }
.mi .footer-grid .mockup-nav { column-gap: var(--space-6); row-gap: 0; align-content: start; }
.mi .footer-grid .mockup-nav > p { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mi .footer-brand { display: grid; gap: var(--space-2); align-content: start; }
.mi .legal { border-top: 1px solid var(--divider); margin-top: var(--space-8); padding-top: var(--space-6); display: grid; gap: var(--space-2); }
@media (min-width: 960px) {
	.mi .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== 4. Homepage sections ===== */
/* Reset WordPress's default space between blocks inside these sections; each component sets its own gap. */
.mi.mi,
.mi:is(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid) > *,
.mi :is(.is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid) > * { margin-block: 0; }
.mi .wp-block-list { padding: 0; margin: 0; list-style: none; }
.mi .wp-block-image { margin: 0; }
.mi .wp-block-image img { display: block; width: 100%; }
.mi .container {
	width: 100%;
	max-width: calc(var(--container) + 2 * var(--gutter-x));
	margin-inline: auto;
	padding-inline: max(var(--gutter-x), env(safe-area-inset-left, 0px)) max(var(--gutter-x), env(safe-area-inset-right, 0px));
}
.mi.section { padding-block: var(--section-y); }
.mi.section-mist { background: var(--surface); }
.mi .label {
	font-size: var(--text-label); font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-label); text-transform: uppercase;
	color: var(--link); line-height: 1.4;
}
.mi .lead { font-size: var(--fs-lead); line-height: var(--leading-body); color: var(--text-muted); max-width: var(--measure); }
.mi .small { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.mi .section-head { display: grid; gap: var(--space-3); align-content: start; margin-bottom: var(--space-12); max-width: var(--measure); }
.mi .soon { font-size: var(--text-small); color: var(--text-muted); }
.mi .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 639.98px) {
	.mi .actions-stack { flex-direction: column; align-items: stretch; }
	.mi .actions-stack .wp-block-button, .mi .actions-stack .wp-block-button__link { width: 100%; }
}

/* --- Hero: eye close-up on blue sky --- */
/* The photo (3:2) covers the box, but grows no wider than 1.9 x the box height (its size in the 1440 px design). On a
   wider screen it keeps that size at the right and its sky carries on to the left (::before, colours sampled from the
   photo's left edge), so a 27-32 inch monitor does not blow the face up. --ox/--oy place the crop as object-position did. */
.mi .hero-media {
	position: relative; overflow: hidden; aspect-ratio: 16 / 9; container-type: size; --ox: 1; --oy: 0.45;
	--wi: min(max(100cqw, 150cqh), 190cqh);
	--hi: calc(var(--wi) * 2 / 3);
	--pl: max((100cqw - var(--wi)) * var(--ox), 100cqw - var(--wi));
	--pt: calc((100cqh - var(--hi)) * var(--oy));
}
.mi .hero-media::before {
	content: ""; position: absolute; left: 0; right: 0; top: var(--pt); height: var(--hi);
	background: linear-gradient(#5d96da 0%, #629bdc 10%, #69a1e0 20%, #6ea4e1 30%, #73a9e4 40%, #77ace6 50%, #7eb1e6 60%, #85b4e7 70%, #8cb9e9 80%, #94bde8 90%, #99c2eb 100%);
}
.mi .hero-media img {
	position: absolute; max-width: none; width: var(--wi); height: var(--hi); left: var(--pl); top: var(--pt);
	object-fit: cover;
}
/* The clouds drift behind a fixed sky mask, so the face never moves (layer added by the theme, see functions.php). */
.hero-sky {
	--sky-mask: url(assets/img/hero-sky-mask.png);
	position: absolute; pointer-events: none;
	width: var(--wi); height: var(--hi); left: var(--pl); top: var(--pt);
	-webkit-mask-image: var(--sky-mask); mask-image: var(--sky-mask);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* When the sky carries on past the photo, the clouds thin out towards its left edge instead of stopping at a line. */
@container (min-aspect-ratio: 19 / 10) {
	.hero-sky {
		-webkit-mask-image: var(--sky-mask), linear-gradient(90deg, transparent, #000 22%);
		mask-image: var(--sky-mask), linear-gradient(90deg, transparent, #000 22%);
		-webkit-mask-composite: source-in; mask-composite: intersect;
	}
}
.hero-clouds {
	position: absolute; top: 0; height: 100%; left: calc(-64 / 1536 * 100%); width: calc(924 / 1536 * 100%);
	background: url(assets/img/hero-clouds.webp) 0 0 / 100% 100% no-repeat;
	animation: cloud-drift var(--drift-duration) ease-in-out calc(var(--drift-duration) / -2) infinite alternate;
}
.js .hero-clouds { opacity: 0; transition: opacity var(--fade-in) ease-out; }
.js .hero-clouds.is-in { opacity: 1; }
.hero-clouds.is-paused { animation-play-state: paused; }
@keyframes cloud-drift { from { transform: translateX(calc(-1 * var(--drift-distance))); } to { transform: translateX(var(--drift-distance)); } }
/* A distant flagpole that rises from the bottom of the sky, its flag flying to the right on the same wind as the
   clouds. The cloth is drawn by site.js on a canvas (a slow travelling wave); without JS the SVG shows instead. */
.hero-flag {
	position: absolute; left: var(--flag-x); top: var(--flag-y); bottom: 0; width: var(--flag-w);
	filter: blur(0.5px) saturate(0.9); opacity: 0.92;
}
.hero-flag::before { /* the pole, slightly wider at the foot */
	content: ""; position: absolute; left: calc(-1 * var(--pole-w) / 2); top: 0; bottom: 0; width: var(--pole-w);
	background: linear-gradient(90deg, #7d868e, #f1f3f5 40%, #b9c0c6 62%, #6f787f);
	clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}
.hero-flag::after { /* gold ball on top */
	content: ""; position: absolute; left: 0; top: 0; width: calc(var(--pole-w) * 1.9); aspect-ratio: 1; border-radius: 50%;
	transform: translate(-50%, -85%);
	background: radial-gradient(circle at 35% 30%, #fff4c4, #d9a93a 55%, #9a6c16);
}
.hero-flag-cloth {
	position: absolute; left: 0; top: 2px; width: 100%; aspect-ratio: 19 / 10;
	background: url(assets/img/hero-flag.svg) 0 0 / 100% 100% no-repeat;
}
.hero-flag-cloth.is-drawn { background: none; }
.hero-flag-cloth canvas { position: absolute; left: 0; top: -25%; width: 100%; height: 150%; }
/* Keep it below the floating header however the photo is cropped (sky top = (100cqh - sky height) * --oy). */
.hero-flag { top: max(var(--flag-y), calc(var(--header-h) + 2 * var(--header-inset) + var(--space-4) - (100cqh - max(100cqh, 100cqw * 2 / 3)) * var(--oy))); }
.js .hero-flag { opacity: 0; transition: opacity var(--fade-in) ease-out; }
.js .hero-clouds.is-in ~ .hero-flag { opacity: 0.92; }
@media (prefers-reduced-motion: reduce) { .hero-clouds { animation: none; } }
.mi .hero-inner { padding-block: var(--space-4) var(--space-12); }
.mi .hero-copy { display: grid; gap: var(--space-4); align-content: center; }
.mi .tagline { font-size: var(--text-body); color: var(--link); font-weight: var(--weight-semibold); }
.mi.hero h1 { font-size: var(--fs-hero-h1); line-height: var(--lh-h1); }
.mi.hero h1 .h1-brand { display: block; font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--weight-light); color: var(--text); }
.mi.hero h1 .h1-line { display: block; }
.mi .concern-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(-1 * var(--space-1)); }
.mi .concern-pills li {
	position: relative; display: inline-block; min-height: var(--space-8);
	padding: 5px var(--space-3) 5px calc(var(--space-2) + 18px + var(--space-2)); border-radius: var(--radius-full);
	background: var(--surface-brand); color: var(--text); font-size: var(--text-small); font-weight: var(--weight-semibold); line-height: 1.4;
}
.mi .concern-pills li::before {
	content: ""; position: absolute; left: var(--space-2); top: 50%; width: 18px; height: 18px; margin-top: -9px;
	background: var(--link); -webkit-mask: url(assets/icons/check.svg) center / contain no-repeat; mask: url(assets/icons/check.svg) center / contain no-repeat;
}
@media (min-width: 640px) {
	.mi .hero-inner { padding-block: var(--space-8) var(--space-12); }
	.mi .hero-copy { gap: var(--space-6); }
	.mi .concern-pills { margin-top: calc(-1 * var(--space-3)); }
}
@media (min-width: 640px) and (max-width: 959.98px) {
	.mi .hero-media { aspect-ratio: 3 / 2; }
}
/* Short phones (iPhone SE: about 548 px of page in Safari): a wider crop of the photo and tighter gaps keep the LINE
   button on the first screen. */
@media (max-width: 639.98px) and (max-height: 640px) {
	.mi .hero-media { aspect-ratio: 12 / 5; --oy: 0.25; } /* eyes below the floating menu */
	.mi .hero-inner { padding-top: var(--space-3); }
	.mi .hero-copy { gap: var(--space-3); }
	.mi .concern-pills { margin-top: 0; }
}
@media (min-width: 960px) {
	.mi.hero {
		position: relative; display: flex;
		min-height: clamp(var(--hero-min-h), calc(100vw * 2 / 3), max(var(--hero-min-h), min(100svh, var(--hero-max-h))));
	}
	.mi .hero-media { position: absolute; inset: 0; aspect-ratio: auto; --ox: 0.5; --oy: 0.45; }
	.mi .hero-inner {
		position: relative; display: flex; align-items: center;
		padding-top: calc(var(--header-h) + 2 * var(--header-inset)); padding-bottom: var(--space-12);
	}
	.mi .hero-copy { max-width: min(var(--hero-copy-w), 40vw); }
	.mi .hero-copy, .mi.hero .tagline, .mi.hero .lead { color: var(--text-on-sky); }
	.mi.hero :focus-visible { outline-color: var(--focus-ring-on-sky); }
}

/* Menu items are links; they keep the menu's look. */
.mi .mockup-nav > p > a { color: inherit; text-decoration: inherit; display: inline-flex; align-items: center; min-height: var(--tap-min); }
.mi .bar .mockup-nav > p > a:hover { color: var(--link); }

/* --- Proof row --- */
.mi .proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--divider); }
.mi .proof-item { display: grid; gap: var(--space-1); padding: var(--space-6) var(--space-4) var(--space-6) 0; align-content: start; }
.mi .proof-item::before {
	content: ""; width: var(--icon); height: var(--icon); margin-bottom: var(--space-2);
	background: var(--link); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.mi .proof-item strong { font-weight: var(--weight-semibold); line-height: 1.5; }
.mi .proof-item .proof-sub { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
@media (min-width: 960px) {
	.mi .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mi .proof-item { padding: var(--space-8) var(--space-6); border-left: 1px solid var(--divider); }
	.mi .proof-item:first-child { border-left: 0; padding-left: 0; }
}
.mi .review-line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-small); color: var(--text-muted); }
.mi .review-line strong { color: var(--text); font-weight: var(--weight-semibold); }
.mi .review-line::before {
	content: ""; flex: none; width: 20px; height: 20px;
	background: var(--link); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.mi .more-link a { color: var(--link); font-weight: var(--weight-semibold); text-underline-offset: 3px; }
.mi .more-link a::after { content: " →"; }
.icon-eye { --i: url(assets/icons/eye.svg); }
.icon-shield { --i: url(assets/icons/shield.svg); }
.icon-truck { --i: url(assets/icons/truck.svg); }
.icon-star { --i: url(assets/icons/star.svg); }
.icon-eye-drop { --i: url(assets/icons/eye-drop.svg); }
.icon-lid { --i: url(assets/icons/lid.svg); }
.icon-bubbles { --i: url(assets/icons/bubbles.svg); }
.icon-screen { --i: url(assets/icons/screen.svg); }
.icon-chat { --i: url(assets/icons/chat.svg); }
.icon-bag { --i: url(assets/icons/bag.svg); }
.icon-pin { --i: url(assets/icons/pin.svg); }
.icon-glasses { --i: url(assets/icons/glasses.svg); }

/* --- Eye concerns --- */
.mi .concern-grid { display: grid; gap: var(--space-4); }
.mi .concern { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-6); background: var(--surface); --disc: var(--surface-brand); --ink: var(--link); }
.mi .concern.concern-ocu { --disc: var(--surface-ocuvita); --ink: var(--accent-ocuvita); }
.mi .concern::before { content: ""; width: 72px; height: 72px; background: var(--art) left center / contain no-repeat; }
.mi .concern.icon-eye-drop { --art: url(assets/icons/art-dry.svg); }
.mi .concern.icon-lid { --art: url(assets/icons/art-lid.svg); }
.mi .concern.icon-bubbles { --art: url(assets/icons/art-foam.svg); }
.mi .concern.icon-screen { --art: url(assets/icons/art-screen.svg); }
.mi .concern.icon-leaf { --art: url(assets/icons/art-greens.svg); }
.mi .concern::after { content: none; }
.mi .concern h3 { font-size: var(--fs-h4); line-height: var(--leading-h4); }
.mi .concern p { color: var(--text-muted); }
.mi .concern .concern-for { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mi .concern-for a {
	display: inline-flex; align-items: center; min-height: var(--tap-min); padding: 0 var(--space-4);
	border-radius: var(--radius-full); background: var(--bg); border: 1px solid var(--line);
	color: var(--link); font-size: var(--text-small); font-weight: var(--weight-semibold); text-decoration: none;
}
.mi .concern-for a:hover { border-color: var(--link); }
.mi .concern-for a[href="/ocuvita/"] { color: var(--accent-ocuvita); }
.mi .concern-for a[href="/ocuvita/"]:hover { border-color: var(--accent-ocuvita); }
@media (min-width: 640px) { .mi .concern-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mi .concern-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Eyelid comparison: one generated eye, blocked (left) vs normal (right), drag the bar --- */
.mi .lid-grid { display: grid; gap: var(--space-4); }
.mi .lid-panel { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-4); background: var(--bg); border: 1px solid var(--line); }
.mi .lid-photo img { height: auto; aspect-ratio: 865 / 557; object-fit: cover; }
.mi .lid-tag {
	justify-self: start; display: inline-flex; align-items: center; min-height: var(--space-8); padding: 0 var(--space-3);
	border-radius: var(--radius-full); background: var(--surface); color: var(--text-muted);
	font-size: var(--text-small); font-weight: var(--weight-semibold); line-height: 1.4;
}
.mi .lid-normal .lid-tag { background: var(--surface-brand); color: var(--link); }
.mi .lid-keys { display: grid; gap: var(--space-2); }
.mi .lid-keys li { position: relative; padding-left: calc(8px + var(--space-3)); font-size: var(--text-small); line-height: var(--leading-small); }
.mi .lid-keys li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-muted); }
.mi .lid-normal .lid-keys li::before { background: var(--link); }
.mi .lid-caption { margin-bottom: var(--space-4); font-size: var(--text-small); color: var(--text-muted); }
.mi .lid-note { margin-top: var(--space-6); display: grid; gap: var(--space-4); padding: var(--space-6); background: var(--surface-brand); }
.mi .lid-note-text { display: grid; gap: var(--space-2); min-width: 0; }
.mi .lid-note h3 { font-size: var(--fs-h4); line-height: var(--leading-h4); }
.mi .lid-compare {
	--pos: 50%; position: relative; display: grid; overflow: hidden; margin-bottom: var(--space-4);
	border: 1px solid var(--line); background: var(--surface); touch-action: pan-y; user-select: none;
}
.mi .lid-compare > figure { grid-area: 1 / 1; margin: 0; }
.mi .lid-compare img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; pointer-events: none; }
@media (min-width: 768px) { .mi .lid-compare img { aspect-ratio: 16 / 9; } }
.mi .lid-compare .lid-after { clip-path: inset(0 0 0 var(--pos)); }
.mi .lid-compare::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
	background: var(--white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-black) 25%, transparent); pointer-events: none;
}
.mi .lid-compare .lid-tag { position: absolute; top: var(--space-3); z-index: 1; pointer-events: none; }
.mi .lid-compare .lid-tag-before { left: var(--space-3); background: var(--bg); }
.mi .lid-compare .lid-tag-after { right: var(--space-3); background: var(--surface-brand); color: var(--link); }
.mi .lid-handle {
	position: absolute; top: 50%; left: var(--pos); z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px;
	display: grid; place-items: center; border-radius: var(--radius-full); background: var(--white); color: var(--link);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-black) 25%, transparent); cursor: ew-resize; pointer-events: none;
}
.mi .lid-handle svg { width: 24px; height: 24px; }
.mi .lid-compare.is-ready { cursor: ew-resize; }
.mi .lid-compare input[type="range"] { position: absolute; inset: auto 0 0 0; width: 100%; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.mi .lid-compare:has(input:focus-visible) .lid-handle { outline: 3px solid var(--link); outline-offset: 2px; }
@media (min-width: 768px) { .mi .lid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
	.mi .lid-note { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-12); padding: var(--space-6) var(--space-8); }
}

/* --- Statement band: foam close-up faded into the band --- */
.mi.statement { background: var(--surface-brand); }
.mi .statement-media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 85% 50%; }
.mi .statement-inner { padding-block: var(--space-8) var(--section-y); }
.mi .statement-copy { display: grid; gap: var(--space-4); max-width: var(--measure); }
.mi .statement-line { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--weight-regular); }
.mi .statement-line .line { display: block; }
@media (min-width: 960px) {
	.mi.statement { position: relative; }
	.mi .statement-media { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; }
	.mi .statement-media img {
		height: 100%; aspect-ratio: auto; object-position: 80% 50%;
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%);
	}
	.mi .statement-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: var(--statement-min-h); padding-block: var(--section-y); }
	.mi .statement-copy { align-self: center; padding-right: var(--space-12); }
}

/* --- Products --- */
.mi .product { display: grid; gap: var(--space-8); align-items: center; }
.mi .product + .product { margin-top: var(--space-16); }
.mi .product-tile { width: 100%; max-width: var(--scene-max); justify-self: center; background: var(--surface-brand); }
.mi .product-tile.tile-lilac { background: var(--surface-ocuvita); }
.mi .product-tile img { aspect-ratio: 1 / 1; object-fit: cover; }
.mi .product-body { display: grid; gap: var(--space-4); max-width: var(--measure); }
.mi .benefit { font-size: var(--fs-h4); line-height: var(--leading-h4); }
.mi .ticks { display: grid; gap: var(--space-3); }
.mi .ticks li { position: relative; padding-left: calc(var(--icon) + var(--space-3)); }
.mi .ticks li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: var(--icon); height: var(--icon);
	background: var(--link); -webkit-mask: url(assets/icons/check.svg) center / contain no-repeat; mask: url(assets/icons/check.svg) center / contain no-repeat;
}
.mi .ticks.ticks-ocu li::before { background: var(--accent-ocuvita); }
.mi .chip {
	justify-self: start; display: inline-flex; align-items: center; min-height: var(--space-8);
	padding: 0 var(--space-3); border-radius: var(--radius-full);
	background: var(--surface-brand); color: var(--link); font-size: var(--text-small); line-height: 1.4;
}
.mi .chip.chip-ocu { background: var(--surface-ocuvita); color: var(--accent-ocuvita); }
.mi .name-en { font-size: var(--text-small); color: var(--text-muted); margin-top: calc(-1 * var(--space-3)); }
.mi .badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mi .badges li {
	border: 1px solid var(--accent-ocuvita); color: var(--accent-ocuvita);
	padding: var(--space-1) var(--space-3); font-size: var(--text-small); line-height: var(--leading-small);
}
/* US flag beside the lutein and zeaxanthin made in the USA */
.mi .badges li.made-usa::before, .mi .made-usa-note::before, .mi .ingredients li.made-usa > strong::after {
	content: ""; flex: none; width: 21px; height: 11px; background: url(assets/icons/flag-us.svg) center / cover; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1);
}
.mi .badges li.made-usa::before, .mi .made-usa-note::before { display: inline-block; margin-right: var(--space-2); vertical-align: -1px; }
.mi .ingredients li.made-usa > strong::after { display: inline-block; margin-left: var(--space-2); vertical-align: -1px; }
.mi .made-usa-note { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
/* OCUVITA card: the ingredients panel, quality seals and the omega-3 study */
.mi .product-body .ingredients { margin-top: 0; }
.mi .quality { display: grid; gap: var(--space-3); container-type: inline-size; }
.mi .quality h4 { font-size: var(--text-body); line-height: 1.5; color: var(--accent-ocuvita); }
.mi .seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.mi .seal {
	display: grid; justify-items: center; align-content: start; gap: var(--space-2); min-width: 0; text-align: center;
	padding: var(--space-4) var(--space-2); border: 1px solid color-mix(in srgb, var(--accent-ocuvita) 40%, transparent);
	border-radius: var(--radius-panel); background: var(--bg);
}
.mi .seal p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.mi .seal p.seal-mark {
	display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--radius-full);
	border: 2px solid var(--accent-ocuvita); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 5px var(--accent-ocuvita);
	color: var(--accent-ocuvita); font-size: 0.8125rem; font-weight: var(--weight-semibold); line-height: 1.1; white-space: nowrap;
}
.mi .oryor {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4);
	padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--accent-ocuvita) 40%, transparent);
	border-radius: var(--radius-panel); background: var(--bg);
}
.mi .oryor p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.mi .oryor .oryor-number img { display: block; width: 220px; max-width: 100%; height: auto; }
/* the OCUVITA card is long: keep its pack photo in view while the text scrolls past */
@media (min-width: 1024px) {
	.mi .product:has(.ingredients) { align-items: start; }
	.mi .product:has(.ingredients) > figure { position: sticky; top: calc(var(--header-h) + 2 * var(--header-inset) + var(--space-4)); }
}
.mi .study { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-left: 3px solid var(--accent-ocuvita); background: var(--surface); }
.mi .study p { font-size: var(--text-small); line-height: var(--leading-small); }
.mi .study p strong { font-size: var(--text-body); line-height: 1.5; }
/* label facts: a two-column Table block (name | value) */
.mi .facts table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--divider); }
.mi .facts td { border: 0; border-bottom: 1px solid var(--divider); padding: var(--space-3) 0; vertical-align: top; }
.mi .facts td:first-child { color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-small); padding-top: calc(var(--space-3) + var(--space-1)); padding-right: var(--space-4); width: 9rem; }
.mi .facts td + td { font-weight: var(--weight-semibold); }
@media (max-width: 639.98px) {
	.mi .facts tr { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--divider); }
	.mi .facts td { display: block; border: 0; padding: 0; width: auto; }
	.mi .facts td:first-child { width: auto; padding-top: var(--space-1); }
}
@media (min-width: 960px) {
	.mi .product { grid-template-columns: 7fr 5fr; gap: var(--space-16); }
	.mi .product-body { align-content: center; }
	.mi .product.product-reverse { grid-template-columns: 5fr 7fr; }
	.mi .product-reverse .product-tile { order: 2; }
}

/* --- Doctor: "formulated by an ophthalmologist", a short text band (no doctor's name or photo since 1.4.2) --- */
.mi.doctor { background: var(--surface); }
.mi .doctor-grid { display: grid; gap: var(--space-4); padding-block: var(--section-y); }
.mi .doctor-head, .mi .doctor-copy { display: grid; gap: var(--space-4); }
.mi .doctor-copy { max-width: var(--measure); }
@media (min-width: 960px) {
	.mi .doctor-grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
	.mi .doctor-copy { padding-top: var(--space-8); }
}

/* --- How to use --- */
.mi .howto-grid { display: grid; gap: var(--space-8); align-items: start; }
.mi .howto-media { position: relative; padding-bottom: var(--space-16); }
.mi .howto-main img { aspect-ratio: 3 / 2; object-fit: cover; }
.mi .howto-inset { position: absolute; right: 0; bottom: 0; width: 46%; }
.mi .howto-inset img { aspect-ratio: 4 / 3; object-fit: cover; border: var(--space-2) solid var(--surface); }
.mi .howto-steps { display: grid; gap: var(--space-6); }
.mi .steps { counter-reset: step; display: grid; }
.mi .steps li {
	counter-increment: step; position: relative; min-height: calc(var(--fs-h3) * 1.2);
	padding: var(--space-4) 0 var(--space-4) calc(var(--space-12) + var(--space-4)); border-bottom: 1px solid var(--divider);
}
.mi .steps li::before {
	content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: var(--space-4);
	font-family: "Poppins", var(--wp--preset--font-family--medieye-sans); font-weight: var(--weight-light);
	font-size: var(--fs-h3); line-height: 1.2; color: var(--link);
}
@media (min-width: 960px) {
	.mi .howto-grid { grid-template-columns: 6fr 6fr; gap: var(--space-16); }
}

/* --- Label facts --- */
.mi .sheets { display: grid; gap: var(--space-8); }
.mi .sheet { border-top: 2px solid var(--text); padding-top: var(--space-4); }
.mi .sheet h3 { font-size: var(--fs-h4); line-height: var(--leading-h4); margin-bottom: var(--space-2); }
.mi .sheet.sheet-ocu { border-top-color: var(--accent-ocuvita); }
.mi .ingredients { display: grid; gap: var(--space-2); margin-top: var(--space-6); padding: var(--space-6); background: var(--surface-ocuvita); }
.mi .ingredients h4 { font-size: var(--text-body); line-height: 1.5; color: var(--accent-ocuvita); }
.mi .ingredients .ing-lead { color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.mi .ingredients li { display: grid; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px dotted color-mix(in srgb, var(--accent-ocuvita) 35%, transparent); }
.mi .ingredients li:last-child { border-bottom: 0; }
.mi .ingredients li strong { font-weight: var(--weight-semibold); }
.mi .ingredients .ing-why { color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-small); }
@media (min-width: 960px) {
	.mi .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
}

/* --- FAQ (Details blocks: the answers are in the page even when closed) --- */
.mi .faq-grid { display: grid; gap: var(--space-8); }
.mi .faq-list { border-top: 1px solid var(--divider); }
.mi .faq-list .wp-block-details { border-bottom: 1px solid var(--divider); }
.mi .faq-list summary {
	position: relative; list-style: none; cursor: pointer; min-height: var(--tap-min);
	padding: var(--space-4) calc(var(--icon) + var(--space-4)) var(--space-4) 0;
	font-weight: var(--weight-semibold); line-height: 1.5;
}
.mi .faq-list summary::-webkit-details-marker { display: none; }
.mi .faq-list summary::after {
	content: ""; position: absolute; right: 0; top: 50%; width: var(--icon); height: var(--icon); margin-top: calc(var(--icon) / -2);
	background: var(--link); -webkit-mask: url(assets/icons/plus.svg) center / contain no-repeat; mask: url(assets/icons/plus.svg) center / contain no-repeat;
	transition: transform var(--duration) var(--ease);
}
.mi .faq-list details[open] > summary::after { transform: rotate(45deg); }
.mi .faq-list .wp-block-details > p { padding-bottom: var(--space-6); max-width: var(--measure); }
@media (min-width: 960px) {
	.mi .faq-grid { grid-template-columns: 4fr 8fr; gap: var(--space-16); }
}

/* --- Journal --- */
.mi .topics { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.mi .topics li {
	display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min);
	padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--bg); border: 1px solid var(--divider);
}
.mi .topics small { font-size: var(--text-small); color: var(--text-muted); }
.mi .journal-grid { display: grid; gap: var(--space-8); align-items: center; }
.mi .journal-grid .section-head { margin-bottom: 0; }
@media (min-width: 960px) {
	.mi .journal-grid { grid-template-columns: 5fr 7fr; gap: var(--space-16); align-items: start; }
}

/* --- Where to buy (closing, Deep Blue band) --- */
.mi.buy { background: var(--surface-dark); color: var(--text-on-dark); }
.mi.buy h2, .mi.buy h3 { color: var(--text-on-dark); }
.mi.buy .label, .mi.buy .lead { color: var(--text-on-dark-muted); }
.mi.buy :focus-visible { outline-color: var(--white); }
.mi.buy .wp-block-button__link { background: var(--white); color: var(--deep-blue); border-color: var(--white); }
.mi.buy .wp-block-button__link:hover { background: var(--light-blue); }
.mi.buy .is-style-outline > .wp-block-button__link { background: transparent; color: var(--text-on-dark); border-color: var(--text-on-dark); }
.mi.buy .is-style-outline > .wp-block-button__link:hover { background: var(--deep-blue-hover); color: var(--text-on-dark); }
.mi .buy-grid { display: grid; gap: var(--space-12); align-items: center; }
.mi .buy-grid .section-head { margin-bottom: var(--space-8); }
.mi .channels { display: grid; border-top: 1px solid var(--text-on-dark-muted); }
.mi .channel {
	display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); gap: var(--space-3) var(--space-4);
	align-items: start; padding-block: var(--space-6); border-bottom: 1px solid var(--text-on-dark-muted);
}
.mi .channel::before {
	content: ""; width: var(--icon); height: var(--icon); margin-top: var(--space-1);
	background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.mi .channel > .wp-block-buttons { grid-column: 2; }
.mi .channel h3 { font-size: var(--fs-h4); line-height: var(--leading-h4); }
.mi .channel p { color: var(--text-on-dark-muted); }
.mi .buy-visual {
	position: relative; display: flex; align-items: flex-end; justify-content: center;
	aspect-ratio: 4 / 5; padding: var(--space-12) var(--space-6); background: var(--surface-brand); overflow: hidden;
}
.mi .buy-visual::before {
	content: ""; position: absolute; left: 50%; top: 48%; width: 58%; aspect-ratio: 1;
	background: var(--bg); border-radius: 0 50% 50% 50%; transform: translate(-50%, -50%) rotate(45deg);
}
.mi .buy-visual .pack { position: relative; filter: var(--shadow-product-drop); }
.mi .buy-visual .pack-ocuvita { width: 58%; }
.mi .buy-visual .pack-foam { width: 33%; margin-left: calc(-1 * var(--space-8)); }
@media (max-width: 959.98px) { .mi .buy-visual { max-width: var(--buy-photo-max-m); } }
@media (max-width: 639.98px) { .mi .buy-visual { display: none; } }
@media (min-width: 640px) {
	.mi .channel { grid-template-columns: var(--icon) minmax(0, 1fr) auto; align-items: center; }
	.mi .channel > .wp-block-buttons { grid-column: 3; justify-self: end; }
	.mi .channel::before { margin-top: 0; }
}
@media (min-width: 960px) {
	.mi .buy-grid { grid-template-columns: 7fr 5fr; gap: var(--space-16); }
}

/* ===== 4b. Product pages (template "Product page"): the homepage's sections plus these few rules ===== */
.mi.product-hero { padding-top: calc(var(--header-h) + 2 * var(--header-inset) + var(--space-4)); }
@media (max-width: 639.98px) { .mi.product-hero .lead { font-size: var(--text-body); } }
.mi.product-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.mi.product-hero .name-en { margin-top: calc(-1 * var(--space-2)); }
.mi.product-hero .lead { color: var(--text); }
.mi.product-hero .concern-pills { margin-top: 0; }
.mi .crumbs { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.mi .crumbs a { color: var(--text-muted); }
/* phones: words and buttons first, the product photo after them */
@media (max-width: 959.98px) { .mi.product-hero .product-tile { order: 2; } }
@media (min-width: 960px) { .mi.product-hero .product { grid-template-columns: 6fr 6fr; } }
/* text still waiting for the owner, visible on purpose until it is filled in */
.mi .todo { padding: var(--space-2) var(--space-3); border: 1px dashed var(--text-muted); background: var(--surface); font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.mi .section-head > p + p { color: var(--text-muted); max-width: var(--measure); }
@media (min-width: 1100px) { .mi .concern-grid.concern-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mi .concern-grid + .lid-caption { margin-top: var(--space-12); }
.mi .statement-copy h2 { font-size: var(--fs-h2); line-height: var(--lh-h1); }
.mi .howto-steps .todo { margin-top: var(--space-2); }
.mi .sheet > h2 { font-size: var(--fs-h3); line-height: var(--leading-h3); margin-bottom: var(--space-4); }
.mi .ingredients.ingredients-foam { margin-top: 0; background: var(--surface-brand); }
.mi .ingredients-foam li { border-bottom-color: color-mix(in srgb, var(--link) 30%, transparent); }
.mi .sheet .faq-list { margin-top: var(--space-6); }
.mi .sheet .faq-list .wp-block-details > p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.mi .sheet .small { margin-top: var(--space-4); }
.mi.section-tight { padding-block: 0 var(--section-y); }
.mi .related {
	display: grid; gap: var(--space-6); align-items: center; padding: var(--space-6);
	background: var(--surface-ocuvita); border-radius: var(--radius-panel);
}
.mi .related-pack { width: 160px; filter: var(--shadow-product-drop); }
.mi .related-text { display: grid; gap: var(--space-3); }
.mi .related-text h3 { font-size: var(--fs-h4); line-height: var(--leading-h4); }
.mi .related-link a { color: var(--accent-ocuvita); font-weight: var(--weight-semibold); }
@media (min-width: 640px) { .mi .related { grid-template-columns: 160px minmax(0, 1fr); padding: var(--space-8); gap: var(--space-8); } }
.mi .buy-visual.buy-solo .pack-foam { width: 44%; margin-left: 0; }

/* OCUVITA page */
.mi.statement.statement-ocu { background: var(--surface-ocuvita); }
.mi.statement-ocu .statement-media { display: flex; justify-content: center; padding-top: var(--space-8); }
/* The pack picture's own shape (1000 x 1030), never "auto": WordPress marks lazy pictures sizes="auto", and for those the
   browser ignores the picture's own size (even once loaded) and falls back on WordPress's 3000 x 1500 stand-in, so with
   aspect-ratio auto the box came out 1500 px tall (a screen of empty lilac on phones). */
.mi.statement-ocu .statement-media img { width: min(300px, 70%); height: auto; aspect-ratio: 1000 / 1030; object-fit: contain; filter: var(--shadow-product-drop); }
@media (min-width: 960px) {
	.mi.statement-ocu .statement-media { align-items: center; padding-top: 0; }
	.mi.statement-ocu .statement-media img { width: min(360px, 60%); height: auto; -webkit-mask-image: none; mask-image: none; }
}
.mi .ing-grid { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .mi .ing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mi .ing-item { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); background: var(--surface-ocuvita); }
.mi .ing-item h3 { font-size: var(--fs-h4); line-height: var(--leading-h4); color: var(--accent-ocuvita); }
.mi .ing-item p { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }
.mi .ing-item.made-usa h3::after {
	content: ""; display: inline-block; width: 21px; height: 11px; margin-left: var(--space-2); vertical-align: 0;
	background: url(assets/icons/flag-us.svg) center / cover; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1);
}
.mi .ing-grid + .badges { margin-top: var(--space-6); }
.mi .badges + .faq-list { margin-top: var(--space-6); max-width: 46rem; }
.mi .ing-table { margin-top: var(--space-4); }
.mi .faq-list .ing-table + p { margin-top: var(--space-3); font-size: var(--text-small); color: var(--text-muted); }
.mi .study.study-wide { max-width: 46rem; padding-block: var(--space-6); }
.mi .study.study-wide p:first-child { font-size: var(--text-body); line-height: var(--leading-body); }
.mi .howto-narrow .steps { max-width: 46rem; }
.mi .sheet.quality { container-type: normal; }
.mi .related.related-foam { background: var(--surface-brand); }
.mi .related-foam .related-link a { color: var(--link); }
.mi .buy-visual.buy-solo .pack-ocuvita { width: 66%; }

/* ===== 5. Pages, posts, blog, search, 404 ===== */
.mi-page {
	padding-top: calc(var(--header-h) + 2 * var(--header-inset) + var(--space-12));
	padding-bottom: var(--section-y);
	padding-inline: max(var(--gutter-x), env(safe-area-inset-left, 0px)) max(var(--gutter-x), env(safe-area-inset-right, 0px));
}
.mi-page .wp-block-post-title { font-size: var(--fs-h1); line-height: 1.25; }
.mi-page .post-meta { color: var(--text-muted); font-size: var(--text-small); }
.mi-page .wp-block-post-template { display: grid; gap: var(--space-8); padding: 0; }
.mi-page .wp-block-post-template > li { border-bottom: 1px solid var(--divider); padding-bottom: var(--space-8); }
.mi-page .wp-block-post-template .wp-block-post-title { font-size: var(--fs-h3); }
.mi-page .wp-block-post-template .wp-block-post-title a { color: var(--text); text-decoration: none; }
.mi-page .wp-block-post-template .wp-block-post-title a:hover { color: var(--link); text-decoration: underline; }
.mi-page .wp-block-post-excerpt { color: var(--text-muted); }
.mi-page .wp-block-search__input { min-height: var(--tap-min); border-radius: var(--radius-sm); border: 1px solid var(--field); padding-inline: var(--space-3); }
.mi-page .wp-block-search__button { border-radius: var(--radius-full); }
.mi-page .page-lead { color: var(--text-muted); font-size: var(--fs-lead); }

/* ===== 6. Large screens (desktop monitors) =====
   The design is drawn at 1280-1440 px. Wider than that, the page column, the type, the section spacing and the photo
   bands grow in two steps, so a 24-32 inch monitor shows the same composition instead of a narrow strip of small
   text with the photos blown up around it. */
@media (min-width: 1680px) {
	:root {
		--wp--custom--container: 1320px;
		--wp--style--global--wide-size: 1320px;
		--wp--preset--font-size--small: 15px;
		--wp--preset--font-size--body: 17px;
		--wp--preset--font-size--body-lg: 19px;
		--wp--preset--font-size--heading-4: 21px;
		--wp--preset--font-size--heading-3: 26px;
		--wp--preset--font-size--heading-2: 35px;
		--wp--preset--font-size--heading-1: 48px;
		--wp--preset--font-size--display: 62px;
		--fs-hero-h1: 48px;
		--measure: 41rem;
		--hero-copy-w: 33rem;
		--hero-max-h: 820px;
		--statement-min-h: clamp(560px, 28vw, 720px);
		--band-min-h: clamp(640px, 34vw, 900px);
		--section-y: 112px;
		--logo-h: 32px;
	}
}
@media (min-width: 2200px) {
	:root {
		--wp--custom--container: 1440px;
		--wp--style--global--wide-size: 1440px;
		--wp--preset--font-size--small: 16px;
		--wp--preset--font-size--body: 18px;
		--wp--preset--font-size--body-lg: 20px;
		--wp--preset--font-size--heading-4: 22px;
		--wp--preset--font-size--heading-3: 28px;
		--wp--preset--font-size--heading-2: 38px;
		--wp--preset--font-size--heading-1: 52px;
		--wp--preset--font-size--display: 68px;
		--fs-hero-h1: 52px;
		--measure: 44rem;
		--hero-copy-w: 36rem;
		--hero-max-h: 900px;
		--section-y: 128px;
		--logo-h: 34px;
	}
}