/* Slider Revolution accessibility controls (t-111).
   Visual starting point is t-098's Shopper Approved row: 28px squares, transparent at rest, brand
   action background on hover/focus. Left-aligned under the module rather than centred. */

/* One height for both overlaid pills — the control row and the destination link. Eric asked for them
   to be identical; a variable means changing the button size moves both rather than leaving the two
   to drift. 28px button + 2px padding top and bottom = 32. */
:root {
	--hal-rs-control-size: 28px;
	--hal-rs-control-pad: 2px;
	--hal-rs-control-h: calc(var(--hal-rs-control-size) + (2 * var(--hal-rs-control-pad)));
	/* The chip the controls and the link sit in on the phone strip — one step lighter than the
	   #252525 bar so they read as controls rather than floating glyphs. White on it is 11.4:1. */
	--hal-rs-chip-bg: #444;
}

.hal-rs-controls,
.hal-rs-link {
	height: var(--hal-rs-control-h);
	box-sizing: border-box;
}

/* Overlaid on the slider's bottom-left rather than sitting below it: a row between the module and the
   dark tagline bar broke the two apart (Eric, t-111). 85% white so the glyphs stay legible over any
   photograph without hiding much of it. */
/* The rail spans the module and does the positioning; the .container inside it (the theme's own,
   so no width stops are restated here) does the centring; the row inside that shrinks to content
   and sits at the column's left edge. That is what keeps it aligned with the copy below on a
   full-bleed module like home-green's. */
.hal-rs-rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	pointer-events: none; /* the rail is a shell; only the row itself is clickable */
}

.hal-rs-rail .hal-rs-controls {
	pointer-events: auto;
}

.hal-rs-controls {
	display: inline-flex;
	justify-content: flex-start;
	gap: 2px;
	padding: var(--hal-rs-control-pad) 4px;
	background: rgba(255, 255, 255, .7);
	border-top-right-radius: 4px;
}

