/**
 * base.css — design tokens, reset, base typography and accessibility utilities.
 *
 * This is the token layer. Every colour in the theme is declared once, here. No
 * other stylesheet in this theme may contain a raw colour value: if a component
 * needs a colour that is not here, the colour belongs here, not in the
 * component.
 *
 * LIGHT IS THE DEFAULT, AND IT IS THE SHOP'S REAL IDENTITY. An earlier pass
 * rebuilt this file as a dark glassmorphism experiment, with dark in :root and
 * light demoted to an escape hatch. That is now reversed. :root carries the
 * ORIGINAL palette, read out of the site's own Elementor global kit (post 9378),
 * the header template (4148) and the hero container (24927). The dark experiment
 * survives, unchanged, behind :root[data-theme="dark"] in section 2.
 *
 * THE VALUES BELOW ARE QUOTATIONS, NOT PROPOSALS. They were extracted from the
 * original site and are reproduced exactly, in the kit's own uppercase spelling
 * so an audit against the Elementor dump is a plain string match. Do not "tune"
 * one because it looks slightly off in isolation — it looked exactly like that
 * on the site the client is asking us to reproduce. Where a token had no
 * extracted counterpart, the comment says so in as many words.
 *
 * TOKEN COMPATIBILITY IS LOAD-BEARING. specs.css, gallery.css, woo.css,
 * layout.css, header.css, search.css, cart.css, hero.css, motion.css and
 * editor.css are already shipped and already read --bedi-ink, --bedi-navy,
 * --bedi-accent, --bedi-rule, --bedi-surface, --bedi-muted, --bedi-link-brand,
 * --bedi-glass and the whole space / radius / type scale. Every one of those
 * names is still declared below, at its original role. New names from the
 * extracted kit are added ALONGSIDE them, never in place of them. Renaming or
 * dropping one of the old names silently unskins a component nobody is looking
 * at.
 *
 * Depends on fonts.css for --bedi-font-sans, which is now an alias of
 * --bedi-font-body declared here. Hand-written, unminified, no build step — the
 * theme deploys by zip or FTP.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. TOKENS — LIGHT (default)
 * ====================================================================== */

