/**
 * AUTOBOSS Side Cart — original stylesheet.
 * Geometry/type-scale tokens follow docs/anker-reference.md; accent comes
 * from the Blocksy palette. Bottom-sheet media query for non-default
 * breakpoints is emitted inline by Frontend\Assets.
 */

#autoboss-side-cart {
	--absc-width: 460px;
	--absc-pad-x: 36px;
	--absc-dur: .32s;
	--absc-sheet-dur: .36s;
	--absc-ease: cubic-bezier(.4, 0, .2, 1);
	--absc-z: 999990;
	/* Text roles follow the site's neutral near-black / grey (home, shop,
	 * cart, checkout); every role used for readable text clears WCAG AA
	 * (4.5:1), struck prices included (--absc-text-3, #767676 = 4.54:1). */
	--absc-text: #191919;
	--absc-text-2: #666;
	--absc-text-3: #767676;
	--absc-line: var(--theme-palette-color-5, #e6eaec);
	--absc-line-2: #d3d8dc;
	--absc-bg-soft: #f7f7f7;
	--absc-accent: var(--theme-palette-color-1, #feb511);
	/* Same price ink as the product cards, detail page, cart and checkout: the theme amber darkened. */
	--absc-price: #956008;
	--absc-price: color-mix(in srgb, var(--theme-palette-color-2, #fdb016) 36%, #5a3300);
	--absc-accent-text: var(--theme-palette-color-4, #212529);
	/* Theme amber is ~1.7:1 on white: fine as a fill, unreadable as text.
	 * Links use the store-wide darkened amber (same value as prices, cart
	 * and checkout links). */
	--absc-accent-ink: #956008;
	--absc-accent-ink: color-mix(in srgb, var(--theme-palette-color-2, #fdb016) 36%, #5a3300);
	--absc-accent-soft: #fff7e6;
	--absc-accent-soft: color-mix(in srgb, var(--absc-accent) 14%, #fff);
	--absc-save: #067647;
	--absc-save-bg: #ecfdf3;
	--absc-save-line: #abefc6;
	--absc-error: #b42318;
	--absc-error-bg: #fef3f2;
	--absc-error-line: #fecdca;
	--absc-deal: var(--absc-save);
	--absc-focus: 0 0 0 3px color-mix(in srgb, var(--absc-accent) 45%, transparent);
	--absc-radius: 4px;
	--absc-radius-md: 8px;
	--absc-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);

	position: fixed;
	inset: 0;
	z-index: var(--absc-z);
	pointer-events: none;
	font-family: inherit;

	/* The closed sheet sits only 2% of its height past the viewport edge;
	 * iOS Safari repositions fixed elements with a frame of lag while the
	 * toolbar collapses on scroll, which can flash that edge (the "My Cart"
	 * header) into view. visibility makes the closed drawer unpaintable;
	 * the delay keeps the close animation on screen until it finishes. */
	visibility: hidden;
	transition: visibility 0s var(--absc-dur);
}

html.absc-locked,
html.absc-locked body {
	overflow: hidden;
}

/* ------------------------------------------------------------ overlay/panel */

#autoboss-side-cart .absc__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity var(--absc-dur) var(--absc-ease);
}

#autoboss-side-cart .absc__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: var(--absc-width);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: var(--absc-shadow);
	transform: translateX(102%);
	transition: transform var(--absc-dur) var(--absc-ease);
	outline: none;
}

#autoboss-side-cart.is-open {
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

#autoboss-side-cart.is-open .absc__overlay {
	opacity: 1;
}

#autoboss-side-cart.is-open .absc__panel {
	transform: none;
}

#autoboss-side-cart.is-busy .absc__content {
	pointer-events: none;
}

/* A confirmed checkout click can wait for queued cart writes. Keep this
 * explicit action and close reachable while the other cart controls wait. */
#autoboss-side-cart.is-busy :is(.absc__checkout, .absc__close) {
	pointer-events: auto;
}

