/* Wittee Sticky Add to Cart - mobile, one row
 * Brand palette: #026670 teal, #58d1a2 green, #9fedd7 mint,
 *                #fae17c yellow, #fef9c4 cream, #090909 ink.
 */

:root {
	--wsatc-accent: #026670;
	--wsatc-mint: #9fedd7;
	--wsatc-green: #58d1a2;
	--wsatc-cream: #fef9c4;
	--wsatc-ink: #090909;
	--wsatc-muted: #6b7280;
	--wsatc-line: #d9e7e5;
	--wsatc-h: 60px;
	--wsatc-radius: 10px;
	/* height of Woodmart's fixed bottom toolbar, measured at runtime */
	--wsatc-offset: 0px;
	/* how far other fixed bottom-corner buttons must move up */
	--wsatc-lift: 0px;
}

.wsatc-bar, .wsatc-sheet, .wsatc-scrim { display: none; }

@media (max-width: 768px) {

	.wsatc-dock {
		position: fixed; left: 0; right: 0;
		bottom: var(--wsatc-offset);
		/* below Woodmart's side-cart drawer (500) and its overlay (400) */
		z-index: 390;
	}

	/* One-line measurement strip for the selected size, above the bar. */
	.wsatc-notebar {
		display: block;
		padding: 5px 12px;
		background: #f3f4f6;
		border-top: 1px solid var(--wsatc-line);
		font-size: 12.5px;
		font-weight: 600;
		line-height: 1.35;
		color: #3f4652;
		text-transform: none;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wsatc-notebar[hidden] { display: none; }

	.wsatc-bar {
		position: relative; left: 0; right: 0;
		display: flex; align-items: center; gap: 8px;
		height: var(--wsatc-h);
		padding: 0 10px;
		box-sizing: border-box;
		background: #fff;
		border-top: 1px solid var(--wsatc-line);
		box-shadow: 0 -6px 20px rgba(2, 102, 112, .12);
		font-family: inherit;
	}

	/* Bar is always present on product pages, so no enter/exit transform. */
	.wsatc-bar.is-visible { transform: none; }

	.wsatc-price { flex: 0 0 auto; min-width: 0; line-height: 1.15; padding-right: 2px; }

	.wsatc-price .wsatc-now {
		display: block; font-size: 15px; font-weight: 700;
		color: var(--wsatc-ink); white-space: nowrap;
	}

	.wsatc-price .wsatc-was {
		display: block; font-size: 11px; color: var(--wsatc-muted);
		text-decoration: line-through; white-space: nowrap;
	}

	.wsatc-selectors { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; }

	#wsatc-root .wsatc-chip {
		display: flex; align-items: center; justify-content: center; gap: 5px;
		flex: 1 1 0; min-width: 0; height: 40px; padding: 0 8px;
		background: #fff !important; border: 1px solid var(--wsatc-line);
		border-radius: var(--wsatc-radius);
		font-size: 13px; font-weight: 600; color: var(--wsatc-ink) !important;
		text-transform: none;
		cursor: pointer; -webkit-tap-highlight-color: transparent; appearance: none;
	}

	.wsatc-chip:active { background: #f2faf8; }
	.wsatc-chip.is-empty { color: var(--wsatc-muted); font-weight: 500; }

	.wsatc-chip.is-error {
		border-color: var(--wsatc-accent);
		background: var(--wsatc-cream);
		animation: wsatc-shake .32s;
	}

	.wsatc-chip .wsatc-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.wsatc-chip .wsatc-caret {
		flex: 0 0 auto; width: 8px; height: 8px; margin-top: -2px;
		border-right: 1.6px solid var(--wsatc-accent);
		border-bottom: 1.6px solid var(--wsatc-accent);
		transform: rotate(45deg); opacity: .75;
	}

	.wsatc-dot {
		flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
		border: 1px solid rgba(2, 102, 112, .25);
		background-size: cover; background-position: center;
	}

	#wsatc-root .wsatc-add {
		display: flex; align-items: center; justify-content: center; gap: 6px;
		flex: 0 0 auto; height: 40px; padding: 0 18px; border: 0;
		border-radius: var(--wsatc-radius);
		background: var(--wsatc-accent) !important; color: #fff !important;
		font-size: 14px; font-weight: 700; letter-spacing: .02em;
		text-transform: none;
		white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
	}

	#wsatc-root .wsatc-add svg { width: 17px; height: 17px; display: block; flex: 0 0 auto; }
	#wsatc-root .wsatc-add:active { background: #014f57 !important; }
	#wsatc-root .wsatc-add[disabled] { background: #b3c6c8 !important; cursor: default; }
	#wsatc-root .wsatc-add.is-loading { color: transparent !important; position: relative; }
	#wsatc-root .wsatc-add.is-loading svg { visibility: hidden; }

	#wsatc-root .wsatc-add.is-loading::after {
		content: ""; position: absolute; inset: 0; margin: auto;
		width: 16px; height: 16px;
		border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
		border-radius: 50%; animation: wsatc-spin .7s linear infinite;
	}

	/* Clear the bar (and Woodmart's toolbar under it) at the end of the page. */
	body.wsatc-active {
		padding-bottom: calc(var(--wsatc-h) + var(--wsatc-offset));
	}

	/* Lift the floating Instagram button / back-to-top above our bar. */
	/* Known floaters; anything else is caught by liftFloaters() in JS. */
	body.wsatc-active .insta-float,
	body.wsatc-active a.scrollToTop,
	body.wsatc-active .wd-scroll-top {
		transition: transform .2s ease;
	}

	.wsatc-scrim {
		display: block; position: fixed; inset: 0; z-index: 999991;
		background: rgba(9, 9, 9, .45);
		opacity: 0; pointer-events: none; transition: opacity .24s ease;
	}

	.wsatc-scrim.is-open { opacity: 1; pointer-events: auto; }

	.wsatc-sheet {
		display: block; position: fixed; left: 0; right: 0; bottom: 0;
		z-index: 999992; max-height: 70vh; background: #fff;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -10px 30px rgba(9, 9, 9, .22);
		transform: translateY(100%);
		transition: transform .28s cubic-bezier(.22, .8, .28, 1);
		padding-bottom: env(safe-area-inset-bottom, 0px);
		overflow: hidden;
	}

	.wsatc-sheet.is-open { transform: translateY(0); }

	.wsatc-sheet-grabber {
		width: 38px; height: 4px; border-radius: 99px;
		background: var(--wsatc-mint); margin: 8px auto 2px;
	}

	.wsatc-sheet-head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 8px 16px 10px; border-bottom: 1px solid var(--wsatc-line);
	}

	.wsatc-sheet-title {
		font-size: 14px; font-weight: 700; letter-spacing: .04em;
		text-transform: uppercase; color: var(--wsatc-accent);
	}

	.wsatc-sheet-actions {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.wsatc-sizechart {
		display: inline-flex !important;
		align-items: center;
		gap: 5px;
		height: 30px !important;
		min-height: 0 !important;
		padding: 0 12px !important;
		margin: 0 !important;
		border: 1px solid var(--wsatc-accent) !important;
		border-radius: 99px !important;
		background: #fff !important;
		color: var(--wsatc-accent) !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.wsatc-sizechart[hidden] { display: none !important; }
	.wsatc-sizechart:active { background: var(--wsatc-mint) !important; }
	.wsatc-sizechart svg { width: 14px; height: 14px; flex: 0 0 auto; }

	.wsatc-options { display: flex; flex-wrap: wrap; gap: 10px; }

	/* Size options: separate rounded pills. The theme styles bare <button>
	   elements heavily, so the box properties are forced. */
	#wsatc-root .wsatc-opt {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-width: 52px;
		height: 44px !important;
		min-height: 0 !important;
		padding: 0 16px !important;
		margin: 0 !important;
		border: 1px solid var(--wsatc-line) !important;
		border-radius: 99px !important;
		background: #fff !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		color: var(--wsatc-ink) !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	#wsatc-root .wsatc-opt.is-selected {
		border-color: var(--wsatc-accent) !important;
		color: var(--wsatc-accent) !important;
		background: var(--wsatc-mint) !important;
	}

	#wsatc-root .wsatc-opt.is-disabled {
		color: #b9bec6 !important;
		border-color: #eceef1 !important;
		background: linear-gradient(to top left, transparent calc(50% - 1px), #eceef1 50%, transparent calc(50% + 1px)) !important;
		cursor: not-allowed;
	}

	.wsatc-options.is-color { gap: 14px; }

	.wsatc-opt-color {
		display: flex; flex-direction: column; align-items: center; gap: 6px;
		width: 62px; border: 0; background: none; padding: 0; cursor: pointer;
	}

	.wsatc-opt-color .wsatc-sw {
		width: 44px; height: 44px; border-radius: 50%;
		border: 1px solid rgba(2, 102, 112, .18);
		background-size: cover; background-position: center;
	}

	.wsatc-opt-color .wsatc-nm {
		font-size: 11px; line-height: 1.2; color: var(--wsatc-muted);
		text-align: center; overflow: hidden;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	}

	.wsatc-opt-color.is-selected .wsatc-sw {
		box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wsatc-accent);
	}

	.wsatc-opt-color.is-selected .wsatc-nm { color: var(--wsatc-accent); font-weight: 700; }
	.wsatc-opt-color.is-disabled { opacity: .35; cursor: not-allowed; }

	/* Woodmart's own sticky add-to-cart would stack on top of ours */
	.wd-sticky-btn, .woodmart-sticky-btn { display: none !important; }
}

