/*
Theme Name: Therapy Resources
Theme URI: http://localhost/therapy-resources-sg/
Author: Syazwan Yuznan
Author URI: https://localhost/
Description: Lightweight theme for Therapy Resources. No external dependencies, no jQuery, no page builder. Focused on speed, accessibility and responsive design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: therapy-resources
Tags: custom-menu, custom-logo, featured-images, translation-ready, accessibility-ready, threaded-comments, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	/* ------------------------------------------------------------------
	   Palette taken STRAIGHT from the logo (measured pixel by pixel):
	     navy        #1c3f93  (dominant — 4,989 coloured px)
	     lime green  #c2d82e  (2,859 px)
	   Contrast rules (WCAG):
	     navy on white        = 11.58:1  -> safe for text
	     navy on lime green   =  7.40:1  -> safe
	     lime green on white  =  2.20:1  -> NEVER use as text
	     white on lime green  =  1.56:1  -> NEVER use
	   So lime green is a BACKGROUND colour only, with navy text on it.
	   ------------------------------------------------------------------ */
	--tr-primary: #1c3f93;
	--tr-primary-dark: #142e6e;
	--tr-primary-light: #e8edfa;
	--tr-accent: #c2d82e;
	--tr-accent-dark: #a8bb1f;
	--tr-accent-soft: #f5fadc;
	--tr-text: #111a2e;
	--tr-text-muted: #5a6480;
	--tr-border: #dfe3ee;
	--tr-bg: #ffffff;
	--tr-bg-alt: #f6f8fd;
	--tr-footer-bg: #142a63;
	--tr-radius: 10px;
	--tr-shadow: 0 1px 2px rgba(17, 26, 46, .06), 0 1px 3px rgba(17, 26, 46, .1);
	--tr-container: 1140px;
	--tr-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--tr-font);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--tr-text);
	background: var(--tr-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	line-height: 1.25;
	font-weight: 700;
	color: var(--tr-text);
}

h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.45rem); }
h4 { font-size: 1.125rem; }

p, ul, ol, dl, table, pre, blockquote, figure {
	margin: 0 0 1.25rem;
}

ul, ol {
	padding-left: 1.4rem;
}

img, svg, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

a {
	color: var(--tr-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover,
a:focus {
	color: var(--tr-primary-dark);
}

blockquote {
	margin-left: 0;
	padding: .25rem 0 .25rem 1.25rem;
	border-left: 4px solid var(--tr-primary);
	color: var(--tr-text-muted);
	font-style: italic;
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
}

pre {
	overflow: auto;
	padding: 1rem;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

hr {
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--tr-border);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: .6rem .75rem;
	border: 1px solid var(--tr-border);
	text-align: left;
}

th {
	background: var(--tr-bg-alt);
	font-weight: 600;
}

/* Focus visibility — accessibility.
   Use navy, not lime green: lime on white is only 2.20:1 (fails WCAG).
   Navy on white = 11.58:1. */
:focus-visible {
	outline: 3px solid var(--tr-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On a navy background (buttons), use the lime outline so it stays visible. */
.tr-btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.wp-block-button__link:focus-visible {
	outline-color: var(--tr-accent);
}

/* ==========================================================================
   3. Accessibility helpers
   ========================================================================== */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: .75rem;
	left: .75rem;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: .7rem 1.1rem;
	clip: auto;
	background: var(--tr-primary);
	color: #fff;
	border-radius: var(--tr-radius);
	text-decoration: none;
	font-weight: 600;
}

.skip-link:focus {
	clip: auto;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.tr-container {
	width: 100%;
	max-width: var(--tr-container);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.tr-content-area {
	/* No padding here. 2.5rem on top used to leave a white strip between the
	   header and the hero band (the hero sits inside this box), and 3.5rem at the
	   bottom added spacing that did not match other pages.
	   Content spacing is controlled by .tr-container further down. */
	padding: 0;
}

/* Page vertical rhythm: the hero sits flush with the header, content starts
   3.5rem after the hero and ends 5rem before the footer — the same on every page
   (it used to depend on the first element: h2 vs p gave different gaps).
   Uses padding-block so .tr-container's left/right padding is kept. */
.tr-content-area > .tr-container:first-of-type {
	padding-block: 3.5rem 5rem;
}

.tr-layout {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
	/* Content takes the full container width (same edge as the hero, the shop
	   grid and the footer). No 780px reading-width cap. */
	max-width: none;
	margin-left: 0;
	margin-right: auto;
}

@media (min-width: 62rem) {
	.tr-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}

.tr-main {
	min-width: 0;
}

/* ==========================================================================
   5. Header
   ========================================================================== */
.tr-header {
	background: var(--tr-bg);
	border-bottom: 1px solid var(--tr-border);
	position: sticky;
	top: 0;
	z-index: 50;
	transition: box-shadow .2s ease;
}

/* Subtle shadow when the header is stuck (is-stuck added by JS). */
.tr-header.is-stuck {
	box-shadow: 0 4px 18px rgba(17, 26, 46, .1);
}

/* Logo image: kept small so the sticky header is not too tall. */
.tr-header .custom-logo-link img,
.tr-header .custom-logo {
	max-height: 46px;
	width: auto;
}

.tr-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: .9rem;
	padding-bottom: .9rem;
}

.tr-branding {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.tr-branding img {
	max-height: 52px;
	width: auto;
}

.tr-site-title {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.2;
}

.tr-site-title a {
	color: var(--tr-text);
	text-decoration: none;
}

.tr-site-description {
	margin: .15rem 0 0;
	font-size: .85rem;
	color: var(--tr-text-muted);
}

/* ==========================================================================
   6. Navigation
   ========================================================================== */
.tr-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .8rem;
	background: var(--tr-bg-alt);
	color: var(--tr-text);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
}

@media (min-width: 48rem) {
	.tr-nav-toggle {
		display: none;
	}
}

.tr-nav {
	width: 100%;
}

@media (min-width: 48rem) {
	.tr-nav {
		width: auto;
	}
}

.tr-nav[hidden] {
	display: none;
}

/* Added by JS only. If JS dies, the menu stays visible. */
.tr-nav.is-collapsed {
	display: none;
}

@media (min-width: 48rem) {
	.tr-nav.is-collapsed {
		display: block;
	}
}

.tr-menu {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.tr-menu {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: .35rem;
	}
}

.tr-menu a {
	display: block;
	padding: .5rem .75rem;
	color: var(--tr-text);
	text-decoration: none;
	border-radius: var(--tr-radius);
	font-size: .95rem;
}

.tr-menu a:hover,
.tr-menu a:focus {
	background: var(--tr-bg-alt);
	color: var(--tr-primary-dark);
}

.tr-menu .current-menu-item > a,
.tr-menu .current_page_item > a,
.tr-menu .current-menu-ancestor > a {
	background: var(--tr-primary-light);
	color: var(--tr-primary-dark);
	font-weight: 600;
}

/* Dropdowns */
.tr-menu .sub-menu {
	margin: 0;
	padding: 0 0 0 1rem;
	list-style: none;
}

@media (min-width: 48rem) {
	.tr-menu li {
		position: relative;
	}

	.tr-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 210px;
		padding: .35rem;
		background: var(--tr-bg);
		border: 1px solid var(--tr-border);
		border-radius: var(--tr-radius);
		box-shadow: var(--tr-shadow);
		display: none;
	}

	.tr-menu li:hover > .sub-menu,
	.tr-menu li:focus-within > .sub-menu {
		display: block;
	}
}

/* ==========================================================================
   7. Posts & pages
   ========================================================================== */
.tr-post {
	margin-bottom: 2.5rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--tr-border);
}

.tr-post:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.tr-entry-header {
	margin-bottom: 1rem;
}

.tr-entry-title {
	margin-bottom: .35rem;
}

.tr-entry-title a {
	color: var(--tr-text);
	text-decoration: none;
}

.tr-entry-title a:hover,
.tr-entry-title a:focus {
	color: var(--tr-primary);
}

.tr-entry-meta {
	font-size: .85rem;
	color: var(--tr-text-muted);
}

.tr-entry-meta a {
	color: inherit;
}

.tr-entry-thumb {
	margin-bottom: 1.25rem;
}

.tr-entry-thumb img {
	width: 100%;
	border-radius: var(--tr-radius);
}

.tr-entry-content > *:first-child {
	margin-top: 0;
}

.tr-entry-content > *:last-child {
	margin-bottom: 0;
}

.tr-read-more {
	display: inline-block;
	margin-top: .5rem;
	font-weight: 600;
}

.tr-page-links {
	margin: 1.5rem 0;
	font-size: .9rem;
}

.tr-page-links a,
.tr-page-links > span {
	display: inline-block;
	min-width: 2.2rem;
	padding: .35rem .55rem;
	margin-right: .25rem;
	text-align: center;
	border: 1px solid var(--tr-border);
	border-radius: 6px;
	text-decoration: none;
}

.tr-page-links > span {
	background: var(--tr-primary);
	border-color: var(--tr-primary);
	color: #fff;
	font-weight: 600;
}

/* ==========================================================================
   8. Buttons
   ========================================================================== */
.tr-btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
	display: inline-block;
	padding: .7rem 1.25rem;
	background: var(--tr-primary);
	color: #fff;
	border: 1px solid var(--tr-primary);
	border-radius: var(--tr-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.tr-btn:hover,
.tr-btn:focus,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
	background: var(--tr-primary-dark);
	border-color: var(--tr-primary-dark);
	color: #fff;
}

.tr-btn--ghost {
	background: transparent;
	color: var(--tr-primary);
}

.tr-btn--ghost:hover,
.tr-btn--ghost:focus {
	background: var(--tr-primary-light);
	color: var(--tr-primary-dark);
}

/* Accent button — lime green from the logo.
   NAVY text on lime = 7.40:1 (passes AA).
   Never put white text on lime (1.56:1, fails). */
.tr-btn--accent {
	background: var(--tr-accent);
	border-color: var(--tr-accent);
	color: var(--tr-primary-dark);
}

.tr-btn--accent:hover,
.tr-btn--accent:focus {
	background: var(--tr-accent-dark);
	border-color: var(--tr-accent-dark);
	color: var(--tr-primary-dark);
}

/* ==========================================================================
   9. Forms
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: .65rem .8rem;
	font: inherit;
	color: var(--tr-text);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--tr-primary);
	outline: 2px solid var(--tr-primary-light);
}

label {
	display: block;
	margin-bottom: .3rem;
	font-weight: 600;
	font-size: .92rem;
}

.tr-search-form {
	display: flex;
	gap: .5rem;
	align-items: stretch;
}

.tr-search-form input[type="search"] {
	flex: 1 1 auto;
}

.tr-search-form button {
	flex: 0 0 auto;
}

/* ==========================================================================
   10. Comments
   ========================================================================== */
.tr-comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--tr-border);
}

.tr-comment-list,
.tr-comment-list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-comment-list .children {
	margin-left: 1.5rem;
}

.tr-comment {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--tr-border);
}

.tr-comment-meta {
	font-size: .85rem;
	color: var(--tr-text-muted);
	margin-bottom: .5rem;
}

.tr-comment-respond {
	margin-top: 2rem;
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */
.tr-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: 2rem;
}

.tr-pagination .page-numbers {
	display: inline-block;
	min-width: 2.4rem;
	padding: .45rem .6rem;
	text-align: center;
	border: 1px solid var(--tr-border);
	border-radius: 6px;
	text-decoration: none;
	color: var(--tr-text);
}

.tr-pagination .page-numbers.current,
.tr-pagination .page-numbers:hover {
	background: var(--tr-primary);
	border-color: var(--tr-primary);
	color: #fff;
}

/* ==========================================================================
   12. Sidebar & widgets
   ========================================================================== */
.tr-sidebar .widget {
	margin-bottom: 2rem;
	padding: 1.25rem;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.tr-widget-title {
	margin-bottom: .85rem;
	padding-bottom: .5rem;
	font-size: 1rem;
	border-bottom: 1px solid var(--tr-border);
}

.tr-sidebar .widget ul {
	margin: 0;
	padding-left: 1.1rem;
}

.tr-sidebar .widget li + li {
	margin-top: .4rem;
}

/* ==========================================================================
   13. Hero / front page
   ========================================================================== */
.tr-hero {
	padding: clamp(2.5rem, 6vw, 5rem) 0;
	background: linear-gradient(160deg, var(--tr-primary-light) 0%, var(--tr-bg-alt) 100%);
	text-align: center;
}

.tr-hero__title {
	margin-bottom: .75rem;
}

/* Lime-green accent bar from the logo — carries the brand colour into the hero. */
.tr-hero__title::after {
	content: "";
	display: block;
	width: 92px;
	height: 6px;
	margin: 1.1rem auto 0;
	background: var(--tr-accent);
	border-radius: 3px;
}

.tr-hero__text {
	max-width: 46rem;
	margin: 0 auto 1.75rem;
	font-size: 1.08rem;
	color: var(--tr-text-muted);
}

.tr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}

.tr-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 2.5rem;
}

.tr-card {
	padding: 1.5rem;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	/* Lime-green accent from the logo along the top of the card. */
	border-top: 4px solid var(--tr-accent);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
}

.tr-card h3 {
	margin-bottom: .5rem;
}

.tr-card p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   14. 404 / no results
   ========================================================================== */
.tr-notfound {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
}