/* The bottom-sheet media query is NOT here.
 *
 * It is emitted by Frontend\Assets::inline_props(), always, using the
 * configured breakpoint. It used to be hardcoded at 767px in this file with
 * the inline emitter bolted on top for custom breakpoints, which broke in both
 * directions: a breakpoint above 768 left the band [768, bp-1] without the
 * pad-x/duration tokens, and a breakpoint BELOW 768 did not work at all --
 * this query still fired and turned the drawer into a sheet between bp and
 * 767px regardless of the setting.
 *
 * A CSS custom property cannot parameterize an @media condition, so the whole
 * block moved to the one place that knows the setting. Keep it there.
 */

@media (prefers-reduced-motion: reduce) {
	#autoboss-side-cart .absc__overlay,
	#autoboss-side-cart .absc__panel {
		transition: none;
	}
}

/* ----------------------------------------------------------------- content */

#autoboss-side-cart .absc__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	height: 56px;
	padding: 0 var(--absc-pad-x);
	border-bottom: 1px solid var(--absc-line);
}

#autoboss-side-cart .absc__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

#autoboss-side-cart .absc__count {
	font-weight: 500;
}

#autoboss-side-cart .absc__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-right: -6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--absc-text);
	cursor: pointer;
}

#autoboss-side-cart .absc__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--absc-bg-soft);
}

/* ------------------------------------------------------------------- items */

#autoboss-side-cart .absc__items {
	background: #fff;
	padding: 0 var(--absc-pad-x);
}

#autoboss-side-cart .absc__item {
	display: flex;
	gap: 16px;
	padding: 24px 0;
}

#autoboss-side-cart .absc__item + .absc__item {
	border-top: 1px solid var(--absc-line);
}

#autoboss-side-cart .absc__item-media {
	flex: 0 0 96px;
}

#autoboss-side-cart .absc__item-media img {
	display: block;
	width: 96px;
	height: 96px;
	object-fit: contain;
	border-radius: var(--absc-radius) !important;
}

#autoboss-side-cart .absc__item-main {
	flex: 1;
	min-width: 0;
}

#autoboss-side-cart .absc__item-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--absc-text);
	text-decoration: none;
}

#autoboss-side-cart a.absc__item-title:hover {
	text-decoration: underline;
}

#autoboss-side-cart .absc__item-meta {
	margin-top: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--absc-text-2);
}

#autoboss-side-cart .absc__item-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
}

#autoboss-side-cart .absc__qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--absc-line-2);
	border-radius: var(--absc-radius) !important;
	overflow: hidden;
}

#autoboss-side-cart .absc__qty--fixed {
	padding: 5px 14px;
	font-size: 15px;
}

/* :where(button) resets in the theme fight generic buttons — keep ours
   scoped with equal-or-higher specificity and explicit resets. */
#autoboss-side-cart .absc__qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 0 !important;
	background: #fff;
	color: var(--absc-text);
	cursor: pointer;
}

#autoboss-side-cart .absc__qty-btn[disabled] {
	color: var(--absc-text-3);
	opacity: .5;
	cursor: default;
}

#autoboss-side-cart .absc__qty-input {
	width: 34px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 0 !important;
	background: #fff;
	font-size: 16px; /* below 16px iOS zooms on focus */
	font-weight: 700;
	text-align: center;
	color: var(--absc-text);
	-moz-appearance: textfield;
	appearance: textfield;
}

#autoboss-side-cart .absc__qty-input::-webkit-outer-spin-button,
#autoboss-side-cart .absc__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

#autoboss-side-cart .absc__item-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: none;
	color: var(--absc-text-2);
	cursor: pointer;
	transition: color .15s, background .15s;
}

@media (hover: hover) {
	#autoboss-side-cart .absc__item-remove:hover {
		background: var(--absc-error-bg);
		color: var(--absc-error);
	}
}

#autoboss-side-cart .absc__item-pricing {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

#autoboss-side-cart .absc__item-price {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

/* Woo may emit <del>/<ins> pairs inside the filtered price. */
#autoboss-side-cart .absc__item-price del {
	font-size: 14px;
	color: var(--absc-text-3);
}

#autoboss-side-cart .absc__item-price ins {
	text-decoration: none;
}

