/**
 * PhotoCab cart page.
 *
 * Numbers are transcribed from the prototype
 * ("PhotoCab Cart.dc.html", the styles() block), which is the single
 * source of truth for the layout:
 *
 *   grid          minmax(0, 1fr) 380px, gap 56px, items start
 *   item row      24px 0, 1px dashed separator, 24px column gap
 *   thumbnail     96px, 1px border, 8px radius
 *   quantity      48px tall stepper on a white field
 *   summary       white card, 1px border, 12px radius, 24px padding, sticky
 *
 * The markup is NOT ours: the table comes from Blocksy's
 * woocommerce/cart/cart.php override and the totals from WooCommerce's
 * cart/cart-totals.php. Both are left untouched, so everything here is
 * a re-skin of the classes those templates already print.
 *
 * Pairs with photocab_cart_remove_icon() in inc/woocommerce.php, which
 * swaps the remove-item glyph for the design's outline bin in the cart
 * table and the mini cart.
 */

/* --------------------------------------------------------- Page title -- */

.woocommerce-cart .page-title {
	font-size: var(--pc-fs-h1-pdp);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-heading);
	letter-spacing: var(--pc-ls-heading);
}

/* ------------------------------------------------------------- Layout -- */

/*
 * Blocksy already grids this wrapper (2fr / 1fr from 1000px up). Only the
 * track sizes and the gutter change: the prototype pins the summary to a
 * fixed 380px so the item column keeps its rhythm on wide screens.
 */
@media (min-width: 1000px) {
	.woocommerce-cart .ct-woocommerce-cart-form {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--pc-space-14);
		align-items: start;
	}
}

@media (max-width: 999.98px) {
	.woocommerce-cart .ct-woocommerce-cart-form {
		gap: var(--pc-space-8);
	}
}

/* --------------------------------------------------------- Items table -- */

.woocommerce-cart .woocommerce-cart-form__contents {
	/*
	 * 12px per side adds up to the prototype's 24px column gap; Blocksy's
	 * own `tr > *:first-child / :last-child` rules strip the outer edges,
	 * so the table still starts and ends flush with the column.
	 */
	--theme-table-padding: var(--pc-space-6) var(--pc-space-3);
	margin-bottom: 0;
}

/*
 * Blocksy paints the head with a 2px solid rule through
 * `--theme-table-border-width`; the design wants a 1px hairline, so the
 * variable is zeroed and the rule drawn here instead of fought over.
 *
 * The wrapper class is in the selector for weight, not for scope. Blocksy
 * centres two of these columns with
 *
 *   [class*=ct-woocommerce] .shop_table :is(.product-quantity, .product-subtotal)
 *
 * which is three classes; a two-class selector loses to it no matter how
 * late this file loads. The same applies to every rule below that fights
 * an alignment or a width.
 */
.woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form__contents thead th {
	--theme-table-border-width: 0;
	padding-top: 0;
	padding-bottom: var(--pc-space-4);
	border-bottom: 1px solid var(--pc-border);
	font-size: var(--pc-fs-label);
	font-weight: var(--pc-fw-regular);
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-ink-600);
	text-align: start;
	vertical-align: bottom;
}

/* Column widths, in the order the template prints the cells. */
.woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form__contents td.product-thumbnail {
	width: 96px;
}

.woocommerce-cart .woocommerce-cart-form__contents :is(th, td).product-quantity {
	width: 140px;
}

.woocommerce-cart .woocommerce-cart-form__contents :is(th, td).product-subtotal {
	width: 150px;
}

.woocommerce-cart .woocommerce-cart-form__contents :is(th, td).product-remove {
	width: 44px;
}

/*
 * Blocksy ends the remove column; that has to stay on the body cell only,
 * or it would drag the head label away from the left edge.
 */
.woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form__contents td.product-remove {
	text-align: end;
}

.woocommerce-cart .woocommerce-cart-form__contents td {
	vertical-align: middle;
}

/* ---- Thumbnail ---- */

/*
 * The prototype insets the photo by 6px inside the frame and fits it with
 * `contain`, so packshots are never cropped. Blocksy's container is
 * `width: 100%` with an `object-fit: cover` image, so the inset needs
 * border-box sizing to keep the frame at the 96px the column reserves,
 * and the fit is switched through the variable Blocksy already reads.
 */
.woocommerce-cart .product-thumbnail .ct-media-container {
	--theme-object-fit: contain;
	box-sizing: border-box;
	padding: 6px;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--pc-surface);
	overflow: hidden;
}

/* Blocksy rounds the image itself by 2px; the frame owns the radius now. */
.woocommerce-cart .product-thumbnail .ct-media-container img {
	border-radius: 0;
	transition: transform var(--pc-dur-base) var(--pc-ease);
}