.tr-notfound__code {
	font-size: clamp(3.5rem, 8vw, 6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--tr-primary);
	margin-bottom: .5rem;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */
.tr-footer {
	margin-top: auto;
	padding: 2.5rem 0 1.5rem;
	background: var(--tr-footer-bg);
	color: #c6d2ee;
	font-size: .92rem;
}

.tr-footer a {
	color: #fff;
}

.tr-footer__widgets {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-bottom: 2rem;
}

.tr-footer__col p {
	margin-bottom: .75rem;
	color: #c6d2ee;
}

.tr-footer__col strong {
	color: #fff;
}

.tr-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-footer__list li {
	margin-bottom: .45rem;
}

.tr-footer__list a {
	color: #c6d2ee;
	text-decoration: none;
}

.tr-footer__list a:hover,
.tr-footer__list a:focus {
	color: #fff;
	text-decoration: underline;
}

.tr-footer .tr-widget-title {
	color: #fff;
	/* No rule under the footer headings. The base .tr-widget-title rule draws one,
	   so the colour override alone only recoloured it — the line was still there. */
	border-bottom: 0;
}

/* --- Mobile header: one brand row ------------------------------------- */
/* Logo, Menu, account and cart share a single line on a phone. Previously the row
   wrapped by itself, and the break moved with the viewport: at 390px Menu and the
   icons were together on a second row, at 414px Menu jumped up beside the logo and
   the icons were left on their own. nowrap plus a shrinking logo makes the outcome
   the same at every width. */
@media (max-width: 47.999rem) {
	.tr-header__inner {
		gap: .5rem;
		padding-top: .7rem;
		padding-bottom: .7rem;
	}

	/* The brand row stays on one line because the logo shrinks to fit (see below) —
	   no need to forbid wrapping. Forbidding it also pinned the nav panel to the
	   118px column it would have occupied when open, instead of a full-width row. */
	.tr-nav {
		order: 4;
		flex: 1 1 100%;
	}

	/* `flex: 1 1 0` rather than `1 1 auto`: a flex line decides where to break using
	   each item's hypothetical size, which with `basis: auto` is the logo's full
	   258px — so the row broke before shrinking could happen. A zero basis makes the
	   logo's size "whatever is left", which is what keeps the three controls on one
	   line. min-width: 0 lets it actually shrink instead of overflowing. */
	.tr-branding {
		order: 1;
		flex: 1 1 0;
		min-width: 0;
	}

	.tr-branding > * {
		min-width: 0;
	}

	.tr-branding img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 42px;
		min-width: 0;
	}

	/* One consistent size for the three controls. Their widths were 46px (account),
	   75px (cart) and 34px (Menu): the cart's badge sat beside its icon taking 29px
	   of its own, and the Menu had lost its padding. Square, equal targets, icon
	   centred — 44px is the usual minimum comfortable tap target.
	   Order 3 puts Menu last, at the far right: logo, then account and cart, then Menu. */
	.tr-account-link,
	.tr-cart-link,
	.tr-nav-toggle {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}

	/* The badge moves to the icon's corner, so it no longer widens the button. */
	.tr-cart-count {
		position: absolute;
		top: -5px;
		right: -5px;
		min-width: 1.15rem;
		height: 1.15rem;
		padding: 0 .25rem;
		font-size: .68rem;
	}

	/* Order 3 keeps the Menu at the far right — after the account and cart. */
	.tr-nav-toggle {
		order: 3;
	}

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

	.tr-header__actions {
		order: 2;
		flex: 0 0 auto;
	}
}

.tr-footer__bottom {
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
	text-align: center;
}

.tr-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	justify-content: center;
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   16. WordPress core alignment classes (front-end consistency)
   ========================================================================== */
.alignleft {
	float: left;
	margin: .35rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: .35rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin: .35rem auto 1rem;
}

.wp-caption,
.wp-caption-text,
figcaption {
	max-width: 100%;
	font-size: .88rem;
	color: var(--tr-text-muted);
	text-align: center;
}

.sticky .tr-entry-title::before {
	content: "★ ";
	color: var(--tr-primary);
}

/* ==========================================================================
   17. Body layout: keep footer at bottom
   ========================================================================== */
.tr-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ==========================================================================
   18. Print
   ========================================================================== */
@media print {
	.tr-header,
	.tr-nav,
	.tr-footer,
	.tr-sidebar,
	.tr-pagination,
	.tr-comments {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 12pt;
	}

	a {
		color: #000;
	}
}

/* ==========================================================================
   19. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* ==========================================================================
   20. Content helpers
   ========================================================================== */
.tr-lead {
	font-size: 1.12rem;
	color: var(--tr-text-muted);
}

.tr-muted {
	color: var(--tr-text-muted);
	font-size: .92rem;
}

.tr-entry-content h2 {
	margin-top: 2.25rem;
	padding-top: .25rem;
}

.tr-entry-content h2:first-child {
	margin-top: 0;
}

.tr-entry-content h3 {
	margin-top: 1.75rem;
}

/* ==========================================================================
   21. Contact cards
   ========================================================================== */
.tr-contact-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 2rem 0;
}

.tr-contact-card {
	padding: 1.5rem;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-top: 4px solid var(--tr-accent);
	border-radius: var(--tr-radius);
}

.tr-contact-card h3 {
	margin-top: 0;
	margin-bottom: .75rem;
	color: var(--tr-primary);
}

.tr-contact-card p {
	margin-bottom: .75rem;
}

.tr-contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-contact-list li {
	padding: .3rem 0;
	font-size: .95rem;
}

/* ==========================================================================
   Contact page: enquiry form beside the contact details.
   Both columns are panels so the page reads like the rest of the site:
   the form takes the white .tr-panel card, the details take the accent-topped
   .tr-contact-card treatment.
   ========================================================================== */
.tr-contact-split {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	/* Stretch so the form card and the sidebar end level with each other. */
	align-items: stretch;
	margin: 2rem 0 2.5rem;
}

.tr-contact-split__form {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 14px;
	box-shadow: var(--tr-shadow);
}

/* The theme's .tr-entry-content h3 rule adds 1.75rem on top, which stacks with
   the panel's own padding and pushes the heading down. Inside a panel the
   heading sits flush with the padding. */
.tr-contact-split__form h3 {
	margin-top: 0;
}

.tr-contact-split__info {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-top: 4px solid var(--tr-accent);
	border-radius: var(--tr-radius);
}

.tr-contact-split__info h3 {
	margin: 0 0 1.1rem;
	color: var(--tr-primary);
}

.tr-contact-split__info .tr-contact-list li {
	padding: .45rem 0;
}

.tr-contact-split__info p {
	margin-bottom: 1rem;
	line-height: 1.7;
}

.tr-contact-split__info p:last-child {
	margin-bottom: 0;
}

/* Card row under the split: Customer Care, Order Enquiries, Company details. */
.tr-contact-cards {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 0 0 2.5rem;
}

.tr-contact-cards .tr-contact-card p:last-child {
	margin-bottom: 0;
}

/* Clinical Sales Consultation panel — navy, like the homepage CTA band. */
.tr-contact-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--tr-primary);
	color: #fff;
	border-radius: 14px;
}

.tr-contact-cta__text {
	flex: 1 1 22rem;
	min-width: 0;
}

.tr-contact-cta__text h3 {
	margin: 0 0 .6rem;
	font-size: 1.3rem;
	color: #fff;
}

.tr-contact-cta__text p {
	margin: 0;
	max-width: 48ch;
	line-height: 1.7;
	color: #d7def5;
}

/* Must be allowed to shrink: a long button label is wider than the panel's
   inner width on a phone, and `flex: 0 0 auto` would push it past the viewport. */
.tr-contact-cta__action {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.tr-contact-cta__action .tr-btn {
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

/* Breathing room between the pairs of fields rather than one flat stack. */
.tr-cform__grid {
	display: grid;
	gap: 1rem;
}

.tr-cform__row {
	margin: 0;
}

/* "Mr" + "Name" share a row, as on the client's design. */
.tr-cform__row--split {
	display: grid;
	gap: 1rem;
	grid-template-columns: 110px minmax(0, 1fr);
}

/* Right column: the contact details plus the enquiry cards underneath. */
.tr-contact-split__side {
	display: grid;
	gap: 1.75rem;
	align-content: start;
}

/* Stacked in the sidebar, so ignore the full-width auto-fit row. */
.tr-contact-split__side .tr-contact-cards {
	grid-template-columns: 1fr;
	margin: 0;
}

.tr-cform__field {
	display: block;
	margin: 0;
}

.tr-cform__label {
	display: block;
	margin-bottom: .4rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--tr-text);
}

.tr-cform__req {
	color: #b3261e;
	font-weight: 700;
}

.tr-cform__hint {
	margin: 0 0 1.5rem;
	font-size: .85rem;
	color: var(--tr-text-muted);
}

/* The form is split into "Your details" and "Your enquiry". */
.tr-cform__group + .tr-cform__group {
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--tr-border);
}

.tr-cform__legend {
	margin: 0 0 1rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tr-primary);
}

.tr-cform input,
.tr-cform select,
.tr-cform textarea {
	font-size: .95rem;
}

.tr-cform input[type="text"],
.tr-cform input[type="email"],
.tr-cform input[type="tel"],
.tr-cform input[type="number"],
.tr-cform select,
.tr-cform textarea {
	width: 100%;
	padding: .8rem 1rem;
	font: inherit;
	color: var(--tr-text);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tr-cform input::placeholder,
.tr-cform textarea::placeholder {
	color: var(--tr-text-muted);
	opacity: 1;
}

.tr-cform input:hover,
.tr-cform select:hover,
.tr-cform textarea:hover {
	border-color: #c6cde0;
}

.tr-cform input:focus,
.tr-cform select:focus,
.tr-cform textarea:focus {
	border-color: var(--tr-primary);
	box-shadow: 0 0 0 3px var(--tr-primary-light);
	outline: none;
}

.tr-cform textarea {
	/* Taller than the default rows=6: the comments box is the main input, and a
	   generous one also keeps the form card level with the sidebar beside it. */
	min-height: 300px;
	resize: vertical;
}

.tr-cform__actions {
	margin: 1.5rem 0 0;
}

/* Honeypot: off-canvas rather than display:none, so bots that skip hidden
   fields still see it while nobody using the page ever does. */
.tr-cform__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status message, following the theme's notice pattern. */
.tr-cform__notice {
	margin: 0 0 1.25rem;
	padding: .9rem 1.1rem;
	font-weight: 600;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-left: 4px solid var(--tr-primary);
	border-radius: 6px;
}

.tr-cform__notice--success {
	background: var(--tr-accent-soft);
	border-left-color: var(--tr-accent-dark);
}

.tr-cform__notice--error {
	background: #fdecea;
	border-left-color: #b3261e;
}

@media (max-width: 47.999rem) {
	.tr-contact-split {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.tr-cform__row--split {
		grid-template-columns: 88px minmax(0, 1fr);
		gap: .65rem;
	}
}

/* ==========================================================================
   22. Homepage sections
   ========================================================================== */
.tr-section {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

.tr-section--alt {
	background: var(--tr-bg-alt);
}

.tr-section--tight {
	padding: clamp(1.75rem, 3vw, 2.75rem) 0;
}

.tr-section__head {
	max-width: 46rem;
	margin: 0 auto 2.25rem;
	text-align: center;
}

.tr-section__eyebrow {
	display: inline-block;
	margin-bottom: .6rem;
	padding: .25rem .7rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tr-primary-dark);
	background: var(--tr-accent-soft);
	border-radius: 999px;
}

.tr-section__title {
	margin-bottom: .6rem;
}

.tr-section__text {
	margin-bottom: 0;
	color: var(--tr-text-muted);
}

/* ---- Hero ---- */
.tr-hero--home {
	padding: clamp(3rem, 7vw, 5.5rem) 0;
}

.tr-hero__logo {
	max-width: 340px;
	margin: 0 auto 1.5rem;
}

/* ---- A: brand logo bar ---- */
.tr-brandbar {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	align-items: center;
}

.tr-brandbar__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
	padding: 1rem;
	font-weight: 700;
	text-align: center;
	color: var(--tr-primary);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	transition: border-color .15s ease, transform .15s ease;
}

.tr-brandbar__item:hover,
.tr-brandbar__item:focus {
	border-color: var(--tr-accent);
	transform: translateY(-2px);
}

/* ---- B/C/D: brand showcase rows ---- */
.tr-showcase {
	display: grid;
	gap: 2rem;
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.tr-showcase {
		grid-template-columns: 1fr 1fr;
	}

	.tr-showcase--flip .tr-showcase__media {
		order: 2;
	}
}

.tr-showcase__media {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, 1fr);
}

.tr-showcase__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	padding: 1rem;
	font-weight: 600;
	font-size: .9rem;
	text-align: center;
	color: var(--tr-text-muted);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.tr-showcase__brand {
	margin-bottom: .75rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tr-primary);
}

/* ---- CTA band ---- */
.tr-cta-band {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	background: var(--tr-primary);
	color: #fff;
	text-align: center;
}

.tr-cta-band h2 {
	color: #fff;
}

.tr-cta-band p {
	color: #d7def5;
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

.tr-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.tr-cta-band .tr-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
}

.tr-cta-band .tr-btn--ghost:hover,
.tr-cta-band .tr-btn--ghost:focus {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

/* ---- Distributor band ---- */
.tr-distributors {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin-top: 2rem;
	text-align: left;
}

.tr-distributors__col {
	padding: 1.35rem;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--tr-radius);
}

.tr-distributors__col h3 {
	margin-top: 0;
	color: #fff;
	font-size: 1.05rem;
}

.tr-distributors__col p,
.tr-distributors__col li {
	color: #d7def5;
	font-size: .92rem;
}

.tr-distributors__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-distributors__col a {
	color: #fff;
}

/* ==========================================================================
   23. Header top bar
   ========================================================================== */
.tr-topbar {
	background: var(--tr-primary-dark);
	color: #d7def5;
	font-size: .82rem;
}

/* Currency switcher widget: hide the widget title (visually hidden). */
.tr-topbar__widget h4 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tr-topbar__widget .yay-currency-custom-select-wrapper {
	margin: 0;
}

/* The plugin sets a fixed width (235px) on the wrapper — the currency box ends
   up wider than its text. Let it follow the content width. */
.tr-topbar__widget .yay-currency-custom-select-wrapper.small,
.tr-topbar__widget .yay-currency-custom-select-wrapper .yay-currency-custom-select {
	width: auto;
}

