/*
 * el-controls.css
 *
 * .menu-open / .menu-close / .top-scroll / .bottom-scroll were
 * <a href="javascript:void(0)">. Google reports javascript: hrefs as uncrawlable
 * links, and these are not links -- they act on the current page. They are now
 * <button type="button">.
 *
 * A <button> arrives with user-agent chrome an <a> never had. This file strips it
 * back to anchor-like defaults so el-legacy.css can style them exactly as before.
 *
 * SPECIFICITY IS THE WHOLE TRICK HERE. Two different problems pull in opposite
 * directions:
 *
 *   1. UA/Reboot rules on the bare `button` element are (0,0,1). A plain class
 *      selector (0,1,0) beats them. That is all the reset below needs.
 *
 *   2. Reboot also has `button:not(:disabled){cursor:pointer}` and `button:focus`,
 *      both (0,1,1). A plain class cannot beat those, so those two -- and ONLY
 *      those two -- are written as `button.top-scroll` (0,1,1) and win on order,
 *      since this sheet loads after el-grid.
 *
 * Do NOT raise the reset block to `button.top-scroll`. el-legacy.css styles these
 * controls with plain class selectors (0,1,0) -- e.g. `.top-scroll{color:#fff;
 * font-size:12px; text-transform:uppercase; font-weight:700; padding-top:15px}`.
 * At (0,
1,
1) this file would outrank the theme's own design regardless of order,
* which is exactly what happened on 2026-07-09: the back-to-top control lost its
 * white colour,
uppercasing and size,
and rendered as visible body text on the
 * checkout page. Keep the reset at (0,
1,
0) so el-legacy.css,
loading later,
not `href="#"`,
so Google does not
 * flag them. Do not convert them.
 */

.menu-open,
.menu-close,
.top-scroll,
.bottom-scroll{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/* Firefox's inner focus border. */
.menu-open::-moz-focus-inner,
.menu-close::-moz-focus-inner,
.top-scroll::-moz-focus-inner,
.bottom-scroll::-moz-focus-inner {
	padding: 0;
	border-style: none;
}

/* ---- (0,1,1): the only two things that must outrank Reboot ---- */

/* el-legacy.css hides the native cursor on links (a{cursor:none!important}) because
   el-cursor.js draws its own. Reboot's button:not(:disabled){cursor:pointer} is
   (0,1,1), so a plain class cannot beat it. */

/* Reboot sets button:focus{outline:1px dotted} at (0,1,1). */
button.menu-open:focus,
button.menu-close:focus,
button.top-scroll:focus,
button.bottom-scroll:focus {
	outline: 0;
}

/* Keyboard focus ring. These are Tab-reachable buttons now; the javascript: anchors
   they replaced were not usefully focusable. */
button.menu-open:focus-visible,
button.menu-close:focus-visible,
button.top-scroll:focus-visible,
button.bottom-scroll:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