/*
 * Hovering the cell rather than the link keeps the effect for items whose
 * product is no longer visible, where the template drops the <a>.
 */
.woocommerce-cart td.product-thumbnail:hover .ct-media-container img {
	transform: scale(1.06);
}

/* ---- Name and unit price ---- */

.woocommerce-cart td.product-name {
	font-size: var(--pc-fs-card);
	line-height: var(--pc-lh-card);
}

.woocommerce-cart td.product-name > a {
	font-weight: var(--pc-fw-medium);
	color: var(--pc-ink-900);
	text-wrap: pretty;
	transition: color var(--pc-dur-fast) ease;
}

.woocommerce-cart td.product-name > a:hover {
	color: var(--pc-accent-500);
}

/* Variation lines that wc_get_formatted_cart_item_data() prints. */
.woocommerce-cart td.product-name .variation {
	margin: var(--pc-space-2) 0 0;
	font-size: var(--pc-fs-old);
	line-height: var(--pc-lh-card);
	color: var(--pc-ink-600);
}

.woocommerce-cart td.product-name .price {
	margin: var(--pc-space-2) 0 0;
	font-size: var(--pc-fs-old);
	color: var(--pc-ink-600);
}

/* ---- Quantity ---- */

/*
 * The stepper's skin lives in assets/css/product-page.css, which styles
 * `.quantity` globally. Only the cart's own size is set here - Blocksy
 * ships 40px in `.shop_table`, the prototype draws 48px.
 */
.woocommerce-cart .shop_table .quantity {
	--quantity-height: 48px;
	--quantity-width: 112px;
	font-size: var(--pc-fs-price);
}

/*
 * The stepper is a fixed-width control, so the cell has to start it rather
 * than centre it - otherwise it drifts inside the 140px column.
 */
.woocommerce-cart .ct-woocommerce-cart-form .woocommerce-cart-form__contents td.product-quantity {
	text-align: start;
}

/* ---- Subtotal ---- */

.woocommerce-cart .ct-woocommerce-cart-form td.product-subtotal {
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-label);
	color: var(--pc-ink-900);
	text-align: end;
}

/* --------------------------------------------------- Mobile item rows -- */

/*
 * Under 1000px Blocksy hides the quantity / subtotal / remove cells and
 * moves the controls into `.product-mobile-actions`, a flex row printed
 * inside the name cell as "[stepper] x [unit price] ... [remove]".
 *
 * That is a different arrangement from the prototype, which keeps the row
 * subtotal on the second line. Changing it would mean overriding the cart
 * template, so the row is only re-spaced to the design's rhythm here.
 */
.woocommerce-cart .shop_table .product-mobile-actions {
	gap: var(--pc-space-3);
	margin-top: var(--pc-space-4);
	font-size: var(--pc-fs-card);
	color: var(--pc-ink-600);
}

.woocommerce-cart .shop_table .product-mobile-actions .quantity {
	--quantity-height: 44px;
	--quantity-width: 120px;
}

.woocommerce-cart .ct-product-multiply-symbol {
	color: var(--pc-ink-400);
}

/* ------------------------------------------------------ Remove button -- */

/*
 * The icon carries its own 18x18 attributes and does not use Blocksy's
 * `.ct-icon` class, so nothing here needs to restate the size.
 *
 * Blocksy tints its own glyph red on hover with
 * `[class*="ct-woocommerce"] .shop_table .remove:hover svg { fill: … }`.
 * That selector matches any svg, so it would flood this outline icon into
 * a solid shape - `fill` from a stylesheet beats the fill="none" presentation
 * attribute. Neutralised here, with the hover colour moved to the stroke.
 */
body [class*="ct-woocommerce"] .shop_table .remove:hover .pc-cart-remove-icon {
	fill: none;
}

.remove .pc-cart-remove-icon {
	color: var(--pc-ink-400);
	transition: color var(--pc-dur-base) ease;
}

.remove:hover .pc-cart-remove-icon {
	color: var(--pc-ink-900);
}

/* ------------------------------------------------------- Table actions -- */

/*
 * The coupon field and "Update cart" button only render when coupons are
 * enabled or auto-update is off. The prototype has no such row, so these
 * rules exist to keep it presentable rather than to place it.
 */
.woocommerce-cart .woocommerce-cart-form__contents .actions {
	padding-top: var(--pc-space-6);
	padding-bottom: 0;
}

.woocommerce-cart .woocommerce-cart-form__contents .coupon input {
	border-radius: var(--pc-radius-ctl);
	font-size: var(--pc-fs-btn);
}

