/**
 * SIZES ARE IN PIXELS, DELIBERATELY, AND MUST STAY THAT WAY.
 *
 * They were rem until 2026-09-02, when the form was measured on seventeen
 * themes and eight of them resized the root: OceanWP pins html to 10px (the
 * "62.5% trick"), Woodmart and Woostify to 14px, Astra and Porto reach ~14.6px
 * on mobile. Every rem in here is relative to that root, so the whole form
 * shrank with it - on OceanWP the trigger read 10.6px instead of 17px and the
 * fine print 8.1px, which is not small, it is unreadable.
 *
 * rem buys nothing back on those themes either: a theme that hardcodes the root
 * has already overridden the reader's own font-size preference for the entire
 * site. Browser zoom, which is how that preference is actually exercised,
 * scales px perfectly well. The numbers below are the old rem values times 16
 * and render identically wherever the root was 16px to begin with.
 *
 * BrikMentor - back-in-stock signup, storefront styles.
 *
 * LOGICAL PROPERTIES ONLY. No margin-left/right, no padding-left/right, no
 * text-align: left/right, no left:/right:. Arabic is a maintained locale and
 * there is deliberately no separate -rtl.css to keep in sync, so the layout has
 * to mirror itself. Five values cannot be written logically - the four offset
 * shadows the hard-edge look is built on and the nudge its button makes when
 * pressed, all of which need a real x-axis - and every one of them is mirrored
 * in the [dir="rtl"] block at the end, along with the badge's tilt.
 *
 * RADII ARE NOT THE ADMIN RADII, on purpose. The admin design system documents
 * 0.5rem and 0.75rem, and this file uses 6, 7, 9, 10 and 14px besides. That is
 * the same carve-out as the palette below: an admin screen is one surface we
 * own, whereas each look here has to sit convincingly inside somebody else's
 * theme, and a card look that softens and a hard-edge look that does not are
 * the whole point of offering three. The values are per look and live in the
 * --bmsw-radius / --bmsw-field-radius tokens at the top of each look block.
 *
 * THREE LOOKS, ONE SHEET. The merchant picks one in the flow settings and it
 * arrives as data-look on the root. Everything a look changes is a --bmsw-*
 * token, so a fourth one would be a token block rather than another stylesheet.
 *
 * STILL NO PALETTE IMPORT. This renders inside somebody else's theme, so the
 * defaults are currentColor / Canvas / CanvasText: the shop's own ink and paper,
 * which also means the form follows a dark theme without being told about it.
 * A merchant who wants their brand colour sets one, and only then does a literal
 * hex enter this file - inline, on the root, from PHP.
 */

.brikmentor-stock-watch {
	/* Accent: the one colour a merchant can choose. currentColor by default,
	   so an untouched install still imports nothing. --bmsw-accent-ink is the
	   readable counterpart PHP works out from the chosen hex; with no choice it
	   is Canvas, the shop's own page colour. */
	--bmsw-accent: currentColor;
	--bmsw-accent-ink: Canvas;

	/* THE BUTTON'S FILL AND THE FIELD'S FILL ARE TOKENS, NOT VALUES.
	   Everything else a look changes is a token already; these two were the
	   exception, written straight onto the elements, and both lost an argument
	   they were never meant to have. The submit's :hover/:focus/:active rule at
	   the end of this file is (0,3,0) and so is the look block above it, so the
	   later one won: measured 2026-09-04 on all seventeen themes, the hard
	   look's black button turned #ffd400 on hover AND on focus while its
	   Canvas-white label stayed on top, a contrast of 1.43:1. The field's
	   `background: transparent` was (0,2,0) and Astra's own input fill beat it
	   outright. A token settles both, because every rule that paints one of
	   these now writes the same variable - nothing can repaint a fill without
	   the ink that has to stay legible against it coming along. */
	--bmsw-submit-bg: var(--bmsw-accent);
	--bmsw-submit-ink: var(--bmsw-accent-ink);
	--bmsw-field-bg: transparent;

	--bmsw-radius: 8px;
	--bmsw-field-radius: 8px;
	--bmsw-border: 1px;

	margin-block: 16px;
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
}

.brikmentor-stock-watch *,
.brikmentor-stock-watch *::before,
.brikmentor-stock-watch *::after {
	box-sizing: inherit;
}