#autoboss-side-cart .absc__item-compare {
	font-size: 14px;
	font-weight: 500;
	color: var(--absc-text-3);
	text-decoration: line-through;
}

/* Server rendering no longer emits this label. Keep the defensive hide for
   shoppers whose WooCommerce sessionStorage still holds an older fragment. */
#autoboss-side-cart .absc__item-save {
	display: none !important;
}

/* ---------------------------------------------------------- recommendations */

#autoboss-side-cart .absc__reco {
	padding: 20px 0 24px;
}

#autoboss-side-cart .absc__reco-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 var(--absc-pad-x) 12px;
}

#autoboss-side-cart .absc__reco-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--absc-text);
	cursor: pointer;
	text-align: left;
}

#autoboss-side-cart .absc__reco.is-open .absc__reco-title .absc__chevron {
	transform: rotate(180deg);
}

#autoboss-side-cart .absc__reco-nav {
	display: none;
	gap: 8px;
}

#autoboss-side-cart .absc__reco.is-open .absc__reco-nav {
	display: inline-flex;
}

#autoboss-side-cart .absc__reco-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--absc-line);
	border-radius: 50% !important;
	background: #fff;
	color: var(--absc-text);
	cursor: pointer;
}

#autoboss-side-cart .absc__reco-arrow[disabled],
#autoboss-side-cart .absc__reco-arrow[aria-disabled="true"] {
	border-color: var(--absc-line);
	background: var(--absc-bg-soft);
	color: var(--absc-text-3);
	opacity: .45;
	cursor: not-allowed;
}

#autoboss-side-cart .absc__reco-body {
	display: none;
}

#autoboss-side-cart .absc__reco.is-open .absc__reco-body {
	display: block;
}

#autoboss-side-cart .absc__reco-track {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 2px var(--absc-pad-x) 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--absc-pad-x);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#autoboss-side-cart .absc__reco-track::-webkit-scrollbar {
	display: none;
}

#autoboss-side-cart .absc__reco-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 186px;
	margin: 0;
	padding: 10px 0 0;
	border-radius: var(--absc-radius);
	background: #fff;
	scroll-snap-align: start;
}

#autoboss-side-cart .absc__reco-media {
	display: block;
	position: relative;
	width: 110px;
	height: 110px;
	aspect-ratio: 1 / 1;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--absc-radius) !important;
}

#autoboss-side-cart .absc__reco-media img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	max-width: none;
	object-fit: contain;
	object-position: center;
	border-radius: inherit !important;
}

#autoboss-side-cart .absc__reco-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
	margin: 12px 12px 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--absc-text);
	text-decoration: none;
}

#autoboss-side-cart .absc__reco-add {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 42px;
	padding: 0 12px;
	border: 0;
	border-top: 1px solid var(--absc-bg-soft);
	border-radius: 0 0 var(--absc-radius) var(--absc-radius) !important;
	background: #fff;
	color: var(--absc-text);
	cursor: pointer;
	text-decoration: none;
	text-align: left;
}


#autoboss-side-cart .absc__reco-price {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

#autoboss-side-cart .absc__reco-price del {
	margin-left: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--absc-text-3);
}

#autoboss-side-cart .absc__reco-price ins {
	text-decoration: none;
}

/* ------------------------------------------------------------------- empty */

#autoboss-side-cart .absc__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 100%;
	padding: 48px var(--absc-pad-x);
	background: #fff;
	text-align: center;
}

#autoboss-side-cart .absc__empty-icon {
	color: var(--absc-text-3);
}

#autoboss-side-cart .absc__empty-text {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--absc-text-2);
}

/* ------------------------------------------------------------------ footer */

#autoboss-side-cart .absc__footer {
	flex-shrink: 0;
	padding: 20px var(--absc-pad-x) max(24px, env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--absc-line);
	box-shadow: 0 -6px 16px -10px rgba(16, 24, 40, .18);
}

/* ------------------------------------------------------------------ coupon */

#autoboss-side-cart .absc__coupon {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--absc-line);
}

#autoboss-side-cart .absc__coupon-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--absc-radius) !important;
	background: none;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
	text-align: left;
}