.woocommerce-cart .woocommerce-cart-form__contents .actions .button {
	--theme-button-min-height: 44px;
	--theme-button-border-radius: var(--pc-radius-ctl);
	font-size: var(--pc-fs-btn);
}

/* --------------------------------------------------------- Cart totals -- */

/*
 * Blocksy drives this card from the Customizer through
 * `--cart-totals-padding / -border / -border-radius`. Those variables are
 * printed inline with a two-class selector, so the three-class selectors
 * below win regardless of source order and the card no longer depends on
 * Customizer values matching the design.
 */
.woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
	padding: var(--pc-space-6);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
	background-color: var(--pc-surface);
	top: calc(var(--pc-space-6) + var(--admin-bar, 0px) + var(--header-sticky-height, 0px) * var(--sticky-shrink, 100) / 100);
}

/*
 * The heading and the amounts inherit their colour from the Blocksy
 * palette (`--theme-headings-color` on h2, `--theme-text-color` on the
 * cells), while the prototype paints both with --pc-ink-900. Those are
 * only the same colour if the Customizer palette happens to be aligned -
 * see the TODO at the bottom of assets/css/tokens.css - so both are
 * pinned to the token here. The labels stay on --pc-ink-600.
 */
.woocommerce-cart .ct-woocommerce-cart-form .cart_totals h2 {
	margin: 0 0 var(--pc-space-5);
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	line-height: var(--pc-lh-heading);
	letter-spacing: var(--pc-ls-heading);
}

.woocommerce-cart .ct-woocommerce-cart-form .cart_totals table {
	margin-bottom: 0;
	--theme-table-padding: 18px 0;
}

.woocommerce-cart .ct-woocommerce-cart-form .cart_totals th {
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-regular);
	color: var(--pc-ink-600);
	text-align: start;
	vertical-align: baseline;
}

.woocommerce-cart .ct-woocommerce-cart-form .cart_totals td {
	color: var(--pc-ink-900);
	font-size: var(--pc-fs-price);
	font-weight: var(--pc-fw-medium);
	text-align: end;
	vertical-align: baseline;
}

/*
 * Blocksy already gives every row a dashed bottom rule and clears it on
 * the last one, which leaves the subtotal block open at the top.
 */
.woocommerce-cart .cart_totals .cart-subtotal :is(th, td) {
	border-top: 1px dashed var(--pc-border);
}

/* The grand total is a heading, not another line item. */
.woocommerce-cart .cart_totals .order-total th {
	padding-bottom: 0;
	font-size: var(--pc-fs-label);
	font-weight: var(--pc-fw-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * wc_cart_totals_order_total_html() wraps the amount in <strong>, so the
 * weight has to be restated on the child - the cell's own value never
 * reaches the text.
 */
.woocommerce-cart .cart_totals .order-total td {
	padding-bottom: 0;
}

.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total td strong {
	font-size: var(--pc-fs-h3);
	font-weight: var(--pc-fw-medium);
	letter-spacing: var(--pc-ls-heading);
}

/* ---- Checkout button ---- */

.woocommerce-cart .ct-woocommerce-cart-form .cart_totals .wc-proceed-to-checkout {
	margin-top: var(--pc-space-5);
}

/*
 * Blocksy's buttons are entirely variable-driven, so the design is
 * expressed as variables too - that keeps the hover state, the focus
 * ring and the disabled state coherent with the rest of the theme.
 * The lift and glow are switched off: the prototype only transitions
 * the background.
 */
.woocommerce-cart .cart_totals .checkout-button {
	--theme-button-min-height: 48px;
	--theme-button-border-radius: var(--pc-radius-ctl);
	--theme-button-background-initial-color: var(--pc-ink-900);
	--theme-button-background-hover-color: var(--pc-ink-700);
	--theme-button-text-initial-color: var(--pc-surface);
	--theme-button-text-hover-color: var(--pc-surface);
	--theme-button-transform: none;
	--theme-button-shadow: none;
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
}

/* --------------------------------------------------------- Empty cart -- */

/*
 * WooCommerce prints the notice and the "Return to shop" button as two
 * siblings with no wrapper of their own, so the card is drawn on the
 * shortcode wrapper. Without :has() support the two simply stay centred,
 * which is why the type rules sit on the elements themselves.
 */
.woocommerce-cart .woocommerce:has(> .cart-empty) {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pc-space-4);
	padding: var(--pc-space-14) var(--pc-space-8);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-card);
	background: var(--pc-surface);
}

.woocommerce-cart .cart-empty {
	/*margin: 0;*/
	/*!*max-width: 420px;*!*/
	/*font-size: var(--pc-fs-h3);*/
	/*font-weight: var(--pc-fw-medium);*/
	/*line-height: var(--pc-lh-heading);*/
	/*letter-spacing: var(--pc-ls-heading);*/
	/*color: var(--pc-ink-900);*/
	/*text-align: center;*/
}

