.xtool-cart-drawer__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none !important;
	border: none !important;
	cursor: pointer;
	font-size: 15px;
	padding: 0;
	position: relative;
}

/* !important on every interactive state, not just resting — a theme's own
   generic button/link hover rule is exactly the kind of thing that bleeds
   through an unhardened plain <button> otherwise (same class of conflict
   already found and fixed on several other Xtool widgets' own trigger/
   close buttons: Fullscreen Menu, Video's Lightbox close, Popup's close,
   Mini Cart's own identical trigger). The new trigger_bg_color Style
   control's own selector also carries !important so a user who DOES want
   a background can still win the cascade over this hardening. */
.xtool-cart-drawer__trigger:hover,
.xtool-cart-drawer__trigger:focus,
.xtool-cart-drawer__trigger:active {
	background: none !important;
	border: none !important;
}

.xtool-cart-drawer__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	/* min-height (not a fixed height) - lets the Padding control grow the
	   box instead of clipping its content once vertical padding is added. */
	min-height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1;
	background: #b91c1c;
	color: #fff;
	/* Fine-Tune Offset — a nudge layered on top of whichever badge
	   position/corner is active. transform never affects layout flow, so
	   this works identically whether the badge sits inline (normal flow)
	   or overlapping a corner (position:absolute) below. */
	transform: translate(var(--xtool-cart-drawer-badge-x, 0px), var(--xtool-cart-drawer-badge-y, 0px));
}

/* A dedicated wrapper around JUST the icon + its own count badge — always
   present, harmless in the default "inline" mode. Anchoring the overlap-
   mode badge to THIS wrapper specifically, rather than the whole trigger
   button, is required — a position:absolute badge anchored to the
   trigger's own box landed nearly centered ON TOP of the icon instead of
   at its outer corner (reported live via screenshot as looking broken).
   Same fix as Mini Cart's identical trigger shape. */
.xtool-cart-drawer__icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Overlapping badge position — a small circle sitting on the icon's own
   top-right corner instead of beside it. */
.xtool-cart-drawer__trigger--badge-overlap .xtool-cart-drawer__icon-wrap {
	gap: 0;
}

.xtool-cart-drawer__trigger--badge-overlap .xtool-cart-drawer__count {
	position: absolute;
	top: -8px;
	right: -8px;
	min-width: 16px;
	min-height: 16px;
	padding: 0 3px;
	font-size: 10px;
	border: 2px solid #fff;
	box-sizing: content-box;
}

/* Badge Corner — which corner of the icon the overlap badge anchors to.
   Top Right (above) stays the default/unstyled case for every existing
   instance; these 3 explicitly override top/right back to auto and set
   the real corner pair instead. */
.xtool-cart-drawer__trigger--badge-overlap .xtool-cart-drawer__count--top-left {
	top: -8px;
	right: auto;
	left: -8px;
}

.xtool-cart-drawer__trigger--badge-overlap .xtool-cart-drawer__count--bottom-right {
	top: auto;
	bottom: -8px;
	right: -8px;
}

.xtool-cart-drawer__trigger--badge-overlap .xtool-cart-drawer__count--bottom-left {
	top: auto;
	bottom: -8px;
	right: auto;
	left: -8px;
}

.xtool-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: none;
}

.xtool-cart-drawer.is-open {
	display: block;
}

.xtool-cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.xtool-cart-drawer.is-visible .xtool-cart-drawer__overlay {
	opacity: 1;
}

.xtool-cart-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 420px;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
	box-sizing: border-box;
}

/* No unconditional max-width safety cap here on purpose — a %-based width
   can never overflow the viewport by definition, so capping it against a
   vw expression would silently shrink an intentional 100% choice back
   down. The px-only cap (only meaningful for an arbitrarily large px
   value) is computed server-side per instance instead — see
   Wc_Cart_Drawer::panel_safety_style() in class-wc-cart-drawer.php, same
   established pattern as Off-Canvas's panel_safety_style() / Popup
   Builder's width_max_width_rule(). */

.xtool-cart-drawer--right .xtool-cart-drawer__panel {
	right: 0;
	transform: translateX(100%);
}

.xtool-cart-drawer--left .xtool-cart-drawer__panel {
	left: 0;
	transform: translateX(-100%);
}

.xtool-cart-drawer.is-visible .xtool-cart-drawer__panel {
	transform: translateX(0);
}

.xtool-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #E5E0D8;
	flex-shrink: 0;
}

.xtool-cart-drawer__title {
	font-size: 16px;
	font-weight: 700;
	color: #1A1814;
}

/* !important throughout — same theme-conflict hardening already applied to
   the +/- and Continue Shopping buttons below (see their own comment) —
   reported live via screenshot showing a solid pink/red background on this
   button too. */
.xtool-cart-drawer__close,
.xtool-cart-drawer__close:hover,
.xtool-cart-drawer__close:focus,
.xtool-cart-drawer__close:active {
	/* margin-left:auto keeps this pinned to the header's right edge
	   regardless of whether the title span next to it is rendered at all
	   (Show Cart Title off) — .xtool-cart-drawer__header's own
	   justify-content:space-between only spaces MULTIPLE items apart, and
	   collapses a single remaining item back to flex-start. */
	margin-left: auto;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: #1A1814;
	padding: 0;
}

