/**
 * header.css — utility bar, sticky white bar, category mega panel, bottom sheet.
 *
 * THE IDENTITY THIS FILE REPRODUCES
 *
 * Every colour and every metric below was read out of the original bedishop.ge
 * install. Nothing here is a taste decision and nothing here is an improvement
 * on the original. A previous pass rebuilt this chrome as dark glassmorphism;
 * the client reversed that and asked for the original visual identity back,
 * exactly, with only the malware-caused structural bugs fixed. The header had no
 * structural bugs, so this file is a pure reproduction.
 *
 * WHICH ORIGINAL, THOUGH — POST 2615, NOT TEMPLATE 4148
 *
 * The geometry in sections 3 to 10 comes from post **2615**, the container-based
 * "Header Entire Site" the shop was actually serving, by way of
 * _analysis/EXACT-header-hero-spec.md — extracted on 2026-09-25 from that post's
 * own _elementor_data and from uploads/elementor/css/post-2615.css.
 *
 * It used to come from template 4148, and that is the whole of why the client
 * reported the sizes as messed up. 4148 is a STALE section/column header, 1440px
 * wide, built out of jet-logo / jet-mega-menu widgets; 2615 is the live one,
 * BOXED AT 1280px, carrying the ucaddon_ajax_search row. Reproducing 4148
 * faithfully still produces a header the shop stopped using.
 *
 * Every number the spec pass changed cites the Elementor element id it came from
 * in a comment beside it, so the next reader can re-derive it from the spec
 * instead of trusting this sentence.
 *
 * 4148 and the global kit (post 9378) remain the source for what the spec does
 * NOT record — the icon inks, the hairlines, the count badge, the shadow, the
 * panel surface — and those keep their frequency counts in section 1. Where the
 * two disagree on a value the spec carries, THE SPEC WINS.
 *
 * WHY THE PALETTE IS DECLARED HERE AND NOT READ BARE FROM base.css
 *
 * base.css is the token layer and it is owned by another module. When this file
 * was written its :root still held the dark palette from the reversed pass, so
 * reading those names bare painted the header dark. THAT HAS SINCE BEEN FIXED:
 * base.css's :root now carries the light kit — --bedi-bg #F2F5F9,
 * --bedi-surface #FFFFFF, --bedi-ink #252531, --bedi-accent #2D81FF,
 * --bedi-accent-2 #0668FC, --bedi-ink-muted #777777 — and the dark palette
 * survives only behind :root[data-theme="dark"].
 *
 * Section 1 is kept anyway, and the reason is now the escape hatch rather than
 * the default. Every value in it is byte-identical to the light token it
 * shadows, so nothing changes on a normal request. What it does change is that
 * <html data-theme="dark"> no longer reaches this chrome: the page canvas goes
 * dark and the header, the search field and the cart drawer stay white. That is
 * deliberate — the client reversed the dark pass outright, and a header that
 * reverts to glass on an attribute is the thing that was rejected. It is
 * recorded here rather than assumed, because it IS a divergence from base.css's
 * documented dark-theme support and the next agent should not discover it live.
 *
 * (The original reason it could not simply read base.css also still stands as a
 * rule of thumb: a var() fallback would not have rescued it, because a fallback
 * is used only when the custom property is UNDECLARED, and all of those names
 * are declared.)
 *
 * Consume the names in section 1 — never a raw hex further down this file. To
 * put the header back under global theme control, re-point section 1 at the
 * base.css tokens in one edit and accept the dark variant with it.
 *
 * The same palette is restated at the top of search.css and cart.css. That is
 * deliberate duplication, not drift: search.js reparents its phone overlay to
 * <body> and cart.js reparents the whole drawer to <body>, so neither element is
 * a descendant of .bedi-header at the moment it is painted and neither could
 * inherit a palette scoped to it. Change one, change all three.
 *
 * DEPENDENCIES
 *   base.css    the space, radius, type, focus and z-index scales. Colour comes
 *               from section 1 of this file for the reason above.
 *   motion.css  the motion tokens only. This file deliberately uses NEITHER
 *               .bedi-glass NOR .bedi-glow, and the header markup no longer
 *               carries either class. motion.css stays on disk because
 *               .bedi-reveal, .bedi-press, .bedi-lift and the reduced-motion
 *               guard are still used by other modules.
 *   layout.css  loaded first through the dependency chain. It still carries the
 *               previous header rules (.bedi-header gets a background, a bottom
 *               border and position: relative there) and .bedi-container's
 *               1200px cap, so this file re-declares every one of those. Same
 *               specificity or higher, later file. Do not reorder them.
 *
 * The .bedi-header root class is kept from the old markup on purpose: the print
 * block in layout.css hides .bedi-header, and renaming the root would have the
 * whole chrome print on every invoice.
 *
 * MOBILE FIRST, AND FOR A CONCRETE REASON
 *   The phone presentation is the BASE — no media query — and the desktop one is
 *   a single @media (min-width: 48em) override per component. Writing it as a
 *   pair of max-width/min-width blocks leaves a real hole: at a viewport of
 *   767.5px, which Windows browsers produce constantly at 110% and 125% zoom,
 *   `max-width: 47.9375em` no longer matches and `min-width: 48em` does not yet,
 *   so neither presentation applies and the panel renders as a static block in
 *   the page. There is no width that can miss the base.
 *
 *   assets/js/header.js mirrors this exactly: it evaluates the SAME
 *   (min-width: 48em) query and treats everything else as a phone, so the drag
 *   gesture is never enabled on a mega panel and never missing from a sheet.
 *
 * @package Bedi\Theme
 */

/* =========================================================================
 * 1. THE HEADER PALETTE — the extracted values, stated once
 *
 * Source, with the frequency each colour appeared in template 4148 where the
 * extraction reported one:
 *
 *   #FFFFFF  (x12)  the panel surface, the logo lockup's ink, the pill's ink.
 *                   It is NO LONGER the main bar's fill — see the band note
 *                   below.
 *   #252531  (x15)  primary text. Also the kit's "secondary (dark)".
 *   #777777  (x15)  muted text, input placeholder, idle icon.
 *   #393939  (x3)   secondary text.
 *   #E5E5E5  (x2)   borders and the search field outline.
 *   #FFEF00  (x1)   badge highlight — the cart / wishlist count chip.
 *   #F50000  (x1)   alert badge.
 *   rgba(41, 43, 46, 0.1)  the soft shadow. The original bar was flat.
 *   rgba(0, 0, 0, 0.5)     the overlay scrim.
 *
 * and from the global kit (post 9378):
 *
 *   #2D81FF  accent / primary blue      #0668FC  alt blue
 *   #F2F5F9  page background            #F9F9F9  off-white
 *   #D5D5DB  light grey                 #D50045  alert red
 *
 * THE TWO BANDS, WHICH ARE THE SPEC'S AND NOT 4148's.
 *
 * The live header is two stacked bands, and neither of them is white:
 *
 *   #101A41  the utility strip, container ddd9bb6. A dark navy, nowhere in
 *            4148's palette and nowhere in the kit's named tokens — it is set
 *            directly on that container.
 *   #EAF0FA  the main bar, container 05d08ee. The kit's
 *            --e-global-color-19a666e, which is also the page background the
 *            hero band sits on, so the bar and the page are one continuous
 *            surface and the 1px rule between them is the only seam.
 *
 * This is the change with the widest blast radius in the spec pass, because six
 * other values in this file were chosen against a WHITE bar and had to be
 * re-checked rather than left: the utility ink (was #777777 at 3.75:1 on the
 * navy — now #FFFFFF at 16.85:1), the icon-button hover fill (was #F2F5F9,
 * invisible on #EAF0FA — now the chip token below), the cart badge's separating
 * ring (was #FFFFFF, a halo on a blue-grey bar — now the band itself), and the
 * three focus ratios re-measured in section 16. Each one is recorded where it
 * happens.
 *
 * --bedi-hdr-ink-on-accent is #FFFFFF. It is named rather than reused so that
 * the pairing is explicit: the blue fill and the ink that goes on it travel
 * together, because picking a fill and guessing the ink is how a button ends up
 * with text nobody can read.
 *
 * WHERE #FFFFFF ON #2D81FF STILL APPLIES, AND WHERE IT NO LONGER DOES.
 *
 * #FFFFFF on #2D81FF measures 3.69:1. That clears the 3:1 WCAG 1.4.11 asks of a
 * non-text control and of large text, but it is UNDER the 4.5:1 AA wants for
 * normal-size text. That USED to bite this header, because the "კატეგორიები"
 * pill's label is 13px / 600 (heading 8b96a59), which counts as normal size, and
 * that pill was filled #2D81FF.
 *
 * IT NO LONGER DOES, and the spec confirms what the screenshot suggested:
 * container aef774c is filled --e-global-color-secondary #252531 with #FFFFFF
 * ink. That measures 15.13:1 and passes AA outright. The 1:1 reproduction and the
 * contrast number happen to agree here, which is the good case and is why nothing
 * had to be traded.
 *
 * The 3.69:1 ratio still governs two controls, and on both of them it is the
 * right bar rather than a compromise, because both are ICON-only and the
 * non-text threshold is 3:1:
 *
 *   .bedi-action--cart   the cart's filled blue disc, added in section 8. Its
 *                        glyph is #FFFFFF on #2D81FF and it carries no text.
 *   .bedi-search__go     the search field's submit glyph, in search.css section 5.
 *
 * The cart DRAWER's checkout button is text on #2D81FF and is still short of
 * 4.5:1, but that control lives in assets/css/cart.css and the call belongs to
 * that module, not to this one. The one-line fix there is unchanged: the kit's
 * own alt blue #0668FC carries #FFFFFF at 4.78:1.
 * ====================================================================== */

.bedi-header,
.bedi-panel,
.bedi-panel-backdrop {
	--bedi-hdr-surface: #ffffff;
	--bedi-hdr-surface-2: #f9f9f9;
	--bedi-hdr-wash: #f2f5f9;

	/*
	 * THE TWO BANDS. Spec HEADER section: ddd9bb6 background #101A41, 05d08ee
	 * background #EAF0FA (--e-global-color-19a666e). --bedi-hdr-surface is kept
	 * as #FFFFFF because it is still the PANEL's fill and still the ink on the
	 * navy strip; it simply no longer paints a bar.
	 *
	 * --bedi-hdr-band IS #EAF0FA, 05d08ee's OWN VALUE, AND IT CAME BACK.
	 *
	 * It was briefly #FFFFFF, on the argument that #EAF0FA against a white page
	 * is a 1.04:1 edge and therefore a smudge rather than a band. That argument
	 * was wrong about WHY the bar looked unfinished: the culprit was the 1px
	 * near-black rule under it (section 6), which drew a hard line the tint then
	 * had to compete with. With the rule gone the tint is the only separation
	 * and it reads as exactly what the kit intended — a bar that is faintly, and
	 * deliberately, not the page.
	 *
	 * --bedi-hdr-band-glass is section 6b's scrolled state, and it is the SAME
	 * blue at 72% rather than white: a white glass over a blue bar turns the
	 * band grey the moment the page scrolls, which is a colour change nobody
	 * asked for happening on an event nobody associates with one.
	 */
	--bedi-hdr-band: #eaf0fa;
	--bedi-hdr-band-glass: rgba(234, 240, 250, 0.72);
	--bedi-hdr-utility-band: #101a41;
	--bedi-hdr-ink-on-utility: #ffffff;

	/*
	 * The icon-button hover fill, which had to become a token when the bar went
	 * from #FFFFFF to #EAF0FA. .bedi-icon-button is the only control in this file
	 * that is rendered BOTH on the bar and inside the white panel, so one literal
	 * cannot serve it: #F2F5F9 on #EAF0FA is a 1.05:1 no-op, and #FFFFFF inside
	 * the panel is the same no-op the other way round. The default is the raised
	 * white chip for the bar; the panel re-points it to the wash immediately
	 * below.
	 */
	--bedi-hdr-chip-hover: var(--bedi-hdr-surface);

	--bedi-hdr-ink: #252531;
	--bedi-hdr-ink-2: #393939;
	--bedi-hdr-ink-muted: #777777;

	--bedi-hdr-line: #e5e5e5;
	--bedi-hdr-line-strong: #d5d5db;

	--bedi-hdr-accent: #2d81ff;
	--bedi-hdr-accent-deep: #0668fc;
	--bedi-hdr-ink-on-accent: #ffffff;

	/*
	 * THE DARK PILL — container aef774c, all three values from the spec.
	 *
	 * The fill is --e-global-color-secondary #252531, which is also the kit's
	 * primary text colour, so it is an alias rather than a new colour in the file.
	 *
	 * THE HOVER IS #0F2C57 AND IT IS NOT AN ALIAS. This used to be #393939, on
	 * the reasoning that a near-black fill has nowhere darker to go so the hover
	 * has to be one step LIGHTER. The reasoning was sound and the value was still
	 * a guess: the origin's own :hover on aef774c is #0F2C57, a dark navy that is
	 * a step lighter AND a hue shift towards the #2D81FF border, which reads as a
	 * deliberate state rather than as dirt on the pill. Measured: it carries
	 * #FFFFFF at 13.8:1 and keeps the #2D81FF border at 3.75:1, so the label stays
	 * AA and the outline stays visible through the state change. Nothing was
	 * traded for it.
	 *
	 * THE 1px BORDER IS --e-global-color-accent #2D81FF. This is the one part of
	 * the pill the screenshot could not resolve and the spec does: a hairline of
	 * the brand blue around a near-black pill. It is aliased rather than restated
	 * so the pill's outline and the cart's disc cannot drift apart.
	 */
	--bedi-hdr-pill: var(--bedi-hdr-ink);
	--bedi-hdr-pill-hover: #0f2c57;
	--bedi-hdr-pill-line: var(--bedi-hdr-accent);
	--bedi-hdr-ink-on-pill: #ffffff;

	/*
	 * THE COUNT BADGE, AND A DELIBERATE CHANGE OF OWNER.
	 *
	 * This block used to say that the #FFEF00 chip was cart.css's alone and that
	 * this file must not restate the fill, because a class selector here and
	 * cart.css's [data-bedi-cart-count] attribute selector are both (0,1,0) and
	 * the winner would be decided by enqueue order. That reasoning was right and
	 * the conclusion has changed, for two reasons the screenshot forced:
	 *
	 *   1. The badges are BLUE with white numerals, not yellow with dark ink.
	 *   2. There are TWO of them. The wishlist badge is not a
	 *      [data-bedi-cart-count] element at all, so cart.css never paints it —
	 *      left to that file it would render as unstyled text beside the heart.
	 *
	 * So the fill moves here, and the tie is broken on SPECIFICITY rather than on
	 * load order: section 8 writes `.bedi-header .bedi-action__count`, which is
	 * (0,2,0) and beats cart.css's (0,1,0) whatever the enqueue order does.
	 *
	 * cart.css KEEPS everything that is genuinely its own: the empty state
	 * (opacity + transform at (0,2,0), which section 8 must not and does not
	 * touch), the .is-bumped pop, and the forced-colors border. The split is by
	 * property now, not by file, and it is stated in both directions — see the
	 * long note above the rule in section 8.
	 */
	--bedi-hdr-badge: var(--bedi-hdr-accent);
	--bedi-hdr-badge-ink: var(--bedi-hdr-ink-on-accent);

	--bedi-hdr-scrim: rgba(0, 0, 0, 0.5);

	/*
	 * The original header was FLAT, not floating. Both layers are the extracted
	 * rgba(41, 43, 46, 0.1); the second is spread wide and pulled back hard so
	 * the scrolled bar separates from the page without ever reading as a card.
	 */
	--bedi-hdr-shadow: 0 1px 0 0 rgba(41, 43, 46, 0.1), 0 8px 20px -14px rgba(41, 43, 46, 0.1);

	/*
	 * The focus ring, and the one value in this file that had to be verified
	 * rather than copied. A ring tuned for a dark canvas disappears on white:
	 * --bedi-accent is #4FB3E8 in base.css's dark palette, which is 2.35:1
	 * against #FFFFFF and fails the 3:1 that WCAG 1.4.11 requires of a focus
	 * indicator. base.css's light :root now sets --bedi-accent to #2D81FF, so
	 * the two agree on a normal request; #4FB3E8 is still what a bare
	 * :focus-visible would draw under <html data-theme="dark">. Stating the ring
	 * here makes it 3.69:1 on the panel and 3.22:1 on the new #EAF0FA bar in both
	 * cases — section 16 carries the re-measured set.
	 *
	 * Controls that are THEMSELVES filled #2D81FF re-point this at the dark ink
	 * further down, because a blue ring two pixels off a blue button is invisible
	 * no matter what it scores against the page behind it.
	 */
	--bedi-hdr-focus: var(--bedi-hdr-accent);
}

