/* ============================================================
   Dot Experience — WooCommerce Mini-Cart
   ============================================================
   Restyles WooCommerce Blocks' *native* Mini-Cart (the
   woocommerce/mini-cart block placed in parts/header.html, which
   every template includes — see inc/woocommerce-mini-cart.php)
   using this theme's design tokens (assets/css/tokens.css).

   Per this theme's "restyle via class-name targeting" convention,
   this file only touches WooCommerce Blocks' own stable class
   names (.wc-block-mini-cart__*, .wc-block-components-drawer__*,
   .wc-block-cart-item__*, etc.) — none of the block's markup,
   PHP, or JS internals are modified.

   NOTE — one section below (item-metadata rows / "Add more" pill) is
   explicitly dual-scoped to `.wc-block-mini-cart__drawer` AND
   `.wp-block-woocommerce-cart`: the ProductMetadata/ProductDetails
   sub-component it targets is shared verbatim between the Mini-Cart
   drawer and the standalone Cart page block (confirmed live), and the
   theme has no separate Cart-page-block stylesheet yet. See that
   section's own comment for the full reasoning. If a dedicated
   woocommerce-cart-blocks.css is ever added, that section is a
   candidate to move there instead of living here.

   IMPORTANT — do not add a competing focus-trap/keyboard script:
   as of the installed WooCommerce version, the Mini-Cart drawer
   already implements, natively, via its Interactivity API store
   (see wp-content/plugins/woocommerce/assets/client/blocks/
   woocommerce/mini-cart.js — actions: openDrawer, closeDrawer,
   handleOverlayKeydown; callbacks: focusFirstElement):
     - focus moves into the drawer (first focusable element) on open
     - Tab/Shift+Tab cycle (wrap) within the drawer — a real focus trap
     - Escape closes the drawer
     - focus is restored to the mini-cart toggle button on close
     - role="dialog" / aria-modal="true" / aria-hidden are all bound
       reactively to open/close state
     - background scroll is locked while the drawer is open
   This was confirmed live, with a real cart item, not just read from
   source — see the mini-cart-a11y.js header comment and the
   2026-07-11 decision-log entry for how it was verified. Only one
   real gap was found (the toggle button lacks aria-haspopup="dialog"),
   which mini-cart-a11y.js adds — nothing else. Re-implementing any of
   the above here or in JS would create a second, competing focus/key
   handler on top of WooCommerce's own, which is a correctness risk
   (double-handling, drift on the next WooCommerce update), not a
   accessibility improvement.

   Two rules below use !important on purpose: WooCommerce's
   Interactivity API sets the mini-cart contents background and the
   item-count badge's colors as inline styles via `data-wp-style--*`
   directives (computed at runtime from block color attributes).
   Inline styles beat any external stylesheet rule regardless of
   selector specificity or load order, so !important is the only way
   to reassert the theme's tokens there.
   ============================================================ */

/* ---- Toggle button (header icon + count badge) ---- */
.wc-block-mini-cart__button {
	color: var(--ink);
	border-radius: 9999px;
	transition: background-color var(--motion-med) var(--ease);
}

.wc-block-mini-cart__button:hover,
.wc-block-mini-cart__button:focus-visible {
	background-color: var(--line);
}

.wc-block-mini-cart__button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.wc-block-mini-cart__badge {
	/* Inline-styled by the Interactivity API (state.badgeBackgroundColor /
	   state.badgeTextColor) — see file header. */
	background-color: var(--accent) !important;
	color: var(--accent-ink) !important;
	border-radius: 999px;
}

/* ---- Overlay + drawer panel ---- */
.wc-block-components-drawer__screen-overlay {
	background-color: color-mix(in srgb, var(--ink) 45%, transparent);
	transition-duration: var(--motion-med);
}

.wc-block-components-drawer__screen-overlay--with-slide-out .wc-block-components-drawer {
	transition-duration: var(--motion-med);
	transition-timing-function: var(--ease);
}

.wc-block-mini-cart__drawer {
	background-color: var(--surface);
	color: var(--ink);
	border-color: var(--line);
}

/* Leading (left) corners only — the drawer still meets the top,
   right, and bottom edges of the viewport, so rounding those would
   leave a visible gap. Skipped on the full-bleed mobile presentation. */
.wc-block-mini-cart__drawer:not(.is-mobile) {
	border-top-left-radius: var(--r-lg);
	border-bottom-left-radius: var(--r-lg);
	box-shadow: var(--shadow-drawer);
}

