/* ==========================================================================
   WENEX ACCESSIBILITY LAYER — TARGET SIZE
   --------------------------------------------------------------------------
   Repairs every sub-44px control measured on the live estate
   (deploy/verification/touch-targets/findings.json — 62 findings, 10 pages).

   TWO RULES GOVERN EVERYTHING BELOW.

   1 · A TARGET IS THE CLICKABLE AREA, NOT THE INK.
       Where a control is deliberately small — an 8px colour dot, a 16px info
       trigger — the repair expands the hit area with a pseudo-element and
       leaves the ink exactly where the designer put it. Enlarging the visible
       mark would be a redesign, and redesign is out of scope here.

   2 · INLINE LINKS INSIDE RUNNING TEXT ARE NOT REPAIRED.
       WCAG 2.5.8 exempts them, and padding them breaks the line rhythm of the
       prose they live in. Deliberately NOT touched, each verified as genuine
       prose in deploy/verification/touch-targets/context.json:
         · em > a "Shipping Policy" / "Warranty Policy" / "Returns & Refunds"
         · span.posted_in > a  ("Category: Audio")
       These are recorded as exemptions in the delivery report, not as passes.

   Every rule here is additive CSS. Nothing edits a page, a post, a template,
   a frozen composition, or any closed baseline.
   ========================================================================== */

:root {
	--wxa-target: 44px;   /* the WENEX standard */
	--wxa-min:    24px;   /* WCAG 2.5.8 AA floor, used where pitch forbids 44 */
}

/* ==========================================================================
   1 · ICON CONTROLS — hit area grows, ink does not move
   ========================================================================== */

/* WCHS info triggers: 16x16 on /business/, below even the AA floor. Five
   instances on one page, and the same stylesheet ships inside wenex-b2b,
   wenex-club, wenex-creators and wenex-wdxs (four byte-identical copies) —
   so this single rule repairs all four without touching any of them. */
.wchs-trigger {
	position: relative;
}

.wchs-trigger::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: var(--wxa-target);
	block-size: var(--wxa-target);
	/* invisible, and never intercepts anything the trigger itself would not */
}

[dir="rtl"] .wchs-trigger::after {
	transform: translate(50%, -50%);
}

/* PDP gallery: prev/next 40x40, zoom trigger 36x36. No neighbours within
   44px (measured x=22 / x=308 / x=318), so these grow outright. */
.wx-gal-nav,
.woocommerce-product-gallery__trigger {
	min-inline-size: var(--wxa-target);
	min-block-size: var(--wxa-target);
}

/* ==========================================================================
   2 · ORBIT COLOUR DOTS — the one control the standard cannot fully reach
   --------------------------------------------------------------------------
   Measured: 8x8 dots on a 16px pitch. A 44px hit area on a 16px pitch would
   overlap its neighbours nearly threefold and select the wrong colour — worse
   than the defect. Reaching 44px honestly requires a 44px pitch, which widens
   the row from 56px to 176px: a layout change to a live product surface, and
   a design decision rather than an accessibility repair.

   So this takes the dots to the WCAG 2.5.8 AA floor and stops there, on
   purpose: 24px hit area on a 24px pitch, ink untouched at 8px. The remaining
   gap to the WENEX 44px standard is recorded as an ACCEPTED RISK with an
   owner decision attached, not silently closed.
   ========================================================================== */

/* The pitch is owned by `.wx-buy.wx-on1 .wx-buy__dots` — three classes, in an
   inline <style> block that the shell prints inside the BODY. Two overrides
   failed here before this one worked, and both failures were silent:
     · one class  (0,1,0) — lost on specificity
     · three classes (0,3,0) — tied on specificity and still lost, because a
       body <style> resolves after any head-enqueued sheet, so "load later"
       was never available as a tiebreak
   Four classes wins outright, independent of load order, without !important —
   which keeps the rule overridable by anything genuinely more specific. */
.wx-buy .wx-buy__stage .wx-buy__dots.wx-buy__dots {
	gap: 16px;   /* 8px dot + 16px gap = 24px pitch = no overlapping hit areas */
}

.wx-buy__dot {
	position: relative;
}

.wx-buy__dot::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	inline-size: var(--wxa-min);
	block-size: var(--wxa-min);
}

/* ==========================================================================
   3 · BUTTONS THAT ARE MERELY SHORT
   ========================================================================== */

/* Elementor buttons measured at 39px and 41px on the live Orbit page. One
   button on that same page — "Shop Orbit V2" — already carries min-height
   44px, so this is not a new convention: it is the existing convention,
   applied everywhere instead of once.
   inline-flex is required because min-height does not centre text in an
   inline-block; Elementor's own content wrapper is already a flex child. */
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--wxa-target);
}

/* ==========================================================================
   4 · LINK ROWS THAT ARE CONTROLS, NOT PROSE
   --------------------------------------------------------------------------
   Each of these is a row of destinations a visitor taps, not a sentence they
   read. They grow their line box; nothing else on the page moves.
   ========================================================================== */

/* Breadcrumbs — 35x17 on the PDP and the shop archive. */
.woocommerce-breadcrumb a {
	display: inline-block;
	padding-block: 13px;
	line-height: 18px;
}

/* Bag / checkout trust row — "30-day returns · 12-month warranty · UAE delivery" */
.wx-bag-trust a {
	display: inline-block;
	padding-block: 14px;
	line-height: 16px;
}

/* Variation reset — "Clear" is a control, and it sits alone in its cell. */
.reset_variations {
	display: inline-block;
	padding-block: 14px;
	line-height: 16px;
}

/* ==========================================================================
   5 · REVIEW STAR PICKER
   --------------------------------------------------------------------------
   Measured 24x24 on a 28px pitch: already at the AA floor horizontally, and
   the pitch forbids widening past 28px without overlapping the next star.
   Height is free, so height is taken to 44px. Result: 24x44 — AA met, and
   the easiest axis to hit on a phone is the one that grows.
   ========================================================================== */

.comment-form-rating .stars a {
	display: inline-block;
	min-block-size: var(--wxa-target);
	line-height: var(--wxa-target);
}

/* ==========================================================================
   6 · NOTHING BELOW CHANGES SIZE — only what is measurable when focused
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wx-gal-nav,
	.woocommerce-product-gallery__trigger,
	.elementor-button {
		transition: none;
	}
}

@media print {
	.wchs-trigger::after,
	.wx-buy__dot::after { content: none; }
}