:root {
	/* The UA paints form controls, scrollbars and the canvas light. Not
	   `light dark`: there is no automatic dark branch, only the explicit
	   opt-in in section 2. The shop is light by design, as it always was. */
	color-scheme: light;

	/* ---- Canvas and surfaces ---------------------------------------------
	   --bedi-bg IS #FFFFFF. It was the kit's cool off-white #F2F5F9, which is
	   what made the shop read as a tinted document; the brief is a white page,
	   so the canvas is white and every raised surface now earns its separation
	   from a hairline or a shadow rather than from a 1.04:1 tint. The two
	   values that used to tint whole bands with it — --hero-page in hero.css
	   and --cards-band in section-category-cards.css — follow this one.
	   --bedi-bg-2 stays #EAF0FA: it is no longer the page, it is the ONE
	   deliberate blue band a section may opt into. --bedi-surface is a SOLID
	   raised panel — a card, a dropdown, the header bar, and the opaque
	   fallback for glass in browsers with no backdrop-filter. */
	--bedi-bg: #FFFFFF;
	--bedi-bg-2: #EAF0FA;
	--bedi-surface: #FFFFFF;
	--bedi-surface-2: #F9F9F9;
	--bedi-muted: #F9F9F9;

	/* ---- Glass -----------------------------------------------------------
	   The header and the hero no longer use glass at all — that was the dark
	   experiment and it is gone. These tokens stay because cart.css,
	   search.css and motion.css still consume them for the mobile overlays,
	   and because dropping a name is how a shipped component loses its skin.

	   On a light canvas glass tints DOWN, not up: a white veil on white is
	   invisible. The fill is the kit's own soft-shadow colour rgba(41,43,46)
	   at low alpha, so the frosted panels stay inside the extracted palette
	   instead of inventing a second grey. The recipe that consumes them lives
	   once in motion.css as .bedi-glass — do not rebuild it per component. */
	--bedi-glass: rgba(41, 43, 46, 0.04);
	--bedi-glass-2: rgba(41, 43, 46, 0.07);
	--bedi-hairline: rgba(41, 43, 46, 0.1);
	--bedi-glass-sheen: rgba(255, 255, 255, 0.85);
	--bedi-glass-shadow: 0 20px 50px -24px rgba(41, 43, 46, 0.28);

	/* Overlay-weight glass. --bedi-glass is calibrated for a panel sitting on
	   a surface this theme controls; an overlay sits on whatever the visitor
	   happened to be reading, including a wall of white product photography,
	   where a 4% veil leaves text unreadable. Drawers, sheets and the search
	   overlay use this instead. Anything consuming it must still fall back to
	   the OPAQUE --bedi-surface, never to --bedi-glass: if the token goes
	   missing the overlay has to degrade to legible, not to pretty. */
	--bedi-glass-strong: rgba(255, 255, 255, 0.92);

	/* ---- Ink -------------------------------------------------------------
	   #252531 is the kit's "secondary" and the header's primary text colour
	   (15 occurrences in template 4148). #777777 is the muted text, the
	   placeholder and the idle icon (15 occurrences, the joint most-used
	   colour in the header). #7A7A7A is the kit's own body-text value, a
	   hair lighter again, kept under its own name because the kit
	   distinguishes them.

	   Measured, because these are quotations and someone will ask: #777777 on
	   #FFFFFF is 4.48:1 and on #F2F5F9 is 4.09:1; #7A7A7A on #FFFFFF is
	   4.29:1. Both sit just under the 4.5:1 line for body-size text. They are
	   the original values and they stay. Use --bedi-ink for anything that has
	   to be read rather than skimmed. */
	--bedi-ink: #252531;
	--bedi-ink-muted: #777777;
	--bedi-ink-soft: #7A7A7A;

	/* ---- Brand -----------------------------------------------------------
	   --bedi-accent is #2D81FF, THE brand blue, straight off the Elementor
	   global kit. --bedi-accent-2 is the kit's second blue #0668FC: the far
	   stop of every gradient, and — because it is the darker of the two — the
	   brand blue to reach for when something small has to be read.
	   --bedi-accent-strong is the hover/pressed state and resolves to the same
	   #0668FC, so a hover visibly darkens rather than glowing.

	   --bedi-navy is the kit's deep navy #070024: a band and fill colour, and
	   dark enough to carry white at any size. --bedi-navy-lift is the same
	   family lifted to #252531 so a raised dark panel is distinguishable from
	   the band it sits on — the kit has no third navy, so this reuses the
	   kit's own secondary dark rather than inventing one. --bedi-navy-strong
	   is the deepest brand fill, which is the hero panel colour. */
	--bedi-accent: #2D81FF;
	--bedi-accent-2: #0668FC;
	--bedi-accent-strong: #0668FC;
	--bedi-navy: #070024;
	--bedi-navy-lift: #252531;
	--bedi-navy-strong: #000338;

	/* The hero panel. Elementor container 24927 fills with #000338 under a
	   cover background image; the panel colour is what shows through and what
	   the page falls back to before the image loads. */
	--bedi-hero-bg: #000338;

	/* The kit's muted blue-grey. Dividers and de-emphasised chrome that has to
	   stay on-brand rather than going grey. */
	--bedi-muted-blue: #8BA7D0;

	/* ---- Lines ------------------------------------------------------------
	   #E5E5E5 is the header's field outline and border colour; #ECECEC is the
	   kit's lightest grey, for a rule that should barely register;
	   --bedi-rule-strong is #C4C4C4, the darkest of the kit's greys, used for
	   the scrollbar thumb and anything that has to read as a real edge. */
	--bedi-rule: #E5E5E5;
	--bedi-rule-soft: #ECECEC;
	--bedi-rule-strong: #C4C4C4;

	/* ---- State ------------------------------------------------------------
	   --bedi-danger is the kit's #F2442C. Measured: 3.72:1 on #FFFFFF, so it
	   is sound as a fill, an icon or a border and short of 4.5:1 as
	   body-size text. --bedi-alert is the kit's #D50045 at 5.36:1 on white
	   and is the one to use when the danger state has to be READ.

	   --bedi-ok has no counterpart anywhere in the extracted data — the
	   original site never expressed a success state. It keeps the value the
	   theme already shipped rather than inventing a brand green. */
	--bedi-danger: #F2442C;
	--bedi-alert: #D50045;
	--bedi-ok: #1C7C4A;

	/* ---- Badges ----------------------------------------------------------
	   The header's two highlight colours. #FFEF00 is the count chip on the
	   wishlist and cart controls; #F50000 is the alert badge. Each is paired
	   with the best ink available on it below, and "best available" is the
	   honest phrasing rather than "readable at any size":

	     #252531 on #FFEF00  12.7:1  — comfortable at the chip's small size.
	     #FFFFFF on #F50000   4.3:1  — clears AA for large text and for the
	                                   non-text 3:1 threshold, and sits just
	                                   under 4.5:1 for a small numeral.

	   Both fills are extracted values and neither may be adjusted. If the alert
	   count ever has to be read rather than noticed, the fix is to raise the
	   glyph to large-text size or to move that one usage to --bedi-alert
	   (#D50045, 5.4:1 under white), not to invent a third red. */
	--bedi-badge: #FFEF00;
	--bedi-badge-alt: #F50000;

	/* ---- Derived roles ---------------------------------------------------
	   Everything components need beyond the brand tokens, so a component
	   stylesheet never reaches for a literal.

	   --bedi-shadow-soft is the kit's own rgba(41, 43, 46, 0.1) — the single
	   shadow colour the header used — and both shadow presets are built from
	   it so the theme has one shadow hue rather than three. --bedi-scrim is
	   the kit's rgba(0, 0, 0, 0.5) overlay, and --bedi-overlay (the older
	   name, consumed by cart.css, header.css and layout.css) resolves to it. */
	--bedi-surface-raised: #FFFFFF;
	--bedi-surface-sunken: #ECECEC;
	--bedi-shadow-soft: rgba(41, 43, 46, 0.1);
	--bedi-scrim: rgba(0, 0, 0, 0.5);
	--bedi-overlay: var(--bedi-scrim);
	--bedi-selection-bg: #8BA7D0;
	--bedi-selection-ink: #070024;
	--bedi-shadow-1: 0 1px 2px var(--bedi-shadow-soft);
	--bedi-shadow-2: 0 10px 30px var(--bedi-shadow-soft);

	/* ---- Contrast pairs --------------------------------------------------
	   A fill and the only ink that is readable on it. Always use the pair;
	   picking the fill and guessing the ink is how a button ends up with
	   1.9:1 text nobody notices until a customer cannot find "add to cart".

	   --bedi-ink-inverse is the legacy name for "ink on a --bedi-navy fill".
	   --bedi-on-navy is the same value under a name that says what it is;
	   prefer it in new code.

	   --bedi-on-accent is #FFFFFF, as the original site had it. Measured
	   honestly: white on #2D81FF is 3.69:1, not the 4.6:1 the brief quotes.
	   That clears AA for large text and for UI component boundaries and falls
	   short for body-size text. It is the shop's actual button, so it stays,
	   and --bedi-accent-2 / --bedi-accent-strong (#0668FC, 4.78:1 under
	   white) is the fill to use where small text sits on blue. */
	--bedi-ink-inverse: #FFFFFF;
	--bedi-on-navy: #FFFFFF;
	--bedi-on-accent: #FFFFFF;
	--bedi-on-hero: #FFFFFF;
	--bedi-on-badge: #252531;
	--bedi-on-badge-alt: #FFFFFF;

	/* --bedi-link-brand is the brand colour in its TEXT role — layout.css and
	   specs.css read it for entry titles, pagination links and outline-button
	   labels. It is #0668FC rather than #2D81FF because those are small,
	   body-size strings: 4.78:1 on a white card against the accent's 3.69:1,
	   for two blues the eye reads as the same blue. Fills stay --bedi-accent. */
	--bedi-link-brand: #0668FC;

	/* Headings take the kit's #252531 — the Elementor "secondary" colour,
	   which is what the original site set headings to. The blockquote bar
	   takes the brand blue. Section 2 gives both a dark-mode value. */
	--bedi-heading: var(--bedi-ink);
	--bedi-quote-bar: var(--bedi-accent);

	/* Print is always black on white, whatever the screen palette. */
	--bedi-print-ink: #000000;
	--bedi-print-surface: #FFFFFF;

	/* ---- theme.json presets ----------------------------------------------
	   NOT duplication, and not to be "tidied away". WordPress turns theme.json
	   into global-styles-inline-css, which paints the page with

	       :root :where(body){ background-color: var(--wp--preset--color--bedi-surface);
	                           color: var(--wp--preset--color--bedi-ink); }

	   theme.json still holds the PRE-REBUILD palette (#333333 / #273A60 /
	   #007CBA / #D2D2D2 / #F5F7F8). Redefining only the --bedi-* tokens would
	   move every component onto the extracted kit and leave block-level colour
	   choices on the old one. So the six presets are re-declared here with the
	   kit values, and section 2 restores the dark set.

	   This works on source order, not specificity: both blocks are :root, and
	   bedi-base is enqueued after core's global-styles handle, so at equal
	   specificity the later declaration wins. Do not weaken this selector and
	   do not move base.css earlier in the dependency chain.

	   --wp--preset--color--bedi-surface stays equal to --bedi-surface so a
	   block picking "ფონი" gets a real white panel. The page canvas is
	   --bedi-bg and is applied by the `:root body` rule in section 4, which
	   outscores the core selector above. */
	--wp--preset--color--bedi-ink: #252531;
	--wp--preset--color--bedi-navy: #070024;
	--wp--preset--color--bedi-accent: #2D81FF;
	--wp--preset--color--bedi-rule: #E5E5E5;
	--wp--preset--color--bedi-surface: #FFFFFF;
	--wp--preset--color--bedi-muted: #F9F9F9;

	/* ---- Typography ------------------------------------------------------
	   --bedi-font-body and --bedi-font-display are the two families the
	   original site used: Mulish for everything, and MarksGeo Caps — a
	   Georgian display face — for the hero. Neither binary is in the theme
	   yet and there is no CDN, so both stacks name real Georgian-capable
	   system faces after the webfont: the page is correct before the files
	   land and on brand once they do. See assets/fonts/README.md.

	   Sylfaen and BPG Nino Mtavruli are appended to both stacks on purpose.
	   Font fallback is resolved per glyph, so they cost nothing to the Latin
	   rendering and are the difference between Georgian text and tofu boxes
	   on a Windows machine with no webfont.

	   --bedi-font-sans is the legacy name, aliased onto --bedi-font-body in
	   fonts.css; woo.css and editor.css still read it. */
	--bedi-font-body:
		"Mulish",
		"Noto Sans Georgian",
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Sylfaen,
		"BPG Nino Mtavruli",
		sans-serif;
	--bedi-font-display:
		"MarksGeo Caps",
		"Noto Sans Georgian",
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Sylfaen,
		"BPG Nino Mtavruli",
		sans-serif;
	--bedi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* The scale is anchored on the kit's base typography: 14px at a 20px
	   line-height, weight 400. Every step is a multiple the kit actually
	   used — 24px is the hero CTA, 32px the hero heading at mobile, 42px the
	   hero heading at desktop — so a component that reaches for a step lands
	   on a size the original site really had.

	   Nothing drops below 12px. The kit's base typography also carried
	   `text-transform: capitalize`; that is deliberately NOT reproduced here,
	   because Georgian is unicameral and the rule would only ever fire on the
	   Latin model numbers inside 1,289 of the 1,305 product names, retitling
	   them mid-string. */
	--bedi-text-xs: 0.75rem;
	--bedi-text-sm: 0.8125rem;
	--bedi-text-base: 0.875rem;
	--bedi-text-lg: 1rem;
	--bedi-text-xl: 1.125rem;
	--bedi-text-2xl: 1.5rem;
	--bedi-text-3xl: 2rem;

	/* The hero headline. Fluid between the kit's two measured sizes — 32px at
	   mobile, 42px from tablet up — so it never overflows a 320px phone, which
	   is exactly what the original Elementor hero did at that width. */
	--bedi-text-4xl: clamp(2rem, 1.35rem + 2.6vw, 2.625rem);

	/* No extracted counterpart; left at the value the theme shipped with, and
	   kept above --bedi-text-4xl at every viewport so the scale stays
	   monotonic. */
	--bedi-text-5xl: clamp(2.75rem, 1.6rem + 5vw, 4.5rem);

	--bedi-weight-regular: 400;
	--bedi-weight-medium: 500;
	--bedi-weight-bold: 700;

	/* 1.42857 is the kit's 20px line-height on its 14px base, stated as a
	   ratio so it scales with the step rather than freezing at one size. */
	--bedi-leading-tight: 1.2;
	--bedi-leading-snug: 1.4;
	--bedi-leading-normal: 1.42857;

	--bedi-measure: 68ch;

	/* ---- Space -----------------------------------------------------------
	   ONE scale. The old Elementor homepage had no scale at all: section gaps
	   ran 18px, 43px, 27px, 60px with no relationship between them, which is
	   what read as "broken vertical rhythm" in the screenshot. The fix is not
	   to nudge those numbers, it is to forbid them — every margin, padding and
	   gap in this theme is one of the twelve steps below, and nothing else.

	   The scale is a 4px base: 1=4, 2=8, 3=12, 4=16, 5=20, 6=24, 7=32, 8=40,
	   9=48, 10=64, 11=80, 12=96. */
	--bedi-space-1: 0.25rem;
	--bedi-space-2: 0.5rem;
	--bedi-space-3: 0.75rem;
	--bedi-space-4: 1rem;
	--bedi-space-5: 1.25rem;
	--bedi-space-6: 1.5rem;
	--bedi-space-7: 2rem;
	--bedi-space-8: 2.5rem;
	--bedi-space-9: 3rem;
	--bedi-space-10: 4rem;
	--bedi-space-11: 5rem;
	--bedi-space-12: 6rem;

	/* The names the shipped stylesheets already use, aliased onto the numeric
	   scale at exactly their previous values. Both spellings are correct;
	   new code should prefer the numeric steps. */
	--bedi-space-3xs: var(--bedi-space-1);
	--bedi-space-2xs: var(--bedi-space-2);
	--bedi-space-xs: var(--bedi-space-3);
	--bedi-space-sm: var(--bedi-space-4);
	--bedi-space-md: var(--bedi-space-6);
	--bedi-space-lg: var(--bedi-space-7);
	--bedi-space-xl: var(--bedi-space-9);
	--bedi-space-2xl: var(--bedi-space-10);

	/* ---- THE PAGE INSET, AND IT IS THE ONLY ONE ----------------------------
	   20px, stepping to 40px at 48em. Those are the export's own band gutters —
	   every top-level container in it uses 40/20 — and every band on this site
	   now reads this token rather than repeating the pair:

	     .bedi-container          layout.css
	     --bedi-header-pad-inline header.css
	     --hero-band-pad-inline   hero.css
	     --cards-pad-inline-*     section-category-cards.css

	   It was 1rem/1.5rem here and 20px/40px in those three files, which is why
	   the header, the hero and the page content each started at a different x
	   and the misalignment was visible on every template. Changing this one
	   value moves all of them together. px, not rem, for the same reason the
	   caps below are px: these are layout, not type, and they track Elementor's
	   px breakpoints. */
	--bedi-gutter: 20px;

	/* The vertical rhythm of a full-width section, and the default gap
	   between stacked blocks inside one. Every band on the homepage uses
	   these two and nothing else. */
	--bedi-section-y: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	--bedi-stack: var(--bedi-space-6);

	/* ---- Lines, radii, motion --------------------------------------------
	   --bedi-duration and --bedi-easing are the shipped pair, read by
	   specs.css, gallery.css, layout.css and woo.css. They stay exactly as
	   they were. The three-tier motion scale lives in motion.css. */
	--bedi-border-width: 1px;
	--bedi-radius-sm: 3px;
	--bedi-radius-md: 6px;
	--bedi-radius-lg: 12px;
	--bedi-radius-xl: 18px;
	--bedi-radius-2xl: 24px;
	--bedi-radius-pill: 999px;
	--bedi-radius-round: 50%;
	--bedi-duration: 200ms;
	--bedi-easing: cubic-bezier(0.2, 0, 0.2, 1);

	/* ---- Layout ----------------------------------------------------------
	   ONE MEASURE, 1280px, AND EVERY BAND ON THE SITE NOW USES IT.

	   It was 1440px here, 1280px in header.css, 1280px in hero.css, 1280px in
	   section-category-cards.css and 1200px in theme.json — five numbers for one
	   column, so the page content was 160px wider than the header above it and
	   nothing lined up vertically. 1280 wins because it is the number three of
	   the five already agreed on and it is the one the export's own header and
	   hero bands were drawn at; 1440 came from template 4148, which this rebuild
	   replaced.

	   --bedi-shell is the OUTER width of a band that carries its own gutter: the
	   measure plus one inset either side. A `.bedi-container` capped at the
	   measure alone would give 1280 minus 80 of content and sit 40px inside the
	   header; capped at the shell it gives exactly 1280, flush with it. Anything
	   full-bleed that paints its own padding uses the shell; anything already
	   inside a padded parent uses the measure.

	   The two are dependent by var(), so there is one number to change.

	   --bedi-wide-width is now the same value. `.bedi-container--wide` survives
	   as a no-op rather than being deleted, because theme.json's wideSize maps
	   to it and an `alignwide` block must not suddenly measure something the
	   page cannot: one measure means one measure. */
	--bedi-content-width: 1280px;
	--bedi-shell: calc(var(--bedi-content-width) + (var(--bedi-gutter) * 2));
	--bedi-wide-width: var(--bedi-content-width);
	--bedi-sidebar-width: 20rem;

	/* The sticky header's own height. The header module may redefine this on
	   :root for its breakpoints; motion.css derives scroll-padding-top from
	   it so an in-page anchor never lands underneath the header. */
	--bedi-header-height: 4.5rem;

	/* ---- Focus -----------------------------------------------------------
	   Never zero. Never `outline: none`. */
	--bedi-focus-width: 2px;
	--bedi-focus-offset: 2px;

	/* ---- Stacking --------------------------------------------------------
	   One ladder for the whole theme. A component that invents its own
	   z-index is a component that will eventually sit under the drawer.

	   THE THREE RUNGS BELOW THE HEADER ARE NEW AND THEY EXIST BECAUSE THE
	   CATEGORY RAIL USED TO TIE WITH IT. hero.css had --hero-rail-z: 100,
	   the same number as --bedi-z-header, and the rail is later in the
	   document than the header — so the tie went to the rail and the expanded
	   card painted straight over the logo and the category pill. The header is
	   the one surface that is always on top of the page, so the rail now sits
	   at --bedi-z-rail and can never reach it again.

	   --bedi-z-veil is the full-page blur that comes up behind the rail while
	   a category row is hovered, and --bedi-z-rail-lift is where the rail goes
	   while that veil is up. Both are strictly BELOW --bedi-z-header, which is
	   the whole point: the header and the utility bar stay sharp. */
	/*
	 * HOW FAR THE CONSULTATION DOCK SITS OFF THE BOTTOM. The ONE variable any
	 * page may change to move it: a template with a sticky bottom bar raises
	 * this and the dock steps over the bar. There is no other override, no
	 * !important and no second placement rule anywhere.
	 */
	/*
	 * A check mark, as a MASK rather than a background image.
	 *
	 * A mask takes its colour from `background-color: currentColor`, so one
	 * token serves a white check on green and a blue check on white without a
	 * second copy. The `#` in the stroke colour must stay percent-encoded —
	 * an unescaped one starts a fragment and the whole URL silently resolves to
	 * nothing, which renders as no check at all rather than as an error.
	 */
	/*
	 * A chevron, as a mask. Same reasoning as --bedi-check-mask below: one token,
	 * coloured by `background-color: currentColor` wherever it is used, and the
	 * `#` in the stroke stays percent-encoded or the URL silently resolves to
	 * nothing.
	 */
	--bedi-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");

	--bedi-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");

	/*
	 * The mobile bottom bar's height. Zero until that bar exists; anything that
	 * must sit clear of it reads this rather than hard-coding a number, so the
	 * bar can land in one place and everything above it moves with it.
	 */
	--bedi-bottombar-h: 0px;

	/*
	 * The product page's buy bar, when it is up. Written by product-buy.js from
	 * the bar's own measured height — it is a price and one or two wrapping
	 * buttons, so it is not a number that can be guessed here. Zero everywhere
	 * the bar does not exist, which is every page but one.
	 */
	--bedi-buybar-h: 0px;
	--bedi-dock-offset: var(--bedi-space-md);

	--bedi-z-rail: 40;
	/* The mobile buy bar. Deliberately the SAME value as --bedi-z-rail and
	   deliberately not the same token: the two never coexist (one is the hero's,
	   one is the product page's) and a future change to the hero must not move a
	   fixed bar sitting over a checkout flow. */
	--bedi-z-buybar: 40;
	--bedi-z-veil: 60;
	--bedi-z-rail-lift: 70;
	--bedi-z-header: 100;
	--bedi-z-dropdown: 120;
	--bedi-z-overlay: 190;
	/* The consultation dock. Above the rail lift (70) so page furniture never
	   buries it, below the header (100) so a floating widget can never cover the
	   category mega-panel. */
	--bedi-z-dock: 80;
	/* The mobile bottom bar. Above the dock (80) so a floating consultation
	   widget can never cover the site's primary navigation, and below the header
	   (100) so the category mega-panel still wins — the bar hides itself while
	   that panel is open in any case, and this ordering means it would lose even
	   if it did not. */
	--bedi-z-bottombar: 90;
	/* The dock's open panel: above the page veil (190) so it sits on its own
	   scrim, below the drawer (200) so a cart drawer still wins. */
	--bedi-z-dock-panel: 195;
	--bedi-z-drawer: 200;
	--bedi-z-sheet: 205;
	--bedi-z-toast: 250;
	--bedi-z-skiplink: 300;
}

