/**
 * hero.css — the front page band, the category rail and the promotional panel.
 *
 * Partner of front-page.php, template-parts/home/hero.php and
 * assets/js/hero.js.
 *
 * THIS IS A PIXEL REPRODUCTION, NOT A DESIGN. Every number in section 1 was read
 * out of the original site's Elementor data — global kit post 9378 and container
 * 3ad5669, the hero inside homepage post 24600 — and is reproduced here
 * literally. That is the whole brief: exact visual identity, fixed structure.
 * Two consequences follow, and both are deliberate departures from the
 * conventions the rest of this theme keeps:
 *
 * THE SOURCE CONTAINER IS 3ad5669, NOT TEMPLATE 24927. 24927 is a near-identical
 * ORPHAN — same padding, colour and radius, and nothing on the site references
 * it — and an earlier pass in this rebuild read it and took a 500px min-height
 * from it. The homepage's own container says 420px (section 10). Every citation
 * in this file now names the element it came from inside 3ad5669, so the next
 * reader measures the container the shop actually serves.
 *
 *   1. THE SPACING SCALE IS BYPASSED INSIDE THE PANEL. base.css's
 *      --bedi-space-* scale is a 4px grid; the original's panel padding is
 *      36px 36px 36px 70px and its text column is 57.898% wide. 70px and
 *      57.898% are not on any scale and rounding them to one would be exactly
 *      the "improvement" this pass exists to undo. The panel therefore uses the
 *      extracted px values, declared once in section 1. The category rail — our
 *      own construct, not part of the extracted container — still uses the
 *      shared scale.
 *
 *   2. THE EXTRACTED COLOURS ARE THE PRIMARY VALUES, not fallbacks. A var()
 *      fallback only fires when the token is UNDEFINED, never when it is
 *      defined to something else, so writing var(--bedi-surface, #FFFFFF) would
 *      silently paint the rail whatever base.css currently happens to hold. The
 *      hero's identity is fixed by the export, so section 1 states it. The one
 *      exception is --hero-accent, and it is no longer the CTA's. The export
 *      records the CTA fill as #0668FC (section 7), so that colour is a literal
 *      like every other extracted value; --hero-accent stays token-first for the
 *      CATEGORY RAIL, which is our own construct and not in the export at all.
 *
 * WHAT IS GONE FROM THE PREVIOUS PASS
 *
 * The dark glassmorphism. No .bedi-glass, no .bedi-glow, no frosted panel, no
 * neon border, no accent bloom, no dark canvas. motion.css still ships those
 * primitives and other components still use them; nothing in the hero touches
 * them.
 *
 * .bedi-reveal is gone too, and that is a performance fix rather than a style
 * change: the panel is above the fold and holds the LCP element, so fading it
 * in delayed largest-contentful-paint and flashed an empty panel first.
 * .bedi-press survives on nothing here — the panel has no buttons — so the only
 * interaction this file declares is its own, and it declares it outright with no
 * shorthand to fight.
 *
 * The carousel is gone with it. Container 3ad5669 is a static panel; the track,
 * the dots and the autoplay pause control were an invention of the redesign, so
 * there are no rules for them here and nothing in hero.js to drive them.
 *
 * THE RAIL ROW IS ICON + NAME + CHEVRON. The "<n> პროდუქტი" count the previous
 * pass drew in each row is gone, because the client's screenshot of the original
 * rail has no numbers in it, and .bedi-hero__rail-count is gone with it — markup
 * and rules together, not one without the other. The icon that replaces it comes
 * from bedi-core through a template tag and arrives as an <img>; this file gives
 * it a box, and gives every row WITHOUT one the same box, so the names hold a
 * single vertical line down the list. The counts still shown by the category
 * CARDS section below the hero belong to section-category-cards.css and are not
 * this file's business.
 *
 * THE RAIL IS THE SUPPLIED MENU, NOT A CARD OF OUR OWN. Elementor column
 * 5dae56f held exactly one widget, [sidebar_menu_by_vebses], so the export
 * records that COLUMN and the plugin's own stylesheet recorded everything the
 * visitor could see inside it. Its contract is _analysis/menusys-reimpl.md §2.1:
 * a FIXED 340x420 box whose list is clipped under a fade and opens to 900px on
 * hover. This file had no clip and a 460px floor instead, so ten categories made
 * the rail 712px tall, the desktop grid row took the taller of its two items and
 * the 420px panel beside it was stretched to 712px with 292px of dead navy under
 * the collage. That is the "banner is way too big" the client reported. Section
 * 11 clips the box; not one value on the panel changed to fix it.
 *
 * MOTION is transform, filter and opacity only, with ONE exception: the rail's
 * max-block-size, which is §2.1's own 0.5s expansion. It is not a compositor-
 * friendly property — menusys-reimpl.md P5 says exactly that — and no transform
 * reproduces it, because the effect IS a change of clip and a scale would
 * stretch the rows rather than reveal more of them. It animates one 340px card
 * on pointer-in, and nothing else on the page depends on that card's height any
 * more, so the cost is bounded to it. Durations come from motion.css's scale,
 * except the 500ms and the cubic-bezier(.25,.8,.25,1) the rail carries because
 * motion.css publishes no such tier. Every one of them collapses under
 * prefers-reduced-motion — globally through base.css, and again in section 12
 * for the transforms and the indicator's bounce a duration clamp cannot undo.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. THE EXTRACTED VALUE TABLE
 *
 * The single place in this file where an EXTRACTED literal appears. Read it as
 * the export: changing a number here changes the reproduction, which is the
 * point. The handful of literals further down — the "all categories" chevron's
 * 16px box, the rail's 2px list gap and 2.5rem chip height, the 3px chevron
 * nudge, the two press scales, the CTA's brightness shift, and the numbers
 * section 11 takes straight from menusys-reimpl.md §2.1 (the list's 10px/60px
 * inset, the indicator's 80px strip and its 12px chevron arm) — belong to the
 * rail and to the interaction feedback, neither of which is in the export. No
 * extracted value is written anywhere but here.
 *
 * Declared on both roots because .bedi-main--home is the page band OUTSIDE
 * .bedi-hero and needs the page colour from the same table; custom property
 * declarations do not compete with anything, so the shared selector costs
 * nothing and keeps one table instead of two.
 *
 * Values below are mobile-first: the <= 767px branch of the export. Section 10
 * restates the ones that differ at 768px and up.
 * ====================================================================== */