.hal-rs-btn {
	/* iOS Safari keeps -webkit-appearance: push-button on a <button> whatever else you set, which
	   renders the glyph in the system blue accent. `border: 0` and a transparent background do not
	   turn it off; only this does. Same reset the add-to-cart button already carries. */
	-webkit-appearance: none;
	appearance: none;
	/* Native buttons also ignore the inherited face and use the system UI font. */
	font-family: inherit;
	/* Second guard on the play glyph's emoji presentation; the U+FE0E in revslider-a11y.js is the
	   one that actually does the work, since this property is not everywhere yet. */
	font-variant-emoji: text;
	width: var(--hal-rs-control-size);
	height: var(--hal-rs-control-size);
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	/* Dark rather than muted: the backing is only 60% white, so the glyph composites over whatever
	   the photograph happens to be. Worst case is a black slide — 0.6x255 = 153 behind #252525,
	   which still measures 5.4:1, comfortably past the 3:1 these non-text glyphs need. */
	color: var(--hal-color-ink, #252525);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}

/* Bold and outlined, never filled — Eric, 2026-08-04: "I dont think buttons should be green when
   active, just bold and outlined works." One treatment for hover, focus, press and paused, so the
   difference between them is DURATION rather than appearance. */
.hal-rs-btn:focus-visible,
.hal-rs-btn.is-active,
.hal-rs-btn.is-paused {
	background: transparent;
	color: var(--hal-color-ink, #252525);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px var(--hal-color-ink, #252525);
}

/* :hover is gated because iOS LATCHES it — a tap leaves the element in :hover until the user taps
   something else, so every button pressed stayed visibly outlined (Eric, 2026-08-06). Outlined
   means PAUSED on this row, so a stuck hover was actively lying about the state. */
@media (hover: hover) {
	.hal-rs-btn:hover {
		background: transparent;
		color: var(--hal-color-ink, #252525);
		font-weight: 700;
		box-shadow: inset 0 0 0 1px var(--hal-color-ink, #252525);
	}
}

/* `.is-active` is a FLASH — the script removes it after ~220ms. Pressing an arrow key must not leave
   a control looking latched, because latched means paused here. */

/* The current slide's destination (t-118). Bottom RIGHT, mirroring the control row at bottom left and
   sharing its backing and its outlined hover/focus — Eric: "in the same style as our overlaid
   controls". It appears and disappears with the slide and has no transition of its own. */
.hal-rs-link {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 60%;
	padding: 0 10px;
	/* .7 — Eric, 2026-08-06: "It's always there. I dont want it to be any brighter than it has to be."
	   Both overlays now share one value; it was .6 (too light, 2026-08-05), then .8. */
	background: rgba(255, 255, 255, .7);
	border-top-left-radius: 4px;
	/* #000, not the ink token — "darken the font", same message. Against the worst case (a black
	   photograph under 70% white) the label reads 10.02:1, and 16.83:1 on hover. */
	color: #000;
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	/* one line, so the fixed height above can never clip a second one */
	white-space: nowrap;
}

.hal-rs-link[hidden]
{display: none;}

/* Opacity and colour only — NEVER font-weight. Eric, 2026-08-05: "the hover cannot just be bold, the
   layout looks bad as the whole thing jogs." Bolding reflows the text and shifts the whole pill, since
   it is sized by its content and pinned to the right edge. */
.hal-rs-link:hover,
.hal-rs-link:focus-visible {
	/* .9, NOT #fff — Eric, 2026-08-06: at solid white the pill "matches the white bg and looks bad".
	   The hover step is the opacity now (.7 -> .9) rather than a colour change. */
	background: rgba(255, 255, 255, .9);
	color: #000;
	/* `body a:hover` (t-042's sitewide underline system) outranks `.hal-rs-link`, so the underline has
	   to be turned off in the HOVER rule — setting it only at rest is not enough. */
	text-decoration: none;
}

/* Focus still needs an indicator a hover state does not supply (2.4.7). box-shadow is safe here —
   it paints outside the layout, so it cannot jog anything. */
.hal-rs-link:focus-visible {
	box-shadow: inset 0 0 0 2px var(--hal-color-ink, #252525);
}

.hal-rs-link-glyph
{font-size: 15px;}

/* 980, and DELIBERATELY not the filter's 900 — Eric 2026-08-06, who showed the pair: at 979 the
   header is the MOBILE one (hamburger, icon row) and at 980 the full desktop nav appears. That
   979/980 seam is the theme's own, already all over this file, and it is what the slider tracks:
   the controls move out of the image exactly where the page stops being the desktop layout.
   The filter's 900 answers a different question — where the plugin starts stacking its facets
   two-up (`width: 50% !important` in its own styles.css). Two unrelated causes that happen to
   produce similar numbers; do not "tidy" them into one.
   The label is the only text here, so it wraps rather than being clipped. */
@media (max-width: 980px) {
	.hal-rs-link {
		max-width: 70%;
		font-size: 12px;
	}

	/* BELOW the module on a phone, not over it. Eric 2026-08-06: "It's a tiny window as it is, we
	   cannot cover it" — the module is ~134px tall at 402 and the overlaid row took 32 of them, a
	   quarter of the image. Both overlays move into one full-width strip directly beneath it.
	   The module is overflow: visible, so `top: 100%` needs no DOM move, and the margin below
	   reserves the space rather than letting the strip cover what follows.

	   TWO SCHEMES, because the strip has to belong to what sits under it. The homepage runs into the
	   dark .callout, so there it is dark with light controls and the two meet as one band. Every
	   other page has light content below, where a dark strip reads as an orphan — Eric 2026-08-06:
	   "the same as the bar below the slider, which is light". Light is therefore the DEFAULT and
	   dark is the homepage exception, so a new template gets the right one without being listed. */
	/* No full-width band on a light page — Eric 2026-08-06: "why is there a greige background that
	   isn't the controls?". The band only earns its place where it continues the black .callout;
	   over white content it was a greige slab the controls did not fill. Rail transparent, chip
	   only, and the chip itself lighter again ("still too dark for grey"). */
	body {
		--hal-rs-bar-bg: transparent;
		--hal-rs-chip-bg: #f0f0f0;
		--hal-rs-fg: var(--hal-color-ink, #252525);
	}

	/* Keyed on the dark bar ITSELF, not on being the homepage — Eric 2026-08-06: "any page with the
	   black bar needs the light on dark styling". solid-rugs is the case that proved it: it takes
	   paid traffic and carries the same .callout, so a body.home test had it light against a black
	   band. This way a page opts in by having the bar, and nothing needs listing.
	   #252525 is the .callout and footer surface, so strip and callout meet with no seam. Chip
	   darkened to #333 on Eric's call; note it now sits 1.21:1 against the strip rather than #444's
	   1.57:1, so the box reads more softly — to get darker AND clearly a box, move the strip. */
	body:has(.full-width.callout) {
		--hal-rs-bar-bg: #252525;
		--hal-rs-chip-bg: #333;
		--hal-rs-fg: #fff;
	}

	sr7-module {
		margin-bottom: var(--hal-rs-control-h);
	}

	/* On a callout page the strip must butt straight into the black bar, so the margin is exactly the
	   strip height. Everywhere else the content below starts immediately under it with nothing to
	   separate them — Eric 2026-08-06, "we now need some spacing between the top headline and the
	   navbar" — so those pages get the strip height plus a gap. */
	body:not(:has(.full-width.callout)) sr7-module {
		margin-bottom: calc(var(--hal-rs-control-h) + 18px);
	}

	/* gap: 0 with the radius only on the outer buttons makes the three read as ONE box — Eric:
	   "we can't just have the buttons floating on the black … it needs the same bounding box as
	   before". The chip is one step off the strip in whichever direction the scheme runs. */
	/* The STRIP is the rail on a phone — full width, edge to edge, so it meets the callout with no
	   seam. The row inside it keeps only the chip. */
	.hal-rs-rail {
		top: 100%;
		bottom: auto;
		background: var(--hal-rs-bar-bg);
	}

	.hal-rs-controls {
		gap: 0;
		justify-content: flex-start;
		background: transparent;
		border-top-right-radius: 0;
	}

	.hal-rs-link {
		top: 100%;
		bottom: auto;
		right: 4px;
		background: var(--hal-rs-chip-bg);
		border-radius: 4px;
	}

	.hal-rs-btn {
		background: var(--hal-rs-chip-bg);
		border-radius: 0;
	}

	.hal-rs-btn:first-of-type {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}

	.hal-rs-btn:last-of-type {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	/* 11.4:1 on the dark chip, 9.82:1 on the light one. Keeps the single treatment the desktop row
	   uses for focus, press and paused, so those differ by DURATION rather than appearance. */
	.hal-rs-btn,
	.hal-rs-link {
		color: var(--hal-rs-fg);
	}

	.hal-rs-btn:focus-visible,
	.hal-rs-btn.is-active,
	.hal-rs-btn.is-paused {
		background: var(--hal-rs-chip-bg);
		color: var(--hal-rs-fg);
		box-shadow: inset 0 0 0 1px var(--hal-rs-fg);
	}

	.hal-rs-link:focus-visible {
		box-shadow: inset 0 0 0 2px var(--hal-rs-fg);
	}

	/* The vendor arrows (back by Eric's 2026-08-05 call) and the bullet strip are too small to hit
	   or read at this size — Eric 2026-08-06: "we have to be ruthless and keep the area clean".
	   Hidden on phones ONLY; they stay on pointer devices, and our own row remains the keyboard and
	   screen-reader path at every width, so nothing is lost by removing them here.
	   Element AND class forms: hal_rs_vendor_arrows() queries `sr7-arrow` as an element, while
	   t-120 refers to `.sr7-bullet-title`, so SR7 emits both shapes depending on the build. */
	sr7-arrow,
	sr7-bullets,
	sr7-bullet,
	sr7-thumbs,
	sr7-tabs,
	[class*="sr7-arrow"],
	[class*="sr7-bullet"],
	[class*="sr7-thumb"],
	[class*="sr7-tab"],
	.rs-arrow,
	.rs-bullets,
	.tp-leftarrow,
	.tp-rightarrow,
	.tp-bullets {
		display: none !important;
	}
}

/* Vendor arrows are BACK — Eric, 2026-08-05: "let's put the left and right buttons back on the
   sliders, people can use them if they want to." They were hidden by t-111 as a duplicate affordance.
   They stay POINTER-ONLY: hal_rs_vendor_arrows() keeps them aria-hidden and out of the tab order, so
   the injected control row remains the single keyboard and screen-reader path and nothing announces
   prev/next twice. Showing a focusable aria-hidden control is the aria-hidden-focus defect fixed on
   the slide layers this session — do not simply drop the tabindex handling. */

/* Forced colors drops our background, so the control needs an outline to stay identifiable. */
@media (forced-colors: active) {
	.hal-rs-btn {
		border: 1px solid ButtonBorder;
		color: ButtonText;
	}

	.hal-rs-btn:hover,
	.hal-rs-btn:focus-visible,
	.hal-rs-btn.is-active,
	.hal-rs-btn.is-paused {
		background: Highlight;
		color: HighlightText;
	}

	.hal-rs-link {
		border: 1px solid LinkText;
		color: LinkText;
	}

	.hal-rs-link:hover,
	.hal-rs-link:focus-visible {
		background: Highlight;
		color: HighlightText;
	}
}