/**
 * The slide-out cart — theme skin.
 *
 * Enqueued by f32_enqueue_cart_preview_styles() in inc/cart-preview.php, on the
 * plugin's own `edd_cart_preview_assets_enqueued` action, so this file loads on
 * exactly the requests the drawer loads on and no others.
 *
 * ---------------------------------------------------------------------------
 * WHY THIS FILE LOOKS NOTHING LIKE THE REST OF assets/css.
 *
 * The drawer is not markup this theme can select. EDD prints two `<template>`
 * elements into the footer and its script clones them into a shadow root -
 * `attachShadow( { mode: 'open' } )`, cart-preview/index.js:88 - on an element
 * called `<edd-cart-preview>`. A shadow tree is sealed against the page's
 * stylesheets by design. Nothing in this repo could reach it, which is why the
 * drawer shipped in the plugin's own colours: #333 text, #e0e0e0 rules, 4px
 * corners and a 2px double line over the subtotal, on a store that is pure black
 * on #f9fafb with 8px corners. It was never badly styled. It was never styled.
 *
 * There are exactly two doors, and this file uses both.
 *
 * 1. CUSTOM PROPERTIES INHERIT THROUGH A SHADOW BOUNDARY. The plugin declares a
 *    full token block at `:host` with the comment "These are exposed for
 *    theme/user customization" (cart-preview.scss:17). Setting the same
 *    properties on the host element from out here overrides them: when a
 *    declaration in the outer tree and a `:host` declaration in the shadow tree
 *    both apply to the host, CSS Scoping gives the outer tree the win for normal
 *    declarations, whatever the specificity says. That is what `:host` is for.
 *
 * 2. `::part()`. Every element in the template carries a `part` attribute, and
 *    the price markup this theme injects carries its own - see
 *    f32_cart_preview_price(). `::part()` is the one selector that crosses the
 *    boundary, and the same outer-tree-wins rule applies to it.
 *
 * WHAT NEITHER DOOR REACHES, so nobody goes looking for it twice:
 *
 * - A part's DESCENDANTS. `::part(item-remove) svg` is not a valid selector -
 *   the shadow tree exposes elements, not subtrees. So the trash glyph inside
 *   the remove button stays a glyph; turning it into the word "Remove" would
 *   mean forking the plugin's item template, which has no filter and a hardcoded
 *   path (Cart\Preview\Utility::get_template_path()). It is given a target and a
 *   muted colour instead, and it sits at the end of the row where the reference
 *   design puts its Remove link.
 * - The item count in the heading. "Your Cart" is fixed text in the template and
 *   the count changes over AJAX with no re-render of that node, so a count
 *   painted in from CSS would go stale on the second add. Left alone.
 *
 * ---------------------------------------------------------------------------
 * WHAT THE LEDGER IS.
 *
 * Three changes, in the order they matter.
 *
 * THE ROW IS A LIST ENTRY, NOT A CARD. EDD gives every row a 1px border and a
 * radius, so three items read as three separate objects stacked in a box. They
 * are one list. Hairline separators, no border, no radius - and the last row's
 * own separator is the rule above the subtotal, which is why ::part(summary)
 * below removes its border rather than adding one.
 *
 * THE TITLE IS THE TALLEST THING IN THE ROW. It was the discount paragraph: 84px
 * at 400px wide, 105px on a phone, in 600 weight, repeating the product's name
 * inside its own discount. inc/cart-preview.php folds it into a struck price on
 * the price line, the way the checkout cart has always drawn a saving.
 *
 * THE PANEL IS HONEST ABOUT ITS HEIGHT. `.cart-preview__items{flex-grow:1}` and
 * `.cart-preview__summary{margin-top:auto}` pinned the subtotal to the floor of
 * a full-height column, so three items left 1059px of white above it on desktop
 * and pushed it past the fold on a phone - measured, a 819px scroller in 598px
 * of room. Both are undone here. The subtotal now sits under the last row at
 * every width. The FOOTER still sits at the floor, and that is deliberate: it is
 * an action bar, not a summary.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

/*
 * The host, not `:root`. These properties inherit down into the shadow tree from
 * whatever the host element carries, and the host is the only place a
 * declaration of ours beats the plugin's `:host` block. `--wp--preset--*`
 * resolves here because global styles put those on the document and custom
 * properties inherit; the drawer is a child of `<body>` like anything else.
 *
 * The plugin's script REGENERATES three of these at runtime from the EDD button
 * colour setting - `--edd-cart-preview-color-primary` and its two companions,
 * written into a `:host` rule by generateCSSVariables() at index.js:115. That is
 * where the drawer's #333 button came from: an EDD default nobody set. Setting
 * them here beats that too, for the same reason, and keeps every colour on this
 * surface in one file instead of half of it in wp-admin.
 */