/*
 * The panel half of the chip-hover pair declared above. The panel's own fill is
 * #FFFFFF, so the bar's raised-white chip would be invisible inside it; there the
 * hover is the #F2F5F9 wash, which is what every other control in the panel
 * already uses.
 *
 * It is a second rule rather than a line in the block above because that block
 * declares one palette for three elements at once, and this is the one value the
 * three do not share.
 */
.bedi-panel {
	--bedi-hdr-chip-hover: var(--bedi-hdr-wash);
}

/* =========================================================================
 * 2. LOCAL LENGTH AND MOTION TOKENS
 *
 * Lengths and motion only. Every motion value aliases the shared token from
 * motion.css and carries the literal fallback, so a missing motion.css degrades
 * to the same numbers instead of to `transition: initial`. The names on the
 * right are motion.css's own — the standard duration is --bedi-dur, not
 * --bedi-dur-std, and the curves are --bedi-ease-in / --bedi-ease-out. A var()
 * naming a property nobody declares does not fail loudly; it quietly runs on the
 * fallback for ever and the component silently stops tracking the shared scale.
 * ====================================================================== */

.bedi-header,
.bedi-panel,
.bedi-panel-backdrop {
	/*
	 * ZERO by default, and non-zero only where a utility row is both rendered
	 * and visible. The sticky offset in section 4 is the negative of this value,
	 * so a header whose bedi_theme_utility_contacts filter returned nothing —
	 * or any phone, where the row is hidden — would otherwise park itself above
	 * the top of the viewport and cut the logo in half.
	 */
	--bedi-header-utility-h: 0px;

	/*
	 * THE BAR'S OWN MINIMUM HEIGHT, which is now the whole of it. Spec: container
	 * 05d08ee `min-height: 90px`, `padding: 0 40px` — no block padding at all.
	 *
	 * This token used to mean the minimum height of the row's CONTENT (44px) and
	 * the bar's height was that plus 20/30px of row padding taken from template
	 * 4148: 84px on a phone and 94px from 768px up. Both numbers were wrong and
	 * neither was 90, which is what the client was looking at when they said the
	 * spacing was messed up. The row's padding is gone with them; section 6 puts
	 * this on the band itself and lets the row stretch inside it.
	 *
	 * The 44px touch target did NOT go with it — it moved to where it belongs,
	 * --bedi-header-tap below, which every round control still sizes from. 90px is
	 * comfortably more than 44, so nothing shrank.
	 *
	 * 90 IS NOW A DESKTOP NUMBER ONLY. The client asked for a shorter header on
	 * phones, and 90px of permanently sticky chrome on an 812px screen is 11%
	 * of it spent on a logo and two icons. The base value is 60px and the 90px
	 * spec figure is restored at 48em, which is where the utility band and the
	 * categories pill come back and actually need the room.
	 *
	 * If you are here to "fix" the 60 back to 90: read the line above first.
	 * Two earlier passes got this token wrong by treating it as one number for
	 * all widths. It is two.
	 */
	--bedi-header-bar-h: 60px;
	--bedi-header-tap: 2.75rem;
	--bedi-header-radius: 999px;
	--bedi-header-panel-radius: var(--bedi-radius-lg);

	/*
	 * THE BANDS' INLINE PADDING, as a token rather than as four literals.
	 *
	 * Spec: ddd9bb6 `padding: 10px 40px` and `0 20px` at the narrow breakpoint;
	 * 05d08ee `padding: 0 40px` and `0 20px`. The inline half is the same pair on
	 * both bands, and section 13's desktop mega panel has to line its own edges up
	 * with the bar above it — it does that by using this exact value as its inline
	 * inset, so the three cannot drift apart in an edit that touches only one of
	 * them.
	 *
	 * IT IS --bedi-gutter NOW, NOT A LOCAL 20/40 PAIR. base.css carries exactly
	 * the same two values and steps them at exactly the same breakpoint, and
	 * while the two copies existed the header and the page content could drift
	 * apart in an edit that touched only one of them. The 48em override this
	 * file used to carry is gone with the duplication — the token already steps.
	 */
	--bedi-header-pad-inline: var(--bedi-gutter);

	--bedi-header-dur-micro: var(--bedi-dur-micro, 120ms);
	--bedi-header-dur-std: var(--bedi-dur, 220ms);
	--bedi-header-dur-lg: var(--bedi-dur-lg, 420ms);
	--bedi-header-ease-in: var(--bedi-ease-in, cubic-bezier(0.22, 0.61, 0.36, 1));
	--bedi-header-ease-out: var(--bedi-ease-out, cubic-bezier(0.4, 0, 0.2, 1));
}

/* =========================================================================
 * 3. THE CONTAINER — 1280px, WHICH IS THE NUMBER THAT WAS WRONG
 *
 * Spec: both bands are BOXED with `content-width: 1280px` — ddd9bb6 and 05d08ee
 * carry the same cap. layout.css gives .bedi-container 1440px through
 * --bedi-content-width, which is right for an article and wrong for this header,
 * so the header's own copy is capped here.
 *
 * `.bedi-header .bedi-container` scores (0,2,0) and beats layout.css's (0,1,0) on
 * specificity alone, so this is order-independent.
 *
 * WHAT THIS REPLACES, AND WHY THE STEPS ARE GONE. This was three `min-width`
 * floors — 767px, then 1024px, then 1440px — which reproduced template 4148's
 * 1440px section plus the kit's tablet and mobile container caps. All three
 * numbers belonged to the header the shop stopped using, and the middle two were
 * doing active harm: a 1000px tablet was being squeezed to a 767px inner while
 * the live site gives it the full width minus the band padding.
 *
 * ONE CAP IS ENOUGH NOW BECAUSE THE PADDING MOVED. Elementor boxes a container by
 * putting the padding on the full-bleed outer element and capping the inner at
 * --content-width, so narrow viewports are handled by the 40px/20px inline
 * padding on the bands themselves rather than by a smaller cap. Sections 5 and 6
 * paint that padding; this element's own padding-inline is zeroed with it, or the
 * two would stack and the logo would sit 56px in from the edge of a phone.
 *
 * That also removes the 767.5px hole the three-step version was written around:
 * there is now one declaration and no width at which it fails to apply.
 * ====================================================================== */

/* The measure, by token. `padding-inline: 0` stays: sections 5 and 6 paint the
   gutter on the BANDS, and a container that painted it again would put the logo
   two gutters in from the edge of a phone. */
.bedi-header .bedi-container {
	max-width: var(--bedi-content-width);
	padding-inline: 0;
}

/* =========================================================================
 * 4. THE HEADER ROOT
 *
 * Sticky with a NEGATIVE top offset equal to the utility bar's height. The
 * utility row scrolls away and the main bar comes to rest against the top of the
 * viewport, with no JavaScript measuring anything and no height animation — the
 * old header's one genuinely broken behaviour was a bar whose height changed on
 * scroll, which reflowed the whole page every frame.
 *
 * NOTHING HERE MAY DECLARE transform, filter, backdrop-filter, will-change OR
 * contain. Any of those makes .bedi-header a containing block for fixed-position
 * descendants, and the phone bottom sheet — position: fixed; bottom: 0 — would
 * be pinned to the bottom of the header instead of the viewport. This was true
 * when the bar was frosted and it is still true now that nothing in the chrome
 * is: the rule is about containing blocks, not about glass.
 *
 * THE SPEC'S blur(5px) DOES NOT BREAK THAT, AND HERE IS WHY IT IS ALLOWED TO
 * EXIST. The origin sets `backdrop-filter: blur(5px)` on the utility container
 * ddd9bb6 through Elementor's custom-CSS box, so section 5 reproduces it — on
 * .bedi-header__utility, never here. The prohibition is about THIS element,
 * because .bedi-panel and .bedi-panel-backdrop are ITS children; the utility
 * band's only descendants are the nav list and the contact list, so it can be a
 * containing block for fixed positioning all day and nothing fixed is inside it.
 * Moving that one declaration up to .bedi-header would move the phone sheet to
 * the bottom of the header, which is the bug this paragraph exists to prevent.
 * ====================================================================== */

.bedi-header {
	background-color: transparent;
	border-block-end: 0;
	inset-block-start: calc(-1 * var(--bedi-header-utility-h));
	position: sticky;
	/*
	 * 100, AND IT IS THE HIGHEST THING ON THE PAGE THAT IS NOT AN OVERLAY.
	 *
	 * This number did not change; what changed is that it is no longer TIED.
	 * hero.css shipped --hero-rail-z: 100, the category rail is later in the
	 * document than the header, and a z-index tie is settled by document order —
	 * so the expanded category card painted straight over the logo and the
	 * category pill. The rail is on --bedi-z-rail (40) now and the veil behind
	 * it on --bedi-z-veil (60); both are below this, deliberately, which is what
	 * keeps the bar and the utility band sharp while the page behind them
	 * blurs. Only the drawer / sheet / toast / skip-link rungs are above, and
	 * every one of those is a modal surface that is SUPPOSED to cover the
	 * header.
	 */
	z-index: var(--bedi-z-header);
}

/* =========================================================================
 * 5. UTILITY BAR — container ddd9bb6
 *
 * Phone: gone. A phone header has room for four things and a phone number is
 * not one of them — the number is one tap away in the footer and in the sheet.
 * That decision predates the spec and the spec does not overturn it; the narrow
 * padding below is recorded anyway, because `display: none` is a choice this
 * theme makes and the next reader should find the origin's value rather than a
 * hole where it used to be.
 *
 * THE BAND IS #101A41, A DARK NAVY. It was the kit's #F2F5F9 page background,
 * taken from template 4148, which put a barely-there grey strip above a white
 * bar. The live strip is near-black navy with white text on it, which is a
 * completely different read and is the second thing the client would have seen as
 * "messed up" after the sizes.
 *
 * Everything else here is spec too: `min-height: 50px`, `padding: 10px 40px`
 * (0 20px narrow), `gap: 0`, `z-index: 100`, and the blur(5px) the origin sets in
 * Elementor's custom-CSS box.
 *
 * NO BOTTOM BORDER. The old #E5E5E5 hairline is removed because ddd9bb6 declares
 * no border and does not need one: #101A41 meeting #EAF0FA is a 14.7:1 edge and
 * draws its own seam. The main bar's border, one section down, is a different
 * case and is real.
 * ====================================================================== */

.bedi-header__utility {
	display: none;
	padding-inline: var(--bedi-header-pad-inline);
}

