/**
 * The slide-out cart (Modern Cart), in the shop front's system.
 *
 * Loaded after the plugin's own stylesheet, wherever it loads (`CartDrawer`),
 * with the tokens from `tokens.css`. Two layers, in this order:
 *
 * 1. **The plugin's own variables**, set from the tokens. Modern Cart styles
 *    most colours, the width and the item padding through `--moderncart-*`, so
 *    setting those is the change least likely to break on an update.
 * 2. **Shape**, for what those variables cannot reach: the thumbnail, the
 *    quantity stepper, the totals and the buttons, to the design standard
 *    (`docs/design-standards.md`): 40px targets in the item rows, the flat
 *    primary for the way on, the secondary for Apply, and the ink scrim behind.
 *
 * Every selector starts `#moderncart-slide-out-modal #moderncart-slide-out`, two
 * ids, which is what the plugin's own strongest rules use. Loading after it,
 * that wins on order, not on `!important`. The few `!important`s here answer
 * one of the plugin's and each says which.
 *
 * The layout is a side sheet: a header, a scrolling list, and a footer pinned to
 * the bottom that always shows the total and the way on.
 */

/* --- 1. The plugin's variables ------------------------------------------- */

#moderncart-slide-out-modal {
	--moderncart-background-color: var( --pod-surface );
	--moderncart-header-background-color: var( --pod-surface );
	--moderncart-header-font-color: var( --pod-ink );
	--moderncart-heading-color: var( --pod-ink );
	--moderncart-body-color: var( --pod-ink );
	--moderncart-primary-color: var( --pod-accent );
	--moderncart-button-font-color: var( --pod-on-ink );
	--moderncart-quantity-font-color: var( --pod-accent-deep );
	--moderncart-quantity-background-color: var( --pod-accent-wash );
	--moderncart-cart-header-text-alignment: left;
	--moderncart-cart-header-font-size: var( --pod-h3-size );
	--moderncart-cart-item-padding: var( --pod-apart );

	/*
	 * A side sheet at a comfortable reading width on a desktop, and the whole
	 * screen on a phone. At the plugin's 80% the page showed through as a strip
	 * down the left: too narrow to use, and the drawer's own content squeezed to
	 * pay for it. A full sheet closes from its own button.
	 */
	--moderncart-slide-out-desktop-width: 440px;
	--moderncart-slide-out-mobile-width: 100%;
}

#moderncart-slide-out-modal #moderncart-slide-out {
	color: var( --pod-ink );
}

/*
 * The backdrop: the ink scrim every dialog uses. Modern Cart appends a bare
 * `<div class="moderncart-modal-backdrop">` to the body when the drawer opens
 * and removes it on close, but styles it only as `[role="dialog"]`, which it
 * never gets, so the page was not dimmed at all. Painted here and fixed over
 * the page, one layer under the drawer (whose own full-screen wrapper takes
 * the click that closes it, so this one lets clicks through).
 */
body > .moderncart-modal-backdrop {
	background: var( --pod-scrim );
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 2147482547;
}

