/*
 * TechMart — WooCommerce
 * Product cards, shop archive, product page, cart, checkout, my account.
 */

/* -------------------------------------------------------------------------
 * Product grid
 * ---------------------------------------------------------------------- */

.tm-products,
.woocommerce ul.products {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.tm-products,
	.woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
}

/*
 * Column count at desktop. WooCommerce's own loop emits `columns-N` from the
 * `loop_shop_columns` filter; the theme's merchandising loops emit
 * `tm-products--cols-N`. Both are honoured so the Customizer setting applies
 * everywhere, with 4 as the fallback when neither class is present.
 */
@media (min-width: 1200px) {
	.tm-products,
	.woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tm-products--cols-2,
	.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.tm-products--cols-3,
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.tm-products--cols-4,
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.tm-products--cols-5,
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* With a filter sidebar there is less room, so five columns would be cramped. */
@media (min-width: 1200px) {
	.tm-shop--has-sidebar .tm-products--cols-5,
	.tm-shop--has-sidebar .woocommerce ul.products.columns-5,
	.tm-shop--has-sidebar ul.products.columns-5 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * WooCommerce's own float layout fights the grid above.
 *
 * The `[class*="columns-"]` selectors are not decoration. WooCommerce's
 * small-screen stylesheet carries
 * `.woocommerce ul.products[class*="columns-"] li.product { width: 48% }`
 * under `max-width: 768px`, which outranks a plain `li.product` reset. Left
 * alone it sizes each card to 48% *of its own grid track* — related products
 * collapsed to 80px wide, one letter per line. Matching that weight is what
 * makes the reset hold.
 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

/*
 * WooCommerce clears its float layout with `::before`/`::after` set to
 * `content: " "; display: table`. In a grid container those pseudo-elements
 * become grid *items* and each eat a cell, which pushed the first related
 * product into column two and left a hole in the corner. The grid needs no
 * clearfix, so remove them.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* -------------------------------------------------------------------------
 * Product card
 *
 * Structural rule: nothing inside the card changes size on hover or after
 * load. Badges and actions are absolutely positioned inside the image well;
 * the title and rating rows have reserved heights. The grid therefore
 * contributes zero layout shift.
 * ---------------------------------------------------------------------- */

.tm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--tm-background);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
	overflow: hidden;
	transition: border-color var(--tm-speed) var(--tm-ease), box-shadow var(--tm-speed) var(--tm-ease);
}

.tm-card:hover {
	border-color: var(--tm-border-strong);
	box-shadow: var(--tm-shadow);
}

.tm-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--tm-surface-2);
	overflow: hidden;
}

.tm-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.tm-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
	transition: opacity var(--tm-speed-slow) var(--tm-ease), transform var(--tm-speed-slow) var(--tm-ease);
}

.tm-card__img--hover {
	opacity: 0;
}

.tm-card:hover .tm-card__img--hover {
	opacity: 1;
}

.tm-card:hover .tm-card__img--main {
	opacity: 0;
}

/* With only one image there is nothing to cross-fade to, so the single image
   gets a gentle scale instead of vanishing. */
.tm-card:not(:has(.tm-card__img--hover)):hover .tm-card__img--main {
	opacity: 1;
	transform: scale(1.05);
}

.tm-card__badges {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	display: grid;
	gap: 5px;
	justify-items: start;
	pointer-events: none;
}

.tm-card__actions {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: grid;
	gap: 6px;
}

.tm-card__actions .tm-icon-btn,
.tm-card__actions .yith-wcwl-add-to-wishlist,
.tm-card__actions .tinvwl_add_to_wishlist_button {
	width: 36px;
	height: 36px;
	background: var(--tm-background);
	border: 1px solid var(--tm-border);
	border-radius: 50%;
	box-shadow: var(--tm-shadow-sm);
	color: var(--tm-muted);
}

.tm-card__actions .tm-icon-btn:hover {
	background: var(--tm-primary);
	border-color: var(--tm-primary);
	color: #fff;
}

.tm-wishlist-btn.is-active {
	color: var(--tm-danger);
}

.tm-wishlist-btn.is-active svg {
	fill: currentColor;
}

/* On a pointer device the action rail fades in; on touch it is always
   visible, because there is no hover to reveal it with. */
@media (hover: hover) and (min-width: 768px) {
	.tm-card__actions {
		opacity: 0;
		transform: translateX(6px);
		transition: opacity var(--tm-speed) var(--tm-ease), transform var(--tm-speed) var(--tm-ease);
	}

	[dir="rtl"] .tm-card__actions {
		transform: translateX(-6px);
	}

	.tm-card:hover .tm-card__actions,
	.tm-card:focus-within .tm-card__actions {
		opacity: 1;
		transform: none;
	}
}

.tm-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 6px;
	padding: 14px;
}

.tm-card__brand {
	margin: 0;
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tm-faint);
}