@media (min-width: 48em) {
	.bedi-header--has-utility {
		/*
		 * The sticky offset in section 4 is the negative of this, so it has to be
		 * the band's REAL height or the main bar comes to rest in the wrong place.
		 * 50px is exact rather than approximate: box-sizing is border-box
		 * throughout (base.css), the band's content is a single line of 12px type,
		 * and 10px + 12px-ish + 10px is under the 50px floor — so min-height wins
		 * and the band is 50px tall, not 50-plus-something.
		 */
		/* 50px -> 64px. The brief asks for a taller top bar, and 64 is not an
		   arbitrary 14px: the band now carries three groups rather than two —
		   contacts, pages, and the language switcher, whose flag discs are 22px
		   — and 10px of block padding around a 22px control needs 44px of content
		   box before the floor does anything at all. 64 leaves the discs 21px of
		   air top and bottom and keeps the 12px type optically centred against
		   them. Section 4's sticky offset is the negative of this token, so the
		   bar still comes to rest exactly against the top of the viewport. */
		--bedi-header-utility-h: 64px;
	}

	.bedi-header__utility {
		/*
		 * Reproduced from ddd9bb6's custom CSS. It is very nearly inert — the fill
		 * above it is opaque, so there is nothing of the page left to blur — and it
		 * is kept because it is what the origin does and because a future
		 * translucent band would otherwise silently lose it. Section 4 records why
		 * this is safe HERE and would not be safe one level up.
		 */
		backdrop-filter: blur(5px);
		background-color: var(--bedi-hdr-utility-band);
		/*
		 * flex, so the boxed inner stretches to the band's full content height and
		 * `align-items: center` on it has something to centre against. This is
		 * Elementor's own boxed-container shape: padding on the full-bleed outer,
		 * a stretched inner capped at --content-width.
		 */
		display: flex;
		min-block-size: var(--bedi-header-utility-h);
		padding-block: 10px;
		/*
		 * z-index 101, AND IT WAS 100 — ddd9bb6's own number — UNTIL THE BAND
		 * GREW SOMETHING THAT HANGS OUT OF IT.
		 *
		 * The band and .bedi-header__bar were BOTH on 100. They are siblings, so
		 * that is a tie, and a tie is settled by document order — which the bar
		 * wins, because it comes second. That was invisible while nothing in the
		 * band overlapped the bar.
		 *
		 * The language switcher's popover hangs 8px below the band, straight into
		 * the bar's box. At 100 it was painted over by the bar and, live, by the
		 * wishlist icon in particular: the menu was open, focusable and
		 * completely invisible. Its own z-index could not save it — 101 on the
		 * popover is resolved INSIDE this element's stacking context and cannot
		 * lift it past this element's own number.
		 *
		 * One above the bar, and no higher. Both are still inside .bedi-header's
		 * context at --bedi-z-header, so this number never competes with the
		 * page ladder in base.css and must not be moved onto it.
		 *
		 * `position: relative` is what the number lands on. Without it the
		 * declaration is inert and the band's stacking is document order again.
		 */
		position: relative;
		z-index: 101;
	}
}

/*
 * THREE GROUPS NOW, AND THE SIDES ARE SWAPPED.
 *
 * ddd9bb6 put the nav on the left at 50% and the contacts on the right at 50%.
 * The brief reverses that — CONTACTS LEFT, PAGES RIGHT — and adds a language
 * switcher after the pages, so the right-hand cell is no longer one child.
 *
 * WHY THE 50/50 FLEX BASIS IS GONE. Two cells at exactly 50% is what forced
 * `gap: 0` on this row: with no free space, any gap at all pushed the second
 * cell past the edge of the band. Three groups cannot be halves, and a third
 * cell squeezed into a fixed 50% would have wrapped the moment a menu grew by
 * one item. Both cells are `flex: 0 1 auto` now — they take the width of their
 * own content and `justify-content: space-between` does the distribution, which
 * is what that declaration was written for and could not do while the halves
 * left it nothing to distribute. The gap comes back for the same reason: there
 * is free space between the two groups again, and it is the gap INSIDE the
 * right-hand cell (pages | switcher) that needs a value.
 *
 * `margin-inline-start: auto` on the contact list is REMOVED in section 5b.
 * It existed to shove a lone 50% nav over to the right when no utility menu was
 * assigned; the contacts are the left group now, and an auto margin there would
 * push them back across the band — the exact bug it used to prevent, mirrored.
 */
.bedi-header__utility-inner {
	align-items: center;
	column-gap: var(--bedi-space-md);
	display: flex;
	justify-content: space-between;
	/* The band is 64px and the switcher is the tallest thing in it; stretching
	   the inner gives `align-items: center` a full-height box to work against
	   instead of the tallest line box. */
	min-block-size: 100%;
}

/*
 * THE RIGHT-HAND CELL: pages, then the language switcher, in that order. It is
 * a real element rather than a pair of siblings so that space-between has
 * exactly two things to separate and the switcher can never be pulled away from
 * the menu it belongs to.
 */
.bedi-header__utility-end {
	align-items: center;
	column-gap: var(--bedi-space-md);
	display: flex;
	flex: 0 1 auto;
	flex-wrap: nowrap;
	min-inline-size: 0;
}

/*
 * The utility navigation. Depth 1, container-less, rendered only when a menu is
 * actually assigned to the 'bedi-utility' location — site-header.php renders
 * NOTHING here otherwise, never a placeholder list of invented links.
 *
 * It is a peer of .bedi-utility and shares its type and ink, so the two groups
 * read as one strip rather than as a nav and a separate widget.
 */
.bedi-utility-nav {
	/* Cell b352b6c: 50%. See the note on .bedi-header__utility-inner for why the
	   two halves have to be exact and why the row's gap is 0. */
	/* 5b: was `flex: 0 0 50%`. See the note above
	   .bedi-header__utility-inner — three groups cannot be halves. */
	flex: 0 1 auto;
	min-inline-size: 0;
}

/* b352b6c's own flex settings are `justify-content: flex-start` and
   `align-items: center`. flex-start is the initial value, so only the alignment
   is declared — there is nothing to add here and nothing that drifted. */
.bedi-utility-nav__list {
	align-items: center;
	column-gap: var(--bedi-space-sm);
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

/*
 * Sub-items have nowhere to go in a 36px strip. The menu is rendered at depth 1
 * so there should be none, but a theme cannot assume the client did not paste a
 * nested menu into the location — and an unstyled <ul> dropping into this row
 * would push the header open. Belt and braces, one rule.
 */
.bedi-utility-nav__list .sub-menu {
	display: none;
}

/*
 * THE INK ON THE NAVY BAND, AND THE ONE VALUE IN THIS SECTION THE SPEC DOES NOT
 * CARRY.
 *
 * Both link colours here were #777777 — the kit's idle ink, correct fifteen times
 * over on template 4148's #F2F5F9 strip. On #101A41 that measures **3.75:1** at
 * 12px, which fails WCAG 1.4.3's 4.5:1 for normal-size text. The band changed, so
 * the ink had to; leaving it would have shipped an accessibility regression as
 * part of a fidelity fix.
 *
 * The spec records the typography of the PILL (8b96a59) and nothing about this
 * row's widgets, so #FFFFFF is a reasoned choice rather than an extracted value
 * and is flagged as such. It is not a new colour: it is the same #FFFFFF the pill
 * puts on #252531 and the token --bedi-hdr-ink-on-utility exists so that the
 * pairing with the band is explicit. Measured 16.85:1.
 *
 * The hover stays on the brand accent and was re-measured rather than assumed:
 * #2D81FF on #101A41 is **4.57:1**, which clears 4.5:1 for this 12px text. It
 * reads as a colour shift rather than as a brightening, which is the only thing
 * that changes about the interaction.
 */
.bedi-utility-nav__list a {
	color: var(--bedi-hdr-ink-on-utility);
	display: inline-block;
	/*
	 * EXACT from the original, verified 2026-09-25 against the archived render of
	 * post 2615 (web.archive.org 20260508): the utility row is MarksGeo Caps,
	 * 14px, weight 400, line-height 20px, white. The spec pass could not measure
	 * this row's type — the spec records only the pill — and defaulted it to the
	 * 12px BODY font, which is precisely what the client saw as "the font sizes
	 * are wrong in the header". --bedi-text-base is 14px and --bedi-font-display is
	 * the MarksGeo Caps stack.
	 */
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-base);
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
	white-space: nowrap;
}

.bedi-utility-nav__list a:hover,
.bedi-utility-nav__list a:focus-visible {
	color: var(--bedi-hdr-accent);
}

/*
 * The current item takes the accent, not #252531 — which on this band is 1.1:1,
 * near-invisible rather than merely dim. It therefore matches
 * the hover, and that is the right collision: hovering the page you are already
 * on should not promise a change of destination.
 */
.bedi-utility-nav__list .current-menu-item > a {
	color: var(--bedi-hdr-accent);
}

.bedi-utility {
	align-items: center;
	column-gap: var(--bedi-space-md);
	display: flex;
	/* Cell 240b50b: 50%, `justify-content: center`. */
	flex: 0 1 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
	list-style: none;
	/* See the note on .bedi-header__utility-inner: this is what keeps the
	   contacts in the RIGHT half when no utility menu is assigned and the row has
	   a single child. `margin: 0` first, so the shorthand cannot reset it. */
	margin: 0;
	/* 5b: `margin-inline-start: auto` REMOVED. It pushed a lone 50% cell to the
	   right of the band; the contacts are the LEFT group now and it would push
	   them straight back across it. */
	min-inline-size: 0;
	padding: 0;
}

.bedi-utility__item {
	min-inline-size: 0;
}

/* Same band, same ink, same measured 16.85:1 — see the note above
   .bedi-utility-nav__list a. The two groups share their type and colour so the
   strip reads as one row and not as a nav beside a widget. */
.bedi-utility__link {
	align-items: center;
	color: var(--bedi-hdr-ink-on-utility);
	column-gap: var(--bedi-space-3xs);
	display: inline-flex;
	/* Same as the nav above: MarksGeo Caps 14px / 400, the archived original's
	   value for the phone and e-mail on the navy strip. */
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-base);
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
	white-space: nowrap;
}

.bedi-utility__link:hover,
.bedi-utility__link:focus-visible {
	color: var(--bedi-hdr-accent);
}

.bedi-utility__icon {
	display: inline-flex;
	transition: transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in);
}

.bedi-utility__link:hover .bedi-utility__icon {
	transform: translateY(-1px);
}

/* =========================================================================
 * 6. THE MAIN BAR — container 05d08ee
 *
 * #EAF0FA, 90px tall, `padding: 0 40px` (0 20px narrow), a 1px bottom border and
 * the soft rgba(41, 43, 46, 0.1) shadow once the bar is stuck. No fill change, no
 * blur, no frost that thickens as the page scrolls: the bar is flat and stays
 * flat.
 *
 * WHAT WAS WRONG HERE, BECAUSE IT IS MOST OF WHAT THE CLIENT SAW.
 *
 *   fill      #FFFFFF        -> #EAF0FA   (--e-global-color-19a666e)
 *   height    84px / 94px    -> 90px      (min-height, and no row padding at all)
 *   padding   --bedi-gutter  -> 40px / 20px
 *   border    #E5E5E5        -> currentColor, see below
 *
 * The height was the compound error: template 4148's 20/30px row padding wrapped
 * around a 44px minimum, producing 84px on a phone and 94px on a desktop, so the
 * bar was never the height the client was comparing it against and every child in
 * it inherited the drift.
 *
 * THE BORDER COLOUR IS currentColor AND THAT IS NOT A CHOICE ANYONE MADE.
 * post-2615.css sets this border to `var(--e-global-color-astglobalcolor6)`, and
 * that custom property is NEVER DEFINED on the origin — Astra's
 * `global-color-palette` option is unset there. A var() naming an undefined
 * property is invalid at computed-value time, and border-color is not inherited,
 * so it falls back to its INITIAL value — which is currentColor. The origin
 * therefore draws a 1px line in whatever colour the bar's text happens to be, and
 * so does this. On this build `color` is inherited from base.css's `:root body`,
 * which is --bedi-ink #252531. Do not "fix" this to a hairline grey: it would
 * look tidier and it would no longer be the origin.
 *
 * border-color and box-shadow are the only properties transitioned here that
 * are not transform or opacity. Both are paint-only on a single element — no
 * layout, no reflow — which is what the transform/opacity rule exists to
 * protect.
 * ====================================================================== */

.bedi-header__bar {
	background-color: var(--bedi-hdr-band);
	/*
	 * NO BORDER AT ALL, ON ANY EDGE.
	 *
	 * This carried `border-block-end: 1px solid currentColor`, which section 6's
	 * long note explains at length: post-2615.css points that border at an
	 * Astra custom property that is never defined on the origin, so it falls
	 * back to its initial value, currentColor, and the origin draws a 1px line
	 * in whatever colour the bar's text happens to be. On this build that
	 * resolved to --bedi-ink, #252531 — a near-black rule across the full width
	 * of every page.
	 *
	 * That note said not to "fix" it to a hairline grey because the line would
	 * then no longer be the origin's. Removing it entirely is a different
	 * decision and a deliberate one: the band is tinted again (section 2), and a
	 * tint and a hard rule doing the same job means the rule wins and the tint
	 * is wasted. The bar is now separated from the page by colour alone, which
	 * is what --bedi-hdr-band is for, and by the shadow once it is stuck.
	 *
	 * All four widths are zeroed rather than only the one that was set, so a
	 * future edit to the shorthand cannot resurrect three of them.
	 */
	border: 0;
	/*
	 * flex for the same reason as the utility band: Elementor boxes a container by
	 * padding the full-bleed outer and stretching a capped inner inside it, and
	 * `align-items: center` on that inner needs a full-height box to centre
	 * against. With the bar as a plain block the row would be 90px only by
	 * accident of its content.
	 */
	display: flex;
	min-block-size: var(--bedi-header-bar-h);
	padding-inline: var(--bedi-header-pad-inline);
	position: relative;
	transition: box-shadow var(--bedi-header-dur-std) var(--bedi-header-ease-out);
	/* 05d08ee's own z-index. It was 3, which was enough to clear the backdrop but
	   was not the origin's number. Nothing in the chrome sits between 3 and 100,
	   so the ordering against .bedi-panel (2) and .bedi-panel-backdrop (1) is
	   unchanged. */
	z-index: 100;
}