/* --- 2. Header ------------------------------------------------------------ */

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header {
	border-bottom: 1px solid var( --pod-line );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-heading {
	gap: var( --pod-near );
	padding: var( --pod-near ) var( --pod-apart );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-title span {
	font-weight: 800;
	letter-spacing: -0.01em;
}

/* The count, as the soft pill the page uses for a quiet label. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-quantity {
	align-items: center;
	border-radius: var( --pod-radius-pill );
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 700;
	justify-content: center;
	min-height: 28px;
	min-width: 28px;
	padding: 0 var( --pod-tight );
}

/*
 * The close button, as a 40px round target with the icon in the middle. The
 * plugin sets its background and padding with `!important`, so the hover
 * state and the size have to answer in kind.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close {
	border-radius: var( --pod-radius-pill );
	flex: 0 0 var( --pod-btn-compact-h );
	height: var( --pod-btn-compact-h );
	max-height: var( --pod-btn-compact-h );
	max-width: var( --pod-btn-compact-h );
	order: 3;
	transition: background-color var( --pod-fast ) var( --pod-ease );
	width: var( --pod-btn-compact-h );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close:hover {
	background-color: var( --pod-surface-2 ) !important;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close:focus-visible {
	outline: var( --pod-focus-width ) solid var( --pod-accent ) !important;
	outline-offset: var( --pod-focus-offset );
}

/*
 * One focus ring for every control in the drawer. Modern Cart's own is a
 * 2px #4d90fe outline plus a blue glow (`box-shadow`) on each of these.
 */
#moderncart-slide-out-modal #moderncart-slide-out :is( .moderncart-cart-item-actions-remove, .moderncart-cart-item-image > a, .moderncart-slide-out-coupon-form-button, .moderncart-have-coupon-toggle-btn, .moderncart-have-coupon-code-area, .moderncart-cart-item-product-link a, .moderncart-cart-item-quantity button, .checkout-button ):focus-visible {
	box-shadow: none;
	outline: var( --pod-focus-width ) solid var( --pod-accent );
	outline-offset: var( --pod-focus-offset );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close svg {
	height: 22px;
	width: 22px;
}

/* --- 3. Items ------------------------------------------------------------- */

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item {
	align-items: flex-start;
	gap: var( --pod-near );
	padding-block: var( --pod-near );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-cart .moderncart-cart-item:not( :last-child ) {
	border-bottom-color: var( --pod-line );
}

/*
 * One row on every width. Below 500px the plugin sets this to
 * `display: inherit`, which stacked the picture over the name.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-container {
	align-items: flex-start;
	display: flex;
	gap: var( --pod-near );
	padding: 0;
}

/*
 * The thumbnail, square and filled, like the shop's cards: a white product on
 * the plugin's white ground, letterboxed with `contain`, was the same vanishing
 * act the shop's cards used to do.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image {
	aspect-ratio: 1;
	background: var( --pod-surface-2 );
	border-radius: var( --pod-radius );
	flex: 0 0 72px;
	margin: 0;
	min-width: 72px;
	overflow: hidden;
	width: 72px;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image a {
	display: block;
	height: 100%;
	width: 100%;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-image img {
	background: transparent;
	border-radius: 0;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product {
	gap: var( --pod-hair );
	justify-content: flex-start;
	min-width: 0;
}

/*
 * The name reads as a title, not a link. It still is one, and says so on
 * hover.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a {
	color: var( --pod-ink );
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
	max-width: none;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-link a:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * The designer's "View details" toggle and anything else a plugin prints
 * under the name: secondary text, in the accent colour and a size down.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item__details [data-moderncart-toggle],
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item__details dl,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item__details p {
	color: var( --pod-ink-soft );
	font-size: 0.8125rem;
	line-height: 1.45;
	margin: 0;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item__details [data-moderncart-toggle] {
	color: var( --pod-accent );
	cursor: pointer;
	font-weight: 600;
}

/*
 * A garment's choices, "Size: Small", one per line under its name, as the cart
 * page lists them (`CartDrawer::choices()`). Spans, because Modern Cart's item
 * template strips list markup; a line each by `display: block`.
 */
/* Regular weight: the name block they sit in is bold, and they are details, not the name. */
#moderncart-slide-out-modal #moderncart-slide-out .pod-drawer-choices {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 2px;
}

#moderncart-slide-out-modal #moderncart-slide-out .pod-drawer-choice {
	color: var( --pod-ink );
	display: block;
}

#moderncart-slide-out-modal #moderncart-slide-out .pod-drawer-choice__label {
	color: var( --pod-ink-soft );
}