.brikmentor-stock-watch[hidden] {
	display: none !important;
}

/* --- Trigger ------------------------------------------------------------ */

.brikmentor-stock-watch .brikmentor-sw-open {
	display: flex;
	align-items: center;
	gap: 11px;
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-align: start;
	cursor: pointer;
}

.brikmentor-stock-watch .brikmentor-sw-open-t {
	flex: 1 1 auto;
}

/* The fill and the icon are two elements on purpose. --bmsw-accent is
   currentColor by default, so an element that carried the fill AND set its
   own colour would redefine currentColor and paint both the same shade -
   a white bell on a white disc. The badge takes the fill, the glyph inside
   it takes the readable counterpart. */
.brikmentor-stock-watch .brikmentor-sw-badge {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	background: var(--bmsw-accent);
	transition: transform 0.18s ease;
}

.brikmentor-stock-watch .brikmentor-sw-ico {
	inline-size: 19px;
	block-size: 19px;
	color: var(--bmsw-accent-ink);
}

.brikmentor-stock-watch .brikmentor-sw-open:hover .brikmentor-sw-badge {
	transform: rotate(-12deg) scale(1.06);
}

.brikmentor-stock-watch .brikmentor-sw-open:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* The chevron. Down when closed, up when open: block-direction only, so it
   means the same thing in Arabic. */
.brikmentor-stock-watch .brikmentor-sw-open::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 7px;
	block-size: 7px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	opacity: 0.55;
	transform: rotate(45deg);
	margin-block-end: 3px;
	transition: transform 0.2s ease;
}

.brikmentor-stock-watch.is-open .brikmentor-sw-open::after {
	transform: rotate(225deg);
	margin-block: 3px 0;
}

/* --- Panel -------------------------------------------------------------- */

.brikmentor-stock-watch .brikmentor-sw-panel {
	margin-block-start: 15px;
	max-inline-size: 416px;
}

.brikmentor-stock-watch .brikmentor-sw-panel[hidden] {
	display: none !important;
}

.brikmentor-stock-watch .brikmentor-sw-label {
	display: block;
	margin-block-end: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.72;
}

.brikmentor-stock-watch .brikmentor-sw-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.brikmentor-stock-watch .brikmentor-sw-row[hidden] {
	display: none !important;
}

.brikmentor-stock-watch .brikmentor-sw-email {
	/* A 128px basis, not 192: a product summary column is often only about
	   300px wide, and the wider basis plus the button exceeded that, so the two
	   stacked on a desktop that had room for them. Measured at 306px in
	   Shoptimizer.

	   The floor matters as much as the basis. It was 0, which let the field
	   shrink to whatever the button left over - on Flatsome that was 119px
	   against a placeholder needing 122, so the first thing the shopper read
	   was "you@example.con". Avada on mobile was worse: 129 against 147. A
	   field too narrow to show its own example address is not a smaller field,
	   it is a broken one, so below this width the button drops to the next line
	   instead and the field takes the whole row. Shoptimizer's 306px column
	   still fits both side by side.

	   150px was not enough. Measured 2026-09-04 at 375px: GeneratePress gave the
	   field 152.6px and Avada exactly 150 - the floor itself - and both drew
	   "you@example.cor". A floor has to cover the STRING PLUS THE CHROME: the
	   widest the placeholder resolved to on any of the seventeen was 133.9px,
	   and the hard look adds 24px of inset and 4px of border around it, so 165
	   is the first round number that clears it. The min() matters as much as the
	   number. A floor taller than the column it sits in would push the field out
	   through the side of the card, and Avada's column at 375px is exactly that
	   narrow, so below the floor the row wraps and the field takes the row -
	   below the COLUMN it takes the column, and the media query near the end of
	   this file hands back some inset so the string still fits. */
	flex: 1 1 128px;
	min-inline-size: min(165px, 100%);
	padding-block: 10px;
	padding-inline: 12px;
	border: var(--bmsw-border) solid color-mix(in srgb, currentColor 38%, transparent);
	border-radius: var(--bmsw-field-radius);
	background: var(--bmsw-field-bg);
	color: inherit;
	font: inherit;
}

.brikmentor-stock-watch .brikmentor-sw-email:focus {
	outline: none;
	border-color: currentColor;
	box-shadow: 0 0 0 1px currentColor;
}