/* =========================================================================
 * 6b. STUCK: THE BAR TURNS TO GLASS
 *
 * header.js already toggled .is-stuck on the root and this rule already lifted
 * a shadow in; the brief asks the scrolled bar to go semi-transparent and blur
 * what passes underneath it, so the shadow is now the third of three things
 * that change and not the only one.
 *
 * WHY backdrop-filter IS LEGAL HERE AND ILLEGAL ONE LEVEL UP. Section 4 forbids
 * filter / backdrop-filter / transform / will-change / contain on .bedi-header,
 * because .bedi-panel and .bedi-panel-backdrop are its children and are
 * `position: fixed` — any of those properties would make the header their
 * containing block and pin the phone bottom sheet to the bottom of the HEADER
 * instead of the viewport. .bedi-header__bar is a SIBLING of both. Nothing
 * fixed lives inside it, so it can become a containing block and nothing
 * notices. This is the same argument section 5 makes for the utility band; do
 * not move either declaration up to the root.
 *
 * THE BORDER SOFTENS, AND ONLY HERE. Section 6 explains at length that the
 * resting border is currentColor by accident of an undefined Astra custom
 * property on the origin, and that it must not be "fixed" to a grey. That
 * stands — at rest. Once the bar is glass, a near-black 1px rule under a
 * translucent sheet reads as a seam rather than an edge, and the shadow is
 * already drawing the separation. The resting state is untouched; this is a new
 * state the origin does not have.
 *
 * The @supports fallback is not decoration. With no backdrop-filter the bar
 * would be a 72% white sheet over live page content with nothing softening it,
 * and the product photography underneath would read straight through the
 * search field. Those browsers get the opaque band they had before.
 * ====================================================================== */

/* The shadow alone now. The border-colour softening this used to do went with
   the border itself — there is nothing left to soften. */
.bedi-header.is-stuck .bedi-header__bar {
	box-shadow: var(--bedi-hdr-shadow);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.bedi-header.is-stuck .bedi-header__bar {
		-webkit-backdrop-filter: blur(18px) saturate(150%);
		backdrop-filter: blur(18px) saturate(150%);
		background-color: var(--bedi-hdr-band-glass);
	}

	/*
	 * The utility band goes with it. It is above the bar in the box and it
	 * scrolls away first, but for the ~200ms it is still half on screen a solid
	 * navy strip over a frosted white bar is two different materials touching,
	 * and the eye catches it. 88% keeps #FFFFFF on it at 12.4:1 — the AAA floor
	 * for the 12px type up there is 7:1 — so nothing in the band gets harder to
	 * read on the way out.
	 */
	.bedi-header.is-stuck .bedi-header__utility {
		background-color: color-mix(in srgb, var(--bedi-hdr-utility-band) 88%, transparent);
	}
}

/*
 * The transition is declared on the resting rule in section 6 and covers
 * border-color and box-shadow. background-color joins it here rather than
 * there, so that a browser without backdrop-filter — which never changes the
 * background at all — is not asked to interpolate a property nothing writes.
 */
.bedi-header__bar {
	transition:
		background-color var(--bedi-header-dur-std) var(--bedi-header-ease-out),
		box-shadow var(--bedi-header-dur-std) var(--bedi-header-ease-out);
}

/*
 * THE ROW IS THE BOXED INNER, AND IT NO LONGER HAS A HEIGHT OF ITS OWN.
 *
 * It stretches to the band's 90px and centres every child on one axis. The 20/30px
 * `padding-block` it used to carry is gone with the rest of template 4148: 05d08ee
 * has `padding: 0 40px`, block padding zero.
 *
 * `column-gap: 0` is not a tidy-up either. 05d08ee's three cells are 20% + 60% +
 * 20%, which is exactly 100%. The outer two are `flex: 0 0 20%` and cannot give
 * the gap back, so the 16px this carried would have come out of the search
 * field — the only child that grows — and the middle cell would have settled at
 * 60% minus 32px while still calling itself 60%. Silent drift is worse than an
 * obvious overflow.
 *
 * THE PHONE KEEPS ITS 16px. That row is hamburger / logo / search / cart, not the
 * origin's three cells, and it has no percentage widths for a gap to corrupt —
 * with the logo cell's 15px start padding gone (section 7, it was 4148's) a zero
 * gap there would put the wordmark hard against the hamburger.
 */
.bedi-header__row {
	align-items: center;
	/* 8px, down from 16px: the client asked for the menu and the logo to sit
	   closer. This gap is only live below 48em — the rule below zeroes it for
	   desktop, where the row is measured out in percentages instead. */
	column-gap: var(--bedi-space-2xs);
	display: flex;
	position: relative;
}

/* The spec's 90px bar, from the width where the header earns it. */
@media (min-width: 48em) {
	.bedi-header,
	.bedi-panel,
	.bedi-panel-backdrop {
		--bedi-header-bar-h: 90px;
	}
}

@media (min-width: 48em) {
	.bedi-header__row {
		column-gap: 0;
	}
}

/* =========================================================================
 * 7. BRANDING — logo cell 0670db7, image widget 5b83e76
 *
 * THE CELL IS 20% WIDE AND ITS PADDING IS ZERO. It carried 0 0 9px 20px, and
 * 0 0 0 15px with a 10px bottom margin on a phone; all four numbers came from
 * template 4148's logo column and none of them exists on 2615. The 9px bottom
 * padding in particular was pushing the logo optically above the centre of a bar
 * whose height was already wrong, which is what "the sizes are messed up" looks
 * like from the outside. 0670db7 is `padding: 0` and the cell is centred by the
 * row instead.
 *
 * THE LOGO IS SIZED BY WIDTH, NOT BY HEIGHT. 5b83e76 is `max-width: 220px` on the
 * widget with the image at `width: 100%` from 768px up and `width: 160px` at the
 * narrow breakpoint. This file used to cap the BLOCK size at 2rem / 2.5rem, which
 * is a different constraint entirely: Bedi.png is 654 x 120, so a 40px height cap
 * happened to land near 220px wide and a 32px one did not land anywhere near
 * 160px. Sizing by the axis the origin sizes by also means a future logo with a
 * different aspect ratio keeps the origin's width and takes whatever height comes
 * with it, which is what the client will expect.
 *
 * NO GRADIENT WORDMARK. The clipped accent-to-accent gradient belonged to the
 * dark pass. The shop name is #252531, the kit's primary text colour, and the
 * @supports block that made it transparent is gone with it — a transparent fill
 * is only ever safe when something is guaranteed to paint behind it.
 *
 * The wordmark and the blue disc below are the FALLBACK path and are unchanged:
 * site-header.php prints them only while no custom logo is set, and 1377
 * (Bedi.png) is set on the live build, so on bedi.vebses.io the rules from
 * .bedi-brand__name down are dormant. They are not dead — a fresh install of this
 * theme has no logo until someone sets one.
 * ====================================================================== */

.bedi-brand {
	align-items: center;
	display: flex;
	/* On a phone the wordmark takes the space between the hamburger and the
	   search icon; on a desktop it shrinks instead of pushing the search field
	   out of the row. Never grows past its content there. */
	flex: 1 1 auto;
	min-inline-size: 0;
	/*
	 * NO `overflow: hidden` HERE, AND IT MUST NOT COME BACK.
	 *
	 * It was the truncation mechanism while .bedi-brand__name was a plain text
	 * element. It is not any more — the ellipsis moved onto .bedi-brand__text
	 * when the wordmark became a flex row of mark + text — and left in place it
	 * clipped the brand link's focus ring.
	 *
	 * The clip was total rather than cosmetic, which is why this is a bug fix and
	 * not a tidy-up. .bedi-header__row sets `align-items: center`, so this element
	 * is `align-self: center` and its block size is exactly its content's: the
	 * wordmark's line box and nothing more. The ring is drawn at
	 * --bedi-focus-offset (2px) and is --bedi-focus-width (2px) thick, so it lives
	 * entirely in the 4px above and below that box — all of which `overflow:
	 * hidden` removed. The result was a keyboard-focusable link, and the site's
	 * home link at that, with no visible focus indicator at all: WCAG 2.2
	 * SC 2.4.11 and SC 1.4.11.
	 *
	 * Nothing overflows without it. The shrink chain is unbroken from the row to
	 * the text — .bedi-brand (min-inline-size: 0) > .bedi-brand__name
	 * (min-inline-size: 0) > .bedi-brand__link (min-inline-size: 0) >
	 * .bedi-brand__text (min-inline-size: 0 plus overflow/text-overflow) — and
	 * .bedi-brand__mark is `flex: none`, so a long site title ellipsises inside
	 * the text span while the disc keeps its size. Re-adding a clip here would
	 * hide the ring again without truncating anything that is not truncated
	 * already.
	 */
}

@media (min-width: 48em) {
	.bedi-brand {
		/* Cell 0670db7: 20%. Fixed, not `0 1 auto` — the three cells are 20/60/20
		   and the middle one absorbs the slack, so a logo cell that shrank to its
		   content would drag the search field left of centre. */
		flex: 0 0 20%;
	}
}

/*
 * The widget's `max-width: 220px`. It sits on the link rather than on the image
 * because that is where 5b83e76 puts it — the image's own width is the 100% /
 * 160px pair below, and 100% of an uncapped block would be the whole 20% cell
 * (256px at the 1280px content width).
 */
.bedi-brand .custom-logo-link {
	display: block;
	line-height: 0;
	max-inline-size: 220px;
	transition: transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in);
}

.bedi-brand .custom-logo-link:hover {
	transform: scale(1.02);
}

/*
 * `block-size: auto` is what keeps the aspect ratio: the_custom_logo() prints the
 * attachment's real width and height attributes (654 x 120 for Bedi.png), so the
 * intrinsic ratio is known before the file loads and the bar does not reflow when
 * it arrives.
 */
.bedi-brand .custom-logo {
	block-size: auto;
	inline-size: 160px;
	/* A floor guard, not a size. 160px is the spec's narrow width and it is what
	   renders at every width the cell can hold; on a 320px phone the row is
	   burger + logo + search + cart inside 20px of band padding and the logo is
	   the only item that can give, so without this it would overflow the bar
	   instead of shrinking the 6px it needs to. */
	max-inline-size: 100%;
}

@media (min-width: 48em) {
	.bedi-brand .custom-logo {
		/* 100% of the 220px cap above. Bedi.png is 654 x 120, so this renders
		   220 x 40.4 — the first time this header has been the size the origin
		   is. */
		inline-size: 100%;
	}
}

/*
 * THE WORDMARK.
 *
 * The screenshot's logo is a Georgian wordmark preceded by a small blue circular
 * mark. It is the SITE TITLE, not a hardcoded string — site-header.php prints
 * bloginfo('name') — so this styles whatever the client has in Settings, and a
 * Latin title would get exactly the same treatment.
 *
 * --bedi-font-display is the display family from base.css. It is named here
 * rather than inherited because .bedi-brand__name is a <p> on inner pages and an
 * <h1> only on the front page; base.css gives headings the display face and
 * paragraphs the body face, so without this the logo would change typeface
 * between the home page and every other page on the site.
 *
 * The same reasoning covers the weight: base.css sets 700 on headings and 400 on
 * paragraphs, so the weight is stated too or the wordmark thins out on inner
 * pages.
 */
.bedi-brand__name {
	font-family: var(--bedi-font-display);
	font-size: var(--bedi-text-lg);
	font-weight: var(--bedi-weight-bold);
	line-height: var(--bedi-leading-tight);
	margin: 0;
	min-inline-size: 0;
	/* The ellipsis lives on the TEXT span, not here: this element is now a flex
	   container holding the mark and the text, and text-overflow does nothing on
	   a flex container. */
	white-space: nowrap;
}

@media (min-width: 48em) {
	.bedi-brand__name {
		font-size: var(--bedi-text-xl);
	}
}

/*
 * The link is the flex row that holds the mark and the wordmark together, so the
 * whole lockup is one target.
 *
 * min-inline-size: 0 is this link's link in the shrink chain described on
 * .bedi-brand: it is what lets the TEXT span shrink and ellipsise while
 * .bedi-brand__mark, which is `flex: none`, keeps the disc circular. The chain
 * is what replaced the `overflow: hidden` that used to sit on .bedi-brand, so
 * neither element needs to clip and this link's focus ring stays visible.
 */
.bedi-brand__link {
	align-items: center;
	color: var(--bedi-hdr-ink);
	column-gap: var(--bedi-space-2xs);
	display: inline-flex;
	min-inline-size: 0;
	text-decoration: none;
	transition: color var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
}

.bedi-brand__link:hover {
	color: var(--bedi-hdr-accent);
}

/*
 * THE BLUE CIRCULAR MARK.
 *
 * Sized in `em`, not in rem or px, so it tracks the wordmark's own font-size at
 * every breakpoint without a second media query — 1em against a 1rem/1.125rem
 * wordmark lands the disc at the text's cap-and-ascender height, which is how it
 * sits in the screenshot.
 *
 * flex: none is load-bearing. The wordmark beside it is allowed to shrink, and a
 * flex item whose width is set in em still shrinks below that width by default,
 * which would squash the circle into an ellipse on a narrow phone.
 */