/*
 * A banner's "View details" panel, opened: the same lines as a garment's
 * choices (its content is `templates/drawer/cart-item-data.php`), directly
 * under the toggle. Modern Cart draws it as a floating box, with a coloured
 * top rule, a shadow, padding, a 230px cap and its own scrollbar; all of that
 * goes, so the two kinds of item read alike. Modern Cart's script still opens
 * and closes it, and it still starts closed.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-product-data {
	background: none;
	border: 0;
	box-shadow: none;
	max-height: none;
	max-width: none;
	overflow: visible;
	padding: 0;
}

/* "View details" as the quiet text link it is, a little space above the lines it opens. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-collapse-btn-link {
	color: var( --pod-accent );
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 2px 0;
	text-decoration: none;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-collapse-btn-link:hover,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-collapse-btn-link:focus-visible {
	color: var( --pod-accent-deep );
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-price,
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-price .amount {
	color: var( --pod-ink );
	font-size: 0.9375rem;
	font-weight: 700;
}

/*
 * Remove, as a quiet text action rather than an underlined capital label, with
 * a 40px target (the standard's minimum). The negative inline margin keeps the
 * word in line with the name above it while the target reaches past it.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove {
	align-items: center;
	color: var( --pod-ink-soft );
	display: inline-flex;
	float: none;
	font-size: 0.8125rem;
	font-weight: 600;
	justify-content: flex-start;
	letter-spacing: 0;
	min-height: var( --pod-btn-compact-h );
	min-width: var( --pod-btn-compact-h );
	padding: 0;
	text-decoration: none;
	text-transform: none;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions-remove:hover {
	color: var( --pod-ink );
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- 4. Quantity ---------------------------------------------------------- */

/*
 * A horizontal stepper, − 1 +, in one pill, each button a 40px target and the
 * pill's edge the field border (a control's edge, 3:1). The plugin stacked it + 1 − in a
 * square column, which put "more" above "less", took three rows of height
 * for one number, and was the only square control on the shop front.
 *
 * Its own `order` put the plus first; these put it back where the eye expects
 * it, last.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-actions {
	flex: 0 0 auto;
	max-width: none;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity {
	align-items: center;
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );
	box-sizing: content-box;
	display: flex;
	flex-direction: row;
	height: var( --pod-btn-compact-h );
	overflow: hidden;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity .quantity__button--down {
	order: 1;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity .moderncart-quantity__input {
	order: 2;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity .quantity__button--up {
	order: 3;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button {
	background: transparent;
	color: var( --pod-ink );
	height: var( --pod-btn-compact-h );
	min-width: var( --pod-btn-compact-h );
	transition: background-color var( --pod-fast ) var( --pod-ease );
	width: var( --pod-btn-compact-h );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button:hover {
	background: var( --pod-surface-2 );
}

/* Inside the pill, which clips anything outside it: the ring goes on the inside edge. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button:focus-visible {
	border-radius: var( --pod-radius-pill );
	outline-offset: calc( -1 * var( --pod-focus-width ) );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button.quantity__button--disabled {
	opacity: 0.5;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity input[type="number"] {
	border: 0;
	color: var( --pod-ink );
	font-size: var( --pod-field-size );
	font-weight: 700;
	height: var( --pod-btn-compact-h );
	padding: 0;
	text-align: center;
	width: 28px;
}

/* --- 5. Footer ------------------------------------------------------------ */

