/* ==========================================================================
   Shop Elements — core styles
   Version 0.2.0

   The shared vocabulary every system in the plugin draws from. Systems add
   their own layout on top; none of them redefine what is in here.

   A NOTE ON !important AND REPEATED CLASSES
   -----------------------------------------
   A theme stylesheet normally loads after a plugin's. When two rules have the
   same specificity and both are marked important, the later one wins — so
   !important on its own does not protect anything from the active theme.
   Where a control must not be rearranged (the quantity stepper above all),
   the class is repeated to raise specificity, which wins on merit rather than
   on load order. That is used sparingly and only where it has been shown to
   be necessary.
   ========================================================================== */

.tsd,
.tsd-scope {
	/* Brand blue (was green) */
	--tsd-green: #0173FD;
	--tsd-green-600: #3a90ff;
	--tsd-green-tint: #0E2036;
	--tsd-green-line: #1E3247;

	--tsd-dark: #0A1826;
	--tsd-dark-2: #0E1F31;

	--tsd-bg: #081320;
	--tsd-line: #1E3247;
	--tsd-line-2: #172A3D;

	--tsd-muted: #D4DBE4;
	--tsd-muted-2: #B6C0CC;
	--tsd-ink: #EAF0F7;

	/* Surfaces (new) — cards and elevated panels on the dark theme */
	--tsd-paper: #0E2135;
	--tsd-paper-2: #12283F;

	--tsd-amber: #f0c04a;
	--tsd-amber-bg: #2a2410;
	--tsd-amber-line: #4d4321;

	/* Status green — for "in stock" and similar positive states. */
	--tsd-status-green: #3ecf6a;

	--tsd-danger: #ff6b5a;
	--tsd-danger-bg: #2c1512;
	--tsd-danger-line: #5a2a24;

	--tsd-radius: 14px;
	--tsd-radius-sm: 8px;

	--tsd-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 30px rgba(0, 0, 0, .35);
	--tsd-shadow-lg: 0 14px 44px rgba(0, 0, 0, .55);

	--tsd-font-d: 'Rajdhani', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tsd-font-b: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* ----------------------------------------------------------------------
	   Type scale (from the typography system).
	   Sizes in rem (1rem = 16px), tracking in em (= the system's %),
	   line-height unitless (= the system's %). Each level exposes size /
	   tracking / line-height / weight so components reference one token set.
	   ---------------------------------------------------------------------- */

	/* Headings */
	--tsd-h1-size: 3.81rem; --tsd-h1-ls: -0.02em;   --tsd-h1-lh: 1;    --tsd-h1-fw: 700;
	--tsd-h2-size: 3rem;    --tsd-h2-ls: -0.0175em; --tsd-h2-lh: 1.1;  --tsd-h2-fw: 700;
	--tsd-h3-size: 2.44rem; --tsd-h3-ls: -0.015em;  --tsd-h3-lh: 1.2;  --tsd-h3-fw: 600;
	--tsd-h4-size: 1.95rem; --tsd-h4-ls: -0.0117em; --tsd-h4-lh: 1.3;  --tsd-h4-fw: 600;
	--tsd-h5-size: 1.56rem; --tsd-h5-ls: -0.0083em; --tsd-h5-lh: 1.35; --tsd-h5-fw: 500;
	--tsd-h6-size: 1.25rem; --tsd-h6-ls: -0.005em;  --tsd-h6-lh: 1.4;  --tsd-h6-fw: 500;

	/* Body & sub-body */
	--tsd-p-size: 1rem;       --tsd-p-ls: 0;        --tsd-p-lh: 1.5;   --tsd-p-fw: 400;
	--tsd-small-size: 0.8rem; --tsd-small-ls: 0;    --tsd-small-lh: 1.55; --tsd-small-fw: 400;
	--tsd-caption-size: 0.64rem; --tsd-caption-ls: 0;      --tsd-caption-lh: 1.5;  --tsd-caption-fw: 400;
	--tsd-label-size: 0.64rem;   --tsd-label-ls: 0.01em;   --tsd-label-lh: 1.45;   --tsd-label-fw: 500;
	--tsd-eyebrow-size: 0.51rem; --tsd-eyebrow-ls: 0.015em; --tsd-eyebrow-lh: 1.4; --tsd-eyebrow-fw: 600;

	/* UI tokens */
	--tsd-button-size: 1rem;   --tsd-button-ls: 0.005em; --tsd-button-lh: 1;   --tsd-button-fw: 500;
	--tsd-price-size: 1.25rem; --tsd-price-ls: -0.005em; --tsd-price-lh: 1.2;  --tsd-price-fw: 600;
	--tsd-input-size: 1rem;    --tsd-input-ls: 0;        --tsd-input-lh: 1.3;  --tsd-input-fw: 400;
	--tsd-badge-size: 0.64rem; --tsd-badge-ls: 0.01em;   --tsd-badge-lh: 1;    --tsd-badge-fw: 600;
}

.tsd,
.tsd-scope {
	font-family: var(--tsd-font-b);
	color: var(--tsd-ink);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.tsd *,
.tsd-scope * { box-sizing: border-box; }

.tsd svg,
.tsd-scope svg { display: block; }

/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

.tsd .tsd-btn,
.tsd-scope .tsd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 20px;
	margin: 0;
	border: none;
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-d);
	font-weight: var(--tsd-button-fw) !important;
	font-size: var(--tsd-button-size);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--tsd-button-ls);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
/* Rajdhani sits low in its em box, so on a flex-centred button the text reads
   as slightly high. A small top padding nudges it to true centre. Size
   modifiers below re-declare padding, so they each carry the same top nudge. */
.tsd-scope .tsd-btn > *,
.tsd .tsd-btn { line-height: 1; }
.tsd-scope .tsd-btn { padding: 2px 20px 0; }

/* --------------------------------------------------------------------------
   Global focus / active guard
   --------------------------------------------------------------------------
   The active theme colours buttons on :focus / :active / :focus-visible (a
   pink), and that bleeds into the plugin's own controls. This neutralises it
   for every interactive element inside our scope: focus and active never
   inherit the theme's background, border or outline. Intentional :hover
   styles live in their own rules and are unaffected. Keyboard users still get
   a visible ring via :focus-visible below.
   -------------------------------------------------------------------------- */
.tsd button:focus,
.tsd button:active,
.tsd button:focus-visible,
.tsd a:focus,
.tsd a:active,
.tsd [role="button"]:focus,
.tsd [role="button"]:active,
.tsd-scope button:focus,
.tsd-scope button:active,
.tsd-scope button:focus-visible,
.tsd-scope a:focus,
.tsd-scope a:active,
.tsd-scope [role="button"]:focus,
.tsd-scope [role="button"]:active {
	outline: none !important;
	box-shadow: none !important;
}

/* Keyboard focus ring (accessibility) — a subtle brand outline, not the
   theme's fill. Applies only to keyboard focus, never mouse clicks. */
.tsd button:focus-visible,
.tsd a:focus-visible,
.tsd [role="button"]:focus-visible,
.tsd-scope button:focus-visible,
.tsd-scope a:focus-visible,
.tsd-scope [role="button"]:focus-visible {
	outline: 2px solid var(--tsd-green) !important;
	outline-offset: 2px !important;
}

.tsd .tsd-btn-green,
.tsd-scope .tsd-btn-green,
.tsd .tsd-btn-green:focus,
.tsd .tsd-btn-green:active,
.tsd-scope .tsd-btn-green:focus,
.tsd-scope .tsd-btn-green:active { background: var(--tsd-green); color: #fff; }
.tsd .tsd-btn-green:hover:not(:disabled),
.tsd-scope .tsd-btn-green:hover:not(:disabled) { background: var(--tsd-green-600); color: #fff; }

.tsd .tsd-btn-dark,
.tsd-scope .tsd-btn-dark,
.tsd .tsd-btn-dark:focus,
.tsd .tsd-btn-dark:active,
.tsd-scope .tsd-btn-dark:focus,
.tsd-scope .tsd-btn-dark:active { background: var(--tsd-dark); color: #fff; }
.tsd .tsd-btn-dark:hover:not(:disabled),
.tsd-scope .tsd-btn-dark:hover:not(:disabled) { background: var(--tsd-dark-2); color: #fff; }

.tsd .tsd-btn-outline,
.tsd-scope .tsd-btn-outline,
.tsd .tsd-btn-outline:focus,
.tsd .tsd-btn-outline:active,
.tsd-scope .tsd-btn-outline:focus,
.tsd-scope .tsd-btn-outline:active { background: var(--tsd-paper); color: var(--tsd-ink); border: 1.5px solid var(--tsd-line); }
.tsd .tsd-btn-outline:hover:not(:disabled),
.tsd-scope .tsd-btn-outline:hover:not(:disabled) { border-color: var(--tsd-green); color: #fff; }

.tsd .tsd-btn-ghost,
.tsd-scope .tsd-btn-ghost { background: var(--tsd-bg); color: var(--tsd-dark); }
.tsd .tsd-btn-ghost:hover:not(:disabled),
.tsd-scope .tsd-btn-ghost:hover:not(:disabled) { background: var(--tsd-line-2); }

/* Destructive actions stay quiet until hovered — they should never compete
   with the primary action for attention. */
.tsd .tsd-btn-quiet-danger,
.tsd-scope .tsd-btn-quiet-danger { background: var(--tsd-bg); color: var(--tsd-muted); }
.tsd .tsd-btn-quiet-danger:hover:not(:disabled),
.tsd-scope .tsd-btn-quiet-danger:hover:not(:disabled) { background: var(--tsd-danger-bg); color: var(--tsd-danger); }

.tsd .tsd-btn-sm,
.tsd-scope .tsd-btn-sm { height: 38px; padding: 2px 14px 0; font-size: 13px; }
.tsd .tsd-btn-md,
.tsd-scope .tsd-btn-md { height: 42px; padding: 2px 18px 0; font-size: 14px; }
.tsd .tsd-btn-lg,
.tsd-scope .tsd-btn-lg { height: 54px; padding: 2px 24px 0; font-size: 16.5px; }
.tsd .tsd-btn-block,
.tsd-scope .tsd-btn-block { width: 100%; }

.tsd .tsd-btn:disabled,
.tsd-scope .tsd-btn:disabled { opacity: .45; cursor: not-allowed; }
.tsd .tsd-btn-green:disabled,
.tsd-scope .tsd-btn-green:disabled { background: var(--tsd-paper-2); color: var(--tsd-muted-2); opacity: 1; }

/* ==========================================================================
   2. QUANTITY STEPPER

   The one control a theme most reliably breaks. Class repeated to 0,3,x
   specificity so it holds regardless of stylesheet order.
   ========================================================================== */

.tsd-qty.tsd-qty.tsd-qty {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: auto !important;
	max-width: none !important;
	height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	background: var(--tsd-paper) !important;
	border: 1px solid var(--tsd-line) !important;
	border-radius: var(--tsd-radius-sm) !important;
	box-shadow: none !important;
	overflow: hidden !important;
	float: none !important;
	vertical-align: middle !important;
}

.tsd-qty.tsd-qty.tsd-qty button {
	flex: 0 0 32px !important;
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	height: 34px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--tsd-bg) !important;
	color: var(--tsd-ink) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: var(--tsd-font-d) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	float: none !important;
	position: static !important;
	cursor: pointer;
}

.tsd-qty.tsd-qty.tsd-qty button:hover:not(:disabled) {
	background: var(--tsd-line-2) !important;
	color: var(--tsd-green) !important;
}
.tsd-qty.tsd-qty.tsd-qty button:disabled { opacity: .4; cursor: not-allowed; }

.tsd-qty.tsd-qty.tsd-qty input {
	flex: 0 0 44px !important;
	width: 44px !important;
	min-width: 44px !important;
	max-width: 44px !important;
	height: 34px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: var(--tsd-paper) !important;
	color: var(--tsd-ink) !important;
	border: none !important;
	border-left: 1px solid var(--tsd-line) !important;
	border-right: 1px solid var(--tsd-line) !important;
	border-radius: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	text-align: center !important;
	font-family: var(--tsd-font-b) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	display: block !important;
	float: none !important;
	position: static !important;
	-moz-appearance: textfield;
}

.tsd-qty.tsd-qty.tsd-qty input::-webkit-outer-spin-button,
.tsd-qty.tsd-qty.tsd-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}
.tsd-qty.tsd-qty.tsd-qty input:disabled { background: var(--tsd-bg) !important; color: var(--tsd-muted-2) !important; }

/* ==========================================================================
   3. CARDS, BADGES, NOTICES
   ========================================================================== */

.tsd .tsd-card,
.tsd-scope .tsd-card {
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
	box-shadow: var(--tsd-shadow);
}

.tsd .tsd-eyebrow,
.tsd-scope .tsd-eyebrow {
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--tsd-green-600);
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 13px;
}
.tsd .tsd-eyebrow::after,
.tsd-scope .tsd-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--tsd-line); }

/* stock pills */
.tsd .tsd-stock,
.tsd-scope .tsd-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tsd-green-tint);
	color: var(--tsd-green-600);
	font-size: 12.5px;
	font-weight: 600;
	padding: 4px 11px;
	border-radius: 20px;
	white-space: nowrap;
}
.tsd .tsd-stock-low,
.tsd-scope .tsd-stock-low { background: var(--tsd-amber-bg); color: var(--tsd-amber); }
.tsd .tsd-stock-out,
.tsd-scope .tsd-stock-out { background: var(--tsd-paper-2); color: var(--tsd-muted); }
.tsd .tsd-stock .tsd-dot,
.tsd-scope .tsd-stock .tsd-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* notices */
.tsd .tsd-notice,
.tsd-scope .tsd-notice {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 11px 14px;
	border-radius: var(--tsd-radius-sm);
	border: 1px solid var(--tsd-line);
	background: var(--tsd-bg);
	border-left: 3px solid var(--tsd-muted-2);
}
.tsd .tsd-notice-ic,
.tsd-scope .tsd-notice-ic { flex-shrink: 0; display: flex; margin-top: 1px; color: var(--tsd-muted); }
.tsd .tsd-notice-tx,
.tsd-scope .tsd-notice-tx { font-size: 13px; line-height: 1.45; color: var(--tsd-ink); }
.tsd .tsd-notice-tx b,
.tsd-scope .tsd-notice-tx b { font-weight: 600; color: var(--tsd-ink); }

