.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;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	font-size: 11px;
	line-height: 1;
	background: #b91c1c;
	color: #fff;
}

/* 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;
	height: 16px;
	padding: 0 3px;
	font-size: 10px;
	border: 2px solid #fff;
	box-sizing: content-box;
}

.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;
}

.xtool-cart-drawer__close {
	background: none;
	border: none;
	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;
}

.xtool-cart-drawer__item-remove {
	position: absolute;
	top: 18px;
	right: 20px;
	background: none;
	border: none;
	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-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;
}

.xtool-cart-drawer__qty-btn {
	background: none;
	border: none;
	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 {
	background: none;
	border: none;
	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%;
	}
}