/* =========================================================================
 * 2. DARK — the escape hatch
 *
 * <html data-theme="dark"> restores the glassmorphism palette the rebuild
 * experimented with, so that work is preserved and reachable without being the
 * default: an embed, a future toggle, or a customer who cannot read dark-on-
 * light can all get to it.
 *
 * :root[data-theme="dark"] scores (0,1,1) and beats the plain :root above
 * regardless of source order, so this block is order-independent and safe to
 * move. Only the values change — every token name is the same, which is the
 * whole point of a token layer.
 *
 * Tokens absent from this block are brand constants that do not flip with the
 * scheme (--bedi-hero-bg, --bedi-badge, --bedi-alert, --bedi-muted-blue, the
 * print pair, and the whole space / type / radius / z scale). They inherit from
 * section 1 on purpose; do not copy them down here just for symmetry.
 * ====================================================================== */

:root[data-theme="dark"] {
	color-scheme: dark;

	--bedi-bg: #0B0F17;
	--bedi-bg-2: #0E1420;
	--bedi-surface: #141B28;
	--bedi-surface-2: #0E1420;
	--bedi-muted: #0E1420;

	/* Glass over a dark canvas tints UP: the fill is white at low alpha. */
	--bedi-glass: rgba(255, 255, 255, 0.055);
	--bedi-glass-2: rgba(255, 255, 255, 0.085);
	--bedi-hairline: rgba(255, 255, 255, 0.1);
	--bedi-glass-sheen: rgba(255, 255, 255, 0.06);
	--bedi-glass-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
	--bedi-glass-strong: rgba(20, 27, 40, 0.82);

	--bedi-ink: #E8ECF3;
	--bedi-ink-muted: #9AA8BC;
	--bedi-ink-soft: #9AA8BC;

	--bedi-accent: #4FB3E8;
	--bedi-accent-2: #7C5CFF;
	--bedi-accent-strong: #8FD2F5;
	--bedi-navy: #273A60;
	--bedi-navy-lift: #3B5488;
	--bedi-navy-strong: #16223B;

	--bedi-rule: rgba(255, 255, 255, 0.08);
	--bedi-rule-soft: rgba(255, 255, 255, 0.05);
	--bedi-rule-strong: rgba(255, 255, 255, 0.18);

	--bedi-danger: #FF6B6B;
	--bedi-ok: #3DD68C;

	--bedi-surface-raised: #1A2232;
	--bedi-surface-sunken: #080C13;
	--bedi-shadow-soft: rgba(0, 0, 0, 0.55);
	--bedi-scrim: rgba(4, 7, 12, 0.72);
	--bedi-overlay: var(--bedi-scrim);
	--bedi-selection-bg: #1D4A66;
	--bedi-selection-ink: #EEF7FC;
	--bedi-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.55);
	--bedi-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.65);

	/* --bedi-ink-inverse is LIGHT here, not dark, because --bedi-navy is dark
	   in both schemes: the name means "the other ink", not "a dark ink". */
	--bedi-ink-inverse: #F5F8FD;
	--bedi-on-navy: #F5F8FD;
	--bedi-on-accent: #06121C;

	/* On #0B0F17 no single blue can be both a fill and body text (a fill that
	   carries white needs luminance <= 0.183, text on this canvas needs
	   >= 0.209 — the ranges do not overlap), so the roles stay split. */
	--bedi-link-brand: #A8BFE8;

	--bedi-heading: var(--bedi-ink);
	--bedi-quote-bar: var(--bedi-accent);

	--wp--preset--color--bedi-ink: #E8ECF3;
	--wp--preset--color--bedi-navy: #273A60;
	--wp--preset--color--bedi-accent: #4FB3E8;
	--wp--preset--color--bedi-rule: rgba(255, 255, 255, 0.08);
	--wp--preset--color--bedi-surface: #141B28;
	--wp--preset--color--bedi-muted: #0E1420;
}