.tm-card__title {
	margin: 0;
	font-size: var(--tm-fs-sm);
	font-weight: 500;
	line-height: 1.4;
	/* Two lines, always — so every card in a row has the same height. */
	min-height: calc(1.4em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tm-card__title a {
	color: var(--tm-text);
	text-decoration: none;
}

.tm-card__title a:hover {
	color: var(--tm-primary);
}

.tm-card__rating {
	min-height: 18px;
	display: flex;
	align-items: center;
}

.tm-card__no-rating {
	font-size: var(--tm-fs-xs);
	color: var(--tm-faint);
}

.tm-card__price {
	margin-top: auto;
	padding-top: 4px;
	font-size: var(--tm-fs-h4);
	font-weight: 700;
	color: var(--tm-text);
	line-height: 1.3;
}

.tm-card__price del,
.woocommerce .price del {
	margin-inline-end: 6px;
	font-size: var(--tm-fs-sm);
	font-weight: 400;
	color: var(--tm-faint);
	text-decoration: line-through;
}

.tm-card__price ins,
.woocommerce .price ins {
	text-decoration: none;
	color: var(--tm-danger);
}

.tm-card__price .woocommerce-Price-currencySymbol {
	font-size: .85em;
}

.tm-card__stock {
	margin: 0;
	font-size: var(--tm-fs-xs);
	font-weight: 600;
}

.tm-card__stock--in { color: var(--tm-success); }
.tm-card__stock--low { color: var(--tm-accent); }
.tm-card__stock--out { color: var(--tm-danger); }
.tm-card__stock--backorder { color: var(--tm-muted); }

.tm-card__stock-bar {
	height: 5px;
	border-radius: var(--tm-radius-pill);
	background: var(--tm-surface);
	overflow: hidden;
}

.tm-card__stock-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--tm-danger), var(--tm-accent));
	border-radius: inherit;
}

.tm-card__cta {
	margin-top: 8px;
}

.tm-card__cta .tm-btn,
.tm-card__cta .button {
	width: 100%;
}

.tm-card__cta .added_to_cart {
	display: none;
}

.tm-card__cta .button.loading::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-inline-start: 8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: tm-spin .7s linear infinite;
	vertical-align: -2px;
}

@keyframes tm-spin {
	to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
 * Shop archive
 * ---------------------------------------------------------------------- */

.tm-shop-head {
	margin-bottom: clamp(20px, 3vw, 30px);
}

.tm-shop-head__title {
	margin: 0;
}

.tm-shop-head__desc {
	margin-top: 8px;
	color: var(--tm-muted);
	max-width: 72ch;
}

.tm-shop-head__media {
	margin-top: 18px;
}

.tm-shop-head__img {
	width: 100%;
	max-height: 240px;
	object-fit: cover;
	border-radius: var(--tm-radius-lg);
}

.tm-shop {
	display: grid;
	gap: 28px;
}

@media (min-width: 1024px) {
	.tm-shop--has-sidebar {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 36px;
	}
}

.tm-shop__main {
	min-width: 0;
}

/* Filters: a sidebar on desktop, a drawer on mobile. */

.tm-shop__filters-head {
	display: none;
}

@media (max-width: 1023px) {
	.tm-shop__filters {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		z-index: var(--tm-z-drawer);
		display: flex;
		flex-direction: column;
		width: min(360px, 90vw);
		background: var(--tm-background);
		box-shadow: var(--tm-shadow-lg);
		transform: translateX(-102%);
		transition: transform var(--tm-speed-slow) var(--tm-ease);
	}

	[dir="rtl"] .tm-shop__filters {
		transform: translateX(102%);
	}

	.tm-shop__filters.is-open {
		transform: none;
	}

	.tm-shop__filters-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 18px;
		border-bottom: 1px solid var(--tm-border);
	}

	.tm-shop__filters-title {
		margin: 0;
		font-size: var(--tm-fs-h4);
	}

	.tm-shop__filters-body {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 18px;
	}
}

.tm-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	padding: 10px 0;
	border-block: 1px solid var(--tm-border);
}

.tm-toolbar__left,
.tm-toolbar__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tm-toolbar__count,
.woocommerce-result-count {
	margin: 0;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

.tm-toolbar__filter-btn {
	min-height: 38px;
	padding-inline: 14px;
}

@media (min-width: 1024px) {
	.tm-toolbar__filter-btn {
		display: none;
	}
}

.tm-toolbar__sort-icon {
	color: var(--tm-muted);
}

.woocommerce-ordering select,
.tm-toolbar select {
	min-height: 38px;
	width: auto;
	min-width: 190px;
	padding-block: 4px;
	font-size: var(--tm-fs-sm);
}

.woocommerce-ordering {
	margin: 0;
}

/* WooCommerce's own notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--tm-border);
	border-inline-start: 3px solid var(--tm-primary);
	border-radius: var(--tm-radius);
	background: var(--tm-surface-2);
	font-size: var(--tm-fs-sm);
	list-style: none;
}

.woocommerce-message {
	border-inline-start-color: var(--tm-success);
}

.woocommerce-error {
	border-inline-start-color: var(--tm-danger);
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
}

/* -------------------------------------------------------------------------
 * Single product
 * ---------------------------------------------------------------------- */

.tm-product__top {
	display: grid;
	gap: clamp(24px, 3vw, 44px);
	margin-bottom: clamp(32px, 4vw, 56px);
}

@media (min-width: 900px) {
	.tm-product__top {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	}
}

.tm-product__gallery {
	position: relative;
	min-width: 0;
}

/*
 * Same trap as the product grid, one level up.
 *
 * WooCommerce floats the gallery and the summary at `width: 48%` from
 * `.woocommerce div.product div.images` (0,3,2), which outranks the theme's
 * single-class wrappers. Inside `.tm-product__top`'s grid that sized each
 * column's contents to 48% of its own track, leaving roughly 400px of empty
 * page between the gallery and the summary, and a 1,100px void beneath the
 * gallery. The grid owns the columns; these must not set their own width.
 */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

.woocommerce-product-gallery {
	position: relative;
}

.woocommerce-product-gallery__wrapper {
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
	overflow: hidden;
	background: var(--tm-surface-2);
}

.woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * WooCommerce sizes each thumbnail with
 * `.woocommerce div.product div.images .flex-control-thumbs li { width: 25% }`
 * at (0,4,3) — far above a two-class reset. Inside the grid above that left
 * 32px thumbnails floating in 129px tracks. The long selector is here to match
 * that weight, not for its own sake.
 */
.woocommerce-product-gallery .flex-control-thumbs li,
.woocommerce div.product div.images .flex-control-thumbs li,
.woocommerce-page div.product div.images .flex-control-thumbs li {
	margin: 0;
	width: auto;
	float: none;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	opacity: .65;
	cursor: pointer;
	transition: opacity var(--tm-speed) var(--tm-ease), border-color var(--tm-speed) var(--tm-ease);
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--tm-primary);
}