.tsd .tsd-notice-info,
.tsd-scope .tsd-notice-info { border-left-color: var(--tsd-green); }
.tsd .tsd-notice-info .tsd-notice-ic,
.tsd-scope .tsd-notice-info .tsd-notice-ic { color: var(--tsd-green-600); }

.tsd .tsd-notice-success,
.tsd-scope .tsd-notice-success {
	background: var(--tsd-green-tint);
	border-color: var(--tsd-green-line);
	border-left-color: var(--tsd-green);
}
.tsd .tsd-notice-success .tsd-notice-ic,
.tsd-scope .tsd-notice-success .tsd-notice-ic { color: var(--tsd-green-600); }

.tsd .tsd-notice-warning,
.tsd-scope .tsd-notice-warning {
	background: var(--tsd-amber-bg);
	border-color: var(--tsd-amber-line);
	border-left-color: var(--tsd-amber);
}
.tsd .tsd-notice-warning .tsd-notice-ic,
.tsd-scope .tsd-notice-warning .tsd-notice-ic { color: var(--tsd-amber); }

.tsd .tsd-notice-error,
.tsd-scope .tsd-notice-error {
	background: var(--tsd-danger-bg);
	border-color: var(--tsd-danger-line);
	border-left-color: var(--tsd-danger);
}
.tsd .tsd-notice-error .tsd-notice-ic,
.tsd-scope .tsd-notice-error .tsd-notice-ic { color: var(--tsd-danger); }