.bedi-hero,
.bedi-main--home {
	/* ---- Global kit, post 9378 ----------------------------------------
	   #EAF0FA is --e-global-color-19a666e, the kit colour the hero's outer band
	   `f72c9ef` and the main header `05d08ee` are BOTH painted with — one
	   colour running from under the logo to under the panel. The previous pass
	   had #F2F5F9, which appears nowhere in kit 9378 and drew a visible seam
	   across the page at the line where the header ended. */
	/* WAS #eaf0fa. The page is white now (base.css, --bedi-bg), and a band
	   that stayed blue drew exactly the seam this token was introduced to
	   remove — just in the other direction. It is a var() rather than a
	   literal so the hero cannot drift away from the canvas again. */
	--hero-page: var(--bedi-bg, #ffffff);
	--hero-surface: #ffffff;
	--hero-surface-2: #f9f9f9;
	--hero-hairline: #e5e5e5;
	--hero-ink: #252531;
	--hero-ink-muted: #777777;
	--hero-on-panel: #ffffff;
	--hero-on-accent: #ffffff;

	/*
	 * The one token-first colour, and it belongs to the CATEGORY RAIL now, not
	 * to the CTA. The rail is our own construct rather than part of the export,
	 * so its accent is allowed to follow the theme; the CTA's fill is recorded
	 * and is therefore a literal (--hero-cta-fill, below). The fallback is the
	 * kit's own --e-global-color-accent, #2D81FF, so the rail is still on brand
	 * if this file is ever parsed without base.css.
	 */
	--hero-accent: var(--bedi-accent, #2d81ff);

	/* ---- Container 3ad5669, the panel --------------------------------- */
	--hero-panel: #000338;

	/*
	 * 24px, AND 10px WAS NOT A VALUE THIS THEME HAS.
	 *
	 * The radius ladder is 3 / 6 / 12 / 18 / 24 / pill. 10 is not on it — it
	 * came from measuring the original container rather than from the system,
	 * and it left the hero visibly sharper than everything under it: the B2B
	 * banner and the promises slab are both --bedi-radius-2xl, and those are
	 * the two other full-width surfaces on the page.
	 *
	 * The token with a literal fallback, the same way --hero-accent is written
	 * two lines up, so the file still renders if it is ever parsed without
	 * base.css.
	 */
	--hero-radius: var(--bedi-radius-2xl, 24px);
	/*
	 * THE SLIDE'S SHAPE IS A RATIO, AND THE HEIGHT FOLLOWS FROM IT.
	 *
	 * Sizing used to be `min-block-size` alone, which is a floor and not a
	 * shape: every slide within one breakpoint matched, but the hero changed
	 * proportion completely across them — measured at 920x420 (2.19) on a
	 * desktop and 335x360 (0.93) on a phone. Nearly square, 360px tall on a
	 * 375px screen, taking half the viewport before a single product.
	 *
	 * A declared ratio makes the shape the constant and lets the height be
	 * derived, so the hero reads as the same object at every width. The floor
	 * stays underneath it as a safety net for the case where the slide's own
	 * copy is taller than the ratio allows — a long Georgian headline must
	 * never be clipped by a shape.
	 */
	--hero-ratio: 920 / 420;
	--hero-min-h: 260px;
	--hero-pad-block: 0px;
	--hero-pad-inline-start: 0px;
	--hero-pad-inline-end: 0px;

	/* ---- Container 3ad5669, the text column `f2908eb` -----------------
	   The gap is 0 here and 10px at desktop (section 10). The previous pass had
	   10px at both and gave the heading a 10px bottom margin as well, so the
	   phone copy sat 20px apart where the export records nothing at all.

	   The export gives this column no NARROW width, so the 100% below is
	   Elementor's own container default rather than an extracted number; the
	   57.898% in section 10 is the recorded one. */
	--hero-body-width: 100%;
	--hero-body-gap: 0px;
	--hero-body-pad-top: 90px;
	--hero-body-pad-inline: 24px;

	/* ---- Container 3ad5669, the heading `3cad19e` ---------------------
	   The overhang is -100px at EVERY width, not desktop-only. The export
	   records `margin: 0 -100px 0 0` with no narrow override, and the panel's
	   overflow: hidden is unconditional, so nothing about the narrow branch
	   makes the recorded margin unsafe here — see section 6. The previous pass
	   zeroed it below 768px and there is nothing in the export to zero.

	   There is no --hero-heading-gap any more. The recorded shorthand's third
	   value is 0, so the space under the heading is the column's flex gap and
	   only the column's flex gap. */
	--hero-heading-size: 32px;
	--hero-heading-weight: 900;
	--hero-heading-leading: 1em;
	--hero-heading-overhang: -100px;

	/* ---- Container 3ad5669, the CTA `22c138d` -------------------------
	   THE FILL IS #0668FC. That is --e-global-color-a25b5bd in kit 9378, and
	   the export carries it on the CTA's own widget container. The previous
	   pass reported the colour as unrecorded and fell back to the kit's
	   --e-global-color-accent, #2D81FF, which is a different blue belonging to
	   the header's category-pill border and used nowhere in this panel.

	   It is a literal and not var(--bedi-accent) for the reason the file header
	   gives: a DEFINED token beats a var() fallback, so a later theme-wide
	   accent change would silently repaint a colour the export pins. */
	--hero-cta-fill: #0668fc;
	--hero-cta-size: 14px;
	--hero-cta-weight: 500;
	--hero-cta-leading: 14px;
	--hero-cta-pad-block: 12px;
	--hero-cta-pad-inline: 24px;
	--hero-cta-radius: 4px;

	/* ---- Container 3ad5669, the collage -------------------------------
	   Slot 1 is `6ccbc87` and hangs off the PANEL. Slots 2-6 are `b634a48`,
	   `5622ecf`, `89cc36d`, `b4d780d` and `0e98ca6`, in that order, and hang
	   off the 400px stack `9c979fa`. The order is the export's and is fixed: it
	   is what the bedi_theme_hero_collage filter indexes against.

	   ALL SIX ARE ABSOLUTELY POSITIONED in the export, so every height below
	   sizes a box that is out of flow. They cannot stretch the panel and they
	   are not meant to add up to it — the five stack heights total 1,613px on
	   desktop against a 420px panel, and the panel's own overflow: hidden is
	   what resolves that. The previous pass read them as a column of in-flow
	   images and needed a height cap and an invented 10px gutter to contain
	   them; the export needs neither, so both are gone.

	   Each slot records ONE inline offset and ONE block offset, and which edge
	   it is anchored to differs per slot but never between breakpoints.
	   Elementor emits every inline offset TWICE, once as `right:` and once as
	   `left:`, so a single build can serve LTR and RTL. That is one number, not
	   two, and it is written here once — the rules anchor it logically, which
	   is what the second emission existed to do.

	   The rotations of slots 2, 3, 4 and 6 are declared once for every width,
	   because the export records no narrow override for them and the desktop
	   angle carries down. That is not an assumption: slot 5 records an explicit
	   `rotateZ(0deg)` at the narrow breakpoint, which is only worth recording
	   if an angle would otherwise have carried down to it.

	   z-index is recorded on four of the six and nowhere else, so slots 4 and 6
	   stay at `auto` and paint in document order. .bedi-hero__body sits above
	   all of them; section 6 says why that is not the export's own stacking. */
	--hero-img-1: 130px;
	--hero-img-2: 160px;
	--hero-img-3: 90px;
	--hero-img-4: 360px;
	--hero-img-5: 120px;
	--hero-img-6: 240px;
	/*
	 * The export gives the stack `width: 400px` with no narrow override. The
	 * narrow branch overlays the panel instead; .bedi-hero__stack in section 8
	 * has the reason and what the narrow offsets prove about the box they were
	 * measured against.
	 */
	--hero-stack-width: 100%;

	--hero-art-1-inline-end: 0px;
	--hero-art-1-block-end: 84px;
	--hero-art-1-rot: 36deg;
	--hero-art-1-z: 6;

	--hero-art-2-inline-start: 0px;
	--hero-art-2-block-start: 50%;
	--hero-art-2-width: 100%;
	--hero-art-2-rot: -11deg;
	--hero-art-2-z: 5;

	--hero-art-3-inline-end: 0px;
	--hero-art-3-block-start: -1px;
	--hero-art-3-rot: 270deg;
	--hero-art-3-z: 6;

	--hero-art-4-inline-start: -107px;
	--hero-art-4-block-start: -118px;
	--hero-art-4-rot: 21deg;

	--hero-art-5-inline-start: 2px;
	--hero-art-5-block-start: 110px;
	--hero-art-5-rot: 0deg;
	--hero-art-5-z: 3;

	--hero-art-6-inline-end: -104px;
	--hero-art-6-block-start: 244px;
	--hero-art-6-width: 100%;
	--hero-art-6-rot: 10deg;

	/* ---- Type --------------------------------------------------------
	   The display face is "MarksGeo Caps" and the body face is "Mulish";
	   neither file is in the theme yet and there is no CDN, so both tokens
	   carry a full fallback stack with real Georgian coverage. The page is
	   correct before the .woff2 files land and on brand once they do.
	   fonts.css owns the @font-face rules and the two tokens. */
	--hero-font-display:
		var(
			--bedi-font-display,
			"MarksGeo Caps",
			"Noto Sans Georgian",
			system-ui,
			-apple-system,
			"Segoe UI",
			Roboto,
			sans-serif
		);
	--hero-font-body:
		var(
			--bedi-font-sans,
			"Mulish",
			"Noto Sans Georgian",
			Sylfaen,
			system-ui,
			-apple-system,
			"Segoe UI",
			Roboto,
			sans-serif
		);
	--hero-text: 14px;
	--hero-leading: 20px;

	/* ---- Motion — the names motion.css publishes ---------------------- */
	/*
	 * Only the micro duration and one easing curve. The panel is static, so the
	 * 220ms reveal tier and the 420ms large tier have nothing left to drive —
	 * every transition in this file is now a 120ms hover or press on the rail and
	 * the CTA. An alias for a duration nothing uses is dead weight.
	 */
	--hero-dur-micro: var(--bedi-dur-micro, 120ms);
	--hero-ease-out: var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1));

	/* ---- Rail metrics — menusys-reimpl.md §2.1 ------------------------
	   The rail is not in the export, and that is not the same as it being ours to
	   design. Column 5dae56f held one widget, [sidebar_menu_by_vebses]: the
	   export records the column (340 wide, white, padding 0) and the plugin's own
	   stylesheet recorded the card inside it. §2.1 is that stylesheet read out,
	   and the values below are its numbers — a fixed 340x420 box, a list clipped
	   under an 80px fade, 900px of expansion, rows at 12/24 behind a 3px marker,
	   and the slate-and-blue ramp §2.4 lists.

	   THE 460px IS GONE AND IS DELIBERATELY NOT A TOKEN ANY MORE. It was
	   5dae56f's min-height — the COLUMN's, not the card's — and the column was
	   40px taller than the 420px card inside it and painted the same #FFFFFF, so
	   the only thing it ever contributed was 40px nothing could fill. It was also
	   actively dangerous next to the clip: a 460px floor and a 420px clamp on one
	   box resolve in favour of the floor, because min-block-size is applied after
	   max-block-size, so leaving it in would have defeated section 11 silently.

	   THE CARD'S RADIUS IS 16px, NOT THE PANEL'S 10px. 5dae56f carries no radius
	   at all; the rounded white card was the plugin's nav and §2.1 records 16.
	   The 10px this file used was borrowed from the panel on the argument that it
	   made the two read as one row — a design decision taken over a number that
	   was recorded all along. The ROW radius stays the theme's 6px and is now
	   reached only below 64em, where the rows are chips and a two-column grid
	   rather than §2.1's full-bleed bars; section 11 squares them off.

	   --hero-row-height stays 3.5rem / 56px, the row height read off the client's
	   screenshot of the original rail. §2.1's own rows compute to 44px (12px of
	   padding either side of a 20px line box) and the two do not fight:
	   min-block-size is a floor, so the screenshot keeps the height while §2.1's
	   padding sets the 24px inline inset the names and the hover bar start from.

	   --hero-icon-box and --hero-icon-size are BOTH 20px now, because §2.1 draws
	   the icon itself at 20x20. The 18px glyph in a 20px box was this file's own
	   1px of air, argued for when the row's gap was 4px; the gap is §2.1's 14px
	   from here on and the air comes from there. The box stays a separate token
	   because an iconless row still draws the box and nothing inside it.

	   --hero-shadow is the kit's one soft shadow, rgba(41, 43, 46, 0.1), reached
	   through the preset base.css already publishes instead of being restated as
	   a literal. It is the resting elevation the category cards below the hero
	   also carry, so the whole band speaks one elevation language rather than
	   two. --hero-rail-shadow-open is §2.1's deeper one and is reached only while
	   the card is expanded over the page. */
	--hero-radius-row: var(--bedi-radius-md, 6px);

	/*
	 * 340px, EXACTLY, from the export: container 5dae56f carries `width: 340px`.
	 * This is a px value and not a rem one on purpose — the original is a fixed
	 * column, so it must NOT rescale with the root font size the way 19rem/20rem
	 * did. Those two earlier values (304px and 320px) were guesses at a number
	 * that was recorded all along.
	 *
	 * It pairs with the 20px gutter in section 11 and the panel wrapper's
	 * `calc(100% - 360px)`: 340 + 20 = 360.
	 */
	--hero-rail-width: 340px;

	/*
	 * §2.1's clipped box and the height it opens to. That 420 is the same number
	 * as the panel's desktop min-height is not a coincidence — the two sat side
	 * by side in one row on the original, which is why a rail that outgrows it
	 * shows up as a stretched BANNER rather than as a long rail.
	 */
	--hero-rail-collapsed: 420px;
	--hero-rail-open: 900px;
	--hero-rail-card-radius: 16px;
	--hero-rail-shadow-open: 0 30px 60px rgba(0, 0, 0, 0.12);

	/* §2.1's z-index on the floating nav. Section 11 names the element it beats. */
	/* WAS 100 — the SAME number as --bedi-z-header, and the rail is later in
	   the document, so the tie went to the rail and the expanded card painted
	   over the logo and the category pill. Both numbers are now tokens on the
	   one ladder in base.css and the header wins by 60. */
	--hero-rail-z: var(--bedi-z-rail, 40);
	--hero-rail-z-focus: var(--bedi-z-rail-lift, 70);

	/*
	 * §2.1's expansion timing. motion.css publishes 120/220/420ms and two curves
	 * and none of them is this pair, so the rail carries the recorded values
	 * rather than rounding them to a tier that happens to exist. Nothing else in
	 * this file uses them.
	 */
	--hero-rail-dur-expand: 500ms;
	--hero-rail-ease-expand: cubic-bezier(0.25, 0.8, 0.25, 1);

	/*
	 * §2.4's ramp, and the four values the rail draws with. They are literals for
	 * the reason the file header gives: a DEFINED theme token beats a var()
	 * fallback, so var(--bedi-accent, #2563eb) would paint the marker whatever
	 * the theme's accent happens to be rather than the menu's own blue.
	 *
	 * --hero-rail-ink is NOT --hero-ink. #252531 is the kit's ink and stays the
	 * panel's and the page's; #334155 is the menu's, and the rail is the menu.
	 */
	--hero-rail-ink: #334155;
	--hero-rail-tint: #f1f5f9;
	--hero-rail-marker-on: #2563eb;
	--hero-rail-indicator: #cbd5e1;

	/*
	 * §2.4's fly-out and icon ramp. Literals for the reason the file header gives —
	 * a defined theme token would beat a var() fallback and repaint the menu's own
	 * blue. --hero-rail-icon-ink is the resting icon colour the plugin faked with a
	 * filter chain (menusys-reimpl.md P17); the theme-authored default icon takes it
	 * through currentColor and turns --hero-rail-marker-on on hover with the row,
	 * which is that recolour done honestly. A real <img> icon keeps its own colours.
	 */
	--hero-rail-icon-ink: #94a3b8;
	--hero-rail-tint-2: #f8fafc;
	--hero-rail-sub-ink: #475569;
	--hero-rail-flyout-title: #94a3b8;
	--hero-rail-flyout-width: 240px;
	--hero-rail-flyout-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
	--hero-rail-more-height: 80px;

	/*
	 * f72c9ef's inline padding. 40px is the site-wide band gutter in the export
	 * — every top-level homepage container uses it (2d275b5, d24c77d, 1fb4ade,
	 * 67a87c5 …) — and 20px is the narrow step the header bands also take.
	 */
	--hero-band-pad-inline: var(--bedi-gutter);
	--hero-row-height: 3.5rem;

	/* §2.1's row: gap 14, padding 12/24, a 3px marker, a 20x20 icon and a 14x14
	   trailing arrow resting at .3 opacity. */
	--hero-row-gap: 14px;
	--hero-row-pad-block: 12px;
	--hero-row-pad-inline: 24px;
	--hero-rail-marker: 3px;
	--hero-icon-box: 20px;
	--hero-icon-size: 20px;
	--hero-arrow-size: 14px;
	--hero-arrow-rest: 0.3;
	--hero-shadow: var(--bedi-shadow-2, 0 10px 30px rgba(41, 43, 46, 0.1));
}

