/**
 * Smart Cart Drawer — sticky mobile add-to-cart bar.
 *
 * Sits directly beneath the theme's own product UI, so it inherits the
 * theme's typeface by default and takes its palette from the same custom
 * properties as the drawer. Everything here is overridable from the
 * Appearance settings screen.
 */

.scd-sticky {
	/*
	 * Inherits the drawer's palette so the two read as one system, and every
	 * value is overridable from Appearance settings.
	 */
	--scd-sticky-font: var(--scd-font, inherit);
	--scd-sticky-ink: var(--scd-ink, #111111);
	--scd-sticky-line: var(--scd-line, #dcdcdc);
	--scd-sticky-bg: var(--scd-bg, #ffffff);
	--scd-sticky-button-text: var(--scd-primary-text, #ffffff);

	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999980;
	background: var(--scd-sticky-bg);
	border-top: 1px solid var(--scd-sticky-line);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
	transform: translate3d(0, 100%, 0);
	transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
	font-family: var(--scd-sticky-font);
	color: var(--scd-sticky-ink);
}

.scd-sticky[hidden] {
	display: none;
}

.scd-sticky.is-visible {
	transform: translate3d(0, 0, 0);
}

.scd-sticky__inner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.scd-sticky__thumb {
	width: 44px;
	height: 52px;
	object-fit: cover;
	flex-shrink: 0;
	background: #f6f6f4;
}

.scd-sticky__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.scd-sticky__name {
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scd-sticky__stock[hidden] {
	display: none;
}

/* ---- Always-visible size strip --------------------------------------
 * One compact row above the bar. Being permanent is the point: the
 * customer can change their mind without hunting for a way back, and it
 * costs ~40px rather than a full-height sheet.
 * -------------------------------------------------------------------- */

.scd-sticky__sizes {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-bottom: 1px solid #f0f0f0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.scd-sticky__sizes::-webkit-scrollbar {
	display: none;
}

.scd-sticky__sizes-label {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.scd-sticky__chips {
	display: flex;
	gap: 6px;
	flex: 1 1 auto;
}

.scd-sticky button.scd-sticky__chip {
	flex: 0 0 auto;
	min-width: 38px;
	height: 30px;
	padding: 0 9px;
	border: 1.5px solid var(--scd-sticky-line);
	border-radius: var(--scd-radius-chip, 0);
	background: var(--scd-sticky-bg);
	color: var(--scd-sticky-ink);
	font-family: var(--scd-sticky-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.scd-sticky button.scd-sticky__chip:hover:not(.is-disabled),
.scd-sticky button.scd-sticky__chip:focus-visible {
	border-color: var(--scd-sticky-ink);
}

.scd-sticky button.scd-sticky__chip.is-selected {
	background: var(--scd-sticky-ink);
	border-color: var(--scd-sticky-ink);
	color: var(--scd-sticky-button-text);
}

/* Out of stock: struck through, announced, never selectable. */
.scd-sticky button.scd-sticky__chip.is-disabled {
	position: relative;
	color: #b4b4b4;
	border-color: #ececec;
	cursor: not-allowed;
}

.scd-sticky button.scd-sticky__chip.is-disabled::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		#d8d8d8 50%,
		transparent calc(50% + 1px)
	);
	pointer-events: none;
}

/*
 * Availability. Neutral by default: "In stock" is reassurance, not an alert,
 * and rendering it in warning orange made a healthy product look like an
 * error. Only a genuine problem — backorder, out of stock — gets the
 * attention colour, decided from WooCommerce's own `in-stock` class rather
 * than by matching translated strings.
 */
.scd-sticky__stock {
	font-size: 10.5px;
	color: #8a8a8a;
	letter-spacing: 0.03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scd-sticky__stock.is-alert {
	color: var(--scd-alert, #b3261e);
	font-weight: 700;
}

/*
 * Quantity stepper and add button share one height variable so they line up
 * exactly. They were 44px and ~46px before — close enough to look like a
 * mistake rather than a design.
 */
.scd-sticky {
	--scd-sticky-control-h: 46px;
}

/*
 * Scoped under .scd-sticky on purpose.
 *
 * The drawer's base rule is `.scd-qty { margin-top: 12px }` and this was
 * `.scd-qty--sticky { margin-top: 0 }` — both (0,1,0), so which one won came
 * down to the order the two stylesheets happened to load in. That is not a
 * guarantee: a combine-and-minify pass can reorder or merge them, and then
 * the stepper sits 12px lower than the button for no visible reason.
 * `.scd-sticky .scd-qty--sticky` is (0,2,0) and wins either way.
 */
.scd-sticky .scd-qty--sticky {
	position: relative;
	margin: 0;
	flex-shrink: 0;
	gap: 10px;
	padding: 0 8px;
	height: var(--scd-sticky-control-h);
	box-sizing: border-box;
	border: 1.5px solid var(--scd-sticky-line);
	border-radius: 0;
	font-family: var(--scd-sticky-font);
	font-size: 13px;
	font-weight: 700;
}

.scd-sticky button.scd-qty__btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/*
 * "Only 2 left" — a tooltip above the stepper, and only when the number is
 * genuinely urgent. Sitting inline in the info column it wrapped onto two
 * lines and pushed the row out of alignment; and shown at any ceiling it
 * produced "Only 54 left", which is noise rather than urgency.
 */
/*
 * Drawn as a pseudo element from the stepper's own data-low-stock attribute.
 *
 * Deliberately not a child element. A real node inside this flex row widens
 * the stepper the moment its absolute positioning is missing — a stale or
 * stripped stylesheet — and the add button gets pushed off the screen. A
 * pseudo element has no such failure mode: without this rule there is simply
 * nothing to draw. The announced copy is a visually-hidden span in the info
 * column, out of this row entirely.
 */
.scd-sticky .scd-qty--sticky[data-low-stock]::after {
	content: attr(data-low-stock);
	position: absolute;
	bottom: calc(100% + 7px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 4px 8px;
	background: var(--scd-sticky-ink);
	color: var(--scd-sticky-button-text);
	font-family: var(--scd-sticky-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/*
 * The theme's ATC button: squared, #111, 2px border, uppercase, 700.
 *
 * `flex: 0 0 auto` is deliberate — the button must never be what shrinks.
 * When it was allowed to, `overflow: hidden` clipped its own label mid-word.
 * The product name absorbs the squeeze instead; it has an ellipsis and a
 * truncated name still tells the customer what they are buying, whereas
 * "DD TO CART" tells them nothing.
 */
.scd-sticky .scd-sticky__add {
	flex: 0 0 auto;
	display: inline-flex;
	/*
	 * Centre, not baseline.
	 *
	 * Baseline was right while this button held only text. An SVG's baseline
	 * is its bottom margin edge, so once the cart icon became a flex item it
	 * hung below the text's baseline and pushed the label and price up
	 * against the top edge. Centring aligns all three by box, which is what
	 * an icon beside text actually wants; the price keeps its own internal
	 * baseline so the struck original and the sale figure still line up.
	 */
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto;
	min-width: 132px;
	height: var(--scd-sticky-control-h);
	box-sizing: border-box;
	padding: 0 16px;
	border: 2px solid var(--scd-sticky-ink);
	border-radius: 0;
	background: var(--scd-sticky-ink);
	color: var(--scd-sticky-button-text);
	font-family: var(--scd-sticky-font);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	transition: background 0.15s, border-color 0.15s;
}

.scd-sticky__add-icon {
	flex: 0 0 auto;
	/*
	 * A shade above centre reads as aligned with uppercase text, which has no
	 * descenders and so sits visually high in its own box.
	 */
	position: relative;
	top: -0.5px;
}

.scd-sticky__add-label {
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Price inside the button ----------------------------------------
 * Rendered as real WooCommerce price markup so <del>/<ins> survive. The
 * theme's own label ran get_price_html() through wp_strip_all_tags(),
 * which drags WooCommerce's assistive sentence ("Original price was: …")
 * into the visible text — that is the run-on button in the report.
 * -------------------------------------------------------------------- */

.scd-sticky__add-price {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	font-weight: 700;
}

.scd-sticky__add-price del {
	font-weight: 400;
	opacity: 0.6;
	text-decoration: line-through;
}

.scd-sticky__add-price ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/* Belt and braces: keep assistive-only text out of sight even if the
   theme has no .screen-reader-text rule of its own. */
.scd-sticky .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.scd-sticky .scd-sticky__add:hover,
.scd-sticky .scd-sticky__add:focus-visible {
	background: #000;
	border-color: #000;
	opacity: 1;
}

.scd-sticky .scd-sticky__add:disabled {
	background: #9a9a9a;
	border-color: #9a9a9a;
	cursor: not-allowed;
}

.scd-sticky :focus-visible {
	outline: 2px solid var(--scd-sticky-ink);
	outline-offset: 2px;
}

/* Give the page room so the bar never covers the last element. */
body.scd-sticky-active {
	padding-bottom: 76px;
}

body.scd-sticky-active.scd-sticky-has-sizes {
	padding-bottom: 120px;
}

/*
 * Stand down while the theme's own quick-add sheet is open.
 *
 * Tapping "+ Quick add" on a Complete the Look or You May Also Like card
 * opens #ugcMobileSheet at the bottom of the screen — which is exactly
 * where this bar lives. Both at once is the stacked-panels bug in the
 * report. The sheet is for a different product, so it wins while open;
 * scrolling back to the main product's add-to-cart brings this back.
 */
.scd-sticky.is-suppressed {
	transform: translate3d(0, 100%, 0);
	pointer-events: none;
}

/*
 * Some themes ship their own sticky add-to-cart on product pages, which would
 * stack under this one. Set "Theme sticky bar selector" in the settings and
 * the rule below stands it down while ours is active.
 */
body.scd-sticky-enabled .scd-theme-sticky {
	position: static;
	bottom: auto;
	z-index: auto;
	margin: 0;
	box-shadow: none;
}

@media (min-width: 481px) {
	.scd-sticky .scd-sticky__add {
		min-width: 156px;
	}
}

/*
 * Phones. Four things — thumbnail, name, quantity, button — do not fit in
 * ~400px without the name collapsing to "VAPOR TEE …", which tells the
 * customer nothing. The thumbnail is the first to go: they are already
 * looking at the product.
 */
@media (max-width: 480px) {
	.scd-sticky__thumb {
		display: none;
	}

	.scd-sticky__inner {
		gap: 8px;
		padding-left: 14px;
		padding-right: 14px;
	}

	.scd-sticky__sizes {
		padding-left: 14px;
		padding-right: 14px;
	}

	.scd-sticky .scd-sticky__add {
		min-width: 0;
		padding: 0 13px;
		letter-spacing: 0.03em;
	}

	.scd-sticky .scd-qty--sticky {
		gap: 8px;
		padding: 0 6px;
	}
}

/* Very narrow (iPhone SE): the struck original price is the last to go. */
@media (max-width: 380px) {
	.scd-sticky__name {
		font-size: 10.5px;
	}

	.scd-sticky .scd-sticky__add {
		font-size: 11.5px;
		gap: 6px;
		padding: 0 11px;
	}

	/* Icon + current price only. */
	.scd-sticky__add-label,
	.scd-sticky__add-price del {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scd-sticky {
		transition-duration: 1ms;
	}
}

/* ---- Specificity armour --------------------------------------------
 * The theme resets every button from the body class
 * (`body.some-theme button { border:0; background:transparent;
 * color:inherit; padding:0 }`), which scores (0,1,1) and beats a plain
 * single-class rule. Prefixing with `.scd-sticky` scores (0,2,0) and wins
 * without !important. See the matching block in drawer.css.
 * ------------------------------------------------------------------- */

.scd-sticky button.scd-qty__btn {
	border: 0;
	background: none;
	color: var(--scd-grey, #767676);
	font-size: 15px;
	padding: 2px 0;
}

.scd-sticky button.scd-qty__btn:hover:not(:disabled) {
	color: var(--scd-sticky-ink);
}

.scd-sticky .scd-qty {
	border: 1.5px solid var(--scd-sticky-line);
	border-radius: 0;
	padding: 0 8px;
}

.scd-sticky p {
	max-width: none;
	margin: 0;
}