/*
 * Factorize Saves — the mark, the page, and the one quiet message.
 *
 * Brand tokens first, sensible fallbacks second: --ia-* is the InstaAttire
 * palette, --et-* is the Empire Tools parent theme, and the literal is what a
 * store running neither gets. There is no third palette invented here.
 *
 * The .fzs-on class is put on <html> by the head bootstrap, so a browser with
 * no JavaScript is never shown a control that cannot do anything.
 */

.fzs-toggle { display: none; }

.fzs-on .fzs-toggle {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* 44px is the floor, not the look: the visible mark is 21px and the rest
	   is thumb room. */
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	/* The parent theme paints every bare <button> in the accent red with
	   color:#fff !important, so the ink has to be stated just as loudly. */
	color: var(--ia-ink-soft, var(--et-muted, #6f6a62)) !important;
	font: inherit;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color .18s ease, opacity .18s ease;
}

.fzs-on .fzs-toggle:hover {
	background: none;
	color: var(--ia-ink, var(--et-text, #24221f)) !important;
}

.fzs-on .fzs-toggle:focus-visible {
	outline: 1px solid var(--ia-wine, var(--et-accent, #672f36));
	outline-offset: 2px;
}

.fzs-on .fzs-toggle[aria-pressed="true"] {
	color: var(--ia-wine, var(--et-accent, #672f36)) !important;
}

.fzs-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.fzs-svg { display: block; }

/* Outline unsaved, filled saved. One path, one property. */
.fzs-svg path { fill: none; transition: fill .18s ease; }
.fzs-toggle[aria-pressed="true"] .fzs-svg path { fill: currentColor; }

/* A tap should feel like something happened before the network has answered. */
.fzs-toggle.is-busy { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
	.fzs-toggle.is-flip .fzs-mark { animation: fzs-pop .22s ease; }
	@keyframes fzs-pop {
		0%   { transform: scale(1); }
		45%  { transform: scale(1.22); }
		100% { transform: scale(1); }
	}
}

/* -------------------------------------------------------------------------
   ON A CARD
   The mark sits in the top-right of the artwork. The card is the positioning
   context — the parent theme already sets position:relative on li.product;
   this states it anyway so the mark cannot escape onto the page in a theme
   that does not.
   ------------------------------------------------------------------------- */
ul.products li.product { position: relative; }

.fzs-on ul.products li.product .fzs-toggle--card {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 6;
	width: 44px;
	height: 44px;
	padding: 0;
}

/* Garments photograph pale, so the mark needs a hair of separation from the
   artwork. A paper tint, not a shadow and not a chip. */
.fzs-on .fzs-toggle--card .fzs-mark {
	padding: 6px;
	background: var(--ia-paper, rgba(255, 255, 255, .74));
	background: color-mix(in srgb, var(--ia-paper, #f6f3ec) 78%, transparent);
}

/* -------------------------------------------------------------------------
   ON THE PRODUCT PAGE
   A line of type, not a second call to action: the add-to-cart button is the
   only thing on this page allowed to shout.
   ------------------------------------------------------------------------- */
.fzs-single { margin: 18px 0 6px; }

.fzs-on .fzs-toggle--single {
	width: 100%;
	max-width: 340px;
	min-height: 48px;
	padding: 13px 20px;
	border: 1px solid var(--ia-line, var(--et-border, rgba(36, 34, 31, .14)));
	font-family: var(--ia-sans, var(--et-font-body, inherit));
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: var(--ia-label, .11em);
	text-transform: uppercase;
}

.fzs-on .fzs-toggle--single:hover {
	border-color: var(--ia-line-strong, var(--et-border-2, rgba(36, 34, 31, .28)));
}

.fzs-on .fzs-toggle--single[aria-pressed="true"] {
	border-color: var(--ia-wine, var(--et-accent, #672f36));
}

.fzs-label { display: inline-block; }

/* -------------------------------------------------------------------------
   THE SAVED PAGE
   ------------------------------------------------------------------------- */
.fzs-page__lead,
.fzs-page__note {
	font-family: var(--ia-sans, var(--et-font-body, inherit));
	font-size: 11.5px;
	letter-spacing: var(--ia-label, .11em);
	text-transform: uppercase;
	color: var(--ia-ink-faint, var(--et-muted, #9c968c));
}

.fzs-page__lead { margin: 0 0 22px; }
.fzs-page__note { margin: 26px 0 0; }

/* Unsaving on this page dims the card rather than yanking it out from under
   the thumb — a tap that reflows the grid loses the shopper their place. The
   row leaves on the next load. Gated on .fzs-marked, which the bootstrap only
   adds once it has applied the state: every control renders unsaved, so
   without that gate the whole grid would flash grey on the way in. */
.fzs-marked .fzs-page ul.products li.product:has(.fzs-toggle[aria-pressed="false"]) {
	opacity: .38;
	transition: opacity .25s ease;
}

.fzs-empty {
	max-width: 46ch;
	margin: 10px 0 40px;
}

.fzs-empty__lead {
	font-family: var(--ia-serif, var(--et-font-display, Georgia, serif));
	font-style: italic;
	font-size: clamp(26px, 5vw, 38px);
	line-height: 1.15;
	margin: 0 0 12px;
	color: var(--ia-ink, var(--et-text, #24221f));
}

.fzs-empty__body {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ia-ink-soft, var(--et-muted, #6f6a62));
}

.fzs-empty__link {
	display: inline-block;
	min-height: 44px;
	padding: 13px 0 0;
	font-family: var(--ia-sans, var(--et-font-body, inherit));
	font-size: 11.5px;
	letter-spacing: var(--ia-label, .11em);
	text-transform: uppercase;
	color: var(--ia-ink, var(--et-text, #24221f));
	border-bottom: 1px solid var(--ia-line-strong, rgba(36, 34, 31, .28));
	text-decoration: none;
}

.fzs-empty__link:hover { color: var(--ia-wine, var(--et-accent, #672f36)); }

/* -------------------------------------------------------------------------
   THE COUNT BADGE
   Any element with .fzs-count is filled in by the script. Empty means empty:
   a nav link should not carry a nought.
   ------------------------------------------------------------------------- */
.fzs-count.is-empty { display: none; }

/* -------------------------------------------------------------------------
   THE ONE MESSAGE
   Only ever shown when a save did not stick. It has to clear the fixed mobile
   tab bar, which is 62px of the viewport plus whatever the phone reserves for
   its home indicator.
   ------------------------------------------------------------------------- */
.fzs-toast {
	position: fixed;
	left: 50%;
	bottom: calc(var(--et-bottombar-h, 62px) + env(safe-area-inset-bottom, 0px) + 14px);
	z-index: 60;
	max-width: min(30rem, calc(100vw - 32px));
	margin: 0;
	padding: 12px 16px;
	background: var(--ia-card, var(--et-card, #fff));
	border: 1px solid var(--ia-line, var(--et-border, rgba(36, 34, 31, .14)));
	border-left: 2px solid var(--ia-wine, var(--et-accent, #672f36));
	color: var(--ia-ink, var(--et-text, #24221f));
	font-family: var(--ia-sans, var(--et-font-body, inherit));
	font-size: 13px;
	line-height: 1.4;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}

.fzs-toast.is-on { opacity: 1; }

@media (min-width: 900px) {
	/* No tab bar above 900px — it is display:none there. */
	.fzs-toast { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.fzs-toggle,
	.fzs-svg path,
	.fzs-toast,
	.fzs-page ul.products li.product { transition: none; }
}
