/**
 * Premium cart drawer. Intentionally scoped to the drawer so the legacy cart
 * page remains untouched until its independent retirement is approved.
 */

.myc-cart-drawer {
	--ps-cart-drawer-width: min(520px, calc(100% - var(--ps-space-4)));
	--ps-cart-drawer-padding: clamp(var(--ps-space-5), 3vw, var(--ps-space-6));
	--ps-cart-drawer-shadow: -24px 0 64px rgb(15 12 13 / 18%);
	--ps-cart-drawer-backdrop: rgb(15 12 13 / 56%);
	visibility: hidden;
	transition: visibility 0s linear 220ms, clip-path 0s linear 0s;
}

/*
 * The clip is only worn while the panel travels.
 *
 * `clip-path: inset(0)` in frontend.css keeps the parked panel from enlarging
 * the scrollable area, and it must stay for that. What it also does is make
 * this container a backdrop root, so the veil's blur has nothing to sample:
 * in Chromium the page behind never blurred and a seam showed along the
 * bottom, and in Firefox the blur came and went with every repaint — hovering
 * «Finalizar compra» was enough to lose it.
 *
 * Removing the clip outright fixed the blur but changed how the opening felt,
 * because the blur was then composited while the panel was still moving. What
 * keeps that from happening is the *blur's* delay below, not the clip's: the
 * clip is listed here with a delay, but `clip-path` is a discrete property and
 * Chromium drops it as soon as the class lands, delay or not — measured at
 * ~22ms every time. That is harmless, because until the blur fades in there is
 * nothing extra to composite, and it restores the instant the drawer closes.
 */
.myc-cart-drawer.is-open {
	visibility: visible;
	clip-path: none;
	transition-delay: 0s, 240ms;
}

html.myc-cart-is-open {
	overflow: hidden;
	/* base.css reserves a permanent scrollbar gutter so centred shells don't
	   shift width when a page toggles between scrolling and not. With the
	   drawer open scrolling is impossible anyway, and that reserved gutter
	   was pushing position:fixed; right:0 elements — the drawer panel itself
	   — in from the true edge of the viewport, leaving a visible sliver of
	   the backdrop down the right side. */
	scrollbar-gutter: auto;
}

body.myc-cart-is-open {
	position: fixed;
	top: var(--myc-cart-scroll-offset, 0);
	right: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}

body.myc-cart-is-open .myc-cart-panel,
body.myc-cart-is-open .myc-cart-drawer-items {
	touch-action: pan-y;
	overscroll-behavior: contain;
}

/*
 * The blur fades in as the panel settles, never while it is travelling fast.
 *
 * Measured against the real animation, which lands the panel at ~262ms: at a
 * 120ms delay the blur appears with the panel 58px from home and already slow,
 * and it is fully there by 280ms. Waiting for the panel to stop entirely
 * pushed that to 412ms, which read as a lag. Going earlier walks back into the
 * problem: at 100ms the blur is on screen with the panel still 128px out, and
 * compositing it mid-travel is what made the opening feel wrong before.
 */
.myc-cart-drawer .myc-cart-backdrop {
	background: var(--ps-cart-drawer-backdrop);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);
	transition: opacity var(--ps-transition-base), backdrop-filter 130ms ease 120ms, -webkit-backdrop-filter 130ms ease 120ms;
}

.myc-cart-drawer.is-open .myc-cart-backdrop {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.myc-cart-drawer .myc-cart-panel {
	width: var(--ps-cart-drawer-width);
	border-left-color: var(--ps-color-brand-border);
	background: var(--ps-color-page);
	box-shadow: var(--ps-cart-drawer-shadow);
	/* Exactly outside the viewport, not 104%: the surplus was itself scrollable.
	 * That alone is not enough — a panel parked wholly outside still enlarges
	 * the scrollable area in Safari, which counts fixed subtrees where Chromium
	 * does not. The clipping that stops it is on .myc-cart-drawer. */
	transform: translateX(100%);
	transition: transform var(--ps-transition-base);
}

.myc-cart-drawer .myc-cart-panel-head {
	align-items: center;
	padding: var(--ps-cart-drawer-padding);
	border-bottom-color: var(--ps-color-border);
	background: var(--ps-color-page);
}

.myc-cart-drawer .myc-cart-panel-head .myc-kicker {
	margin-bottom: var(--ps-space-2);
	color: var(--ps-color-brand-700);
}

.myc-cart-drawer .myc-cart-panel-head h2 {
	display: flex;
	align-items: center;
	gap: var(--ps-space-2);
	font-size: clamp(28px, 3vw, 34px);
	letter-spacing: -.045em;
	line-height: 1;
}

.myc-cart-drawer .myc-cart-panel-head h2 span {
	display: inline-grid;
	min-width: 28px;
	min-height: 28px;
	place-items: center;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--ps-color-brand-600);
	color: var(--ps-color-surface);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
}