.bedi-brand__mark {
	block-size: 1.05em;
	color: var(--bedi-hdr-accent);
	display: inline-flex;
	flex: none;
	inline-size: 1.05em;
}

.bedi-brand__mark svg {
	block-size: 100%;
	display: block;
	inline-size: 100%;
}

/* The mark stays blue while the wordmark goes blue on hover, so it does not
   disappear into the text: it is currentColor'd to the brand accent above and
   the hover on .bedi-brand__link would otherwise be inherited by both. */
.bedi-brand__link:hover .bedi-brand__mark {
	color: var(--bedi-hdr-accent-deep);
}

.bedi-brand__text {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================================
 * 8. ICON BUTTONS AND ACTIONS
 *
 * One shape for every round control in the chrome: the hamburger, the account,
 * wishlist and cart icons, and the panel's close button. 2.75rem is 44px and it
 * does not shrink on phones.
 *
 * Idle is #777777 — the kit's idle-icon colour, used fifteen times in the
 * original header — and it was re-measured against the new band rather than
 * carried over: 3.91:1 on #EAF0FA, which clears the 3:1 a non-text control needs.
 *
 * THE HOVER FILL HAD TO MOVE WHEN THE BAR DID. It was the #F2F5F9 wash, chosen
 * against a white bar. #F2F5F9 on #EAF0FA is 1.05:1 — the hover would still have
 * HAPPENED and nobody would have seen it. --bedi-hdr-chip-hover (section 1) is
 * #FFFFFF on the bar and the wash inside the white panel, so the control lifts off
 * whichever surface it is actually sitting on.
 *
 * Being straight about what that fill is worth: white on #EAF0FA is 1.15:1 and the
 * #E5E5E5 outline is 1.10:1, so on this band the chip is a tint rather than a
 * shape. What actually carries the state is the INK — #777777 to #2D81FF is a
 * colour change nobody misses — plus the 1px rise. Hover is not a WCAG-governed
 * indicator; focus is, and section 16 measures that separately on the new band.
 * ====================================================================== */

.bedi-icon-button {
	align-items: center;
	background-color: transparent;
	block-size: var(--bedi-header-tap);
	border: var(--bedi-border-width) solid transparent;
	border-radius: var(--bedi-header-radius);
	color: var(--bedi-hdr-ink-muted);
	display: inline-flex;
	flex: 0 0 auto;
	inline-size: var(--bedi-header-tap);
	justify-content: center;
	position: relative;
	text-decoration: none;
	transition:
		transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in),
		background-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		border-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		color var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
}

.bedi-icon-button:hover {
	background-color: var(--bedi-hdr-chip-hover);
	border-color: var(--bedi-hdr-line);
	color: var(--bedi-hdr-accent);
	transform: translateY(-1px);
}

.bedi-icon-button:active {
	transform: translateY(0) scale(0.94);
}

/*
 * THE RIGHT-HAND CELL — ee9e1a3, and the one place where reproducing the spec
 * exactly has a consequence this file cannot finish on its own.
 *
 * Spec: width **20%**, `flex-direction: row-reverse`, `justify-content:
 * flex-start`, `align-items: center`, `gap: 12px`. The 4px gap and the 8px start
 * margin this carried were 4148's and are dropped at the desktop breakpoint — the
 * margin in particular cannot stay there, because 20% + 60% + 20% is exactly 100%
 * and any margin on a cell pushes the row over its own width. The phone keeps
 * both: that row is menu / logo / search / cart, not the origin's three cells, and
 * the spec records no narrow values for ee9e1a3 to replace them with.
 *
 * row-reverse WITH flex-start IS GEOMETRICALLY THE SAME AS row WITH flex-end: in
 * a reversed row the main-start edge is the RIGHT one, so the group packs against
 * the right edge of its cell either way. The difference is ORDER. The first child
 * in the DOM is drawn rightmost, so with site-header.php's account / wishlist /
 * cart order the visitor saw cart, wishlist, account from left to right, and the
 * cart's blue disc sat at the INNER edge of the group rather than at the end of
 * the bar.
 *
 * SO THIS CELL IS `row` + `flex-end` WHILE THE SPEC SAYS `row-reverse` +
 * `flex-start`, AND THAT IS NOT DRIFT. Read this before "restoring" the spec
 * value: row-reverse is correct only with the ORIGIN's DOM order, which put the
 * mini-cart FIRST inside ee9e1a3 and therefore painted it rightmost. Our markup is
 * account / wishlist / cart, so the declaration taken literally paints the blue
 * cart disc at the LEFT of the group — the one thing the client's reference
 * screenshot rules out, since there the cart is hard against the right edge of the
 * bar. row + flex-end packs the group against that same edge, with the same 12px
 * gaps and the same slack left inside the 20% cell (44 x 3 + 24 = 156px of content
 * in 256px at the 1280px cap, so ~100px of free space to the left of the group
 * either way). The box model is the origin's; only the paint order differs, and it
 * differs in the direction that makes it match.
 *
 * The previous revision left this as a choice between two one-liners: reverse the
 * three actions in site-header.php, or flip this cell. The cell is the right half
 * of that pair to touch, because DOM order is also TAB order and row-reverse put
 * the two in disagreement — a keyboard user tabbed right to left across a group a
 * mouse user read left to right (WCAG 2.4.3 focus order, 1.3.2 meaningful
 * sequence). Reversing the markup would have preserved that disagreement and moved
 * it into the HTML; this flip removes it, and visual order and tab order are now
 * the same order.
 *
 * ONE CONSEQUENCE, CHECKED RATHER THAN ASSUMED: the cart is now the LAST item in
 * the cell instead of the first, so its count badge — pinned `inset-inline-end: 0`
 * inside the disc with a 2px ring, section 8 — sits at the cell's right edge rather
 * than in the middle of the group. Nothing had to move for it. Logical insets
 * resolve from `direction`, not from flex-direction, so the badge is in the same
 * corner of the same 44px box as before; the ring is a box-shadow, which is ink
 * overflow and cannot open a scrollbar; and the band's 40px of inline padding lies
 * outside the 1280px cap the badge is now flush with, so there is no clip and no
 * collision. The account button, which used to hold that edge, carries no badge at
 * all.
 */
.bedi-header__actions {
	align-items: center;
	/* 4px -> 2px. These are two 44px circles side by side; the gap between them
	   was reading as a third element. */
	column-gap: 2px;
	display: flex;
	flex: 0 0 auto;
	margin-inline-start: 2px;
}

@media (min-width: 48em) {
	.bedi-header__actions {
		column-gap: 12px;
		flex: 0 0 20%;
		/* ee9e1a3 declares `row-reverse` + `flex-start`; with OUR DOM order that is
		   the same geometry written the other way round. See the note above. */
		flex-direction: row;
		justify-content: flex-end;
		margin-inline-start: 0;
	}
}

.bedi-action__icon {
	display: inline-flex;
	pointer-events: none;
}

/* Phone: the bar is menu, logo, search, cart. Account and wishlist move into
   the sheet's page menu, which is where a thumb expects them. */
.bedi-action--account,
.bedi-action--wishlist {
	display: none;
}

@media (min-width: 48em) {
	.bedi-action--account,
	.bedi-action--wishlist {
		display: inline-flex;
	}
}

/*
 * THE CART, AS A FILLED BLUE DISC.
 *
 * The screenshot shows the cart icon inside a solid blue circle with a white
 * glyph, while the wishlist heart stays an outline glyph on white. So this is
 * the ONE action that breaks out of the shared .bedi-icon-button skin, and it
 * overrides exactly four properties of it.
 *
 * SOURCE ORDER IS DOING REAL WORK HERE, so this block must stay BELOW
 * .bedi-icon-button:hover. `.bedi-icon-button:hover` is (0,2,0) — one class plus
 * one pseudo-class — and `.bedi-action--cart:hover` is (0,2,0) too, an exact
 * tie. They are in the same stylesheet, so the later rule wins and the tie is
 * resolved deterministically rather than by enqueue order. Moving this block
 * above section 8's shared rules would hand the cart the grey wash hover and
 * leave a white-on-#F2F5F9 glyph nobody can see.
 *
 * `border-color` is set as well as `background-color`: .bedi-icon-button draws a
 * 1px transparent border to keep every control the same size, and leaving it
 * transparent here would ring the blue disc with a 1px gap onto the white bar.
 */
.bedi-action--cart {
	background-color: var(--bedi-hdr-accent);
	border-color: var(--bedi-hdr-accent);
	color: var(--bedi-hdr-ink-on-accent);
}

.bedi-action--cart:hover {
	background-color: var(--bedi-hdr-accent-deep);
	border-color: var(--bedi-hdr-accent-deep);
	color: var(--bedi-hdr-ink-on-accent);
}

/* =========================================================================
 * 8b. THE ROUND ACTION ICONS — the reference's exact treatment
 *
 * Refinement pass (client screenshot). All three round controls read as RAISED
 * circles on the #EAF0FA bar. Account and wishlist are WHITE circles with a dark
 * glyph that fill brand blue with a white glyph on hover/focus; the cart keeps its
 * blue disc (section 8 above) and is deliberately absent from the white-circle
 * selector. The search field's blue submit disc (search.css) is likewise left
 * blue — the screenshot shows it blue, not white. Glyphs are enlarged to the
 * original's icon-to-circle proportion, and the CART badge goes dark because a blue
 * badge on the blue disc would vanish, while the wishlist badge stays blue on its
 * white circle.
 * ====================================================================== */

.bedi-action--account,
.bedi-action--wishlist,
.bedi-action--cart {
	box-shadow: 0 2px 8px rgba(16, 26, 65, 0.12);
}

.bedi-action--account,
.bedi-action--wishlist {
	background-color: var(--bedi-hdr-surface);
	border-color: transparent;
	color: var(--bedi-hdr-ink);
}

/*
 * Source order matters: these tie .bedi-icon-button:hover at (0,2,0) and win by
 * coming after it, exactly as .bedi-action--cart:hover does. White circle -> blue
 * fill, dark glyph -> white glyph.
 */
.bedi-action--account:hover,
.bedi-action--wishlist:hover,
.bedi-action--account:focus-visible,
.bedi-action--wishlist:focus-visible {
	background-color: var(--bedi-hdr-accent);
	border-color: var(--bedi-hdr-accent);
	color: var(--bedi-hdr-ink-on-accent);
}

/* Larger glyphs, matching the original proportions. Wins over the 20px width/height
   attributes the markup prints (a CSS length beats a presentational attribute). */
.bedi-action__icon svg {
	inline-size: 24px;
	block-size: 24px;
}

/* The cart's count badge on the blue disc is dark navy — a blue-on-blue badge is
   invisible. The wishlist badge keeps section 8's blue on its white circle. (0,3,0)
   beats the (0,2,0) base badge rule whatever the enqueue order. */
.bedi-header .bedi-action--cart .bedi-action__count {
	background-color: var(--bedi-hdr-utility-band);
}

/*
 * THE COUNT BADGES — FILL AND SHAPE HERE, STATE STILL IN cart.css.
 *
 * This rule used to set position only, and deliberately so: the note it replaces
 * recorded that cart.css owned the #FFEF00 fill through [data-bedi-cart-count],
 * and that restating it here would put two (0,1,0) selectors in a tie decided by
 * enqueue order. Both halves of that were true. The screenshot changed the
 * conclusion, not the reasoning — see the long note in section 1:
 *
 *   - the badges are BLUE with WHITE numerals, not #FFEF00 with dark ink;
 *   - and there are two of them. The wishlist badge is not a
 *     [data-bedi-cart-count] element, so cart.css does not paint it at all.
 *
 * THE TIE IS BROKEN ON SPECIFICITY, NOT ON ORDER. `.bedi-header
 * .bedi-action__count` is (0,2,0) and beats cart.css's (0,1,0) however the two
 * files are enqueued. The ancestor is always present: cart.js reparents the
 * DRAWER to <body>, but this badge is rendered by site-header.php into the
 * header bar and stays inside .bedi-header for the life of the page.
 *
 * WHAT IS DELIBERATELY NOT DECLARED HERE, and must not be added:
 *
 *   opacity, transform   cart.css hides the empty badge with
 *                        `[data-bedi-cart-count][data-empty="true"]` at (0,2,0)
 *                        and pops it with a keyframe animation on .is-bumped.
 *                        Declaring either property at (0,2,0) here would tie
 *                        that rule and, by source order across two files, could
 *                        leave a "0" pill on every empty cart — which is exactly
 *                        the legacy "cart (0)" this rebuild set out to remove.
 *   display              for the same reason, one level down: it is set once
 *                        below and never re-set in a state rule.
 *
 * Pinned rather than in the flow, so a two-digit count cannot push the row
 * around — the old header's count sat inline and shifted the whole icon group
 * every time the cart changed.
 *
 * min-inline-size with symmetric padding, rather than a fixed width: a single
 * digit sits in a true circle, and 10 or more grows it into a pill instead of
 * overflowing the disc.
 */
.bedi-header .bedi-action__count {
	align-items: center;
	background-color: var(--bedi-hdr-badge);
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-hdr-badge-ink);
	display: inline-flex;
	/* The same step cart.css picked for this badge, kept rather than replaced
	   with a smaller magic number: 12px numerals sit comfortably inside the
	   18px disc below, and the badge stays on the shared type scale. */
	font-size: var(--bedi-text-xs);
	font-variant-numeric: tabular-nums;
	font-weight: var(--bedi-weight-bold);
	inset-block-start: 0.125rem;
	inset-inline-end: 0;
	justify-content: center;
	line-height: 1;
	min-block-size: 1.125rem;
	min-inline-size: 1.125rem;
	padding-inline: 0.25rem;
	pointer-events: none;
	position: absolute;
}