edd-cart-preview {
	--edd-cart-preview-font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	--edd-cart-preview-font-size-base: 0.9375rem;
	--edd-cart-preview-font-size-small: 0.8125rem;
	--edd-cart-preview-font-size-medium: 0.90625rem;
	--edd-cart-preview-font-size-large: 1.1875rem;
	--edd-cart-preview-font-size-xlarge: 1.1875rem;
	--edd-cart-preview-line-height: 1.45;

	--edd-cart-preview-color-text: var(--wp--preset--color--primary, #000);
	--edd-cart-preview-color-text-muted: var(--wp--preset--color--muted, #6b7280);
	--edd-cart-preview-color-border: var(--wp--preset--color--border-subtle, #e0e0e0);
	--edd-cart-preview-color-background: var(--wp--preset--color--contrast, #fff);
	--edd-cart-preview-color-danger: var(--wp--preset--color--danger, #b91c1c);
	--edd-cart-preview-color-link: var(--wp--preset--color--primary, #000);
	--edd-cart-preview-color-link-hover: var(--wp--preset--color--action, #1d4ed8);

	/* The store's black, in place of the plugin's #333. */
	--edd-cart-preview-color-primary: var(--wp--preset--color--primary, #000);
	--edd-cart-preview-color-primary-hover: var(--wp--preset--color--primary, #000);
	--edd-cart-preview-color-primary-text: var(--wp--preset--color--contrast, #fff);

	/*
	 * A darker scrim than the plugin's 50% flat black, because the panel is now
	 * square-cornered and edge-to-edge and needs the page behind it to recede
	 * rather than compete along that edge.
	 */
	--edd-cart-preview-color-backdrop: rgb(0 0 0 / 52%);

	--edd-cart-preview-border-radius: 8px;
	--edd-cart-preview-dialog-width: 420px;
	--edd-cart-preview-shadow-dialog: -2px 0 28px rgb(0 0 0 / 14%);

	/* Local, not the plugin's. The row rhythm, spelled once. */
	--f32-cp-inset: 20px;
	--f32-cp-thumb: 72px;
}

@media (min-width: 783px) {
	edd-cart-preview {
		--f32-cp-inset: 22px;
	}
}

/* ==========================================================================
   2. THE PANEL
   ========================================================================== */

/*
 * SQUARE. The plugin rounds the two corners that face the page - 12px on the
 * left at desktop, 12px across the top of the phone sheet - taken from its own
 * `--edd-cart-preview-spacing-sm`, which is also the small spacing everywhere
 * else, so the radius cannot be removed by retuning that token without also
 * retuning half the panel. `::part(dialog)` removes it directly, at both widths,
 * in one declaration.
 *
 * A radius says "card floating over the page". This panel is not floating: it is
 * pinned to the viewport edge with nothing behind it on that side, and a rounded
 * corner there only reveals a sliver of scrim that reads as a rendering seam.
 */
edd-cart-preview::part(dialog) {
	border-radius: 0;
}

/* ==========================================================================
   3. HEADER
   ========================================================================== */

edd-cart-preview::part(header) {
	padding: 18px var(--f32-cp-inset) 15px;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
}

edd-cart-preview::part(title) {
	color: var(--wp--preset--color--primary, #000);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.03em;
}

/*
 * 24px is WCAG 2.2's minimum target (2.5.8). The glyph is 20px and the plugin
 * gives it 6px of padding, which clears it - this states the floor so a later
 * change to the padding cannot quietly drop under it. The theme's own cart link
 * takes 44px; this control sits inside a panel the visitor can also leave with
 * Escape and with the scrim, so it is held to the minimum rather than the
 * enhanced target.
 */
edd-cart-preview::part(close-button) {
	min-width: 24px;
	min-height: 24px;
	color: var(--wp--preset--color--muted, #6b7280);
}

edd-cart-preview::part(close-button):hover,
edd-cart-preview::part(close-button):focus-visible {
	color: var(--wp--preset--color--primary, #000);
}

/* ==========================================================================
   4. THE LIST
   ========================================================================== */

edd-cart-preview::part(content) {
	padding: 12px var(--f32-cp-inset) 18px;
}

/*
 * The two rules that undid the height. `flex-grow: 0` stops the list stretching
 * to fill the panel, and `gap: 0` closes the 24px the plugin puts between the
 * list and the summary - the separator is the last row's own bottom border now,
 * and a gap on top of it would space the subtotal differently from every row
 * above it.
 */
edd-cart-preview::part(items) {
	flex-grow: 0;
	gap: 0;
}

edd-cart-preview::part(items-list) {
	gap: 0;
}

/*
 * THE ROW. Three tracks: thumbnail, everything else, remove.
 *
 * The first track is `auto` and not a fixed 72px on purpose. A download with no
 * featured image gets `thumbnail: false` from EDD\Cart\Data::get_thumbnail_url()
 * and the JS leaves the `<img>` at `display: none` - a `display: none` grid item
 * is not laid out, so a fixed track would leave a 72px hole on that row and a
 * fixed two-column grid would drop the details into the image's column. `auto`
 * collapses to nothing, and the explicit `grid-column` on each part below is
 * what keeps the details in track 2 either way.
 */
edd-cart-preview::part(item) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 15px;
	padding: 17px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
	border-radius: 0;
}

edd-cart-preview::part(item-image) {
	grid-column: 1;
	width: var(--f32-cp-thumb);
	height: var(--f32-cp-thumb);
	border-radius: 6px;
}

edd-cart-preview::part(item-details) {
	grid-column: 2;
}

edd-cart-preview::part(item-name) {
	margin: 0;
	color: var(--wp--preset--color--primary, #000);
	font-size: 0.90625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.012em;
}

/*
 * The remove control. `align-self: start` with a nudge rather than the plugin's
 * `align-self: center`, so it sits on the title's line - a control centred
 * against a two-line title lands between the title and the price, pointing at
 * neither.
 */
edd-cart-preview::part(item-remove) {
	grid-column: 3;
	align-self: start;
	margin-top: 2px;
	padding: 2px;
	min-width: 24px;
	min-height: 24px;
	color: var(--wp--preset--color--muted, #6b7280);
}

edd-cart-preview::part(item-remove):hover,
edd-cart-preview::part(item-remove):focus-visible {
	color: var(--wp--preset--color--danger, #b91c1c);
}

/* ==========================================================================
   5. THE PRICE
   ========================================================================== */

/*
 * These four parts are not EDD's. They are on markup inc/cart-preview.php puts
 * into `item.price`, which the drawer assigns with `innerHTML`; the `part`
 * attributes are how that markup reaches back out of the shadow root. See the
 * header of f32_cart_preview_price() for why that is the seam.
 */
edd-cart-preview::part(item-price) {
	margin-top: 5px;
}

edd-cart-preview::part(f32-price) {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 7px;
}

edd-cart-preview::part(f32-was) {
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.8125rem;
	text-decoration: line-through;
}

edd-cart-preview::part(f32-now) {
	color: var(--wp--preset--color--primary, #000);
	font-size: 0.90625rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

edd-cart-preview::part(f32-period) {
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.8125rem;
	font-weight: 400;
}

/*
 * Clipped, not `display: none`, because these two spans are the only thing that
 * stops "$84.00 $75.60" being read as one run of digits. The page's
 * `screen-reader-text` class is not in scope inside a shadow root, so the clip
 * is spelled here against a part of our own.
 */
edd-cart-preview::part(f32-sr) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * A row that kept its fees - a surcharge, or a surcharge mixed with a discount -
 * still prints them, because f32_cart_preview_discount() refuses to fold a case
 * it cannot show honestly. It is a footnote to the price, so it is set like one
 * and loses the plugin's 16px indent, which pushed it out of line with
 * everything else in the row.
 */
edd-cart-preview::part(item-fees) {
	margin-top: 5px;
	margin-left: 0;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.8125rem;
}

/* ==========================================================================
   6. SUBTOTAL
   ========================================================================== */

/*
 * `margin-top: 0` is the second half of the height fix; `border-top: 0` is the
 * hairline economy described in the file header - the last row's bottom border
 * already draws this line, and the plugin's 2px rule on top of it made three.
 */
edd-cart-preview::part(summary) {
	margin-top: 0;
	padding-top: 15px;
	border-top: 0;
	gap: 10px;
}

edd-cart-preview::part(summary-row) {
	align-items: baseline;
	font-size: 0.9375rem;
}

edd-cart-preview::part(summary-label) {
	color: var(--wp--preset--color--muted, #6b7280);
	font-weight: 500;
}

edd-cart-preview::part(summary-value) {
	color: var(--wp--preset--color--primary, #000);
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

/*
 * ONE ACTION, NOT TWO. The plugin puts Continue Shopping and Checkout side by
 * side at equal width - and, measured, at unequal height, because one is a
 * `<button>` and the other an `<a>`: 172x43 beside 170x47 on a phone. A cart
 * panel has one thing it wants the visitor to do.
 *
 * `column-reverse` rather than reordering the template, because the template is
 * not ours. The consequence is that the tab order still reaches Continue
 * Shopping first while Checkout is drawn above it. That is a deliberate trade:
 * both controls are operable and both are labelled, WCAG 2.4.3 asks that focus
 * order preserve meaning rather than match paint order, and the alternative -
 * a `<dialog>` whose primary action is drawn under a text link - is worse for
 * every visitor rather than second for one path through it.
 */
edd-cart-preview::part(footer) {
	display: flex;
	flex-direction: column-reverse;
	gap: 11px;
	padding: 16px var(--f32-cp-inset) 18px;
	border-top: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
}

edd-cart-preview::part(checkout-button) {
	width: 100%;
	padding: 14px 20px;
	border-radius: 8px;
	background: var(--wp--preset--color--primary, #000);
	color: var(--wp--preset--color--contrast, #fff);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/*
 * Demoted to a link. The panel already offers two ways back to the page - the
 * close button and the scrim - so this is a third, and a third way out has no
 * business wearing a button. 24px keeps it a target at 13px type.
 */
edd-cart-preview::part(continue-button) {
	width: 100%;
	min-height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

edd-cart-preview::part(continue-button):hover,
edd-cart-preview::part(continue-button):focus-visible {
	background: none;
	color: var(--wp--preset--color--primary, #000);
}

/* ==========================================================================
   8. EMPTY
   ========================================================================== */

edd-cart-preview::part(empty) {
	padding: 32px 0;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.9375rem;
	text-align: center;
}

/* ==========================================================================
   9. INCLUDED WITH YOUR PASS
   ========================================================================== */

/*
 * The rows a pass in the cart already covers. inc/cart-all-access.php takes them
 * out of the EDD cart - which is what makes the order purchasable - and
 * assets/js/cart-preview.js draws them back in underneath the pass, from the
 * shelf, with `part` attributes of their own. Nothing here is EDD's; every
 * selector below reaches markup this theme built inside the shadow root, which
 * only works because `part` is an ordinary attribute and applies to nodes added
 * after the tree was made. Same trick as the price in section 5, from the other
 * side.
 *
 * THE GROUP LABEL IS THE WHOLE EXPLANATION. There is no message box and no
 * "we removed 3 items" sentence: the items are on the screen, and a sentence
 * saying they were removed, printed directly above them, is two answers to one
 * question.
 */
edd-cart-preview::part(f32-group) {
	padding: 16px 0 3px;
	border-top: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
}

edd-cart-preview::part(f32-group-label) {
	margin: 0;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.65625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
 * THE GHOST ROW IS THE REAL ROW, ONE COLUMN SHORT. Section 4's rows are
 * `auto minmax(0,1fr) auto` because they carry a remove button in track 3; these
 * have nothing to remove - the shopper cannot take a covered pack out of a cart
 * it is not in - so the track is gone and the two that remain keep the same
 * widths, the same 15px gutter and the same 17px rhythm. A ghost that sat on a
 * different grid would read as a different kind of object, which is exactly what
 * it is not.
 */
edd-cart-preview::part(f32-ghost) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 15px;
	align-items: center;
	padding: 13px 0;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
}

/*
 * SMALLER ART, AND DIMMED. 52px against the live row's 72px, because a list of
 * things already paid for should not compete with the thing being paid for. The
 * opacity is the second half of the same statement and the cheapest one
 * available - no second image, no filter, nothing to load.
 */
edd-cart-preview::part(f32-ghost-art) {
	width: 52px;
	height: 52px;
	border-radius: 6px;
	object-fit: cover;
	opacity: 0.5;
}

edd-cart-preview::part(f32-ghost-main) {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

edd-cart-preview::part(f32-ghost-name) {
	margin: 0;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.84375rem;
	font-weight: 500;
	line-height: 1.35;
}

edd-cart-preview::part(f32-ghost-price) {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
}

edd-cart-preview::part(f32-ghost-was) {
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-decoration: line-through;
}

/*
 * The one thing on the row that is not muted. "Included" is the news; the struck
 * figure beside it is only there to say what the news replaced.
 */
edd-cart-preview::part(f32-ghost-inc) {
	color: var(--wp--preset--color--primary, #000);
	font-size: 0.8125rem;
	font-weight: 600;
}

/*
 * The standing offer, switched off.
 *
 * inc/cart-preview.php prints "10% off 2+ items" above the subtotal on every
 * page load; assets/js/cart-preview.js adds this second part token on any render
 * where the cart holds a pass, and takes it away again when the pass is binned.
 * The sentence is still true about the store and no longer true about this cart,
 * and it was sitting one line above two rows marked Included, inviting the
 * reader to count them toward a threshold they had just left.
 *
 * A PART THAT ONLY HIDES. It carries no other declaration on purpose: the offer
 * keeps whatever the panel gives it in every other state, and this rule has one
 * job that is legible from its name.
 */
edd-cart-preview::part(f32-off) {
	display: none;
}

/* ==========================================================================
   10. YOU MIGHT ALSO LIKE
   ========================================================================== */

/*
 * EDD Pro's cart recommendations, re-drawn as rows.
 *
 * WHAT WAS WRONG WITH IT. Not the idea and not the products - the object. The
 * plugin prints three bordered cards with an 8px radius, a 60px thumbnail, an
 * underlined product link and a filled black "Add to Cart" button, and it
 * prints them into a panel whose every other row is borderless, unlinked and
 * separated by a hairline. Measured at 420px: the section was 400px tall, one
 * card was 109px, and a real cart row is 107px. So a thing the shopper had not
 * chosen was drawn two pixels taller than a thing they had, three times over,
 * and the block of suggestions was nearly twice the height of the cart it hung
 * off. Worst of all, the panel has exactly one thing it wants the shopper to do
 * and this printed three more filled black buttons directly above it.
 *
 * SO IT BECOMES THE SAME ROW, AT HALF WEIGHT: 44px art against the cart's 72,
 * the same 15px gutter, the same hairline underneath, a 13.5px regular name
 * where a cart title is 14.5 and semibold, and an outlined disc where the cart
 * has no control at all. Nothing new is introduced, and the only filled black
 * rectangle left on the screen is Checkout.
 *
 * `::part()` DOES ALL OF IT, WITH NO JAVASCRIPT. EDD\Pro\Recommendations\
 * Preview puts `part` on every node it prints - `recommendations`,
 * `recommendations-title`, `recommendation`, `recommendation-image`,
 * `recommendation-details`, `recommendation-title`, `recommendation-price`,
 * `recommendation-button` - and injects its own stylesheet INTO the shadow
 * root. An outer-tree `::part()` declaration beats an inner rule for normal
 * declarations however specific the inner one is, so every line below wins
 * without a single `!important` and without touching the plugin.
 *
 * NO `border-top` ON THE SECTION, unlike the plugin's own rule. This block is a
 * sibling of the items list, and `::part(items)` sets `gap: 0`, so the last
 * cart row's own bottom hairline is already drawn immediately above it. The
 * plugin's border would have made that line 2px - the same hairline economy the
 * subtotal rule describes in section 6.
 *
 * NO `:last-child` ANYWHERE, and that is a limit rather than a choice: only
 * user-action pseudo-classes may follow `::part()`, so the final suggestion
 * keeps its bottom hairline. That happens to be right - it is the rule above
 * the subtotal, and every other section here ends the same way.
 */
edd-cart-preview::part(recommendations) {
	padding-top: 16px;
	border-top: 0;
}

/*
 * The heading, demoted to a label. It was 15px semibold - the same size as a
 * cart item's own title, which made a section heading compete with the products
 * under it. This is the identical treatment `f32-group-label` gives the pass
 * group a few rules up, so the two things that can sit under the cart look like
 * two of one kind.
 *
 * The colon is removed in PHP, not here - see f32_cart_preview_heading().
 */
edd-cart-preview::part(recommendations-title) {
	margin: 0 0 2px;
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.65625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

edd-cart-preview::part(recommendations-list) {
	gap: 0;
}

/*
 * The row. Three tracks, exactly as section 4 builds a cart row, and `auto` on
 * the first for the same reason: a download with no featured image leaves the
 * `<img>` at `display: none`, and a `display: none` grid item is not laid out,
 * so a fixed track would leave a hole.
 */
edd-cart-preview::part(recommendation) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	column-gap: 15px;
	align-items: center;
	padding: 11px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
	border-radius: 0;
}

edd-cart-preview::part(recommendation-image) {
	width: 44px;
	height: 44px;
	border-radius: 6px;
	object-fit: cover;
}

edd-cart-preview::part(recommendation-details) {
	min-width: 0;
}

/*
 * THE UNDERLINE IS KILLED WITH A CUSTOM PROPERTY, because it cannot be reached
 * any other way. The plugin's markup is
 *
 *     <h4 part="recommendation-title"><a href="">...</a></h4>
 *
 * and a shadow tree exposes ELEMENTS, not subtrees - `::part()` cannot select a
 * part's descendants, and the anchor carries no part of its own. But the rule
 * that draws its underline is
 *
 *     border-bottom: 1px solid var(--edd-cart-preview-color-text-muted)
 *
 * and custom properties inherit. Setting that property ON THE HEADING therefore
 * reaches the anchor inside it and nothing else on the panel, because it is
 * scoped to this subtree rather than to the host.
 *
 * The hover state is the same trick on the plugin's other variable, and it is
 * where the affordance goes instead: nothing at rest, the store's action blue
 * on hover, so a link still announces itself as one without three grey rules
 * competing with the row separators.
 *
 * The `color` is a plain declaration and not a property, because the heading's
 * own colour and the anchor's inherited colour have to stay black while the two
 * borders go transparent - overriding the variable would have taken the text
 * with it.
 */
edd-cart-preview::part(recommendation-title) {
	margin: 0 0 2px;
	color: var(--wp--preset--color--primary, #000);
	font-size: 0.84375rem;
	font-weight: 500;
	line-height: 1.3;

	--edd-cart-preview-color-text-muted: transparent;
	--edd-cart-preview-color-text: var(--wp--preset--color--action, #1d4ed8);
}

edd-cart-preview::part(recommendation-price) {
	color: var(--wp--preset--color--muted, #6b7280);
	font-size: 0.78125rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/*
 * THE DISC IS 30px AND THE TARGET IS 44px, which is why there are two boxes
 * here. WCAG 2.2 asks for 44px, and a 44px filled circle beside a 44px
 * thumbnail would be the loudest thing in the panel - so the button itself is
 * the target, transparent and 44 square, and its `::before` is the ring the
 * shopper sees. The same split the cart-link block uses to give a 21px glyph a
 * real hit area.
 *
 * `::part()::before` IS ALLOWED, unlike a structural pseudo-class: the spec
 * permits pseudo-elements after `::part()`, and this generates into the shadow
 * element rather than reaching inside it, so no boundary is crossed.
 *
 * `font-size: 0` HIDES "Add to Cart" WITHOUT HIDING THE BUTTON. Nothing is lost
 * to a screen reader: the plugin's own script sets
 * `aria-label="Add %s to cart"` with the product's name on every one of these,
 * so the accessible name is not only intact, it is better than the text it
 * replaces - "Add 20 Crimson Film Lightroom Presets and LUTs to cart" against
 * three buttons all reading "Add to Cart".
 */
edd-cart-preview::part(recommendation-button) {
	display: grid;
	place-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 0;
}

edd-cart-preview::part(recommendation-button)::before {
	content: "+";
	display: grid;
	place-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--wp--preset--color--border-subtle, #e0e0e0);
	border-radius: 999px;
	color: var(--wp--preset--color--primary, #000);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1;
}

edd-cart-preview::part(recommendation-button):hover::before,
edd-cart-preview::part(recommendation-button):focus-visible::before {
	border-color: var(--wp--preset--color--primary, #000);
	background: var(--wp--preset--color--primary, #000);
	color: var(--wp--preset--color--contrast, #fff);
}

/*
 * The disabled state the plugin's script sets while an add is in flight. Its
 * own rule puts `opacity: .6` on the button, and a `font-size: 0` box shows
 * nothing of that, so the fade moves to the ring.
 */
edd-cart-preview::part(recommendation-button):disabled::before {
	opacity: 0.45;
}