.wp-block-woocommerce-mini-cart-contents {
	/* Inline-styled by the Interactivity API (state.contentsBackgroundColor)
	   — see file header. */
	background-color: var(--surface) !important;
}

/* ---- Close button ---- */
.wc-block-components-button.wc-block-components-drawer__close {
	color: var(--ink) !important;
	border-radius: 9999px;
	transition: background-color var(--motion-med) var(--ease);
}

.wc-block-components-button.wc-block-components-drawer__close:hover {
	background-color: var(--line) !important;
	opacity: 1;
}

.wc-block-components-button.wc-block-components-drawer__close:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* ---- Title ---- */
h2.wc-block-mini-cart__title {
	color: var(--ink);
}

/* ---- Cart items ---- */
.wc-block-mini-cart__products-table .wc-block-cart-items__row {
	border-color: var(--line);
}

.wc-block-components-product-name {
	color: var(--ink);
}

.wc-block-cart-item__prices .wc-block-components-product-price__value,
.wc-block-cart-item__total .wc-block-components-product-price__value {
	color: var(--ink);
}

.wc-block-components-quantity-selector {
	border-color: var(--line);
	border-radius: var(--r-sm);
}

.wc-block-components-quantity-selector__input {
	color: var(--ink);
}

.wc-block-components-quantity-selector__button {
	color: var(--ink);
	transition: background-color var(--motion-med) var(--ease);
}

.wc-block-components-quantity-selector__button:hover:not([disabled]),
.wc-block-components-quantity-selector__button:focus-visible {
	background-color: var(--line);
}

.wc-block-components-quantity-selector__button:focus-visible,
.wc-block-components-quantity-selector__input:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

.wc-block-cart-item__remove-link {
	color: var(--muted);
	transition: color var(--motion-med) var(--ease);
}

.wc-block-cart-item__remove-link:hover,
.wc-block-cart-item__remove-link:focus-visible {
	color: var(--ink);
}

