/*
 * A coffee's roast tile on the cart and checkout pages (TC_Cart_Media).
 *
 * The tile's own rules in storefront.css are scoped to #tapper-cafe-app, which
 * these WooCommerce pages do not have, and that stylesheet is far too big to
 * load for one block. So this is the compact tile the coffee shelf draws for a
 * bag (.tc-shelf-bag__media): the roast's colour and the roaster's mark, with
 * the name hidden because it is printed right beside it.
 *
 * Sized as a line item's picture in the look the cart, checkout and account
 * pages share (owner, 2026-10-02): 64px square, 14px corners, a hairline. The
 * --tc-* tokens come from tt-flow on <body> (motta-child/assets/flow.css);
 * every one carries its literal as a fallback, so the tile is right without it.
 */
.tc-cart-media.tc-coffee__media {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 64px;
	max-width: 100%;
	margin: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--tc-radius-sm, 14px);
	background-color: var(--tc-roast, #6F4E37);
	box-shadow: inset 0 0 0 1px var(--tc-line, rgba(18, 17, 17, .1));
}

/* storefront.css .tc-coffee__tile, centred as on the shelf. */
.tc-cart-media.tc-coffee__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #fff;
	background-image:
		linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, .06) 100%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 11px);
}

.tc-cart-media .tc-coffee__tileMark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--tc-card, #FFFFFF);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 6px rgba(0, 0, 0, .25);
}

/* Motta sizes every cart thumbnail image to 100px wide
 * (td.product-thumbnail img { min-width: 100px }), the logo included. */
.tc-cart-media .tc-coffee__tileMark img {
	display: block;
	width: 100%;
	min-width: 0;
	height: 100%;
	object-fit: cover;
}

.tc-cart-media .tc-coffee__tileMark--initial {
	color: var(--tc-ink, #121111);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.tc-cart-media .tc-coffee__tileName {
	display: none;
}

/* ---------------------------------------------------- a discounted cart line
 *
 * The price a discount replaced, struck through beside what is being charged.
 * The same class as the storefront card and the roaster's shelf, so a discount
 * reads the same from the coffee page to the last screen before paying. Both
 * are declared here rather than pulled from storefront.css, which is not
 * loaded on cart or checkout.
 *
 * Muted and small rather than faded: opacity on a colour that is already the
 * quiet one took it under what can be read on cream.
 */
.tc-was {
	margin-right: 6px;
	color: var(--tc-muted, #6B6660);
	font-size: 13px;
	font-weight: 400;
	text-decoration: line-through;
}

.tc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------- "You might also like from this roaster"
 *
 * The cross-sell under the checkout's order review (TC_Crosssell). Its cards
 * are the theme's own product cards and are left to it; this is the heading,
 * the gap above the section, and the one state checkout-crosssell.js sets.
 *
 * That state used to ride on WooCommerce's `woocommerce-general` sheet as an
 * inline rule. Motta switches WooCommerce's sheets off, so the handle never
 * existed and the rule never reached a page: an added product stayed bright
 * and pressable. This sheet is on every checkout, so it lives here.
 */
.tc-checkout-crosssell {
	margin-top: 32px;
}

.tc-checkout-crosssell > h3 {
	margin: 0 0 16px;
	color: var(--tc-ink, #121111);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.tc-checkout-crosssell .tc-crosssell-added {
	opacity: .6;
	pointer-events: none;
}

/* ------------------------------------------------ a coffee's line, said short
 *
 * On the cart page a coffee's line read as ten rows of catalogue under a name
 * (TC_Cart_Media::summary() has the why). Now it is what the card it was added
 * from said: the grind and the roaster on one line, the tasting notes on the
 * next, and the full list folded behind "Coffee details".
 *
 * The cell is a column (motta-child/assets/flow.css), so `order` puts "Edit
 * options" last however the name filter and the cart template happen to print
 * the pieces: name, facts, notes, Coffee details, the list, Edit options.
 */
.tc-cart-item__facts {
	display: block;
	color: var(--tc-muted, #6B6660);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

.tc-cart-item__notes {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	color: var(--tc-body, #413E3C);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/* The card's note dot (home.css, .tc-home__note), in the roast's brown. */
.tc-cart-item__notes > span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.tc-cart-item__notes > span::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--tc-roast, #6F4E37);
}

/* The way back to the roaster's page to change the grind or the pack. */
.tc-cart-item__edit {
	order: 5;
	display: table;
	margin: 2px 0 0;
	color: var(--tc-green, #29594B);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.woocommerce-cart-form .tc-cart-item__facts { order: 1; }
.woocommerce-cart-form .tc-cart-item__notes { order: 2; }
.woocommerce-cart-form .tc-coffee-details__label { order: 3; }
.woocommerce-cart-form td.product-name > dl.variation { order: 4; }

/*
 * "Coffee details": the checkbox that folds WooCommerce's <dl> away, as on
 * checkout's review. Checkout's copy of these rules is printed inline by
 * TC_Usual_Checkout::styles_once(), on a hook the cart page does not fire, so
 * the cart's are here, scoped to the cart's table.
 */
.woocommerce-cart-form .tc-coffee-details__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.woocommerce-cart-form .tc-coffee-details__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	color: var(--tc-body, #413E3C);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* A chevron of two borders: no glyph to go missing, no image to load. */
.woocommerce-cart-form .tc-coffee-details__label::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

.woocommerce-cart-form .tc-coffee-details__toggle:checked ~ .tc-coffee-details__label::before {
	transform: rotate(45deg);
}

.woocommerce-cart-form .tc-coffee-details__toggle ~ dl.variation {
	display: none;
}

.woocommerce-cart-form .tc-coffee-details__toggle:checked ~ dl.variation {
	display: block;
}

.woocommerce-cart-form .tc-coffee-details__toggle:focus-visible ~ .tc-coffee-details__label {
	outline: 2px solid var(--tc-green, #29594B);
	outline-offset: 2px;
}

/* The cart's three promises above Proceed to checkout (TC_Assurance, 2026-10-08). */
.tc-assure--cart {
	display: grid;
	gap: 0.3rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	color: var(--tc-body, #413E3C);
	font-size: 0.8125rem;
	line-height: 1.35;
}

.tc-assure--cart li {
	display: flex;
	gap: 0.4rem;
	align-items: baseline;
	margin: 0;
}

.tc-assure--cart li::before {
	content: "✓";
	flex: none;
	color: var(--tc-green, #29594B);
	font-weight: 700;
}

.tc-assure--cart a {
	color: inherit;
	text-decoration: underline;
}

/* "After your first order" on the thank-you page (TC_Home::thankyou_after(), 2026-10-08). */
.woocommerce-order .tc-home__after {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--tc-line, rgba(18, 17, 17, 0.1));
	border-radius: 14px;
}

.woocommerce-order .tc-home__after-title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.woocommerce-order .tc-home__after-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-order .tc-home__after-item {
	display: grid;
	gap: 0.1rem;
	margin: 0;
	font-size: 0.875rem;
}