/*
 * A hairline, instead of the plugin's 25% black glow, so the footer sits over
 * the list without looking like a separate window. No shadow: a static panel
 * has none (the standard's cards).
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer {
	border-top: 1px solid var( --pod-line );
	box-shadow: none;
	padding-bottom: var( --pod-apart );
}

/*
 * No rule of its own underneath: the totals block below already draws one,
 * and two a few pixels apart read as a printing fault.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code-area {
	border-bottom: 0;
	margin-top: 0;
	padding: var( --pod-near ) var( --pod-apart );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-total {
	border-top-color: var( --pod-line );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-have-coupon-code {
	color: var( --pod-ink-soft );
	font-size: 0.9375rem;
	font-weight: 600;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon {
	padding: var( --pod-near ) var( --pod-apart ) 0;
}

/* Collapsed, it takes no room: padding on a hidden form left a blank band between two rules. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon.moderncart-hide {
	display: none;
	padding: 0;
}

/*
 * The coupon code: the standard's text field (48px, radius 12, the field
 * border, the accent edge and 1px ring on focus) and a secondary Apply beside
 * it, as on the cart page. The plugin fixes the row at 40px.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input {
	height: auto;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input {
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pod-ink );
	font-size: var( --pod-field-size );
	height: var( --pod-btn-h );
	padding: 0 var( --pod-near );

	/* Theme fields ease `all`; focus appears at once (standard §6). */
	transition: none;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input input:focus {
	border-color: var( --pod-accent );
	box-shadow: 0 0 0 1px var( --pod-accent );
	outline: 2px solid transparent;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input button.moderncart-slide-out-coupon-form-button {
	background: var( --pod-surface );
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	color: var( --pod-ink );
	font-size: var( --pod-btn-size );
	font-weight: 700;
	height: var( --pod-btn-h );
	letter-spacing: 0;
	opacity: 1;
	padding: 0 var( --pod-btn-x );
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input button.moderncart-slide-out-coupon-form-button:hover {
	background: var( --pod-surface-2 );
	border-color: var( --pod-ink );
	opacity: 1;
}

/* Its working spinner in ink: the plugin draws it white, for a filled button. */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-form-button.moderncart-loading::after {
	border-bottom-color: var( --pod-ink );
	border-left-color: var( --pod-ink );
}

/*
 * Totals: muted labels, figures in ink, and no rule between every line. Only
 * the total is set apart, by a rule above it and a size up, so the eye lands
 * on the number that matters.
 */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items {
	padding: var( --pod-near ) 0 var( --pod-tight );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item {
	border-bottom: 0;
	color: var( --pod-ink-soft );
	font-size: 0.9375rem;
	padding: var( --pod-hair ) var( --pod-apart );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item span {
	font-size: 0.9375rem;
	font-weight: 600;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item .amount {
	color: var( --pod-ink );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item:last-child {
	border-top: 1px solid var( --pod-line );
	color: var( --pod-ink );
	margin-top: var( --pod-tight );
	padding-top: var( --pod-near );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total .moderncart-cart-line-items-item:last-child span {
	font-size: 1.0625rem;
	font-weight: 800;
}

/* The way on: the standard's primary, a flat 48px pill (no shadow, no lift). */
#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .wc-proceed-to-checkout {
	padding: var( --pod-near ) var( --pod-apart ) 0;
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button {
	align-items: center;
	background-color: var( --pod-accent );
	border: 1px solid var( --pod-accent );
	border-radius: var( --pod-radius-pill );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pod-on-ink );
	display: flex;
	font-size: var( --pod-btn-size );
	font-weight: 700;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: var( --pod-btn-h );
	padding: 0 var( --pod-btn-x );
	text-transform: none;
	transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease );
}

#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button:hover {
	background-color: var( --pod-accent-deep );
	border-color: var( --pod-accent-deep );
	color: var( --pod-on-ink );
	opacity: 1;
}

/* Recommendation headings in sentence case, like every other heading here. */
#moderncart-slide-out-modal .moderncart-slide-out-recommendations-header {
	text-transform: none;
}

/*
 * Reduced motion: the drawer appears rather than slides (Modern Cart times its
 * slide and fades with `--moderncart-animation-duration`), and nothing here
 * eases.
 */
@media ( prefers-reduced-motion: reduce ) {
	#moderncart-slide-out-modal {
		--moderncart-animation-duration: 0s;
	}

	#moderncart-slide-out-modal #moderncart-slide-out,
	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-header-close,
	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-cart-item-quantity button,
	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-coupon-input button.moderncart-slide-out-coupon-form-button,
	#moderncart-slide-out-modal #moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button {
		transition: none;
	}
}

/*
 * A designed item's quantity (`CartDrawer::fixed_quantity()`), as the cart
 * page shows it: a figure with its label, not a stepper.
 */
#moderncart-slide-out-modal #moderncart-slide-out .pod-cart-qty {
	align-items: baseline;
	display: inline-flex;
	gap: var( --pod-hair );
	white-space: nowrap;
}

#moderncart-slide-out-modal #moderncart-slide-out .pod-cart-qty__label {
	color: var( --pod-ink-soft );
	font-size: 0.8125rem;
}

#moderncart-slide-out-modal #moderncart-slide-out .pod-cart-qty__value {
	color: var( --pod-ink );
	font-size: 0.9375rem;
	font-weight: 700;
}