/* Digital Hub — cart & checkout.

   Both pages ship via the classic [woocommerce_cart]/[woocommerce_checkout]
   shortcodes, not WooCommerce Blocks — see CP39 in BUILD_LOG.md: the block
   version's client-side cart store never resolved in this environment
   (reproduced on a clean unmodified Storefront with no child theme at all),
   so real customers could not see cart contents or check out. Switched
   wp_posts for Cart (ID 8) / Checkout (ID 9) to the shortcodes, which render
   fully server-side with no React/Store API dependency.

   CART (CP40, 2026-08-03): woocommerce/cart/cart.php now overrides the
   default table markup with donor's real structure, captured live from
   plati.market's /cart/ with an item actually in cart (04_cart.html's own
   snapshot only had the cart empty, so the real item-row markup wasn't in
   it — see BUILD_LOG.md CP40 for how it was fetched). Styles below for the
   .dh-cart-* classes target that new markup.

   CHECKOUT: donor's own "Перейти к оплате" doesn't lead to a plati.market
   checkout page at all — it redirects off-domain to digiseller.me (a
   separate payment processor plati.market is themselves a storefront/
   franchise front-end for, confirmed by following the live redirect). There
   is no donor checkout UI to clone. Checkout below stays our own classic
   WooCommerce markup, restyled in the same visual language (blue buy button,
   8px field radius) rather than a 1:1 donor rebuild. */

/* ---------- Cart: header row ("Корзина" + count + "Удалить все") ---------- */

.dh-cart-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1rem;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.dh-cart-heading {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.dh-cart-title {
	font-size: 28px;
	font-weight: 700;
	margin: 0;
}

.dh-cart-count {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text-secondary);
	white-space: nowrap;
}

.dh-cart-delete-all {
	font-size: 14px;
	font-weight: 500;
	color: #dc3545;
	/* Same Storefront `.hentry .entry-content a{text-decoration:underline}`
	   override needed as .dh-cart-empty-button — see that rule's comment. */
	text-decoration: none !important;
}

.dh-cart-delete-all:hover {
	color: #b0212f;
}

/* ---------- Cart: two-column layout (items + sticky order summary) ---------- */