.bedi-hero {
	display: block;
	color: var(--hero-ink);
	font-family: var(--hero-font-body);
}

/* =========================================================================
 * 2. THE FRONT PAGE BAND
 *
 * The extracted page background is #EAF0FA — the colour of the hero's own outer
 * band `f72c9ef` — and the homepage opens tighter than
 * every other template: .bedi-main's generous top pad is right for a page that
 * opens with a heading and wrong for one that opens with a full-width panel,
 * where it leaves a dead band under the header.
 * ====================================================================== */

/*
 * 20px top, 0 bottom — f72c9ef's `padding: 20px 40px 0 40px`. It is the same
 * 20px at every width; the export declares no responsive step for it.
 *
 * The previous 24px/32px pair was a spacing-scale choice from before the band
 * was measured. 0 at the bottom is deliberate and load-bearing: the next band
 * down (2d275b5) is the SAME #EAF0FA and supplies its own top padding, so any
 * bottom padding here would double the seam between two bands that are meant to
 * read as one continuous surface.
 */
.bedi-main.bedi-main--home {
	background-color: var(--hero-page);
	padding-block-start: 20px;

	/*
	 * Doubled for the same reason as the band's box: layout.css sets
	 * `.bedi-main { padding-block: var(--bedi-space-lg) var(--bedi-space-2xl) }`
	 * at (0,1,0) and is enqueued AFTER hero.css, so a lone `.bedi-main--home`
	 * loses the tie. Measured live before this fix: 32px top and 64px bottom,
	 * neither of which is in the export.
	 */
	padding-block-end: 0;
}

/* =========================================================================
 * 3. THE HERO GRID
 *
 * Mobile first, and the mobile order is deliberate: the PANEL comes first and
 * the category rail follows it.
 *
 * On a phone the rail is the wrong thing to lead with. Ten stacked rows fill the
 * entire first screen, so the offer — the one piece of content the visitor came
 * to the homepage to see — starts below the fold. Desktop has the horizontal
 * room to show both at once and the original's left rail is worth keeping there;
 * a phone does not, so the concept changes rather than shrinking (see section 8
 * for the chip row it turns into).
 *
 * The reorder is done with `order` and spans exactly two adjacent sibling
 * blocks, so nothing is ever separated from its context.
 * ====================================================================== */

/*
 * THE BAND'S BOX — 1280px OF CONTENT, WITH A 40px GUTTER OUTSIDE IT.
 *
 * Outer band f72c9ef is BOXED at `content-width: 1280px` with
 * `padding: 20px 40px 0 40px`. Elementor splits those across two elements: the
 * padding sits on the full-width container, the 1280px caps the inner box
 * inside it. So at a 1440px viewport the row is 1280px wide, not 1200px.
 *
 * That is why this is a calc and not `max-inline-size: 1280px`. Everything in
 * this theme is border-box, so a bare 1280px cap would make the padding eat
 * into the cap and leave 1200px of content — 80px narrower than the original,
 * and the error would land squarely on the panel because the rail is fixed.
 *
 * Below 1360px the cap is inert and the gutter alone governs, which is exactly
 * how the original degraded.
 *
 * The grid itself stays a single class below, so the breakpoint rules in
 * sections 10-11 can keep overriding grid-template-columns and gap at their own
 * (0,1,0). Only the two BOX properties are doubled, in the rule after it.
 */
.bedi-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--bedi-space-md);
	align-items: stretch;
}

/*
 * THE SELECTOR IS DOUBLED ON PURPOSE, AND ONLY HERE.
 *
 * layout.css gives `.bedi-container` max-width 1440px and a 16/24px gutter at
 * (0,1,0). A bare `.bedi-hero__inner` ties that at (0,1,0), and the tie is then
 * settled by source order — which runs AGAINST us: Assets.php enqueues hero.css
 * BEFORE layout.css, so layout.css wins and the override silently does nothing.
 * Measured live before this fix: the band was still 1440px wide on a 24px
 * gutter, and only the numbers gave it away.
 *
 * `.bedi-hero .bedi-hero__inner` scores (0,2,0) and wins outright regardless of
 * enqueue order. It is kept to these two properties so it cannot shadow the
 * breakpoint rules above. Do not "simplify" it back to one class.
 */
.bedi-hero .bedi-hero__inner {
	/* The shell: the measure plus one gutter either side. It was this same sum
	   written out by hand; base.css owns it now, so the hero cannot end up a
	   different width from the header by arithmetic. */
	max-inline-size: var(--bedi-shell);
	padding-inline: var(--hero-band-pad-inline);
}

/*
 * THE GRID CELL. It was .bedi-hero__banner — one static panel — and it is
 * .bedi-hero__slider now, which holds a scroll-snap track of three of them.
 * Only the CELL's properties are here; everything the panel itself had is on
 * .bedi-hero__slide, one section down, under the same name it always used.
 */
.bedi-hero__slider {
	order: 1;
	min-inline-size: 0;
}

.bedi-hero__rail {
	order: 2;
	/*
	 * The grid cell AND the positioning context for the card. Mobile-first it is a
	 * plain box that grows with its card; at 64em (section 11) it is given the
	 * 420px floor the floating card reserves while it grows over the page.
	 */
	position: relative;
	min-inline-size: 0;
}

/* =========================================================================
 * 4. THE CATEGORY RAIL — a 1:1 reproduction of the vebses menu plugin.
 *
 * [sidebar_menu_by_vebses] rebuilt inside the theme (menusys-reimpl.md §2.1/§2.4):
 * a floating white card of top-level categories that expands on hover, a fade
 * "more" indicator at the foot of the clipped list, and a right-side fly-out of
 * each parent's children. Every value below is the plugin's own — the 340x420
 * box, the 16px card radius, 12/24 rows, the 3px #2563eb marker, the slate ramp,
 * the 240px fly-out — carried through the section-1 tokens. What the plugin never
 * had is added and cannot be seen: :focus-within opens the card and the fly-outs
 * so a keyboard reaches every link, focus rings are drawn, and section 12 stops
 * the bounce under prefers-reduced-motion. No !important, no filter-recolour.
 *
 * MOBILE-FIRST the card is a plain static card showing the whole list, because a
 * touch screen has no hover to expand it and no pointer to open a side fly-out.
 * The floating clip/expand and the side fly-outs are switched on at 64em in the
 * block at the end of this section, where a real pointer exists. Below that the
 * fade indicator is hidden (nothing is clipped) and children are not shown in the
 * rail — the parent link goes to its archive, which lists them, exactly as the
 * plugin's dead-on-touch fly-out left the visitor.
 * ====================================================================== */

.bedi-hero__rail-card {
	position: relative;
	overflow: hidden;
	background-color: var(--hero-surface);
	border: var(--bedi-border-width, 1px) solid var(--hero-hairline);
	border-radius: var(--hero-rail-card-radius);
	box-shadow: var(--hero-shadow);
	color: var(--hero-rail-ink);
}

.bedi-hero__rail-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	margin: 0;
	/* §2.1: 10px of breathing room at the top; the foot pad is added with the
	   fade indicator at 64em, where the clip needs the room reserved for it. */
	padding-block: var(--bedi-space-2xs);
	padding-inline: 0;
}

.bedi-hero__rail-item {
	position: relative;
	min-inline-size: 0;
	transition:
		filter 0.25s var(--hero-ease-out),
		opacity 0.25s var(--hero-ease-out);
}

