/* RRQ Store UX — global styles */

/* Cart totals: align all price values to the right for a tidy layout.
 *
 * The Neotek theme sets `tbody`, `tr` { display: block } and gives `th`
 * a fixed width, so `text-align: right` on the td alone has no effect —
 * the td only spans the width of its own text. Turn each row into a flex
 * row so the label (th) sits left and the value (td) is pushed right.
 *
 * The theme's own rule is highly specific
 * (body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr),
 * so match that prefix here to win the cascade. */
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr td {
	text-align: right;
	margin-left: auto;
}

/* Total row layout:
 *   line 1: "Total" (th, left)        {amount} (strong, right)
 *   line 2: "Including RpX PPN" (left, under the "Total" label)
 *
 * .includes_tax is nested inside the td, so to put it on a full-width second
 * line aligned under the label we promote the td's children to be flex items of
 * the row with `display: contents`. The row then lays out th, strong and small
 * directly; the 100%-basis small wraps to its own left-aligned line. (Cart
 * totals here have no td::before/data-title and the td has no box styling, so
 * dropping the td box is safe — verified in the theme CSS. Wording is normalized
 * by the cart-page module's filter.) */
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total {
	flex-wrap: wrap;
}

/* Emphasise the Total row: bump the label and amount by +2px. Theme sets the
 * amount span to 1.125rem (≈18px); the label resolves to 13px.
 * Also drop the theme's 24px padding-bottom on the label so the tax note below
 * sits tight under "Total" (the row's second line). */
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total th {
	font-size: 15px;
	padding-bottom: 0;
	padding-right: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total strong,
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total .woocommerce-Price-amount {
	font-size: calc(1.125rem + 2px);
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total td {
	display: contents;
}

/* Amount stays on line 1, pushed right (re-creates the now-inert
 * `tr td { margin-left:auto }` since the td is no longer a box). */
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total strong {
	margin-left: auto;
	text-align: right;
}

/* Tax note: full-width second line, left-aligned under the "Total" label. */
body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.order-total .includes_tax {
	flex-basis: 100%;
	margin-top: 0;
	padding-left: 15px;
	text-align: left;
	font-weight: normal;
	/* Use the Elementor global text font. On the live site this var is defined
	 * (Elementor global kit loaded) and applies; where it is empty (e.g. the
	 * classic cart on local) the declaration is simply ignored and the inherited
	 * font is kept — per request, no local fallback is forced. */
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	opacity: 0.7;

	text-transform: none;
	font-size: 15px;
}

/* Space the checkout button away from the tax note. */
body.woocommerce-cart .cart-collaterals .wc-proceed-to-checkout {
	margin-top: 24px;
}

body.woocommerce-cart .cart-collaterals .cart_totals table.shop_table tr.cart-subtotal th {
	padding-right: 0;
}

/* Shop mobile filter overlay (Kitify toggle sidebar): category items in the
 * panel look like they sit on top, but clicks fall through to the product list
 * behind → a product page opens instead of filtering.
 *
 * Measured via CDP (real overlay open, 375px): the panel
 * `.kitify-toggle-sidebar__container` when `.opened` is ALREADY z-index:99999,
 * position:fixed, full-screen, pointer-events:auto, with no ancestor creating a
 * stacking context — so raising its z-index / adding !important does nothing
 * (verified). On live, `document.elementFromPoint` at a category lands on the
 * product list behind: a product element wins hit-testing in the overlap area.
 *
 * Fix independent of the exact stacking: while the overlay is open (Kitify adds
 * `body.toogle-opened`), the product list must not capture clicks. The sidebar
 * stays fully interactive. `toogle-opened` only exists while the overlay is
 * open, so the product grid returns to normal once it closes (and desktop is
 * unaffected). */
body.toogle-opened #site-content ul.products,
body.toogle-opened #site-content ul.products * {
	pointer-events: none;
}

/* Keep the sidebar panel + its contents clickable (more specific + scoped to
 * the sidebar, so it wins over the rule above). */
.kitify-toggle-sidebar.opened .kitify-toggle-sidebar__container,
.kitify-toggle-sidebar.opened .kitify-toggle-sidebar__container * {
	pointer-events: auto;
}

/* Backdrop stays clickable so tapping outside closes the sidebar. */
.kitify-toggle-sidebar.opened .kitify-toggle-sidebar__overlay {
	pointer-events: auto;
}