/* TikTok Style Checkout (TSC) in ODDAKL black, white and gold (approved cart + checkout mockups, 22 Oct 2026).

   Loaded only on the cart, checkout and account pages, after TSC's own cart.css / checkout.css / gwp.css, so a
   rule here wins over the plugin's whenever the two have the same weight. TSC marks a few of its own rules
   !important (the grey rows, the pinned capitals); those are answered below with `body` in front plus !important.
   Nothing in the plugin is edited: remove this file and TSC looks exactly as it ships.

   Two colour groups are real TSC settings (TikTok Style Checkout > Settings > Icons) and Ain can change them
   without code: the free-shipping strip, the discount badge. They are given the ODDAKL look here as defaults only;
   when a colour is saved in the settings the plugin prints it later in the page and that colour wins.
   Sections: 1 colours, 2 cart, 3 checkout (and thank-you), 4 phones. */

/* ---------------------------------------------------------------- 1. colours */
/* TSC defines its palette on each of its own wrappers, so the ODDAKL values are set on the same wrappers. */
.tsc-cart,
.tsc-checkout,
.tsc-thankyou,
.tsc-order,
.tsc-orders {
	--tsc-pink: var(--hj-ink);
	--tsc-pink-soft: var(--hj-mist);
	--tsc-text: var(--hj-ink);
	--tsc-text-muted: var(--hj-muted);
	--tsc-text-light: #A8A8A8;
	--tsc-bg: var(--hj-mist);
	--tsc-border: var(--hj-line);
}

/* Read with a fallback by the plugin, so they can sit on :root. Sale price and the red figures become ink. */
:root {
	--tsc-sale: var(--hj-ink);
	--tsc-discount-bg: var(--hj-ink);
	--tsc-discount-fg: #fff;
	--tsc-freeship-bg: var(--hj-ink);
	--tsc-freeship-fg: #fff;
	--tsc-freeship-track: rgba(255, 255, 255, .28);
	/* Free gifts. GWP fixes these on :root "so it stays the same on every theme"; green (unlocked) is kept. */
	--tsc-gwp-red: var(--hj-ink);
	--tsc-gwp-blush: var(--hj-mist);
	--tsc-gwp-blush-line: var(--hj-line-2);
	--tsc-gwp-track: rgba(17, 17, 17, .14);
	--tsc-gwp-muted: var(--hj-muted);
	--tsc-gwp-ink: var(--hj-ink);
}

/* Money that TSC paints red with a fixed colour (not a variable). Failed / error states stay red on purpose. */
.tsc-cart__total-saving,
.tsc-cart__upsell-discount,
.tsc-listbar__saving,
.tsc-checkout__bottombar-saving,
.tsc-checkout-item__price-sale,
.tsc-checkout-total-row--discount .tsc-checkout-total-row__value .woocommerce-Price-amount,
.tsc-thankyou-total-row--discount .tsc-thankyou-total-row__value .woocommerce-Price-amount,
.tsc-order-total-row--discount .tsc-order-total-row__value .woocommerce-Price-amount {
	color: var(--hj-ink);
}
.tsc-order__reserved,
.tsc-thankyou__reserved,
.tsc-orders__tab-badge {
	background: var(--hj-ink);
}

/* The coupon icon is a 🎟️ emoji (red and pink); a filter turns it into a plain dark glyph. */
.tsc-vouchers-trigger__icon,
.tsc-checkout__coupon-icon {
	filter: grayscale(1) brightness(.2);
}

/* ---------------------------------------------------------------- 2. cart */
/* The coupon row. TSC pins a grey fill and capitals with !important, so `body` and !important answer it. */
body .tsc-cart .tsc-vouchers-trigger {
	background: var(--hj-mist) !important;
	border-top: 1px solid var(--hj-line) !important;
	border-bottom: 1px solid var(--hj-line) !important;
	text-transform: none !important;
	letter-spacing: .02em !important;
}

