/*
 * Instant side cart (side-cart-instant.js), ported from staging2 (faw-4 brand/_side-cart-instant.scss)
 * in the live greys. While an add-to-cart is on its way the cart is already open with a shimmering
 * skeleton row; while it refreshes, rows, totals and the suggestion shimmer in place.
 * Reduced motion: still blocks.
 */

:root {
	--faw-sk: #d4d4d4;
	--faw-sk-sheen: #f1f1f1;
}

@keyframes faw-sk-sweep {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

.faw-wsc-skeleton .faw-sk,
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-img-col::before,
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-sm-left::before,
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-sm-left::after,
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-sm-right::before,
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) :is(.xoo-wsc-ft-amt-label, .xoo-wsc-ft-amt-value, .xoo-wsc-sp-heading, .xoo-wsc-ft-btn),
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-sp-container :is(span, a, p, h4, h5):not(.button):not(:has(*)),
.faw-sk-cart .xoo-wsc-img-col img {
	background-color: var(--faw-sk);
	background-image: linear-gradient(90deg, var(--faw-sk) 25%, var(--faw-sk-sheen) 45%, var(--faw-sk) 65%);
	background-size: 400% 100%;
	border-radius: 4px;
	animation: faw-sk-sweep 1.2s ease-in-out infinite;
}

/* ---- The skeleton row for an item being added ---- */
.faw-wsc-skeleton .faw-sk { display: block; }
.faw-wsc-skeleton .faw-sk-thumb { width: 100%; aspect-ratio: 1; border-radius: 0; }
.faw-wsc-skeleton .faw-sk-title { width: 140px; max-width: 100%; height: 18px; }
.faw-wsc-skeleton .faw-sk-meta { width: 72px; height: 12px; }
.faw-wsc-skeleton .faw-sk-price { width: 40px; height: 18px; }
.faw-wsc-skeleton .xoo-wsc-sm-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.faw-wsc-skeleton .xoo-wsc-sm-left { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; min-width: 0; flex: 1; }
.faw-wsc-skeleton .xoo-wsc-sm-right { padding-top: 4px; }
.faw-wsc-skeleton .faw-wsc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Every row in place while the cart refreshes (remove etc.) ---- */
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-loader { display: none; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) { pointer-events: none; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) :is(.xoo-wsc-img-col, .xoo-wsc-sm-left, .xoo-wsc-sm-right) { position: relative; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) :is(.xoo-wsc-img-col, .xoo-wsc-sm-left, .xoo-wsc-sm-right) > * { visibility: hidden; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) :is(.xoo-wsc-img-col, .xoo-wsc-sm-left, .xoo-wsc-sm-right)::before,
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-sm-left::after { content: ""; position: absolute; left: 0; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-img-col::before { top: 0; width: 100%; height: 100%; border-radius: 0; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-sm-left::before { top: 4px; width: 140px; max-width: 100%; height: 18px; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-sm-left::after { top: 34px; width: 72px; height: 12px; }
.faw-sk-cart .xoo-wsc-modal.xoo-wsc-loading .xoo-wsc-product:not(.faw-wsc-pending) .xoo-wsc-sm-right::before { top: 4px; left: auto; right: 32px; width: 40px; height: 18px; }

/* ---- Totals card and "Want to add?" while adding or refreshing ---- */
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) :is(.xoo-wsc-empty-cart, .faw_empty-cart) { display: none; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-footer { pointer-events: none; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) :is(.xoo-wsc-ft-amt-label, .xoo-wsc-ft-amt-value, .xoo-wsc-sp-heading, .xoo-wsc-ft-btn),
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) :is(.xoo-wsc-ft-amt-label, .xoo-wsc-ft-amt-value, .xoo-wsc-sp-heading, .xoo-wsc-ft-btn) *,
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-sp-container :is(span, a, p, h4, h5):not(.button):not(:has(*)) { color: transparent !important; text-decoration: none !important; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-ft-btn { box-shadow: none !important; border-color: transparent !important; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-ft-btn svg,
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-ft-btn img { visibility: hidden; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) :is(.xoo-wsc-ft-amt-label, .xoo-wsc-ft-amt-value) { flex: 0 0 auto; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-sp-container img { filter: brightness(0) invert(0.83); }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-sp-container .button { visibility: hidden; }
/* The Checkout arrow (an ::after image), "Want to add?" sized to its text, and the suggestion
   price as one block (its "$" is a span, so the rule above only caught the symbol). */
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-ft-btn::after { visibility: hidden; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-sp-heading { display: block; width: fit-content; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-sp-container .xoo-wsc-sp-price { display: inline-block; color: transparent !important; background-color: var(--faw-sk); background-image: linear-gradient(90deg, var(--faw-sk) 25%, var(--faw-sk-sheen) 45%, var(--faw-sk) 65%); background-size: 400% 100%; border-radius: 4px; animation: faw-sk-sweep 1.2s ease-in-out infinite; }
.faw-sk-cart .xoo-wsc-modal:is(.faw-wsc-adding, .xoo-wsc-loading) .xoo-wsc-sp-container .xoo-wsc-sp-price * { color: transparent !important; background: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
	.faw-sk-cart *, .faw-sk-cart *::before, .faw-sk-cart *::after, .faw-wsc-skeleton .faw-sk { animation: none !important; }
}

/* "Want to add?": the suggestion is a lightSlider list. When a cart refresh lands before the slider
   is set up again, the list falls back to the browser's 40px indent and the item sits off the
   heading's line. Keep it flush either way. */
.xoo-wsc-sp-container ul.xoo-wsc-sp-slider { padding: 0 !important; margin: 0 !important; list-style: none; }
.xoo-wsc-sp-container ul.xoo-wsc-sp-slider:not(.lSSlide) { width: auto !important; transform: none !important; }
.xoo-wsc-sp-container ul.xoo-wsc-sp-slider:not(.lSSlide) > li { width: 100% !important; margin-right: 0 !important; }