/* Primary button, A3 "Pale Sky sweep" (Arrow buttons, Oct 2026).
   Bordeaux pill, text at the start, arrow in a Pale Sky circle at the end.
   Hover: the sky sweeps across and the text turns ink. Click: dots, then a check, sky held.
   Loads after every view stylesheet so it wins over the old per-view sizes; a context sets --ab-h only. */
.qs-btn.qs-btn--commit,
#main.shg-co #place_order {
	--ab-h: 52px;
	--ab-c: calc(var(--ab-h) - 12px);
	--ab-ink: var(--rich-mahogany);
	position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px;
	min-block-size: var(--ab-h); padding-block: 0; padding-inline: 24px 6px;
	border: 0; border-radius: 999px;
	background: var(--night-bordeaux); color: var(--seashell);
	font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap;
	transition: color .3s ease, transform .12s ease;
	-webkit-tap-highlight-color: transparent;
}
.qs-btn.qs-btn--commit::before,
#main.shg-co #place_order::before {
	content: ""; position: absolute; z-index: -1;
	inset-block-start: 50%; inset-inline-end: 6px; translate: 0 -50%;
	inline-size: var(--ab-c); block-size: var(--ab-c); border-radius: 999px;
	background: var(--pale-sky);
	transition: inline-size .5s cubic-bezier(.2, .8, .2, 1);
}
.qs-btn.qs-btn--commit::after,
#main.shg-co #place_order::after {
	content: ""; flex: none; margin-inline-start: auto;
	inline-size: var(--ab-c); block-size: var(--ab-c);
	background: var(--ab-ink);
	-webkit-mask: var(--ab-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")) center / 19px 19px no-repeat;
	mask: var(--ab-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")) center / 19px 19px no-repeat;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* The arrow carries the meaning now; old inline icons go. */
.qs-btn.qs-btn--commit > svg { display: none; }

@media (hover: hover) {
	.qs-btn.qs-btn--commit:hover,
	#main.shg-co #place_order:hover { background: var(--night-bordeaux); color: var(--ab-ink); }
	.qs-btn.qs-btn--commit:hover::before,
	#main.shg-co #place_order:hover::before { inline-size: calc(100% - 12px); }
	.qs-btn.qs-btn--commit:hover::after,
	#main.shg-co #place_order:hover::after { transform: translateX(-3px); }
}
.qs-btn.qs-btn--commit:active,
#main.shg-co #place_order:active { transform: scale(.98); }
.qs-btn.qs-btn--commit:focus-visible,
#main.shg-co #place_order:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Working: dots in the circle. Done: a check, sky held across. */
.qs-btn.qs-btn--commit:is(.is-busy, .loading),
#main.shg-co.processing #place_order,
.processing #main.shg-co #place_order { pointer-events: none; }
.qs-btn.qs-btn--commit:is(.is-busy, .loading)::after,
#main.shg-co .processing #place_order::after {
	--ab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E");
	animation: shg-ab-dots 1s ease-in-out infinite; transform: none;
}
.qs-btn.qs-btn--commit:is(.is-done, .added) { color: var(--ab-ink); }
.qs-btn.qs-btn--commit:is(.is-done, .added)::before { inline-size: calc(100% - 12px); }
.qs-btn.qs-btn--commit:is(.is-done, .added)::after {
	--ab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	transform: none;
}
@keyframes shg-ab-dots { 50% { opacity: .35; } }

.qs-btn.qs-btn--commit:disabled,
.qs-btn.qs-btn--commit.disabled { opacity: .5; cursor: not-allowed; }

/* Full width: text at the start, arrow at the far end. */
.qs-btn.qs-btn--commit.shg-full,
#main.shg-co #place_order { display: flex; inline-size: 100%; }

/* Context sizes */
.shg-buy .qs-btn.qs-btn--commit { --ab-h: 56px; font-size: 16px; }
.shg-sbar .qs-btn.qs-btn--commit { --ab-h: 48px; }
.shg-ck__b .qs-btn.qs-btn--commit { --ab-h: 44px; padding-inline-start: 18px; font-size: 14px; }
.shg-bs__foot .qs-btn.qs-btn--commit { --ab-h: 50px; }
@media (max-width: 749px) {
	.qs-btn.qs-btn--commit { --ab-h: 50px; padding-inline-start: 18px; }
	.shg-buy .qs-btn.qs-btn--commit { --ab-h: 52px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.qs-btn.qs-btn--commit, .qs-btn.qs-btn--commit::before, .qs-btn.qs-btn--commit::after,
	#main.shg-co #place_order, #main.shg-co #place_order::before, #main.shg-co #place_order::after { transition: none; animation: none; }
}

/* Card quick add (collection cards, homepage rails): the same A3 language, smaller.
   Plus in the Pale Sky circle; hover sweeps; dots while adding; check once it is in the cart. */
.shg-pc__add,
.qs-tile__add .qs-add {
	--ab-h: 46px;
	--ab-c: calc(var(--ab-h) - 10px);
	--ab-ink: var(--rich-mahogany);
	--ab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	isolation: isolate; overflow: hidden; box-sizing: border-box;
	display: flex; align-items: center; justify-content: flex-start; gap: 10px;
	block-size: var(--ab-h); padding-inline: 20px 5px;
	border: 0; border-radius: 999px;
	background: var(--night-bordeaux); color: var(--seashell);
	font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
	transition: opacity var(--dur-op) ease-in-out, color .3s ease, transform .12s ease;
}
.qs-tile__add .qs-add { position: relative; }
.shg-pc__add::before,
.qs-tile__add .qs-add::before {
	content: ""; position: absolute; z-index: -1;
	inset-block-start: 50%; inset-inline-end: 5px; translate: 0 -50%;
	inline-size: var(--ab-c); block-size: var(--ab-c); border-radius: 999px;
	background: var(--pale-sky);
	transition: inline-size .5s cubic-bezier(.2, .8, .2, 1);
}
.shg-pc__add::after,
.qs-tile__add .qs-add::after {
	content: ""; flex: none; margin-inline-start: auto;
	inline-size: var(--ab-c); block-size: var(--ab-c);
	background: var(--ab-ink);
	-webkit-mask: var(--ab-icon) center / 18px 18px no-repeat;
	mask: var(--ab-icon) center / 18px 18px no-repeat;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
/* The price is already under the title; the button keeps label + circle so it fits narrow rail tiles. */
.qs-tile__add .qs-add__price { display: none; }
@media (hover: hover) {
	.shg-pc__add:hover,
	.qs-tile__add .qs-add:hover { background: var(--night-bordeaux); color: var(--ab-ink); }
	.shg-pc__add:hover::before,
	.qs-tile__add .qs-add:hover::before { inline-size: calc(100% - 10px); }
	.shg-pc__add:hover::after,
	.qs-tile__add .qs-add:hover::after { transform: scale(1.12); }
}
.shg-pc__add:active,
.qs-tile__add .qs-add:active { transform: scale(.98); }
.shg-pc__add:focus-visible,
.qs-tile__add .qs-add:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.shg-pc__add.loading,
.qs-tile__add .qs-add.loading { opacity: 1; pointer-events: none; }
.shg-pc__add.loading::after,
.qs-tile__add .qs-add.loading::after {
	--ab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='19' cy='12' r='1.8'/%3E%3C/svg%3E");
	animation: shg-ab-dots 1s ease-in-out infinite; transform: none;
}
.shg-pc__add.added,
.qs-tile__add .qs-add.added { color: var(--ab-ink); }
.shg-pc__add.added::before,
.qs-tile__add .qs-add.added::before { inline-size: calc(100% - 10px); }
.shg-pc__add.added::after,
.qs-tile__add .qs-add.added::after {
	--ab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	transform: none;
}
/* Phone round add button: bordeaux with the sky circle inside. */
.shg-pc__plus { background: var(--night-bordeaux); color: var(--rich-mahogany); isolation: isolate; }
.shg-pc__plus::before { content: ""; position: absolute; z-index: -1; inset: 5px; border-radius: 50%; background: var(--pale-sky); }
.shg-pc__plus.loading svg { animation: shg-ab-dots 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
	.shg-pc__add, .shg-pc__add::before, .shg-pc__add::after,
	.qs-tile__add .qs-add, .qs-tile__add .qs-add::before, .qs-tile__add .qs-add::after { transition: none; animation: none; }
}

/* Second button (hero "מארזים לעסקים"): a plain outline, same height as the primary,
   quieter so the two do not compete. Hover fills it Pale Sky. */
.qs-btn.shg-btn-2 {
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	min-block-size: 52px; padding-block: 0; padding-inline: 28px;
	border: 1.5px solid var(--night-bordeaux); border-radius: 999px;
	background: transparent; color: var(--rich-mahogany);
	font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
	transition: background-color .3s ease, transform .12s ease;
}
@media (hover: hover) {
	.qs-btn.shg-btn-2:hover { background: var(--pale-sky); color: var(--rich-mahogany); }
}
.qs-btn.shg-btn-2:active { transform: scale(.98); }
.qs-btn.shg-btn-2:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 749px) {
	.qs-btn.shg-btn-2 { min-block-size: 50px; padding-inline: 20px; }
	.qs-hero__actions { display: flex; flex-wrap: wrap; align-self: stretch; gap: 10px; }
}

/* Cookie card on phone: the two choices share one row (compact card, fix pass 9 Nov; the 20 Oct audit had the primary on its own row). */
@media (max-width: 749px) {
	.shg-ck__b { flex-wrap: nowrap; }
	.shg-ck__b .qs-btn.qs-btn--commit { flex: 1.2 1 0; padding-inline-end: 10px; }
	.shg-ck__b .qs-btn:not(.qs-btn--commit) { flex: 1 1 0; }
}

/* Phone menu foot: the primary keeps its natural width so the circle never covers its text (audit, 20 Oct). */
@media (max-width: 749px) {
	.qs-sheet__foot { grid-template-columns: minmax(0, 1fr) auto; }
	.qs-sheet__foot .qs-btn.qs-btn--commit { padding-inline-start: 16px; font-size: 14px; }
}