/*
 * THE SIBLING BLUR IS GONE, AND WHAT REPLACED IT IS IN ui.css.
 *
 * The old effect blurred every row EXCEPT the hovered one, which made the menu
 * you were reading the only sharp thing inside a card of mush — the list fought
 * the pointer instead of following it. The brief inverts it: the ROWS STAY
 * SHARP, and the PAGE BEHIND THEM goes soft.
 *
 * That is one fixed veil (.bedi-page-veil, ui.css §1) raised on
 * :root:has(.bedi-hero__rail-list:hover) at --bedi-z-veil, with the rail lifted
 * over it to --bedi-z-rail-lift. The veil is strictly below --bedi-z-header, so
 * the header and the utility bar are never in its backdrop and never blur.
 *
 * Only the hover LIFT stays here, because it is the rail's own geometry: the
 * hovered row slides 2px toward the pointer and the rest hold still.
 */
@media (hover: hover) {
	.bedi-hero__rail-item {
		will-change: auto;
	}

	.bedi-hero__rail-list:hover .bedi-hero__rail-item:not(:hover) {
		/* Explicitly neutral. The declaration is kept, pointed at the identity
		   values, so a future reader greps "rail-item:not(:hover)", finds this
		   block and the paragraph above it, and does not reinvent the blur. */
		filter: none;
		opacity: 1;
	}
}

/*
 * §2.1's row: flex, 14px gap, 12/24 padding, 14px/500 slate ink, and a 3px
 * inline-start marker declared transparent AT REST — a border that appeared on
 * hover would shift the label 3px sideways, so only its colour changes.
 */
.bedi-hero__rail-link {
	display: flex;
	align-items: center;
	gap: var(--hero-row-gap);
	padding: var(--hero-row-pad-block) var(--hero-row-pad-inline);
	border-inline-start: var(--hero-rail-marker) solid transparent;
	color: var(--hero-rail-ink);
	font-size: var(--hero-text);
	font-weight: 400;
	line-height: var(--hero-leading);
	text-decoration: none;
	/* Paint-only: none of these trigger layout, so a hover never costs a reflow. */
	transition:
		background-color var(--hero-dur-micro) var(--hero-ease-out),
		border-color var(--hero-dur-micro) var(--hero-ease-out),
		color var(--hero-dur-micro) var(--hero-ease-out);
}

/*
 * The whole ROW lights on the item's :hover and :focus-within, not just the
 * link's own :hover — so hovering anywhere on the row, including over the
 * invisible fly-out bridge, keeps it lit, exactly as `.vebses-menu-item:hover`
 * did. base.css's `a:hover,a:active { color: var(--bedi-accent-strong) }` scores
 * (0,2,0) and outranks a component class, so the row's ink is restated here.
 */
.bedi-hero__rail-item:hover > .bedi-hero__rail-link,
.bedi-hero__rail-item:focus-within > .bedi-hero__rail-link,
.bedi-hero__rail-link:hover,
.bedi-hero__rail-link:active,
.bedi-hero__rail-link:focus-visible {
	background-color: var(--hero-rail-tint);
	border-inline-start-color: var(--hero-rail-marker-on);
	color: var(--hero-rail-marker-on);
}

.bedi-hero__rail-link:focus-visible {
	outline: var(--bedi-focus-width, 2px) solid var(--hero-rail-marker-on);
	outline-offset: calc(-1 * var(--bedi-focus-width, 2px));
}

/*
 * The 20px icon box, always drawn so every name holds one vertical line — a real
 * icon and the default mark share it, so the rail's left edge never saws in and
 * out. A flex centring context rather than a bare size, because a supplied icon
 * is not guaranteed square.
 */
.bedi-hero__rail-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--hero-icon-box);
	block-size: var(--hero-icon-box);
	color: var(--hero-rail-icon-ink);
}

/*
 * inline-size/block-size win over base.css's `img { height: auto; max-width: 100% }`
 * on specificity (0,1,0 vs 0,0,1), so a real icon is exactly 20px whatever the
 * file's own size. object-fit: contain letter-boxes a non-square glyph rather
 * than cropping it.
 */
.bedi-hero__rail-icon-img {
	inline-size: var(--hero-icon-size);
	block-size: var(--hero-icon-size);
	object-fit: contain;
	object-position: center;
}

/*
 * The default mark is inline SVG and inherits currentColor, so it takes the icon
 * box's ink and turns --hero-rail-marker-on on hover with the row — the recolour
 * the plugin faked with a filter chain (P17), done honestly. A real <img> icon
 * keeps its own colours and is deliberately not recoloured: an <img> cannot be
 * tinted by currentColor, and that immunity is the whole reason it is an <img>.
 */
.bedi-hero__rail-icon-default {
	inline-size: var(--hero-icon-size);
	block-size: var(--hero-icon-size);
}

.bedi-hero__rail-item:hover > .bedi-hero__rail-link .bedi-hero__rail-icon,
.bedi-hero__rail-item:focus-within > .bedi-hero__rail-link .bedi-hero__rail-icon,
.bedi-hero__rail-link:hover .bedi-hero__rail-icon,
.bedi-hero__rail-link:focus-visible .bedi-hero__rail-icon {
	color: var(--hero-rail-marker-on);
}

.bedi-hero__rail-name {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * §2.1's trailing arrow: 14x14 at .3 opacity, pushed to the end, and drawn ONLY on
 * a row that has a fly-out — the .has-children markup carries the element, so
 * unlike the previous pass this arrow is now conditional exactly as the plugin's
 * was, pointing only where there is something to point at.
 */
.bedi-hero__rail-arrow {
	flex: 0 0 auto;
	margin-inline-start: auto;
	display: flex;
	inline-size: var(--hero-arrow-size);
	block-size: var(--hero-arrow-size);
	color: currentcolor;
	opacity: var(--hero-arrow-rest);
}

/* ---- The fly-out submenu ---------------------------------------------------
 * Base: children are laid out inline under the parent (see section 11's note),
 * because a touch device cannot open a side panel. The floating side fly-out and
 * its hover/focus reveal are switched on at 64em. The surface is stated here so
 * both forms share it.
 * ------------------------------------------------------------------------- */
.bedi-hero__flyout {
	display: none;
	background-color: var(--hero-surface);
}

.bedi-hero__flyout-title {
	display: block;
	margin: 0 0 var(--bedi-space-3xs) 0;
	color: var(--hero-rail-flyout-title);
	font-size: 11px;
	font-weight: var(--bedi-weight-bold, 700);
	line-height: 1.4;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.bedi-hero__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-hero__sublink {
	display: block;
	padding: 8px 10px;
	border-radius: var(--hero-radius-row);
	color: var(--hero-rail-sub-ink);
	font-size: 13px;
	font-weight: 400;
	line-height: var(--hero-leading);
	text-decoration: none;
	transition:
		background-color var(--hero-dur-micro) var(--hero-ease-out),
		color var(--hero-dur-micro) var(--hero-ease-out);
}

.bedi-hero__sublink:hover,
.bedi-hero__sublink:active,
.bedi-hero__sublink:focus-visible {
	background-color: var(--hero-rail-tint-2);
	color: var(--hero-rail-marker-on);
}

.bedi-hero__sublink:focus-visible {
	outline: var(--bedi-focus-width, 2px) solid var(--hero-rail-marker-on);
	outline-offset: calc(-1 * var(--bedi-focus-width, 2px));
}

/* ---- The fade "more" indicator --------------------------------------------
 * §2.1's 80px white gradient with the bouncing chevron. Hidden until 64em, where
 * the list is clipped and there is something for it to hint at. pointer-events:
 * none so it never swallows the last visible row's click.
 * ------------------------------------------------------------------------- */
.bedi-hero__rail-more {
	display: none;
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: var(--hero-rail-more-height);
	align-items: flex-end;
	justify-content: center;
	padding-block-end: var(--bedi-space-2xs);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--hero-surface) 90%);
	pointer-events: none;
	transition: opacity var(--hero-dur-micro) var(--hero-ease-out);
}

.bedi-hero__rail-more-arrow {
	inline-size: 20px;
	block-size: 20px;
	color: var(--hero-rail-indicator);
	animation: bedi-hero-rail-bounce 2s infinite;
}

@keyframes bedi-hero-rail-bounce {
	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-5px);
	}

	60% {
		transform: translateY(-3px);
	}
}

/* =========================================================================
 * 4b. THE FLOATING BEHAVIOUR — 64em and up, where a pointer exists.
 *
 * §2.1's card: absolute over its 420px cell, clipped to 420 under the fade, and
 * grown to 900 (overflow visible) on hover or focus, floating over the page
 * rather than pushing it. The fly-outs open to the side on the same trigger, held
 * alive across the gap by the item's ::after bridge.
 * ====================================================================== */