/* ==========================================================================
   4. FORM FIELDS
   ========================================================================== */

.tsd .tsd-fld label,
.tsd-scope .tsd-fld label {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tsd-muted);
	margin-bottom: 6px;
}

.tsd .tsd-fld input[type="text"],
.tsd .tsd-fld input[type="email"],
.tsd .tsd-fld input[type="number"],
.tsd .tsd-fld select,
.tsd-scope .tsd-fld input[type="text"],
.tsd-scope .tsd-fld input[type="email"],
.tsd-scope .tsd-fld input[type="number"],
.tsd-scope .tsd-fld select {
	width: 100%;
	height: 44px;
	padding: 0 13px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-b);
	font-size: 14px;
	color: var(--tsd-ink);
}

.tsd .tsd-fld textarea,
.tsd-scope .tsd-fld textarea {
	width: 100%;
	min-height: 88px;
	padding: 11px 13px;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-b);
	font-size: 14px;
	resize: vertical;
}

.tsd .tsd-fld input:focus,
.tsd .tsd-fld select:focus,
.tsd .tsd-fld textarea:focus,
.tsd-scope .tsd-fld input:focus,
.tsd-scope .tsd-fld select:focus,
.tsd-scope .tsd-fld textarea:focus {
	border-color: var(--tsd-green);
	outline: none;
}