@media (max-width: 359px) {
	.wsatc-price { display: none; }
	.wsatc-add { padding: 0 14px; }
}

@keyframes wsatc-spin { to { transform: rotate(360deg); } }

@keyframes wsatc-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.wsatc-sheet, .wsatc-scrim { transition: none; }
	.wsatc-chip.is-error { animation: none; }
}

/* The Instagram float clips its children, which would hide a corner mark. */
.insta-float[data-wsatc-x] { overflow: visible !important; }

/* Dismiss mark on the floating Instagram button -- a small superscript x,
 * not a chrome button. Box properties are forced because the theme styles
 * bare <button> elements heavily. */
.insta-float .wsatc-insta-x,
button.wsatc-insta-x {
	position: absolute !important;
	top: -2px !important;
	right: -2px !important;
	left: auto !important;
	bottom: auto !important;
	width: 14px !important;
	height: 14px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 14px !important;
	max-height: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(9, 9, 9, .55) !important;
	color: #fff !important;
	font-size: 11px !important;
	line-height: 1 !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	opacity: .85;
	cursor: pointer;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
}

.insta-float .wsatc-insta-x:active { background: #026670 !important; opacity: 1; }

/* ---------- Collection design picker ---------- */

.wsatc-chip-design .wsatc-design-thumb {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	background-color: #eee;
	flex: 0 0 auto;
}

/*
 * Design picker: three big, image-only thumbnails per row.
 *
 * The sheet is capped at 65% of the viewport and scrolls, so a collection with
 * many designs stays usable on a phone without pushing the add-to-cart bar off
 * screen.
 */
.wsatc-options.is-design {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	max-height: 65vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

/*
 * The theme applies padding to buttons generally (5px 20px), which left the
 * artwork floating inside a grey frame. Override it so the image fills the
 * whole tile edge to edge.
 */
.wsatc-options.is-design .wsatc-opt-design {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0 !important;
	margin: 0;
	min-height: 0;
	border: 2px solid rgba(0, 0, 0, .12);
	border-radius: 8px;
	background: none;
	cursor: pointer;
	font: inherit;
	overflow: hidden;
	min-width: 0;
	box-sizing: border-box;
}

.wsatc-options.is-design .wsatc-opt-design .wsatc-design-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-color: #f2f2f2;
	display: block;
	margin: 0;
}

.wsatc-options.is-design .wsatc-opt-design .wsatc-design-colors {
	display: block;
	padding: 5px 2px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #444;
	background: rgba(0, 0, 0, .04);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wsatc-opt-design .wsatc-design-colors:empty {
	display: none;
}

.wsatc-opt-design.is-selected {
	border-color: var(--wsatc-accent, #111);
}

.wsatc-opt-design.is-disabled {
	opacity: .45;
}