@media (min-width: 768px) {
	/* TSC gives the cart 10% of the screen on each side, which stretches a phone layout across a wide screen.
	   It sits in one centred 1000px column instead. */
	.tsc-cart {
		max-width: 1000px;
		margin-inline: auto;
		padding-left: var(--tsc-pad);
		padding-right: var(--tsc-pad);
	}
	.tsc-cart__page-title {
		padding: 34px 16px 14px;
		font-size: 34px;
		font-weight: 700;
		line-height: 1.08;
		letter-spacing: .02em;
		text-transform: uppercase;
	}
	.tsc-cart__bottombar { border: 1px solid var(--tsc-border); }
}

/* ---------------------------------------------------------------- 3. checkout */
/* Logo in the header. TSC prints the site name as text when no logo is set in Customizer > Site Identity;
   the ODDAKL logo is drawn over that link instead (the words stay in the page for screen readers).
   A logo uploaded in Site Identity prints as an <img> and is left alone. */
.tsc-checkout__logo > a:not(.custom-logo-link) {
	display: block;
	width: 146px;
	height: 26px;
	background: url("img/logo.png") left center / contain no-repeat;
	font-size: 0;
	color: transparent;
}

/* The rows pin capitals and a 16px inset with !important; ODDAKL reads them in normal case. */
body .tsc-checkout .tsc-checkout__address-card,
body .tsc-checkout .tsc-checkout__select-row,
body .tsc-checkout .tsc-checkout__coupon-row,
body .tsc-checkout .tsc-checkout__notes-row,
body .tsc-login-banner {
	text-transform: none !important;
	letter-spacing: 0 !important;
}
body .tsc-checkout .tsc-checkout__notes-row {
	background: var(--hj-mist) !important;
}

@media (min-width: 768px) {
	/* TSC runs the two columns edge to edge; here they sit in the same centred 1000px column as the cart,
	   and the header lines up with it. */
	.tsc-checkout { background: #fff; }
	.tsc-checkout__header {
		justify-content: space-between;
		padding-inline: max(var(--tsc-pad), calc((100% - 1000px) / 2));
	}
	.tsc-checkout__cols {
		max-width: 1000px;
		margin-inline: auto;
		min-height: auto;
	}
	.tsc-checkout__main {
		padding: 8px 24px 24px 0;
	}
	.tsc-checkout__summary {
		min-height: calc(100vh - 100px);
		padding: 8px 0 24px 24px;
	}
	/* Side by side, the grey fills and the inset only break the white up: rows sit flat and lean on their rules. */
	body .tsc-checkout .tsc-checkout__address-card,
	body .tsc-checkout .tsc-checkout__select-row,
	body .tsc-checkout .tsc-checkout__coupon-row,
	body .tsc-checkout .tsc-checkout__notes-row {
		padding-inline: 0 !important;
		background: transparent !important;
	}
	body .tsc-checkout .tsc-checkout__notes-row {
		border-top: 1px solid var(--tsc-border) !important;
		border-bottom: 1px solid var(--tsc-border) !important;
	}
	.tsc-checkout__section-title,
	.tsc-checkout__totals,
	.tsc-checkout__terms,
	.tsc-checkout__payment-details,
	.tsc-checkout-item {
		padding-inline: 0;
		background: transparent;
	}
	.tsc-checkout__section-title { padding-bottom: 10px; font-size: 15px; }
	.tsc-checkout__items { background: transparent; border-bottom: 1px solid var(--tsc-border); }
	/* The free gift line keeps its own inset and fill. */
	.tsc-checkout-item--gift { padding-inline: 12px; background: var(--hj-mist); }
	.tsc-checkout__bottombar { padding: 20px 0 0; border-top: 0; }
}

/* The thank-you title: TSC adds a 44px blank block after it (room for a back arrow the page does not have),
   which pushes the title 22px left of centre. */
.tsc-thankyou__header-spacer { display: none; }

/* ---------------------------------------------------------------- 4. phones */
/* On a phone the cart is an app screen: TSC's own header (back arrow, title) and bottom bar replace the site's.
   TSC hides its theme's header and footer for this (cart.css, written for Kadence ids); these are ODDAKL's. */
@media (max-width: 767px) {
	body.woocommerce-cart .nl-ann,
	body.woocommerce-cart .nl-hdr,
	body.woocommerce-cart .nl-stick,
	body.woocommerce-cart .nl-ftr {
		display: none;
	}
}