/* ==============================================================
   Cart page — ported from the live Shopify theme (assets/ww-custom.css
   via the waifuworld-cart-styling reference package). Shopify's cart
   uses the classic shortcode cart's class names; this site renders
   WooCommerce's Cart BLOCK instead, so every selector below is remapped
   to the real .wc-block-cart-* / .wc-block-components-* markup — see
   this file's own comments for the mapping, not the reference's table.

   Scoped to is_cart() only (not checkout/account) — enqueued
   alongside ww-shop.css, whose --shop-* tokens this reuses.

   NOT carried over from the reference: the vendor/type spec-strip
   pills under each line item title. That data (manufacturer + product
   type) exists on this site as real attributes, but rendering it
   inside the Cart block's line items needs new PHP wired into the
   Store API's cart-item response — a data/markup change, not a
   styling port. Left for a follow-up if wanted.
   ============================================================== */

/* --------------------------------------------------------------
   Page title ("Cart") — same treatment as the collection/PDP title.
   -------------------------------------------------------------- */
body.woocommerce-cart .wp-block-post-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--shop-card-title);
}

/* --------------------------------------------------------------
   Line item — product image
   -------------------------------------------------------------- */
.wc-block-cart-item__image a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
}

/* --------------------------------------------------------------
   Line item — product title. Matches the product card title
   treatment one size up (15px vs 14px), but hovers to magenta
   #c71585, not the red card titles use — reproduced as found in
   the reference rather than "corrected" for consistency.
   -------------------------------------------------------------- */
.wc-block-cart-item__product .wc-block-components-product-name {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	font-size: 15px;
	color: var(--shop-card-title);
}

.wc-block-cart-item__product .wc-block-components-product-name:hover {
	color: #c71585;
}

/* Short description line under the title. */
.wc-block-cart-item__product .wc-block-components-product-metadata__description p {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #666;
	margin-top: 4px;
}

/* --------------------------------------------------------------
   Line item — total price (right column). Montserrat 900 italic
   red, same as product card prices. The per-unit price shown under
   the title is deliberately left unstyled, matching the reference
   (only the line total gets this treatment there).
   -------------------------------------------------------------- */
.wc-block-cart-item__total .wc-block-components-product-price__value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	color: var(--shop-price);
}

/* --------------------------------------------------------------
   Quantity stepper — bordered pill; +/- fill with the pink gradient
   on hover, but never when disabled (min/max reached) — the
   :not([disabled]) guard is load-bearing, without it a maxed-out
   button still lights up and looks clickable.
   -------------------------------------------------------------- */
.wc-block-components-quantity-selector {
	border: 1.5px solid var(--shop-border-control);
	border-radius: 8px;
	overflow: hidden;
}

.wc-block-components-quantity-selector__button {
	transition: background 0.15s ease, color 0.15s ease;
}

.wc-block-components-quantity-selector__button:hover:not([disabled]) {
	background: var(--shop-accent-gradient);
	color: #fff;
}

/* --------------------------------------------------------------
   Table header row ("Product" / "Total")
   -------------------------------------------------------------- */
.wc-block-cart-items__header span {
	font-size: 12.5px;
	color: #555;
	font-weight: 600;
}

/* --------------------------------------------------------------
   Cart totals — final row (subtotal/shipping stay default; only
   the grand total gets the bold red treatment).
   -------------------------------------------------------------- */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-style: italic;
	color: #1a1535;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 900;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--shop-price);
}

/* --------------------------------------------------------------
   Checkout button — flat pink gradient with a soft pink shadow.
   The gradient itself already comes from ww-shop-account.css
   (--shop-accent-gradient, shared with checkout/account buttons);
   this adds the shape/shadow/disabled treatment the reference has.
   -------------------------------------------------------------- */
.wc-block-cart__submit-button {
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(255, 45, 120, 0.28);
	transition: opacity 0.15s ease;
}

.wc-block-cart__submit-button:hover:not([disabled]) {
	opacity: 0.92;
}

.wc-block-cart__submit-button[disabled] {
	background: #d6d6d6;
	color: #777;
	box-shadow: none;
}

/* --------------------------------------------------------------
   Trust row under the checkout button (markup injected by
   ww-shop-cart.js — the Cart block has no server-side hook to add
   static content after its own submit button). Two items only
   (free shipping, discreet packaging) — the PDP trust bar has a
   third ("Free US returns") that this deliberately omits, matching
   the reference.
   -------------------------------------------------------------- */
.ww-cart-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--shop-border);
}

.ww-cart-trust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Inter', sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	color: #333;
}

.ww-cart-trust .svg-wrapper svg {
	width: 14px;
	height: 14px;
	color: #c71585;
}