.brikmentor-stock-watch .brikmentor-sw-submit {
	position: relative;
	padding-block: 10px;
	padding-inline: 18px;
	border: var(--bmsw-border) solid transparent;
	border-radius: var(--bmsw-field-radius);
	background: var(--bmsw-submit-bg);
	/* NOT color: here. The fill is currentColor by default, and setting colour
	   on this element would redefine what currentColor means, painting the fill
	   and the label the same shade. The label carries its own colour instead. */
	color: inherit;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.brikmentor-stock-watch .brikmentor-sw-submit-t {
	color: var(--bmsw-submit-ink);
}

.brikmentor-stock-watch .brikmentor-sw-submit:hover:not(:disabled) {
	filter: brightness(0.92);
}

.brikmentor-stock-watch .brikmentor-sw-submit:disabled {
	cursor: default;
}

.brikmentor-stock-watch .brikmentor-sw-submit:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Spinner lives inside the button so the label never jumps width. */

.brikmentor-stock-watch .brikmentor-sw-spin {
	display: none;
}

.brikmentor-stock-watch.is-working .brikmentor-sw-submit-t {
	visibility: hidden;
}

.brikmentor-stock-watch.is-working .brikmentor-sw-spin {
	display: block;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 15px;
	block-size: 15px;
	margin-block-start: -7.5px;
	margin-inline-start: -7.5px;
	border: 2px solid var(--bmsw-submit-ink);
	border-block-start-color: transparent;
	border-radius: 50%;
	animation: brikmentor-sw-spin 0.65s linear infinite;
}

@keyframes brikmentor-sw-spin {
	to { transform: rotate(360deg); }
}

.brikmentor-stock-watch .brikmentor-sw-optin {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-block-start: 12px;
	font-size: 13px;
	cursor: pointer;
}

.brikmentor-stock-watch .brikmentor-sw-optin[hidden] {
	display: none !important;
}

.brikmentor-stock-watch .brikmentor-sw-optin input {
	margin: 3px 0 0;
	flex: 0 0 auto;
}

.brikmentor-stock-watch .brikmentor-sw-fine {
	margin-block: 10px 0;
	font-size: 13px;
	opacity: 0.7;
}

/* --- Outcome -------------------------------------------------------------
 *
 * Four outcomes used to land in one grey paragraph, so success and failure
 * looked identical. Each now carries its own ground rather than a text colour,
 * because a text colour has to be legible against a background this stylesheet
 * has never seen, and a chip does not.
 */

.brikmentor-stock-watch .brikmentor-sw-msg {
	display: none;
	align-items: flex-start;
	gap: 7px;
	margin-block: 12px 0;
	padding-block: 8px;
	padding-inline: 10px;
	border-radius: var(--bmsw-field-radius);
	font-size: 13px;
	font-weight: 600;
}

.brikmentor-stock-watch.is-working .brikmentor-sw-msg,
.brikmentor-stock-watch.is-done .brikmentor-sw-msg,
.brikmentor-stock-watch.is-already .brikmentor-sw-msg,
.brikmentor-stock-watch.is-error .brikmentor-sw-msg {
	display: flex;
}

.brikmentor-stock-watch .brikmentor-sw-msg-ico {
	flex: 0 0 auto;
	inline-size: 15px;
	block-size: 15px;
	margin-block-start: 0.15em;
}

.brikmentor-stock-watch .brikmentor-sw-msg-ico > svg {
	display: none;
	inline-size: 15px;
	block-size: 15px;
}

.brikmentor-stock-watch.is-done .bmsw-i-check,
.brikmentor-stock-watch.is-already .bmsw-i-info,
.brikmentor-stock-watch.is-error .bmsw-i-alert {
	display: block;
}

.brikmentor-stock-watch.is-working .brikmentor-sw-msg {
	background: color-mix(in srgb, currentColor 8%, transparent);
	opacity: 0.75;
}

.brikmentor-stock-watch.is-working .brikmentor-sw-msg-ico {
	display: none;
}

/* THE CHIPS MIX AGAINST THE SHOP'S PAPER, NOT AGAINST WHITE.
 *
 * They used to hardcode both ground and ink, which made them the one thing in
 * this file that ignored its own rule: on a dark shop the confirmation punched a
 * pale rectangle into the page, which is exactly what Canvas/CanvasText is used
 * everywhere else to avoid. Mixing the semantic hue INTO Canvas keeps the
 * meaning (green landed, red did not) while letting the ground follow the theme
 * - pale green on a white shop, deep green on a black one - and mixing the same
 * hue into CanvasText does the same for the text, so the pair stays legible in
 * both directions instead of only the one this stylesheet was written on.
 *
 * The seeds are the two colours the design system actually documents, --success
 * and --error. There is no documented third, so `already` does not invent one:
 * it is a neutral chip and its meaning is carried by its own icon, which the
 * markup already ships.
 *
 * The flat declaration under each is not decoration. color-mix is recent enough
 * that a browser without it drops the whole line, and a chip with no ground is a
 * chip nobody sees - which on the error state is the one message the shopper
 * cannot afford to miss.
 */

.brikmentor-stock-watch.is-done .brikmentor-sw-msg {
	background: #e4f5e1;
	color: #14620f;
	background: color-mix(in srgb, #1a8917 12%, Canvas);
	color: color-mix(in srgb, #1a8917 62%, CanvasText);
}

.brikmentor-stock-watch.is-already .brikmentor-sw-msg {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.brikmentor-stock-watch.is-error .brikmentor-sw-msg {
	background: #fce4e4;
	color: #a02209;
	background: color-mix(in srgb, #d72c0d 12%, Canvas);
	color: color-mix(in srgb, #d72c0d 62%, CanvasText);
}

/* --- Look: plain ---------------------------------------------------------
 * The shop's own ink, given weight. Cannot clash with a theme because it
 * borrows every colour from one. This is the default, including for a store
 * upgrading from a version that had no setting at all.
 */

.brikmentor-stock-watch[data-look="plain"] {
	--bmsw-border: 2px;
	--bmsw-radius: 10px;
	--bmsw-field-radius: 7px;
	padding: 16px 18px;
	border: 2px solid currentColor;
	border-radius: var(--bmsw-radius);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.brikmentor-stock-watch[data-look="plain"] .brikmentor-sw-open {
	font-size: 17px;
	letter-spacing: -0.015em;
}

.brikmentor-stock-watch[data-look="plain"] .brikmentor-sw-badge {
	border-radius: 8px;
}

.brikmentor-stock-watch[data-look="plain"] .brikmentor-sw-panel {
	margin-block-start: 14px;
	padding-block-start: 14px;
	border-block-start: 2px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* --- Look: card ----------------------------------------------------------
 * Canvas and CanvasText rather than white and near-black, so the card follows
 * a dark shop instead of punching a white hole in it.
 */

.brikmentor-stock-watch[data-look="card"] {
	--bmsw-radius: 14px;
	--bmsw-field-radius: 9px;
	--bmsw-field-bg: color-mix(in srgb, CanvasText 3%, transparent);
	padding: 0;
	border: 1px solid color-mix(in srgb, CanvasText 14%, transparent);
	border-radius: var(--bmsw-radius);
	background: Canvas;
	color: CanvasText;
	box-shadow: 0 1px 2px color-mix(in srgb, CanvasText 7%, transparent),
		0 16px 34px -20px color-mix(in srgb, CanvasText 45%, transparent);
	overflow: hidden;
}

.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-open {
	padding-block: 15px;
	padding-inline: 17px;
	font-weight: 600;
	transition: background 0.15s ease;
}

.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-open:hover {
	background: color-mix(in srgb, CanvasText 4%, transparent);
}

.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-badge {
	border-radius: 10px;
}

.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-panel {
	margin-block-start: 0;
	padding-block: 15px 17px;
	padding-inline: 17px;
	border-block-start: 1px solid color-mix(in srgb, CanvasText 10%, transparent);
	max-inline-size: none;
}

.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-email {
	border-color: color-mix(in srgb, CanvasText 24%, transparent);
}

/* --- Look: hard ----------------------------------------------------------
 * Hard border, solid offset shadow, yellow badge. The loudest of the three and
 * the only one with an opinion of its own, so it carries its own accent default
 * rather than the shop's ink; a merchant colour still overrides it inline.
 */

.brikmentor-stock-watch[data-look="hard"] {
	--bmsw-accent: #ffd400;
	--bmsw-accent-ink: #171717;
	/* The one look whose button is not the accent - here the accent is the
	   shadow the button casts, and the button itself is the shop's own ink. */
	--bmsw-submit-bg: CanvasText;
	--bmsw-submit-ink: Canvas;
	--bmsw-border: 2px;
	--bmsw-radius: 10px;
	--bmsw-field-radius: 6px;
	padding: 16px 18px;
	border: 2px solid CanvasText;
	border-radius: var(--bmsw-radius);
	background: Canvas;
	color: CanvasText;
	box-shadow: 5px 5px 0 CanvasText;
}

.brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-badge {
	border: 2px solid CanvasText;
}

.brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-email {
	border-color: CanvasText;
}

.brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-email:focus {
	box-shadow: none;
	background: color-mix(in srgb, var(--bmsw-accent) 18%, transparent);
}

.brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-submit {
	border-color: CanvasText;
	box-shadow: 3px 3px 0 var(--bmsw-accent);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-submit:hover:not(:disabled) {
	filter: none;
	transform: translate(1px, 1px);
	box-shadow: 2px 2px 0 var(--bmsw-accent);
}

/* The confirmation takes focus when the form's row is hidden, so that the
   shopper is not dropped at the top of the document. It is a paragraph, not a
   control, and nothing can Tab to it (tabindex is -1), so it does not carry a
   focus ring: an outline here would only ever appear on a box the reader was
   moved to, never on one they navigated to. */
.brikmentor-stock-watch .brikmentor-sw-msg:focus {
	outline: none;
}

/* CanvasText, not a hardcoded near-black. Every other rule in this look reads
   the shop's own ink so the box follows a dark theme; this one did not, and on
   a dark shop it drew a near-black frame and a near-black offset shadow on a
   near-black page. The one box whose whole job is to be seen was the one that
   disappeared. */
.brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-msg {
	border: 2px solid CanvasText;
	box-shadow: 3px 3px 0 CanvasText;
}

/**
 * A cart button that has stepped aside for the notify button.
 *
 * Its own class rather than an inline style: the theme decides how that button
 * is laid out, and writing a display value back onto it when the shopper picks
 * a different option would be guessing at something we never knew.
 */
.brikmentor-stock-watch .brikmentor-sw-stood-down {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   WHAT `font: inherit` DOES NOT COVER.
   Every selector in this section is scoped to .brikmentor-stock-watch on
   purpose. Measured 2026-09-03 on WoodMart: its button rule is
   `:is(.btn, .button, button, [type="submit"], [type="button"])`, and the
   specificity of :is() is that of its strongest argument - .btn, which is
   exactly the (0,1,0) an unscoped `.brikmentor-sw-open` has. A tie is settled
   by load order and the theme prints its sheet after ours, so it won and the
   label sat centred in its own frame. The root class buys the one step that
   settles it on specificity instead of order, with no !important anywhere.
   The per-look rules are stronger again and still decide.
   The trigger, the field and the button all take `font: inherit` so they read
   as the shop's own type rather than ours. That shorthand carries family, size,
   weight, style and line-height - and NOTHING ELSE. text-transform and
   letter-spacing are not in it, so a theme styling bare `button` reaches
   straight through.
   Measured 2026-09-02: Flatsome and Woodmart turned "Notify me when it is back"
   into NOTIFY ME WHEN IT IS BACK and opened the button's letter-spacing;
   Flatsome also made the consent line bold, Twenty Twenty-Five made it light
   and Astra made it medium; Avada added tracking to the fine print. None of it
   was a layout fault, which is why a matrix that measured only position and
   reachability passed every one of them.
   Declared here rather than beside each rule so the list of what the form
   refuses to inherit stays in one readable place. The per-look rules ABOVE
   carry an attribute selector as well as a class, so they outweigh these
   single-class ones and still win where they set one of these on purpose -
   the trigger's tightened tracking in the plain look. The label's uppercase is
   ours as well, and is restated below rather than left to specificity, because
   it is in this very list.
   --------------------------------------------------------------------------- */
.brikmentor-stock-watch .brikmentor-sw-open,
.brikmentor-stock-watch .brikmentor-sw-open-t,
.brikmentor-stock-watch .brikmentor-sw-submit,
.brikmentor-stock-watch .brikmentor-sw-submit-t,
.brikmentor-stock-watch .brikmentor-sw-email,
.brikmentor-stock-watch .brikmentor-sw-fine,
.brikmentor-stock-watch .brikmentor-sw-optin,
.brikmentor-stock-watch .brikmentor-sw-label,
.brikmentor-stock-watch .brikmentor-sw-msg {
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
	text-indent: 0;
	text-shadow: none;
	/* Measured 2026-09-03 on WoodMart: it centres button text, and because the
	   trigger is a flex row that centred the bell and the label together as a
	   block while the chevron stayed pinned right - the label ended up floating
	   in the middle of its own frame. text-align alone is not enough on a flex
	   container, which is why justify-content is spelled out beside it. */
	text-align: start;
	justify-content: flex-start;
}
.brikmentor-stock-watch .brikmentor-sw-label {
	/* Ours on purpose, and restated so the reset above cannot flatten it. */
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.brikmentor-stock-watch .brikmentor-sw-fine,
.brikmentor-stock-watch .brikmentor-sw-optin {
	/* A shop that makes every label bold should not make the small print shout. */
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
   AND WHAT THE RESTING STATE DOES NOT COVER: HOVER, FOCUS AND ACTIVE.
   The base rules paint the trigger transparent, but `.brikmentor-sw-open` is
   (0,1,0) and a theme's `button:hover` is (0,1,1), so the theme owns every
   state we did not write down. Measured 2026-09-02 on Astra with the hard
   look: pointing at "Notify me when it is back" filled the whole row with
   Astra's link blue and turned the text white, inside our own black frame.
   Astra also puts a small drop shadow on it at rest, which nothing asked for.
   The feedback this control is meant to give is the bell tilting, and that
   still happens. The per-look rules ABOVE carry an attribute selector too and
   keep winning, which is how the card look holds on to its tinted hover.
   --------------------------------------------------------------------------- */
/* The type the form borrows is the SHOP'S TEXT, not the shop's buttons.
   `font: inherit` says so, but it sits at (0,1,0) and WoodMart's button rule -
   the same :is(.btn, .button, button, ...) - sets
   `font-size: var(--btn-font-size, 13px)` at that same weight and wins on load
   order. Measured 2026-09-03: the trigger dropped to 13px, the exact size of
   the fine print under it, so the heading of the form and its smallest line
   read as one. Restated with the root class to settle it on specificity. The
   weight comes with it because the shorthand would otherwise reset the 700 the
   base rules set right after it, and the per-look rules at (0,3,0) still carry
   the plain look's 17px and the card look's 600. */
.brikmentor-stock-watch .brikmentor-sw-open,
.brikmentor-stock-watch .brikmentor-sw-submit {
	font: inherit;
	font-weight: 700;
}

/* The field's corner, one step further up again.
   Themes style inputs by TYPE, and `.woocommerce input[type="email"]` is
   (0,2,1) - one attribute more than the root class buys. Measured 2026-09-03 on
   Astra: it flattens the field to 0 while the button beside it keeps its 6px,
   so the two halves of one row disagree. Going through the panel makes this
   (0,3,0) without an attribute of our own and without !important.
   The fill sits here now for the same reason - Astra paints its inputs white
   and beat the (0,2,0) base rule - and it is safe to list beside the radius
   only because the fill is a TOKEN: the look blocks set --bmsw-field-bg rather
   than a background, so this rule cannot overrule them the way a literal here
   would. Nothing without a token behind it belongs in this block.
   AND THE HEIGHT, which was the last thing the row inherited. This sheet gave
   the field and the button the same inset and the same border and then never
   said how tall either was, so the input's height came from the theme:
   measured 2026-09-04, `input[type="email"] { height: 2.507em }` in Flatsome
   made the field 37.6px against a 46.5px button, and Astra, Blocksy,
   Shoptimizer, WoodMart and Minimog each disagreed by their own amount - one of
   them the other way. `auto` hands it back to the padding and the line-height,
   which are ours and are the same on both halves. */
.brikmentor-stock-watch .brikmentor-sw-panel .brikmentor-sw-email {
	border-radius: var(--bmsw-field-radius);
	background: var(--bmsw-field-bg);
	block-size: auto;
}

.brikmentor-stock-watch .brikmentor-sw-open {
	box-shadow: none;
}
.brikmentor-stock-watch .brikmentor-sw-open:hover,
.brikmentor-stock-watch .brikmentor-sw-open:focus,
.brikmentor-stock-watch .brikmentor-sw-open:active {
	background: transparent;
	color: inherit;
	border-color: transparent;
	box-shadow: none;
}
.brikmentor-stock-watch[data-look] .brikmentor-sw-submit,
.brikmentor-stock-watch[data-look] .brikmentor-sw-submit:hover,
.brikmentor-stock-watch[data-look] .brikmentor-sw-submit:focus,
.brikmentor-stock-watch[data-look] .brikmentor-sw-submit:active {
	/* One fill for the resting state and all three interactive ones, so there
	   is no second rule for a look block to tie with. The old version wrote
	   var(--bmsw-accent) here and claimed the look rules "still decide" the hard
	   look's solid fill - they do not: [data-look="hard"] .brikmentor-sw-submit
	   and .brikmentor-stock-watch .brikmentor-sw-submit:hover are both (0,3,0)
	   and this file prints the hover one later, so hard's black button went
	   yellow under the pointer and stayed yellow under keyboard focus, with a
	   white label on it. Reading the token is what fixes it; the [data-look]
	   here is only so a theme's own button:hover cannot get in either. */
	background: var(--bmsw-submit-bg);
}

/* WHAT A THEME CAN STILL REACH AT (0,2,1).
   The reset block further up is (0,2,0), which loses to any theme rule that
   names an element as well as two classes. Measured 2026-09-04 on Neve:
   `.woocommerce .cart button { justify-content: center }` is exactly that, and
   it took the trigger - the bell and the label centred as a block while the
   chevron stayed pinned to the end. It cost nothing visible only because the
   label carries `flex: 1 1 auto` and leaves no free space to centre, which is
   luck, not a design. The attribute we already print on the root buys the step
   that settles it. ONLY properties no look ever sets are repeated here: the
   plain look's font-size and tracking, the card look's weight and padding all
   live at this same (0,3,0) and would be flattened by a block that came after
   them and listed those. */
.brikmentor-stock-watch[data-look] .brikmentor-sw-open,
.brikmentor-stock-watch[data-look] .brikmentor-sw-open-t,
.brikmentor-stock-watch[data-look] .brikmentor-sw-submit,
.brikmentor-stock-watch[data-look] .brikmentor-sw-submit-t {
	font-style: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	text-align: start;
	justify-content: flex-start;
}

.brikmentor-stock-watch[data-look] .brikmentor-sw-submit-t {
	color: var(--bmsw-submit-ink);
}

/* AND THE TWO BUTTONS' HEIGHT, which is the same fault as the field's.
   This sheet says how much to pad them and never how tall they are, so a theme
   that sizes buttons by height decides. Measured 2026-09-04 on Minimog:
   `.button, button, input[type="submit"] { height: 45px; line-height: 43px }`
   held the submit at 45px beside a 46.5px field - the row uneven in the other
   direction from Flatsome, which is why an eye passes over it and a number does
   not. `auto` gives the height back to the padding and the line-height, and the
   line-height is restated with it because that same rule tried for it too. */
.brikmentor-stock-watch[data-look] .brikmentor-sw-open,
.brikmentor-stock-watch[data-look] .brikmentor-sw-submit {
	block-size: auto;
	line-height: inherit;
}

/* THE ERRORED FIELD'S RED, one step up for the third time.
   This was written next to the chips near the top of the file, which put it
   BEFORE the look blocks, and `.brikmentor-stock-watch.is-error
   .brikmentor-sw-email` is (0,3,0) - the same as `[data-look="hard"]
   .brikmentor-sw-email { border-color: CanvasText }` that comes after it. So on
   the two looks that colour the field, the one message the shopper cannot
   afford to miss drew a 1px red halo around a black border. Measured
   2026-09-04. It lives down here now, with the attribute, so it outranks the
   look instead of losing to it, and it is listed after the hard look's own
   :focus rule so an errored field that still has the cursor in it is red rather
   than merely tinted. */
.brikmentor-stock-watch[data-look].is-error .brikmentor-sw-email {
	border-color: #d72c0d;
	box-shadow: 0 0 0 1px #d72c0d;
}

/* THE BOX'S OWN MARGIN, one step up for the same reason.
   `.brikmentor-stock-watch` is (0,1,0) and a theme's child rule can be too, and
   then load order decides and the theme prints last. Measured 2026-09-04 on
   WoodMart: `.wd-set-mb > * { margin-bottom: var(--wd-mb) }` took the bottom
   margin to 20px while the top stayed 16, so the box sat off-centre in its own
   gap. Only where the form is printed at product level - the variation-level
   one is deeper in the tree and out of that rule's reach, which is why four
   products looked right and the fifth did not. */
.brikmentor-stock-watch[data-look] {
	margin-block: 16px;
}

/* ---------------------------------------------------------------------------
   THE DECOY FIELD.
   Hidden with the accessible-hiding pattern rather than an offset, and that is
   about Arabic. The usual trick parks the field at a large negative inline
   offset, which under `dir="rtl"` resolves to the RIGHT of the viewport and
   gives the whole page 9999px of horizontal scroll. Clipping moves nothing, so
   it reads the same in both directions.
   `display: none` is not used on purpose: it is the one thing every crawler
   worth stopping already knows to skip.
   --------------------------------------------------------------------------- */
.brikmentor-stock-watch .brikmentor-sw-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   THE CARD LOOK CLIPPED ITS OWN FOCUS RING.
   That look sets `overflow: hidden` so its tinted trigger cannot spill past the
   rounded corner, and the ring is drawn 3px OUTSIDE the trigger, which is
   inside the card and therefore straight into the clip. A keyboard user tabbing
   through the card look saw nothing at all. Drawing the ring inwards keeps both
   promises; the other two looks are unclipped and keep the outside ring, which
   is the more legible of the two where there is room for it.
   --------------------------------------------------------------------------- */
.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-open:focus-visible {
	outline-offset: -3px;
}
/* ---------------------------------------------------------------------------
   NARROW COLUMNS GIVE BACK SOME INSET.
   The floor on the field makes the button drop to its own line when the two
   cannot share a row, and that is the whole answer while the column is wider
   than the field needs. It is no answer at all when the COLUMN is the thing
   that is too narrow: measured 2026-09-04 at 375px, Avada gives the form a
   190px box, which after this look's 18px inset and 2px border leaves the field
   150px for a string that needs 157, and GeneratePress' 315px box leaves 152.6
   for one that needs 162. Both drew "you@example.cor" - a field too narrow to
   show its own example address, which the note on the floor above already calls
   broken.
   So the box spends some of its own inset instead. 18px to 12px on the two
   looks that pad the box, 17px to 12px on the one that pads the rows inside it,
   and 12px to 10px inside the field itself: 20px of column width on Avada,
   which turns a 7px overrun into 8px of headroom, and 16px on GeneratePress.
   The inset is decoration and the address is the point.
   Logical properties, so this mirrors in Arabic like everything else. Nothing
   here applies above 480px, and no theme measured at 1440px was within 30px of
   needing it. */
@media (max-width: 480px) {
	.brikmentor-stock-watch[data-look="plain"],
	.brikmentor-stock-watch[data-look="hard"] {
		padding-inline: 12px;
	}

	.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-open,
	.brikmentor-stock-watch[data-look="card"] .brikmentor-sw-panel {
		padding-inline: 12px;
	}

	.brikmentor-stock-watch .brikmentor-sw-panel .brikmentor-sw-email {
		padding-inline: 10px;
	}
}

/* --- RTL -----------------------------------------------------------------
 * Everything above mirrors itself through logical properties. A box-shadow
 * offset cannot: it is two physical lengths, so the two looks that cast one
 * flip their inline offset here and nowhere else.
 */

[dir="rtl"] .brikmentor-stock-watch[data-look="hard"] {
	box-shadow: -5px 5px 0 CanvasText;
}

[dir="rtl"] .brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-submit {
	box-shadow: -3px 3px 0 var(--bmsw-accent);
}

[dir="rtl"] .brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-submit:hover:not(:disabled) {
	transform: translate(-1px, 1px);
	box-shadow: -2px 2px 0 var(--bmsw-accent);
}

[dir="rtl"] .brikmentor-stock-watch[data-look="hard"] .brikmentor-sw-msg {
	box-shadow: -3px 3px 0 CanvasText;
}

[dir="rtl"] .brikmentor-stock-watch .brikmentor-sw-open:hover .brikmentor-sw-badge {
	transform: rotate(12deg) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.brikmentor-stock-watch *,
	.brikmentor-stock-watch *::before,
	.brikmentor-stock-watch *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}