/* =========================================================================
 * 3. GUTTER AND CONTAINER STEPS
 *
 * The container caps come straight out of the Elementor kit: 1440px at the
 * section's own content width, 1024px at the tablet breakpoint, 767px at
 * mobile. They are px because Elementor's breakpoints are px and these are
 * layout caps rather than type; a cap wider than the viewport is inert, which
 * is exactly how it behaved on the original site.
 * ====================================================================== */

/* The wider gutter once there is room for one — 20px -> 40px, the export's own
   pair. This is the single step in the whole layout system now: --bedi-shell is
   derived from the gutter, so widening it here widens every band at once and
   the header, the hero, the cards and the page content step together. */
@media (min-width: 48em) {
	:root {
		--bedi-gutter: 40px;
	}
}

/* THE TWO CAP STEPS THAT USED TO BE HERE ARE GONE, AND DELIBERATELY SO.
   They pinned --bedi-content-width to 1024px under 1024px and to 767px under
   767px, tracking the kit's container widths while the cap above was 1440. A
   cap wider than the viewport is inert — `.bedi-container` is `width: 100%` —
   so with the measure at 1280 both steps did nothing except make the token
   report a different number than the one the page was actually using, which is
   exactly the kind of thing that costs an afternoon. Nothing visual changed
   when they were removed. */

