/**
 * 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;
}

.myc-cart-drawer.is-open {
	visibility: visible;
	transition-delay: 0s;
}

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

.myc-cart-drawer .myc-cart-backdrop {
	background: var(--ps-cart-drawer-backdrop);
	backdrop-filter: blur(3px);
	transition: opacity var(--ps-transition-base);
}

.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);
	/* Keep the closed panel exactly outside the viewport. Safari may otherwise
	 * expose the extra translated space as horizontal page scrolling. */
	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: 104px 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 {
	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;
}

/* Un-boxes the <dl> WooCommerce wraps the pairs in, so each attribute is a
   direct flex item of .myc-cart-item-meta rather than one opaque child holding
   every attribute. */
.myc-cart-drawer .myc-cart-item-meta dl {
	display: contents;
}

/*
 * The label is not drawn.
 *
 * «XL», «Borja 10», «World Cup Champions 2026» each say what they are, and in
 * a 300px drawer the word in front of them is the half that does not survive
 * the width. Every chip then holds one value, short enough that a line breaks
 * *between* chips — the thing this layout was always meant to do, and what a
 * long label-plus-value pill kept it from doing.
 *
 * Hidden from the eye and not from a screen reader, which has no chip shapes
 * to go on and would otherwise hear four bare values with nothing tying them
 * to what they mean.
 */
.myc-cart-drawer .myc-cart-item-meta dt {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * inc/cart.php wraps each dt/dd pair so a label could never be separated from
 * its value. There are no labels here any more, and the wrapper's only
 * remaining effect was to tie an attribute's chips to each other: «Parches»
 * moved to a new line as a block, leaving «XL» alone on the one above with
 * room to spare beside it.
 *
 * Dissolved, so every chip is a direct flex item of the meta row and wraps on
 * its own. The wrapper still does its job wherever labels are drawn.
 */
.myc-cart-drawer .myc-cart-item-meta .myc-cart-item-attr {
	display: contents;
}

/* One value, one chip. */
.myc-cart-drawer .myc-cart-item-meta dd,
.myc-cart-drawer .myc-cart-item-meta .myc-field-value {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--ps-color-surface-muted);
	color: var(--ps-color-text-muted);
	line-height: 1;
}

/*
 * An attribute holding several values — two patches, say — is not itself a
 * chip: its values are. The dd steps back to being a container so each one
 * gets its own, and they wrap between themselves like any other pair.
 */
.myc-cart-drawer .myc-cart-item-meta dd:has( .myc-field-value ) {
	display: contents;
}

/* wpautop wraps the value in a <p>; display:contents keeps it from being a box
   between the dd and its values. */
.myc-cart-drawer .myc-cart-item-meta dd p {
	display: contents;
}

/* frontend.css forces a line break after every dd so pairs stack. Chips wrap
   on their own. */
.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: 38px 42px 38px;
	height: 40px;
	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: 40px;
	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(143 31 46 / 22%);
}

.myc-cart-drawer .myc-cart-checkout:hover,
.myc-cart-drawer .myc-cart-checkout:focus-visible {
	background: #852733;
	box-shadow: 0 12px 24px rgb(112 23 35 / 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: 88px 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;
	}
}