/*
 * Alcazar Mini Cart drawer presentation.
 *
 * WooCommerce owns the Mini Cart block: the drawer, its open/close behavior,
 * the product table, quantities, subtotal and every string. These rules only
 * dress that native interface in the approved design.
 *
 * Values come from the approved reference (`C:\alcazar`,
 * src/template/components/checkout/checkout-section.tsx) and match
 * assets/css/checkout.css: white surfaces, zinc borders, light tracked-in
 * headings, 11px uppercase eyebrows, and full-pill buttons — navy filled for
 * the primary action, outlined for the secondary, both turning celeste.
 *
 * Specificity, deliberately: WooCommerce injects the drawer's own stylesheet at
 * runtime when the drawer first opens, so it always lands later in the cascade
 * than this file and wins every tie. Each rule therefore repeats its target
 * class to outrank WooCommerce's own selector. That is plain CSS specificity,
 * not `!important`, so a future rule can still override it normally.
 *
 * Button selectors are written twice on purpose. WooCommerce puts
 * `wc-block-mini-cart__footer-checkout`, `…__footer-cart` and
 * `…__shopping-button` ON the button element itself, not on a wrapper around
 * it, so the compound form joining the footer class and the components-button
 * class is the one that matches today. The descendant form is kept alongside
 * it so a future WooCommerce release that moves the class onto a wrapper does
 * not silently drop the whole button design again.
 *
 * The drawer is rendered into document.body, outside `.wp-site-blocks`, so
 * every rule is scoped to the Mini Cart context and never to a theme wrapper.
 * Drawer descendants use `.wc-block-mini-cart__drawer`; its parent overlay is
 * limited with `:has(.wc-block-mini-cart__drawer)`.
 */

/*
 * The screen overlay is the drawer's PARENT, and its class is the generic
 * WooCommerce drawer overlay — it is not Mini Cart specific. Scoping by what it
 * contains keeps this navy scrim off any other drawer the plugin may render.
 */

.wc-block-components-drawer__screen-overlay:has(.wc-block-mini-cart__drawer) {
	background-color: rgba(3, 19, 32, 0.45);
}

.wc-block-mini-cart__drawer {
	--alcazar-mini-cart-gutter: 2rem;

	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--manrope);
}

/*
 * Title.
 *
 * Verified in the rendered DOM: this is one `h2` carrying BOTH
 * `wc-block-mini-cart__title` and `wp-block-woocommerce-mini-cart-title-block`,
 * not a wrapper around a heading. Both classes are matched on the same element
 * so the rule cannot be defeated by whichever one WooCommerce styles.
 */

