/*
 * Quick add bar on a product page (living-pdp-views.php, zf_living_pdp_sticky_buy).
 *
 * The builder's order bar language: a paper panel with a 1px ink rim, 16px corners and one filled
 * forest action. On a phone it is docked to the bottom edge, on wider screens it floats as a centred
 * tag. It rises into view once the main buying area leaves the screen (living-motion.js toggles
 * .is-active) and steps aside while the footer is in view. Flat like the rest of the storefront: depth
 * comes from the rim, not a shadow.
 */
.zf-quick-add {
	--qa-ink: #1f2a21;
	--qa-forest: #0f5123;
	--qa-paper: #fff8ea;
	--qa-card: #fdfaf3;
	--qa-sand: #efe4d2;
	--qa-line: #ddd3c1;
	--qa-apricot: #f3c1a4;
	--qa-apricot-tint: #faeadf;
	--qa-muted: #4b554e;
	--qa-danger: #a32121;
	--qa-ease: cubic-bezier(0.23, 1, 0.32, 1);
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 40;
	container: quick-add / inline-size;
	pointer-events: none;
	visibility: hidden;
}
.zf-quick-add.is-active {
	visibility: visible;
}
.zf-quick-add__panel {
	pointer-events: auto;
	display: grid;
	/* The product column never gets narrower than its picture and price (the name gives way). */
	grid-template-columns: minmax(min-content, 1fr) auto;
	grid-template-areas:
		'item actions'
		'note note';
	align-items: center;
	column-gap: 12px;
	padding: 10px max(16px, env(safe-area-inset-right))
		max(10px, env(safe-area-inset-bottom))
		max(16px, env(safe-area-inset-left));
	background: var(--qa-paper);
	color: var(--qa-ink);
	border-block-start: 1px solid var(--qa-ink);
	border-start-start-radius: 16px;
	border-start-end-radius: 16px;
	translate: 0 calc(100% + 24px);
	opacity: 0;
}
.zf-quick-add.is-active .zf-quick-add__panel {
	translate: none;
	opacity: 1;
}