@media (min-width: 64em) {
	.bedi-hero__rail {
		min-block-size: var(--hero-rail-collapsed);
	}

	.bedi-hero__rail-card {
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		inline-size: 100%;
		max-block-size: var(--hero-rail-collapsed);
		z-index: var(--hero-rail-z);
		transition:
			max-block-size var(--hero-rail-dur-expand) var(--hero-rail-ease-expand),
			box-shadow 0.3s ease;
	}

	.bedi-hero__rail:hover .bedi-hero__rail-card,
	.bedi-hero__rail:focus-within .bedi-hero__rail-card {
		max-block-size: var(--hero-rail-open);
		overflow: visible;
		box-shadow: var(--hero-rail-shadow-open);
	}

	/* Room reserved at the foot for the fade strip to lie over. */
	.bedi-hero__rail-list {
		padding-block-end: var(--hero-rail-more-height);
	}

	.bedi-hero__rail-more {
		display: flex;
	}

	.bedi-hero__rail:hover .bedi-hero__rail-more,
	.bedi-hero__rail:focus-within .bedi-hero__rail-more {
		opacity: 0;
	}

	/*
	 * The fly-out becomes a side panel: absolute, one card-width to the right, a
	 * row-gap up, hidden until the row is hovered or focused. translateX gives it
	 * the plugin's -15px -> +10px slide. Its z-index sits above the rows of the
	 * open card.
	 */
	.bedi-hero__flyout {
		display: block;
		position: absolute;
		inset-inline-start: 100%;
		inset-block-start: -5px;
		inline-size: var(--hero-rail-flyout-width);
		padding: 15px;
		border-radius: 8px;
		box-shadow: var(--hero-rail-flyout-shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateX(-15px);
		transition:
			opacity 0.2s ease,
			visibility 0.2s ease,
			transform 0.2s ease;
		z-index: calc(var(--hero-rail-z) + 10);
	}

	.bedi-hero__rail-item:hover > .bedi-hero__flyout,
	.bedi-hero__rail-item:focus-within > .bedi-hero__flyout {
		opacity: 1;
		visibility: visible;
		transform: translateX(10px);
	}

	/*
	 * §2.1's invisible bridge: a 30px block hung off the row's inline-end edge so
	 * the pointer can cross the gap into the fly-out without the :hover chain
	 * breaking. Inert and behind the fly-out.
	 */
	.bedi-hero__rail-item.has-children::after {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: 30px;
		block-size: 100%;
		transform: translateX(100%);
	}
}

/* =========================================================================
 * 5. THE PANEL
 *
 * Flat #000338, 10px radius, exactly as container `3ad5669` is. No glass, no
 * glow, no gradient, no bloom.
 *
 * overflow: hidden does three jobs at once: it clips the cover image to the
 * radius, it clips the collage (section 8), and it is the guard that keeps the
 * heading's deliberate negative right margin (section 6) from ever reaching the
 * document and raising a horizontal scrollbar — which is what the original did.
 * ====================================================================== */

/*
 * THE SLIDE. Every declaration below belonged to .bedi-hero__banner and is
 * unchanged; the element was renamed when the single panel became a track of
 * three, and the geometry the export recorded is the geometry of ONE of them.
 * assets/css/ui.css adds the two things that are new — the snap alignment and
 * the copy's scroll-driven entrance — and touches nothing here.
 */
.bedi-hero__slide {
	position: relative;
	/*
	 * A stacking context of its own, so the cover image can sit at z-index -1:
	 * above this element's own background, below its content, clipped by it. It
	 * also fences in the collage's recorded z-indexes, which run up to 6.
	 */
	isolation: isolate;
	overflow: hidden;
	display: flex;
	/*
	 * The export's narrow branch: `row-reverse` with `justify-content: flex-end`,
	 * which put the collage on the left of the copy on a phone. Both are
	 * reproduced, and both are currently inert, because the collage is
	 * absolutely positioned (section 8) and the text column is this panel's only
	 * in-flow child at this breakpoint. They are declared anyway — they are the
	 * recorded values, and they are what a second in-flow child would have to
	 * obey. Section 10 carries the desktop pair, `row` and `space-between`.
	 */
	flex-direction: row-reverse;
	justify-content: flex-end;
	/*
	 * The export records no align-items on the panel, so this is the flex
	 * default stated outright. It is not decoration: stretch is what gives the
	 * stack the panel's full content height at desktop, and slot 2's `top: 50%`
	 * and any bottom-anchored offset resolve against nothing without it. The
	 * previous pass had flex-start here, which is not a recorded value and
	 * collapsed that box to zero.
	 */
	align-items: stretch;
	aspect-ratio: var(--hero-ratio);
	inline-size: 100%;
	min-block-size: var(--hero-min-h);
	padding:
		var(--hero-pad-block)
		var(--hero-pad-inline-end)
		var(--hero-pad-block)
		var(--hero-pad-inline-start);
	border-radius: var(--hero-radius);
	background-color: var(--hero-panel);
}

/*
 * A SLIDE THAT HAS ARTWORK IS NOTHING BUT THAT ARTWORK.
 *
 * Everything above — the padding, the minimum height, the stretch — exists to
 * hold a headline, a sentence and a button inside the panel. Those are part of
 * the image now, and leaving their box behind is what made the slider look
 * like two different components at two widths:
 *
 *   - `min-block-size` is 260px on a phone and 420px on a desktop. Those are
 *     copy heights, and they OVERRODE the aspect ratio: a 2.19:1 picture in a
 *     335x260 box is a 1.29:1 crop, so the phone was showing the middle third
 *     of a banner while the desktop showed all of it.
 *
 *   - the padding reserved a text column inside the panel, so the box was
 *     always larger than the picture it framed and the panel colour showed
 *     around it.
 *
 * Zeroed, the ratio is the only thing deciding the shape and both widths get
 * the same crop of the same file.
 *
 * :has() rather than a class, so the ONE slide that still has no backdrop —
 * the collage fallback, which genuinely does lay out children — keeps the box
 * it needs.
 */
.bedi-hero__slide:has(.bedi-hero__backdrop) {
	min-block-size: 0;
	padding: 0;
}

/*
 * The cover background-image, as a real <img>. Same painting as
 * `background-size: cover`, but it needs no style attribute to carry a
 * client-supplied URL — which is what keeps `style-src 'self'` reachable — and
 * it can be given loading and fetchpriority, which a CSS background cannot.
 */
.bedi-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;

	/*
	 * THE HALF-OPACITY IS THE ORIGINAL'S, NOT A SOFTENING. Container `3ad5669`
	 * set `--overlay-opacity: 0.5` on the background overlay, so the cover image was
	 * always painted at 50% over the #000338 fill rather than instead of it. At
	 * full strength the image swamps the panel and the white headline loses the
	 * dark ground it needs; the navy showing through IS the design.
	 *
	 * This is why the panel keeps its background-color even when an image exists
	 * — the colour is not a fallback here, it is the other half of the mix.
	 */
	/*
	 * FULL STRENGTH, BECAUSE THE WORDS ARE NOW IN THE PICTURE.
	 *
	 * This was 0.5 for a real reason: the headline and the sentence were white
	 * HTML laid over the photograph, and the navy showing through at half
	 * opacity was the dark ground that copy needed to stay legible. That was
	 * the design, not a softening.
	 *
	 * The copy is part of the artwork now. Painting the client's finished
	 * composition at half strength over a navy fill would wash out the very
	 * type it was made to carry — the mix that used to protect the text is the
	 * thing that would ruin it.
	 */
	opacity: 1;
}

/* =========================================================================
 * 6. THE TEXT COLUMN
 *
 * `f2908eb`: 57.898% wide on desktop with a 10px flex gap, full width on mobile
 * with no gap at all. The percentage is the export's, to three decimal places,
 * and is not rounded; the mobile width is Elementor's container default, because
 * the export records no narrow value for it.
 * ====================================================================== */

.bedi-hero__body {
	/*
	 * THE ONE STACKING DECLARATION IN THE COLUMN, AND IT IS A BROKEN-STATE FIX
	 * RATHER THAN A STYLE CHOICE.
	 *
	 * The heading below deliberately overhangs its column by 100px (see the next
	 * rule). The collage is a LATER sibling inside the same stacking context, so
	 * in document order it paints on top — meaning the moment the client's filter
	 * supplies images, the right end of the headline disappears behind a product
	 * photograph. That is the class of damage this pass exists to undo, not a
	 * detail of the original to reproduce: the overhang existed so the headline
	 * could wrap later, not so it could be covered.
	 *
	 * 7, AND NOT THE 1 THE PREVIOUS PASS HAD, because the collage now carries the
	 * z-indexes the export recorded on it and the highest of those is 6 — slot 1
	 * (`6ccbc87`) and slot 3 (`5622ecf`). 1 cleared the images only while they
	 * had no z-index of their own. 7 is one step above the whole collage and
	 * nothing more, so the recorded 6, 5 and 3 go on deciding which photograph
	 * laps over which, which is the part of the export's stacking worth keeping.
	 * It invents no colour, length or font value, it is inert until an image
	 * exists, and it cannot escape the panel because .bedi-hero__slide isolates.
	 */
	position: relative;
	z-index: 7;
	display: flex;
	flex-direction: column;
	/*
	 * flex-start so the CTA is a pill sized to its label rather than a bar
	 * stretched across the column. The heading and the sub-line opt back into
	 * stretch below, because the heading's overhang depends on its box filling
	 * the column first.
	 */
	align-items: flex-start;
	gap: var(--hero-body-gap);
	/*
	 * flex-shrink: 0 is recorded on this column, at every width, and it is what
	 * makes 57.898% a width rather than a starting point: the stack beside it is
	 * 400px, the two together are wider than the panel, and a shrinkable column
	 * would give the percentage away the moment the panel got tight. flex-basis
	 * stays auto so the inline-size below is what is resolved.
	 */
	flex: 0 0 auto;
	inline-size: var(--hero-body-width);
	max-inline-size: 100%;
	min-inline-size: 0;
	padding:
		var(--hero-body-pad-top)
		var(--hero-body-pad-inline)
		0
		var(--hero-body-pad-inline);
}

/*
 * THE NEGATIVE RIGHT MARGIN IS THE ORIGINAL'S, NOT A MISTAKE. Heading `3cad19e`
 * carries `margin: 0 -100px 0 0` so the headline can overhang its own column
 * into the image area and wrap later than the column width would otherwise
 * allow. Reproducing it needs two things: align-self: stretch, so the box is the
 * column's width before the margin extends it, and the panel's overflow: hidden,
 * so the overhang can never reach the document.
 *
 * THE OVERHANG IS -100px AT EVERY WIDTH, and that is a correction. The export
 * records one margin and no narrow override; the previous pass zeroed it below
 * 768px on the grounds that it would otherwise raise a horizontal scrollbar. It
 * cannot. overflow: hidden is on .bedi-hero__slide unconditionally (section 5),
 * so on a phone the overhang is clipped at the panel edge exactly as it is on a
 * desktop. What it buys there is 100px of extra line box before the heading
 * wraps — which is also why the copy carries its own <br>: a single Georgian
 * word longer than the column plus the overhang would be cut by the clip rather
 * than wrapped, and the explicit break is what keeps that from happening.
 *
 * The third value is 0 and is written out rather than tokenised. The export
 * records no bottom margin here; the space under the heading is the column's
 * flex gap — 10px at desktop, 0 narrow — and nothing else.
 */
.bedi-hero__heading {
	align-self: stretch;
	margin: 0 var(--hero-heading-overhang) 0 0;
	color: var(--hero-on-panel);
	font-family: var(--hero-font-display);
	font-size: var(--hero-heading-size);
	font-weight: var(--hero-heading-weight);
	line-height: var(--hero-heading-leading);
	/* Georgian headlines break badly on a ragged last line. */
	text-wrap: balance;
}