.xtool-cart-drawer__panel-inner {
	flex: 1 1 auto;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.xtool-cart-drawer__empty {
	padding: 40px 24px;
	text-align: center;
	color: #8A8680;
	font-size: 14px;
}

.xtool-cart-drawer__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xtool-cart-drawer__item {
	position: relative;
	display: flex;
	gap: 14px;
	padding: 20px 24px;
	border-bottom: 1px solid #F2EDE7;
}

/* Background/border/shadow/outline hardened with !important — same theme-
   conflict class already fixed on the close/qty/continue buttons above,
   reported live via screenshot showing a solid pink circle behind this
   button's own × too. Text color is deliberately left un-hardened (the
   existing hover-to-red-tint below is an intentional design choice, and
   the remove_color Style control already wins the cascade against it
   without needing !important). */
.xtool-cart-drawer__item-remove,
.xtool-cart-drawer__item-remove:hover,
.xtool-cart-drawer__item-remove:focus,
.xtool-cart-drawer__item-remove:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

.xtool-cart-drawer__item-remove {
	position: absolute;
	top: 18px;
	right: 20px;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: #8A8680;
	padding: 4px;
}

.xtool-cart-drawer__item-remove:hover {
	color: #b91c1c;
}

.xtool-cart-drawer__item-thumb {
	flex-shrink: 0;
	display: block;
}

.xtool-cart-drawer__item-thumb img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.xtool-cart-drawer__item-info {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 20px;
}

.xtool-cart-drawer__item-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #1A1814;
	text-decoration: none;
	margin-bottom: 2px;
}

.xtool-cart-drawer__item-name:hover {
	text-decoration: underline;
}

.xtool-cart-drawer__item-price {
	display: block;
	font-size: 13px;
	color: #4A4742;
	margin-bottom: 4px;
}

.xtool-cart-drawer__item-price--below {
	margin-top: 6px;
	margin-bottom: 0;
}

.xtool-cart-drawer__item-meta {
	font-size: 12.5px;
	color: #8A8680;
	margin-bottom: 4px;
}

.xtool-cart-drawer__item-meta dl.variation {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.xtool-cart-drawer__item-meta dl.variation dt,
.xtool-cart-drawer__item-meta dl.variation dd {
	display: inline;
	margin: 0;
}

.xtool-cart-drawer__item-meta dl.variation p {
	display: inline;
	margin: 0;
}

.xtool-cart-drawer__item-select {
	display: inline-block;
	font-size: 12px;
	color: #b91c1c;
	text-decoration: none;
	margin-bottom: 8px;
}

.xtool-cart-drawer__item-select:hover {
	text-decoration: underline;
}

.xtool-cart-drawer__qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #D4CEC7;
	border-radius: 6px;
	width: fit-content;
	color: #1A1814;
}

/* !important throughout — a plain <button> with no explicit background of
   its own is exactly the shape a theme's generic "reset all buttons" CSS
   (or its own accent-color hover rule) can silently bleed through onto,
   painting an unwanted background/color with no Xtool control able to win
   the cascade otherwise. Same defensive hardening already applied to
   Popup/Fullscreen Menu/Video's own plain icon buttons — reported live via
   screenshot showing a solid pink background on both this button and
   .xtool-cart-drawer__continue below. */
.xtool-cart-drawer__qty-btn,
.xtool-cart-drawer__qty-btn:hover,
.xtool-cart-drawer__qty-btn:focus,
.xtool-cart-drawer__qty-btn:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 6px 11px;
	color: inherit;
}

.xtool-cart-drawer__qty-val {
	min-width: 24px;
	text-align: center;
	font-size: 13px;
}

.xtool-cart-drawer__qty.is-updating {
	opacity: 0.5;
	pointer-events: none;
}

.xtool-cart-drawer__subtotal-row {
	flex-shrink: 0;
	padding: 18px 24px;
	border-top: 1px solid #E5E0D8;
}

.xtool-cart-drawer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 700;
	color: #1A1814;
}

.xtool-cart-drawer__disclaimer {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: #8A8680;
}

.xtool-cart-drawer__actions {
	flex-shrink: 0;
	padding: 0 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.xtool-cart-drawer__checkout {
	display: block;
	text-align: center;
	background: #1C1C1E;
	border: 1px solid #1C1C1E;
	color: #fff;
	text-decoration: none;
	padding: 14px 20px;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
}

.xtool-cart-drawer__checkout:hover {
	opacity: 0.9;
	color: #fff;
}

.xtool-cart-drawer__continue,
.xtool-cart-drawer__continue:hover,
.xtool-cart-drawer__continue:focus,
.xtool-cart-drawer__continue:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	color: #4A4742;
	text-decoration: underline;
	padding: 4px;
}

@media (max-width: 480px) {
	.xtool-cart-drawer__panel {
		width: 100% !important;
		max-width: 100%;
	}
}