/* The plugin adds an 8px bottom margin to the switcher container -> the box
   becomes 38px and the text sits 4px higher than the tagline. Remove it. */
.tr-topbar__widget .yay-currency-single-page-switcher,
.tr-topbar__widget .yay-currency-widget-switcher {
	margin: 0;
	padding: 0;
}

.tr-topbar__widget .yay-currency-custom-select__trigger {
	min-height: 30px;
	padding: .15rem .5rem;
	font-size: .82rem;
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .25);
	border-radius: 6px;
	color: #fff;
}

.tr-topbar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	justify-content: center;
	align-items: center;
	padding: .5rem 1.25rem;
}

@media (min-width: 48rem) {
	.tr-topbar__inner {
		justify-content: space-between;
	}
}

.tr-topbar a {
	color: #fff;
	text-decoration: none;
}

.tr-topbar a:hover,
.tr-topbar a:focus {
	text-decoration: underline;
}

.tr-topbar__msgs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1.25rem;
}

/* Every top bar item is as tall as the currency button (30px) with its text
   centred — so the tagline lines up exactly with the currency box (the text used
   to sit 4px higher because its flex box was stretched). */
.tr-topbar__msgs > span {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
}

/* Small screens: one column, centred. The phone and email are dropped here — they
   are the widest part of the top bar, and a visitor who wants them has Contact Us
   in the menu — which leaves the tagline and the currency picker as the whole top
   bar. They get a wider gap than the base rule so they read as two separate things,
   and a row gap for the narrow phones (320px) where they stack. */
@media (max-width: 47.999rem) {
	.tr-topbar__inner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.tr-topbar__msgs:first-child {
		display: none;
	}

	.tr-topbar__msgs {
		justify-content: center;
		text-align: center;
		gap: 1rem 2.5rem;
	}

	/* The one block left spans the top bar, so the tagline sits against the left edge
	   and the currency picker against the right edge rather than the two huddling in
	   the middle. The 2.5rem column gap above survives as the minimum between them. */
	.tr-topbar__msgs:last-child {
		align-self: stretch;
		justify-content: space-between;
	}
}

/* ==========================================================================
   24. WooCommerce — product loop (shop / archive)
   ========================================================================== */
.woocommerce .woocommerce-breadcrumb {
	margin: 0 0 1.25rem;
	font-size: .85rem;
	color: var(--tr-text-muted);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--tr-text-muted);
}

.woocommerce .woocommerce-result-count {
	margin: 0 0 1.25rem;
	font-size: .9rem;
	color: var(--tr-text-muted);
}

.woocommerce .woocommerce-ordering {
	margin: 0 0 1.5rem;
}

.woocommerce .woocommerce-ordering select {
	width: auto;
	min-width: 210px;
}

.woocommerce ul.products {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

.woocommerce ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 1rem;
	text-align: center;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
	border-color: var(--tr-accent);
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(17, 26, 46, .1);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
	color: inherit;
}

.woocommerce ul.products li.product a img {
	width: 100%;
	height: auto;
	margin: 0 0 .85rem;
	border-radius: 8px;
	background: var(--tr-bg-alt);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0 0 .4rem;
	padding: 0;
	font-size: .97rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--tr-text);
}

.woocommerce ul.products li.product .price {
	margin: .35rem 0 .85rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tr-primary);
}

.woocommerce ul.products li.product .price del {
	margin-right: .35rem;
	font-size: .85em;
	font-weight: 400;
	color: var(--tr-text-muted);
	opacity: .85;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* "Add to cart" button — pushed down so the cards line up. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin-top: auto;
	align-self: stretch;
	text-align: center;
}

.woocommerce ul.products li.product .added_to_cart {
	display: block;
	margin-top: .5rem;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: underline;
	color: var(--tr-primary);
}

/* Small screens: two products per row.
   The base grid's 228px minimum cannot fit two columns below ~600px, so a phone
   fell back to one card per row — a 20-product page became a 10,000px scroll.
   Forcing two columns roughly halves the page height. Card padding and the title
   size come down to match, so the text still fits a ~150px-wide card. */
@media (max-width: 37.5rem) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.woocommerce ul.products li.product {
		padding: .75rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: .88rem;
	}

	.woocommerce ul.products li.product .price {
		margin-bottom: .6rem;
		font-size: .95rem;
	}

	/* The label "Select options" is ~108px at the default 16px/20px padding and
	   does not fit a ~143px card, so those buttons wrapped to two lines while
	   "Add to cart" stayed on one — uneven button heights within a row.
	   Tighter padding and a smaller size fit every label on one line. */
	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart {
		padding: .7rem .45rem;
		font-size: .82rem;
	}
}

/* Lencana jualan. */
.woocommerce span.onsale {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 3;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: .3rem .6rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--tr-primary-dark);
	background: var(--tr-accent);
	border-radius: 999px;
}

.woocommerce .star-rating {
	margin: 0 auto .5rem;
	color: var(--tr-accent-dark);
}

.woocommerce .star-rating::before {
	color: var(--tr-border);
}

/* ==========================================================================
   25. WooCommerce — single product page
   ========================================================================== */
.woocommerce div.product {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells,
	.woocommerce div.product .woocommerce-product-gallery--with-images + .summary ~ * {
		grid-column: 1 / -1;
	}
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce div.product div.images img {
	border-radius: var(--tr-radius);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: 6px;
	border: 1px solid var(--tr-border);
}

.woocommerce div.product .product_title {
	margin-bottom: .75rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

.woocommerce div.product p.price {
	margin: 0 0 1rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--tr-primary);
}

.woocommerce div.product p.price del {
	font-size: .6em;
	font-weight: 400;
	color: var(--tr-text-muted);
}

.woocommerce div.product p.price ins {
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 1.25rem;
}

.woocommerce div.product .product_meta {
	margin-top: 1.25rem;
	padding-top: 1rem;
	font-size: .85rem;
	color: var(--tr-text-muted);
	border-top: 1px solid var(--tr-border);
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: .3rem;
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin: 1.25rem 0;
}

.woocommerce div.product form.cart .button {
	flex: 0 0 auto;
}

/* Product tabs. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 1.5rem;
	padding: 0;
	border-bottom: 1px solid var(--tr-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: .7rem 1rem;
	font-weight: 600;
	color: var(--tr-text-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}

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

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	margin-top: 2.5rem;
}

/* ==========================================================================
   26. WooCommerce — kuantiti, notis, jadual
   ========================================================================== */
.woocommerce .quantity input.qty {
	width: 5rem;
	padding: .55rem .5rem;
	text-align: center;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 1.75rem;
	/* WooCommerce places its icon-font glyph at left: 1.5em. Reserve left padding
	   so the icon does not overlap the first letter of the message. */
	padding: 1rem 1.15rem 1rem 3.5em;
	list-style: none;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-left: 4px solid var(--tr-primary);
	border-radius: var(--tr-radius);
	font-size: .95rem;
}

.woocommerce-message {
	border-left-color: var(--tr-accent-dark);
}

.woocommerce-error {
	border-left-color: #b3261e;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: .5rem;
	padding: .45rem .9rem;
	font-size: .85rem;
}

.woocommerce table.shop_table {
	width: 100%;
	margin-bottom: 2rem;
	border: 1px solid var(--tr-border);
	border-collapse: collapse;
	border-radius: var(--tr-radius);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	padding: .8rem .75rem;
	background: var(--tr-bg-alt);
	font-size: .88rem;
	font-weight: 700;
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: .85rem .75rem;
	border-top: 1px solid var(--tr-border);
	vertical-align: middle;
}

.woocommerce table.shop_table img {
	width: 58px;
	height: auto;
	border-radius: 6px;
}

.woocommerce .cart-collaterals {
	display: block;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none !important;
	width: 100% !important;
	max-width: 30rem;
	margin-left: auto;
}

/* ==========================================================================
   27. WooCommerce — checkout
   ========================================================================== */
.woocommerce form.checkout.woocommerce-checkout {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
	.woocommerce form.checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

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

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

	.woocommerce form.checkout.woocommerce-checkout #order_review_heading {
		margin-top: 0;
	}
}

.woocommerce form .form-row {
	margin-bottom: 1rem;
}

.woocommerce form .form-row label {
	font-weight: 600;
	font-size: .92rem;
}

.woocommerce-checkout #payment {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 1.25rem;
	border-bottom: 1px solid var(--tr-border);
}

.woocommerce-checkout #payment div.form-row {
	padding: 1.25rem;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--tr-bg);
	border-radius: 8px;
}

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

/* ==========================================================================
   28. WooCommerce — pagination & akaun
   ========================================================================== */
.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-block;
	min-width: 2.5rem;
	padding: .5rem .65rem;
	text-align: center;
	color: var(--tr-text);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 8px;
	text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	color: #fff;
	background: var(--tr-primary);
	border-color: var(--tr-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .6rem .85rem;
	color: var(--tr-text);
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--tr-primary-dark);
	background: var(--tr-primary-light);
}

/* ==========================================================================
   29. Product search bar
   ========================================================================== */
.tr-shop-search {
	margin-bottom: 1.75rem;
}

.tr-shop-search .search-form,
.tr-shop-search form {
	display: flex;
	gap: .5rem;
	max-width: 34rem;
}

.tr-shop-search input[type="search"] {
	flex: 1 1 auto;
}

/* ==========================================================================
   30. Header cart & price on request
   ========================================================================== */
.tr-header__actions {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.tr-icon-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .75rem;
	color: var(--tr-text);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.tr-icon-link:hover,
.tr-icon-link:focus {
	color: var(--tr-primary-dark);
	border-color: var(--tr-primary);
	background: var(--tr-bg-alt);
}

.tr-icon-link svg {
	display: block;
	flex: 0 0 auto;
}

.tr-cart-link {
	position: relative;
}

/* Small screens: the account link text is visually hidden (it stays in the
   accessibility tree, so the link keeps its accessible name). */
@media (max-width: 47.999rem) {
	.tr-account-link__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

.tr-cart-link:hover,
.tr-cart-link:focus {
	color: var(--tr-primary-dark);
	background: var(--tr-bg-alt);
	border-color: var(--tr-accent);
}

.tr-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 .3rem;
	font-size: .72rem;
	font-weight: 700;
	color: var(--tr-primary-dark);
	background: var(--tr-accent);
	border-radius: 999px;
}

.tr-price-request {
	margin: .5rem 0 1rem;
	padding: .75rem 1rem;
	font-size: .92rem;
	color: var(--tr-primary-dark);
	background: var(--tr-accent-soft);
	border-left: 4px solid var(--tr-accent);
	border-radius: 8px;
}

.tr-price-request a {
	color: var(--tr-primary-dark);
	font-weight: 600;
}

/* ==========================================================================
   31. Currency switcher (multi-currency)
   ========================================================================== */
.woocommerce-currency-switcher-form,
.tr-currency-switcher {
	display: inline-block;
	margin-left: .75rem;
}

.woocommerce-currency-switcher-form select,
.tr-currency-switcher select {
	width: auto;
	min-width: 130px;
	padding: .4rem .6rem;
	font-size: .85rem;
	color: var(--tr-text);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.tr-topbar .woocommerce-currency-switcher-form select {
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .3);
}

.tr-topbar .woocommerce-currency-switcher-form select option {
	color: var(--tr-text);
}

/* Hide the widget title in the top bar — only the currency selector needs to show. */
.tr-topbar__widget h1,
.tr-topbar__widget h2,
.tr-topbar__widget h3,
.tr-topbar__widget h4,
.tr-topbar__widget .widget-title,
.tr-topbar__widget .yay-currency-widget-title,
.tr-topbar__widget .yay-currency-switcher-title,
.tr-topbar__widget > .widget-title,
.tr-topbar__widget p:not(.screen-reader-text) {
	display: none;
}

.tr-topbar__widget {
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   33. Category band & product cards without an image
   ========================================================================== */
.tr-catnav {
	margin: 0 0 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--tr-border);
}

.tr-catnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-catnav a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem 1rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--tr-text);
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-catnav a:hover,
.tr-catnav a:focus {
	color: var(--tr-primary-dark);
	background: var(--tr-accent-soft);
	border-color: var(--tr-accent);
}

.tr-catnav__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.4rem;
	padding: 0 .35rem;
	font-size: .72rem;
	font-weight: 700;
	color: var(--tr-primary-dark);
	background: var(--tr-accent);
	border-radius: 999px;
}

/* Products without an image: a soft frame so it reads as intentional, not broken. */
.woocommerce ul.products li.product img.woocommerce-placeholder {
	padding: .5rem;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	object-fit: contain;
}

.woocommerce div.product div.images img.woocommerce-placeholder {
	padding: 2rem;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
}

/* ==========================================================================
   32. Homepage — flyer panels (cropped from the official artwork)
   ========================================================================== */
.tr-hero__inner {
	max-width: 52rem;
	margin: 0 auto;
	text-align: center;
}

.tr-hero__eyebrow {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .35rem .9rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tr-primary-dark);
	background: var(--tr-accent-soft);
	border-radius: 999px;
}

.tr-hero__title {
	margin-bottom: 1rem;
}