.wc-block-cart-item__remove-link:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* ---- Footer: subtotal + actions ---- */
.wc-block-mini-cart__footer {
	border-color: var(--line);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__label,
.wc-block-mini-cart__footer .wc-block-components-totals-item__value {
	color: var(--ink);
}

.wc-block-mini-cart__footer .wc-block-components-totals-item__description {
	color: var(--muted);
}

.wc-block-mini-cart__footer-actions .wc-block-components-button {
	border-radius: 9999px;
	/* transform included so the shared 2px hover lift inherited from
	   base.css's .wc-block-components-button:hover eases in step with the
	   colour change rather than snapping. */
	transition: background-color var(--motion-med) var(--ease), color var(--motion-med) var(--ease), transform var(--motion-med) var(--ease);
}

.wc-block-mini-cart__footer-actions .wc-block-components-button:not(.is-link):focus {
	/* Replaces WooCommerce's hardcoded #0675c4 focus ring with the theme's
	   focus token so it matches the rest of the site and the
	   high-contrast/dark variants. */
	box-shadow: 0 0 0 2px var(--focus) !important;
}

/* "View my cart" — outline style */
.wc-block-mini-cart__footer-cart.is-style-outline {
	color: var(--ink);
}

.wc-block-mini-cart__footer-cart.is-style-outline:not(:focus) {
	box-shadow: inset 0 0 0 1px var(--line);
}

.wc-block-mini-cart__footer-cart.is-style-outline:hover,
.wc-block-mini-cart__footer-cart.is-style-outline:active,
.wc-block-mini-cart__footer-cart.is-style-outline:focus {
	background-color: var(--accent);
	color: var(--accent-ink);
}

/* "Go to checkout" — filled/primary style */
.wc-block-mini-cart__footer-checkout {
	background-color: var(--accent);
	color: var(--accent-ink);
}

/* ---- Item metadata rows (Date/Slot booking details, variation attrs) ----
   WC Blocks' ProductMetadata/ProductDetails sub-components are SHARED
   between the Mini-Cart drawer and the standalone Cart page block —
   confirmed live 2026-07-22 with a real FooEvents Bookings ticket
   (Factory Tours): both surfaces render identical class names
   (.wc-block-components-product-metadata > .wc-block-components-product-details
   > .wc-block-components-product-details__{key} > __name/__value), so this
   file's own rules are written to target both root containers explicitly
   rather than relying on the coincidence that the mini-cart block (and
   therefore this stylesheet) happens to also load on /cart/ via the header.

   By default WC Blocks joins every item_data entry into one inline,
   flowing line ("Date: August 1, 2026 / Slot: Morning (10:15 a.m.)"). In
   the Mini-Cart's ~380-420px drawer this wraps mid-phrase, and FooEvents
   Bookings' own `add_booking_details_to_cart()` (class-fooevents-bookings.php)
   appends an "Add more" link directly onto the last entry's value string
   with a single leading space, so it crowds the wrapped text with no
   visual separation. Fix: make each entry (__date, __slot, __age-group,
   any future item_data key) its own block-level row, and drop the
   decorative " / " joiner (a bare `<span aria-hidden="true">`, already
   hidden for the last entry in a group via the block's own
   isLastCartItemDataAttr state) now that line breaks do that job. This is
   a general item_data layout fix, not FooEvents-specific — no structural
   class distinguishes a FooEvents entry from an ordinary variation
   attribute, so a multi-attribute simple product (e.g. Color/Size) now
   also stacks one-per-line instead of running inline. That's judged a
   readability improvement, not a regression: verified live against
   General Admission (single age-group attribute, unaffected) and a
   non-ticket product with only one attribute (unaffected either way). */
.wc-block-mini-cart__drawer .wc-block-components-product-details:not(:last-child),
.wp-block-woocommerce-cart .wc-block-components-product-details:not(:last-child) {
	margin-bottom: 0.25rem;
}

.wc-block-mini-cart__drawer .wc-block-components-product-details > [class*="wc-block-components-product-details__"],
.wp-block-woocommerce-cart .wc-block-components-product-details > [class*="wc-block-components-product-details__"] {
	display: block;
}

.wc-block-mini-cart__drawer .wc-block-components-product-details > [class*="wc-block-components-product-details__"]:not(:last-child),
.wp-block-woocommerce-cart .wc-block-components-product-details > [class*="wc-block-components-product-details__"]:not(:last-child) {
	margin-bottom: 0.25rem;
}

.wc-block-mini-cart__drawer .wc-block-components-product-details span[aria-hidden="true"],
.wp-block-woocommerce-cart .wc-block-components-product-details span[aria-hidden="true"] {
	display: none;
}

/* ---- FooEvents Bookings "Add more" link — made prominent per client
   feedback ("the add more feels lost in the shuffle, it needs to be more
   prominent") ----
   `.fooevents-add-more-bookings` is a stable class emitted directly by the
   plugin's own PHP (class-fooevents-bookings.php, ~line 6462) — safe to
   target without guessing at surrounding markup. Styled as the same quiet
   outline-pill secondary-button treatment already used sitewide for
   secondary actions (compare .wc-block-mini-cart__footer-cart.is-style-outline
   above, and the cart/checkout "Apply coupon" button in
   woocommerce-cart-checkout.css): resting hairline pill, fills solid on
   hover/focus. `display: flex` (a block-level box) drops it onto its own
   line below the Slot value/time without disturbing that value's own
   inline layout, and `width: max-content` keeps the pill shrink-to-fit
   instead of stretching full width. */
.fooevents-add-more-bookings {
	display: flex;
	align-items: center;
	width: max-content;
	margin-top: 0.4rem;
	/* Sized down (2026-07-22, client feedback: "too big") relative to its
	   own first pass — still comfortably tappable, but reads as a small
	   secondary chip next to the Slot value rather than a full button. */
	padding: 0.2rem 0.65rem;
	border-radius: 9999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--motion-med) var(--ease),
		color var(--motion-med) var(--ease);
}

.fooevents-add-more-bookings:not(:focus) {
	/* Matched to "View my cart"'s own 1px outline (.wc-block-mini-cart__footer-cart.is-style-outline,
	   above) — was 1.5px, client asked for consistent border weight across
	   the drawer's secondary actions. */
	box-shadow: inset 0 0 0 1px var(--line);
}

.fooevents-add-more-bookings:hover,
.fooevents-add-more-bookings:active,
.fooevents-add-more-bookings:focus {
	background-color: var(--accent);
	color: var(--accent-ink);
}

.fooevents-add-more-bookings:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* ---- Empty-cart state ---- */
.wc-block-mini-cart__empty-cart-wrapper {
	color: var(--ink);
}

.wc-block-mini-cart__shopping-button a {
	border-radius: 9999px;
	transition: background-color var(--motion-med) var(--ease), color var(--motion-med) var(--ease);
}

.wc-block-mini-cart__shopping-button a:hover,
.wc-block-mini-cart__shopping-button a:focus {
	background-color: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

.wc-block-mini-cart__shopping-button a:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}