#autoboss-side-cart .absc__coupon-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__coupon-icon {
	flex: none;
	color: var(--absc-accent-ink);
}

/* Discount-code actions use the theme hue, darkened enough to read as text. */
#autoboss-side-cart .absc__coupon-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--absc-accent-ink);
}

@media (hover: hover) {
	#autoboss-side-cart .absc__coupon-head:hover .absc__coupon-link {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

#autoboss-side-cart .absc__chevron {
	transition: transform .15s var(--absc-ease);
}

#autoboss-side-cart .absc__coupon.is-open .absc__chevron {
	transform: rotate(180deg);
}

#autoboss-side-cart .absc__coupon-body {
	display: none;
	padding-top: 10px;
}

#autoboss-side-cart .absc__coupon.is-open .absc__coupon-body {
	display: block;
	animation: absc-notice-in .2s ease-out both;
}

#autoboss-side-cart .absc__coupon-group {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

#autoboss-side-cart .absc__coupon-input {
	flex: 1;
	min-width: 0;
	height: 42px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--absc-line-2);
	border-radius: var(--absc-radius-md) !important;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	/* 16px minimum: iOS Safari zooms the page on focus of any smaller field. */
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--absc-text);
	transition: border-color .15s, box-shadow .15s;
}

#autoboss-side-cart .absc__coupon-input::placeholder {
	font-weight: 500;
	letter-spacing: 0;
	color: var(--absc-text-3);
	opacity: 1;
}

#autoboss-side-cart .absc__coupon-input:focus {
	outline: none;
	border-color: var(--absc-accent);
	box-shadow: var(--absc-focus);
}

#autoboss-side-cart .absc__coupon-input[aria-invalid="true"] {
	border-color: var(--absc-error);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--absc-error) 16%, transparent);
}

/* Secondary to "Proceed to Checkout": a dark solid button, so the amber
   primary stays the single strongest call to action in the footer. */
#autoboss-side-cart .absc__coupon-apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: none;
	min-width: 88px;
	height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--absc-radius-md) !important;
	background: var(--absc-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	white-space: nowrap;
	cursor: pointer;
	transition: background .15s;
}

#autoboss-side-cart .absc__coupon-apply:hover {
	color: #fff;
}

/* Hover-capable pointers only: a tapped button would stay grey on touch screens. */
@media (hover: hover) {
	#autoboss-side-cart .absc__coupon-apply:hover {
		background: color-mix(in srgb, var(--absc-text) 82%, #fff);
	}
}

#autoboss-side-cart .absc__coupon-apply:focus-visible {
	outline: none;
	box-shadow: var(--absc-focus);
}

@media (prefers-reduced-motion: reduce) {
	#autoboss-side-cart .absc__coupon.is-open .absc__coupon-body {
		animation: none;
	}
}

/* ---- inline notices (own markup; see Ajax::collect_notices) */

#autoboss-side-cart .absc__coupon-notices:empty {
	display: none;
}

#autoboss-side-cart .absc__coupon-notices {
	display: grid;
	gap: 6px;
	margin-top: 10px;
}

#autoboss-side-cart .absc__notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--absc-line);
	border-radius: var(--absc-radius-md);
	background: var(--absc-bg-soft);
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--absc-text);
	animation: absc-notice-in .2s ease-out both;
}

#autoboss-side-cart .absc__notice-icon {
	flex: none;
}

#autoboss-side-cart .absc__notice-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

#autoboss-side-cart .absc__notice-text a {
	color: inherit;
	text-decoration: underline;
}

#autoboss-side-cart .absc__notice--success {
	border-color: var(--absc-save-line);
	background: var(--absc-save-bg);
	color: var(--absc-save);
}

#autoboss-side-cart .absc__notice--error {
	border-color: var(--absc-error-line);
	background: var(--absc-error-bg);
	color: var(--absc-error);
}

#autoboss-side-cart .absc__recovery { margin: 12px; flex: none; }
#autoboss-side-cart .absc__recovery button { padding: 0; min-height: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

@keyframes absc-notice-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