.tr-panels {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 52rem) {
	.tr-panels--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.tr-panels--spaced {
	margin-top: 1.5rem;
	align-items: stretch;
}

.tr-panel {
	display: block;
	overflow: hidden;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 14px;
	box-shadow: var(--tr-shadow);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tr-panel:hover,
.tr-panel:focus-within {
	transform: translateY(-3px);
	border-color: var(--tr-accent);
	box-shadow: 0 10px 26px rgba(17, 26, 46, .13);
}

.tr-panel__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.tr-panel-full {
	max-width: 1080px;
	margin: 0 auto;
}

.tr-panel-full--tight {
	max-width: 100%;
	margin-top: 2rem;
}

/* --- Multi Sensory Room: the Jingleland partner panel ------------------ */
/* The partner logos arrive as one flat screenshot with its own white margins, so it
   used to drop into the page bare: no frame, a centred caption underneath, and the
   footnote out at the full content width. Frame the image and hang both lines off
   the panel's left edge, so the closing block reads as one composed unit.
   `.tr-panel-full--tight` is used on this page only; the footnote rule is scoped by
   body class because `p.tr-muted` also appears on Success Stories and Professional
   Development & Training, where it should keep the full content width. */
.tr-panel-full--tight img {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
}

.tr-panel-full--tight figcaption {
	margin-top: .85rem;
	text-align: center;
}

.page-id-127 .tr-entry-content > p.tr-muted {
	max-width: 100%;
	margin: .5rem auto 0;
	text-align: center;
}

/* Brand link chips below the logo block. */
.tr-chiprow {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.tr-chiprow a {
	display: inline-block;
	padding: .5rem .95rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--tr-primary-dark);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.tr-chiprow a:hover,
.tr-chiprow a:focus {
	background: var(--tr-accent-soft);
	border-color: var(--tr-accent);
}

/* Text card sitting beside the image panel. */
.tr-callout {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-left: 5px solid var(--tr-accent);
	border-radius: 14px;
}

.tr-callout h3 {
	margin-top: 0;
	color: var(--tr-primary);
}

.tr-callout p:last-child {
	margin-bottom: 0;
}

/* Section headings: left-aligned so they share an edge with the hero, the panels
   and the grid below (one grid system for the whole site). */
.tr-section__head {
	max-width: 46rem;
	margin: 0 0 2.5rem;
	text-align: left;
}

.tr-section__head p {
	margin-left: 0;
	margin-right: 0;
}

.tr-subhead {
	margin: 3rem 0 1.5rem;
	text-align: left;
}

.tr-subhead h3 {
	margin: 0;
}

.tr-section__cta {
	margin: 2rem 0 0;
	text-align: left;
}

/* A CTA that sits directly under a centred chip row is centred with it, so the
   button reads as part of that group instead of hanging off to the left under
   nothing. Section CTAs with no chip row above them stay left-aligned with
   their panel (e.g. "Browse Learning Resources"). */
.tr-chiprow + .tr-section__cta {
	text-align: center;
}

/* Light CTA band (non-navy variant) for the distributor block. */
.tr-cta-band--light {
	background: var(--tr-bg-alt);
	color: var(--tr-text);
}

.tr-cta-band--light h2 {
	color: var(--tr-text);
}

.tr-cta-band--light p {
	color: var(--tr-text-muted);
}

/* Distributor block on the light band (white card, not dark glass). */
.tr-cta-band--light .tr-distributors__col {
	background: var(--tr-bg);
	border-color: var(--tr-border);
	box-shadow: var(--tr-shadow);
}

.tr-cta-band--light .tr-distributors__col h3 {
	color: var(--tr-text);
}

.tr-cta-band--light .tr-distributors__col p,
.tr-cta-band--light .tr-distributors__col li {
	color: var(--tr-text-muted);
}

.tr-cta-band--light .tr-distributors__col a {
	color: var(--tr-primary);
}

.tr-cta-band--light .tr-distributors__col .tr-btn--ghost {
	border-color: var(--tr-primary);
	color: var(--tr-primary);
}

.tr-cta-band--light .tr-distributors__col .tr-btn--ghost:hover,
.tr-cta-band--light .tr-distributors__col .tr-btn--ghost:focus {
	background: var(--tr-primary);
	color: #fff;
}

/* ==========================================================================
   34. Inner page hero
   ========================================================================== */
.tr-page-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(170px, 24vw, 280px);
	padding: 2.75rem 0 2rem;
	background-color: var(--tr-primary-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

.tr-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 42, 99, .25) 0%, rgba(20, 42, 99, .82) 100%);
}

.tr-page-hero > .tr-container {
	position: relative;
	z-index: 1;
}

.tr-page-hero__title {
	margin: 0;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.tr-page-hero--plain {
	min-height: 0;
	padding: 2rem 0;
}

/* WooCommerce archive: breadcrumb below the hero. */
.tr-page-hero--shop + .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
	margin: 0 0 1.5rem;
	font-size: .85rem;
	color: var(--tr-text-muted);
}

/* WooCommerce content wrapper (inside .tr-container).
   Padding here is removed — the parent .tr-container already provides
   3.5rem/5rem, so keeping it would double the spacing. */
.tr-shop-wrap {
	padding: 0;
}

/* Last element of the WooCommerce wrapper (e.g. pagination) — drop its bottom
   margin so the gap to the footer matches every other page (80px). */
.tr-shop-wrap > *:last-child,
.tr-shop-wrap .page-description > *:last-child {
	margin-bottom: 0;
}

/* Single product: give it the same top spacing as other pages. */
.tr-shop-wrap .woocommerce-notices-wrapper:empty {
	display: none;
}

/* WooCommerce prints the Shop page description after the loop. Give it clear
   separation from the pagination so it reads as a new section, not as part of
   the product grid. */
.tr-shop-wrap .page-description {
	margin-top: 3.5rem;
}

/* ==========================================================================
   Product families (shop page content, below the product grid)
   Long brand paragraphs, one row per family: name in a fixed left column,
   description in the right. The row layout keeps wildly different text
   lengths (448 - 1085 chars) readable instead of ragged card heights.
   ========================================================================== */
.tr-fam {
	margin-top: 0;
	padding-top: 3rem;
	border-top: 1px solid var(--tr-border);
}

.tr-fam__title {
	margin: 1.25rem 0 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.tr-fam__list {
	margin-top: 2rem;
	border-top: 1px solid var(--tr-border);
}

.tr-fam__item {
	display: grid;
	grid-template-columns: minmax(190px, 250px) 1fr;
	gap: .6rem 2.5rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--tr-border);
}

.tr-fam__name {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.35;
}

.tr-fam__name a {
	color: var(--tr-primary);
	text-decoration: none;
}

.tr-fam__name a:hover,
.tr-fam__name a:focus {
	color: var(--tr-primary-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The name is the link, so give it a small visual cue that it is one. */
.tr-fam__name a::after {
	content: " \2192";
	color: var(--tr-primary);
	opacity: .55;
}

.tr-fam__item p {
	margin: 0;
	color: var(--tr-text-muted);
	line-height: 1.75;
}

.tr-fam__cta {
	margin: 2.5rem 0 0;
}

@media (max-width: 782px) {
	.tr-fam {
		margin-top: 3rem;
		padding-top: 2.25rem;
	}

	.tr-fam__item {
		grid-template-columns: 1fr;
		gap: .5rem;
		padding: 1.5rem 0;
	}
}

/* ==========================================================================
   35. Front page hero (full background image + text)
   ========================================================================== */
.tr-hero--home {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(340px, 42vw, 520px);
	padding: clamp(2.5rem, 6vw, 5rem) 0;
	text-align: left;
	color: #fff;
	background-color: var(--tr-primary-dark);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.tr-hero--home::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(20, 42, 99, .95) 0%, rgba(20, 42, 99, .8) 42%, rgba(20, 42, 99, .25) 100%);
}

.tr-hero--home > .tr-container {
	position: relative;
	z-index: 1;
}

.tr-hero--home .tr-hero__inner {
	max-width: var(--tr-container);
	margin: 0 auto;
	text-align: left;
}

.tr-hero--home .tr-hero__copy {
	max-width: 40rem;
}

.tr-hero--home .tr-hero__title {
	color: #fff;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}

.tr-hero--home .tr-hero__title::after {
	margin-left: 0;
}

.tr-hero--home .tr-hero__text {
	margin-left: 0;
	margin-right: 0;
	color: #e3e9f9;
	font-size: 1.06rem;
}

.tr-hero--home .tr-hero__actions {
	justify-content: flex-start;
}

.tr-hero--home .tr-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, .6);
}

.tr-hero--home .tr-btn--ghost:hover,
.tr-hero--home .tr-btn--ghost:focus {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* ==========================================================================
   36. Product family cards (Shop page)
   ========================================================================== */
.tr-families {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin: 0 0 2.5rem;
}

.tr-family {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tr-family:hover,
.tr-family:focus {
	color: inherit;
	border-color: var(--tr-primary);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(17, 26, 46, .12);
}

.tr-family__media {
	display: block;
	background: var(--tr-bg-alt);
	border-bottom: 1px solid var(--tr-border);
}

.tr-family__img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: contain;
	padding: .75rem;
}

.tr-family__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .4rem;
	padding: 1.1rem 1.25rem 1.25rem;
}

.tr-family__name {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--tr-primary);
}

.tr-family__text {
	font-size: .9rem;
	line-height: 1.6;
	color: var(--tr-text-muted);
}

.tr-family__meta {
	margin-top: auto;
	padding-top: .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tr-primary);
}

/* ==========================================================================
   37. Jalur kepercayaan (trust strip)
   ========================================================================== */
.tr-trust {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin: 2.5rem 0 0;
	padding: 1.75rem 0 0;
	list-style: none;
	border-top: 1px solid rgba(255, 255, 255, .18);
	text-align: left;
}

.tr-trust li {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.tr-trust__title {
	font-weight: 700;
	color: #fff;
}

.tr-trust__title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: .5rem;
	background: var(--tr-accent);
	border-radius: 50%;
	vertical-align: middle;
}

.tr-trust__text {
	font-size: .88rem;
	color: #d7def5;
}

.tr-distributor-band .tr-trust,
.tr-cta-band--light .tr-trust {
	border-top-color: var(--tr-border);
}

.tr-cta-band--light .tr-trust__title {
	color: var(--tr-text);
}

.tr-cta-band--light .tr-trust__text {
	color: var(--tr-text-muted);
}

/* ==========================================================================
   38. Footer — four-column grid
   ========================================================================== */
.tr-footer__grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin-bottom: 2rem;
}

.tr-footer__brand {
	margin-bottom: .35rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
}

/* Footer logo: an image replaces the site-name text (media key: logo-light). */
.tr-footer__brand .tr-footer__logo {
	display: block;
	width: 100%;
	max-width: 240px;
	height: auto;
}

.tr-footer__tagline {
	margin-bottom: .5rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--tr-accent);
}

.tr-footer__blurb,
.tr-footer__contact {
	font-size: .88rem;
	color: #c6d2ee;
}

.tr-footer__pay {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #9fb0d8;
}

.tr-footer__payicon {
	width: auto;
	height: 26px;
}

/* ==========================================================================
   39. Inner pages — poster band & video row
   ========================================================================== */
.tr-poster-row {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	margin: 2rem 0 2.5rem;
}

.tr-poster {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
}

.tr-poster img {
	width: 100%;
	height: 340px;
	object-fit: contain;
	background: var(--tr-bg-alt);
	padding: .75rem;
}

.tr-poster figcaption {
	padding: .85rem 1rem;
	border-top: 1px solid var(--tr-border);
	font-size: .9rem;
	font-weight: 600;
	color: var(--tr-primary);
}

.tr-media-row {
	display: grid;
	gap: 1.75rem;
	align-items: center;
	margin: 0 0 2.25rem;
}

@media (min-width: 56rem) {
	.tr-media-row {
		grid-template-columns: 1.1fr 1fr;
	}

	.tr-media-row--flip {
		grid-template-columns: 1fr 1.1fr;
	}

	.tr-media-row--flip .tr-media-row__media {
		order: 2;
	}
}

.tr-media-row__media {
	position: relative;
	overflow: hidden;
	background: #000;
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
	aspect-ratio: 16 / 9;
}

.tr-media-row__media iframe,
.tr-media-row__media video,
.tr-media-row__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.tr-media-row__body h3 {
	margin-top: 0;
}

/* ==========================================================================
   40. Testimoni (Success Stories)
   ========================================================================== */
.tr-testimonials {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 2rem 0;
}

.tr-testimonial {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.6rem 1.6rem 1.35rem;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-top: 4px solid var(--tr-accent);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
}

.tr-testimonial__quote {
	margin: 0 0 1.1rem;
	font-size: .97rem;
	line-height: 1.7;
	color: var(--tr-text);
}

.tr-testimonial__quote::before {
	content: "\201C";
	display: block;
	margin-bottom: .25rem;
	font-size: 2.4rem;
	line-height: .6;
	color: var(--tr-accent-dark);
}

.tr-testimonial__author {
	margin: auto 0 0;
	font-style: normal;
	font-size: .92rem;
	color: var(--tr-text-muted);
}

.tr-testimonial__author strong {
	display: block;
	color: var(--tr-primary);
}

.tr-gallery {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 2rem 0;
}

.tr-gallery figure {
	margin: 0;
}

.tr-gallery img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
}

.tr-gallery figcaption {
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--tr-text-muted);
}

.tr-video-callout {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
	justify-content: space-between;
	margin: 2.5rem 0 0;
	padding: 1.25rem 1.5rem;
	background: var(--tr-accent-soft);
	border-radius: var(--tr-radius);
}

.tr-video-callout p {
	margin: 0;
	font-weight: 600;
	color: var(--tr-text);
}

/* ==========================================================================
   41. WooCommerce — buttons & brand colour normalisation
   WooCommerce ships its own stylesheet with high specificity
   (.woocommerce a.button), so the default purple/grey colours must be overridden.
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .cart .button,
.woocommerce .cart input.button,
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	background-color: var(--tr-primary);
	color: #fff;
	border: 1px solid var(--tr-primary);
	border-radius: var(--tr-radius);
	font-weight: 600;
	line-height: 1.4;
	padding: .7rem 1.25rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .button:focus {
	background-color: var(--tr-primary-dark);
	border-color: var(--tr-primary-dark);
	color: #fff;
}

/* "View cart" button after adding to the cart. */
.woocommerce a.added_to_cart {
	color: var(--tr-primary);
}

/* Products without a price but still carrying a WooCommerce add-to-cart class
   (unpriced products created outside the theme) keep a subtle style. The Enquire
   button is deliberately NOT in this list: it must match every other loop button. */