.myc-cart-drawer .myc-icon-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	padding: 0 0 2px;
	border-color: var(--ps-color-border);
	border-radius: 999px;
	background: var(--ps-color-surface);
	color: var(--ps-color-text);
	font-size: 28px;
	transition: border-color var(--ps-transition-fast), background-color var(--ps-transition-fast), color var(--ps-transition-fast), transform var(--ps-transition-fast);
	-webkit-tap-highlight-color: transparent;
}

.myc-cart-drawer .myc-icon-button:hover,
.myc-cart-drawer .myc-icon-button:focus-visible {
	border-color: var(--ps-color-brand-600);
	background: var(--ps-color-brand-50);
	color: var(--ps-color-brand-700);
}

.myc-cart-drawer .myc-icon-button:active {
	transform: scale(.96);
}

.myc-cart-drawer .myc-cart-panel-body {
	background: var(--ps-color-page);
	transition: opacity var(--ps-transition-fast), transform var(--ps-transition-fast);
}

.myc-cart-drawer .myc-cart-drawer-items {
	gap: 0;
	overflow-y: auto;
	padding: 0 var(--ps-cart-drawer-padding);
	overscroll-behavior: contain;
}

.myc-cart-drawer .myc-cart-item {
	grid-template-columns: 92px minmax(0, 1fr);
	gap: var(--ps-space-4);
	padding: var(--ps-space-5) 0;
	border-bottom-color: var(--ps-color-border);
}

.myc-cart-drawer .myc-cart-item-image {
	align-self: end;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-md);
	background: var(--ps-color-surface-subtle);
}

.myc-cart-drawer .myc-cart-item-image:focus-visible {
	border-color: var(--ps-color-brand-600);
	outline: none;
	box-shadow: var(--ps-shadow-focus);
}

.myc-cart-drawer .myc-cart-item h3 {
	max-width: none;
	padding-right: var(--ps-space-2);
	font-size: 16px;
	line-height: 1.35;
}

/*
 * The three tones of the order summary in My account, so a basket and the
 * order it becomes are read the same way: the product in the brand's wine, the
 * attribute in near-black, its value in grey.
 */
.myc-cart-drawer .myc-cart-item h3 a {
	color: var(--ps-color-brand-700);
}

.myc-cart-drawer .myc-cart-item h3 a:hover,
.myc-cart-drawer .myc-cart-item h3 a:focus-visible {
	color: var(--ps-color-brand-800);
}

/*
 * The remove button no longer decides how tall the title row is.
 *
 * At 32px it is taller than a one-line product name (15px at 1.35 ≈ 20px), so
 * a short name left about 12px of slack beneath it and a name that wrapped to
 * two lines left none — the same card looking differently spaced depending on
 * how long the shirt happens to be called. Out of the flow, the title is the
 * only thing that sets the height, and the button keeps its 32px tap target.
 *
 * The padding is what the absolute button would otherwise sit on top of.
 */
.myc-cart-drawer .myc-cart-item-topline {
	position: relative;
	padding-right: 46px;
}

.myc-cart-drawer .myc-cart-remove {
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	flex-basis: 32px;
	border: 0;
	border-radius: var(--ps-radius-sm);
	background: transparent;
	color: var(--ps-color-text-muted);
	font-size: 23px;
	transition: border-color var(--ps-transition-fast), background-color var(--ps-transition-fast), color var(--ps-transition-fast), transform var(--ps-transition-fast);
}

.myc-cart-drawer .myc-cart-remove:hover,
.myc-cart-drawer .myc-cart-remove:focus-visible {
	background: var(--ps-color-danger-soft);
	color: var(--ps-color-danger);
}

.myc-cart-drawer .myc-cart-remove:active {
	transform: scale(.94);
}

.myc-cart-drawer .myc-cart-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ps-space-2);
	margin: var(--ps-space-3) 0 var(--ps-space-4);
	font-size: 12px;
}

/* Keep each WooCommerce attribute together as one readable chip. */
.myc-cart-drawer .myc-cart-item-meta dl {
	display: contents;
}

.myc-cart-drawer .myc-cart-item-meta .myc-cart-item-attr {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--ps-color-surface-muted);
	color: var(--ps-color-text-muted);
	line-height: 1;
}