/* Legacy Woo notice markup a cached fragment might still carry. */
#autoboss-side-cart .absc__coupon-notices :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
	margin: 0;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--absc-radius-md);
	background: var(--absc-bg-soft);
	font-size: 13px;
	list-style: none;
}

#autoboss-side-cart .absc__coupon-notices :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::before {
	display: none;
}

/* ---- applied codes: ticket chips with what each one saved */

#autoboss-side-cart .absc__coupon-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

#autoboss-side-cart .absc__coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	padding: 4px 4px 4px 10px;
	border: 1px dashed color-mix(in srgb, var(--absc-accent) 70%, #000 10%);
	border-radius: 999px;
	background: var(--absc-accent-soft);
	font-size: 13px;
	line-height: 20px;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__coupon-chip-icon {
	flex: none;
	color: var(--absc-accent-ink);
}

#autoboss-side-cart .absc__coupon-chip-code {
	overflow: hidden;
	font-weight: 700;
	letter-spacing: .04em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#autoboss-side-cart .absc__coupon-chip-save {
	font-weight: 700;
	white-space: nowrap;
	color: var(--absc-save);
}

#autoboss-side-cart .absc__coupon-chip-save .amount {
	color: inherit;
}

#autoboss-side-cart .absc__coupon-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: transparent;
	color: var(--absc-text-2);
	cursor: pointer;
	transition: background .15s, color .15s;
}

#autoboss-side-cart .absc__coupon-chip-remove:hover {
	background: color-mix(in srgb, var(--absc-text) 10%, transparent);
	color: var(--absc-text);
}

#autoboss-side-cart .absc__coupon-chip-remove.is-loading::before {
	flex-basis: 12px;
	width: 12px;
	height: 12px;
}

/* ----------------------------------------------------------------- summary */

/* Detail rows collapse behind the footer "Check Details" toggle (Anker). */
#autoboss-side-cart .absc__summary-rows {
	display: none;
	padding-bottom: 4px;
}

#autoboss-side-cart .absc__summary.is-open .absc__summary-rows {
	display: block;
}

#autoboss-side-cart .absc__summary-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 15px;
	line-height: 1.5;
}

#autoboss-side-cart .absc__summary-label {
	font-weight: 500;
	color: var(--absc-text-2);
}

#autoboss-side-cart .absc__summary-value {
	font-weight: 600;
	text-align: right;
	color: var(--absc-text);
}

/* "Calculated at checkout" is a note, not an amount. */
#autoboss-side-cart .absc__summary-row--note .absc__summary-value {
	font-size: 14px;
	font-weight: 500;
	color: var(--absc-text-2);
}

/* The whole discount figure (sign + amount) reads as one saving. */
#autoboss-side-cart .absc__summary-row--discount :is(.absc__summary-label, .absc__summary-value, .amount) {
	color: var(--absc-save);
}

#autoboss-side-cart .absc__summary-row--discount .absc__summary-value {
	font-weight: 700;
}

#autoboss-side-cart .absc__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.5;
}

#autoboss-side-cart .absc__total-label {
	font-weight: 700;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__total-prices {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px 10px;
}

#autoboss-side-cart .absc__total-was {
	font-size: 14px;
	font-weight: 500;
	color: var(--absc-text-3);
	text-decoration-thickness: 1px;
}

#autoboss-side-cart .absc__total-was .amount {
	color: inherit;
}

#autoboss-side-cart .absc__total-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

#autoboss-side-cart .absc__total-dec {
	font-size: 16px;
}

#autoboss-side-cart .absc__savings {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

#autoboss-side-cart .absc__savings-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--absc-save-bg);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	color: var(--absc-save);
}

#autoboss-side-cart .absc__savings-pill :is(strong, .amount) {
	font-weight: 700;
	color: inherit;
}

#autoboss-side-cart .absc__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}

/* "Check Details ⌃" text button left of the checkout button. Chevron points
   up while collapsed (the rows expand upward, Anker-style), down when open. */
#autoboss-side-cart .absc__details-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 48px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--absc-text-2);
	cursor: pointer;
	white-space: nowrap;
}