.woocommerce ul.products li.product .button.add_to_cart_button[data-product_id="0"] {
	background-color: transparent;
	color: var(--tr-primary);
	border-color: var(--tr-primary);
}

/* Single product quantity. */
.woocommerce .quantity input.qty {
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: .55rem;
	height: auto;
}

/* Product image when there is no photo — keep a light background & the branded logo. */
.woocommerce ul.products li.product img.woocommerce-placeholder,
.woocommerce div.product div.images img.woocommerce-placeholder {
	object-fit: contain;
	background: var(--tr-bg-alt);
	padding: .5rem;
}

/* Notis WooCommerce. */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--tr-primary);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--tr-primary);
}

/* The "\e028" glyph (the "info" notice icon) is missing from the WooCommerce icon
   font that ships — it renders as an empty box. The theme already tells notice
   types apart with a left accent border, so drop this broken icon and tidy the
   left padding. The message (checkmark) and error icons work, so they stay. */
.woocommerce-info::before {
	content: none;
}

.woocommerce-info {
	padding-left: 1.15rem;
}

/* The WooCommerce notice container is focused PROGRAMMATICALLY only, when it
   appears (tabindex="-1", role="alert"/"status") — it can never be reached with
   the Tab key. The global focus outline (3px + offset) just adds a second blue
   box around the notice and reads like a doubled border.
   Removed for the notice container only; links & buttons INSIDE the notice keep
   their focus indicator. */
.woocommerce-info:focus,
.woocommerce-info:focus-visible,
.woocommerce-message:focus,
.woocommerce-message:focus-visible,
.woocommerce-error:focus,
.woocommerce-error:focus-visible {
	outline: none;
}

.woocommerce-error {
	border-top-color: #b3261e;
}

/* ==========================================================================
   42. Product categories — current state & empty categories
   ========================================================================== */
.tr-catnav li.is-current a {
	background: var(--tr-primary);
	border-color: var(--tr-primary);
	color: #fff;
}

.tr-catnav li.is-current .tr-catnav__count {
	background: #fff;
	color: var(--tr-primary);
}

/* Sub-category filter (category archives).
   Sits under the family strip and narrows the current family: on a parent
   category it lists the children, on a child it lists the siblings. */
.tr-subcatnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: -.5rem 0 1.75rem;
}

.tr-subcatnav::before {
	content: "Filter:";
	margin-right: .15rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tr-text-muted);
}

.tr-subcatnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-subcatnav a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .85rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--tr-text);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-subcatnav a:hover,
.tr-subcatnav a:focus {
	color: var(--tr-primary-dark);
	background: var(--tr-accent-soft);
	border-color: var(--tr-accent);
}

.tr-subcatnav li.is-current a {
	background: var(--tr-primary);
	border-color: var(--tr-primary);
	color: #fff;
}

.tr-subcatnav li.is-current .tr-catnav__count {
	background: #fff;
	color: var(--tr-primary);
}

.tr-empty-category {
	max-width: 46rem;
	margin: 2rem auto;
	padding: 2rem;
	text-align: center;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.tr-empty-category h2 {
	margin-top: 0;
}

.tr-price-request-inline {
	font-size: .95rem;
	font-style: italic;
	color: var(--tr-text-muted);
}

/* ==========================================================================
   43. WooCommerce — page theming (blocks, products, account, orders)
   The Cart/Checkout blocks and WooCommerce forms ship their own default styling
   (black buttons #32373c, 4px grey inputs). All of it is overridden with the
   theme's brand tokens so Cart, Checkout, products, account and orders read as
   one family with the rest of the site.
   ========================================================================== */

/* --- 43.1 Block tokens ------------------------------------------------- */
.wc-block-cart,
.wc-block-checkout,
.wc-block-order-confirmation-status {
	--wc-separator-color: var(--tr-border);
}

/* --- 43.2 Block buttons (Proceed to Checkout / Place Order / Apply) ---- */
.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-button:not(.is-link),
.wc-block-components-order-confirmation .wc-block-components-button:not(.is-link) {
	background-color: var(--tr-primary);
	border: 1px solid var(--tr-primary);
	border-radius: var(--tr-radius);
	box-shadow: none;
	color: #fff;
	font-size: .97rem;
	font-weight: 600;
	line-height: 1.4;
	padding: .85rem 1.5rem;
	transition: background-color .15s ease, border-color .15s ease;
}

.wc-block-cart .wc-block-components-button:not(.is-link):hover,
.wc-block-cart .wc-block-components-button:not(.is-link):focus,
.wc-block-checkout .wc-block-components-button:not(.is-link):hover,
.wc-block-checkout .wc-block-components-button:not(.is-link):focus {
	background-color: var(--tr-primary-dark);
	border-color: var(--tr-primary-dark);
	color: #fff;
}

.wc-block-checkout .wc-block-components-button:not(.is-link):focus,
.wc-block-cart .wc-block-components-button:not(.is-link):focus {
	box-shadow: 0 0 0 3px var(--tr-primary-light);
	outline: 3px solid transparent;
}

/* Outline buttons (e.g. "Return to cart") stay subtle. */
.wc-block-checkout .wc-block-components-button.outlined:not(.is-link) {
	background-color: transparent;
	border-color: var(--tr-primary);
	color: var(--tr-primary);
}

.wc-block-checkout .wc-block-components-button.outlined:not(.is-link):hover {
	background-color: var(--tr-primary-light);
	color: var(--tr-primary-dark);
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	font-size: 1.02rem;
	padding: 1rem 1.5rem;
	width: 100%;
}

/* --- 43.3 Block forms (input, select, radio, checkbox) ----------------- */
.wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.wc-block-components-form .wc-block-components-address-form input:not([type="checkbox"]),
.wc-block-components-form .wc-block-components-address-form textarea,
.wc-block-components-form .wc-block-components-address-form select,
.wc-block-checkout .wc-block-components-select__container {
	background-color: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: none;
	color: var(--tr-text);
	font-size: .97rem;
}

.wc-block-components-form .wc-block-components-text-input input:not([type="checkbox"]):focus,
.wc-block-components-form .wc-block-components-address-form input:not([type="checkbox"]):focus,
.wc-block-components-form .wc-block-components-address-form textarea:focus,
.wc-block-components-form .wc-block-components-address-form select:focus,
.wc-block-checkout .wc-block-components-select__container:focus-within {
	border-color: var(--tr-primary);
	box-shadow: 0 0 0 3px var(--tr-primary-light);
	outline: 3px solid transparent;
}

.wc-block-components-text-input label,
.wc-block-components-select label {
	color: var(--tr-text-muted);
	font-size: .85rem;
}

/* Payment methods as cards. The plugin's radio is `position: absolute` 16px from
   the edge, so the label needs a 2.9rem indent to avoid an overlap. */
.wc-block-components-radio-control .wc-block-components-radio-control__option {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	margin-top: .6rem;
	padding: .95rem 1.15rem .95rem 2.9rem;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease;
}

.wc-block-components-radio-control .wc-block-components-radio-control__option:first-child {
	margin-top: 0;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control .wc-block-components-radio-control__option-checked {
	background: var(--tr-primary-light);
	border-color: var(--tr-primary);
}

.wc-block-components-radio-control__input:checked {
	background-color: var(--tr-primary);
}

.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input {
	accent-color: var(--tr-primary);
}

.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	font-size: .95rem;
	font-weight: 600;
}

/* --- 43.4 Block cart --------------------------------------------------- */
.wc-block-cart-items {
	border-collapse: separate;
	border-spacing: 0;
}

.wc-block-cart-items__header th,
.wc-block-cart table.wc-block-cart-items th {
	border-bottom: 1px solid var(--tr-border);
	color: var(--tr-text-muted);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 0 0 .8rem;
	text-transform: uppercase;
}

.wc-block-cart-items__row td,
.wc-block-cart table.wc-block-cart-items td {
	padding: 1.4rem 0;
	vertical-align: middle;
}

.wc-block-cart-item__image img {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: .25rem;
}

.wc-block-components-product-name {
	font-size: 1rem;
	font-weight: 600;
}

/* Cart line item — the product name.
   WooCommerce ships its own rule,
     table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name
   with font-size: var(--wp--preset--font-size--small, 14px) (13px on this site)
   and font-weight: 500. Its specificity beats a single class, so the title read
   noticeably smaller and lighter than the same title in the cart drawer. This
   block matches that weight of selector and makes the two identical. */
.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
}

.wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-cart-item__wrap .wc-block-components-product-name,
.wc-block-cart-item__product .wc-block-components-product-name a,
.wc-block-cart-item__wrap .wc-block-components-product-name a {
	color: var(--tr-text);
	text-decoration: none;
}

.wc-block-cart-item__product .wc-block-components-product-name a:hover,
.wc-block-cart-item__wrap .wc-block-components-product-name a:hover {
	color: var(--tr-primary);
	text-decoration: underline;
}

.wc-block-cart-item__total,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	color: var(--tr-text);
	font-weight: 700;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	overflow: hidden;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	background: #fff;
	border: 0;
	font-weight: 600;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	background: var(--tr-bg-alt);
	border: 0;
	color: var(--tr-primary);
	font-weight: 700;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
	background: var(--tr-primary-light);
}

/* Totals (subtotal / total / shipping). */
.wc-block-components-totals-item {
	padding: .55rem 0;
}

.wc-block-components-totals-item__label {
	color: var(--tr-text-muted);
	font-size: .93rem;
	font-weight: 600;
}

.wc-block-components-totals-item__value {
	color: var(--tr-text);
	font-weight: 600;
}

/* WooCommerce draws a 1px rule above .wc-block-components-totals-wrapper, and the
   footer item inside it draws the theme's 2px rule — two lines ~17px apart above
   "Estimated total". Keep the 2px one and drop the wrapper's. */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	border-top: 0;
}

.wc-block-components-totals-footer-item {
	border-top: 2px solid var(--tr-border);
	margin-top: .5rem;
	padding-top: 1rem;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--tr-primary);
	font-size: 1.15rem;
	font-weight: 700;
}

/* Kupon. */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	color: var(--tr-primary);
	font-weight: 600;
	padding-left: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	border-color: var(--tr-border);
}

/* Empty cart. */
.wc-block-cart__empty-cart {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: 3rem 1.25rem;
	text-align: center;
}

.wc-block-cart__empty-cart__title {
	font-size: 1.4rem;
	margin: 0 0 .75rem;
}

/* --- 43.5 Block checkout ----------------------------------------------- */
.wc-block-components-checkout-step {
	padding: 0 0 2rem;
}

.wc-block-components-checkout-step__title,
.wc-block-components-title.wc-block-components-checkout-step__title {
	border-bottom: 1px solid var(--tr-border);
	color: var(--tr-text);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 1.15rem;
	padding-bottom: .65rem;
}

.wc-block-components-checkout-step__description {
	color: var(--tr-text-muted);
	font-size: .9rem;
}

/* Order summary (sidebar) as a card. */
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-order-summary {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: 1.4rem;
}

.wc-block-components-order-summary-item {
	padding: .85rem 0;
}

.wc-block-components-order-summary-item__image img {
	border: 1px solid var(--tr-border);
	border-radius: 6px;
}

.wc-block-components-order-summary-item__description,
.wc-block-components-order-summary-item__description .wc-block-components-product-details {
	color: var(--tr-text-muted);
	font-size: .86rem;
}

/* Block notices (info / success / error). */
.wc-block-components-notice-banner {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	color: var(--tr-text);
	font-size: .95rem;
}

.wc-block-components-notice-banner.is-info {
	background: var(--tr-primary-light);
	border-color: #c3d1f1;
}

.wc-block-components-notice-banner.is-success {
	background: var(--tr-accent-soft);
	border-color: var(--tr-accent);
}

.wc-block-components-notice-banner.is-error {
	background: #fdecea;
	border-color: #f0c0bb;
}

.wc-block-components-notice-banner > .wc-block-components-button {
	color: var(--tr-primary);
	font-weight: 600;
	text-decoration: underline;
}

/* --- 43.5b Checkout polish --------------------------------------------- */

/* No 24px band above the checkout form.
   WooCommerce ships `.wp-block-woocommerce-checkout { padding-top: 24px }` in its own
   assets/client/blocks/checkout.css, which put 48px between the page heading and
   "Contact information" on mobile — that 24px plus another 24px inside the block.
   It is a plugin file, so it is overridden here rather than edited: a WooCommerce
   update would wipe a local edit. The selector carries an extra `body` so it wins on
   specificity whatever order the two stylesheets load in. */
body .wp-block-woocommerce-checkout {
	padding-top: 0;
}

/* One panel, not a box inside a box.
   WooCommerce outlines the whole summary block AND the item list nested inside
   it, so two borders of the same colour sat 61px apart. Keep the inner panel —
   it carries the tinted fill — and let the heading, coupon and totals sit on the
   page background, matching the cart page. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
}

/* The totals wrapper repeats the rule the footer item already draws, putting two
   lines 17px apart above "Total". Keep the theme's stronger one. */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	border-top: 0;
}

/* Product name. WooCommerce's own rule inside the summary block sets 13px/500 and
   out-specifies the theme's two-class rule, so the title was smaller here than on
   the cart page. Three classes wins, and the two pages now read the same. */
.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
	font-size: .92rem;
	font-weight: 600;
}

/* Frame the thumbnails like the cart drawer, so they read as product images. */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__image img {
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: .25rem;
}

/* Order summary rows.
   WooCommerce leaves them with no separator at all, so three products read as one
   block, and it repeats the same figure twice when the quantity is one (unit price
   on the left, line total on the right) at identical weight. Separate the rows,
   and let the line total carry the emphasis while the unit price steps back. */