/*
 * The export records no sub-line for this container, so nothing renders one by
 * default. It is here for the client's filter, in the kit's base typography —
 * Mulish 14px / 20px — because that is the only body spec the export gives.
 */
.bedi-hero__text {
	align-self: stretch;
	margin: 0;
	max-inline-size: 42ch;
	color: var(--hero-on-panel);
	font-size: var(--hero-text);
	line-height: var(--hero-leading);
}

/* =========================================================================
 * 7. THE CTA
 *
 * A styled heading in the original, a real <a> here, identical treatment: widget
 * `22c138d`, the display face at 24px / weight 500 / line-height 14px, 24px
 * padding, 24px radius. No icon — the original had none.
 *
 * THE FILL IS #0668FC, the kit's --e-global-color-a25b5bd, recorded on the CTA's
 * own widget container. The previous pass had #2D81FF — the kit's
 * --e-global-color-accent, which this panel never uses — on the belief that the
 * fill was unrecorded. The difference is not only fidelity. #FFFFFF on #2D81FF
 * measures about 3.7:1 and fails AA at the 14px mobile label; #FFFFFF on the
 * real #0668FC measures about 4.8:1 and clears AA at the 14px mobile size as
 * well as the 24px desktop one. Reproducing the export closed the contrast gap
 * the previous pass had to flag for the client.
 * ====================================================================== */

.bedi-hero__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--hero-cta-pad-block) var(--hero-cta-pad-inline);
	border-radius: var(--hero-cta-radius);
	background-color: var(--hero-cta-fill);
	color: var(--hero-on-accent);
	font-family: var(--hero-font-display);
	font-size: var(--hero-cta-size);
	font-weight: var(--hero-cta-weight);
	line-height: var(--hero-cta-leading);
	text-decoration: none;
	white-space: nowrap;
	transition:
		transform var(--hero-dur-micro) var(--hero-ease-out),
		filter var(--hero-dur-micro) var(--hero-ease-out);
}

/* Holds the ink against base.css's a:hover / a:active. See section 4. */
.bedi-hero__cta:hover,
.bedi-hero__cta:active,
.bedi-hero__cta:focus-visible {
	color: var(--hero-on-accent);
}

/*
 * The export records no hover state, which means the original had none. A
 * brightness shift invents no colour value and a CTA with no feedback is a
 * regression, so this is the smallest possible addition: filter and transform
 * only, both composited, both neutralised under reduced motion.
 */
@media (hover: hover) {
	.bedi-hero__cta:hover {
		filter: brightness(1.06);
	}
}

.bedi-hero__cta:active {
	transform: scale(0.98);
	filter: brightness(0.96);
}

/*
 * The focus ring cannot be the accent here: an accent ring around an accent pill
 * is invisible. White on #000338 is 19.8:1 and reads from across the room.
 */
.bedi-hero__cta:focus-visible {
	outline: var(--bedi-focus-width, 2px) solid var(--hero-on-panel);
	outline-offset: var(--bedi-focus-offset, 2px);
}

/* =========================================================================
 * 8. THE IMAGE COLLAGE
 *
 * Six product photographs, every one of them absolutely positioned and rotated,
 * exactly as `3ad5669` had them. Slot 1 hangs off the panel; slots 2-6 hang off
 * the 400px stack `9c979fa`. Nothing renders until the client's filter supplies
 * URLs, and a slot whose item is missing or malformed renders nothing at all, so
 * the panel is complete and correct with no assets whatsoever.
 *
 * ABSOLUTE IS NOT A LAYOUT CHOICE HERE, IT IS THE EXPORT. All six are out of
 * flow, which is what lets the recorded heights exceed the panel — the five
 * stack images total 1,613px on desktop against a 420px panel — and what lets
 * seven of the ten stack offsets be negative at desktop. The panel's
 * overflow: hidden
 * (section 5) is the whole of the containment. The previous pass read these as
 * in-flow images and needed a height cap and an invented gutter to hold them in;
 * an out-of-flow image cannot push a parent taller, so there is nothing left for
 * either to defend against and both are gone.
 *
 * THE SLOTS ARE CLASSES, NOT nth-child, AND MUST STAY CLASSES. The filter skips
 * a malformed item without rendering a placeholder in its place, so the fourth
 * <img> in the stack is not necessarily slot 4 — an index-based selector would
 * hand slot 4's 600px height and its -287px offset to whichever image happened
 * to survive.
 * ====================================================================== */

/*
 * THE STACK — Elementor `9c979fa`: 400px wide, padding 0, a flex column with
 * justify-content: center.
 *
 * `position` is the load-bearing line in this rule. Slots 2-6 resolve their
 * offsets against THIS box; with no positioning context here all ten of those
 * recorded numbers would fall through to .bedi-hero__slide and land somewhere
 * else entirely. The box has no in-flow children of its own — all five are
 * absolute — so the direction, the centring and the width are the export's
 * values doing nothing except deciding where that context starts.
 *
 * NO max-inline-size, deliberately. A clamp to the panel would silently relocate
 * all ten offsets on any viewport narrower than the column, and the export's
 * answer to a column wider than its panel is to clip it, not to shrink it.
 *
 * AT THE NARROW BREAKPOINT THE BOX IS THE PANEL, and this is the one place the
 * section departs from a recorded value. The export gives the stack 400px at
 * every width, but its narrow offsets cannot have been measured against a 400px
 * column: slot 2 sits at `top: 50%` and slot 6 at `top: 244px`, which need an
 * origin around 360px tall — the panel's own narrow min-height — and a box whose
 * every child is absolute is 0 tall. Pinning it to the panel makes all ten
 * narrow offsets resolve against the box they were written for, and it also
 * keeps a 400px column from being laid out beside a full-width text column
 * inside a ~300px panel, which is what the recorded width asks for on a phone.
 * Section 10 puts it back in flow at 400px, where the export's row makes sense.
 */
.bedi-hero__stack {
	position: absolute;
	inset: 0;
	/*
	 * flex-shrink: 0 is for the desktop row: the text column is 57.898% and does
	 * not shrink either, so column plus stack is wider than the panel and a
	 * shrinkable stack would absorb the difference by pulling every offset
	 * inwards. Nothing shrinks; the panel clips.
	 */
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	inline-size: var(--hero-stack-width);
	min-inline-size: 0;
	padding: 0;
}

/*
 * ONE SHAPE FOR ALL SIX, then one rule per slot for the numbers.
 *
 * block-size wins over base.css's `img { height: auto }` on specificity, (0,1,0)
 * against (0,0,1), so each slot keeps its recorded height while the width
 * follows the photograph's own aspect ratio.
 *
 * max-inline-size: 100% is not ours to drop: it is the clamp Elementor's own
 * frontend stylesheet put on every image in this collage, so an image wider than
 * its containing block was letter-boxed or cropped on the original too. It is
 * restated here rather than inherited because base.css's `img` rule is (0,0,1)
 * and this one has to hold next to the block-size above it.
 *
 * object-fit: contain is the default for the four slots the export records no
 * fit for: these are product photographs, and cropping a laptop in half to fill
 * a box reproduces nothing. Slots 4 and 6 record `cover` and get it below.
 *
 * The transform is rotateZ and nothing else, at the recorded angle. It is static
 * layout rather than motion, which is why section 12 leaves it alone.
 */
.bedi-hero__art {
	position: absolute;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	object-position: center;
}

/*
 * The JS/CSS seam, and the only state assets/js/hero.js writes.
 *
 * Every image URL in this panel comes from a client-controlled filter, so one of
 * them will eventually 404 — a typo, a deleted media item, an upload lost in an
 * FTP move. Without this rule the result is the browser's broken-image glyph
 * drawn at the extracted height across the middle of the homepage hero. With it
 * the failed image leaves the layout and the panel falls back to exactly how it
 * looks with no images at all, which is a complete state rather than a degraded
 * one: the default panel has none.
 *
 * It covers the cover image as well as the collage, which is why it lives here
 * once instead of in section 5 and again in section 8.
 *
 * THE COLLAGE'S CLASS IS .bedi-hero__art. It was .bedi-hero__image before this
 * pass, when the six were an in-flow column rather than the export's six
 * absolutely-positioned slots. PROBED_SELECTOR in hero.js names the same class,
 * so the two are changed together or the probe silently stops finding anything.
 *
 * THE RAIL ICON IS IN THE SELECTOR AND IS DRIVEN, but by a narrower path than
 * the other two, and the difference is worth knowing before anyone "tidies" it.
 * hero.js carries the icons in WATCHED_SELECTOR, which attaches an error listener
 * and stops there; the backdrop and the collage are in PROBED_SELECTOR, which
 * additionally runs a synchronous zero-naturalWidth test for an image that had
 * already failed before that footer script ran. The icons are held out of that
 * test on purpose: they are SVGs with no intrinsic size, naturalWidth is 0 for
 * such a file on some engines even when it loaded perfectly, and probing them
 * would hide all sixteen icons rather than the one that broke. An icon URL comes
 * from a real attachment row rather than a hand-typed filter, so a 404 is rare to
 * begin with, and the icons are loading="lazy", so a real failure almost always
 * arrives as an `error` event the listener does catch.
 *
 * It costs the row nothing either way, because .bedi-hero__rail-icon keeps its
 * box whether or not the <img> inside it is displayed: a marked icon leaves the
 * row exactly as tall and exactly as aligned as one of the 71 categories that has
 * no icon to begin with.
 */
.bedi-hero__backdrop[data-bedi-missing],
.bedi-hero__art[data-bedi-missing],
.bedi-hero__rail-icon-img[data-bedi-missing] {
	display: none;
}

/*
 * SLOT 1 — `6ccbc87`, the PS5 controller, and the only slot that is a direct
 * child of the PANEL rather than of the stack, so its two offsets resolve
 * against the panel's padding box: 204px in from the right edge and flush with
 * the bottom at desktop, into the bottom-right corner 84px up on a phone.
 *
 * The INLINE offset is anchored logically rather than as `right:`, here and on
 * all six slots. The export emits that axis twice, once as `right:` and once as
 * `left:`, so one build can serve both writing directions; a logical anchor is
 * the same statement made once. The block axis is emitted once and is written
 * once either way.
 */