/*
 * THE CART BADGE KEEPS THE BLUE FILL AND GAINS A RING THE COLOUR OF THE BAND.
 *
 * Both badges are blue with white numerals, which is what the screenshot shows
 * and what the brief asks for. The cart's badge, though, is pinned to the
 * top-right of a control that is ITSELF a blue disc, so blue-on-blue would read
 * as one blob with a white number floating in it.
 *
 * The ring is the fix, and it is a reproduction rather than an invention: it is
 * the colour of the bar the disc sits on, so the badge reads as separated from
 * the disc exactly as it does in the screenshot, and the badge's own fill and
 * numeral colour are untouched.
 *
 * IT USED TO BE --bedi-hdr-surface AND THAT IS NOW THE WRONG TOKEN. The whole
 * point of the ring is that it is invisible against the surface behind it; with
 * the bar at #EAF0FA a white ring stops being a gap and becomes a white halo
 * drawn around the badge. --bedi-hdr-band is the same declaration pointed at the
 * colour that is actually there.
 *
 * box-shadow rather than `border`, on purpose — a border would grow the badge's
 * box and shift it off the corner it is pinned to, while a spread shadow paints
 * outside the box and costs no layout. It is also a property neither cart.css
 * nor the empty state touches.
 *
 * (0,3,0), so it beats the (0,2,0) rule above on specificity rather than on
 * source order — the two would otherwise tie.
 */
.bedi-header .bedi-action--cart .bedi-action__count {
	box-shadow: 0 0 0 2px var(--bedi-hdr-band);
}

/* =========================================================================
 * 9. THE CATEGORY TRIGGERS — pill container aef774c, label heading 8b96a59
 *
 * Two controls, one panel. The hamburger is the phone's; the labelled
 * "კატეგორიები" pill is the desktop's.
 *
 * THE PILL IS DARK, NOT BLUE, and the spec confirms what the screenshot showed:
 * --e-global-color-secondary #252531 with #FFFFFF ink. The blue is not lost, it
 * moved to the cart's disc in section 8.
 *
 * WHAT THE SPEC ADDED ON TOP OF THE SCREENSHOT. The screenshot could only resolve
 * the fill and the ink. aef774c carries five more values, and every one of them
 * had been approximated here from the shared header tokens:
 *
 *   border         (none)                -> 1px solid #2D81FF  (--…-color-accent)
 *   border-radius  999px                 -> 100px
 *   padding        16px inline, no block -> 16px 22px 16px 18px
 *   gap            8px                   -> 12px
 *   width          44px tall fixed box   -> fit-content, height from the padding
 *
 * The padding is the one that changes the shape rather than the detail. The pill
 * was a 44px-high capsule because it borrowed --bedi-header-tap like every round
 * control in the chrome; with 16px of block padding around an 18px icon and a 1px
 * border it is 52px, so it now reads as the widest and tallest control on the bar,
 * which is what it is on the origin. 52px also still clears the 44px minimum touch
 * target on its own, so nothing was traded for the fidelity — see the note on the
 * rule.
 *
 * THE HOVER IS #0F2C57, NOT #393939. Section 1 carries the full reasoning and the
 * measurements; the short version is that #393939 was a considered guess and
 * #0F2C57 is the origin's own value.
 *
 * There is no .bedi-glow on it any more and this file draws no ::before on it:
 * the animated conic border was dark-pass language.
 * ====================================================================== */

.bedi-cat-trigger {
	display: none;
}

@media (min-width: 48em) {
	.bedi-cat-trigger {
		align-items: center;
		background-color: var(--bedi-hdr-pill);
		/* The 1px accent hairline. --bedi-border-width is 1px and
		   --bedi-hdr-pill-line is #2D81FF. */
		border: var(--bedi-border-width) solid var(--bedi-hdr-pill-line);
		/* 100px, not the 999px capsule token. At a 52px-high pill the two render
		   identically — both clamp to half the height — so this is fidelity to
		   aef774c rather than a visible change, and it stops a future taller pill
		   from silently diverging from the origin. */
		border-radius: 100px;
		color: var(--bedi-hdr-ink-on-pill);
		column-gap: 12px;
		display: inline-flex;
		flex: 0 0 auto;
		font-size: var(--bedi-text-sm);
		/* aef774c's own `width: fit-content`, set in Elementor's custom-CSS box.
		   On an inline-flex button this is what the used width already is; it is
		   stated because the centre cell is a 60% flex line and a future
		   `align-self: stretch` there would otherwise pull the pill open. */
		inline-size: fit-content;
		/*
		 * aef774c's `padding: 16px 22px 16px 18px`, and NO block-size.
		 *
		 * The asymmetry is the origin's: 18px on the glyph side, 22px on the
		 * chevron side, because the chevron's bounding box is wider than its ink
		 * and the pill reads lopsided with 20px on both. Written on the logical
		 * axes because that asymmetry is tied to the two ends of the control, not
		 * to left and right — in RTL the glyph and the chevron swap sides and the
		 * padding has to swap with them. In the origin's LTR layout it resolves to
		 * exactly the four numbers above.
		 *
		 * The 44px `block-size` this replaces was --bedi-header-tap, shared with
		 * the round icon buttons. Losing it is safe and was checked rather than
		 * assumed: 16 + 18 (the 18px glyph, the tallest of the three children) + 16
		 * + 2px of border is 52px, so the control is TALLER than the 44px minimum
		 * touch target it used to be pinned to, not shorter.
		 */
		padding-block: 16px;
		padding-inline: 18px 22px;
		position: relative;
		transition:
			transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in),
			background-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
			border-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
	}
}

/*
 * THE BORDER DOES NOT MOVE ON HOVER ANY MORE. It used to be re-pointed at the
 * hover fill, which was correct while the hairline WAS the fill colour — leaving
 * it behind would have ringed the lighter pill with the darker rest colour.
 * aef774c's :hover sets the background alone, and the accent hairline is the
 * constant that makes the fill change read as a state rather than as a different
 * control: #2D81FF holds 3.22:1 against the band outside it and 3.75:1 against
 * #0F2C57 inside it, so the outline is continuous through the whole transition.
 *
 * border-color stays in the transition list above. It is what carries [aria-
 * expanded] and :hover back to rest smoothly if a later state ever moves it, and
 * a transition on a property nothing currently changes costs nothing.
 */
.bedi-cat-trigger:hover,
.bedi-cat-trigger[aria-expanded="true"] {
	background-color: var(--bedi-hdr-pill-hover);
}

.bedi-cat-trigger:hover {
	transform: translateY(-1px);
}

.bedi-cat-trigger:active {
	transform: translateY(0) scale(0.98);
}

.bedi-cat-trigger__icon,
.bedi-cat-trigger__caret {
	display: inline-flex;
	pointer-events: none;
}

/*
 * THE PILL ICON SLOT, WHICH NOW HAS TO SURVIVE A REAL IMAGE IN IT.
 *
 * aef774c's first child is the image widget menu-icon.png, and site-header.php
 * feeds it through the bedi_theme_pill_icon filter (attachment 1378 on the live
 * build). the_custom_logo() and wp_get_attachment_image() both print the
 * attachment's intrinsic width and height attributes, and menu-icon.png is
 * **76 x 76** — a 76px image dropped into a 52px pill blows the control, the
 * 60% centre cell and the 90px bar open in that order.
 *
 * THE 18px IS THE ONE NUMBER IN THIS SECTION THE SPEC DOES NOT CARRY. It records
 * that the widget exists and not what size it renders at. 18px is not a guess
 * either: it is the width/height the inline 3x3 grid glyph in site-header.php has
 * always been drawn at, so the icon keeps the size the pill was built around and
 * the swap to the real file changes the picture and nothing else. Flagged for
 * review; if the origin's widget size turns up, it replaces this.
 *
 * `inline-size: auto` with a block cap rather than a square: menu-icon.png is
 * square, a future replacement may not be, and a fixed pair would squash it.
 */
.bedi-cat-trigger__icon img {
	block-size: auto;
	display: block;
	inline-size: auto;
	max-block-size: 18px;
	max-inline-size: 18px;
}

.bedi-cat-trigger__caret {
	transition: transform var(--bedi-header-dur-std) var(--bedi-header-ease-in);
}

.bedi-cat-trigger[aria-expanded="true"] .bedi-cat-trigger__caret {
	transform: rotate(-180deg);
}

/*
 * THE LABEL — heading 8b96a59: MarksGeo Caps, 13px / 600, line-height 16px,
 * #FFFFFF, margin 0.
 *
 * The FAMILY has to be stated. base.css gives <button> `font: inherit`, so
 * without this the label inherits --bedi-font-body (Mulish) from the document
 * while the origin sets the display face on the heading widget — the one place in
 * the header where the two faces are visibly different, because MarksGeo Caps is
 * all-caps by construction.
 *
 * The WEIGHT is a literal. base.css's scale is 400 / 500 / 700 and has no 600
 * step, and fonts.css does load a 600 face (MarkGEOCAPS-Medium.ttf), so this is a
 * weight that exists on disk rather than one the browser would have to synthesise.
 *
 * 13px is --bedi-text-sm exactly (0.8125rem), inherited from the pill, so the
 * size stays on the shared scale rather than becoming a second literal.
 *
 * The spec's `margin: 0` is NOT restated. It exists on the origin because 8b96a59
 * is an <h2> and is cancelling a UA margin; this label is a <span> inside a
 * flexbox and has none to cancel.
 */
.bedi-cat-trigger__label {
	font-family: var(--bedi-font-display);
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
}

/* The hamburger. Three bars from one element and its two pseudo-elements.
   currentColor, so it tracks the icon button's idle / hover ink. */
.bedi-header__menu {
	display: inline-flex;
}

@media (min-width: 48em) {
	.bedi-header__menu {
		display: none;
	}
}

.bedi-burger,
.bedi-burger::before,
.bedi-burger::after {
	background-color: currentColor;
	block-size: 2px;
	border-radius: 2px;
	inline-size: 1.125rem;
	transition:
		transform var(--bedi-header-dur-std) var(--bedi-header-ease-in),
		opacity var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
}

.bedi-burger {
	display: block;
	position: relative;
}

.bedi-burger::before,
.bedi-burger::after {
	content: "";
	inset-inline-start: 0;
	position: absolute;
}

.bedi-burger::before {
	inset-block-start: -6px;
}

.bedi-burger::after {
	inset-block-start: 6px;
}

/* The middle bar fades; the outer two rotate into the cross. */
.bedi-header__menu[aria-expanded="true"] .bedi-burger {
	opacity: 0;
}

.bedi-header__menu[aria-expanded="true"] .bedi-burger::before {
	opacity: 1;
	transform: translateY(6px) rotate(45deg);
}

.bedi-header__menu[aria-expanded="true"] .bedi-burger::after {
	opacity: 1;
	transform: translateY(-6px) rotate(-45deg);
}

/* The open hamburger is a close button. Give it the same ink the panel's own
   close control has, so the two read as one state. */
.bedi-header__menu[aria-expanded="true"] {
	color: var(--bedi-hdr-ink);
}

/* =========================================================================
 * 10. THE SEARCH SLOT, AND THE CENTRE CELL efd414b
 *
 * This file owns the box; the search module owns everything inside it. On a
 * phone the slot holds only that module's icon and is pushed hard right, next
 * to the cart. On the desktop bar it is the element that absorbs the leftover
 * width — which is what makes the search field the widest thing in the header,
 * as it was on the original site.
 *
 * THE 60% CELL IS COMPOSED, NOT DECLARED, AND THAT IS THE ONE STRUCTURAL
 * DIVERGENCE IN THIS PASS.
 *
 * 05d08ee's middle child is efd414b: width **60%**, row, `justify-content:
 * center`, `align-items: center`, `gap: 5px`, holding the categories pill and the
 * AJAX search widget. site-header.php has no element for it — the pill and the
 * search slot are direct siblings of .bedi-brand in .bedi-header__row — and
 * markup is not this file's to change.
 *
 * So the geometry is reproduced without the wrapper, and it is exact rather than
 * approximate:
 *
 *   the row's gap is 0 and the outer cells are fixed at 20% each (sections 7
 *   and 8), so the pill and this slot share precisely the 60% that is left;
 *   the pill is `flex: 0 0 auto` at its fit-content width and this slot is
 *   `flex: 1 1 auto`, so the slot takes the remainder exactly as the search
 *   widget does inside efd414b;
 *   the 5px is carried as a margin on this element, which is the gap between
 *   the two — the only two — children of that cell.
 *
 * What is NOT reproducible without the wrapper is efd414b's `justify-content:
 * center`, and it does not matter here: the two children fill the cell (the
 * second one grows), so there is no free space for centring to distribute. It
 * would begin to matter only if a third widget were added to the middle of the
 * bar, and at that point the wrapper should be added to site-header.php and this
 * comment deleted.
 *
 * min-inline-size: 0 is what lets a flex child shrink below the intrinsic width
 * of its content. Without it a long placeholder would push the actions off the
 * end of the row.
 * ====================================================================== */

.bedi-header__search {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-end;
	margin-inline-start: auto;
	min-inline-size: 0;
}

@media (min-width: 48em) {
	.bedi-header__search {
		flex: 1 1 auto;
		justify-content: center;
		/* efd414b's `gap: 5px`, between the pill and the search field. */
		margin-inline-start: 5px;
	}
}