/* =========================================================================
 * 4. RESET
 * ====================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	tab-size: 4;
	background-color: var(--bedi-bg);
}

body {
	background-color: var(--bedi-bg);
	color: var(--bedi-ink);
	font-family: var(--bedi-font-body, "Mulish", "Noto Sans Georgian", Sylfaen, system-ui, sans-serif);
	font-size: var(--bedi-text-base);
	font-weight: var(--bedi-weight-regular);
	line-height: var(--bedi-leading-normal);
	min-height: 100vh;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/*
 * The canvas AND the base typography, stated loudly enough to be heard.
 *
 * WordPress paints the body from theme.json with `:root :where(body)`, which
 * scores (0,1,0) — :where() contributes nothing, but the leading :root does.
 * The plain `body` rule above is (0,0,1) and loses to it no matter which file
 * loads first. `:root body` is (0,1,1) and wins on specificity alone, so the
 * page background is #F2F5F9 and not theme.json's flat white even if core's
 * inline block changes or moves. Do not merge this into the rule above; the
 * duplication is the fix.
 *
 * FONT-FAMILY, FONT-SIZE AND LINE-HEIGHT ARE HERE FOR THE SAME REASON, AND
 * LEAVING THEM OUT WAS A REAL BUG. theme.json's `styles.typography` block sets
 * all three on that same `:root :where(body)` selector:
 *
 *     font-family: var(--wp--preset--font-family--bedi-sans)   (no Mulish)
 *     font-size:   var(--wp--preset--font-size--medium)        (1rem = 16px)
 *     line-height: 1.6
 *
 * Every one of those outscored the `body` rule above, so the kit's base
 * typography — Mulish at 14px on a 20px line — never actually reached the page.
 * The theme rendered at 16px/1.6 in the theme.json font stack, and the Mulish
 * webfont would never have been requested for body text even once the .woff2
 * files land. Restated here at (0,1,1), where it wins.
 *
 * This does not override anything a component or a block sets: those style
 * their own elements, and inheritance does not compete on specificity.
 * theme.json's own layout/palette desync is noted at --bedi-content-width.
 */