.woocommerce-product-gallery__trigger {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--tm-background);
	border: 1px solid var(--tm-border);
	border-radius: 50%;
	box-shadow: var(--tm-shadow-sm);
	font-size: 0;
	text-decoration: none;
}

.woocommerce-product-gallery__trigger::before {
	content: "⤢";
	font-size: 17px;
	color: var(--tm-text);
}

.tm-product__summary {
	min-width: 0;
}

.tm-product__brand {
	margin: 0 0 6px;
	font-size: var(--tm-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.tm-product__brand a {
	color: var(--tm-primary);
	text-decoration: none;
}

.tm-product__summary .product_title {
	margin: 0 0 10px;
	font-size: var(--tm-fs-h1);
}

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: var(--tm-fs-sm);
}

.woocommerce-product-rating .woocommerce-review-link {
	color: var(--tm-muted);
	text-decoration: none;
}

.tm-product__summary .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	color: var(--tm-text);
}

.tm-product__summary .price del {
	font-size: .6em;
}

.woocommerce-product-details__short-description {
	margin-bottom: 20px;
	color: var(--tm-muted);
	font-size: var(--tm-fs-sm);
}

.tm-product__meta {
	display: grid;
	gap: 7px;
	margin: 0 0 20px;
	padding: 16px 0 0;
	border-top: 1px solid var(--tm-border);
	list-style: none;
	font-size: var(--tm-fs-sm);
}

.tm-product__meta-item {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 10px;
}

.tm-product__meta-label {
	color: var(--tm-muted);
}

.tm-product__meta-value a {
	color: var(--tm-text);
	text-decoration: none;
}

.tm-product__meta-value a:hover {
	color: var(--tm-primary);
}

.tm-product__availability--in { color: var(--tm-success); font-weight: 600; }
.tm-product__availability--low { color: var(--tm-accent); font-weight: 600; }
.tm-product__availability--out { color: var(--tm-danger); font-weight: 600; }

/* Add to cart form */

form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

form.cart .quantity {
	flex: none;
}

form.cart .single_add_to_cart_button {
	flex: 1 1 200px;
	min-height: 52px;
	background: var(--tm-primary);
	border: 1px solid var(--tm-primary);
	border-radius: var(--tm-radius);
	color: #fff;
	font-size: var(--tm-fs-body);
	font-weight: 600;
	transition: background-color var(--tm-speed) var(--tm-ease);
}

form.cart .single_add_to_cart_button:hover {
	background: var(--tm-primary-dark);
}

.tm-buy-now {
	flex: 1 1 100%;
	min-height: 52px;
}

form.cart.grouped_form,
form.cart.variations_form {
	display: block;
}

.variations {
	width: 100%;
	margin-bottom: 14px;
}

.variations th,
.variations td {
	padding: 6px 0;
	border: 0;
	vertical-align: middle;
}

.variations .label label {
	margin: 0;
	font-weight: 600;
}

.reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: var(--tm-fs-xs);
}

.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.tm-product__secondary-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}

.tm-product__secondary-actions .tm-icon-btn {
	width: auto;
	padding-inline: 14px;
	gap: 8px;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tm-border-strong);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
}

.tm-assurance {
	display: grid;
	gap: 9px;
	margin: 0 0 18px;
	padding: 16px;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius);
	list-style: none;
	font-size: var(--tm-fs-sm);
}

.tm-assurance__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tm-assurance__item svg {
	color: var(--tm-primary);
}

.tm-product__extra {
	margin-top: 18px;
}

/* Tabs */

.woocommerce-tabs {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 0 0 0;
	border-bottom: 1px solid var(--tm-border);
	list-style: none;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	border-bottom: 2px solid transparent;
	color: var(--tm-muted);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	color: var(--tm-primary);
	border-bottom-color: var(--tm-primary);
}

.woocommerce-Tabs-panel {
	max-width: 78ch;
}

.woocommerce-Tabs-panel h2 {
	font-size: var(--tm-fs-h3);
}

.shop_attributes th {
	width: 34%;
	color: var(--tm-muted);
	font-weight: 500;
}

/* FAQ */

.tm-faq__item {
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	margin-bottom: 8px;
	padding: 0 16px;
}

.tm-faq__q {
	padding: 14px 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.tm-faq__q::-webkit-details-marker {
	display: none;
}

.tm-faq__q::after {
	content: "+";
	/* float has no logical keyword with reliable support, so RTL flips it. */
	float: right;
	color: var(--tm-muted);
}

.tm-faq__item[open] .tm-faq__q::after {
	content: "–";
}

.tm-faq__a {
	padding-bottom: 14px;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

/* Reviews */

#reviews .commentlist {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

#reviews .comment_container {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid var(--tm-border);
}

#reviews .avatar {
	border-radius: 50%;
	width: 56px;
	height: 56px;
}

#reviews .star-rating {
	margin-bottom: 6px;
}

.comment-form-rating .stars {
	font-size: 1.1rem;
}