.bedi-hero__art--1 {
	inset-inline-end: var(--hero-art-1-inline-end);
	inset-block-end: var(--hero-art-1-block-end);
	z-index: var(--hero-art-1-z);
	block-size: var(--hero-img-1);
	transform: rotateZ(var(--hero-art-1-rot));
}

/*
 * SLOT 2 — `b634a48`, the laptop. The only slot with a recorded WIDTH, and it is
 * recorded at the narrow breakpoint only, where the image spans the whole
 * overlay at half its height; section 10 returns the width to auto.
 */
.bedi-hero__art--2 {
	inset-inline-start: var(--hero-art-2-inline-start);
	inset-block-start: var(--hero-art-2-block-start);
	z-index: var(--hero-art-2-z);
	inline-size: var(--hero-art-2-width);
	block-size: var(--hero-img-2);
	transform: rotateZ(var(--hero-art-2-rot));
}

/*
 * SLOT 3 — `5622ecf`, file-12. rotateZ(270deg) is the export's; a quarter turn
 * written the long way round is still a quarter turn, and normalising it to
 * -90deg would be an edit to the record for no gain.
 *
 * Its z-index is recorded at the narrow breakpoint only, where 6 puts it over
 * every other photograph; section 10 returns it to auto rather than inventing a
 * desktop value the export does not have.
 */
.bedi-hero__art--3 {
	inset-inline-end: var(--hero-art-3-inline-end);
	inset-block-start: var(--hero-art-3-block-start);
	z-index: var(--hero-art-3-z);
	block-size: var(--hero-img-3);
	transform: rotateZ(var(--hero-art-3-rot));
}

/*
 * SLOT 4 — `89cc36d`, 5.png. 600px tall at desktop against a 420px panel, offset
 * -287px and -250px: this one is mostly outside the panel by design and the clip
 * is what shapes it. `object-fit: cover` is recorded on it, and recorded at
 * desktop with no narrow override, so it holds at both breakpoints.
 */
.bedi-hero__art--4 {
	inset-inline-start: var(--hero-art-4-inline-start);
	inset-block-start: var(--hero-art-4-block-start);
	block-size: var(--hero-img-4);
	object-fit: cover;
	transform: rotateZ(var(--hero-art-4-rot));
}

/*
 * SLOT 5 — `b4d780d`, the SSD. The slot that proves how the other rotations
 * read: it records rotateZ(47deg) at desktop and an explicit rotateZ(0deg) at
 * the narrow breakpoint, which would be a pointless thing to store unless a
 * desktop angle otherwise carried down to narrow. Its z-index is narrow-only,
 * like slot 3's.
 */
.bedi-hero__art--5 {
	inset-inline-start: var(--hero-art-5-inline-start);
	inset-block-start: var(--hero-art-5-block-start);
	z-index: var(--hero-art-5-z);
	block-size: var(--hero-img-5);
	transform: rotateZ(var(--hero-art-5-rot));
}

/*
 * SLOT 6 — `0e98ca6`, 3.png. Width 100% of the stack with `object-fit: cover`,
 * both recorded, so this is the one slot whose box is set in both axes and whose
 * photograph is therefore cropped to fill it rather than fitted inside it.
 */
.bedi-hero__art--6 {
	inset-inline-end: var(--hero-art-6-inline-end);
	inset-block-start: var(--hero-art-6-block-start);
	inline-size: var(--hero-art-6-width);
	block-size: var(--hero-img-6);
	object-fit: cover;
	transform: rotateZ(var(--hero-art-6-rot));
}

/* =========================================================================
 * 9. MOBILE AND TABLET — THE STATIC CARD
 *
 * Below 64em there is no reliable pointer, so the rail is simply the static card
 * of section 4: the whole parent list, no clip, no fade and no side fly-outs —
 * children are reached through the parent's archive, exactly where the plugin's
 * hover-only fly-out left a touch visitor. Nothing needs a query here because
 * section 4 is already this shape; the old horizontal chip-row transform is gone
 * rather than unwound. The floating behaviour is added at 64em in section 4b.
 * ====================================================================== */

/* =========================================================================
 * 10. 768px AND UP — THE DESKTOP VALUES
 *
 * Everything in this block is the export's desktop column: the panel grows to
 * 420px with its 36/36/36/70 padding and becomes a `row` with `space-between`,
 * the text column takes its 57.898% and its 10px gap, the heading goes to 42px,
 * the CTA goes to 24px with 24px padding and a 24px radius, and the six collage
 * slots take their desktop heights, offsets and angles.
 *
 * 48em is 768px, which is Elementor's tablet floor: the original's tablet view
 * inherited the desktop settings, so this one breakpoint is the whole switch.
 *
 * 420px IS THE CONTAINER'S OWN `--min-height`, read from
 * uploads/elementor/css/post-24600.css on the live site. An earlier pass had
 * 500px here, which was inferred from the tallest image widget inside the panel
 * rather than from the panel. The difference is not cosmetic: min-height is a
 * floor, so with the real 420px the panel still grows to whatever the collage
 * needs — exactly as the original did — whereas 500px forced 80px of dead navy
 * under the collage on every viewport where the images were shorter. Do not
 * raise it to match a screenshot; measure the container, not its contents.
 * ====================================================================== */

/*
 * PHONES GET A 4:3 SLIDE. At 335px wide that is 251px tall instead of the old
 * 360px slab — the hero introduces the shop rather than filling the screen,
 * and the first row of products is reachable without a scroll.
 */
@media (max-width: 47.9375em) {
	.bedi-hero,
	.bedi-main--home {
		/*
		 * THE SAME PROPORTION AS THE DESKTOP SLIDE.
		 *
		 * This was 4/3 back when the slide held a headline, a sentence and a
		 * button that all needed vertical room on a narrow screen. The artwork
		 * carries those now, so the slide is a picture — and a picture supplied
		 * at 920x420 cropped into a 4:3 box loses a third of its width, which
		 * with type baked in means losing words.
		 *
		 * One ratio, one crop, one file the client has to produce.
		 */
		--hero-ratio: 920 / 420;
	}

	/*
	 * ROOM RESERVED FOR THE PAGER.
	 *
	 * The slide's copy is bottom-anchored and the pager is absolutely
	 * positioned over the slide's lower edge — fine at 360px tall, a collision
	 * at 260px: measured, the call-to-action occupied y 286-324 and the pager
	 * 298-324, so the dots, the pause button and the "01 / 03" counter were
	 * sitting on top of the button.
	 *
	 * Padding rather than moving the pager out of the slide, because the
	 * overlay is the design — the pager belongs on the image. Reserving 44px
	 * (26px of control plus an 18px breath) shrinks the content box instead, so
	 * the button rises clear and the shape stays 4:3.
	 */
	.bedi-hero__slide {
		padding-block-end: 44px;
	}

	/*
	 * THE FORCED LINE BREAK GOES ON A PHONE.
	 *
	 * The headings carry a hard <br> to control where they wrap on a wide
	 * slide. At 335px the heading already wraps on its own, so the <br> only
	 * adds an empty line box — measured at 35px, on a slide whose whole content
	 * budget is 216px. Removing it takes the content from 244px to 209px, which
	 * is what lets the 4:3 shape hold without the copy spilling onto the pager.
	 *
	 * Hidden rather than removed from the markup: the break is correct at the
	 * width it was written for, and this is a phone-only problem.
	 */
	.bedi-hero__body br {
		display: none;
	}

	/*
	 * THE CATEGORY RAIL GOES, ON PHONES ONLY.
	 *
	 * Seventeen categories as a vertical list is the first thing under the
	 * hero and roughly a screen and a half of it, so a visitor arriving on the
	 * front page met a menu rather than a shop. On a phone the same categories
	 * are one tap away in the bottom bar's კატეგორიები and in the header's
	 * panel — two entry points that did not exist when this rail was designed
	 * as the desktop's left column.
	 */
	.bedi-hero__rail {
		display: none;
	}

	/*
	 * AND THE 90px OF EMPTY SPACE ABOVE THE HEADLINE GOES WITH IT.
	 *
	 * --hero-body-pad-top is 90px in the base cascade (hero.css:181) and 0 from
	 * 48em up — so the value written for a 360px-tall desktop slide was landing
	 * on the phone, where it is 35% of a 260px box spent on nothing. Measured:
	 * 90 padding + 56 heading + 40 text + 38 button = 224 in a 216px box.
	 *
	 * 24px keeps the copy off the top edge without reserving a third of the
	 * slide for it.
	 */
	.bedi-hero,
	.bedi-main--home {
		--hero-body-pad-top: 24px;
	}
}