:root body {
	background-color: var(--bedi-bg);
	color: var(--bedi-ink);
	font-family: var(--bedi-font-body, "Mulish", "Noto Sans Georgian", Sylfaen, system-ui, sans-serif);
	font-size: var(--bedi-text-base);
	line-height: var(--bedi-leading-normal);
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* Form controls do not inherit type by default. Make them. */
input,
button,
textarea,
select {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
}

button,
[role="button"],
summary,
label[for] {
	cursor: pointer;
}

/*
 * NO DOUBLE-TAP ZOOM ON ANYTHING YOU CAN PRESS.
 *
 * A mobile browser waits after a tap to see whether a second one is coming,
 * because two taps in quick succession means "zoom". On a control that wait is
 * a delay before anything happens, and a second tap — on a quantity stepper, a
 * pager dot, a filter chip, a gallery thumbnail — zooms the page instead of
 * pressing the thing twice. Both are the same browser behaviour and this is
 * the declaration that turns it off.
 *
 * SCOPED TO CONTROLS, NOT PUT ON body. `touch-action: manipulation` on the
 * document would also kill double-tap zoom on TEXT and images, which is a
 * legitimate way to read a page. Only the things whose second tap was never
 * meant to zoom are opted out; pinch zoom is untouched everywhere, and the
 * viewport meta is left alone — user-scalable=no takes the page away from
 * anyone who needs to magnify it.
 */
a,
button,
input,
select,
textarea,
label[for],
summary,
[role="button"],
[role="tab"] {
	touch-action: manipulation;
}

textarea {
	resize: vertical;
}

/* Long Georgian compounds and long Latin model numbers both overflow narrow
   columns. Break them rather than scroll the page sideways. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dd,
dt,
figcaption,
caption,
td,
th {
	overflow-wrap: break-word;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

hr {
	background-color: var(--bedi-rule);
	border: 0;
	height: var(--bedi-border-width);
	margin-block: var(--bedi-space-lg);
}

::selection {
	background-color: var(--bedi-selection-bg);
	color: var(--bedi-selection-ink);
}

/* Firefox and WebKit paint scrollbars from color-scheme, but the thin styled
   bar reads better against the light panels.

   Declared on html, not on *, because scrollbar-color is an INHERITED
   property: one declaration reaches every scroll container on the page, and
   the universal selector would only buy a slower match. scrollbar-width does
   not inherit, so a component with its own scrolling region (the cart drawer's
   item list, the search results panel) sets it on that element itself. */
html {
	scrollbar-color: var(--bedi-rule-strong) transparent;
	scrollbar-width: thin;
}

/* =========================================================================
 * 5. BASE TYPOGRAPHY
 * ====================================================================== */

/*
 * HONEST NOTE ON THE TWO PROPERTIES THAT DO NOT LAND. This rule is (0,0,1), and
 * theme.json's elements.heading block sets font-weight 600 and line-height 1.25
 * on `:root :where(h1, … h6)` at (0,1,0). So `color` reaches the page — section
 * 9 restates it at matching specificity — and `font-weight` and `line-height`
 * do not: prose headings actually render at 600 / 1.25, not at 700 / 1.2.
 *
 * That is NOT silently patched here, and the omission is deliberate. The
 * extracted kit records no heading weight and no heading line-height, so there
 * is no quotation to restore; 600/1.25 and 700/1.2 are both theme choices, and
 * promoting this rule would make every prose heading on the site bolder than it
 * renders today for no reason the client asked for. The right fix is in
 * theme.json, whose owner has to decide which pair is intended. Every heading on
 * the home page is component-owned (.bedi-hero__heading takes the extracted
 * 900), so nothing in the 1:1 reproduction depends on this.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--bedi-heading);
	font-weight: var(--bedi-weight-bold);
	line-height: var(--bedi-leading-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--bedi-text-3xl);
}

h2 {
	font-size: var(--bedi-text-2xl);
}

h3 {
	font-size: var(--bedi-text-xl);
}

h4 {
	font-size: var(--bedi-text-lg);
}

h5,
h6 {
	font-size: var(--bedi-text-base);
}

p,
ul:not([class]),
ol:not([class]),
dl,
blockquote,
figure,
pre,
table {
	margin-block-end: var(--bedi-space-sm);
}

ul:not([class]),
ol:not([class]) {
	padding-inline-start: var(--bedi-space-md);
}

small {
	font-size: var(--bedi-text-sm);
}

strong,
b {
	font-weight: var(--bedi-weight-bold);
}

code,
kbd,
samp,
pre {
	font-family: var(--bedi-font-mono);
	font-size: 0.9375em;
}

pre {
	background-color: var(--bedi-muted);
	border: var(--bedi-border-width) solid var(--bedi-rule);
	border-radius: var(--bedi-radius-md);
	overflow-x: auto;
	padding: var(--bedi-space-sm);
}

blockquote {
	border-inline-start: 3px solid var(--bedi-quote-bar);
	color: var(--bedi-ink-muted);
	padding-inline-start: var(--bedi-space-sm);
}

figcaption {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
	margin-block-start: var(--bedi-space-2xs);
}

th {
	font-weight: var(--bedi-weight-medium);
	text-align: start;
}

th,
td {
	border-block-end: var(--bedi-border-width) solid var(--bedi-rule);
	padding: var(--bedi-space-2xs) var(--bedi-space-xs);
	vertical-align: top;
}

/* =========================================================================
 * 6. LINKS
 * ====================================================================== */

a {
	color: var(--bedi-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--bedi-duration) var(--bedi-easing);
}

/* This pair is (0,0,2) and theme.json's link element colour is (0,1,0), so on a
   stock install this rule loses and the hover never darkens. It is kept because
   it is the correct statement of intent and it is what applies if the link
   element style is ever removed from theme.json; section 9 restates it at a
   specificity that actually wins today. */
a:hover,
a:active {
	color: var(--bedi-accent-strong);
}

/* Links inside prose stay underlined: colour alone is not an accessible
   distinguisher, and it is doing more work than usual here — #2D81FF on
   #FFFFFF is 3.68:1, the brand blue the client asked to be reproduced
   exactly. The underline is what carries the affordance. Component
   stylesheets opt their own links out.

   .bedi-no-results__text became .bedi-empty__text when the three separate
   dead-end designs became one component (ui.css section 5). The empty state's
   sentence takes wp_kses_post(), so a caller can put a link in it, and that
   link needs the same underline every other prose link gets. */
.bedi-entry__content a,
.bedi-empty__text a {
	text-decoration: underline;
}

/* =========================================================================
 * 7. FOCUS
 *
 * The focus ring is never removed and never made invisible. :focus-visible
 * means a mouse click does not draw it, but every keyboard path does.
 * ====================================================================== */

:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: var(--bedi-focus-offset);
}