.wc-block-mini-cart__drawer .wc-block-mini-cart__title.wp-block-woocommerce-mini-cart-title-block {
	display: block;
	box-sizing: border-box;
	margin: 0;
	padding: 1.75rem var(--alcazar-mini-cart-gutter) 1.25rem;
	border-bottom: 1px solid rgba(228, 228, 231, 0.8);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 1.875rem;
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

/*
 * Horizontal rhythm.
 *
 * The reference's checkout card holds its content 2rem away from every edge and
 * never lets anything touch the border. The drawer gets the same gutter, set
 * once here and applied to the title, the item list and the footer. Each row's
 * own horizontal padding is zeroed so the gutter is exactly one value rather
 * than WooCommerce's padding plus ours.
 */

.wc-block-mini-cart__drawer .wc-block-mini-cart__items.wc-block-mini-cart__items {
	box-sizing: border-box;
	padding-inline: var(--alcazar-mini-cart-gutter);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__products-table.wc-block-mini-cart__products-table {
	padding-inline: 0;
}

/* Product rows. */

.wc-block-mini-cart__drawer .wc-block-cart-items__row.wc-block-cart-items__row {
	padding-inline: 0;
	border-bottom: 1px solid rgba(228, 228, 231, 0.8);
}

/*
 * No product image in this cart.
 *
 * The plans are services with no artwork, so the cell only ever renders
 * WooCommerce's grey placeholder. The row only looks like a table row:
 * WooCommerce lays it out with `display: grid` on the `tr`, fixed tracks and
 * explicit per-cell placement. Sizing or hiding the cell alone leaves its 80px
 * track, and reassigning the cells' own `grid-column` overlaps the name and the
 * total — both were tried. What works is redefining the track list and leaving
 * every cell's placement untouched.
 *
 * This is the one rule here that assumes what Alcazar sells. Delete it if the
 * theme is ever used for a catalogue with real product images.
 */
.wc-block-mini-cart__drawer table.wc-block-cart-items tr.wc-block-cart-items__row {
	grid-template-columns: 0 1fr 0 auto;
	column-gap: 0;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__image.wc-block-cart-item__image {
	overflow: hidden;
	padding: 0;
	visibility: hidden;
}

/*
 * The line total is a grid item of the row, so it centres against the item
 * detail with `align-self` — putting it on the same optical line as the remove
 * control instead of sitting on the product name's baseline.
 */

.wc-block-mini-cart__drawer table.wc-block-cart-items td.wc-block-cart-item__total {
	align-self: center;
	padding-left: 1rem;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name.wc-block-components-product-name {
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 180ms ease;
}

.wc-block-mini-cart__drawer .wc-block-components-product-name.wc-block-components-product-name:hover,
.wc-block-mini-cart__drawer .wc-block-components-product-name.wc-block-components-product-name:focus-visible {
	color: var(--wp--preset--color--accent);
}

.wc-block-mini-cart__drawer .wc-block-components-product-metadata.wc-block-components-product-metadata {
	color: var(--wp--preset--color--muted-text);
	font-size: 0.875rem;
	font-weight: 300;
	line-height: 1.7;
}

.wc-block-mini-cart__drawer .wc-block-components-product-price.wc-block-components-product-price {
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/*
 * Line-item density.
 *
 * The plans carry a full feature list in their short description. That belongs
 * on the product and in the checkout summary, where the customer is deciding;
 * in a mini cart it buries the three things this panel exists to confirm —
 * what is in the cart, how much, and how to remove it. The description is
 * hidden, not the whole metadata block, so variation and item meta still show
 * if a future product has any.
 */

.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description {
	display: none;
}

/*
 * The control ships at the bottom-left of the item, reading as an orphan under
 * the text. It belongs on the right of the item detail, centred against it.
 *
 * It cannot become a column of the row: the row's columns are its cells, and
 * this button lives inside the product cell, nested in
 * `.wc-block-cart-item__wrap`. CSS cannot move an element to another parent.
 * So the positioning context is that wrap: the detail keeps the left, the
 * control is pinned to the right edge and centred on the whole block, and the
 * wrap reserves room for it so long names never run underneath.
 */

.wc-block-mini-cart__drawer .wc-block-cart-item__wrap {
	position: relative;
	padding-right: 2.75rem;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__quantity {
	position: absolute;
	top: 50%;
	right: 0;
	display: flex;
	margin: 0;
	align-items: center;
	transform: translateY(-50%);
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link {
	padding: 0.25rem;
	color: var(--wp--preset--color--muted-text);
	transition: color 180ms ease;
}

.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link:hover,
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link.wc-block-cart-item__remove-link:focus-visible {
	color: var(--wp--preset--color--accent-dark);
}

/* Footer. */

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer.wc-block-mini-cart__footer {
	box-sizing: border-box;
	padding: 1.5rem var(--alcazar-mini-cart-gutter) 1.75rem;
	border-top: 1px solid rgba(228, 228, 231, 0.8);
	background: var(--wp--preset--color--base);
}

/*
 * Subtotal.
 *
 * Verified structure: the totals-item and footer-subtotal classes share one
 * element holding a `__label`, a `__value` and a `__description`. The label
 * takes the reference's 11px uppercase eyebrow, the value the light tracked-in
 * figure used for prices, and the description the muted small copy. Nothing is
 * sized on the container, so the three keep their own scale.
 */

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal.wc-block-mini-cart__footer-subtotal {
	margin: 0 0 1.25rem;
	padding-inline: 0;
	color: var(--wp--preset--color--contrast);
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--muted-text);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	line-height: 1.2;
	text-transform: uppercase;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--contrast);
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__description {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--muted-text);
	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.5;
}

.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions.wc-block-mini-cart__footer-actions {
	gap: 0.625rem;
}

/*
 * Buttons — reference: rounded-full, uppercase, font-bold, navy filled for the
 * primary action turning celeste, outlined for the secondary.
 *
 * Scale is NOT copied from the checkout. There the submit button spans the full
 * width of a card, so 14px at 0.18em tracking fits on one line. Here two
 * buttons share a ~200px column each, where the same values wrap
 * "Ir a finalizar compra" onto two lines and the 2rem padding inflates the
 * footer. The type is stepped down to the reference's own 11px eyebrow size
 * with tracking tightened to 0.07em, which is what keeps both labels on one
 * line. `flex: 1 1 0` gives the two buttons equal width.
 */

.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
).wc-block-components-button.wc-block-components-button,
.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
) .wc-block-components-button.wc-block-components-button {
	display: inline-flex;
	min-height: 2.875rem;
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background-color 300ms ease,
		border-color 300ms ease,
		color 300ms ease,
		box-shadow 300ms ease;
}

.wc-block-mini-cart__drawer
.wc-block-components-button.wc-block-components-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 0.2rem;
}

/*
 * Resting states first, then the pseudo-states. Stylelint's
 * `no-descending-specificity` reads a lower-specificity selector appearing
 * after a higher-specificity one for the same target as a cascade smell, so the
 * two base rules stay above every `:hover` / `:focus-visible` rule below.
 */

.wc-block-mini-cart__drawer
.wc-block-mini-cart__footer-checkout.wc-block-components-button.wc-block-components-button,
.wc-block-mini-cart__drawer
.wc-block-mini-cart__footer-checkout .wc-block-components-button.wc-block-components-button {
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
).wc-block-components-button.wc-block-components-button,
.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
) .wc-block-components-button.wc-block-components-button {
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wc-block-mini-cart__drawer
.wc-block-mini-cart__footer-checkout.wc-block-components-button.wc-block-components-button:hover,
.wc-block-mini-cart__drawer
.wc-block-mini-cart__footer-checkout.wc-block-components-button.wc-block-components-button:focus-visible,
.wc-block-mini-cart__drawer
.wc-block-mini-cart__footer-checkout .wc-block-components-button.wc-block-components-button:hover,
.wc-block-mini-cart__drawer
.wc-block-mini-cart__footer-checkout .wc-block-components-button.wc-block-components-button:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--elevated);
	color: var(--wp--preset--color--base);
}

