/* Add to Quote, Unlock button, MOQ and the Quote List page. */
.sy-add-quote,
.sy-unlock,
.sy-ql__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--sy-radius, 10px);
	background: var(--theme-palette-color-1, #283951);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, transform 0.05s;
}
.sy-add-quote:active, .sy-unlock:active, .sy-ql__send:active { transform: translateY(1px); }
.sy-add-quote.is-added { background: #1e6b34; }
.sy-add-quote--loop { min-height: 38px; padding: 0 14px; font-size: 13px; margin-top: 8px; }
/* Unlock pricing & MOQ (user 2026-10-21: quiet, Enigwatch level). Everywhere (product cards, grids): one muted line,
   lock + text with a hairline underline that darkens on hover. Product page summary: a flat line button, small caps
   with tracking, what it costs in muted text, arrow that moves on hover. */
.sy-unlock { display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; color: var(--sy-ink, #263653); text-align: left; font-size: 13px; font-weight: 500; box-shadow: none; cursor: pointer; }
.sy-unlock__ico { display: inline-grid; place-items: center; flex: none; color: var(--sy-muted, #59677a); }
.sy-unlock__txt { display: inline; line-height: 1.3; }
.sy-unlock__txt strong { font-weight: 500; text-decoration: underline; text-decoration-color: var(--sy-line, #d5dce3); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.sy-unlock__txt small, .sy-unlock__go { display: none; }
.sy-unlock:hover .sy-unlock__txt strong { text-decoration-color: currentColor; }
.sy-unlock:focus-visible { outline: 2px solid var(--sy-navy, #283951); outline-offset: 3px; }
.single-product .summary .sy-unlock { gap: 12px; min-height: 48px; padding: 0 18px; border: 1px solid var(--sy-line, #d5dce3); border-radius: 2px; transition: border-color .25s, background .25s; }
.single-product .summary .sy-unlock__ico { color: var(--sy-ink, #263653); }
.single-product .summary .sy-unlock__txt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.single-product .summary .sy-unlock__txt strong { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.single-product .summary .sy-unlock__txt small { display: inline; font-size: 13px; font-weight: 400; color: var(--sy-muted, #59677a); }
.single-product .summary .sy-unlock__go { display: block; flex: none; margin-left: 8px; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.single-product .summary .sy-unlock:hover { border-color: var(--sy-ink, #263653); background: rgba(38, 54, 83, .03); }
.single-product .summary .sy-unlock:hover .sy-unlock__go { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .sy-unlock, .sy-unlock__go { transition: none; } .sy-unlock:hover .sy-unlock__go { transform: none; } }
.sy-moq { margin: 8px 0 12px; font-weight: 600; color: var(--theme-palette-color-3, #072145); }
.single-product .sy-add-quote--single { margin: 6px 0 16px; }
.sy-quote-count { text-decoration: none; }

/* Quote List page: items left, sticky "send" panel right. */
.sy-ql { --ql-ease: cubic-bezier(.2, .7, .2, 1); max-width: 1180px; margin: 0 auto; display: grid; gap: 20px; }
.sy-ql [hidden] { display: none !important; }
.sy-ql__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 56px); align-items: start; }
.sy-ql__layout.is-empty { grid-template-columns: 1fr; }
.sy-ql__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--sy-line, #d9e0e6); font-size: 13px; color: var(--sy-muted, #59677a); }
.sy-ql__count { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sy-ink, #263653); }
.sy-ql__saved::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: #2f8a57; box-shadow: 0 0 0 3px rgba(47, 138, 87, .16); }
.sy-ql__items { display: grid; }

/* Item row */
.sy-ql__item { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 132px; gap: 22px; align-items: start; padding: 22px 48px 22px 0; border-bottom: 1px solid var(--sy-line, #d9e0e6); animation: sy-ql-in .5s var(--ql-ease) both; animation-delay: calc(var(--i, 0) * 60ms); transition: opacity .3s, transform .38s var(--ql-ease), height .38s var(--ql-ease), padding .38s var(--ql-ease); }
.sy-ql__item:nth-child(2) { --i: 1; }
.sy-ql__item:nth-child(3) { --i: 2; }
.sy-ql__item:nth-child(4) { --i: 3; }
.sy-ql__item:nth-child(n+5) { --i: 4; }
.sy-ql__item.is-leaving { opacity: 0; transform: translateX(-16px); height: 0 !important; padding-block: 0; overflow: hidden; border-color: transparent; }
@keyframes sy-ql-in { from { opacity: 0; transform: translateY(10px); } }
.sy-ql__media { display: block; overflow: hidden; background: #eceef0; border-radius: var(--sy-radius, 2px); }
.sy-ql__media img, .sy-ql__noimg { display: block; width: 96px; height: 96px; object-fit: cover; transition: transform .6s var(--ql-ease); }
.sy-ql__item:hover .sy-ql__media img { transform: scale(1.06); }
.sy-ql__info { display: grid; gap: 6px; min-width: 0; }
.sy-ql__name { justify-self: start; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--sy-ink, #263653); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ql-ease); }
.sy-ql__name:hover { background-size: 100% 1px; color: var(--sy-ink, #263653); }
.sy-ql__info small { font-size: 12.5px; letter-spacing: .02em; color: var(--sy-muted, #59677a); }
.sy-ql__info small i { font-style: normal; margin: 0 8px; opacity: .6; }
.sy-ql__info textarea { margin-top: 6px; width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--sy-radius, 2px); background: var(--sy-mist-2, #f7fafb); font: inherit; font-size: 13.5px; color: var(--sy-ink, #263653); resize: vertical; transition: border-color .2s, background .2s; }
.sy-ql__info textarea:hover { border-color: var(--sy-line, #d9e0e6); }
.sy-ql__info textarea:focus { outline: none; background: #fff; border-color: var(--sy-navy, #283951); }

/* Quantity stepper (signs drawn in CSS so they never depend on font glyphs) */
.sy-ql__qty { display: grid; gap: 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sy-muted, #59677a); }
.sy-ql__stepper { display: grid; grid-template-columns: 36px 1fr 36px; height: 42px; border: 1px solid var(--sy-input, #c5cfda); border-radius: var(--sy-radius, 2px); background: #fff; transition: border-color .2s; }
.sy-ql__stepper:focus-within { border-color: var(--sy-navy, #283951); }
.sy-ql__stepper button { position: relative; border: 0; padding: 0; background: transparent; color: transparent; font-size: 0; cursor: pointer; transition: background .2s; }
.sy-ql__stepper button::before, .sy-ql__stepper button[data-step="1"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.4px; margin: -.7px 0 0 -5.5px; background: var(--sy-ink, #263653); }
.sy-ql__stepper button[data-step="1"]::after { transform: rotate(90deg); }
.sy-ql__stepper button:hover { background: var(--sy-mist, #eef4f5); }
.sy-ql__stepper input { width: 100%; min-width: 0; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font: inherit; font-size: 15px; letter-spacing: 0; color: var(--sy-ink, #263653); -moz-appearance: textfield; appearance: textfield; }
.sy-ql__stepper input::-webkit-inner-spin-button, .sy-ql__stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Remove */
.sy-ql__remove { position: absolute; top: 22px; right: 0; width: 34px; height: 34px; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background .2s, transform .3s var(--ql-ease); }
.sy-ql__remove span::before, .sy-ql__remove span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.4px; margin: -.7px 0 0 -6.5px; background: var(--sy-muted, #59677a); transform: rotate(45deg); transition: background .2s; }
.sy-ql__remove span::after { transform: rotate(-45deg); }
.sy-ql__remove:hover { background: #f6e9e7; transform: rotate(90deg); }
.sy-ql__remove:hover span::before, .sy-ql__remove:hover span::after { background: var(--sy-danger, #a33125); }

/* Send panel */
.sy-ql__submit { position: sticky; top: 120px; display: grid; gap: 14px; padding: 30px 28px; background: #fff; border: 1px solid var(--sy-line, #d9e0e6); border-radius: var(--sy-radius, 2px); box-shadow: 0 24px 50px -30px rgba(38, 54, 83, .35); animation: sy-ql-in .6s var(--ql-ease) .1s both; }
.sy-ql__title { margin: 0 0 4px; font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: var(--sy-ink, #263653); }
.sy-ql__next { list-style: none; margin: 0 0 8px; padding: 0; counter-reset: ql; }
.sy-ql__next li { position: relative; counter-increment: ql; padding: 0 0 16px 38px; font-size: 14px; line-height: 1.5; color: var(--sy-muted, #59677a); }
.sy-ql__next li::before { content: counter(ql); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--sy-line, #d9e0e6); border-radius: 50%; background: #fff; font-size: 11px; color: var(--sy-ink, #263653); }
.sy-ql__next li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 1px; background: var(--sy-line, #d9e0e6); }
.sy-ql__label { font-size: 14px; font-weight: 500; color: var(--sy-ink, #263653); }
.sy-ql__label span { margin-left: 4px; font-size: 12.5px; font-weight: 400; color: var(--sy-muted, #59677a); }
.sy-ql__submit textarea { min-height: 112px; width: 100%; padding: 12px 14px; border: 1px solid var(--sy-input, #c5cfda); border-radius: var(--sy-radius, 2px); font: inherit; font-size: 14px; resize: vertical; transition: border-color .2s; }
.sy-ql__submit textarea:focus { outline: none; border-color: var(--sy-navy, #283951); }
.sy-ql .sy-ql__send { justify-self: stretch; justify-content: space-between; min-height: 54px; padding: 0 22px; border-radius: var(--sy-radius, 2px); background: var(--sy-navy, #283951); font-size: 15px; font-weight: 500; transition: background .2s; }
.sy-ql .sy-ql__send:hover { background: #1b2a3e; }
.sy-ql .sy-ql__send .sy-arrow { transition: transform .3s var(--ql-ease); }
.sy-ql .sy-ql__send:hover .sy-arrow { transform: translateX(4px); }
.sy-ql__send[aria-busy="true"] { opacity: .7; pointer-events: none; }
.sy-ql__send[aria-busy="true"] .sy-arrow { animation: sy-ql-nudge .8s ease-in-out infinite; }
@keyframes sy-ql-nudge { 50% { transform: translateX(5px); } }
.sy-ql__hint { margin: 0; font-size: 13px; line-height: 1.55; color: var(--sy-muted, #59677a); }

/* Empty + done states */
.sy-ql__empty, .sy-ql__done { display: grid; justify-items: center; gap: 4px; max-width: 560px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 24px; text-align: center; animation: sy-ql-in .6s var(--ql-ease) both; }
.sy-ql__done { max-width: 640px; outline: none; background: #fff; border: 1px solid var(--sy-line, #d9e0e6); }
.sy-ql__empty h2, .sy-ql__done h2 { margin: 18px 0 6px; font-size: clamp(26px, 3vw, 34px); font-weight: 400; letter-spacing: -.02em; color: var(--sy-ink, #263653); }
.sy-ql__empty p, .sy-ql__done p { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.65; color: var(--sy-muted, #59677a); }
.sy-ql__done .sy-ql__ref { margin-bottom: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--sy-ink, #263653); }
.sy-ql__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; margin-top: 26px; }
.sy-ql__empty-icon { position: relative; width: 74px; height: 86px; }
.sy-ql__empty-icon i { position: absolute; inset: 0; border: 1.4px solid var(--sy-navy, #283951); border-radius: var(--sy-radius, 2px); background: #fff; }
.sy-ql__empty-icon i:nth-child(1) { opacity: .35; transform: rotate(-9deg) translate(-8px, 4px); animation: sy-ql-fan 3.2s var(--ql-ease) infinite alternate; }
.sy-ql__empty-icon i:nth-child(2) { opacity: .6; transform: rotate(6deg) translate(7px, 2px); animation: sy-ql-fan2 3.2s var(--ql-ease) infinite alternate; }
.sy-ql__empty-icon i:nth-child(3) { background: #fff linear-gradient(var(--sy-line, #d9e0e6), var(--sy-line, #d9e0e6)) 14px 22px / 44px 1.4px no-repeat; }
.sy-ql__empty-icon i:nth-child(3)::before, .sy-ql__empty-icon i:nth-child(3)::after { content: ""; position: absolute; left: 14px; height: 1.4px; background: var(--sy-line, #d9e0e6); }
.sy-ql__empty-icon i:nth-child(3)::before { top: 34px; width: 30px; }
.sy-ql__empty-icon i:nth-child(3)::after { top: 46px; width: 38px; }
@keyframes sy-ql-fan { to { transform: rotate(-14deg) translate(-12px, 6px); } }
@keyframes sy-ql-fan2 { to { transform: rotate(10deg) translate(11px, 3px); } }
.sy-ql__done .sy-auth-check { display: grid; place-items: center; width: 64px; height: 64px; margin: 0; border-radius: 50%; background: #e9f4ee; color: #1e5c3a; animation: sy-ql-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.sy-ql__done .sy-auth-check span { display: block; width: 20px; height: 10px; margin-top: -5px; border-left: 2.4px solid currentColor; border-bottom: 2.4px solid currentColor; transform: rotate(-45deg); animation: sy-ql-tick .45s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
@keyframes sy-ql-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes sy-ql-tick { from { opacity: 0; transform: rotate(-45deg) scale(.2); } }

/* Loading skeleton */
.sy-ql__loading { display: grid; gap: 14px; }
.sy-ql__loading span { display: block; height: 96px; background: linear-gradient(90deg, var(--sy-mist, #eef4f5) 0, #fff 50%, var(--sy-mist, #eef4f5) 100%) 0 0 / 200% 100%; animation: sy-ql-shimmer 1.4s linear infinite; }
@keyframes sy-ql-shimmer { to { background-position: -200% 0; } }

/* Notices */
.sy-ql__notice { padding: 14px 18px; border-left: 3px solid currentColor; font-size: 14.5px; font-weight: 500; animation: sy-ql-in .4s var(--ql-ease) both; }
.sy-ql__notice--success { background: #e9f4ee; color: #1e5c3a; }
.sy-ql__notice--error { background: #f9ecea; color: var(--sy-danger, #a33125); }
.sy-ql__notice--info { background: var(--sy-mist, #eef4f5); color: var(--sy-ink, #263653); }

@media (max-width: 960px) {
	.sy-ql__layout { grid-template-columns: 1fr; }
	.sy-ql__submit { position: static; }
}
@media (max-width: 600px) {
	.sy-ql__item { grid-template-columns: 72px minmax(0, 1fr); gap: 14px 16px; padding-right: 40px; }
	.sy-ql__media img, .sy-ql__noimg { width: 72px; height: 72px; }
	.sy-ql__qty { grid-column: 2; max-width: 150px; }
	.sy-ql__info textarea { margin-top: 2px; }
	.sy-ql__submit { padding: 24px 20px; }
	.sy-ql__bar { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	.sy-ql *, .sy-ql *::before, .sy-ql *::after { animation: none !important; transition: none !important; }
}

/* Ready-to-ship badge (R15) */
.sy-ready { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: #e9f4ee; color: #1e5c3a; font-size: 11.5px; font-weight: 500; border-radius: 999px; }
.sy-ready::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2f8a57; box-shadow: 0 0 0 3px rgba(47, 138, 87, .18); }
.sy-ready small { color: #3a7553; font-weight: 400; }
.single-product .summary .sy-ready { margin-bottom: 14px; }

/* "Added" state: CSS check mark (the body font has no tick glyph). */
.sy-add-quote__done::before { content: ""; display: inline-block; width: 10px; height: 5px; margin: 0 9px 3px 0; border-left: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(-45deg); }

/* Quiet confirmation after a gated Add to Quote. */
.sy-toast { position: fixed; left: 50%; bottom: 28px; z-index: 99990; max-width: calc(100vw - 32px); padding: 14px 20px; border-radius: 4px; background: #131c2b; color: #fff; font-size: 14px; box-shadow: 0 18px 40px -18px rgba(5, 10, 20, .6); opacity: 0; transform: translate(-50%, 8px); transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.sy-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .sy-toast { transition: opacity .2s; transform: translate(-50%, 0); } }