/* Gertrudes toast notifications, v2 (2026-08-21).
   gtr-toast.js adopts every `.alert-fix.alert-dismissible` common.js or the
   quickview inserts, moves it into the fixed .gtr-toast-stack and re-classes
   it `.gtr-toast` — so multiple actions in quick succession stack instead of
   replacing each other. §1 styles the stack and adopted toasts; §2 keeps a
   minimal single-toast fallback for the un-adopted state (JS off, or the one
   frame before the observer runs — never painted in practice).

   Placement follows ecommerce convention: top-right on desktop (clear of
   the nav, cart drawer and product grids), full-width top on phones.
   Palette: ink #2f2a26, line #efe8e2, brand-strong #c73e12 links; the rail
   and progress bar carry the semantic colour. */

/* 1. Stack + adopted toasts ---------------------------------------------- */
.gtr-toast-stack {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 1500;
	display: flex;
	flex-direction: column;
	width: min(360px, calc(100vw - 32px));
	pointer-events: none; /* gaps must not eat clicks; toasts re-enable */
}

/* Compact card toast (v3, 2026-08-22): icon circle · bold title · muted
   body · X — the flat "banner with a left rail" is gone. gtr-toast.js
   builds the badge/content anatomy at adoption (restructure()). */
.gtr-toast {
	--gtr-toast-accent: #2e7d32;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	overflow: hidden;
	margin: 0 0 10px;
	padding: 12px 40px 13px 12px;
	border: 1px solid #efe8e2;
	border-radius: 12px;
	background: #fff;
	color: #2f2a26;
	font-size: 12.5px;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 8px 26px rgba(47, 42, 38, .14), 0 2px 6px rgba(47, 42, 38, .06);
	pointer-events: auto;
	touch-action: pan-y; /* the page still scrolls; JS claims horizontal */
	transition: transform 220ms cubic-bezier(.22, .61, .36, 1), opacity 220ms ease;
	animation: gtr-toast-in 260ms cubic-bezier(.21, 1.02, .55, 1) both;
}

/* While a finger is on it the card must track 1:1, not ease behind. */
.gtr-toast.gtr-toast-drag {
	transition: none;
	cursor: grabbing;
}