.myc-cart-drawer .myc-cart-item-meta dt {
	position: static;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
	overflow: visible;
	clip-path: none;
	color: var(--ps-color-text);
	font-weight: 800;
	white-space: nowrap;
}

.myc-cart-drawer .myc-cart-item-meta dd,
.myc-cart-drawer .myc-cart-item-meta .myc-field-value {
	display: inline;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	line-height: inherit;
}

.myc-cart-drawer .myc-cart-item-meta dd:has( .myc-field-value ) {
	display: inline-flex;
	gap: 4px;
}

.myc-cart-drawer .myc-cart-item-meta dd p {
	display: contents;
}

.myc-cart-drawer .myc-cart-item-meta dd::after {
	display: none;
}

/*
 * The comma frontend.css puts between values is hidden rather than removed.
 * The chips already separate them for the eye; a screen reader has no chips
 * and would otherwise hear «World Cup Champions 2026WC 2026 - Dorado» as one
 * run. Pseudo-element text stays in the accessibility tree.
 */
.myc-cart-drawer .myc-cart-item-meta .myc-field-value + .myc-field-value::before {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.myc-cart-drawer .myc-quantity-control {
	grid-template-columns: 34px 38px 34px;
	height: 36px;
	border-color: var(--ps-color-border);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-color-surface);
}

.myc-cart-drawer .myc-quantity-control button,
.myc-cart-drawer .myc-quantity-value {
	height: 36px;
	background: transparent;
	color: var(--ps-color-text);
}

.myc-cart-drawer .myc-quantity-control button:hover,
.myc-cart-drawer .myc-quantity-control button:focus-visible {
	background: var(--ps-color-surface-subtle);
	color: var(--ps-color-text);
}

.myc-cart-drawer .myc-quantity-value {
	border-color: var(--ps-color-border);
	font-size: 14px;
	font-weight: 800;
}

.myc-cart-drawer .myc-cart-item-price {
	color: var(--ps-color-brand-700);
	font-size: 17px;
	font-variant-numeric: tabular-nums;
}

.myc-cart-drawer .myc-cart-drawer-footer {
	/* Less air under «Seguir comprando» than at the sides. min() rather than a
	   flat value so the narrow layouts, where --ps-cart-drawer-padding is
	   already tighter than this, keep what they have instead of gaining. */
	padding: var(--ps-space-5) var(--ps-cart-drawer-padding) min(var(--ps-space-5), var(--ps-cart-drawer-padding));
	border-top-color: var(--ps-color-border);
	background: var(--ps-color-page);
	box-shadow: 0 -14px 28px rgb(23 19 21 / 5%);
}

.myc-cart-drawer .myc-cart-drawer-subtotal {
	/* Same step as the rows that follow it, so the column stays even
	   whether or not an offer is in play. */
	margin-bottom: var(--ps-space-3);
	color: var(--ps-color-text-muted);
	font-size: 14px;
	font-weight: 750;
}

/*
 * The offer is a peer of the subtotal, not a footnote to it: one column of
 * figures on an even rhythm, with the gap before the buttons the only
 * bigger one.
 */
.myc-cart-drawer .myc-cart-drawer-discount,
.myc-cart-drawer .myc-cart-drawer-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ps-space-3);
	margin-bottom: var(--ps-space-3);
	color: var(--ps-color-text-muted);
	font-size: 14px;
	font-weight: 750;
}

.myc-cart-drawer .myc-cart-drawer-discount {
	color: var(--ps-color-success);
}

/* Level with the subtotal's own figure — the offer is a peer of it, and a
   discount set smaller than the number it comes off reads as a footnote. */
.myc-cart-drawer .myc-cart-drawer-discount strong {
	font-size: 16px;
	font-variant-numeric: tabular-nums;
}

.myc-cart-drawer .myc-cart-drawer-total {
	margin-bottom: var(--ps-space-3);
}

/*
 * The biggest figure is whichever one the customer actually pays. On a
 * basket with no offer that is the subtotal, and it keeps the size it has
 * always had; as soon as a total appears below it, the subtotal steps down
 * to a peer and the total takes over. Without this the drawer sized the
 * larger, pre-discount number loudest and the amount charged quietest.
 */
.myc-cart-drawer .myc-cart-drawer-footer:has(.myc-cart-drawer-total) .myc-cart-drawer-subtotal strong {
	font-size: 16px;
}

/* Kept level with the standalone subtotal below: both are «what you pay»,
   one with an offer in play and one without, so they read the same size. */
.myc-cart-drawer .myc-cart-drawer-total strong {
	color: var(--ps-color-text);
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}