/* ==========================================================================
   5. ACCESSIBILITY
   ========================================================================== */

.tsd :focus-visible,
.tsd-scope :focus-visible {
	outline: 2px solid var(--tsd-green);
	outline-offset: 2px;
}

.tsd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tsd *,
	.tsd-scope * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* ==========================================================================
   MESSAGES

   Written by the product and quote scripts. These had no styling at all, so
   anything either of them said appeared as unformatted text — a warning that
   looked like a stray line of copy.
   ========================================================================== */

.tsd .tsd-message {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 0 0;
	padding: 11px 14px;
	border-radius: var(--tsd-radius-sm);
	font-family: var(--tsd-font-b);
	font-size: 13.5px;
	line-height: 1.5;
	border: 1px solid transparent;
}
.tsd .tsd-message[hidden] { display: none; }

.tsd .tsd-message.is-info {
	background: var(--tsd-bg);
	border-color: var(--tsd-line);
	color: var(--tsd-ink);
}
.tsd .tsd-message.is-success {
	background: var(--tsd-green-tint);
	border-color: var(--tsd-green-line);
	color: var(--tsd-green-600);
}
.tsd .tsd-message.is-error {
	background: var(--tsd-danger-bg);
	border-color: var(--tsd-danger-line);
	color: var(--tsd-danger);
}
.tsd .tsd-message.is-warning {
	background: var(--tsd-amber-bg);
	border-color: var(--tsd-amber-line);
	color: var(--tsd-amber);
}