/* =========================================================================
 * 11. THE PANEL — STATE SHARED BY BOTH PRESENTATIONS
 *
 * Closed is the default in the markup (the element ships with `inert`), so
 * there is no flash of an 87-term list before the footer script runs.
 *
 * visibility, not display: display: none cannot be transitioned, while
 * visibility still removes the subtree from the accessibility tree and from tab
 * order. The delayed visibility step in the closed transition lets the fade
 * finish before the panel is taken away.
 *
 * A SOLID WHITE SURFACE. It was a translucent sheet with a backdrop-filter, and
 * that never worked on this shop: the panel rises over a product archive, which
 * is a wall of white photography, and a blur does not darken a white backdrop.
 * The original was opaque and so is this — #FFFFFF with an #E5E5E5 hairline,
 * which holds #252531 text at about 15:1 whatever is behind it. The @supports
 * fallback the translucent version needed is gone with it.
 * ====================================================================== */

.bedi-panel {
	background-color: var(--bedi-hdr-surface);
	border: var(--bedi-border-width) solid var(--bedi-hdr-line);
	box-shadow: var(--bedi-hdr-shadow);
	color: var(--bedi-hdr-ink);
	display: flex;
	flex-direction: column;
	opacity: 0;
	overflow: hidden;
	transition:
		opacity var(--bedi-header-dur-std) var(--bedi-header-ease-out),
		transform var(--bedi-header-dur-std) var(--bedi-header-ease-out),
		visibility 0s linear var(--bedi-header-dur-std);
	visibility: hidden;
	z-index: 2;
}

.bedi-panel.is-open {
	opacity: 1;
	transition:
		opacity var(--bedi-header-dur-std) var(--bedi-header-ease-in),
		transform var(--bedi-header-dur-lg) var(--bedi-header-ease-in),
		visibility 0s linear 0s;
	visibility: visible;
}

.bedi-panel-backdrop {
	background-color: var(--bedi-hdr-scrim);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity var(--bedi-header-dur-std) var(--bedi-header-ease-out);
	z-index: 1;
}

.bedi-panel-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.bedi-panel__head {
	align-items: center;
	border-block-end: var(--bedi-border-width) solid var(--bedi-hdr-line);
	display: flex;
	flex: 0 0 auto;
	gap: var(--bedi-space-sm);
	justify-content: space-between;
	padding: var(--bedi-space-xs) var(--bedi-space-sm);
}

.bedi-panel__title {
	color: var(--bedi-hdr-ink);
	font-size: var(--bedi-text-lg);
	margin: 0;
}

.bedi-panel__body {
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	/*
	 * NOT optional. A flex item defaults to min-height: auto, which refuses to
	 * shrink below its content — the 87-term list would push the panel past its
	 * max-block-size, the panel's own overflow: hidden would clip the tail, and
	 * this scroll container would never scroll because it never overflowed.
	 */
	min-block-size: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--bedi-space-sm);
	/* scrollbar-color inherits from html, scrollbar-width does not. A component
	   with its own scrolling region has to set it itself. */
	scrollbar-width: thin;
}

@media (min-width: 48em) {
	.bedi-panel__head {
		padding-inline: var(--bedi-space-md);
	}

	.bedi-panel__body {
		padding: var(--bedi-space-md);
	}
}

/* =========================================================================
 * 12. THE PANEL AS A PHONE BOTTOM SHEET  (the base)
 *
 * A different concept, not a narrower mega menu: it rises from the bottom edge
 * where the thumb already is, it carries a drag handle, it keeps its own scroll,
 * and it never covers more than 85% of the screen so the page behind stays
 * visible and the sheet reads as a layer rather than a new page.
 *
 * The restyle does not touch any of that. It is still a bottom sheet; it is a
 * white one.
 *
 * --bedi-panel-drag is written by header.js during a drag and is the ONLY thing
 * the gesture touches — one custom property feeding one transform. Nothing reads
 * layout, nothing writes width or height.
 * ====================================================================== */

.bedi-panel {
	border-block-end-width: 0;
	border-inline-width: 0;
	border-start-end-radius: var(--bedi-header-panel-radius);
	border-start-start-radius: var(--bedi-header-panel-radius);
	inset-block-end: 0;
	inset-inline: 0;
	max-block-size: 85vh;
	/* dvh where it exists: 85vh on iOS is measured against the tallest possible
	   viewport, so a sheet sized in vh hides its own bottom row behind the
	   browser's collapsing toolbar. */
	max-block-size: 85dvh;
	padding-block-end: env(safe-area-inset-bottom, 0px);
	position: fixed;
	transform: translateY(100%);
}

.bedi-panel.is-open {
	transform: translateY(var(--bedi-panel-drag, 0px));
}

/* While a finger is on the sheet the transform must track it exactly. A
   transition here would make the sheet lag behind the thumb. */
.bedi-panel.is-dragging {
	transition: none;
}

.bedi-panel__handle {
	align-items: center;
	cursor: grab;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	padding-block: var(--bedi-space-2xs);
	/* Without this the browser claims the gesture for scrolling and the drag
	   never reaches pointermove. */
	touch-action: none;
}

.bedi-panel__handle:active {
	cursor: grabbing;
}

/* #D5D5DB, not the #E5E5E5 hairline: a border colour that reads correctly as a
   1px line against white is too faint to read as a 4px grab affordance. Both
   are kit greys. */
.bedi-panel__grip {
	background-color: var(--bedi-hdr-line-strong);
	block-size: 4px;
	border-radius: 4px;
	display: block;
	inline-size: 2.5rem;
	transition: transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in);
}

.bedi-panel.is-dragging .bedi-panel__grip {
	transform: scaleX(1.25);
}

/* =========================================================================
 * 13. THE PANEL AS A DESKTOP MEGA MENU  (>= 768px)
 *
 * Absolutely positioned against the sticky header, so it travels with the bar
 * and needs no scroll maths. inset-block-start: 100% is the bottom of the header
 * box, which is the bottom of the bar — the utility row is inside that box, and
 * above it.
 *
 * Every property the sheet set has to be unset here, including the two border
 * widths and the safe-area padding. A half-reset panel is how a mega menu ends
 * up with one rounded corner and no left border.
 *
 * THE PANEL IS NOT IN THE SPEC AND IT STILL HAD TO MOVE. It is this rebuild's
 * own component — the origin opened a Jet mega menu here — so there is no
 * element id to cite. What it does have is an invariant: its edges line up with
 * the bar above it, or the mega menu reads as a detached card hanging off the
 * header. The bar's inner cap went 1024/1440px -> 1280px and its inline padding
 * went --bedi-gutter -> 40px in sections 3 and 6, so both of this panel's numbers
 * follow them, and the padding follows by TOKEN rather than by a copied literal
 * so the next change to one cannot leave the other behind.
 *
 * The two-step cap goes with it. It existed to track section 3's two steps; there
 * is one width now.
 * ====================================================================== */

@media (min-width: 48em) {
	.bedi-panel {
		border-block-end-width: var(--bedi-border-width);
		border-inline-width: var(--bedi-border-width);
		border-radius: var(--bedi-header-panel-radius);
		inset-block-end: auto;
		inset-block-start: 100%;
		inset-inline: var(--bedi-header-pad-inline);
		margin-inline: auto;
		max-block-size: min(70vh, 40rem);
		max-inline-size: var(--bedi-content-width);
		padding-block-end: 0;
		position: absolute;
		transform: translateY(-0.5rem);
	}

	.bedi-panel.is-open {
		transform: translateY(0.5rem);
	}

	.bedi-panel__handle {
		display: none;
	}
}

/* =========================================================================
 * 14. THE PAGE MENU INSIDE THE PANEL
 *
 * Rendered once, shown at every width. Below 768px it is full-width rows, not
 * inline links, because they are tapped with a thumb; the block at the end of
 * this section turns it into a compact wrapped row on the desktop mega panel,
 * and explains why it is no longer hidden there.
 * ====================================================================== */

/*
 * Account and wishlist, the two icons section 8 removes from the phone bar.
 * They are only in the sheet because they are not in the bar, so they follow
 * the same breakpoint in the opposite direction: visible below 768px, gone at
 * exactly the width where .bedi-action--account comes back. The pair is never
 * on screen twice.
 *
 * Two equal columns rather than full-width rows: these are short, frequently
 * tapped destinations, and stacking them would push the category list — the
 * reason the sheet exists — below the fold on a small phone.
 */
.bedi-panel__account {
	display: grid;
	gap: var(--bedi-space-2xs);
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin-block-end: var(--bedi-space-sm);
}

@media (min-width: 48em) {
	.bedi-panel__account {
		display: none;
	}
}

.bedi-panel__account-link {
	align-items: center;
	background-color: var(--bedi-hdr-surface-2);
	border: var(--bedi-border-width) solid var(--bedi-hdr-line);
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-hdr-ink);
	column-gap: var(--bedi-space-2xs);
	display: flex;
	font-size: var(--bedi-text-sm);
	font-weight: var(--bedi-weight-medium);
	justify-content: center;
	min-block-size: var(--bedi-header-tap);
	min-inline-size: 0;
	padding-inline: var(--bedi-space-2xs);
	text-decoration: none;
	transition:
		background-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		border-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in);
}

.bedi-panel__account-link:hover,
.bedi-panel__account-link:focus-visible {
	background-color: var(--bedi-hdr-wash);
	border-color: var(--bedi-hdr-line-strong);
	color: var(--bedi-hdr-accent);
}

.bedi-panel__account-link:active {
	transform: scale(0.98);
}

.bedi-panel__account-icon {
	display: inline-flex;
	flex: 0 0 auto;
	pointer-events: none;
}

.bedi-panel__account-label {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bedi-panel__pages {
	margin-block-end: var(--bedi-space-md);
}

.bedi-panel__pages-fallback {
	display: contents;
}

.bedi-panel__pages-list,
.bedi-panel__pages-list .sub-menu,
.bedi-panel__pages-list .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-panel__pages-list .sub-menu,
.bedi-panel__pages-list .children {
	padding-inline-start: var(--bedi-space-md);
}

.bedi-panel__pages-list a {
	align-items: center;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-hdr-ink);
	display: flex;
	font-weight: var(--bedi-weight-medium);
	min-block-size: var(--bedi-header-tap);
	padding-inline: var(--bedi-space-xs);
	text-decoration: none;
	transition:
		background-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in);
}

.bedi-panel__pages-list a:hover,
.bedi-panel__pages-list a:focus-visible {
	background-color: var(--bedi-hdr-wash);
	color: var(--bedi-hdr-accent);
	transform: translateX(2px);
}

.bedi-panel__pages-list .current-menu-item > a,
.bedi-panel__pages-list .current_page_item > a {
	color: var(--bedi-hdr-accent);
}

/*
 * DESKTOP: THE MENU STAYS. It only stops being a stack of thumb-sized rows.
 *
 * This block used to be `.bedi-panel__pages { display: none }`, on the premise
 * that "the same links are in the footer" from 768px up. They are not.
 * footer.php renders the `bedi-footer` MENU LOCATION, which is a different
 * location from `bedi-primary` and which a site may never have assigned — the
 * two are registered separately in Theme::register_menus(). Combined with
 * header.php no longer rendering the old .bedi-nav, hiding this rule left a
 * desktop visitor with NO primary navigation anywhere on the page: the menu was
 * still in the DOM, just never painted.
 *
 * So it is kept, and laid out as a compact wrapped row above the category grid
 * with a rule under it. Sub-items stay in the phone sheet only: a nested list
 * has nowhere to go inside a horizontal row, and a sub-page is always one tap
 * away from its parent.
 *
 * This block is placed at the END of section 14 on purpose. Section 13's media
 * query sits ABOVE the base rules in this section, so a `min-block-size` set
 * there would lose to the 44px row height declared below it at equal
 * specificity.
 */
@media (min-width: 48em) {
	.bedi-panel__pages {
		border-block-end: var(--bedi-border-width) solid var(--bedi-hdr-line);
		margin-block-end: var(--bedi-space-sm);
		padding-block-end: var(--bedi-space-2xs);
	}

	.bedi-panel__pages-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--bedi-space-3xs);
	}

	.bedi-panel__pages-list .sub-menu,
	.bedi-panel__pages-list .children {
		display: none;
	}

	.bedi-panel__pages-list a {
		min-block-size: 2.25rem;
	}
}

/* =========================================================================
 * 15. THE CATEGORY LIST
 *
 * One markup source. A phone gets one column of full-width rows with the
 * children tucked under their parent; a desktop gets the columns of the mega
 * panel. auto-fill rather than auto-fit so a short catalogue does not stretch
 * three categories across the full width — which is precisely the bug the old
 * two-column grid had at the other end of the scale.
 *
 * Top-level terms are #252531, children are the kit's #393939 secondary text,
 * counts are #777777. Hairlines are #E5E5E5 throughout.
 * ====================================================================== */