@media (hover: hover) {
	#autoboss-side-cart .absc__details-toggle:hover {
		color: var(--absc-text);
	}
}

#autoboss-side-cart .absc__details-toggle .absc__chevron {
	transform: rotate(180deg);
}

#autoboss-side-cart .absc__details-toggle[aria-expanded="true"] .absc__chevron {
	transform: rotate(0deg);
}

#autoboss-side-cart .absc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 8px 20px;
	border: 1px solid transparent;
	border-radius: var(--absc-radius) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	gap: 8px;
}

#autoboss-side-cart .absc__button--primary {
	flex: 1;
	/* Same amber gradient as the detail, cart, checkout and payment buttons. */
	background: linear-gradient(90deg, var(--theme-palette-color-1, #fbbf47), var(--theme-palette-color-2, #fdb016));
	color: var(--absc-accent-text);
}

#autoboss-side-cart .absc__button--primary:hover {
	color: var(--absc-accent-text);
}

#autoboss-side-cart .absc__checkout {
	position: relative;
	white-space: nowrap;
	flex-wrap: nowrap;
	min-width: 0;
	border-radius: var(--absc-radius-md) !important;
	font-size: 15px;
	letter-spacing: .01em;
	padding-inline: 28px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 -1px 0 rgba(0, 0, 0, .08);
}

#autoboss-side-cart .absc__checkout.is-loading {
	cursor: progress;
}

/* Match the detail button's hover/press overlay and leading 14px spinner. */
#autoboss-side-cart :is(.absc__button, button) { position: relative; }
#autoboss-side-cart :is(.absc__button, button)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: transparent;
	transition: background .15s;
}
@media (hover: hover) {
	#autoboss-side-cart :is(.absc__button, button):not(:disabled):hover::after { background: rgba(255, 255, 255, .24); }
}
#autoboss-side-cart :is(.absc__button, button):not(:disabled):active::after { background: rgba(0, 0, 0, .08); }
#autoboss-side-cart .is-loading { opacity: 1; cursor: progress; }
#autoboss-side-cart .is-loading::before {
	content: "";
	display: inline-block;
	flex: 0 0 14px;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: absc-checkout-spin .7s linear infinite;
}
#autoboss-side-cart .is-loading > svg { display: none; }

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

@media (max-width: 480px) {
	#autoboss-side-cart .absc__actions { flex-wrap: wrap; gap: 8px; }
	#autoboss-side-cart .absc__checkout { flex-basis: 100%; }
	#autoboss-side-cart .absc__details-toggle { min-height: 28px; }
}

/* Prices keep the theme colour (SC-04); summary rows stay neutral so the
   total and the green savings are the only coloured figures in the footer. */
#autoboss-side-cart .absc__item-price,
#autoboss-side-cart .absc__reco-price,
#autoboss-side-cart .absc__total-value { color: var(--absc-price); }
#autoboss-side-cart :is(.absc__item-price, .absc__reco-price, .absc__total-value) .amount { color: inherit; }

.absc-feedback { position: fixed; z-index: 1000001; left: 50%; top: 42%; transform: translate(-50%, -50%); max-width: 85vw; padding: 12px 18px; border-radius: 10px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 14px; line-height: 22px; text-align: center; pointer-events: none; }
.absc-feedback[hidden] { display: none !important; }

#autoboss-side-cart .absc__button--ghost {
	border-radius: var(--absc-radius-md) !important;
	background: #fff;
	border-color: var(--absc-text);
	color: var(--absc-text);
}

/* Keyboard focus ring for every control (the theme resets outlines). */
#autoboss-side-cart :is(button, a, input):focus-visible {
	outline: none;
	box-shadow: var(--absc-focus);
}

/* ---------------------------------------------------------- custom blocks */

#autoboss-side-cart .absc__block {
	padding: 14px 0;
	border-bottom: 1px solid var(--absc-line);
	font-size: 14px;
	line-height: 1.5;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__block-heading {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__block--collapsible .absc__block-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--absc-text);
	cursor: pointer;
}