/* The product: its picture, name and live price. A press returns to the full buying area. */
.zf-quick-add__item {
	grid-area: item;
	display: flex;
	align-items: center;
	gap: 10px;
	min-inline-size: 0;
	min-block-size: 48px;
	color: inherit;
	text-decoration: none;
	border-radius: 12px;
}
.zf-quick-add__thumb {
	flex: none;
	inline-size: 48px;
	block-size: 48px;
	object-fit: cover;
	border-radius: 10px;
	background: var(--qa-sand);
	border: 1px solid var(--qa-line);
}
.zf-quick-add__text {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-inline-size: 0;
	line-height: 1.25;
}
.zf-quick-add__name {
	contain: inline-size;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: Fredoka, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
}
.zf-quick-add__price {
	justify-self: start;
	color: var(--qa-forest);
	font-size: 1.05rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.zf-quick-add__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Secondary tools (WhatsApp, change the bouquet): a square paper key with a v2 icon; the label is
   read aloud and shows beside the icon once the bar has room. */
.zf-quick-add__tool {
	--zf-icon-ink: var(--qa-forest);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	inline-size: 48px;
	block-size: 48px;
	color: var(--qa-forest);
	background: var(--qa-card);
	border: 1px solid var(--qa-line);
	border-radius: 12px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
}
.zf-quick-add__tool .zf-ui-icon {
	flex: none;
	inline-size: 26px;
	block-size: 26px;
}
.zf-quick-add__tool-label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The one action. It mirrors the primary add button: same label, same disabled state. */
.zf-quick-add .zf-quick-add__add {
	--zf-icon-ink: var(--qa-paper);
	--zf-icon-sage: var(--qa-apricot);
	--zf-icon-accent: var(--qa-apricot);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 48px;
	margin: 0;
	padding: 0 18px;
	color: var(--qa-paper);
	background: var(--qa-forest);
	border: 1px solid var(--qa-forest);
	border-radius: 12px;
	font-size: 1rem;
	font-weight: 750;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
}
.zf-quick-add .zf-quick-add__add .zf-ui-icon {
	flex: none;
	inline-size: 24px;
	block-size: 24px;
}
.zf-quick-add .zf-quick-add__add:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
.zf-quick-add .zf-quick-add__add[aria-busy='true'] {
	opacity: 0.78;
	cursor: progress;
}

:is(
	.zf-quick-add__item,
	.zf-quick-add__tool,
	.zf-quick-add__add
):focus-visible {
	outline: 3px solid var(--qa-ink);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.zf-quick-add__item:hover .zf-quick-add__name {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.zf-quick-add__tool:hover {
		background: var(--qa-apricot-tint);
		border-color: var(--qa-ink);
	}
	.zf-quick-add .zf-quick-add__add:not(:disabled):hover {
		background: color-mix(in srgb, var(--qa-forest) 86%, var(--qa-paper));
	}
}

/* What happened after a press from the bar: the main form's status line, repeated where the
   visitor is looking ("added", a link to the order, or what went wrong). */
.zf-quick-add__note {
	grid-area: note;
	margin: 8px 0 0;
	padding-block-start: 8px;
	border-block-start: 1px solid var(--qa-line);
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--qa-ink);
}
.zf-quick-add__note:empty {
	display: none;
}
.zf-quick-add__note[data-state='error'] {
	color: var(--qa-danger);
}
.zf-quick-add__note a {
	color: var(--qa-forest);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The planted leaf (garden.js) needs a paper ground to read on the forest button. */
.zf-quick-add .zf-quick-add__add .planted-mark {
	background-color: var(--qa-paper);
	background-size: 76%;
	border-radius: 50%;
}

/* A name cut to a few letters says nothing: with the tools beside it, it gives way to the price. */
@container quick-add (max-width: 379px) {
	.zf-quick-add__panel:has(.zf-quick-add__tool) .zf-quick-add__name {
		display: none;
	}
}
@container quick-add (max-width: 519px) {
	.zf-quick-add__panel:has(.zf-quick-add__tool ~ .zf-quick-add__tool)
		.zf-quick-add__name {
		display: none;
	}
}
@container quick-add (max-width: 399px) {
	.zf-quick-add__panel:has(.zf-quick-add__tool ~ .zf-quick-add__tool)
		.zf-quick-add__add
		> .zf-ui-icon {
		display: none;
	}
}

/* A very narrow phone keeps the price and the action; the picture steps out first. */
@container quick-add (max-width: 359px) {
	.zf-quick-add__thumb {
		display: none;
	}
	.zf-quick-add .zf-quick-add__add {
		padding-inline: 14px;
	}
}

/* Wider screens: a floating tag above the bottom edge instead of a docked bar. */
@media (min-width: 768px) {
	.zf-quick-add {
		padding-inline: 16px;
		padding-block-end: max(16px, env(safe-area-inset-bottom));
	}
	.zf-quick-add__panel {
		/* Sized by what it holds, never a stretched strip with an empty middle. */
		inline-size: fit-content;
		min-inline-size: min(100%, 30rem);
		max-inline-size: min(100%, 48rem);
		margin-inline: auto;
		padding: 8px;
		border: 1px solid var(--qa-ink);
		border-radius: 16px;
		column-gap: 32px;
	}
	/* The tag is sized by its content, so here the name counts, up to a sensible line. */
	.zf-quick-add__name {
		contain: none;
		max-inline-size: 20rem;
		font-size: 1.05rem;
	}
	.zf-quick-add__tool {
		inline-size: auto;
		padding-inline: 12px 14px;
	}
	.zf-quick-add__tool-label {
		position: static;
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		clip-path: none;
	}
	/* Concentric with the 16px tag around an 8px inset. */
	:is(.zf-quick-add__thumb, .zf-quick-add__tool),
	.zf-quick-add .zf-quick-add__add {
		border-radius: 10px;
	}
	.zf-quick-add .zf-quick-add__add {
		padding-inline: 24px;
	}
}

/* Motion: the bar rises from the edge it belongs to and leaves a little faster than it came. */
@media (prefers-reduced-motion: no-preference) {
	.zf-quick-add {
		transition: visibility 0s linear 200ms;
	}
	.zf-quick-add.is-active {
		transition-delay: 0s;
	}
	.zf-quick-add__panel {
		transition:
			translate 200ms cubic-bezier(0.4, 0, 1, 1),
			opacity 160ms ease;
	}
	.zf-quick-add.is-active .zf-quick-add__panel {
		transition:
			translate 300ms var(--qa-ease),
			opacity 180ms ease;
	}
	.zf-quick-add .zf-quick-add__add {
		transition:
			scale 140ms var(--qa-ease),
			background-color 140ms ease;
	}
	.zf-quick-add .zf-quick-add__add:not(:disabled):active {
		scale: 0.97;
	}
	.zf-quick-add__tool {
		transition:
			background-color 140ms ease,
			border-color 140ms ease,
			scale 140ms var(--qa-ease);
	}
	.zf-quick-add__tool:active {
		scale: 0.95;
	}
	.zf-quick-add__note:not(:empty) {
		animation: zf-quick-add-note 220ms var(--qa-ease);
	}
}
@keyframes zf-quick-add-note {
	from {
		opacity: 0;
		translate: 0 4px;
	}
}
html.zf-motion-off :is(.zf-quick-add, .zf-quick-add *) {
	transition: none !important;
	animation: none !important;
}

@media print {
	.zf-quick-add {
		display: none;
	}
}