.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
).wc-block-components-button.wc-block-components-button:hover,
.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
).wc-block-components-button.wc-block-components-button:focus-visible,
.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
) .wc-block-components-button.wc-block-components-button:hover,
.wc-block-mini-cart__drawer :is(
.wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__shopping-button
) .wc-block-components-button.wc-block-components-button:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
}

.wc-block-mini-cart__drawer .wc-block-components-button .wc-block-components-button__text {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

@media (max-width: 480px) {

	.wc-block-mini-cart__drawer {
		--alcazar-mini-cart-gutter: 1.25rem;
	}

	.wp-block-woocommerce-mini-cart-title-block {
		padding: 1.25rem 1.25rem 1rem;
	}

	.wp-block-woocommerce-mini-cart-title-block .wc-block-mini-cart__title,
	.wc-block-mini-cart__drawer .wc-block-mini-cart__title.wc-block-mini-cart__title {
		font-size: 1.5rem;
	}

	.wc-block-mini-cart__drawer :is(
	.wc-block-mini-cart__footer-checkout,
	.wc-block-mini-cart__footer-cart,
	.wc-block-mini-cart__shopping-button
).wc-block-components-button.wc-block-components-button,
	.wc-block-mini-cart__drawer :is(
	.wc-block-mini-cart__footer-checkout,
	.wc-block-mini-cart__footer-cart,
	.wc-block-mini-cart__shopping-button
) .wc-block-components-button.wc-block-components-button {
		min-height: 2.75rem;
		padding-inline: 0.625rem;
		font-size: 0.625rem;
		letter-spacing: 0.05em;
	}
}