.gtr-toast.alert-danger { --gtr-toast-accent: #c62828; }
.gtr-toast.alert-warning { --gtr-toast-accent: #b26a00; }
.gtr-toast.alert-info { --gtr-toast-accent: #1c6dd0; }

.gtr-toast__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--gtr-toast-accent);
	color: #fff;
	font-size: 11px;
	line-height: 1;
}

.gtr-toast__content { min-width: 0; }

.gtr-toast__title {
	display: block;
	margin: 2px 0 1px;
	color: #2f2a26;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.gtr-toast__body {
	color: #6f6862;
	font-size: 12.5px;
}

/* The generic a rule stays as a safety net for un-restructured content.
   A link in an ordinary toast IS a separate destination, so it keeps the
   underline that advertises one. `.gtr-toast--action` below is the exception. */
.gtr-toast a {
	color: #c73e12;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gtr-toast a:hover,
.gtr-toast a:focus { color: #a53100; }

/* 1b. Whole-card action toasts ------------------------------------------
   Every "You have added <product> to your <destination>!" toast — cart,
   compare, wish list — carries two links inside a card that gtr-toast.js
   has made one control: the cart opens its drawer in place, the other two
   navigate. Two underlines inside a single clickable surface promise three
   different destinations and deliver one, so here the names drop to bold +
   brand colour: still clearly the subject of the sentence, no longer
   advertising a target of their own.

   Toasts that offer a real CHOICE (the login-or-register prompts) never get
   this class, so their links keep the underline that says "pick one".
   ------------------------------------------------------------------------ */
.gtr-toast--action {
	cursor: pointer;
	transition: transform 220ms cubic-bezier(.22, .61, .36, 1),
	            opacity 220ms ease,
	            border-color 160ms ease,
	            box-shadow 160ms ease;
}

.gtr-toast--action a {
	font-weight: 700;
	text-decoration: none;
}

/* Hover lifts the whole card, not the link under the pointer — the card is
   what responds to the click, so the card is what has to look live. */
.gtr-toast--action:hover {
	border-color: #e4d6cc;
	box-shadow: 0 12px 30px rgba(47, 42, 38, .18), 0 3px 8px rgba(47, 42, 38, .08);
}

/* Keyboard reaches the card through its links, which stay real anchors and
   fire the same handler on Enter. Answers stylesheet.css:7's global
   *:focus{outline:none !important}. */
.gtr-toast--action a:focus-visible {
	outline: 2px solid #c73e12 !important;
	outline-offset: 2px;
	border-radius: 3px;
}

/* Touch: no hover to lift the card, so the press itself is the feedback. */
@media (hover: none) {
	.gtr-toast--action:active { transform: scale(.995); }
}

.gtr-toast .close {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 28px;
	height: 28px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #6f6862;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	text-align: center;
	opacity: 1;
	transition: color 160ms ease, background 160ms ease;
}

.gtr-toast .close:hover,
.gtr-toast .close:focus {
	color: #2f2a26;
	background: #faf5f0;
	opacity: 1;
}

/* Auto-dismiss progress bar: runs while .gtr-toast-run is on, set from JS
   via --gtr-toast-life; hovering (.gtr-toast-hold) pauses it, and leaving
   restarts it together with the timer. */
.gtr-toast::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--gtr-toast-accent);
	opacity: .55;
	transform: scaleX(0);
	transform-origin: left;
}

.gtr-toast.gtr-toast-run::after {
	animation: gtr-toast-countdown var(--gtr-toast-life, 5000ms) linear forwards;
}

.gtr-toast.gtr-toast-hold::after {
	animation-play-state: paused;
}

/* Exit: fade + slide, and the height collapses so the stack re-flows
   smoothly (JS pins max-height to the current height first). */
.gtr-toast.gtr-toast-leave {
	opacity: 0;
	transform: translateX(14px);
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	max-height: 0 !important;
	border-width: 0;
	pointer-events: none;
	transition: opacity 240ms ease, transform 240ms ease, max-height 240ms ease,
		margin 240ms ease, padding 240ms ease, border-width 240ms ease;
}

@keyframes gtr-toast-in {
	from { opacity: 0; transform: translateY(-10px) scale(.98); }
}

@keyframes gtr-toast-countdown {
	to { transform: scaleX(1); }
}

/* 2. No-JS fallback: the un-adopted alert as a single fixed toast --------- */
.alert.alert-fix {
	--gtr-toast-accent: #2e7d32;
	position: fixed;
	top: 18px;
	right: 18px;
	left: auto;
	z-index: 1500;
	display: block;
	width: min(400px, calc(100vw - 32px));
	margin: 0;
	padding: 14px 44px 14px 16px;
	border: 1px solid #efe8e2;
	border-left: 4px solid var(--gtr-toast-accent);
	border-radius: 14px;
	background: #fff;
	color: #2f2a26;
	font-size: 13.5px;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 10px 30px rgba(47, 42, 38, .16), 0 2px 8px rgba(47, 42, 38, .08);
}

.alert.alert-fix.alert-danger { --gtr-toast-accent: #c62828; }
.alert.alert-fix.alert-warning { --gtr-toast-accent: #b26a00; }

.alert.alert-fix > .fa {
	margin-right: 8px;
	color: var(--gtr-toast-accent);
	font-size: 17px;
	vertical-align: -2px;
}

.alert.alert-fix .close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #6f6862;
	font-size: 20px;
	line-height: 32px;
	text-align: center;
	opacity: 1;
}

/* 3. Small screens + reduced motion --------------------------------------- */
/* Touch devices dismiss by swiping (gtr-toast.js) — and by waiting, which
   is the common case. A permanent ✕ on every toast is chrome that earns
   nothing there, so pointer devices keep it and touch devices lose it,
   the same split the cart rows use. */
@media (hover: none) {
	.gtr-toast .close { display: none; }
	.gtr-toast { padding-right: 16px; }
}

@media (max-width: 767px) {
	.gtr-toast-stack,
	.alert.alert-fix {
		top: 12px;
		right: 12px;
		left: 12px;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtr-toast { transition: none; }
	.gtr-toast,
	.alert.alert-fix { animation: none; }
	.gtr-toast.gtr-toast-leave { transform: none; transition-duration: .01ms; }
	.gtr-toast.gtr-toast-run::after { animation-duration: .01ms; opacity: 0; }
}