@media (min-width: 48em) {
	.bedi-hero,
	.bedi-main--home {
		/* The shape it already had, now stated rather than emergent. */
		--hero-ratio: 920 / 420;
		--hero-min-h: 420px;
		--hero-pad-block: 36px;
		--hero-pad-inline-start: 70px;
		--hero-pad-inline-end: 36px;

		/* The 40px step is --bedi-gutter's own, at 48em, and this override is
		   gone with the duplication it created. The declaration is kept as this
		   comment so the next reader looking for "where does the hero widen"
		   finds the answer rather than a hole. */

		--hero-body-width: 57.898%;
		--hero-body-gap: 10px;
		--hero-body-pad-top: 0px;
		--hero-body-pad-inline: 0px;

		--hero-heading-size: 42px;
		/*
		 * The export records a line-height for the mobile heading (1em) and none
		 * for the desktop one, which means Elementor fell through to the theme's
		 * own value. The conservative neutral is this theme's tight leading; it is
		 * not an extracted number and is called out as such.
		 */
		--hero-heading-leading: var(--bedi-leading-tight, 1.2);

		--hero-cta-size: 24px;
		--hero-cta-pad-block: 24px;
		--hero-cta-pad-inline: 24px;
		--hero-cta-radius: 24px;

		--hero-img-1: 200px;
		--hero-img-2: 220px;
		--hero-img-3: 160px;
		--hero-img-4: 600px;
		--hero-img-5: 280px;
		--hero-img-6: 353px;
		--hero-stack-width: 400px;

		/* The collage's desktop column. Slots 2, 3, 4 and 6 keep the rotation
		   declared in section 1, because the export records a narrow override
		   only for slots 1 and 5; slots 3 and 5 record their z-index at the
		   narrow breakpoint only, so desktop returns them to auto rather than
		   inventing a number the export does not have. */
		--hero-art-1-inline-end: 204px;
		--hero-art-1-block-end: 0px;
		--hero-art-1-rot: 22deg;

		--hero-art-2-inline-start: -42px;
		--hero-art-2-block-start: 54px;
		--hero-art-2-width: auto;

		--hero-art-3-inline-end: -40px;
		--hero-art-3-block-start: -40px;
		--hero-art-3-z: auto;

		--hero-art-4-inline-start: -287px;
		--hero-art-4-block-start: -250px;

		--hero-art-5-inline-start: -144px;
		--hero-art-5-block-start: 239px;
		--hero-art-5-rot: 47deg;
		--hero-art-5-z: auto;

		--hero-art-6-inline-end: -160px;
		--hero-art-6-block-start: 159px;
	}

	.bedi-hero__inner {
		gap: var(--bedi-space-lg);
	}

	/*
	 * The panel becomes the export's row: copy on the left, the 400px stack on
	 * the right, `justify-content: space-between` as recorded.
	 *
	 * No gap, deliberately. The export's 10px gap belongs to the TEXT COLUMN's
	 * own flex container, between the heading and the CTA; it records nothing
	 * between the column and the stack. space-between has no free space to hand
	 * out here in any case: 57.898% of the panel plus a 400px stack is wider than
	 * the panel at every width this breakpoint covers, which is why the collage
	 * spills past the right edge and is clipped. The spill is the export's — seven
	 * of the ten stack offsets are negative here and slot 4 is 600px tall.
	 */
	.bedi-hero__slide {
		flex-direction: row;
		justify-content: space-between;
	}

	/*
	 * Back in flow at its recorded 400px, as the second item of that row.
	 *
	 * `inset: auto` is hygiene rather than a fix — the narrow branch's `inset: 0`
	 * happens to be a no-op once the box is relatively positioned — but a stale
	 * inset on an element whose `position` changes per breakpoint is how the next
	 * edit to either one becomes a bug.
	 */
	.bedi-hero__stack {
		position: relative;
		inset: auto;
	}
}

/*
 * 48em-63.99em (tablet) needs no rail rule of its own. The old two-column grid
 * belonged to the flat rail; the faithful card is a single column at every width
 * below 64em, so the static card in section 4 already covers this range.
 */

/* =========================================================================
 * 11. DESKTOP — 1024px and up
 *
 * The original's row, rebuilt: rail left, panel right, both stretched to the
 * same height by the grid instead of by a hand-typed pixel height that drifted
 * the moment a category name wrapped.
 * ====================================================================== */

@media (min-width: 64em) {
	.bedi-hero__inner {
		grid-template-columns: var(--hero-rail-width) minmax(0, 1fr);

		/*
		 * 20px, and it is DERIVED, not chosen. The export gives the rail
		 * `width: 340px` and the panel wrapper `width: calc(100% - 360px)`;
		 * 360 - 340 = 20, so the 20px the panel gives up is the gutter. That is
		 * the only place the number exists — Elementor never wrote a gap here.
		 * The previous --bedi-space-md resolved to 24px and stole 4px from the
		 * panel on every desktop view.
		 */
		gap: 20px;
	}

	.bedi-hero__rail {
		order: 1;
	}

	.bedi-hero__slider {
		order: 2;
	}
}

/* =========================================================================
 * 12. REDUCED MOTION
 *
 * base.css clamps every duration in the theme. What a duration clamp cannot
 * reach is a resting transform, so the three this file declares are undone here:
 * the feedback stays as a colour or a brightness change, the movement goes.
 *
 * THE COLLAGE'S SIX ROTATIONS ARE NOT IN THIS BLOCK AND MUST NOT BE ADDED TO IT.
 * A rotateZ that never changes is layout, not animation: it is the angle a
 * photograph is pinned at, in the same way the offsets beside it are the place it
 * is pinned to. Undoing them would calm nothing down — nothing moves — it would
 * only straighten six images the export deliberately tilted, and it would do it
 * for the visitors who asked for less movement rather than a different page. The
 * transforms below all rest at none and are reached by an interaction. Those are
 * the movement.
 *
 * There is no autoplay left to guard and no browser-animated scroll inside the
 * panel, because the carousel is gone.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	/*
	 * The rail's bounce and the fly-out's slide are decorative and stop. The card's
	 * expand is left to happen INSTANTLY rather than removed, because it reveals the
	 * rest of the category list — content, not decoration — so a reduced-motion
	 * visitor still gets the full menu, just without the 0.5s travel.
	 */
	.bedi-hero__rail-more-arrow {
		animation: none;
	}

	.bedi-hero__rail-card,
	.bedi-hero__flyout {
		transition: none;
	}

	.bedi-hero__flyout,
	.bedi-hero__rail-item:hover > .bedi-hero__flyout,
	.bedi-hero__rail-item:focus-within > .bedi-hero__flyout {
		transform: none;
	}

	.bedi-hero__cta:active {
		transform: none;
	}

	/*
	 * The sibling-blur is undone entirely, not just made instant: a blur that
	 * fades or clears can be disorienting for the visitors this query serves, so
	 * the rows simply stay sharp and fully opaque.
	 */
	.bedi-hero__rail-item {
		transition: none;
	}

	.bedi-hero__rail-list:hover .bedi-hero__rail-item:not(:hover) {
		filter: none;
		opacity: 1;
	}
}

/* =========================================================================
 * 13. PRINT
 *
 * A printed homepage is a list of categories and one headline. The navy slab,
 * the cover image and the collage are ink nobody asked for.
 * ====================================================================== */

@media print {
	/*
	 * EVERY colour in this file resolves through one of the section 1 aliases, so
	 * re-pointing the aliases is the entire fix and no component rule has to be
	 * restated. Without this the block below would repaint only the panel's own
	 * `color`, which .bedi-hero__heading, .bedi-hero__text, .bedi-hero__rail-title
	 * and .bedi-hero__rail-link all override with their own declarations — so the
	 * printed page would be white ink on white paper while appearing to have a
	 * print stylesheet.
	 *
	 * --hero-shadow is re-pointed here too, to none. On paper a drop shadow is a
	 * grey haze around a card and carries no information at all, and the rail's
	 * hairline already draws the edge the shadow existed to lift.
	 *
	 * The rail icons are deliberately NOT hidden. They are 18px glyphs, they cost
	 * almost no ink, and on a page reduced to black on white they are the one
	 * thing left that distinguishes the rows at a glance.
	 */
	.bedi-hero,
	.bedi-main--home {
		--hero-shadow: none;
		--hero-page: transparent;
		--hero-panel: transparent;
		--hero-surface: transparent;
		--hero-surface-2: transparent;
		--hero-ink: var(--bedi-print-ink, #000);
		--hero-ink-muted: var(--bedi-print-ink, #000);
		--hero-on-panel: var(--bedi-print-ink, #000);
		--hero-on-accent: var(--bedi-print-ink, #000);
		--hero-accent: var(--bedi-print-ink, #000);
		--hero-hairline: var(--bedi-print-ink, #000);
	}

	/*
	 * Print: the slide collapses and the track prints as a stack. A scroll
	 * container on paper shows one slide and silently loses the other two, so
	 * the snap behaviour is switched off rather than left to clip.
	 *
	 * SCOPED TO .bedi-hero FOR A MEASURED REASON. ui.css owns the slider's
	 * layout — `.bedi-hero__track { display: grid; scroll-snap-type: x
	 * mandatory }` at (0,1,0) — and it is enqueued LAST of all the theme's
	 * stylesheets by design. A media query adds no specificity, so this block
	 * written at (0,1,0) lost to an unconditional rule further down the
	 * cascade: the print styles parsed, matched, and were overwritten, and the
	 * hero printed as a one-slide scroll container exactly as if none of this
	 * existed.
	 *
	 * (0,2,0) wins on specificity rather than on order, so it survives ui.css
	 * moving.
	 */
	.bedi-hero .bedi-hero__track,
	.bedi-main--home .bedi-hero__track {
		display: block;
		overflow: visible;
		scroll-snap-type: none;
	}

	.bedi-hero .bedi-hero__slide,
	.bedi-main--home .bedi-hero__slide {
		aspect-ratio: auto;
		min-block-size: 0;
		padding: 0;
		scroll-snap-align: none;
	}

	.bedi-hero .bedi-hero__controls,
	.bedi-hero .bedi-hero__pager,
	.bedi-main--home .bedi-hero__controls,
	.bedi-main--home .bedi-hero__pager {
		display: none;
	}

	/* A filled accent pill prints as a solid slab with its label inside it. */
	.bedi-hero__cta {
		background-color: transparent;
		border: var(--bedi-border-width, 1px) solid var(--bedi-print-ink, #000);
	}

	/*
	 * The stack goes with the photographs it holds. It paints nothing itself, but
	 * left in place it is still a 400px flex item keeping the copy out of half
	 * the printed panel.
	 */
	.bedi-hero__backdrop,
	.bedi-hero__art,
	.bedi-hero__stack {
		display: none;
	}
}

/* =========================================================================
 * THE SLIDE IS A LINK
 *
 * The button used to be an <a> inside the slide. It is drawn into the artwork
 * now, so the slide itself carries the href — which is also the bigger target,
 * and on a phone that matters more than it does anywhere else.
 * ====================================================================== */

a.bedi-hero__slide {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

/*
 * The focus ring goes INSIDE the slide. An outline on a full-bleed element
 * whose neighbours are flush against it is drawn half underneath them; inset
 * keeps the whole ring on the slide it belongs to.
 */
a.bedi-hero__slide:focus-visible {
	outline: var(--bedi-focus-width) solid #fff;
	outline-offset: calc(var(--bedi-focus-width) * -3);
}

/*
 * A whole-slide link has no hover affordance of its own — there is no
 * underline to thicken and no button to tint — so the artwork lifts very
 * slightly instead. Enough to say "this does something", not enough to look
 * like the image is loose.
 */
@media (hover: hover) {
	a.bedi-hero__slide .bedi-hero__backdrop {
		transition: transform var(--bedi-dur-lg) var(--bedi-ease-out);
	}

	a.bedi-hero__slide:hover .bedi-hero__backdrop {
		transform: scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	a.bedi-hero__slide .bedi-hero__backdrop,
	a.bedi-hero__slide:hover .bedi-hero__backdrop {
		transform: none;
		transition: none;
	}
}