/* =========================================================================
 * 8. ACCESSIBILITY UTILITIES
 *
 * .screen-reader-text is the shape WordPress core, WooCommerce and every
 * plugin in the ecosystem expect a theme to provide. Do not rename it.
 * ====================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--bedi-surface-raised);
	border-radius: var(--bedi-radius-sm);
	box-shadow: var(--bedi-shadow-2);
	clip: auto !important;
	clip-path: none;
	color: var(--bedi-ink);
	display: block;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-bold);
	height: auto;
	inset-block-start: var(--bedi-space-xs);
	inset-inline-start: var(--bedi-space-xs);
	line-height: normal;
	padding: var(--bedi-space-2xs) var(--bedi-space-sm);
	text-decoration: none;
	width: auto;
	z-index: var(--bedi-z-skiplink);
}

/* The skip link is the first focusable element on every page. It is visually
   hidden until focused, at which point .screen-reader-text:focus above pins it
   to the top-left of the viewport. */
.skip-link {
	position: absolute;
}

.skip-link:focus {
	position: fixed;
}

/* #bedi-main carries tabindex="-1" so the skip link actually moves focus.
   That makes it programmatically focusable, which must not draw a ring when
   the visitor clicks inside the page. */
#bedi-main:focus {
	outline: none;
}

#bedi-main:focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-accent);
	outline-offset: calc(var(--bedi-focus-offset) * -1);
}

/* WordPress core alignment classes, which the block editor emits into
   the_content(). */
.alignleft {
	float: left;
	margin-block-end: var(--bedi-space-sm);
	margin-inline-end: var(--bedi-space-sm);
}

.alignright {
	float: right;
	margin-block-end: var(--bedi-space-sm);
	margin-inline-start: var(--bedi-space-sm);
}

.aligncenter {
	margin-inline: auto;
}

.alignwide {
	max-width: var(--bedi-wide-width);
}

.alignfull {
	max-width: none;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	color: var(--bedi-ink-muted);
	font-size: var(--bedi-text-sm);
}

.sticky,
.bypostauthor {
	/* Required by the theme review guidelines; styled by layout.css. */
	position: relative;
}

