/* Side Cart Checkout — drawer
 * Colours come from the plugin settings as --fsc-* variables; the values below
 * are only fallbacks. Headings: Inter, bold, uppercase. */

:root{
	--fsc-primary: #222222;
	--fsc-dark: #000000;
	--fsc-bg: #FFFFFF;
	--fsc-text: #202020;
	--fsc-accent: #FFE08A;
	--fsc-line: rgba(32, 32, 32, .12);
	--fsc-muted: rgba(32, 32, 32, .62);
	--fsc-card: #ffffff;
	--fsc-ok: #1d6f42;
	--fsc-radius: 12px;
	--fsc-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fsc-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The theme's own mini cart stays hidden while the drawer is in charge. */
html.fsc-on .elementor-menu-cart__container, html.fsc-on .elementor-menu-cart__main{ display: none !important; }

html.fsc-lock, html.fsc-lock body{ overflow: hidden !important; }

.fsc-root, .fsc-root *{ box-sizing: border-box; }
.fsc-root{
	position: fixed; inset: 0; z-index: 999990;
	pointer-events: none;
	font-family: var(--fsc-body); color: var(--fsc-text);
	font-size: 15px; line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
.fsc-root.is-open{ pointer-events: auto; }

.fsc-root .fsc-scrim{
	position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
	opacity: 0; transition: opacity .25s ease;
}
.fsc-root.is-open .fsc-scrim{ opacity: 1; }

.fsc-root .fsc-panel{
	position: absolute; top: 0; right: 0; bottom: 0;
	width: 440px; max-width: 100%;
	background: var(--fsc-bg);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
	box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
}
.fsc-root.is-open .fsc-panel{ transform: translateX(0); }

/* ---------- header ---------- */
.fsc-root .fsc-head{
	display: flex; align-items: center; gap: 10px;
	padding: 16px 18px 12px;
	border-bottom: 1px solid var(--fsc-line);
	background: var(--fsc-bg);
}
.fsc-root .fsc-title{
	flex: 1; margin: 0;
	font-family: var(--fsc-head); font-size: 22px; font-weight: 800; line-height: 1.2;
	letter-spacing: .01em; text-transform: uppercase; color: var(--fsc-text);
	display: flex; align-items: center; gap: 8px;
}
.fsc-root .fsc-count{
	display: inline-grid; place-items: center;
	min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px;
	background: var(--fsc-primary); color: #fff;
	font-family: var(--fsc-body); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0;
}
.fsc-root .fsc-icon-btn{
	width: 38px; height: 38px; border: 0; border-radius: 10px;
	background: transparent; color: var(--fsc-text);
	display: grid; place-items: center; cursor: pointer; padding: 0;
}
.fsc-root .fsc-icon-btn[hidden]{ display: none; }
.fsc-root .fsc-icon-btn:hover{ background: rgba(0, 0, 0, .06); }
.fsc-root .fsc-icon-btn svg{ width: 22px; height: 22px; }
.fsc-root .fsc-close{ color: var(--fsc-primary); }

/* step dots */
.fsc-root .fsc-steps{
	display: flex; gap: 6px; padding: 10px 18px 0;
}
.fsc-root .fsc-steps span{
	flex: 1; height: 4px; border-radius: 4px; background: var(--fsc-line);
	transition: background .3s;
}
.fsc-root .fsc-steps span.on{ background: var(--fsc-primary); }
.fsc-root .fsc-steps-labels{
	display: flex; padding: 6px 18px 0; gap: 6px;
	font-size: 11px; color: var(--fsc-muted); text-transform: uppercase; letter-spacing: .06em;
}
.fsc-root .fsc-steps-labels span{ flex: 1; }
.fsc-root .fsc-steps-labels span.on{ color: var(--fsc-text); font-weight: 600; }

/* ---------- body ---------- */
.fsc-root .fsc-body{
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
.fsc-root .fsc-view{ padding: 14px 18px 24px; animation: fsc-in .28s ease both; }
.fsc-root .fsc-view.back{ animation-name: fsc-in-back; }
@keyframes fsc-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes fsc-in-back { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

.fsc-root .fsc-h{
	font-family: var(--fsc-head); font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--fsc-text);
	text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 10px;
}
.fsc-root .fsc-note{ color: var(--fsc-muted); font-size: 13px; margin: 0 0 12px; }

/* cart lines */
.fsc-root .fsc-line{
	display: grid; grid-template-columns: 76px 1fr auto; gap: 12px;
	padding: 14px 0; border-bottom: 1px solid var(--fsc-line);
}
.fsc-root .fsc-line img{
	width: 76px; height: 76px; object-fit: cover; border-radius: 10px;
	background: #fff; border: 1px solid var(--fsc-line);
}
.fsc-root .fsc-line-name{ font-weight: 600; font-size: 15px; margin: 0 0 8px; line-height: 1.25; }
.fsc-root .fsc-line-name a{ color: inherit; text-decoration: none; }
.fsc-root .fsc-line-side{ display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.fsc-root .fsc-remove{
	border: 0; background: none; color: var(--fsc-muted); cursor: pointer; padding: 2px;
	width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center;
}
.fsc-root .fsc-remove:hover{ color: var(--fsc-primary); background: rgba(0, 0, 0, .05); }
.fsc-root .fsc-remove svg{ width: 16px; height: 16px; }
.fsc-root .fsc-price{ font-weight: 700; font-size: 16px; white-space: nowrap; }
.fsc-root .fsc-was{ color: var(--fsc-muted); text-decoration: line-through; font-size: 13px; font-weight: 400; margin-left: 6px; }

.fsc-root .fsc-qty{
	display: inline-flex; align-items: center;
	border: 1px solid var(--fsc-line); border-radius: 10px; background: #fff; overflow: hidden;
}
.fsc-root .fsc-qty button{
	width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
	color: var(--fsc-primary); font-size: 18px; line-height: 1; padding: 0;
}
.fsc-root .fsc-qty button:disabled{ opacity: .35; cursor: default; }
.fsc-root .fsc-qty span{ min-width: 30px; text-align: center; font-weight: 600; }

/* suggestion rail — compact rows; the next card peeks in from the edge */
.fsc-root .fsc-h-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.fsc-root .fsc-h-row .fsc-h{ margin: 0; }
.fsc-root .fsc-swipe{
	display: inline-flex; align-items: center; gap: 4px; flex: none;
	font-size: 12px; font-weight: 600; color: var(--fsc-muted);
}
.fsc-root .fsc-swipe svg{ width: 14px; height: 14px; animation: fsc-nudge 1.6s ease-in-out infinite; }
@keyframes fsc-nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(4px); } }
.fsc-root .fsc-rail{
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
	gap: 10px; overflow-x: auto; padding: 2px; margin: 0 -2px;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fsc-root .fsc-rail::-webkit-scrollbar{ display: none; }
.fsc-root .fsc-rail.many{
	grid-auto-columns: 84%;
	-webkit-mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, .25));
	        mask-image: linear-gradient(to right, #000 82%, rgba(0, 0, 0, .25));
}
.fsc-root .fsc-rail.many.end{ -webkit-mask-image: none; mask-image: none; }
.fsc-root .fsc-card{
	scroll-snap-align: start;
	display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px;
	background: var(--fsc-card); border: 1px solid var(--fsc-line); border-radius: var(--fsc-radius);
	padding: 10px;
}
.fsc-root .fsc-card img{ width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.fsc-root .fsc-card-body{ min-width: 0; }
.fsc-root .fsc-card-name{
	font-weight: 600; font-size: 14px; line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fsc-root .fsc-card-price{ margin-top: 3px; white-space: nowrap; }
.fsc-root .fsc-card .fsc-price{ font-size: 14.5px; }
.fsc-root .fsc-card .fsc-was{ font-size: 12px; }
.fsc-root .fsc-off{ font-size: 11px; font-weight: 700; color: var(--fsc-ok); margin-top: 1px; }
.fsc-root .fsc-card .fsc-btn{ width: auto; height: 36px; padding: 0 16px; font-size: 12.5px; }
.fsc-root .fsc-stack{ display: grid; gap: 10px; }
.fsc-root .fsc-arrows{ display: none; gap: 6px; }
.fsc-root .fsc-arrow{
	width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
	border: 1px solid var(--fsc-line); background: #fff; color: var(--fsc-text);
	display: grid; place-items: center;
}
.fsc-root .fsc-arrow svg{ width: 16px; height: 16px; }
.fsc-root .fsc-arrow[data-fsc="rail-next"] svg{ transform: rotate(180deg); }
.fsc-root .fsc-arrow:hover{ border-color: var(--fsc-primary); color: var(--fsc-primary); }
/* Mouse and trackpad: arrows instead of the "Swipe" hint. */
@media (hover: hover) and (pointer: fine) {
	.fsc-root .fsc-arrows{ display: inline-flex; }
	.fsc-root .fsc-swipe{ display: none; }
}
.fsc-root .fsc-dots{ display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.fsc-root .fsc-dots span{ width: 6px; height: 6px; border-radius: 99px; background: var(--fsc-line); transition: width .2s, background .2s; }
.fsc-root .fsc-dots span.on{ width: 18px; background: var(--fsc-primary); }

/* empty */
.fsc-root .fsc-empty{ text-align: center; padding: 30px 10px 6px; color: var(--fsc-muted); }
.fsc-root .fsc-empty svg{ width: 54px; height: 54px; color: var(--fsc-primary); opacity: .8; }

/* ---------- forms ---------- */
.fsc-root .fsc-field{ margin-bottom: 14px; }
.fsc-root .fsc-field label{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.fsc-root .fsc-field label small{ font-weight: 400; color: var(--fsc-muted); }
.fsc-root .fsc-input, .fsc-root .fsc-select{
	width: 100%; height: 50px; padding: 0 14px;
	border: 1.5px solid var(--fsc-line); border-radius: 12px; background: #fff;
	font: inherit; font-size: 16px; color: var(--fsc-text);
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none; appearance: none;
}
.fsc-root .fsc-select{
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px;
	background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px;
}
.fsc-root .fsc-input:focus, .fsc-root .fsc-select:focus{
	outline: none; border-color: var(--fsc-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fsc-primary) 18%, transparent);
}
.fsc-root .fsc-field.bad .fsc-input, .fsc-root .fsc-field.bad .fsc-select{ border-color: #c62828; }
.fsc-root .fsc-err{ color: #c62828; font-size: 12.5px; margin-top: 5px; display: none; }
.fsc-root .fsc-field.bad .fsc-err{ display: block; }
.fsc-root .fsc-phone{ display: flex; align-items: stretch; }
.fsc-root .fsc-phone .fsc-cc{
	display: grid; place-items: center; padding: 0 12px;
	border: 1.5px solid var(--fsc-line); border-right: 0; border-radius: 12px 0 0 12px;
	background: rgba(0, 0, 0, .03); font-weight: 600;
}
.fsc-root .fsc-phone .fsc-input{ border-radius: 0 12px 12px 0; }
.fsc-root .fsc-row2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fsc-root .fsc-hint{ font-size: 12px; color: var(--fsc-muted); margin-top: 5px; }
.fsc-root .fsc-hint.warn{ color: #8a5a00; background: #fff6df; border: 1px solid #f3dca0; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; }
.fsc-root .fsc-tick{ color: var(--fsc-ok); font-weight: 600; }

/* check row (gift wrap) */
.fsc-root .fsc-check{
	display: flex; align-items: center; gap: 12px; cursor: pointer;
	border: 1.5px solid var(--fsc-line); border-radius: 12px; background: #fff;
	padding: 12px 14px; user-select: none;
}
.fsc-root .fsc-check input{ width: 20px; height: 20px; accent-color: var(--fsc-primary); margin: 0; flex: none; }
.fsc-root .fsc-check .fsc-check-text{ flex: 1; font-weight: 600; }
.fsc-root .fsc-check .fsc-check-price{ color: var(--fsc-muted); font-weight: 600; }
.fsc-root .fsc-check.on{ border-color: var(--fsc-primary); background: color-mix(in srgb, var(--fsc-primary) 5%, #fff); }

/* payment options */
.fsc-root .fsc-pay{ display: grid; gap: 10px; }
.fsc-root .fsc-opt{
	position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
	border: 1.5px solid var(--fsc-line); border-radius: 14px; background: #fff;
	padding: 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.fsc-root .fsc-opt input{ position: absolute; opacity: 0; pointer-events: none; }
.fsc-root .fsc-radio{
	width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--fsc-line);
	display: grid; place-items: center;
}
.fsc-root .fsc-opt.on{ border-color: var(--fsc-primary); background: color-mix(in srgb, var(--fsc-primary) 5%, #fff); }
.fsc-root .fsc-opt.on .fsc-radio{ border-color: var(--fsc-primary); }
.fsc-root .fsc-opt.on .fsc-radio::after{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--fsc-primary); }
.fsc-root .fsc-opt-title{ font-weight: 700; }
.fsc-root .fsc-opt-note{ font-size: 12.5px; color: var(--fsc-muted); }
.fsc-root .fsc-opt-amt{ font-weight: 700; white-space: nowrap; text-align: right; }
.fsc-root .fsc-badge{
	display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px;
	background: var(--fsc-accent); color: #5a3a00; font-size: 11.5px; font-weight: 700; vertical-align: 1px;
}

/* coupon */
.fsc-root .fsc-coupon{ display: flex; gap: 8px; }
.fsc-root .fsc-coupon .fsc-input{ height: 46px; text-transform: uppercase; }
.fsc-root .fsc-coupon .fsc-btn{ width: auto; height: 46px; padding: 0 18px; }
.fsc-root .fsc-chip{
	display: inline-flex; align-items: center; gap: 6px; margin: 8px 6px 0 0;
	padding: 5px 6px 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--fsc-ok) 12%, #fff);
	color: var(--fsc-ok); font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.fsc-root .fsc-chip button{ border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.fsc-root .fsc-link{ border: 0; background: none; color: var(--fsc-primary); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* summary */
.fsc-root .fsc-sum{ background: #fff; border: 1px solid var(--fsc-line); border-radius: 14px; padding: 4px 14px; }
.fsc-root .fsc-sum-toggle{
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	border: 0; background: none; padding: 12px 0; font: inherit; font-weight: 600; cursor: pointer; color: inherit;
}
.fsc-root .fsc-sum-toggle svg{ width: 18px; height: 18px; transition: transform .2s; }
.fsc-root .fsc-sum.open .fsc-sum-toggle svg{ transform: rotate(180deg); }
.fsc-root .fsc-sum-items{ display: none; border-top: 1px dashed var(--fsc-line); padding: 8px 0; }
.fsc-root .fsc-sum.open .fsc-sum-items{ display: block; }
.fsc-root .fsc-sum-item{ display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.fsc-root .fsc-rows{ padding: 6px 0 10px; border-top: 1px solid var(--fsc-line); }
.fsc-root .fsc-r{ display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.fsc-root .fsc-r.minus span:last-child, .fsc-root .fsc-r.free span:last-child{ color: var(--fsc-ok); font-weight: 600; }
.fsc-root .fsc-r.total{ font-size: 17px; font-weight: 800; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--fsc-line); }

/* ---------- footer ---------- */
.fsc-root .fsc-foot{
	padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--fsc-line);
	background: color-mix(in srgb, var(--fsc-bg) 70%, #fff);
}
.fsc-root .fsc-foot-row{ display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; }
.fsc-root .fsc-foot-label{ font-size: 12px; color: var(--fsc-muted); text-transform: uppercase; letter-spacing: .06em; }
.fsc-root .fsc-foot-total{ font-size: 22px; font-weight: 800; line-height: 1.1; }
.fsc-root .fsc-foot-save{ color: var(--fsc-ok); font-weight: 700; font-size: 13.5px; }
.fsc-root .fsc-trust{ text-align: center; font-size: 11.5px; color: var(--fsc-muted); margin-top: 8px; letter-spacing: .02em; }

.fsc-root .fsc-btn{
	width: 100%; height: 56px; border: 0; border-radius: 12px; cursor: pointer;
	background: var(--fsc-primary); color: #fff;
	font-family: var(--fsc-body); font-size: 16px; font-weight: 700; letter-spacing: .02em;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	box-shadow: 0 4px 0 var(--fsc-dark);
	transition: transform .08s, box-shadow .08s, background .15s, opacity .15s;
	text-transform: uppercase;
}
.fsc-root .fsc-btn:hover{ background: color-mix(in srgb, var(--fsc-primary) 90%, #000); }
.fsc-root .fsc-btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--fsc-dark); }
.fsc-root .fsc-btn:disabled{ opacity: .55; cursor: default; transform: none; }
.fsc-root .fsc-btn svg{ width: 20px; height: 20px; }
.fsc-root .fsc-btn.sm{ height: 38px; font-size: 13px; box-shadow: none; border-radius: 9px; }
.fsc-root .fsc-btn.dark{ background: var(--fsc-text); box-shadow: 0 4px 0 #000; }
.fsc-root .fsc-btn.ghost{ background: transparent; color: var(--fsc-text); border: 1.5px solid var(--fsc-line); box-shadow: none; text-transform: none; }
.fsc-root .fsc-btn.busy{ pointer-events: none; }
.fsc-root .fsc-btn.busy::after{
	content: ""; width: 18px; height: 18px; border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: fsc-spin .7s linear infinite;
}
@keyframes fsc-spin { to { transform: rotate(360deg); } }

/* messages */
.fsc-root .fsc-msg{
	margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px;
	background: #fdecea; color: #8a1c1c; border: 1px solid #f5c2c0;
}
.fsc-root .fsc-msg.ok{ background: #e8f5ec; color: var(--fsc-ok); border-color: #bfe3cb; }

/* an order still waiting for its address, shown on top of the cart */
.fsc-root .fsc-pending{
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; margin: 4px 0 10px; border-radius: 12px;
	background: #fff6df; border: 1px solid #f3dca0; color: #6b4600;
	font-size: 13.5px; font-weight: 600; line-height: 1.3;
}
.fsc-root .fsc-pending svg{ width: 22px; height: 22px; flex: none; }
.fsc-root .fsc-pending span{ flex: 1; }
.fsc-root .fsc-pending .fsc-btn{ width: auto; height: 34px; padding: 0 12px; font-size: 12px; flex: none; }
.fsc-root .fsc-merge-note{ text-align: center; font-size: 12.5px; color: var(--fsc-ok); font-weight: 600; margin-top: 8px; }
.fsc-root .fsc-merge-alt{ text-align: center; margin-top: 6px; font-size: 13px; }

/* order placed — top of the address step */
.fsc-root .fsc-placed{
	display: flex; align-items: center; gap: 14px;
	padding: 16px; border-radius: 14px;
	background: var(--fsc-ok); color: #fff;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--fsc-ok) 30%, transparent);
	animation: fsc-rise .45s cubic-bezier(.2, 1.2, .4, 1) both;
}
.fsc-root .fsc-placed-seal{
	width: 46px; height: 46px; border-radius: 50%; flex: none;
	background: #fff; color: var(--fsc-ok); display: grid; place-items: center;
}
.fsc-root .fsc-placed-seal svg{ width: 26px; height: 26px; }
.fsc-root .fsc-placed-title{
	font-family: var(--fsc-head); font-weight: 800; font-size: 21px; line-height: 1.15;
	text-transform: uppercase; letter-spacing: .01em; color: #fff;
}
.fsc-root .fsc-placed-meta{ font-size: 13px; margin-top: 3px; color: rgba(255, 255, 255, .9); }
.fsc-root .fsc-placed-note{ margin: 12px 2px 4px; font-size: 14.5px; font-weight: 600; color: var(--fsc-text); }
@keyframes fsc-rise { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* done */
.fsc-root .fsc-done-hero{ text-align: center; padding: 6px 0 4px; }
.fsc-root .fsc-done-hero .fsc-seal{
	width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
	background: var(--fsc-ok); color: #fff; display: grid; place-items: center;
	animation: fsc-pop .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
.fsc-root .fsc-done-hero .fsc-seal svg{ width: 32px; height: 32px; }
@keyframes fsc-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fsc-root .fsc-done-hero h3{ font-family: var(--fsc-head); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--fsc-text); letter-spacing: .01em; text-transform: uppercase; margin: 0 0 4px; }
.fsc-root .fsc-done-meta{ color: var(--fsc-muted); font-size: 13.5px; }
.fsc-root .fsc-banner{
	display: flex; gap: 10px; align-items: flex-start;
	background: color-mix(in srgb, var(--fsc-ok) 10%, #fff); border: 1px solid color-mix(in srgb, var(--fsc-ok) 30%, #fff);
	color: var(--fsc-ok); padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; margin-bottom: 14px;
}
.fsc-root .fsc-banner svg{ width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* skeleton */
.fsc-root .fsc-skel{ padding: 14px 18px; }
.fsc-root .fsc-skel div{
	height: 76px; border-radius: 12px; margin-bottom: 12px;
	background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.09), rgba(0,0,0,.05));
	background-size: 200% 100%; animation: fsc-shimmer 1.1s infinite linear;
}
@keyframes fsc-shimmer { to { background-position: -200% 0; } }

/* toast */
.fsc-root .fsc-toast{
	position: absolute; left: 50%; bottom: 120px; transform: translate(-50%, 20px);
	background: var(--fsc-text); color: #fff; padding: 10px 16px; border-radius: 10px;
	font-size: 13.5px; opacity: 0; transition: .25s; pointer-events: none; max-width: 86%; text-align: center;
}
.fsc-root .fsc-toast.show{ opacity: 1; transform: translate(-50%, 0); }

/* floating cart button — lives outside the drawer */
.fsc-dock{
	position: fixed; z-index: 999980; bottom: 20px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	transition: bottom .2s ease, opacity .2s ease;
}
.fsc-dock--right{ right: 18px; }
.fsc-dock--left{ left: 18px; }
.fsc-dock.away{ opacity: 0; pointer-events: none; }
button.fsc-fab, button.fsc-fab:focus{
	position: relative;
	width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; margin: 0;
	background: var(--fsc-primary); color: #fff; cursor: pointer;
	display: none; place-items: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 3px 0 var(--fsc-dark);
}
button.fsc-fab.show{ display: grid; animation: fsc-pop-in .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fsc-pop-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
a.fsc-wa, a.fsc-wa:hover, a.fsc-wa:focus{
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff; text-decoration: none;
	display: grid; place-items: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25), 0 3px 0 #1a9e4b;
}
a.fsc-wa svg{ width: 30px; height: 30px; }
a.fsc-wa:hover{ background: #20bd5a; }
button.fsc-fab:hover, button.fsc-fab:focus-visible{ background: color-mix(in srgb, var(--fsc-primary) 90%, #000); }
.fsc-fab svg{ width: 27px; height: 27px; }
.fsc-fab-count{
	/* The badge lives outside .fsc-root, so it must set its own box model:
	   22 × 22 including the border = a true circle for one digit. */
	box-sizing: border-box;
	position: absolute; top: -4px; right: -4px;
	min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px;
	display: grid; place-items: center;
	background: #fff; color: var(--fsc-primary); border: 2px solid var(--fsc-primary);
	font: 800 11.5px/1 "Inter", system-ui, sans-serif; letter-spacing: 0;
}
.fsc-fab-count[hidden]{ display: none; }
button.fsc-fab.bounce{ animation: fsc-bounce .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fsc-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.22); } 60% { transform: scale(.94); } 100% { transform: scale(1); } }
@media (max-width: 767px) { .fsc-fab--no-mobile{ display: none !important; } }
@media (min-width: 768px) { .fsc-fab--no-desktop{ display: none !important; } }

/* phones */
@media (max-width: 520px) {
	.fsc-root .fsc-panel{ width: 100%; }
	.fsc-root .fsc-title{ font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.fsc-root .fsc-panel, .fsc-root .fsc-scrim, .fsc-root .fsc-view{ transition: none; animation: none; }
}