.bedi-cats__grid {
	display: grid;
	gap: var(--bedi-space-2xs);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bedi-cats__column {
	border-block-end: var(--bedi-border-width) solid var(--bedi-hdr-line);
	min-inline-size: 0;
	padding-block-end: var(--bedi-space-2xs);
}

.bedi-cats__column:last-child {
	border-block-end: 0;
}

@media (min-width: 48em) {
	.bedi-cats__grid {
		gap: var(--bedi-space-md);
		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	}

	.bedi-cats__column {
		border-block-end: 0;
		padding-block-end: 0;
	}
}

@media (min-width: 64em) {
	.bedi-cats__grid {
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	}
}

/* =========================================================================
 * THE PANEL'S TWO VIEWS
 *
 * One dialog, one set of ids, one focus trap, two contents. The hamburger asks
 * for the navigation, the bottom bar's კატეგორიები tab and the desktop pill ask
 * for the categories, and header.js writes the answer onto the panel.
 *
 * Why not two panels: the controller in header.js is a single instance that
 * owns the focus trap, the scroll lock, the backdrop and the drag-to-dismiss
 * gesture, all keyed to one element id. A second panel means a second owner of
 * a shared scroll lock, which is how a page ends up locked with nothing open.
 * ====================================================================== */

.bedi-panel[data-bedi-panel-view="nav"] .bedi-panel__view[data-bedi-view="categories"],
.bedi-panel[data-bedi-panel-view="categories"] .bedi-panel__view[data-bedi-view="nav"] {
	display: none;
}

@media (min-width: 48em) {
	/*
	 * From 768px the hamburger is not rendered, this panel is the desktop mega
	 * menu, and the categories are the only thing it has ever been for. Stated
	 * rather than left to the attribute, so a stale data-bedi-panel-view — the
	 * sheet left on "nav" when the window is widened — cannot leave a desktop
	 * visitor looking at four page links where the category grid belongs.
	 */
	.bedi-panel .bedi-panel__view[data-bedi-view="nav"] {
		display: none;
	}

	.bedi-panel .bedi-panel__view[data-bedi-view="categories"] {
		display: block;
	}
}

/* --- the disclosure row ------------------------------------------------- */

/*
 * The link takes the width and the button takes what it needs. `min-inline-size:
 * 0` on the link because .bedi-cats__name ellipsises, and a flex item will not
 * shrink below its content without it — the name would push the chevron off the
 * end of a 375px sheet instead of truncating.
 */
.bedi-cats__row {
	align-items: center;
	display: flex;
}

.bedi-cats__row .bedi-cats__top {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.bedi-cats__toggle {
	-webkit-appearance: none;
	appearance: none;
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-hdr-ink-muted);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	/* A real thumb target, matching the row it sits in. */
	min-block-size: var(--bedi-header-tap);
	min-inline-size: var(--bedi-header-tap);
	padding: 0;
}

.bedi-cats__toggle:hover {
	background-color: var(--bedi-hdr-wash);
	color: var(--bedi-hdr-accent);
}

/*
 * Pointing down when closed, up when open. The mark is drawn pointing right —
 * it was a "go there" chevron on a link — so closed is a quarter turn and open
 * is three.
 */
.bedi-cats__toggle .bedi-cats__chevron {
	margin-inline-start: 0;
	transform: rotate(90deg);
	transition: transform var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
}

.bedi-cats__toggle[aria-expanded="true"] .bedi-cats__chevron {
	transform: rotate(-90deg);
}

/*
 * CLOSED BY DEFAULT, AND CLOSED IN THE MARKUP TOO.
 *
 * Eight departments with every child listed is a sheet you scroll for a long
 * time to reach the eighth heading. Collapsed, the whole shop is eight rows and
 * one thumb.
 *
 * This is a CLASS on the column rather than the `hidden` attribute on the list,
 * because the desktop rule below has to be able to override it — `[hidden]`
 * would need undoing with `display: block` at every width above 768px, and a
 * list that is semantically hidden while visibly shown is worse than either.
 */
@media (max-width: 47.9375em) {
	.bedi-cats__column:not(.is-open) .bedi-cats__sub {
		display: none;
	}
}

@media (min-width: 48em) {
	/* Nothing to expand: the mega panel already shows every child. */
	.bedi-cats__toggle {
		display: none;
	}
}

.bedi-cats__top {
	align-items: center;
	border-radius: var(--bedi-radius-md);
	color: var(--bedi-hdr-ink);
	column-gap: var(--bedi-space-2xs);
	display: flex;
	font-weight: var(--bedi-weight-bold);
	min-block-size: var(--bedi-header-tap);
	padding-inline: var(--bedi-space-2xs);
	text-decoration: none;
	transition:
		background-color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		color var(--bedi-header-dur-micro) var(--bedi-header-ease-out);
}

.bedi-cats__top:hover,
.bedi-cats__top:focus-visible {
	background-color: var(--bedi-hdr-wash);
	color: var(--bedi-hdr-accent);
}

.bedi-cats__name {
	min-inline-size: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bedi-cats__count {
	color: var(--bedi-hdr-ink-muted);
	flex: 0 0 auto;
	font-size: var(--bedi-text-xs);
	font-weight: var(--bedi-weight-regular);
}

.bedi-cats__chevron {
	color: var(--bedi-hdr-ink-muted);
	display: inline-flex;
	flex: 0 0 auto;
	margin-inline-start: auto;
	transition:
		color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in);
}

.bedi-cats__top:hover .bedi-cats__chevron {
	color: var(--bedi-hdr-accent);
	transform: translateX(3px);
}

.bedi-cats__sub {
	border-inline-start: var(--bedi-border-width) solid var(--bedi-hdr-line);
	list-style: none;
	margin-block-start: var(--bedi-space-3xs);
	margin-inline-start: var(--bedi-space-xs);
	padding: 0;
	padding-inline-start: var(--bedi-space-2xs);
}

.bedi-cats__child {
	align-items: center;
	border-radius: var(--bedi-radius-sm);
	color: var(--bedi-hdr-ink-2);
	column-gap: var(--bedi-space-3xs);
	display: flex;
	font-size: var(--bedi-text-sm);
	/* A full tap target on a phone; tighter once there is a pointer. */
	min-block-size: var(--bedi-header-tap);
	padding-inline: var(--bedi-space-2xs);
	text-decoration: none;
	transition:
		color var(--bedi-header-dur-micro) var(--bedi-header-ease-out),
		transform var(--bedi-header-dur-micro) var(--bedi-header-ease-in);
}

@media (min-width: 48em) {
	.bedi-cats__child {
		min-block-size: 2.25rem;
	}
}

.bedi-cats__child:hover,
.bedi-cats__child:focus-visible {
	color: var(--bedi-hdr-accent);
	transform: translateX(2px);
}

/* =========================================================================
 * 16. FOCUS — CHECKED AGAINST THE NEW WHITE SURFACES
 *
 * This section is not a restyle, it is a correction that the restyle made
 * necessary. base.css draws every focus ring with --bedi-accent. Its light :root
 * now sets that to #2D81FF, which is fine; under :root[data-theme="dark"] it is
 * #4FB3E8, which is 2.35:1 against #FFFFFF. On the dark canvas that was fine; on
 * these white surfaces it is a ring nobody can see, and it fails WCAG 2.2
 * SC 1.4.11 (3:1 for a focus indicator) and 2.4.13.
 *
 * So the chrome states its own. `.bedi-header :focus-visible` is (0,2,0) and
 * beats base.css's bare `:focus-visible` at (0,1,0) on specificity, so this
 * holds whatever the load order and whatever base.css is carrying that day.
 *
 * RE-MEASURED AGAINST THE SPEC'S BANDS, because the ring is drawn on the surface
 * behind the control and two of the three surfaces changed:
 *
 *   #2D81FF on #EAF0FA   the main bar        3.22:1   passes 3:1
 *   #2D81FF on #101A41   the utility strip   4.57:1   passes 3:1
 *   #2D81FF on #FFFFFF   inside the panel    3.69:1   passes 3:1
 *
 * The bar is the one that moved and it is still clear of the floor. It is closer
 * to it than it was, so anything that lightens that band again has to come back
 * to this block: #EAF0FA is as light as the ring can take before 1.4.11 fails.
 *
 * THE RULE THAT USED TO LIVE HERE IS NOW A BUG, AND THIS IS THE CORRECTION.
 *
 * While the category pill was filled #2D81FF it re-pointed the ring at #252531,
 * because a blue ring two pixels off a blue button is invisible whatever it
 * scores against the page behind it. That was right then. The pill is now
 * FILLED #252531, so the very same rule would draw a #252531 ring against a
 * #252531 pill — 1:1, a ring that does not exist. Keeping it would have been the
 * quiet kind of regression that only a keyboard user ever finds.
 *
 * So the pill goes back to the default accent ring, and BOTH of its
 * backgrounds were checked rather than assumed, which is what the offset makes
 * necessary — `outline-offset: 2px` puts the ring outside the border box, so it
 * is drawn on the white bar, but it abuts the dark pill along its whole edge:
 *
 *   #2D81FF on #FFFFFF (the bar the ring is drawn on)   3.69:1   passes 3:1
 *   #2D81FF on #252531 (the pill it abuts)              4.10:1   passes 3:1
 *
 * The cart button is the control that now needs the inverse treatment, for the
 * exact reason the pill used to: section 8 fills it #2D81FF, so it re-points the
 * ring at #252531 — 15.13:1 on the white bar, and still legible where it meets
 * the blue disc.
 *
 * Nothing here removes an indicator anywhere. There is no `outline: none` in
 * this file.
 * ====================================================================== */

.bedi-header :focus-visible,
.bedi-panel :focus-visible {
	outline: var(--bedi-focus-width) solid var(--bedi-hdr-focus);
	outline-offset: var(--bedi-focus-offset);
}

.bedi-action--cart:focus-visible {
	--bedi-hdr-focus: var(--bedi-hdr-ink);
}

/* =========================================================================
 * 17. BODY SCROLL LOCK — DELIBERATELY NOT DECLARED HERE
 *
 * assets/css/motion.css section 7 owns .bedi-scroll-locked, and assets/js/
 * header.js only joins the shared counter that sets it. There is no rule in
 * this file, and adding one would be actively wrong:
 *
 * motion.css reserves the scrollbar's width permanently with
 * `scrollbar-gutter: stable`, so the gutter is still there once overflow goes
 * to hidden and the page does not move. The usual
 * `padding-inline-end: <measured scrollbar width>` compensation — which this
 * file did carry for one revision — would then pad a gap that was never
 * removed, and every overlay would shove the whole page sideways by the width
 * of a scrollbar. One owner, one mechanism.
 * ====================================================================== */

/* =========================================================================
 * 18. FORCED COLOURS
 *
 * In Windows High Contrast the palette in section 1 is discarded entirely and
 * the user's own is substituted. What must survive is STRUCTURE: the panel has
 * to look like a panel, the category pill has to look like a button, and the
 * count chip has to stay legible instead of becoming a coloured smudge.
 * ====================================================================== */

@media (forced-colors: active) {
	.bedi-panel,
	.bedi-cat-trigger,
	.bedi-panel__account-link {
		border: 1px solid CanvasText;
	}

	.bedi-header__bar {
		border-block-end: 1px solid CanvasText;
	}

	/*
	 * The cart's blue disc and both count badges are fills, and forced colours
	 * discards a fill. Without an outline the disc stops reading as a control and
	 * the badge becomes a bare digit floating beside an icon.
	 *
	 * The badge's white ring goes too: box-shadow is not painted in forced
	 * colours, and the 2px gap it reserved would otherwise sit there as dead
	 * space around the numeral.
	 */
	.bedi-action--cart {
		border: 1px solid CanvasText;
	}

	.bedi-header .bedi-action__count {
		border: 1px solid CanvasText;
		box-shadow: none;
	}
}

/* =========================================================================
 * 19. REDUCED MOTION
 *
 * base.css already collapses every duration to 1ms globally. What that cannot
 * do is remove the DISTANCE: a sheet that still travels 100% of its height in
 * 1ms is a flash across the screen, which is exactly what a vestibular
 * sensitivity needs removing. So the transforms themselves are dropped and every
 * reveal becomes a plain cross-fade.
 *
 * This block must stay LAST among the rule blocks: it wins on source order at
 * equal specificity, and a media query contributes none.
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bedi-panel,
	.bedi-panel.is-open,
	.bedi-panel.is-dragging {
		transform: none;
	}

	.bedi-icon-button:hover,
	.bedi-icon-button:active,
	.bedi-cat-trigger:hover,
	.bedi-cat-trigger:active,
	.bedi-cats__top:hover .bedi-cats__chevron,
	.bedi-cats__child:hover,
	.bedi-cats__child:focus-visible,
	.bedi-panel__pages-list a:hover,
	.bedi-panel__pages-list a:focus-visible,
	.bedi-panel__account-link:active,
	.bedi-panel.is-dragging .bedi-panel__grip,
	.bedi-brand .custom-logo-link:hover,
	.bedi-utility__link:hover .bedi-utility__icon {
		transform: none;
	}
}

/* =========================================================================
 * 20. PRINT
 *
 * layout.css already hides .bedi-header on paper. These two are repeated
 * because the panel and its backdrop are position: fixed, and a fixed element
 * that escaped that rule would print on every page of the document.
 * ====================================================================== */

@media print {
	.bedi-panel,
	.bedi-panel-backdrop {
		display: none !important;
	}
}

/* =========================================================================
 * CATEGORY ICONS IN THE MEGA PANEL
 *
 * Same 20px box as the home page's rail, for the same reason it has one: the
 * box is drawn whether or not there is an icon in it, so every heading in the
 * grid starts on one vertical line.
 * ====================================================================== */

.bedi-cats__icon {
	align-items: center;
	color: var(--bedi-accent);
	display: inline-flex;
	flex: none;
	block-size: 20px;
	inline-size: 20px;
	justify-content: center;
	/* The name sits beside it rather than under it, so the row has to be a
	   flex line — .bedi-cats__top is already one. */
	margin-inline-end: var(--bedi-space-2);
}

.bedi-cats__icon-img {
	block-size: 20px;
	display: block;
	inline-size: 20px;
	/* contain, not cover: these are client-uploaded marks of varying aspect and
	   cropping one to a square cuts the symbol in half. */
	object-fit: contain;
}

/*
 * The fallback ring, at the muted weight. It is a placeholder rather than a
 * symbol, so it should not read as loudly as a real icon beside it.
 */
.bedi-cats__icon-default {
	color: var(--bedi-rule-strong);
}

.bedi-cats__top:hover .bedi-cats__icon-default,
.bedi-cats__top:focus-visible .bedi-cats__icon-default {
	color: var(--bedi-accent);
}