.dh-cart-layout {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

.dh-cart-items {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* ---------- Cart: item row ---------- */

.dh-cart-item {
	background-color: var(--color-surface);
	border-radius: 16px;
	position: relative;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dh-cart-item .divider {
	height: 1px;
	background-color: #e2e4e8;
	border: none;
	margin: 0;
}

.dh-cart-item-media {
	position: relative;
	display: flex;
}

.dh-cart-item-image {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 12px;
	overflow: hidden;
	display: block;
}

.dh-cart-item-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

/* Real TI Wishlist button (see cart.php) — same circular-overlay treatment
   as the catalog card's favorite icon, see product-card.css. */
.dh-cart-item-favorite {
	position: absolute;
	top: 0;
	right: 0;
}

.dh-cart-item-favorite .tinvwl_add_to_wishlist_button {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-surface);
	box-shadow: 0 1px 3px rgba(11, 13, 18, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-secondary);
}

.dh-cart-item-favorite .tinvwl_add_to_wishlist_button:hover {
	color: var(--color-accent);
}

.dh-cart-item-favorite .tinvwl_add_to_wishlist-text,
.dh-cart-item-favorite .tinvwl-tooltip {
	display: none;
}

.dh-cart-item-body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dh-cart-item-info {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.dh-cart-item-title {
	font-size: 15px;
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dh-cart-item-title:hover {
	color: var(--color-brand);
}

.dh-cart-item-meta {
	font-size: 13px;
	color: var(--color-text-secondary);
}

/* Real wc_get_formatted_cart_item_data() output (donor's "Выбор редакции" /
   product variant line) — a <dl class="variation"> of dt/dd pairs, not a
   plain paragraph. */
.dh-cart-item-meta .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
}

.dh-cart-item-meta .variation dt,
.dh-cart-item-meta .variation dd {
	margin: 0;
	display: inline;
	font-size: 13px;
}

.dh-cart-item-meta .variation dt {
	color: var(--color-text-secondary);
}

.dh-cart-item-meta .variation dd {
	color: var(--color-text);
}

.dh-cart-item-meta .variation dd p {
	display: inline;
	margin: 0;
}

.dh-cart-item-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.dh-cart-item-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dh-cart-item-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	color: var(--color-text-secondary);
	background: transparent;
}

.dh-cart-item-remove:hover {
	color: #dc3545;
	background-color: rgba(220, 53, 69, 0.08);
}

/* Real woocommerce_quantity_input() markup (see cart.php) restyled as
   donor's minus/input/plus stepper instead of a bare number field — the
   minus/plus buttons drive the same real input via digitalhubCartQtyStep()
   in functions.php, not a separate fake control. */
.dh-cart-item-qty {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.dh-cart-item-qty .quantity {
	display: flex;
	align-items: center;
}

.dh-cart-qty-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: none;
	background-color: var(--color-bg);
	color: var(--color-text-secondary);
	cursor: pointer;
	flex-shrink: 0;
}

.dh-cart-qty-btn svg,
.dh-cart-item-remove svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.dh-cart-qty-btn:hover {
	color: var(--color-brand);
}

.dh-cart-item-qty .qty {
	width: 40px;
	text-align: center;
	border: none;
	border-radius: 8px;
	background-color: var(--color-bg);
	font-weight: 700;
	color: var(--color-text);
	padding: 0.375rem 0;
	-moz-appearance: textfield;
}

.dh-cart-item-qty .qty::-webkit-inner-spin-button,
.dh-cart-item-qty .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dh-cart-item-price {
	font-size: 16px;
	font-weight: 700;
	color: var(--color-text);
	white-space: nowrap;
}

.dh-cart-hidden-actions {
	display: flex;
	justify-content: flex-end;
}

.dh-cart-update-trigger {
	font-size: 13px;
	color: var(--color-text-secondary);
	background: none;
	border: none;
	padding: 0.5rem 0;
	cursor: pointer;
}

.dh-cart-update-trigger:hover {
	color: var(--color-brand);
}

/* ---------- Cart: empty state (donor's real #items-not-found markup) ---------- */

.dh-cart-empty {
	background-color: var(--color-surface);
	border-radius: 16px;
	min-height: 344px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2rem;
	text-align: center;
}

.dh-cart-empty svg {
	color: #d7dae0;
}

.dh-cart-empty-title {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}

.dh-cart-empty-text {
	color: var(--color-text-secondary);
	margin: 0;
}

.dh-cart-empty-button {
	background-color: var(--color-brand);
	color: #ffffff;
	border-radius: 8px;
	font-weight: 600;
	padding: 0.75rem 1.5rem;
	/* Storefront's `.hentry .entry-content a{text-decoration:underline}` (the
	   cart page is a normal Page, wrapped in that container) outranks a
	   single-class selector on specificity alone — !important to match. */
	text-decoration: none !important;
	margin-top: 0.5rem;
}

.dh-cart-empty-button:hover {
	background-color: var(--color-brand-hover);
	color: #ffffff;
}

/* ---------- Cart: sticky "Ваш заказ" sidebar (desktop) ---------- */

/* .cart_totals is also present as a plain marker class (see cart.php) so
   WooCommerce's own classic AJAX cart script (assets/js/frontend/cart.js,
   which does `$('.cart_totals').replaceWith(...)` after every quantity/
   coupon update) finds and refreshes this sidebar — without that marker
   the total here would go stale after an AJAX-driven update until a full
   reload. Storefront/WooCommerce core both ship real `.cart_totals{float;
   width;margin;clear}` rules for their own default table layout, which the
   extra specificity below (two classes) overrides for our layout instead. */
.dh-cart-summary.cart_totals {
	float: none;
	clear: none;
	margin: 0;
}

.dh-cart-summary {
	flex: 0 0 320px;
	width: 320px;
	background-color: var(--color-surface);
	border-radius: 20px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: sticky;
	top: 72px;
}

.dh-cart-summary-heading {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dh-cart-summary-heading h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.dh-cart-summary-count {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text);
	background-color: var(--color-bg);
	border-radius: 20px;
	padding: 0.2rem 0.6rem;
}

/* Applied-coupon row (CP46: real promo code, see digitalhub_promo_field()
   in functions.php) — shown between the item list and "Итого" so the
   total's discount is visible/explained, not a silent mismatch. */
.dh-cart-summary-coupon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.dh-cart-summary-coupon-label {
	color: var(--color-text-secondary);
	text-transform: capitalize;
}

.dh-cart-summary-coupon-amount {
	color: #4caf7d;
	font-weight: 600;
	white-space: nowrap;
}

.dh-cart-summary-coupon-amount .woocommerce-remove-coupon {
	margin-left: 0.4rem;
	color: var(--color-text-secondary);
	font-weight: 400;
	text-decoration: none !important;
}

.dh-cart-summary-coupon-amount .woocommerce-remove-coupon:hover {
	color: #dc3545;
}

.dh-cart-summary-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dh-cart-summary-total h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}

.dh-cart-summary-total strong {
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text);
}

.dh-cart-summary-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dh-cart-checkout-button {
	display: block;
	text-align: center;
	background-color: var(--color-brand);
	color: #ffffff !important;
	border-radius: 8px;
	font-weight: 600;
	padding: 0.9rem 1rem;
	text-decoration: none !important;
}

.dh-cart-checkout-button:hover {
	background-color: var(--color-brand-hover);
}

.dh-cart-summary-note {
	font-size: 12px;
	color: var(--color-text-secondary);
	margin: 0;
	text-align: center;
}

/* ---------- Cart: mobile bottom bar (donor's #bottom_bar, <1200px only —
   desktop sidebar above already shows the same total + button) ---------- */