.woocommerce-cart .return-to-shop {
	/*margin: 0;*/
	text-align: center;
}

.wc-empty-cart-message + .return-to-shop {
	/*margin-block-start: var(--pc-space-6);*/
}

.woocommerce-cart .return-to-shop .button {
	--theme-button-min-height: 48px;
	--theme-button-border-radius: var(--pc-radius-ctl);
	--theme-button-background-initial-color: var(--pc-ink-900);
	--theme-button-background-hover-color: var(--pc-ink-700);
	--theme-button-text-initial-color: var(--pc-surface);
	--theme-button-text-hover-color: var(--pc-surface);
	--theme-button-transform: none;
	--theme-button-shadow: none;
	padding-inline: var(--pc-space-6);
	font-size: var(--pc-fs-btn);
	font-weight: var(--pc-fw-medium);
}

/* ----------------------------------------------------------- Notices -- */

/*
 * Not cart-only markup - WooCommerce prints this notice after add-to-cart
 * and coupon actions - but the cart page is where it is seen, and the
 * square corners read as foreign next to the rounded cards.
 */
.woocommerce-message {
	border-radius: var(--pc-radius-ctl);
}

/* ----------------------------------------------------------- Mini cart -- */

/*
 * The same frame as the cart page's thumbnails, on the panel that drops
 * out of the header. Blocksy prints the image through blocksy_media() with
 * `tag_name => 'a'`, so the link itself carries `.ct-media-container` and
 * is a direct child of the item (blocksy/woocommerce/cart/mini-cart.php).
 *
 * Only the frame is restated, not a size: the column here is a percentage
 * of the panel width rather than the cart's fixed 96px.
 *
 * Not scoped to a page - the mini cart rides in the header everywhere.
 */
.woocommerce-mini-cart-item > .ct-media-container {
	--theme-object-fit: contain;
	box-sizing: border-box;
	padding: 6px;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-ctl);
	background: var(--theme-palette-color-7);
	overflow: hidden;
}

.woocommerce-mini-cart-item > .ct-media-container img {
	border-radius: 0;
	transition: transform var(--pc-dur-base) var(--pc-ease);
}

.woocommerce-mini-cart-item > .ct-media-container:hover img {
	transform: scale(1.06);
}

/* ---- Mini cart buttons ---- */

/*
 * The panel ends with two buttons - "Переглянути кошик" and "Оформити
 * замовлення" - and WooCommerce prints both as a plain `.button`
 * (wc-template-functions.php, woocommerce_widget_shopping_cart_button_view_cart()
 * and ..._proceed_to_checkout()), so Blocksy paints them identically. Two
 * solid buttons side by side read as two primary actions and neither leads.
 *
 * Checkout keeps the solid fill; the cart link drops to the outline the
 * prototype gives it in the add-to-cart popup ("PhotoCab Add To Cart Popup",
 * btnGhost), which is the same pair of buttons in the same order.
 *
 * Only the checkout button carries a class of its own, hence the :not().
 * Blocksy drives its buttons from --theme-button-* custom properties; those
 * are set as well as the plain properties so the hover state, which is
 * painted from the variables alone, follows.
 */
body .woocommerce-mini-cart__buttons a.button:not(.checkout) {
	--theme-button-background-initial-color: var(--pc-surface);
	--theme-button-background-hover-color: var(--pc-surface-2);
	--theme-button-text-initial-color: var(--pc-ink-900);
	--theme-button-text-hover-color: var(--pc-ink-900);
	--theme-button-border: 1px solid var(--pc-border);
	background-color: var(--pc-surface);
	border: 1px solid var(--pc-border);
	color: var(--pc-ink-900);
	transition:
		background-color var(--pc-dur-fast) ease,
		border-color var(--pc-dur-fast) ease,
		color var(--pc-dur-fast) ease;
}

body .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
	--theme-button-border: 1px solid var(--pc-ink-900);
	background-color: var(--pc-surface-2);
	border-color: var(--pc-ink-900);
	color: var(--pc-ink-900);
}

/* --------------------------------------------------------- Reduced motion -- */

@media (prefers-reduced-motion: reduce) {
	.remove .pc-cart-remove-icon,
	.woocommerce-cart td.product-name > a,
	.woocommerce-cart .product-thumbnail .ct-media-container img,
	.woocommerce-mini-cart-item > .ct-media-container img,
	body .woocommerce-mini-cart__buttons a.button:not(.checkout) {
		transition: none;
	}

	.woocommerce-cart td.product-thumbnail:hover .ct-media-container img,
	.woocommerce-mini-cart-item > .ct-media-container:hover img {
		transform: none;
	}
}