/*
 * 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; }

/*
 * HOW THE SETTINGS REACH THIS FILE
 * The admin's choices are printed as custom properties on :root (only the
 * ones that were changed). Every var() below carries the default look as its
 * fallback, so a store that changed nothing gets the 1.1 button exactly.
 *   --fzs-ink / --fzs-ink-hover / --fzs-on      colours
 *   --fzs-icon-url                              a custom mark (mask)
 *   --fzs-{card,single}-h                       face height (size)
 *   --fzs-{card,single}-radius                  shape
 *   --fzs-{card,single}-bg / -bw / -bc          background, border
 *   --fzs-{card,single}-icon                    mark size
 *   --fzs-{card,single}-fs / -fw / -tt / -ls    words
 *   --fzs-card-x / --fzs-card-y                 offset from the card edge
 */
.fzs-toggle {
	--fzs-c-ink: var(--fzs-ink, var(--ia-ink-soft, var(--et-muted, currentColor)));
	--fzs-c-hover: var(--fzs-ink-hover, var(--ia-ink, var(--et-text, currentColor)));
	--fzs-c-on: var(--fzs-on, var(--ia-wine, var(--et-accent, var(--wp--preset--color--primary, currentColor))));
	--fzs-c-line: var(--ia-line, var(--et-border, rgba(36, 34, 31, .14)));
	--fzs-c-line-strong: var(--ia-line-strong, var(--et-border-2, rgba(36, 34, 31, .28)));
	--fzs-c-solid-ink: var(--fzs-solid-ink, #fff);
}

.fzs-on .fzs-toggle {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* 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(--fzs-c-ink) !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, border-color .18s ease, background-color .18s ease;
}

/*
 * A face smaller than 44px keeps a 44px tap target. Where the button itself
 * is the face (words on a card, the product page), the difference is a
 * TRANSPARENT border (--fzs-pad) with the background clipped inside it, and the
 * visible outline is an inset shadow (--fzs-ring) — so the admin's border width
 * and colour still draw, and the whole 44px stays tappable. (A pseudo-element
 * reaching outside cannot do this: Chrome does not hit-test outside a button.)
 */

.fzs-on .fzs-toggle:hover {
	background: none;
	color: var(--fzs-c-hover) !important;
}

.fzs-on .fzs-toggle:focus-visible {
	outline: 2px solid var(--fzs-c-on);
	outline-offset: 2px;
}

.fzs-on .fzs-toggle[aria-pressed="true"] {
	color: var(--fzs-c-on) !important;
}

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

.fzs-svg { display: block; }

/* The admin's own mark: a mask over currentColor. */
.fzs-custom {
	background-color: currentColor;
	-webkit-mask: var(--fzs-icon-url, none) center / contain no-repeat;
	mask: var(--fzs-icon-url, none) center / contain no-repeat;
}

/* Saved: the mark fills (default) — unless "colour only" was chosen. */
.fzs-svg path { fill: none; transition: fill .18s ease; }
.fzs-toggle[aria-pressed="true"]:not(.fzs-saved--color) .fzs-svg path { fill: currentColor; }

/* Saved, "solid": the face takes the saved colour, mark and words in white. */
.fzs-on .fzs-toggle.fzs-saved--solid[aria-pressed="true"] { color: var(--fzs-c-solid-ink) !important; }
.fzs-on .fzs-toggle--card.fzs-mode--icon.fzs-saved--solid[aria-pressed="true"] .fzs-mark {
	background: var(--fzs-c-on);
	border-color: var(--fzs-c-on);
}
.fzs-on ul.products li.product .fzs-toggle--card.fzs-saved--solid[aria-pressed="true"]:not(.fzs-mode--icon),
.fzs-on .fzs-toggle--single.fzs-saved--solid[aria-pressed="true"] {
	--fzs-ring: var(--fzs-c-on);
	background: var(--fzs-c-on);
	background-clip: padding-box;
}

/* The words, wherever they show. */
.fzs-label {
	display: inline-block;
	white-space: nowrap;
}

/* 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
   Default: the mark alone 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.

   The top-right rule keeps the 1.0 selector and specificity on purpose: a
   theme that nudged it (InstaAttire sets top/right: 2px) still wins. The
   admin's offset is a MARGIN on top of whatever the theme placed, so it works
   there too instead of losing to the theme's rule.
   ------------------------------------------------------------------------- */
ul.products li.product { position: relative; }

.fzs-on ul.products li.product .fzs-toggle--card {
	--fzs-gx: var(--fzs-card-x, 0px);
	--fzs-gy: var(--fzs-card-y, 0px);
	position: absolute;
	top: 0;
	right: 0;
	z-index: 6;
	min-width: max(44px, var(--fzs-card-h, 44px));
	height: max(44px, var(--fzs-card-h, 44px));
	margin: var(--fzs-gy) var(--fzs-gx);
	padding: 0;
}

.fzs-on ul.products li.product .fzs-toggle--card.fzs-at-top-left { right: auto; left: 0; }

/* Bottom corners sit on the bottom edge of the image; the script measures it
   into --fzs-media-bottom. Until it has, the control stays in the flow. */
.fzs-on ul.products li.product .fzs-toggle--card.fzs-at-bottom-right,
.fzs-on ul.products li.product .fzs-toggle--card.fzs-at-bottom-left {
	top: var(--fzs-media-bottom, auto);
	margin-top: calc(-1 * var(--fzs-gy));
	margin-bottom: 0;
	transform: translateY(-100%);
}
.fzs-on ul.products li.product .fzs-toggle--card.fzs-at-bottom-left { right: auto; left: 0; }

/* Icon only: the mark is the face. Garments photograph pale, so a mark over
   the image needs a hair of separation from the artwork — a paper tint. */
.fzs-on .fzs-toggle--card .fzs-mark {
	box-sizing: border-box;
	width: var(--fzs-card-h, auto);
	height: var(--fzs-card-h, auto);
	padding: var(--fzs-card-pad, 6px);
	border: var(--fzs-card-bw, 0px) solid var(--fzs-card-bc, var(--fzs-c-line));
	border-radius: var(--fzs-card-radius, 0px);
	background: var(--fzs-card-bg, var(--fzs-bg, var(--ia-paper, rgba(255, 255, 255, .74))));
	background: var(--fzs-card-bg, var(--fzs-bg, color-mix(in srgb, var(--ia-paper, #f6f3ec) 78%, transparent)));
	transition: background-color .18s ease;
}
.fzs-on .fzs-toggle--card .fzs-svg {
	width: var(--fzs-card-icon, 21px);
	height: var(--fzs-card-icon, 21px);
}

/* With words, the whole button is the face: a chip (36px unless sized). */
.fzs-on ul.products li.product .fzs-toggle--card.fzs-mode--icon_text,
.fzs-on ul.products li.product .fzs-toggle--card.fzs-mode--text {
	--fzs-gx: var(--fzs-card-x, 2px);
	--fzs-gy: var(--fzs-card-y, 2px);
	--fzs-face: var(--fzs-card-h, 36px);
	--fzs-pad: max(0px, calc((44px - var(--fzs-face)) / 2));
	min-width: 0;
	min-height: 0;
	height: max(44px, var(--fzs-face));
	padding: 0 12px 0 10px;
	border: var(--fzs-pad) solid transparent;
	border-radius: calc(var(--fzs-card-radius, 999px) + var(--fzs-pad));
	background: var(--fzs-card-bg, var(--fzs-bg, var(--ia-paper, rgba(255, 255, 255, .86))));
	background: var(--fzs-card-bg, var(--fzs-bg, color-mix(in srgb, var(--ia-paper, #fff) 88%, transparent)));
	background-clip: padding-box;
	box-shadow: inset 0 0 0 var(--fzs-card-bw, 0px) var(--fzs-ring, var(--fzs-card-bc, var(--fzs-c-line)));
	gap: 5px;
}
.fzs-on ul.products li.product .fzs-toggle--card.fzs-mode--text { padding: 0 12px; }
.fzs-on .fzs-toggle--card.fzs-mode--icon_text .fzs-mark { width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; }
.fzs-on .fzs-toggle--card.fzs-mode--icon_text .fzs-svg { width: var(--fzs-card-icon, 18px); height: var(--fzs-card-icon, 18px); }
.fzs-on .fzs-toggle--card .fzs-label {
	font-size: var(--fzs-card-fs, 13px);
	font-weight: var(--fzs-card-fw, 600);
	text-transform: var(--fzs-card-tt, none);
	letter-spacing: var(--fzs-card-ls, .03em);
}

/* Under the title and price: in the flow, no chip unless one was chosen. */
.fzs-on ul.products li.product .fzs-toggle--card.fzs-at-below {
	position: relative;
	top: auto;
	right: auto;
	transform: none;
	margin: 2px 0 6px;
	vertical-align: middle;
}
.fzs-on ul.products li.product .fzs-toggle--card.fzs-at-below.fzs-mode--icon .fzs-mark {
	padding: var(--fzs-card-pad, 0px);
	background: var(--fzs-card-bg, transparent);
}
.fzs-on ul.products li.product .fzs-toggle--card.fzs-at-below:not(.fzs-mode--icon) {
	--fzs-face: var(--fzs-card-h, 44px);
	padding: 0 8px;
	border-radius: calc(var(--fzs-card-radius, 6px) + var(--fzs-pad));
	background: var(--fzs-card-bg, transparent);
	background-clip: padding-box;
}

/* Shown only while the card is hovered — on a desktop with a mouse. Touch
   screens, a saved button and the keyboard always see it. */
@media (hover: hover) and (pointer: fine) {
	.fzs-on ul.products li.product .fzs-toggle--card.fzs-hover[aria-pressed="false"] { opacity: 0; }
	.fzs-on ul.products li.product:hover .fzs-toggle--card.fzs-hover,
	.fzs-on ul.products li.product:focus-within .fzs-toggle--card.fzs-hover { opacity: 1; }
}

/* -------------------------------------------------------------------------
   ON THE PRODUCT PAGE
   Quiet beside the add-to-cart button: that is the only thing on this page
   allowed to shout.
   ------------------------------------------------------------------------- */
.fzs-single { margin: 18px 0 6px; }

/* Shared: an outlined control in the theme's own line colour. */
.fzs-on .fzs-toggle--single {
	--fzs-face: var(--fzs-single-h, 48px);
	--fzs-pad: max(0px, calc((44px - var(--fzs-face)) / 2));
	position: relative;
	min-height: max(44px, var(--fzs-face));
	padding: 0 18px;
	border: var(--fzs-pad) solid transparent;
	border-radius: calc(var(--fzs-single-radius, 0px) + var(--fzs-pad));
	background: var(--fzs-single-bg, transparent);
	background-clip: padding-box;
	box-shadow: inset 0 0 0 var(--fzs-single-bw, 1px) var(--fzs-ring, var(--fzs-single-bc, var(--fzs-c-line)));
	font-family: var(--ia-sans, var(--et-font-body, inherit));
}
.fzs-on .fzs-toggle--single:hover { --fzs-ring: var(--fzs-single-bc, var(--fzs-c-line-strong)); background: var(--fzs-single-bg, transparent); background-clip: padding-box; }
.fzs-on .fzs-toggle--single[aria-pressed="true"] { --fzs-ring: var(--fzs-c-on); }
.fzs-on .fzs-toggle--single.fzs-mode--icon { padding: 0; min-width: max(44px, var(--fzs-face)); width: max(44px, var(--fzs-face)); }
.fzs-on .fzs-toggle--single .fzs-svg { width: var(--fzs-single-icon, 21px); height: var(--fzs-single-icon, 21px); }
.fzs-on .fzs-toggle--single .fzs-label {
	font-size: var(--fzs-single-fs, 13px);
	font-weight: var(--fzs-single-fw, 600);
	text-transform: var(--fzs-single-tt, none);
	letter-spacing: var(--fzs-single-ls, .03em);
}

/* Beside the add-to-cart button, inside its form. */
.fzs-single--cart {
	display: inline-flex;
	vertical-align: middle;
	margin: 0 0 0 8px;
}
.fzs-single--cart .fzs-toggle--single { align-self: var(--fzs-single-align, stretch); }

/* Under the product name. */
.fzs-single--title { margin: -2px 0 12px; }
.fzs-on .fzs-single--title .fzs-toggle--single {
	--fzs-face: var(--fzs-single-h, 44px);
	padding: 0 14px;
}
.fzs-on .fzs-single--title .fzs-toggle--single.fzs-mode--icon { padding: 0; }

/* Under the gallery (moved there by the script). */
.fzs-single--gallery { margin: 12px 0 18px; clear: left; }

/* A line under the add-to-cart form — the 1.0 look: uppercase, full width to
   340px, a line of type rather than a second call to action. */
.fzs-on .fzs-single--below_cart .fzs-toggle--single,
.fzs-on .fzs-single--gallery .fzs-toggle--single.fzs-mode--icon_text,
.fzs-on .fzs-single--gallery .fzs-toggle--single.fzs-mode--text {
	width: 100%;
	max-width: 340px;
	padding: 13px 20px;
	gap: 10px;
}
.fzs-on .fzs-single--below_cart .fzs-toggle--single .fzs-label,
.fzs-on .fzs-single--gallery .fzs-toggle--single .fzs-label {
	font-size: var(--fzs-single-fs, 11.5px);
	font-weight: var(--fzs-single-fw, 400);
	text-transform: var(--fzs-single-tt, uppercase);
	letter-spacing: var(--fzs-single-ls, var(--ia-label, .11em));
}
.fzs-on .fzs-single--below_cart .fzs-toggle--single.fzs-mode--icon { width: max(44px, var(--fzs-face)); padding: 0; }

/* -------------------------------------------------------------------------
   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-on .fzs-toggle,
	.fzs-on .fzs-toggle--card .fzs-mark,
	.fzs-toggle,
	.fzs-svg path,
	.fzs-toast,
	.fzs-page ul.products li.product { transition: none; }
}