/* Related / upsells / recently viewed */

.related.products > h2,
.upsells.products > h2,
.tm-section--recent .tm-section-head__title {
	font-size: var(--tm-fs-h2);
}

.related.products,
.upsells.products {
	margin-bottom: clamp(30px, 4vw, 50px);
}

/* -------------------------------------------------------------------------
 * Quick view
 * ---------------------------------------------------------------------- */

.tm-quickview {
	display: grid;
	gap: 24px;
}

@media (min-width: 720px) {
	.tm-quickview {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.tm-quickview__media {
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius);
	overflow: hidden;
}

.tm-quickview__img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 6%;
}

.tm-quickview__title {
	margin: 0 0 8px;
	font-size: var(--tm-fs-h3);
}

.tm-quickview__price {
	margin: 10px 0;
	font-size: var(--tm-fs-h3);
	font-weight: 700;
}

.tm-quickview__excerpt {
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

.tm-quickview__full {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 14px;
	font-size: var(--tm-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Cart drawer
 * ---------------------------------------------------------------------- */

.tm-cart-lines {
	margin: 0;
	padding: 0 16px;
	list-style: none;
}

.tm-cart-line {
	position: relative;
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) 30px;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid var(--tm-border);
}

.tm-cart-line__media img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius);
}

.tm-cart-line__title {
	margin: 0 0 4px;
	font-size: var(--tm-fs-sm);
	font-weight: 500;
	line-height: 1.35;
}

.tm-cart-line__title a {
	color: var(--tm-text);
	text-decoration: none;
}

.tm-cart-line__meta {
	margin: 0 0 6px;
	font-size: var(--tm-fs-xs);
	color: var(--tm-muted);
}

.tm-cart-line__meta p {
	margin: 0;
}

.tm-cart-line__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.tm-cart-line__price {
	font-size: var(--tm-fs-sm);
	font-weight: 700;
}

.tm-cart-line__remove {
	align-self: start;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	background: none;
	border: 0;
	border-radius: 50%;
	color: var(--tm-faint);
}

.tm-cart-line__remove:hover {
	background: var(--tm-danger-light);
	color: var(--tm-danger);
}

.tm-cart-drawer__empty {
	display: grid;
	gap: 10px;
	justify-items: center;
	padding: 48px 24px;
	text-align: center;
}

.tm-cart-drawer__empty-icon {
	color: var(--tm-faint);
}

.tm-cart-drawer__empty-title {
	margin: 0;
	font-size: var(--tm-fs-h4);
	font-weight: 700;
}

.tm-cart-drawer__empty-text {
	margin: 0 0 8px;
	color: var(--tm-muted);
	font-size: var(--tm-fs-sm);
}

.tm-cart-drawer__footer {
	display: grid;
	gap: 8px;
	padding: 16px;
	border-top: 1px solid var(--tm-border);
	background: var(--tm-surface-2);
}

.tm-cart-drawer__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: var(--tm-fs-body);
}

.tm-cart-drawer__subtotal strong {
	font-size: var(--tm-fs-h4);
}

.tm-cart-drawer__note {
	margin: 0 0 4px;
	font-size: var(--tm-fs-xs);
	color: var(--tm-muted);
}

.tm-cart-drawer__continue {
	justify-self: center;
	margin-top: 4px;
}

/* Free shipping progress */

.tm-shipping-bar {
	padding: 14px 16px;
	background: var(--tm-primary-light);
	border-bottom: 1px solid var(--tm-border);
}

.tm-shipping-bar.is-qualified {
	background: var(--tm-success-light);
}

.tm-shipping-bar__text {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: var(--tm-fs-sm);
}

.tm-shipping-bar__text .amount,
.tm-shipping-bar__text bdi {
	font-weight: 700;
}

.tm-shipping-bar__track {
	height: 6px;
	background: rgba(15, 23, 42, .1);
	border-radius: var(--tm-radius-pill);
	overflow: hidden;
}

.tm-shipping-bar__fill {
	display: block;
	height: 100%;
	background: var(--tm-primary);
	border-radius: inherit;
	transition: width var(--tm-speed-slow) var(--tm-ease);
}

.is-qualified .tm-shipping-bar__fill {
	background: var(--tm-success);
}

/* -------------------------------------------------------------------------
 * Cart page
 * ---------------------------------------------------------------------- */

.woocommerce-cart-form__contents {
	margin-bottom: 24px;
}

.woocommerce-cart-form__contents th {
	font-size: var(--tm-fs-xs);
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tm-muted);
}

.woocommerce-cart-form__cart-item .product-thumbnail img {
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius);
}

.woocommerce-cart-form__cart-item .product-remove a {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--tm-faint);
	text-decoration: none;
	font-size: 18px;
}

.woocommerce-cart-form__cart-item .product-remove a:hover {
	background: var(--tm-danger-light);
	color: var(--tm-danger);
}

.cart_totals {
	padding: 22px;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius-lg);
}

.cart_totals h2 {
	margin-top: 0;
	font-size: var(--tm-fs-h3);
}

.cart-collaterals {
	display: grid;
	gap: 24px;
}

@media (min-width: 900px) {
	.cart-collaterals {
		grid-template-columns: minmax(0, 1fr) 380px;
	}
}

.coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.coupon .input-text {
	flex: 1 1 180px;
	width: auto;
}