.dh-cart-bottombar.cart_totals {
	float: none;
	width: auto;
	clear: none;
	margin: 0;
}

.dh-cart-bottombar {
	display: none;
}

@media (max-width: 1199px) {
	.dh-cart-summary {
		display: none;
	}

	.dh-cart-layout {
		flex-direction: column;
	}

	.dh-cart-bottombar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		background-color: var(--color-surface);
		box-shadow: 0 -2px 12px rgba(11, 13, 18, 0.1);
		padding: 0.75rem 1rem;
	}

	.dh-cart-bottombar-total {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.dh-cart-bottombar-total h2 {
		font-size: 16px;
		font-weight: 700;
		margin: 0;
	}

	.dh-cart-bottombar-total strong {
		font-size: 16px;
		font-weight: 700;
	}

	.dh-cart-bottombar .dh-cart-checkout-button {
		flex: 1 1 auto;
		padding: 0.75rem 1rem;
	}

	/* Room for the fixed bottom bar so it doesn't sit on top of whatever
	   comes next — cross-sells if there are any, otherwise the footer
	   directly (confirmed by scrolling to the real bottom: without this the
	   bar covered the footer's last row). .dh-cart-cross-sells is always the
	   last element before the footer, so pad there rather than only on
	   .dh-cart-layout above it. */
	/* The fixed bar is glued to the viewport bottom regardless of scroll
	   position, so at true max scroll it always sits on top of whatever the
	   LAST 73px of the document is — padding earlier in the page (e.g. on
	   .dh-cart-cross-sells) just adds more scrollable canvas before that
	   point, it doesn't stop the very end of the page from being covered.
	   Confirmed by measuring both rects at true max scroll: the fix has to
	   go on the footer itself (the actual last element), not before it.
	   .woocommerce-cart is a real WordPress body class WC adds automatically
	   on this page, so this doesn't touch the footer anywhere else. */
	.woocommerce-cart .dh-footer {
		padding-bottom: 4.5rem;
	}
}

@media (min-width: 480px) {
	.dh-cart-item {
		flex-direction: row;
	}

	.dh-cart-item-media {
		flex-shrink: 0;
	}

	.dh-cart-item-body {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ---------- Checkout (no donor equivalent — see file header) ---------- */

.woocommerce-checkout-review-order-table {
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	border: none;
}

.woocommerce-checkout-review-order-table th {
	font-family: var(--font-family);
	font-weight: 700;
	color: var(--color-text);
}

.woocommerce-checkout #order_review {
	background-color: var(--color-surface);
	border-radius: var(--radius-card);
	padding: 1.25rem;
}

.woocommerce-checkout #order_review h3 {
	font-family: var(--font-family);
	font-weight: 700;
}

.woocommerce-checkout #place_order,
.woocommerce-checkout .checkout_coupon .button {
	background-color: var(--color-brand) !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .checkout_coupon .button:hover {
	background-color: var(--color-brand-hover) !important;
	color: #ffffff !important;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select {
	border-radius: 8px;
	border-color: #e2e4e8;
}

.woocommerce-checkout .woocommerce-info {
	background-color: var(--color-bg);
	border-top-color: var(--color-brand);
	border-radius: 8px;
}

.woocommerce-checkout .woocommerce-info::before {
	color: var(--color-brand);
}

/* Order-pay page (/checkout/order-pay/) — separate template from [woocommerce_checkout],
   uses table.shop_table (not .woocommerce-checkout-review-order-table) and its own
   #payment payment-methods list, which had zero styling before Robokassa became the
   first real gateway (bacs/cheque/cod were never customer-visible in practice). */
.woocommerce-order-pay #order_review table.shop_table {
	border: none;
}

.woocommerce-order-pay #order_review table.shop_table th {
	font-family: var(--font-family);
	font-weight: 700;
	color: var(--color-text);
}

#payment ul.payment_methods {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

#payment ul.payment_methods li.wc_payment_method {
	background-color: var(--color-bg);
	border: 1px solid #e2e4e8;
	border-radius: 8px;
	padding: 0.875rem 1rem;
}

#payment ul.payment_methods li.wc_payment_method input.input-radio {
	accent-color: var(--color-brand);
	margin-right: 0.5rem;
	vertical-align: middle;
}

#payment ul.payment_methods li.wc_payment_method label {
	font-family: var(--font-family);
	font-weight: 600;
	color: var(--color-text);
	cursor: pointer;
	vertical-align: middle;
}

#payment .payment_box {
	font-family: var(--font-family);
	color: var(--color-text-secondary);
	font-size: 0.875rem;
	margin: 0.5rem 0 0;
	padding: 0;
}

#payment .payment_box p {
	margin: 0;
}

.woocommerce-privacy-policy-text,
.woocommerce-privacy-policy-text p {
	font-family: var(--font-family);
	color: var(--color-text-secondary);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.woocommerce-privacy-policy-link {
	color: var(--color-brand);
}