/* a note beside the thing it is about, rather than at the foot of the page */
.tsd .tsd-note {
	margin: 0 0 10px;
	padding: 9px 12px;
	border-radius: var(--tsd-radius-sm);
	font-size: 13px;
	line-height: 1.5;
	border: 1px solid transparent;
}
.tsd .tsd-note[hidden] { display: none; }
.tsd .tsd-note--warn {
	background: var(--tsd-amber-bg);
	border-color: var(--tsd-amber-line);
	/* a shade darker than the token: at 13px it needs the contrast */
	color: var(--tsd-amber);
}

/* the card being asked for draws the eye once, then settles */
.tsd .is-wanted {
	animation: tsd-wanted 1.2s ease;
}
@keyframes tsd-wanted {
	0%, 100% { box-shadow: var(--tsd-shadow); }
	20%, 60% { box-shadow: 0 0 0 3px rgba(178, 106, 0, .28), var(--tsd-shadow); }
}

/* ==========================================================================
   QUOTES ARE FOR ACCOUNT HOLDERS

   Shown under the Add to quote button and in the quote drawer. One set of
   rules in tsd-core.css, which every page loads, because both places use it.

   Amber rather than red: the customer has not done anything wrong.
   ========================================================================== */

.tsd .tsd-quote-gate {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 16px;
	background: var(--tsd-amber-bg);
	border: 1px solid var(--tsd-amber-line);
	border-radius: var(--tsd-radius-sm);
	text-align: left;
}
.tsd .tsd-quote-gate[hidden] { display: none; }

.tsd .tsd-quote-gate__ic {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tsd-paper);
	border: 1px solid var(--tsd-amber-line);
	display: flex;
	align-items: center;
	justify-content: center;
	/* a shade darker than the token — at this size it needs the contrast */
	color: var(--tsd-amber);
}
.tsd .tsd-quote-gate__main { flex: 1; min-width: 0; }
.tsd .tsd-quote-gate__t {
	margin-bottom: 3px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 14.5px;
	color: var(--tsd-amber);
}
.tsd .tsd-quote-gate__d {
	margin-bottom: 11px;
	font-size: 12.5px;
	color: var(--tsd-amber);
	line-height: 1.55;
}
.tsd .tsd-quote-gate__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tsd .tsd-quote-gate__actions .tsd-btn { flex: 1; min-width: 120px; }

.tsd .tsd-quote-gate__x.tsd-quote-gate__x {
	width: 24px !important;
	height: 24px !important;
	min-height: 0 !important;
	flex-shrink: 0;
	margin: -2px -4px 0 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--tsd-amber) !important;
	font-size: 17px !important;
	line-height: 1 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tsd .tsd-quote-gate__x.tsd-quote-gate__x:hover { background: rgba(178, 106, 0, .12) !important; }

/* under the buttons on a product page */
.tsd .tsd-quote-gate--product { margin-top: 12px; }

/* filling the drawer, where it replaces the empty state */
.tsd .tsd-quote-gate--drawer { margin: 16px; border-radius: var(--tsd-radius); }

@media screen and (max-width: 520px) {
	.tsd .tsd-quote-gate { padding: 13px 14px; gap: 10px; }
	.tsd .tsd-quote-gate__actions .tsd-btn { flex: 1 1 100%; }
}