/* -------------------------------------------------------------------------
 * Checkout
 *
 * Two columns with a sticky summary, achieved with CSS alone — WooCommerce's
 * own template already renders these as siblings, so no override is needed.
 * ---------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
		gap: 44px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1;
	}

	.woocommerce-checkout form.checkout > h3#order_review_heading,
	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
	}

	.woocommerce-checkout #order_review {
		position: sticky;
		top: calc(var(--tm-header-main) + 20px);
	}
}

.woocommerce-checkout #order_review {
	padding: 22px;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius-lg);
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
#order_review_heading {
	font-size: var(--tm-fs-h3);
}

.woocommerce-checkout .form-row {
	margin-bottom: 14px;
	padding: 0;
}

.woocommerce-checkout .form-row label {
	display: block;
}

.woocommerce-checkout .required {
	color: var(--tm-danger);
	text-decoration: none;
}

#payment .wc_payment_methods {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

#payment .wc_payment_method {
	padding: 12px 0;
	border-bottom: 1px solid var(--tm-border);
}

#payment .payment_box {
	margin-top: 10px;
	padding: 12px;
	background: var(--tm-background);
	border-radius: var(--tm-radius);
	font-size: var(--tm-fs-sm);
}

#place_order {
	width: 100%;
	min-height: 52px;
	font-size: var(--tm-fs-body);
}

/* -------------------------------------------------------------------------
 * My account
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
	display: grid;
	gap: 30px;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce:has(.tm-account-nav) {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}
}

.tm-account-nav {
	padding: 18px;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius-lg);
}

.tm-account-nav__user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--tm-border);
}

.tm-account-nav__avatar {
	border-radius: 50%;
}

.tm-account-nav__name {
	margin: 0;
	font-weight: 700;
	font-size: var(--tm-fs-sm);
}

.tm-account-nav__email {
	margin: 0;
	font-size: var(--tm-fs-xs);
	color: var(--tm-muted);
	overflow-wrap: anywhere;
}

.tm-account-nav__list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tm-account-nav__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: var(--tm-radius);
	color: var(--tm-text);
	font-size: var(--tm-fs-sm);
	text-decoration: none;
}

.tm-account-nav__list a:hover {
	background: var(--tm-background);
	color: var(--tm-primary);
}

.tm-account-nav__list .is-active a {
	background: var(--tm-primary);
	color: #fff;
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * Sign in and register
 *
 * WooCommerce hands us two bare forms side by side and nothing else: unstyled
 * grey submit buttons, headings with no hierarchy, and two columns stretched
 * across the full content width with the eye given no idea which one it is
 * meant to use. This is the most important page on the site that a customer
 * meets while already slightly annoyed, so it is worth more than a border.
 *
 * The colour budget is deliberately tiny: one tinted intro strip, one accent
 * rule on the card you are supposed to use, one blue button. Everything else
 * is the neutral palette. Signing in is a means to an end, and a page that
 * shouts at you about it is a page that gets in the way.
 * ---------------------------------------------------------------------- */

.tm-login-intro {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 980px;
	margin: 0 0 clamp(20px, 3vw, 30px);
	padding: 18px 20px;
	background: var(--tm-primary-light);
	border-radius: var(--tm-radius-lg);
}

.tm-login-intro__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	background: var(--tm-background);
	border-radius: 50%;
	color: var(--tm-primary);
}

.tm-login-intro__title {
	margin: 0 0 2px;
	font-size: var(--tm-fs-lg);
	line-height: 1.3;
}

.tm-login-intro__text {
	margin: 0;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
	line-height: 1.5;
}

/* The two columns as a pair of cards, centred rather than stretched. */
#customer_login {
	display: grid;
	gap: clamp(16px, 2.4vw, 26px);
	max-width: 980px;

	/* Left-aligned, not centred: the page heading sits at the container's
	   left edge and a centred block underneath it makes the page look like
	   two designs stacked. */
	margin: 0;
}

/*
 * WooCommerce clears its float layout with `content: " "` on the container's
 * ::before and ::after. Generated content on a grid container is not
 * decoration — it is a grid *item*. Those two empty boxes were taking the
 * first and last cells, which pushed Login into the right-hand column and
 * wrapped Register onto a second row underneath it. The floats they exist to
 * clear are already gone, so the clearfix has nothing left to do.
 */
#customer_login::before,
#customer_login::after {
	content: none;
}

@media (min-width: 860px) {
	#customer_login {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

#customer_login .u-column1,
#customer_login .u-column2 {
	position: relative;
	width: auto;
	float: none;
	padding: clamp(22px, 2.6vw, 30px);
	background: var(--tm-background);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
	box-shadow: var(--tm-shadow-sm);
	overflow: hidden;
}

/* The accent rule marks the card a returning customer wants. Register is the
   quieter of the two on purpose — most visits to this page are sign-ins. */
#customer_login .u-column1::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--tm-primary);
}

#customer_login .u-column2 {
	background: var(--tm-surface-2);
}

#customer_login h2 {
	margin: 0 0 4px;
	font-size: var(--tm-fs-xl);
}

#customer_login .u-column1 > h2 + .woocommerce-form,
#customer_login .u-column2 > h2 + .woocommerce-form {
	margin-top: 18px;
}

/*
 * The card *is* the frame. WooCommerce draws its own bordered, padded box
 * around each form (`.woocommerce form.login`), which inside a card gives you
 * a box in a box with two different radii. Matched at the same specificity
 * WooCommerce uses, or the plugin's rule wins whichever stylesheet loads
 * last.
 */