.wc-block-checkout__sidebar .wc-block-components-order-summary-item {
	padding: 1rem 0;
	border-bottom: 1px solid var(--tr-border);
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item:first-child {
	padding-top: 0;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item__individual-prices,
.wc-block-checkout__sidebar .wc-block-components-order-summary-item__individual-prices .wc-block-components-formatted-money-amount {
	color: var(--tr-text-muted);
	font-size: .86rem;
	font-weight: 500;
}

.wc-block-checkout__sidebar .wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount {
	color: var(--tr-text);
	/* Larger than the unit price above it, so the eye lands on the line total. */
	font-size: .92rem;
	font-weight: 700;
}

/* "Total" spacing. Three stacked gaps pushed the divider 48px below "Subtotal"
   while it sat flush against the word "Total": the gap after the subtotal row, the
   totals wrapper's own 16px padding-top, and the footer item's 16px margin-top.
   Drop the two that are ours to drop and give the line equal room above and below.
   WooCommerce's sidebar rule also sets `padding: 0 16px` on the footer item and
   out-specifies the theme's `padding-top`, hence the longer selector. */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	padding-top: 0;
}

.wc-block-checkout__sidebar .wc-block-components-totals-footer-item {
	margin-top: 0;
	padding-top: 1rem;
}

/* "Log in" shares the heading row with "Contact information", but the divider is
   drawn on the title element — so the line ran straight through the link. Move the
   divider to the heading row, which already ends below both. */
.wc-block-components-checkout-step__heading:has(.wc-block-checkout__login-prompt) {
	border-bottom: 1px solid var(--tr-border);
}

.wc-block-components-checkout-step__heading:has(.wc-block-checkout__login-prompt)
	.wc-block-components-checkout-step__title {
	border-bottom: 0;
}

/* Payment methods — the selected option and its description form one card.
   Two WooCommerce rules got in the way:
     .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option
       .wc-block-components-radio-control__option { border-width: 0 }
       — (0,3,0), which cancelled the theme's card border so the highlight floated
         with no edge;
     .wc-block-components-radio-control--highlight-checked
       label.wc-block-components-radio-control__option--checked-option-highlighted
       { border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor }
       — a ring, not a border, at a 4px radius that fought the theme's 10px card.
   Both are out-specified below, so the theme's card is the only edge drawn, and
   the description continues it instead of sitting outside a closed box. */
.wc-block-checkout__payment-method
	.wc-block-components-radio-control
	.wc-block-components-radio-control-accordion-option
	.wc-block-components-radio-control__option {
	border-width: 1px;
}

/* The payment list's own frame. WooCommerce draws it with the container's ::after
   using border-left / border-right (no border-top), and its left edge lands exactly
   on the first card's left edge — so a grey 1px line ran alongside the selected
   card's navy border, making the top look like the only edge. The theme's cards
   already frame each option, so drop the container's frame. */
.wc-block-checkout__payment-method .wc-block-components-radio-control::before,
.wc-block-checkout__payment-method .wc-block-components-radio-control::after {
	content: none;
	border: 0;
	background: none;
}

/* The highlight ring. WooCommerce draws `box-shadow: inset 0 0 0 1.5px currentColor`
   on `.wc-block-components-radio-control-accordion-option--checked-option-highlighted`
   — the accordion WRAPPER, not the inner label. Targeting the label alone left the
   ring in place, which is what put a dark line across the top of the card and down
   both sides. Cover both elements. */
.wc-block-checkout__payment-method
	.wc-block-components-radio-control--highlight-checked
	.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-checkout__payment-method
	.wc-block-components-radio-control--highlight-checked
	label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: none;
}

/* WooCommerce's own separator across the top of the accordion. */
.wc-block-checkout__payment-method
	.wc-block-components-radio-control--highlight-checked
	.wc-block-components-radio-control-accordion-option::after {
	content: none;
}

/* Only the option that is followed by a description loses its bottom edge, so the
   card reads as one block. Options without a description keep all four sides —
   the :has() guard is what stops them turning into open-ended boxes. */
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content)
	.wc-block-components-radio-control__option {
	border-bottom: 0;
	border-radius: var(--tr-radius) var(--tr-radius) 0 0;
}

/* The description of the selected method — same card, continued. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-content {
	margin: 0;
	padding: .15rem 1.15rem 1rem 2.9rem;
	color: var(--tr-text-muted);
	font-size: .9rem;
	line-height: 1.5;
	background: var(--tr-primary-light);
	border: 1px solid var(--tr-primary);
	border-top: 0;
	border-radius: 0 0 var(--tr-radius) var(--tr-radius);
}

/* --- 43.5c Checkout, small screens only -------------------------------- */
/* Two mobile-only layout corrections that WooCommerce leaves to the theme.

   1. The order summary is rendered twice on small screens: a collapsed accordion
      in the sidebar (hoisted above the form by the block's own container query)
      and the full one inside the actions block further down. Keep the full one.
   2. The terms line lives among the fields, so once the actions block renders its
      copy of the order summary the terms end up far above the button. The client
      wants them directly above "Place Order".

   On mobile the form is a plain block, so visual order equals DOM order and there
   is nothing to reorder. Handing the actions `display: contents` promotes its
   children (the order summary and the button row) to flex items of the form; the
   form then becomes a column we can sequence. Every selector below is one of
   WooCommerce's own class names, so a React re-render keeps matching.

   739px is not arbitrary: WooCommerce's container query switches the sidebar
   layout at a CONTAINER width of 699px, and the checkout container is 40px
   narrower than the viewport. 739px is therefore the viewport width at which
   that switch happens. Verified at 720px (stacked) and 740px (side by side). */
@media (max-width: 739px) {
	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		display: none;
	}

	/* A rule between "Subtotal" and "Total" on small screens.
	   Draw it on the footer item, then pull the row up by the same amount so the
	   rule lands in the middle of the 32px gap — 16px under the subtotal, 16px above
	   the word "Total" — rather than hugging "Total" the way it did before the
	   spacing was cleared. The negative margin is what keeps the rule centred; with
	   padding alone it would sit 32px below the subtotal and 16px above "Total". */
	.wc-block-checkout .wc-block-components-totals-footer-item {
		border-top: 1px solid var(--tr-border);
		margin-top: -1rem;
		padding-top: 1rem;
	}

	/* The visible copy of the order summary lives in the actions block on mobile,
	   not in the sidebar — so the sidebar-scoped rule that drops the wrapper's
	   duplicate border-top (line 3775) never matches it. The wrapper draws its own
	   1px rule, which is the line still showing above "Total". Drop it here too. */
	.wc-block-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
		border-top: 0;
	}

	.wc-block-checkout__form {
		display: flex;
		flex-direction: column;
	}

	.wc-block-checkout__actions {
		display: contents;
	}

	/* the order summary block that the actions block carries on mobile */
	.wc-block-checkout__actions > *:has(.wp-block-woocommerce-checkout-order-summary-block) {
		order: 4;
	}

	.wc-block-checkout__terms {
		order: 5;
		margin-bottom: 1rem;
	}

	.wc-block-checkout__actions > .wc-block-checkout__actions_row {
		order: 6;
	}
}

/* --- 43.5d Cart and checkout: consistent dividers ---------------------- */
/* Each rule below answers the same complaint: one divider where two were drawn,
   and a divider where none was. */

/* 1. Payment cards touching, so their borders stacked into a 2px line between
   methods (while the last method kept a single 1px edge).
   The theme spaces the cards with `margin-top: .6rem` plus
   `:first-child { margin-top: 0 }` — but WooCommerce wraps EVERY option in its own
   accordion, so each option is a first child and the margin was cancelled on all
   of them. Move the gap to the radio group, where the siblings really are
   siblings, and zero the inner margin so the two cannot add up. */
.wc-block-checkout__payment-method .wc-block-components-radio-control > * + * {
	margin-top: .6rem;
}

.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
	margin-top: 0;
}

/* 2. Two rules 16px apart above "Add coupons" — the item panel closes with a border
   and the coupon row opens with another. Keep the panel's edge, drop the other. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	border-top: 0;
}

/* 3. In WooCommerce's small-screen cart the table draws no row borders at all, so
   the items ran together with nothing between them. Put back the single separator
   the wide layout has — above every item after the first — and state the mobile
   bottom edge explicitly rather than relying on it staying absent.
   Note for rollbacks: the old cell border lives on a two-class selector
   (`.wc-block-cart table.wc-block-cart-items td`), so ROLLBACK-CART-CELLBORDER.sh
   out-specifies the `border-bottom: 0` below and would leave two lines on mobile —
   one after each item. To undo the cart's dividers, run ROLLBACK-DIVIDERS.sh
   instead; it removes this whole section and makes the cart internally consistent
   again. The desktop rule above this section is unaffected either way. */
@media (max-width: 739px) {
	.wc-block-cart-items__row td {
		border-bottom: 0;
	}

	.wc-block-cart-items__row + .wc-block-cart-items__row td {
		border-top: 1px solid var(--tr-border);
	}
}

/* --- 43.6 Single product page (classic) -------------------------------- */
.woocommerce-breadcrumb {
	color: var(--tr-text-muted);
	font-size: .85rem;
	margin-bottom: 1.25rem;
}

.woocommerce-breadcrumb a {
	color: var(--tr-primary);
	text-decoration: none;
}

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

.woocommerce div.product div.images {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: 1rem;
}

.woocommerce div.product div.images img {
	border-radius: calc(var(--tr-radius) - 3px);
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: 6px;
}

.woocommerce div.product div.images .flex-control-thumbs li img.flex-active {
	border-color: var(--tr-primary);
}

.woocommerce div.product .product_title {
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: .75rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--tr-primary);
	font-size: 1.5rem;
	font-weight: 700;
}

.woocommerce div.product p.price del {
	color: var(--tr-text-muted);
	font-size: 1rem;
	font-weight: 400;
}

.woocommerce div.product p.price ins {
	color: var(--tr-primary);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--tr-text-muted);
	margin-top: 1rem;
}

.woocommerce div.product .product_meta {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	display: grid;
	font-size: .9rem;
	gap: .35rem;
	margin-top: 1.5rem;
	padding: 1rem 1.15rem;
}

.woocommerce div.product .product_meta > span {
	color: var(--tr-text-muted);
	display: block;
}

.woocommerce div.product .product_meta a {
	color: var(--tr-primary);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
	text-decoration: underline;
}

.woocommerce div.product form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.6rem 0;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	padding: .85rem 1.75rem;
}

/* --------------------------------------------------------------------------
   Variation form (single product, classic).
   The global `th { background: var(--tr-bg-alt) }` rule tints the variation
   label cells, so the form reads as a table with a stray coloured column next
   to the selects. Reset the table chrome and lay each attribute out as a
   labelled control.
   -------------------------------------------------------------------------- */
.woocommerce div.product form.cart .variations {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 1.35rem;
	width: 100%;
}

.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr {
	display: block;
	width: 100%;
}

.woocommerce div.product form.cart .variations tr + tr {
	margin-top: .85rem;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	background: none;
	border: 0;
	display: block;
	line-height: 1.4;
	padding: 0;
	text-align: left;
	width: 100%;
}

.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations th.label label {
	color: var(--tr-text-muted);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.4;
	padding: 0 0 .4rem;
	text-transform: uppercase;
}

.woocommerce div.product form.cart .variations select {
	background-color: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	color: var(--tr-text);
	cursor: pointer;
	display: block;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	padding: .7rem 2.75rem .7rem 1rem;
	transition: border-color .15s ease, box-shadow .15s ease;
	width: 100%;
}

.woocommerce div.product form.cart .variations select:hover {
	border-color: var(--tr-accent);
}

.woocommerce div.product form.cart .variations select:focus {
	border-color: var(--tr-primary);
	box-shadow: 0 0 0 3px var(--tr-primary-light);
	outline: none;
}

.woocommerce div.product form.cart .variations select option {
	background: var(--tr-bg);
	color: var(--tr-text);
	font-weight: 400;
}

.woocommerce div.product form.cart .reset_variations {
	color: var(--tr-text-muted);
	display: inline-block;
	font-size: .82rem;
	font-weight: 600;
	margin-top: .55rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.woocommerce div.product form.cart .reset_variations:hover,
.woocommerce div.product form.cart .reset_variations:focus {
	color: var(--tr-primary-dark);
}

/* Chosen variation: price + availability sit above the quantity row. */
.woocommerce div.product .single_variation_wrap .woocommerce-variation-price {
	margin: 0 0 .25rem;
}

.woocommerce div.product .single_variation_wrap .woocommerce-variation-price .price {
	color: var(--tr-primary-dark);
	font-size: 1.3rem;
	font-weight: 700;
}

.woocommerce div.product .single_variation_wrap .woocommerce-variation-availability p {
	color: var(--tr-text-muted);
	font-size: .88rem;
	margin: 0 0 .5rem;
}

/* Add to cart stays clearly "not ready" until every attribute is chosen. */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
	background: var(--tr-bg-alt);
	border-color: var(--tr-border);
	color: var(--tr-text-muted);
	cursor: not-allowed;
	opacity: 1;
}

.woocommerce div.product .stock {
	color: var(--tr-primary);
	font-weight: 600;
}

.woocommerce div.product .onsale {
	background: var(--tr-accent);
	border-radius: 999px;
	color: var(--tr-text);
	font-weight: 700;
	min-height: 0;
	padding: .35rem .85rem;
}

.woocommerce div.product .woocommerce-product-rating .star-rating span::before,
.woocommerce .star-rating span::before {
	color: var(--tr-accent-dark);
}

/* Product tabs (Description / Reviews). */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--tr-border);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 1.75rem;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	border: 0;
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	border-bottom: 3px solid transparent;
	color: var(--tr-text-muted);
	font-weight: 600;
	padding: .85rem 1.15rem;
}

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

.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	margin: 0;
	padding: 1.75rem;
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	display: none;
}

.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	border-top: 1px solid var(--tr-border);
	margin-top: 3rem;
	padding-top: 2rem;
}

.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2,
.woocommerce div.product section.related > h2 {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
}

/* Ulasan pelanggan. */
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
}

.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: .7rem .9rem;
}