/* =========================================================================
 * 9. THEME.JSON RECONCILIATION
 *
 * WordPress turns theme.json into global-styles-inline-css and prints its
 * element styles behind `:root :where( … )`, which scores (0,1,0). A bare
 * element selector — `h1`, `a`, `body` — is (0,0,1) and loses to that outright,
 * whatever the load order. It is the same trap the `:root body` rule in
 * section 4 exists to escape, and it catches two more rules here.
 *
 * Two theme.json element rules point at presets section 1 re-declares, and both
 * land on the wrong side of a contrast pair when they do:
 *
 *   elements.heading.color.text = --wp--preset--color--bedi-navy
 *       Navy is a FILL, never text: on the extracted kit it is #070024, which
 *       is nearly black and turns every heading on the site into a different
 *       colour from the one the original used. Section 5's `h1, … h6` rule is
 *       (0,0,1), so the --bedi-heading token it introduced never actually
 *       reached the page until the rule below was added.
 *
 *   elements.button.color.text  = --wp--preset--color--bedi-surface
 *       A panel colour used as ink on a navy button.
 *
 * Restated below with the contrast pairs from section 1.
 *
 * A block whose author picked an explicit colour is unaffected: WordPress emits
 * preset colour classes with !important and custom colours as an inline style
 * attribute, and both still win.
 *
 * Do NOT "tidy" these into the section 5 and 6 rules. The leading :root is the
 * entire point of them.
 * ====================================================================== */

/*
 * :where() ON PURPOSE, and it is the whole design of this rule.
 *
 * This has to beat core's `:root :where(h1, … h6)` and lose to every component
 * that colours its own heading — .bedi-hero__heading, .bedi-cart-drawer__title,
 * .bedi-specs__title are all a single class at (0,1,0), and a plain `:root h1`
 * would be (0,1,1) and silently repaint all three. Wrapping the elements in
 * :where() puts this at exactly (0,1,0): a tie with core, which base.css wins
 * because it prints after global-styles-inline-css, and a tie with those
 * components, which they win because they print after base.css. One selector,
 * correct on both sides.
 *
 * This is the same source-order guarantee the preset re-declarations in
 * section 1 already rely on, and it holds for the same reason: core registers
 * wp_enqueue_global_styles() on wp_enqueue_scripts long before the theme
 * registers Assets::enqueue() at the same priority, so 'global-styles' enters
 * the queue — and the document — first. Do not move bedi-base earlier in the
 * dependency chain.
 */
:root :where(h1, h2, h3, h4, h5, h6) {
	color: var(--bedi-heading);
}

/*
 * The link hover, for the third time and finally at a weight that lands.
 *
 * theme.json declares elements.link.color.text, which core prints as
 * `:root :where(a:where(:not(.wp-element-button)))` at (0,1,0). Section 6's
 * `a:hover, a:active` is (0,0,2) and loses to it — a class-or-pseudo-class beats
 * any number of element selectors — so the shipped hover state never fired and
 * links stayed #2D81FF instead of darkening to #0668FC.
 *
 * :where() again, and again for both sides at once. `:root :where(a:hover)` is
 * exactly (0,1,0): a TIE with core's link rule, which base.css wins on source
 * order, and a tie-or-loss against every component that colours its own links,
 * which those win — by source order at (0,1,0) and on specificity at anything
 * above it. Writing `:root a:hover` instead would be (0,1,2) and would repaint
 * the hover state of every link inside every component on the site.
 *
 * The button rules below are (0,1,1) and outrank this, so a link that is also a
 * .wp-element-button keeps its own pair and is not caught here.
 */
:root :where(a:hover),
:root :where(a:active) {
	color: var(--bedi-accent-strong);
}

/* theme.json fills the button with --bedi-navy at rest and --bedi-accent on
   hover, so the ink has to change with it. Take the pair, never guess. */
:root .wp-element-button,
:root .wp-block-button__link {
	color: var(--bedi-on-navy);
}

:root .wp-element-button:hover,
:root .wp-block-button__link:hover {
	color: var(--bedi-on-accent);
}

/* =========================================================================
 * 10. PRINT
 *
 * layout.css repaints the page black-on-white for print, but it does so with a
 * bare `body` rule at (0,0,1) — and the canvas rule in section 4 is (0,1,1).
 * Specificity does not care that one of them is inside @media print, so without
 * this block the screen canvas survives onto paper. Restated here at matching
 * specificity, for exactly the elements sections 4 and 9 claimed.
 *
 * Print is always black on white. --bedi-print-ink and --bedi-print-surface are
 * the same values in both schemes, so this block is scheme-independent.
 *
 * font-size AND line-height ARE HERE FOR THE SAME REASON, and they were added
 * the moment section 4's `:root body` took over the base typography. layout.css
 * prints at `body { font-size: 11pt; line-height: 1.4 }`, which is (0,0,1): it
 * used to win against the plain `body` rule on source order, and it loses
 * outright to (0,1,1). The two values below are layout.css's own — 11pt on a 1.4
 * line, the paper measure — restated at matching specificity so raising the
 * screen typography did not quietly print the whole catalogue at 14px/1.43.
 * If layout.css's print size ever changes, change it here too.
 *
 * font-family is deliberately NOT restated: layout.css does not change it, and
 * the body face is the right face on paper.
 * ====================================================================== */

@media print {
	:root body {
		background-color: var(--bedi-print-surface);
		color: var(--bedi-print-ink);
		font-size: 11pt;
		line-height: 1.4;
	}

	:root h1,
	:root h2,
	:root h3,
	:root h4,
	:root h5,
	:root h6 {
		color: var(--bedi-print-ink);
	}

	/* theme.json's link element colour is also (0,1,0) and also outscores
	   layout.css's print rule. Same answer. */
	:root a {
		color: var(--bedi-print-ink);
	}
}

/* =========================================================================
 * 11. REDUCED MOTION
 *
 * A global guard for transitions and animations declared anywhere in the
 * theme. motion.css adds a second, targeted block that neutralises its own
 * primitives specifically; this one is the backstop.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-delay: -1ms !important;
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 1ms !important;
	}
}