.woocommerce form.login,
.woocommerce form.register {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

.woocommerce-form-login p,
.woocommerce-form-register p {
	margin: 0 0 14px;
}

.woocommerce-form-login label,
.woocommerce-form-register label {
	font-size: var(--tm-fs-sm);
	font-weight: 600;
}

/* WooCommerce's submit is `button.button`, not `button.button.alt`, so the
   theme's primary-button rule never reached it and it rendered in the browser
   grey. */
.woocommerce button.button.woocommerce-form-login__submit,
.woocommerce button.button.woocommerce-form-register__submit {
	width: 100%;
	min-height: 46px;
	padding: 11px 20px;
	background: var(--tm-primary);
	border: 1px solid var(--tm-primary);
	border-radius: var(--tm-radius);
	font-size: var(--tm-fs-sm);
	font-weight: 600;
	color: #fff;
	cursor: pointer;

	/* WooCommerce's own rule is `.woocommerce button.button`, which outranks
	   a lone class. Matching its shape and adding one more class is what it
	   takes to win regardless of which stylesheet loads last. */
}

.woocommerce button.button.woocommerce-form-login__submit:hover,
.woocommerce button.button.woocommerce-form-register__submit:hover {
	background: var(--tm-primary-dark);
	border-color: var(--tm-primary-dark);
	color: #fff;
}

/* Register is the secondary action, so it reads as an outline. */
.woocommerce button.button.woocommerce-form-register__submit {
	background: transparent;
	border-color: var(--tm-border-strong);
	color: var(--tm-text);
}

.woocommerce button.button.woocommerce-form-register__submit:hover {
	background: var(--tm-text);
	border-color: var(--tm-text);
	color: #fff;
}

/* "Remember me" and "Lost your password?" belong on one line: they are the
   two things a returning customer looks for, and stacking them buries the
   second under the button. */
.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
	display: grid;
	gap: 12px;
	margin-bottom: 10px;
}

.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--tm-fs-sm);
	font-weight: 500;
	color: var(--tm-muted);
}

.woocommerce-form-login__rememberme input {
	width: auto;
	min-height: 0;
	margin: 0;
}

.woocommerce-LostPassword {
	margin: 0;
	font-size: var(--tm-fs-sm);
}

.woocommerce-LostPassword a {
	color: var(--tm-primary);
	text-decoration: none;
	font-weight: 600;
}

.woocommerce-LostPassword a:hover {
	text-decoration: underline;
}

.woocommerce-privacy-policy-text p,
.woocommerce-form-register > p:not(.form-row) {
	font-size: var(--tm-fs-xs);
	color: var(--tm-muted);
	line-height: 1.6;
}

.woocommerce-orders-table td,
.woocommerce-orders-table th {
	font-size: var(--tm-fs-sm);
}

/* -------------------------------------------------------------------------
 * Deals section head
 * ---------------------------------------------------------------------- */

.tm-section--deals {
	background: linear-gradient(180deg, var(--tm-danger-light) 0%, transparent 60%);
}

.tm-deals__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-bottom: clamp(20px, 2.5vw, 30px);
}

.tm-deals__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--tm-danger);
}

.tm-deals__subtitle {
	margin: 4px 0 0;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

.tm-deals__all {
	margin-inline-start: auto;
}

.tm-countdown--deals,
.tm-countdown--deals .tm-countdown__units {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Wishlist page
 * ---------------------------------------------------------------------- */

.tm-wishlist-page__empty {
	padding: 40px 0;
	text-align: center;
	color: var(--tm-muted);
}


/* -------------------------------------------------------------------------
 * WooCommerce's own accent colour
 *
 * WooCommerce paints its primary controls in its brand purple (#7f54b3).
 * Those rules weigh (0,3,1) — its `:where()` wrappers add nothing — so the
 * theme's lighter `form.cart .single_add_to_cart_button` lost, and the single
 * most important button on the site rendered off-brand. Matching the weight is
 * enough, because this stylesheet loads after WooCommerce's.
 * ---------------------------------------------------------------------- */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--tm-primary);
	border-color: var(--tm-primary);
	color: #fff;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background-color: var(--tm-primary-dark);
	border-color: var(--tm-primary-dark);
	color: #fff;
}

/* Disabled variants, so a sold-out button does not revert to purple. */
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt:disabled {
	background-color: var(--tm-primary);
	border-color: var(--tm-primary);
	color: #fff;
}

/* The layered-nav price slider ships purple too. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--tm-primary);
}

/*
 * Theme buttons inside WooCommerce pages
 *
 * WooCommerce paints `.button` grey at (0,2,1), which outranks the theme's
 * single-class `.tm-btn--primary`. The same product card therefore rendered
 * blue on the homepage — a plain page, no `.woocommerce` body class — and grey
 * on the shop and single-product pages. Re-assert each variant at a weight
 * that holds in both places.
 */

.woocommerce a.button.tm-btn--primary,
.woocommerce button.button.tm-btn--primary,
.woocommerce input.button.tm-btn--primary {
	background-color: var(--tm-primary);
	border-color: var(--tm-primary);
	color: #fff;
}

.woocommerce a.button.tm-btn--primary:hover,
.woocommerce button.button.tm-btn--primary:hover,
.woocommerce input.button.tm-btn--primary:hover {
	background-color: var(--tm-primary-dark);
	border-color: var(--tm-primary-dark);
	color: #fff;
}

.woocommerce a.button.tm-btn--dark,
.woocommerce button.button.tm-btn--dark {
	background-color: var(--tm-text);
	border-color: var(--tm-text);
	color: #fff;
}

.woocommerce a.button.tm-btn--ghost,
.woocommerce button.button.tm-btn--ghost {
	background-color: var(--tm-background);
	border-color: var(--tm-border-strong);
	color: var(--tm-text);
}