#autoboss-side-cart .absc__block--collapsible .absc__block-head .absc__chevron {
	transition: transform .18s ease;
}

#autoboss-side-cart .absc__block--collapsible.is-open .absc__block-head .absc__chevron {
	transform: rotate(180deg);
}

#autoboss-side-cart .absc__block--collapsible .absc__block-body {
	display: none;
	padding-top: 10px;
}

#autoboss-side-cart .absc__block--collapsible.is-open .absc__block-body {
	display: block;
}

#autoboss-side-cart .absc__block img {
	max-width: 100%;
	height: auto;
}

/* ----------------------------------------------------------- installments */

#autoboss-side-cart .absc__inst {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 0;
	border-bottom: 1px solid var(--absc-line);
	font-size: 13px;
	text-align: center;
	color: var(--absc-text);
}

/* Circled "?" right after the text — the only way into the overlay. */
#autoboss-side-cart .absc__inst-help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50% !important;
	background: none;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--absc-text-3);
	cursor: pointer;
}

#autoboss-side-cart .absc__inst-help:hover {
	color: var(--absc-text);
}

#autoboss-side-cart .absc__inst-panel {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	background: #fff;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--absc-dur) var(--absc-ease), visibility 0s linear var(--absc-dur);
}

#autoboss-side-cart .absc__inst-panel.is-open {
	transform: none;
	visibility: visible;
	transition: transform var(--absc-dur) var(--absc-ease);
}

#autoboss-side-cart .absc__inst-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	padding: 14px var(--absc-pad-x);
	border-bottom: 1px solid var(--absc-line);
	font-size: 16px;
	font-weight: 700;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__inst-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: -8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--absc-text);
	cursor: pointer;
}

#autoboss-side-cart .absc__inst-content {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 16px var(--absc-pad-x) 24px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--absc-text);
}

#autoboss-side-cart .absc__inst-content img {
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	#autoboss-side-cart .is-loading::before,
	#autoboss-side-cart .absc__notice {
		animation: none;
	}

	#autoboss-side-cart .absc__inst-panel {
		transition: none;
	}
}