/* --- 43.7 Shop — toolbar & pagination ---------------------------------- */
.woocommerce .woocommerce-result-count {
	color: var(--tr-text-muted);
	font-size: .9rem;
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23111a2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right .85rem center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	color: var(--tr-text);
	font-size: .9rem;
	font-weight: 600;
	height: auto;
	padding: .6rem 2.4rem .6rem .95rem;
}

.woocommerce .woocommerce-ordering select:focus {
	border-color: var(--tr-primary);
	box-shadow: 0 0 0 3px var(--tr-primary-light);
	outline: 3px solid transparent;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	align-items: center;
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	color: var(--tr-text);
	display: inline-flex;
	font-weight: 600;
	justify-content: center;
	min-width: 2.5rem;
	padding: .6rem .7rem;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--tr-primary);
	border-color: var(--tr-primary);
	color: #fff;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
	background: var(--tr-accent-soft);
	border-color: var(--tr-accent);
	color: var(--tr-primary-dark);
}

/* --- 43.8 Account (login / register / dashboard) ----------------------- */
/* One-column layout (signed out: no account menu) — a plain block, not a grid.
   This matters: the empty-notice wrapper is still in the DOM and a grid keeps its
   row, which made the gap after the hero 96px instead of 56px. */
.woocommerce-account .woocommerce {
	display: block;
}

/* Signed in (account menu present): nav + content grid. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: minmax(0, 1fr);
}

/* The empty-notice wrapper still counts as a grid child -> it adds a 2.5rem gap.
   Remove it while empty; it comes back when there is a notice. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty,
.woocommerce-page .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

@media (min-width: 62rem) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 250px minmax(0, 1fr);
	}

	/* Explicit placement — WooCommerce floats left/right at 30%/70% width, which
	   squeezes the content if you rely on automatic placement. */
	.woocommerce-account .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 1;
	}
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.woocommerce-ResetPassword {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
	margin: 0;
	padding: 1.75rem;
}

/* Forms inside the .ma-auth card need no card of their own (avoids a card in a
   card). The login/register/lost-password cards are styled in section 44. */
.ma-auth-card form.login,
.ma-auth-card form.register,
.ma-auth-card form.woocommerce-ResetPassword {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.woocommerce form.login .form-row,
.woocommerce form.register .form-row {
	margin-bottom: 1rem;
	padding: 0;
}

.woocommerce form .form-row label {
	color: var(--tr-text);
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: .35rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: none;
	color: var(--tr-text);
	font-size: .97rem;
	height: auto;
	line-height: 1.5;
	padding: .7rem .9rem;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--tr-primary);
	box-shadow: 0 0 0 3px var(--tr-primary-light);
	outline: 3px solid transparent;
}

.woocommerce form .form-row .required {
	color: #b3261e;
}

.woocommerce-form-login__rememberme {
	align-items: center;
	display: flex;
	gap: .5rem;
	margin-bottom: 0;
}

.woocommerce-LostPassword a {
	color: var(--tr-primary);
	font-size: .92rem;
	font-weight: 600;
}

/* Account dashboard: navigation + content.
   (The nav list & active state are styled earlier in the file — here it is just
   the card container + grid layout.) */
.woocommerce-MyAccount-navigation {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	height: fit-content;
	padding: .75rem;
}

.woocommerce-MyAccount-content {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
	min-width: 0;
	padding: 1.75rem;
}

.woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

.woocommerce-MyAccount-content mark {
	background: var(--tr-accent-soft);
	color: var(--tr-primary-dark);
	font-weight: 600;
	padding: 0 .25rem;
}

/* Tables (orders, subscriptions, downloads). */
.woocommerce table.shop_table {
	border: 1px solid var(--tr-border);
	border-collapse: separate;
	border-radius: var(--tr-radius);
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--tr-bg-alt);
	border-bottom: 1px solid var(--tr-border);
	color: var(--tr-text-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	padding: .9rem 1rem;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	border-top: 1px solid var(--tr-border);
	padding: 1rem;
}

.woocommerce table.shop_table td.product-name a {
	color: var(--tr-text);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover {
	color: var(--tr-primary);
	text-decoration: underline;
}

.woocommerce table.my_account_orders .button {
	font-size: .85rem;
	padding: .5rem 1rem;
}

/* Alamat. */
.woocommerce-Addresses .woocommerce-Address {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: 1.25rem;
}

.woocommerce-Address-title h3 {
	font-size: 1rem;
	margin: 0 0 .5rem;
}

.woocommerce-Address address {
	color: var(--tr-text-muted);
	font-style: normal;
	line-height: 1.7;
}

/* --- 43.9 Order received page (block + classic) ------------------------ */
.wc-block-order-confirmation-status {
	font-size: 1.05rem;
}

.wc-block-order-confirmation-status .wc-block-components-notice-banner,
.wc-block-order-confirmation-status__text {
	font-size: 1.05rem;
}

.wc-block-order-confirmation-summary .wc-block-components-order-summary,
.wc-block-order-confirmation-totals {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	margin-top: 1.5rem;
	padding: 1.4rem;
}

.wc-block-order-confirmation-additional-fields-wrapper,
.wc-block-order-confirmation-additional-information {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	margin-top: 1.5rem;
	padding: 1.4rem;
}

/* Order received (order-received endpoint) and the order-tracking shortcode.
 *
 * WooCommerce prints this page from its own stylesheet using selectors that outrank a
 * bare class \u2014 `.woocommerce-order-overview.woocommerce-thankyou-order-details li`,
 * for one \u2014 so the previous block here took effect only in part. Measured on the
 * live page: the summary boxes kept a dashed right edge, zero left padding and an
 * 11.4px label; the headings came back with `margin-top: 0`; the address box kept
 * WooCommerce's uneven 1px/2px border and 6px padding; and every table cell kept its
 * own border, so the order details read as a spreadsheet grid.
 *
 * The `body` prefix below exists only to out-rank those plugin selectors without
 * reaching for `!important`. Every rule stays scoped to elements that appear on this
 * page, so nothing else on the site is affected.
 */
body .woocommerce-order .woocommerce-thankyou-order-received,
body .woocommerce-thankyou-order-received {
	background: var(--tr-accent-soft);
	border-left: 4px solid var(--tr-accent);
	border-radius: var(--tr-radius);
	color: var(--tr-primary);
	font-size: 1.3rem;
	font-weight: 700;
	padding: 1rem 1.25rem;
}

body .woocommerce .woocommerce-order ul.woocommerce-order-overview,
body .woocommerce ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

body .woocommerce ul.woocommerce-order-overview li {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	color: var(--tr-text-muted);
	flex: 1 1 12rem;
	font-size: .8rem;
	letter-spacing: .04em;
	line-height: 1.5;
	padding: 1rem 1.25rem;
	text-transform: uppercase;
}

body .woocommerce ul.woocommerce-order-overview li strong {
	color: var(--tr-text);
	display: block;
	font-size: 1.05rem;
	letter-spacing: 0;
	line-height: 1.4;
	margin-top: .4rem;
	text-transform: none;
}

body .woocommerce .woocommerce-order-details > h2,
body .woocommerce .woocommerce-customer-details > h2 {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 2.5rem 0 1rem;
}

/* A list of lines, not a spreadsheet. Keep one rule between rows and drop the box
   around every cell, then right-align the money column so the figures stack. */
body .woocommerce .woocommerce-order-details table.shop_table {
	border: 0;
	border-collapse: collapse;
}

body .woocommerce .woocommerce-order-details table.shop_table th,
body .woocommerce .woocommerce-order-details table.shop_table td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--tr-border);
	padding: 1rem .5rem;
	text-align: left;
}

body .woocommerce .woocommerce-order-details table.shop_table thead th {
	border-bottom: 2px solid var(--tr-border);
	color: var(--tr-text-muted);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .05em;
	padding-bottom: .7rem;
	padding-top: 0;
	text-transform: uppercase;
}

body .woocommerce .woocommerce-order-details table.shop_table th:last-child,
body .woocommerce .woocommerce-order-details table.shop_table td:last-child {
	text-align: right;
}

body .woocommerce .woocommerce-order-details table.shop_table tbody td:first-child {
	text-align: left;
}

body .woocommerce .woocommerce-order-details table.shop_table tfoot th,
body .woocommerce .woocommerce-order-details table.shop_table tfoot td {
	border-bottom: 0;
	color: var(--tr-text-muted);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	padding-bottom: .35rem;
	padding-top: .35rem;
}

/* Uppercase belongs on the labels. Applied to the cells too it shouted the payment
   method back at the customer as "CHECK PAYMENTS". */
body .woocommerce .woocommerce-order-details table.shop_table tfoot th {
	text-transform: uppercase;
}

body .woocommerce .woocommerce-order-details table.shop_table tfoot td {
	text-transform: none;
}

/* The last footer row is the total (or the payment method); set it apart. */
body .woocommerce .woocommerce-order-details table.shop_table tfoot tr:last-child th,
body .woocommerce .woocommerce-order-details table.shop_table tfoot tr:last-child td {
	border-top: 1px solid var(--tr-border);
	color: var(--tr-text);
	font-size: 1rem;
	padding-top: .9rem;
}

body .woocommerce .woocommerce-customer-details address {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	color: var(--tr-text-muted);
	font-style: normal;
	line-height: 1.8;
	padding: 1.25rem;
}

/* WooCommerce marks the phone and email with glyphs from its own icon font, which
   this theme never loads \u2014 so they rendered as stray marks, a pencil beside the
   phone number. Drop the glyphs and space the two lines instead. */
body .woocommerce .woocommerce-customer-details address p {
	margin: .9rem 0 0;
}

body .woocommerce .woocommerce-customer-details address p::before {
	display: none;
}

/* --- 43.10 Other WooCommerce default buttons (theme consistency) ------- */
.woocommerce .button.wc-backward,
.woocommerce .button.wc-forward,
.woocommerce a.button.checkout-button {
	background-color: var(--tr-primary);
	border-color: var(--tr-primary);
	color: #fff;
}

/* ==========================================================================
   44. Login / register / lost-password card (.ma-auth)
   A single centred card: icon, title, subtitle, fields, the "New here?" divider
   and the panel-switch button — replacing WooCommerce's default two columns.
   ========================================================================== */
.ma-auth {
	margin: 0 auto;
	max-width: 27rem;
	width: 100%;
}

.ma-auth-card {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(17, 26, 46, .08);
	padding: 2.25rem 2rem;
	text-align: center;
}

/* Inactive panels are hidden by JS. Without JS both cards stay visible, so the
   forms remain usable. */
.ma-auth-card[hidden] {
	display: none;
}

.ma-auth-icon {
	align-items: center;
	background: var(--tr-primary-light);
	border-radius: 50%;
	color: var(--tr-primary);
	display: inline-flex;
	height: 3.5rem;
	justify-content: center;
	margin-bottom: 1rem;
	width: 3.5rem;
}

.ma-auth-icon svg {
	height: 1.65rem;
	width: 1.65rem;
}

.ma-auth-card h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 .4rem;
}

.ma-auth-card h2::after {
	content: none;
}

.ma-auth-sub {
	color: var(--tr-text-muted);
	font-size: .95rem;
	margin: 0 0 1.6rem;
}

.ma-auth-card form {
	text-align: left;
}

.ma-auth-card .form-row {
	margin-bottom: 1rem;
	padding: 0;
}

.ma-auth-card .form-row label {
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: .35rem;
}

/* Single-line field (the lost-password form uses .form-row-first, which
   WooCommerce still floats at 47% — higher specificity is required). */
.ma-auth-card form p.form-row-first,
.ma-auth-card form p.form-row-last,
.ma-auth-card form p.form-row-wide {
	float: none;
	width: 100%;
}

/* Meta row: "Remember me" + "Lost your password?". */
.ma-auth-card .ma-meta-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	justify-content: space-between;
	margin: .35rem 0 1.25rem;
}

.woocommerce-form-login__rememberme {
	align-items: center;
	display: inline-flex;
	font-size: .9rem;
	font-weight: 600;
	gap: .45rem;
	margin: 0;
}

.ma-lost-link {
	color: var(--tr-primary);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
}

.ma-lost-link:hover,
.ma-lost-link:focus {
	text-decoration: underline;
}

.ma-btn-block {
	display: inline-flex;
	float: none;
	justify-content: center;
	width: 100%;
}

/* WooCommerce sets float:left on form buttons — remove it so the elements after
   them (the divider, the panel-switch button) are not squeezed. */
.woocommerce .ma-auth-card .ma-btn-block,
.woocommerce .ma-auth-card button.button,
.woocommerce .ma-auth-card a.button {
	float: none;
}

/* Outline buttons ("Create account" / "Log in" / "Back to login"). */
.woocommerce .ma-auth-card button.ma-btn-outline,
.woocommerce .ma-auth-card a.ma-btn-outline {
	background: #fff;
	border: 1px solid var(--tr-border);
	color: var(--tr-primary);
	font-weight: 600;
}

.woocommerce .ma-auth-card button.ma-btn-outline:hover,
.woocommerce .ma-auth-card button.ma-btn-outline:focus,
.woocommerce .ma-auth-card a.ma-btn-outline:hover,
.woocommerce .ma-auth-card a.ma-btn-outline:focus {
	background: var(--tr-primary-light);
	border-color: var(--tr-primary);
	color: var(--tr-primary-dark);
}

.ma-divider {
	align-items: center;
	color: var(--tr-text-muted);
	display: flex;
	font-size: .85rem;
	gap: .75rem;
	margin: 1.5rem 0 1rem;
}

.ma-divider::before,
.ma-divider::after {
	background: var(--tr-border);
	content: "";
	flex: 1;
	height: 1px;
}

.ma-auth-card .ma-auth-note {
	color: var(--tr-text-muted);
	font-size: .88rem;
	margin: 0 0 1.1rem;
}

.ma-auth-card .ma-submit-row {
	margin: 0;
}

/* Password field + WooCommerce's show/hide button. */
.ma-auth-card .password-input {
	display: block;
	position: relative;
}

.ma-auth-card .password-input input {
	padding-right: 2.75rem;
}