.woocommerce a.button.tm-btn--ghost:hover,
.woocommerce button.button.tm-btn--ghost:hover {
	border-color: var(--tm-primary);
	color: var(--tm-primary);
}

.woocommerce a.button.tm-btn--danger,
.woocommerce button.button.tm-btn--danger {
	background-color: var(--tm-danger);
	border-color: var(--tm-danger);
	color: #fff;
}

/* -------------------------------------------------------------------------
 * Checkout
 *
 * WooCommerce emits three siblings inside `form.checkout`: the customer
 * details, an `<h3>` for the order review, and the review itself. Put that in
 * a two-column grid and the heading takes the top of the right-hand column
 * while the review is pushed to a second row — which begins only after the
 * left column's thousand pixels of address fields have finished. The result
 * was a summary heading floating alone with its own table a full screen
 * below it.
 *
 * The fix is to let the details span both rows so they stop defining where
 * row two starts, and pin the heading and the review to the right column.
 * Then the summary sticks alongside the form, which is where a shopper keeps
 * glancing while they type.
 * ---------------------------------------------------------------------- */

.woocommerce-checkout form.checkout {
	display: grid;
	gap: clamp(20px, 2.6vw, 34px);
	align-content: start;
}

/*
 * `min-width: 0` on the two grid children, and it is not optional.
 *
 * A grid item defaults to `min-width: auto`, which means it refuses to shrink
 * below the intrinsic width of its content. One long label inside the billing
 * block — "Municipality / Rural municipality" — was enough to hold the column
 * at 409px inside a 350px form, and the whole checkout scrolled sideways on a
 * phone. The track was the right size all along; the item was ignoring it.
 */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	min-width: 0;
}

@media (min-width: 1000px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: minmax(0, 1fr) clamp(340px, 30%, 420px);
		grid-template-rows: auto 1fr;
	}

	.woocommerce-checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		position: sticky;
		top: 24px;
	}
}

/* Billing and shipping side by side inside the left column, and the same
   clearfix trap as the login page — generated content on a grid container is
   a grid item, and here it was taking two of the four cells. */
.woocommerce-checkout #customer_details {
	display: grid;
	gap: clamp(18px, 2vw, 28px);
}

.woocommerce-checkout #customer_details::before,
.woocommerce-checkout #customer_details::after {
	content: none;
}

@media (min-width: 640px) {
	.woocommerce-checkout #customer_details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: auto;
	float: none;
	min-width: 0;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 16px;
	font-size: var(--tm-fs-lg);
}

/* The order summary reads as one panel rather than a stack of loose tables. */
.woocommerce-checkout #order_review {
	padding: clamp(18px, 2vw, 24px);
	background: var(--tm-surface-2);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);

	/*
	 * The summary panel is the narrowest column on the page and it is where
	 * the longest unbroken strings land — product names, and the plugin's
	 * "Sign in to spend your SecurityCoins" link. Anything that cannot wrap
	 * here pushes the entire checkout sideways on a phone.
	 */
	overflow-wrap: anywhere;
}

.woocommerce-checkout .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--tm-fs-sm);

	/*
	 * `table-layout: fixed`, because a table sizes itself to its content by
	 * default and a product name like "Uniview 4MP Full-Colour Night Vision
	 * Bullet Camera" is wider than a phone. Auto layout made the summary
	 * panel push the whole checkout sideways; fixed layout makes the columns
	 * obey the panel instead, and the name wraps.
	 */
	table-layout: fixed;
}

.woocommerce-checkout .shop_table .product-name {
	overflow-wrap: anywhere;
}

.woocommerce-checkout .shop_table thead th {
	padding: 0 0 10px;
	border-bottom: 1px solid var(--tm-border);
	font-size: var(--tm-fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tm-muted);
	text-align: left;
}

.woocommerce-checkout .shop_table td,
.woocommerce-checkout .shop_table th {
	padding: 12px 0;
	border-bottom: 1px solid var(--tm-border);
	vertical-align: top;

	/* Every cell, not just the product name: the rewards row carries a link
	   reading "Sign in to spend your SecurityCoins", which is long enough on
	   its own to push a fixed-layout table past a phone's width. */
	overflow-wrap: anywhere;
}

.woocommerce-checkout .shop_table td:last-child,
.woocommerce-checkout .shop_table th:last-child {
	text-align: right;
}

/*
 * Only the price itself refuses to wrap.
 *
 * `white-space: nowrap` on the whole right-hand cell keeps "Rs 14,350" in one
 * piece, which is what it was for — but that column also carries the rewards
 * row's "Sign in to spend your SecurityCoins" link, and nowrap overrides any
 * amount of `overflow-wrap`. One long link held the table 50px wider than the
 * phone it was on. Narrowing the rule to the amount fixes the overflow and
 * still never splits a number across two lines.
 */
.woocommerce-checkout .shop_table .woocommerce-Price-amount {
	white-space: nowrap;
}

.woocommerce-checkout .shop_table .product-name {
	color: var(--tm-text);
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.woocommerce-checkout .shop_table .product-quantity {
	color: var(--tm-muted);
	font-weight: 600;
}

.woocommerce-checkout .shop_table tfoot th {
	font-weight: 600;
	text-align: left;
}

.woocommerce-checkout .shop_table tfoot .order-total th,
.woocommerce-checkout .shop_table tfoot .order-total td {
	padding-top: 14px;
	border-bottom: 0;
	font-size: var(--tm-fs-lg);
}

.woocommerce-checkout .shop_table tfoot .order-total td {
	color: var(--tm-primary);
	font-weight: 700;
}

/* Payment methods as selectable rows rather than a bare radio list. */
.woocommerce-checkout #payment {
	margin-top: 18px;
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	display: grid;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 12px 14px;
	background: var(--tm-background);
	border: 1px solid var(--tm-border-strong);
	border-radius: var(--tm-radius);
	transition: border-color var(--tm-speed) var(--tm-ease), box-shadow var(--tm-speed) var(--tm-ease);
}