/* Confirmed cart success: a clear theme badge, never used for validation errors. */
.absc-feedback { display: flex; flex-direction: column; align-items: center; gap: 14px; box-sizing: border-box; width: 236px; max-width: calc(100vw - 40px); padding: 24px 20px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; background: #fff; color: var(--theme-palette-color-4, #212529); box-shadow: 0 16px 48px rgba(0, 0, 0, .2); font-size: 17px; font-weight: 700; line-height: 24px; text-align: center; }
.absc-success-mark { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--theme-palette-color-1, #feb511); color: var(--theme-palette-color-4, #212529); box-shadow: 0 0 0 7px color-mix(in srgb, var(--theme-palette-color-1, #feb511) 18%, transparent); }
.absc-success-mark svg { display: block; width: 32px; height: 32px; }
.absc-success-mark path { stroke-dasharray: 26; stroke-dashoffset: 0; animation: absc-success-check .32s ease-out both; }
@keyframes absc-success-check { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
@keyframes absc-success-enter { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.absc-feedback:not([hidden]) { animation: absc-success-enter .24s ease-out both; }
@media (prefers-reduced-motion: reduce) { .absc-feedback, .absc-feedback.is-on, .absc-feedback:not([hidden]), .absc-success-mark path { animation: none; transition: none; } }

/* The backdrop always covers the page, including during keyboard dismissal. */
#autoboss-side-cart.absc-instant-close,
#autoboss-side-cart.absc-instant-close .absc__panel,
#autoboss-side-cart.absc-instant-close .absc__overlay { transition: none; }
#autoboss-side-cart .absc__content[hidden],
#autoboss-side-cart .absc__coupon-editor[hidden] { display: none; }
#autoboss-side-cart .absc__coupon-editor { display: flex; flex-direction: column; min-height: 0; height: 100%; }
/* Three columns keep the title centred whatever the back/close widths are. */
#autoboss-side-cart .absc__editor-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; flex: none; height: 56px; padding: 0 calc(var(--absc-pad-x) - 8px); border-bottom: 1px solid var(--absc-line); }
#autoboss-side-cart .absc__editor-header strong { font-size: 16px; font-weight: 700; line-height: 1; color: var(--absc-text); white-space: nowrap; }
#autoboss-side-cart .absc__coupon-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 40px; margin: 0; padding: 0 8px; border: 0; border-radius: var(--absc-radius-md) !important; background: none; color: var(--absc-text); font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; }
#autoboss-side-cart .absc__coupon-back::before { content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
#autoboss-side-cart .absc__editor-header .absc__close { justify-self: end; width: 40px; height: 40px; margin-right: 0; border-radius: 50% !important; font-size: 28px; font-weight: 300; line-height: 1; }
#autoboss-side-cart .absc__editor-header .absc__close span { display: block; margin-top: -2px; }
@media (hover: hover) {
 #autoboss-side-cart :is(.absc__coupon-back, .absc__editor-header .absc__close):hover { background: var(--absc-bg-soft); }
}
#autoboss-side-cart .absc__editor-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--absc-pad-x) max(16px, env(safe-area-inset-bottom)); scroll-padding-block: 16px; }
#autoboss-side-cart .absc__editor-body .absc__coupon { margin: 0; padding: 0; border-bottom: 0; }
#autoboss-side-cart .absc__editor-body .absc__coupon-head { display: none; }
#autoboss-side-cart .absc__editor-body .absc__coupon-body { display: block; padding-top: 0; animation: none; }
#autoboss-side-cart .absc__editor-body :is(.absc__coupon-input, .absc__coupon-apply) { height: 48px; }
#autoboss-side-cart .absc__editor-body .absc__coupon-apply { min-width: 96px; }
#autoboss-side-cart .absc__editor-body .absc__coupon-notices { margin-top: 12px; }
#autoboss-side-cart .absc__editor-body .absc__coupon-chips { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--absc-line-2); }
#autoboss-side-cart .absc__editor-body .absc__coupon-input { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#autoboss-side-cart.absc-coupon-editing .absc__panel {
 top: calc(var(--absc-visible-top, 0px) + min(var(--absc-coupon-top, 12px), 10vh));
 bottom: auto;
 height: calc(var(--absc-visible-height, 100dvh) - min(var(--absc-coupon-top, 12px), 10vh) - 12px);
}
/* The editing sheet stops 12px short of the visual viewport; paint that strip
 * white so the page's bottom bar does not show through under the sheet. */
#autoboss-side-cart.absc-coupon-editing .absc__panel { box-shadow: 0 12px 0 #fff, var(--absc-shadow); }
#autoboss-side-cart.is-busy .absc__coupon-editor [data-sc-coupon-apply] { pointer-events: none; }
@media (max-width: 1023px), (pointer: coarse) {
 #autoboss-side-cart .absc__panel { max-height: calc(var(--absc-visible-height, 100dvh) - 12px); }
 /* Quantity editing keeps its compact layout until close; normal carts retain the sticky footer. */
 #autoboss-side-cart.absc-editing .absc__content { overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 72px 16px; }
 #autoboss-side-cart.absc-editing .absc__header { position: sticky; top: 0; z-index: 2; background: #fff; }
 #autoboss-side-cart.absc-editing .absc__body { flex: none; overflow: visible; }
 #autoboss-side-cart.absc-editing .absc__footer { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
 #autoboss-side-cart.absc-typing .absc__footer { display: none; }
 #autoboss-side-cart :is(.absc__qty-input, .absc__coupon-input) { font-size: 16px; scroll-margin-block: 16px; }
}

/* 1.0.26 (Claude, 2026-10-13) Keyboard overlay (plan A): while a field is edited the panel keeps its keyboard-free
   size (side-cart.js freezes --absc-visible-height and follows only the iOS pan offset), so the keyboard covers its
   lower part. The focused field's scroller gets the covered height as bottom padding, so even the last field can be
   scrolled above the keyboard. */
#autoboss-side-cart [data-absc-kb] { padding-bottom: calc(var(--absc-kb-pad, 0px) + var(--absc-keyboard, 0px)) !important; }