.myc-cart-drawer .myc-cart-drawer-subtotal strong {
	color: var(--ps-color-text);
	font-size: 24px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.04em;
}

.myc-cart-drawer .myc-cart-checkout,
.myc-cart-drawer .myc-cart-continue {
	min-height: 56px;
	border-radius: var(--ps-radius-sm);
	font-size: 15px;
	font-weight: 850;
}

/* Same pair as every other primary action in buttons.css; this rule only
   exists to keep the drawer's own coloured drop shadow on top of it.

   The gap above it lives here rather than on the row before, so it stays the
   same whether that row is the subtotal or a total under an offer. It is the
   whole gap, not an addition to that row's margin: adjacent vertical margins
   collapse to the larger of the two, so this has to be the larger one. */
.myc-cart-drawer .myc-cart-checkout {
	margin-top: var(--ps-space-5);
	background: var(--ps-color-brand-700);
	box-shadow: 0 10px 20px rgb(28 53 87 / 22%);
}

.myc-cart-drawer .myc-cart-checkout:hover,
.myc-cart-drawer .myc-cart-checkout:focus-visible {
	background: var(--ps-color-brand-600);
	box-shadow: 0 12px 24px rgb(22 42 70 / 26%);
}

/* A plain link under the button, not a second button: the two are not
   equal choices and should not look like they are. */
.myc-cart-drawer .myc-cart-continue {
	min-height: 36px;
	margin-top: var(--ps-space-2);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ps-color-brand-700) !important;
	font-size: 14px;
}

.myc-cart-drawer .myc-cart-continue:hover,
.myc-cart-drawer .myc-cart-continue:focus-visible {
	border: 0;
	background: transparent;
	color: var(--ps-color-brand-700) !important;
	text-decoration: underline !important;
}

.myc-cart-drawer .myc-cart-drawer-empty {
	min-height: 100%;
	gap: var(--ps-space-3);
	padding: var(--ps-space-7) var(--ps-cart-drawer-padding);
	border: 0;
	background: radial-gradient(circle at 50% 40%, var(--ps-color-brand-50) 0, var(--ps-color-surface) 58%);
}

.myc-cart-drawer .myc-cart-drawer-empty::before {
	display: grid;
	width: 60px;
	height: 60px;
	place-items: center;
	border: 1px solid var(--ps-color-brand-border);
	border-radius: 50%;
	background: var(--ps-color-brand-50);
	color: var(--ps-color-brand-700);
	content: '0';
	font-size: 22px;
	font-weight: 850;
}

.myc-cart-drawer .myc-cart-empty strong {
	color: var(--ps-color-text);
	font-size: 22px;
	letter-spacing: -.035em;
}

.myc-cart-drawer .myc-cart-empty .myc-primary-link {
	margin-top: var(--ps-space-3);
	padding: 0 var(--ps-space-5);
	border: 1px solid var(--ps-color-brand-600);
	border-radius: var(--ps-radius-sm);
	background: var(--ps-color-brand-600);
	color: var(--ps-color-surface);
	font-weight: 800;
	line-height: 46px;
	text-decoration: none;
}

.myc-cart-drawer .myc-cart-empty .myc-primary-link:hover,
.myc-cart-drawer .myc-cart-empty .myc-primary-link:focus-visible {
	border-color: var(--ps-color-brand-700);
	background: var(--ps-color-brand-700);
	color: var(--ps-color-surface);
}

.myc-cart-drawer.is-updating .myc-cart-panel-body {
	transform: none;
}

.myc-cart-drawer.is-updating .myc-cart-drawer-items,
.myc-cart-drawer.is-updating .myc-cart-drawer-footer {
	pointer-events: none;
}

@media (max-width: 520px) {
	.myc-cart-drawer {
		--ps-cart-drawer-width: 100%;
		--ps-cart-drawer-padding: var(--ps-space-4);
	}

	.myc-cart-drawer .myc-cart-panel {
		border-left: 0;
	}

	.myc-cart-drawer .myc-cart-drawer-footer {
		padding-top: var(--ps-space-4);
		padding-bottom: var(--ps-space-3);
	}

	.myc-cart-drawer .myc-cart-panel-head h2 {
		font-size: 28px;
	}

	.myc-cart-drawer .myc-cart-item {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: var(--ps-space-3);
	}

	.myc-cart-drawer .myc-cart-item h3 {
		font-size: 15px;
	}

	.myc-cart-drawer .myc-cart-item-bottom {
		align-items: flex-end;
		gap: var(--ps-space-2);
	}

	.myc-cart-drawer .myc-cart-item-price {
		font-size: 16px;
	}
}