.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--tm-primary);
	box-shadow: 0 0 0 3px rgba(var(--tm-primary-rgb), .12);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 600;
	cursor: pointer;
}

.woocommerce-checkout #payment .payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	background: var(--tm-surface-2);
	border-radius: var(--tm-radius);
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

.woocommerce-checkout #payment .payment_box::before {
	display: none;
}

/* The one button on the page that matters. */
.woocommerce-checkout #payment #place_order,
.woocommerce #payment button.button.alt#place_order {
	width: 100%;
	min-height: 52px;
	padding: 14px 22px;
	background: var(--tm-primary);
	border: 1px solid var(--tm-primary);
	border-radius: var(--tm-radius);
	font-size: var(--tm-fs-base);
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

.woocommerce-checkout #payment #place_order:hover {
	background: var(--tm-primary-dark);
	border-color: var(--tm-primary-dark);
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 14px;
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

/* The coupon prompt is a quiet aside, not a banner competing with the form. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: var(--tm-surface-2);
	border: 1px dashed var(--tm-border-strong);
	border-left-width: 1px;
	border-radius: var(--tm-radius);
	font-size: var(--tm-fs-sm);
	color: var(--tm-muted);
}

.woocommerce-checkout .checkout_coupon {
	margin: 0 0 18px;
	padding: 16px;
	background: var(--tm-surface-2);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-lg);
}

/* Two fields per row where they are short, so the address block is not one
   long ribbon of inputs. */
@media (min-width: 480px) {
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last {
		float: none;
		width: auto;
	}

	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 14px;
	}

	/*
	 * Full width is the default; pairing is the exception.
	 *
	 * WooCommerce only marks the fields it *wants* side by side as
	 * `form-row-first` and `form-row-last` — first and last name. Gridding
	 * every child into two columns instead squeezed the Nepal address fields
	 * into half-width boxes with labels wrapping over three lines ("Ward
	 * number", "Municipality / Rural municipality"), which is worse than the
	 * single column it replaced.
	 */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
	.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
		grid-column: 1 / -1;
	}

	/*
	 * Only the name fields pair.
	 *
	 * `form-row-first` / `form-row-last` is not a reliable signal here: the
	 * Nepal address fields carry it too, and half a column is not enough for
	 * a district select or a label reading "Municipality / Rural
	 * municipality". Naming the two fields that genuinely belong side by side
	 * is duller and correct.
	 */
	.woocommerce-checkout #billing_first_name_field,
	.woocommerce-checkout #shipping_first_name_field {
		grid-column: 1;
	}

	.woocommerce-checkout #billing_last_name_field,
	.woocommerce-checkout #shipping_last_name_field {
		grid-column: 2;
	}
}

/* WooCommerce sizes those rows with percentage widths and floats for its own
   layout. Inside a grid they only shrink the field. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row {
	width: auto;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

/* -------------------------------------------------------------------------
 * Installation services
 *
 * A service is not a product you look at. The catalogue card is built around
 * a square image well, and a list of eight fitting services rendered eight
 * copies of the same grey placeholder — a page whose dominant visual element
 * was a picture that means nothing, repeated.
 *
 * So this list drops the image entirely and spends the space on what someone
 * choosing a fitter actually reads: what the job is, what it costs, and how
 * to book it. Nothing else about the card changes, which is why this is a
 * dozen rules rather than a second template.
 * ---------------------------------------------------------------------- */

.tmc-services {
	--tm-service-accent: var(--tm-primary);
}

.tmc-services .tm-card__media,
.tmc-services .tm-card__actions,
.tmc-services .tm-card__rating,
.tmc-services .tm-card__brand,
.tmc-services .tm-card__stock-bar {
	display: none;
}

.tmc-services .tm-card {
	position: relative;
	padding: clamp(20px, 2.2vw, 26px);
	padding-inline-start: clamp(22px, 2.4vw, 28px);
	overflow: hidden;
}

/* A colour edge instead of a photograph: it gives the card an anchor and a
   reading direction without pretending to show you anything. */
.tmc-services .tm-card::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--tm-service-accent);
}

.tmc-services .tm-card__body {
	display: grid;
	gap: 10px;
	padding: 0;
}

.tmc-services .tm-card__title {
	font-size: var(--tm-fs-lg);
	line-height: 1.3;
}

.tmc-services .tm-card__title a {
	color: var(--tm-text);
	text-decoration: none;
}

.tmc-services .tm-card__title a:hover {
	color: var(--tm-primary);
}

/* The excerpt earns its place here — on a service, the sentence explaining
   what is included is the whole decision. */
.tmc-services .tm-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: var(--tm-fs-sm);
	line-height: 1.55;
	color: var(--tm-muted);
}

.tmc-services .tm-card__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-top: 2px;
	font-size: var(--tm-fs-xl);
	font-weight: 700;
	color: var(--tm-text);
}

.tmc-services .tm-card__price .woocommerce-Price-amount {
	font-size: inherit;
}

.tmc-services .tm-card__cta {
	margin-top: 4px;
}

.tmc-services .tm-card__cta .button {
	width: 100%;
}

/* Three across at desktop, and never a lone orphan on a row of its own: the
   list is eight items, so four columns would leave one stranded. */
@media (min-width: 700px) {
	.tmc-services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.tmc-services {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}