.ma-auth-card .show-password-input {
	color: var(--tr-primary);
	right: .65rem;
	top: 50%;
	transform: translateY(-50%);
}

.ma-auth-card .show-password-input::after {
	color: currentColor;
}

@media (max-width: 30rem) {
	.ma-auth-card {
		padding: 1.75rem 1.25rem;
	}
}

/* ==========================================================================
   45. Off-canvas cart drawer
   ==========================================================================
   The panel is hidden by default; opened by assets/js/cart-drawer.js
   (clicking the cart icon, or after an add-to-cart).
   `visibility` is delayed .3s while closing so the slide-out animation is
   visible; otherwise the panel vanishes instantly. */

.tr-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear .3s;
}

.tr-cart-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.tr-cart-drawer__backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(17, 26, 46, .55);
	opacity: 0;
	transition: opacity .25s ease;
}

.tr-cart-drawer.is-open .tr-cart-drawer__backdrop {
	opacity: 1;
}

.tr-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(24.5rem, 92vw);
	background: var(--tr-bg);
	border-left: 1px solid var(--tr-border);
	box-shadow: -14px 0 34px rgba(17, 26, 46, .2);
	transform: translateX(100%);
	transition: transform .28s ease;
}

.tr-cart-drawer.is-open .tr-cart-drawer__panel {
	transform: translateX(0);
}

/* The panel is focused programmatically (no focus ring on the dialog container). */
.tr-cart-drawer__panel:focus {
	outline: none;
}

/* The WordPress admin bar (z-index 99999) covers the drawer head while signed
   in — push the drawer below it so the close button is not buried. */
body.admin-bar .tr-cart-drawer {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .tr-cart-drawer {
		top: 46px;
	}
}

/* Kunci skrol latar semasa drawer terbuka. */
body.tr-cart-drawer-open {
	overflow: hidden;
}

.tr-cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: 0 0 auto;
	padding: 1.05rem 1.25rem;
	background: var(--tr-bg-alt);
	border-bottom: 1px solid var(--tr-border);
}

.tr-cart-drawer__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--tr-text);
}

.tr-cart-drawer__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.45rem;
	height: 1.45rem;
	padding: 0 .35rem;
	font-size: .74rem;
	font-weight: 700;
	color: var(--tr-primary-dark);
	background: var(--tr-accent);
	border-radius: 999px;
}

.tr-cart-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	color: var(--tr-text);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tr-cart-drawer__close:hover,
.tr-cart-drawer__close:focus {
	color: var(--tr-primary-dark);
	background: var(--tr-primary-light);
	border-color: var(--tr-primary);
}

/* The drawer body is replaced by WooCommerce's fragments after every add/remove
   — do not put stateful elements inside it. */
/* The body is a column: only the item list scrolls, so the subtotal and the two
   buttons stay pinned to the bottom of the drawer however many items are in the
   cart. Previously the whole body scrolled and Checkout slid off-screen. */
.tr-cart-drawer__body {
	/* One number to tune the drawer's product thumbnail. The image is taken out of
	   the flow below, so every spacing rule is derived from this rather than
	   hard-coding the size in five places. */
	--tr-cart-thumb: 72px;

	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	/* Padding lives on the parts below, not here. */
	padding: 0;
}

/* WooCommerce's widget wrapper, when a widget renders the cart instead. */
.tr-cart-drawer__body .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.tr-cart-drawer__body .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 2.5rem 1.25rem;
	text-align: center;
	color: var(--tr-text-muted);
}

/* The item list is the only scrolling part. */
.tr-cart-drawer__body ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 1rem 1.25rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

/* The row reads: thumbnail, then the product name with its price directly beneath
   it.
   WooCommerce puts the image and the name inside one flex anchor, so the anchor is
   as tall as the thumbnail and the price — a sibling of that anchor — falls
   below the whole box, leaving ~36px of dead space between the name and its own
   price. Lifting the thumbnail out of the flow collapses the anchor to the name's
   own height, and the price tucks in underneath. */
.tr-cart-drawer__body .woocommerce-mini-cart-item {
	position: relative;
	min-height: calc(var(--tr-cart-thumb) + 1.8rem);   /* room for the out-of-flow thumbnail */
	padding: .9rem 1.9rem .9rem 0;
	border-bottom: 1px solid var(--tr-border);
}

.tr-cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove) {
	display: block;
	padding-left: calc(var(--tr-cart-thumb) + .85rem);   /* clear the thumbnail, which is absolute */
	color: var(--tr-text);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.tr-cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove):hover,
.tr-cart-drawer__body .woocommerce-mini-cart-item > a:not(.remove):focus {
	color: var(--tr-primary);
}

/* Three classes on purpose. WooCommerce ships
   `.woocommerce ul.cart_list li img { width: 32px; height: auto }` at specificity
   0-2-3, which beat the one-class version of this rule (0-2-1) on exactly the pages
   that carry the `.woocommerce` body class — the shop archive and the single product
   page. Result: the drawer thumbnail rendered 32px and pulled down a 26px image file
   on those pages, while the cart, home and checkout pages showed the intended 72px.
   Three classes outrank it everywhere, without `!important`. */
body .tr-cart-drawer__body ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	/* Out of the flow so the anchor — which holds both this image and the product
	   name — is only as tall as the name, letting the price sit right under it.
	   `top: 0` on an absolutely positioned box measures from the PADDING edge, not
	   the content edge, so it parked the thumbnail 14px above the name (text centre
	   122, image centre 112). Centre it against the row instead: for a one-line name
	   that lands the top edge level with the name, and for a name that wraps the
	   thumbnail stays balanced against the taller block. */
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: var(--tr-cart-thumb);
	height: var(--tr-cart-thumb);
	padding: 2px;
	object-fit: contain;
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: 8px;
}

/* Quantity & variations align with the product name, not the thumbnail. */
.tr-cart-drawer__body .woocommerce-mini-cart-item .quantity,
.tr-cart-drawer__body .woocommerce-mini-cart-item .variation {
	display: block;
	margin: .3rem 0 0 calc(var(--tr-cart-thumb) + .85rem);
	color: var(--tr-text-muted);
	font-size: .85rem;
}

/* Quantity stepper. It takes the place of the old "2 × S$240.00" line, at the same
   indent as the product name, with the line total following it. */
.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty {
	display: inline-flex;
	align-items: center;
	margin: .35rem 0 0 calc(var(--tr-cart-thumb) + .85rem);
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: 999px;
	overflow: hidden;
}

.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--tr-primary);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}

.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty__btn:hover,
.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty__btn:focus-visible {
	background: var(--tr-bg-alt);
}

.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty__input {
	width: 2.1rem;
	height: 1.7rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--tr-text);
	font-size: .9rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

/* The stepper buttons are the control, so hide the native number spinners. */
.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty__input::-webkit-outer-spin-button,
.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.tr-cart-drawer__body .woocommerce-mini-cart-item .tr-qty__line {
	display: block;
	margin: .3rem 0 0 calc(var(--tr-cart-thumb) + .85rem);
	color: var(--tr-text-muted);
	font-size: .85rem;
}

.tr-cart-drawer__body .woocommerce-mini-cart-item .remove {
	position: absolute;
	top: .85rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.65rem;
	height: 1.65rem;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	/* WooCommerce sets `color: var(--wc-red) !important` on a.remove, so that red
	   glyph cannot (and need not) be overridden. The rest of the styling here
	   complements it: a soft red background so the red glyph looks intentional
	   rather than stray. */
	color: var(--wc-red, #a00);
	background: #fdeaea;
	border: 1px solid #f3c9c9;
	border-radius: 50%;
	text-decoration: none;
}

.tr-cart-drawer__body .woocommerce-mini-cart-item .remove:hover,
.tr-cart-drawer__body .woocommerce-mini-cart-item .remove:focus {
	background: var(--wc-red, #a00);
	border-color: var(--wc-red, #a00);
}

.tr-cart-drawer__body .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	/* Pinned to the bottom: never scrolls away with the item list. */
	flex: 0 0 auto;
	margin: 0;
	padding: .95rem 1.25rem 0;
	border-top: 1px solid var(--tr-border);
	color: var(--tr-text);
	font-size: 1rem;
	font-weight: 700;
}

.tr-cart-drawer__body .woocommerce-mini-cart__total .amount {
	margin-left: auto;
	white-space: nowrap;
}

.tr-cart-drawer__body .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	/* Pinned with the subtotal above it. */
	flex: 0 0 auto;
	margin: 0;
	padding: .85rem 1.25rem 1.25rem;
}

.tr-cart-drawer__body .woocommerce-mini-cart__buttons a.button {
	display: block;
	margin: 0;
	padding: .78rem 1rem;
	text-align: center;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	background: var(--tr-primary);
	border: 1px solid var(--tr-primary);
	border-radius: var(--tr-radius);
	text-decoration: none;
}

.tr-cart-drawer__body .woocommerce-mini-cart__buttons a.button:hover,
.tr-cart-drawer__body .woocommerce-mini-cart__buttons a.button:focus {
	color: #fff;
	background: var(--tr-primary-dark);
	border-color: var(--tr-primary-dark);
}

/* Checkout button = accent (navy text on lime, 7.40:1). */
.tr-cart-drawer__body .woocommerce-mini-cart__buttons a.button.checkout {
	color: var(--tr-primary-dark);
	background: var(--tr-accent);
	border-color: var(--tr-accent);
}

.tr-cart-drawer__body .woocommerce-mini-cart__buttons a.button.checkout:hover,
.tr-cart-drawer__body .woocommerce-mini-cart__buttons a.button.checkout:focus {
	color: var(--tr-primary-dark);
	background: var(--tr-accent-dark);
	border-color: var(--tr-accent-dark);
}

/* --------------------------------------------------------------------------
   In-page anchor offset.
   The header is sticky: 134px tall normally, 181px at tablet widths (<=900px).
   Without this, following an in-page anchor (for example
   /product/<slug>/#tab-description) puts the target flush against the top of
   the viewport, hidden behind the header.
   scroll-padding-top on the scroll container is enough on its own: it applies
   to anchor navigation and to scrollIntoView(). Adding scroll-margin-top on
   the target as well would stack, doubling the offset.
   -------------------------------------------------------------------------- */
html {
	scroll-padding-top: 150px;
}

@media (max-width: 900px) {
	html {
		scroll-padding-top: 200px;
	}
}

/* ==========================================================================
   Product enquiry modal
   One <dialog> serves every "Enquire" button on the page; the fields reuse the
   .tr-cform styles so the contact page and this modal stay identical.
   ========================================================================== */
.tr-enq {
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 3rem);
	padding: 0;
	color: var(--tr-text);
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(17, 26, 46, .28);
	/* The form scrolls inside the dialog so the close button never scrolls away. */
	overflow: hidden;
}

.tr-enq[open] {
	display: flex;
	flex-direction: column;
}

.tr-enq::backdrop {
	background: rgba(17, 26, 46, .55);
}

.tr-enq__form {
	overflow: auto;
	padding: clamp(1.5rem, 4vw, 2.25rem);
}

.tr-enq__close {
	position: absolute;
	top: .7rem;
	right: .7rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--tr-text-muted);
	background: var(--tr-bg);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.tr-enq__close:hover,
.tr-enq__close:focus-visible {
	color: var(--tr-text);
	background: var(--tr-bg-alt);
}

.tr-enq__title {
	margin: 0 0 .5rem;
	padding-right: 2.75rem;
	font-size: 1.35rem;
}

/* The product the enquiry is about, so it is never ambiguous. */
.tr-enq__product {
	margin: 0 0 1.25rem;
	padding: .6rem .85rem;
	font-weight: 600;
	color: var(--tr-primary);
	background: var(--tr-primary-light);
	border-radius: 8px;
}

/* The contact page's tall comments box would dominate the modal. */
.tr-enq textarea {
	min-height: 120px;
}

/* Single product: the button follows the "Price on request" notice. */
.tr-enquire--single {
	margin-top: 1.25rem;
}

/* The loop button is a real <button> now instead of a link. The theme's base
   button rule (and the .woocommerce button.button normalisation) already supply
   the font, colour, padding and hover state, so only the width needs pinning:
   a font/line-height reset here would desynchronise it from the other buttons. */
.woocommerce ul.products li.product button.tr-enquire {
	width: 100%;
}

/* The cart lists what was ordered, not what the product is, so the shop description
   that WooCommerce prints under each item name is dropped in the cart AND in the
   checkout's order summary.

   It is only simple products that carry a description in this slot: measured on
   /cart/ and /checkout/, a simple product rendered
   `.wc-block-components-product-metadata__description` on its own, while a variable
   product rendered `.wc-block-components-product-details` ("Kit option: Complete Kit")
   and no description at all. The second rule keeps the description for any product
   that does carry chosen options in the same slot.

   Scoped by container rather than by the component class alone: the same
   `wc-block-components-product-metadata` markup appears in the mini-cart drawer and in
   the cart page's own listing, and the drawer has to stay as it is.
   `.wc-block-components-order-summary` is listed because the order summary renders in
   both the cart sidebar and the checkout. */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description,
.wc-block-cart .wc-block-components-product-metadata__description,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-product-metadata__description,
.wc-block-components-order-summary .wc-block-components-product-metadata__description {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-components-product-metadata:has(.wc-block-components-product-details) .wc-block-components-product-metadata__description,
.wc-block-cart .wc-block-components-product-metadata:has(.wc-block-components-product-details) .wc-block-components-product-metadata__description,
.wp-block-woocommerce-checkout .wc-block-components-product-metadata:has(.wc-block-components-product-details) .wc-block-components-product-metadata__description,
.wc-block-checkout .wc-block-components-product-metadata:has(.wc-block-components-product-details) .wc-block-components-product-metadata__description,
.wc-block-components-order-summary .wc-block-components-product-metadata:has(.wc-block-components-product-details) .wc-block-components-product-metadata__description {
	display: block;
}