/* TA Back in Stock: "Notify me" button + inline form. Theme-neutral: inherits the shop's font and text colour.
   Override with --ta-bis-accent (button colour; the plugin's "Button colour" setting prints it), --ta-bis-accent-ink
   (text on the button), --ta-bis-radius, --ta-bis-line, --ta-bis-field-bg. */
.ta-bis {
	--_accent: var(--ta-bis-accent, #111);
	--_ink: var(--ta-bis-accent-ink, #fff);
	--_radius: var(--ta-bis-radius, 6px);
	--_line: var(--ta-bis-line, rgba(0, 0, 0, .16));
	--_field-line: rgba(0, 0, 0, .34);
	--_error: #b32d2e;
	--_ok: #157a43;
	--_ease: cubic-bezier(.16, 1, .3, 1);
	margin: var(--ta-bis-gap, 12px) 0 0;
}
.ta-bis [hidden] { display: none !important; }
.ta-bis p { margin: 0; }
.ta-bis :where(button) { font: inherit; letter-spacing: inherit; text-transform: none; } /* :where keeps it below the per-button weights */
.ta-bis button:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; }

/* The button */
.ta-bis__open {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 50px; padding: 12px 20px; margin: 0;
	border: 0; border-radius: var(--_radius);
	background: var(--_accent); color: var(--_ink);
	font-weight: 700; font-size: 1rem; line-height: 1.2; cursor: pointer;
	transition: transform .18s var(--_ease), box-shadow .18s var(--_ease);
}
.ta-bis__open:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); }
.ta-bis__open:active { transform: none; box-shadow: none; }
.ta-bis__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 12%; }
.ta-bis__open:hover .ta-bis__icon { animation: ta-bis-ring .7s var(--_ease); }

/* Compact (archive rows): an outline button that sizes to its text */
.ta-bis--compact .ta-bis__open {
	display: inline-flex; width: auto; min-height: 44px; padding: 0 14px; font-size: .9375em;
	background: transparent; color: var(--_accent); box-shadow: inset 0 0 0 1.5px var(--_accent);
}
.ta-bis--compact .ta-bis__open:hover { background: var(--_accent); color: var(--_ink); box-shadow: none; transform: none; }

/* The form */
.ta-bis__form {
	padding: 16px; border: 1px solid var(--_line); border-radius: var(--_radius);
	background: rgba(0, 0, 0, .02); animation: ta-bis-in .24s var(--_ease);
}
.ta-bis--compact .ta-bis__form { padding: 12px; }
.ta-bis__title { font-weight: 700; font-size: 1.0625em; line-height: 1.3; margin-bottom: 12px !important; }
.ta-bis__field { margin: 0 0 12px; }
.ta-bis__field label { display: block; margin: 0 0 4px; font-weight: 600; font-size: .875em; line-height: 1.3; }
.ta-bis__optional { font-weight: 400; opacity: .7; }
.ta-bis__field input {
	box-sizing: border-box; display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 12px;
	border: 1px solid var(--_field-line); border-radius: var(--_radius);
	background: var(--ta-bis-field-bg, #fff); color: #111;
	font: inherit; font-size: max(16px, 1em); line-height: 1.3; /* 16px+: no zoom on iPhone */
	box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.ta-bis__field input::placeholder { color: #767676; opacity: 1; }
.ta-bis__field input:focus { outline: 0; border-color: #111; background: var(--ta-bis-field-bg, #fff); box-shadow: 0 0 0 3px rgba(0, 0, 0, .12); } /* not the accent: a red accent would read as an error */
.ta-bis__field input[aria-invalid="true"] { border-color: var(--_error); box-shadow: 0 0 0 1px var(--_error); }
.ta-bis__error { margin-top: 6px !important; color: var(--_error); font-size: .8125em; font-weight: 600; line-height: 1.35; }

.ta-bis__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.ta-bis__submit {
	flex: 1 1 11em; min-height: 48px; padding: 10px 18px; margin: 0;
	border: 0; border-radius: var(--_radius); background: var(--_accent); color: var(--_ink);
	font-weight: 700; cursor: pointer;
}
.ta-bis__submit[aria-busy="true"] { opacity: .75; cursor: progress; }
.ta-bis__cancel, .ta-bis__again {
	min-height: 44px; padding: 0 4px; margin: 0; border: 0; background: none; color: inherit;
	text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; opacity: .8;
}
.ta-bis__cancel:hover, .ta-bis__again:hover { opacity: 1; }
.ta-bis__msg { margin-top: 10px !important; font-size: .875em; }
.ta-bis__msg:empty { display: none; }
.ta-bis__msg.is-error { color: var(--_error); font-weight: 600; }
.ta-bis__hint { margin-top: 10px !important; font-size: .8125em; line-height: 1.45; opacity: .75; }

/* Done */
.ta-bis__done {
	display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
	border: 1px solid rgba(21, 122, 67, .35); border-radius: var(--_radius); background: rgba(21, 122, 67, .07);
	animation: ta-bis-in .24s var(--_ease);
}
.ta-bis__done:focus { outline: 0; }
.ta-bis__done:focus-visible { outline: 2px solid var(--_ok); outline-offset: 3px; }
.ta-bis__check { flex: none; margin-top: 1px; }
.ta-bis__check circle { fill: var(--_ok); }
.ta-bis__check path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; animation: ta-bis-tick .4s .1s var(--_ease) backwards; }
.ta-bis__done-title { font-weight: 700; line-height: 1.3; }
.ta-bis__done-text { font-size: .9em; line-height: 1.45; opacity: .85; }
.ta-bis__again { min-height: 32px; padding: 0; margin-top: 2px; font-size: .8125em; }

.ta-bis__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@keyframes ta-bis-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes ta-bis-tick { from { stroke-dashoffset: 16; } }
@keyframes ta-bis-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) {
	.ta-bis *, .ta-bis__form, .ta-bis__done { animation: none !important; transition: none !important; }
	.ta-bis__open:hover { transform: none; }
}