/*
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.3.29
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 — MALAYSIA build (blue). Colours only; structure,
	   layout and content are identical to the original build.
	     primary      #1c3f93  main colour (background, white text on it)
	     accent       #7fb2f3  light blue accent (background, dark text on it)
	   Contrast ratios (WCAG, measured):
	     white on primary      =  12.76:1  -> safe for text
	     primary on white      =  9.63:1  -> safe for text
	     primary-dark on accent =  5.81:1  -> safe
	     accent on white          =  2.20:1  -> BACKGROUND only, never text
	   Accent is a BACKGROUND colour only; text on it uses --tr-primary-dark.
	   ------------------------------------------------------------------ */
	--tr-primary: #1c3f93;
	--tr-primary-dark: #142e6e;
	--tr-primary-light: #e8edfa;
	--tr-accent: #7fb2f3;
	--tr-accent-dark: #6ea8f0;
	--tr-accent-soft: #eaf1fe;
	--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;
}

/* Nested-menu accordion trigger (mobile). Hidden on desktop, where the
   dropdowns open on hover instead. */
.tr-menu .menu-item-has-children {
	position: relative;
}

.tr-submenu-toggle {
	position: absolute;
	top: .1rem;
	right: .15rem;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tr-text-muted);
	font-size: .85rem;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--tr-radius);
}

.tr-submenu-toggle > span[aria-hidden="true"] {
	transition: transform .15s ease;
}

.tr-submenu-toggle:hover,
.tr-submenu-toggle:focus-visible {
	background: var(--tr-bg-alt);
	color: var(--tr-primary-dark);
}

@media (max-width: 47.9375rem) {
	.tr-menu .menu-item-has-children > a {
		padding-right: 3rem;
	}

	.tr-submenu-toggle {
		display: inline-flex;
	}

	/* JS adds .is-accordion, so with JS off every sub-menu stays visible. */
	.tr-menu.is-accordion .menu-item-has-children > .sub-menu {
		display: none;
	}

	.tr-menu.is-accordion .menu-item-has-children.is-open > .sub-menu {
		display: block;
	}

	.tr-menu.is-accordion .menu-item-has-children.is-open > .tr-submenu-toggle > span[aria-hidden="true"] {
		transform: rotate(180deg);
	}
}

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

	.tr-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 250px;
		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;
	}

	/* Level 3: fly out beside its parent item, not below it. */
	.tr-menu .sub-menu .sub-menu {
		top: -.35rem;
		left: 100%;
	}

	/* Caret so a level-2 item that has children is discoverable. */
	.tr-menu .sub-menu .menu-item-has-children > a {
		padding-right: 1.75rem;
		position: relative;
	}

	.tr-menu .sub-menu .menu-item-has-children > a::after {
		content: "\203A";
		position: absolute;
		right: .6rem;
		top: 50%;
		transform: translateY(-50%);
		font-weight: 700;
		line-height: 1;
		color: var(--tr-text-muted);
	}
}

/* ==========================================================================
   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;
}

/* Agency credit, sitting on the copyright line and a shade quieter than it. */
.tr-footer__credit {
	color: rgba(198, 210, 238, .72);
	white-space: nowrap;
}

.tr-footer__credit::before {
	content: "\00b7";
	margin: 0 .5rem;
}

/* Small screens: the credit wraps onto its own line, so a leading separator reads
   as a stray dot. Drop it and let the two lines stand on their own. */
@media (max-width: 34rem) {
	.tr-footer__credit::before {
		content: none;
		margin: 0;
	}
}

.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: 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-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);
}

/* Gallery zoom button (magnifier): stays under the header/dropdown. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	z-index: 5;
}

.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 & account
   ========================================================================== */
.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));
	}

	/* Homepage 02 — Oral-Motor: the three brand flyers share one row of three.
	   Keep this rule in the same media query as `--2` so the whole row switches
	   from the stacked (single-column) mobile layout to 3-up at the same point. */
	.tr-panels--3 {
		grid-template-columns: repeat(3, 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;
}

/* The flyer panels sit in pairs (`.tr-panels--2`), so their artwork must share one
   aspect ratio or the shorter card shows a strip of empty card at the bottom. All
   six brand panels are normalised to 566 / 406 (1.3941:1) — e.g. 600x430 — by
   padding the file with its own background colour, never by cropping, and the
   attachment metadata is regenerated afterwards so the width/height attributes and
   srcset follow. Normalise a replacement flyer the same way before uploading it. */

.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;
}

/* The banner is decorative now: its dark linear-gradient overlay was removed
   so the photo shows at full brightness. Text sitting on the image (the shop
   hero) keeps its own text-shadow in .tr-page-hero__title. */

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

/* Page title — moved out of the banner into the content column (page.php). */
.tr-page-header {
	margin-bottom: 1.75rem;
}

.tr-page-title {
	margin: 0;
	color: var(--tr-text);
}

/* Order-received (thank-you) endpoint only: the theme's thank-you hero already
   renders its own <h1> (.ty-title), so the generic page title header is hidden
   there to avoid a second heading at the top of the page. */
body.woocommerce-order-received .tr-page-header {
	display: none;
}

/* Subtle horizontal accent under the page title — a short 4px bar in the
   theme accent colour, matching the 4px accent stripe used on cards.
   Skipped on the cart / checkout / my-account pages, which keep their plain
   title and the original .tr-page-header spacing. */
body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .tr-page-header {
	/* Margin trimmed by the height of the accent bar below (.7rem top gap +
	   4px bar) so the gap to the content stays exactly what it was. */
	margin-bottom: .8rem;
}

body:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account) .tr-page-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	margin-top: .7rem;
	border-radius: 2px;
	background: var(--tr-accent);
}

.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);
}

/* ==========================================================================
   Shop By sidebar (product category archives)
   The sub-category filter and the product search used to be full-width bars
   above the grid; they now sit in a left column so the grid keeps the same
   width and shows 3 products per row.
   ========================================================================== */
.tr-shop-layout {
	display: grid;
	gap: 2rem;
	align-items: start;
}

.tr-shop-main {
	min-width: 0; /* let the product grid shrink instead of overflowing */
}

/* Term description: full container width, above the sidebar and the grid. */
.tr-shop-intro {
	margin-bottom: 2.5rem;
}

.tr-shop-intro > *:first-child {
	margin-top: 0;
}

.tr-shop-intro > *:last-child {
	margin-bottom: 0;
}

/* WooCommerce's own header is empty here — the title comes from the page hero
   and the description was moved to .tr-shop-intro above. */
.tr-shop-main > .woocommerce-products-header {
	display: none;
}

/* Publisher / brand logos (sub-category images) under the term description. */
.tr-brandstrip {
	margin-top: 1.75rem;
}

.tr-brandstrip__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-brandstrip__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 9rem;
	padding: .85rem 1.15rem;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tr-brandstrip__item:hover,
.tr-brandstrip__item:focus-within {
	border-color: var(--tr-accent);
	box-shadow: var(--tr-shadow);
}

.tr-brandstrip__item a {
	display: block;
	line-height: 0;
}

/* One height for every logo so a wide wordmark and a square seal carry the
   same visual weight. */
.tr-brandstrip__logo {
	width: auto;
	max-width: 100%;
	max-height: 3.25rem;
	height: auto;
	object-fit: contain;
}

@media (min-width: 64rem) {
	.tr-shop-layout {
		grid-template-columns: 15.5rem minmax(0, 1fr);
		gap: 2.5rem;
	}

	/* Three products per row beside the sidebar. */
	.tr-shop-layout .tr-shop-main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tr-shopby {
	padding: 1.25rem 1.25rem 1.5rem;
	background: var(--tr-bg);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: var(--tr-shadow);
}

.tr-shopby__heading {
	margin: 0 0 1.25rem;
	padding-bottom: .75rem;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tr-primary-dark);
	border-bottom: 2px solid var(--tr-primary);
}

.tr-shopby__block + .tr-shopby__block {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--tr-border);
}

.tr-shopby__label {
	margin: 0 0 .6rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tr-text-muted);
}

/* Search form: sidebar width, input above the button. */
.tr-shopby .tr-shop-search {
	margin-bottom: 0;
}

.tr-shopby .tr-shop-search .search-form,
.tr-shopby .tr-shop-search form {
	flex-direction: column;
	align-items: stretch;
	max-width: none;
}

.tr-shopby .tr-shop-search input[type="search"] {
	width: 100%;
}

/* Sub-category filter: chips become a vertical list with the count at the end. */
.tr-shopby .tr-subcatnav {
	display: block;
	margin: 0;
}

.tr-shopby .tr-subcatnav::before {
	content: none;
}

.tr-shopby .tr-subcatnav ul {
	display: block;
}

.tr-shopby .tr-subcatnav li + li {
	margin-top: .15rem;
}

.tr-shopby .tr-subcatnav a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .75rem;
	width: 100%;
	padding: .45rem .6rem;
	background: transparent;
	border: 0;
	border-radius: var(--tr-radius);
}

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

.tr-shopby .tr-subcatnav li.is-current a {
	background: var(--tr-primary-light);
	color: var(--tr-primary-dark);
}

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

.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;
}

/* Divider above the "Delivery" row.
   The Delivery block carries .wc-block-components-totals-wrapper, whose default rule
   in WooCommerce's packages-style.css draws the line as
   `1px solid var(--wc-separator-color, color-mix(in srgb, currentColor 20%, transparent))`
   — a 20% tint that reads as almost no line next to the theme's #dfe3ee dividers.
   Draw it in the theme's colour instead, at three classes so it wins over the plugin
   rule whatever order the stylesheets load in.
   The block class alone is also listed: the class set is added by the checkout's React
   render, so the server markup and the hydrated DOM are not always identical, and the
   line must not depend on which of the two the browser is showing. Both selectors name
   the same single element, so only one line is ever drawn.
   Scoped to the checkout (not the sidebar) so the small-screen copy of the order
   summary — which lives in the actions block — gets the same line. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-shipping-block.wc-block-components-totals-wrapper,
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-shipping-block {
	border-top: 1px solid var(--tr-border);
}

/* "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.5b2 Shipping methods: the same card as the payment methods ------ */
/* Client request: the shipping options must read exactly like the payment
   methods — one card per option, and the option that is selected continues into
   its detail (the courier's rate text and the pickup address) instead of showing
   that text inside the option row.

   WooCommerce renders the two shipping radio groups differently from payments,
   which is why the payment rules above do not reach them:
     - the courier rates sit in `.wc-block-components-shipping-rates-control__package`;
     - the pickup locations sit in `.wc-block-components-local-pickup-select`;
     - and in both, the description is rendered INSIDE the option's <label>
       (payments put theirs in a sibling `.wc-block-components-radio-control-accordion-content`,
       which is why the payment card can simply continue into it). Because the
       shipping description is inside the label, the ONE box the client wants is
       already there — the label's own border and radius wrap it — so the work is
       to style that text as a muted sub-block and to show it only for the option
       that is selected. Nothing about the markup or the selection logic changes.

   Three WooCommerce rules also had to be neutralised in these two groups, since
   they are rendered with `highlightChecked`:
     .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 4px ring (0,2,1) that out-specified the theme's 10px card border;
     ...--highlight-checked:after { border: 1px solid ...; border-radius: 4px }
       — a second frame drawn around the whole rate list;
     ...--highlight-checked .wc-block-components-radio-control__option:after
       { background: <separator>; height: 1px; top: 0 }
       — a grey rule across the top of every option.
   Both group names are named explicitly, so no other radio group on the site
   (payment methods, cart, order confirmation) is touched. To roll back, delete
   this whole section — it is presentation only. */

/* Every description collapses; only the selected option reveals it — the same
   behaviour as the selected payment method and its description. */
.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control__description-group {
	display: none;
}

.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control__option-checked
	.wc-block-components-radio-control__description-group {
	display: block;
	margin: .5rem -1.15rem -.95rem -2.9rem;
	padding: .15rem 1.15rem .95rem 2.9rem;
}

/* The address / rate text inside that block. WooCommerce gives the span its own
   font-size and block layout, so restate both here; it must not inherit the
   negative margins that pull the group out to the card's edges. */
.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control__option-checked
	.wc-block-components-radio-control__description {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--tr-text-muted);
	font-size: .9rem;
	line-height: 1.5;
	text-align: left;
}

/* The third-party chrome listed above. */
.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control--highlight-checked
	label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: none;
	border-radius: var(--tr-radius);
}

.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control--highlight-checked::after,
.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control--highlight-checked
	.wc-block-components-radio-control__option::after {
	content: none;
	border: 0;
	background: none;
}

/* The gap between two rate cards. WooCommerce zeroes the option's own margin
   (`.wc-block-components-radio-control .wc-block-components-radio-control__option
   { margin: 0 }`), which leaves the cards touching — the same trap the payment
   list had. The shipping options are direct children of the radio group (unlike
   the payment ones, which are wrapped), so the gap goes on the siblings —
   `* + *` — and not on the option, or the two would add up. */
.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control > * + * {
	margin-top: .6rem;
}

/* WooCommerce pins the radio beside the option's first line for the courier
   package only (`top:16px; transform:none`). The pickup list keeps the plugin's
   vertical centring, which would land the radio in the middle of the taller card
   once the address is attached, so state the same correction for both groups. */
.wc-block-checkout
	:is(.wc-block-components-shipping-rates-control__package, .wc-block-components-local-pickup-select)
	.wc-block-components-radio-control .wc-block-components-radio-control__input {
	top: 16px;
	transform: none;
}

/* --- 43.5b3 Shipping toggle: Ship / Pickup ----------------------------- */
/* The segmented control at the top of the shipping step. WooCommerce's own
   styles for it are the only thing on the page not built from the theme's
   tokens: a 6%-of-currentColor grey wash on an 8px radius, 4px corners on the
   segments, and the selected side shown as a white pill inside a 2px
   currentColor (near-black) border — which is why it reads as foreign next to
   the navy cards underneath it.
   Restated in the theme's own language: the same 10px radius and 1px
   `--tr-border` as every other panel, `--tr-bg-alt` as the track, and the
   selected side carrying the same navy border + light navy fill as a selected
   shipping or payment card.
   Specificity: this component's stylesheet (`assets/client/blocks/checkout.css`)
   is injected by WooCommerce AFTER the theme's, so an equal-specificity rule
   would lose. `#shipping-method` / `.components-button-group` are the two
   anchors present in the rendered markup (either one alone is enough, hence the
   pair) and the option rules hang off the container class. Tested in both load
   orders. Rollback: delete this section. */

.wc-block-checkout #shipping-method.wc-block-checkout__shipping-method-container,
.wc-block-checkout .components-button-group.wc-block-checkout__shipping-method-container {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	box-shadow: inset 0 1px 2px rgba(17, 26, 46, .05);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--tr-text-muted);
	cursor: pointer;
	/* the two segments own equal halves of the track — repeated from WooCommerce
	   (values unchanged) so the control keeps its shape even if this component's
	   stylesheet is not loaded */
	flex: 1 0 0;
	font-size: .95rem;
	font-weight: 600;
	justify-content: center;
	min-height: 44px;
	padding: .5rem 1rem;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option:hover,
.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option:focus-within {
	background: #fff;
	border-color: var(--tr-border);
	color: var(--tr-text);
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option:focus-visible {
	outline: 3px solid var(--tr-primary);
	outline-offset: 2px;
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option.wc-block-checkout__shipping-method-option--selected {
	background: var(--tr-primary-light);
	border-color: var(--tr-primary);
	color: var(--tr-primary-dark);
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option
	.wc-block-checkout__shipping-method-option-title-wrapper {
	align-items: center;
	gap: .5rem;
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option
	.wc-block-checkout__shipping-method-option-icon {
	height: 20px;
	opacity: .8;
	width: 20px;
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option--selected
	.wc-block-checkout__shipping-method-option-icon {
	opacity: 1;
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option
	.wc-block-checkout__shipping-method-option-title {
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
}

/* The optional price line under each label (only when the block is set to show
   prices); muted, and navy-dark inside the selected side. */
.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option
	.wc-block-checkout__shipping-method-option-price {
	color: var(--tr-text-muted);
	font-size: .82rem;
	font-weight: 500;
	margin-top: .1rem;
}

.wc-block-checkout
	.wc-block-checkout__shipping-method-container
	.wc-block-checkout__shipping-method-option--selected
	.wc-block-checkout__shipping-method-option-price {
	color: var(--tr-primary-dark);
	opacity: .85;
}

/* --- 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);
	}
}

/* 4. Cart: the Discount and Shipping rows get the divider the order-summary rows
   carry on the checkout. WooCommerce removes the wrapper's edge for the whole
   cart totals block — `.wp-block-woocommerce-cart-order-summary-totals-block
   .wc-block-components-totals-wrapper { border: 0 }` — so on the cart the
   Subtotal / Discount / Shipping rows run together with no line at all, and the
   discount is announced by the gap and the coupon chip only.
   Only those two wrappers are re-edged here, so the Subtotal row and the total
   row (which draws the theme's own 2px rule) are untouched.
   Where the line sits: a wrapper's `margin-top` is the space ABOVE its border and
   its `padding-top` the space BELOW it, and the space above an edge belongs to
   the previous row (its item's 8.8px bottom padding) while WooCommerce leaves 16px
   of wrapper padding below it. `.45rem` on each side therefore lands the rule
   exactly 16px under the text above it and 16px above its own label — the same
   spacing every divider has on the checkout — without touching the rows above. */
.wc-block-cart
	.wc-block-components-totals-wrapper:has(.wc-block-components-totals-discount),
.wc-block-cart
	.wc-block-components-totals-wrapper:has(.wc-block-components-totals-shipping) {
	border-top: 1px solid var(--tr-border);
	margin-top: .45rem;
	padding-top: .45rem;
}

/* 5. Cart: the whole Cart totals area as ONE card — same border, radius, spacing and
   row rhythm as the checkout order-summary card, at every width.
   WooCommerce draws that card on the checkout as `.checkout-order-summary-block-fill`
   (1px separator border, 5px radius, its first wrapper borderless) and rhythms it as
   "the wrapper draws the divider and holds no vertical padding, the row inside owns
   1rem". The cart reuses both, so the two pages read as the same component in either
   palette — the edge colour is derived from currentColor.
   Measured before this block (“check balik”): the rule above "Shipping" sat 7.2px below
   the row above and the one above "Estimated total" 32px, because WooCommerce's cart
   defaults are 8.8px item padding + 16px wrapper padding and the theme's own `.45rem`
   divider margins added to that. The checkout's flat rhythm is 16px / 16px. */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block {
	border: 1px solid var(--wc-separator-color, color-mix(in srgb, currentColor 20%, transparent));
	border-radius: 5px;
	padding: 0;                     /* the rows own the spacing, exactly as on the checkout */
}

/* First row inside draws no line of its own — the frame is the edge. Mirrors
   `.checkout-order-summary-block-fill .wc-block-components-totals-wrapper:first-of-type`. */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-wrapper:first-of-type {
	border-top: 0;
}

/* No stray margins anywhere in the card (the total row carried `margin-top: .5rem`). */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item,
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item,
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block > .wc-block-cart__totals-title {
	margin-top: 0;
	margin-bottom: 0;
}

/* The wrapper draws the divider and holds no vertical padding; the row inside owns
   the 1rem. This is what makes every rule sit 16px under the text above it and 16px
   above the text below it, like the checkout. */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-totals-block {
	padding-top: 0;
	padding-bottom: 0;
}

/* The coupon row keeps 1rem of its own above and below (same as the checkout card). */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* Text inset 1rem from the frame, 1rem above and below every divider. */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon,
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-item {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* "Cart totals" heading (desktop only) keeps its own look, only its top offset moves
   from the container's padding to the heading so the frame gap stays 16px. */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block > .wc-block-cart__totals-title {
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* "Cart totals" reads as the same title as the checkout's "Order summary".
   The plugin styles that one with `font-size: var(--wp--preset--font-size--medium, 22px)`,
   `font-weight: 500`, `line-height: 1.4` and no text-transform, while the cart heading ships as
   the small (13px) UPPERCASE label. Same declarations here so the two titles stay in step if the
   preset ever changes. Practically desktop-only: the heading is `display: none` below the 699px
   container query. Spacing (1rem from the frame, its own bottom padding) is untouched. */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block > .wc-block-cart__totals-title {
	font-size: var(--wp--preset--font-size--medium, 22px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	text-align: start;
}

/* "Estimated total" keeps the theme's 2px rule, now spaced like every other divider. */
.wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item {
	padding-top: 1rem;
}

/* --- 43.5d2 Cart and checkout: the coupon chip ------------------------- */
/* The removable coupon tag ("newuser ×") shown in the Discount row of both the
   cart and the checkout order summary. WooCommerce draws it as a transparent pill
   with a 1px currentColor (near-black) border whose × sits in a solid #e0e0e0
   circle that turns #949494 on hover — a grey dot button that matches nothing on
   this site.
   Restated as the site's own pill (see .tr-chiprow, the brand chips under the
   logo): rounded 999px, light navy surface, navy-dark semi-bold text, and the ×
   as a quiet circular button that fills in on hover instead of a grey dot.
   Scope: `.wc-block-components-totals-discount` is the Discount row in BOTH the
   cart and the checkout order summary (same component), so the block's other chip
   — the active-filter chips on the shop — is untouched.
   Rollback: delete this section. */

.wc-block-components-totals-discount .wc-block-components-chip {
	align-items: center;
	background: var(--tr-primary-light);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--tr-primary-dark);
	display: inline-flex;
	font-size: .82rem;
	font-weight: 600;
	gap: .35rem;
	line-height: 1;
	padding: .25rem .25rem .25rem .8rem;
	transition: background-color .15s ease, border-color .15s ease;
}

/* hover fires on the pill, but only when the pointer is on the × too — that is
   WooCommerce's own behaviour, kept so the pill does not react to a stray hover
   over the row. */
.wc-block-components-totals-discount .wc-block-components-chip:hover,
.wc-block-components-totals-discount .wc-block-components-chip:focus-within {
	background: #dde6f9;
	background: color-mix(in srgb, var(--tr-primary) 13%, #fff);
	border-color: var(--tr-primary);
}

.wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__text {
	font-size: 1em;
	/* WooCommerce pads the text when the chip is removable; the flex gap above
	   replaces that, so the pill stays symmetric. */
	padding-right: 0;
}

.wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove {
	align-items: center;
	background: transparent;
	/* the theme's global `button { background: navy; color: #fff }` reaches every
	   bare button, including this one — so its colour and border must be restated
	   or the × renders white-on-white. */
	border: 0;
	border-radius: 50%;
	color: var(--tr-primary-dark);
	display: inline-flex;
	flex: 0 0 auto;
	height: 22px;
	justify-content: center;
	line-height: 1;
	margin: 0;
	opacity: .7;
	padding: 0;
	transition: background-color .15s ease, opacity .15s ease;
	width: 22px;
}

.wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove:hover,
.wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove:focus-visible {
	background: rgba(28, 63, 147, .14);
	color: var(--tr-primary-dark);
	opacity: 1;
}

.wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove:focus-visible {
	outline: 2px solid var(--tr-primary);
	outline-offset: 1px;
}

.wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__remove-icon {
	fill: currentColor;
	height: 14px;
	width: 14px;
}

/* --- 43.5e Checkout totals: one rhythm for every row -------------------- */
/* Complaint: the three dividers in the order summary (above "Subtotal", "Delivery"
   and "Total") each sat a different distance from the text, so the Delivery row read
   as uneven. Measured in the browser (identical at 1280px and 390px):
     line above Delivery : 11.5px under "Subtotal", 23.2px above "Delivery"
     line above Total    : 25.8px under "Delivery", 15.4px above "Total"
   Two cascade traps caused it, both neutralised here:
     - WooCommerce's checkout.css zeroes the bottom padding of every row inside
       `.wp-block-woocommerce-checkout-order-summary-totals-block`
       (`... .wc-block-components-totals-wrapper { border: 0; padding-bottom: 0 }`),
       so a row gave 8.8px below its own text but 24.8px above the next row's;
     - the theme's own desktop and small-screen rules for the "Total" row added
       margin and padding on top of that.
   Now the row wrapper draws the divider and holds no vertical padding, the item
   inside it owns the spacing (1rem each side), the container's duplicate rule above
   "Subtotal" is dropped in favour of the subtotal row's own, and the footer item's
   own line is dropped in favour of its wrapper's. Result: every divider has the same
   16px of clear space above and below its text, on both breakpoints.
   `:has(.wc-block-components-totals-item)` is what keeps the empty Discount and Fee
   wrappers out of this — they render nothing, and WooCommerce hides them by zeroing
   the border and padding of `:empty` wrappers, so a rule without that guard would
   hand them a stray 1px line and 32px of dead space.
   These selectors sit at the end of the checkout section so they win by source order
   against the earlier rules they replace. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper,
.wc-block-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	padding-top: 0;
	padding-bottom: 0;
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper:has(.wc-block-components-totals-item),
.wc-block-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	border-top: 1px solid var(--tr-border);
}

.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-item,
.wc-block-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) .wc-block-components-totals-item {
	padding: 1rem 0;
}

/* The container's own line above "Subtotal" — the subtotal row draws that one now. */
.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
	border-top: 0;
	padding-bottom: 0;
}

/* "Total": the wrapper draws the line, the item only holds the spacing. */
.wc-block-checkout .wc-block-components-totals-footer-item {
	border-top: 0;
	margin-top: 0;
}

/* Small screens only: there the order summary is a bordered card — the desktop panel
   edge is removed by the theme, but `.checkout-order-summary-block-fill` keeps its 1px
   border on mobile. Measured at 390px, the totals rows sat 1px from that border (text
   touching the frame), while the coupon row sits at 16px and the product rows at 15.4px.
   Inset the text only, so the dividers stay full-bleed like the rest of the card.
   Placed after the rules above because the `padding: 1rem 0` shorthand there would
   otherwise zero these two sides back out again. */
@media (max-width: 739px) {
	.wc-block-checkout .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-item,
	.wc-block-checkout .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) .wc-block-components-totals-item {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* 5b. Checkout, desktop: the order summary gets the same card as the cart totals —
   the 1px edge, 5px radius and 1rem rhythm the cart card already uses, so the two
   pages read as one component. Placed here (end of the checkout section) so it wins
   by source order against `.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block
   { border: 0 }` higher up, which existed only because the summary had no outer edge.
   The sidebar copy of the summary is `display: none` at <=739px — mobile keeps using
   `.checkout-order-summary-block-fill` — so nothing here paints on a phone. */
@media (min-width: 740px) {
	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		border: 1px solid var(--wc-separator-color, color-mix(in srgb, currentColor 20%, transparent));
		border-radius: 5px;
	}

	/* The product block keeps its tint (it is what separates the products from the
	   totals on this page) but loses the second frame: inside the card its own 1px
	   border and 10px radius would sit right on top of the new edge. Its padding drops
	   from 1.4rem to 1rem so the products line up with the 1rem every other row uses. */
	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary {
		border: 0;
		border-radius: 0;
		padding: 1rem;
	}

	/* Text 1rem from the frame. WooCommerce insets the coupon row and the titles by
	   itself, but the product rows and every totals row were flush against the edge
	   (measured 0px) on desktop — invisible until the card has an edge.
	   Left/right only: the dividers stay full-bleed, as on the cart. */
	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item,
	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper .wc-block-components-totals-item {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* --- 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;
}

/* Customer reviews. */
.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;
	}
}

/* Lock background scroll while the drawer is open. */
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 &times; 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;
}

/* ==========================================================================
   46. Order received page — receipt card (.ty-*)
   The page hero band is hidden here: the receipt carries its own heading
   ("Order confirmed"), and two headings stacked reads as a mistake.
   ========================================================================== */
body.woocommerce-order-received .tr-page-hero {
	display: none;
}

.ty-wrap {
	margin: 0 auto;
	max-width: 52rem;
}

.ty-hero {
	margin-bottom: 2.25rem;
	text-align: center;
}

.ty-check {
	align-items: center;
	background: var(--tr-accent);
	border-radius: 50%;
	color: var(--tr-primary-dark);
	display: inline-flex;
	height: 4rem;
	justify-content: center;
	margin-bottom: 1rem;
	width: 4rem;
}

.ty-check svg {
	height: 2rem;
	width: 2rem;
}

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

.ty-title {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .6rem;
}

.ty-sub {
	color: var(--tr-text-muted);
	margin: 0 0 1rem;
}

.ty-order-num {
	background: var(--tr-primary-light);
	border-radius: 999px;
	color: var(--tr-primary-dark);
	display: inline-block;
	font-size: .85rem;
	font-weight: 700;
	padding: .35rem .9rem;
}

/* Receipt card: line items, then the totals rows. */
.ty-card {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: 14px;
	box-shadow: var(--tr-shadow);
	padding: 1.75rem;
}

.ty-item {
	align-items: center;
	display: flex;
	gap: 1rem;
	padding: 1rem 0;
}

.ty-item + .ty-item {
	border-top: 1px solid var(--tr-border);
}

.ty-item:first-child {
	padding-top: 0;
}

.ty-thumb {
	flex: 0 0 auto;
	position: relative;
}

.ty-thumb img {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: 10px;
	display: block;
	height: 4.5rem;
	object-fit: contain;
	padding: .25rem;
	width: 4.5rem;
}

.ty-qty {
	align-items: center;
	background: var(--tr-primary);
	border-radius: 999px;
	color: #fff;
	display: flex;
	font-size: .7rem;
	font-weight: 700;
	height: 1.35rem;
	justify-content: center;
	min-width: 1.35rem;
	padding: 0 .3rem;
	position: absolute;
	right: -.4rem;
	top: -.4rem;
}

.ty-item-info {
	flex: 1 1 auto;
	min-width: 0;
}

.ty-item-name {
	font-weight: 600;
	margin: 0;
}

.ty-item-meta {
	color: var(--tr-text-muted);
	font-size: .85rem;
	margin-top: .3rem;
}

.ty-item-meta ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ty-item-meta p {
	margin: 0;
}

.ty-item-price {
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
}

.ty-rows {
	border-top: 1px solid var(--tr-border);
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.ty-row {
	display: flex;
	font-size: .95rem;
	gap: 1rem;
	justify-content: space-between;
	padding: .55rem 0;
}

.ty-row > span:first-child {
	color: var(--tr-text-muted);
	font-weight: 600;
}

.ty-row-total {
	border-top: 2px solid var(--tr-border);
	font-size: 1.15rem;
	font-weight: 700;
	margin-top: .5rem;
	padding-top: 1rem;
}

.ty-row-total > span {
	color: var(--tr-primary);
}

/* Billing and shipping. */
.ty-addresses {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 1.5rem;
}

.ty-addresses--single {
	grid-template-columns: minmax(0, 1fr);
}

.ty-address {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	padding: 1.25rem;
}

.ty-address h3 {
	font-size: 1rem;
	margin: 0 0 .5rem;
}

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

/* "What happens next?" and its buttons. */
.ty-next {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: 14px;
	box-shadow: var(--tr-shadow);
	margin-top: 1.5rem;
	padding: 1.75rem;
}

.ty-next h2 {
	font-size: 1.25rem;
	margin: 0 0 .5rem;
}

.ty-next p {
	color: var(--tr-text-muted);
	margin: 0 0 1.25rem;
}

.ty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.woocommerce .ty-btn-outline.button {
	background: #fff;
	border: 1px solid var(--tr-border);
	color: var(--tr-primary);
}

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

/* Gateway instructions printed by woocommerce_thankyou (BACS bank details).
   The gateway wraps everything in <section class="woocommerce-bacs-bank-details">,
   which also carries the same class on the inner <ul> — style the section as the
   card and the list as the light panel inside it. */
.ty-wrap > p {
	color: var(--tr-text-muted);
	margin: 1.5rem 0 0;
}

.ty-wrap .woocommerce-bacs-bank-details {
	background: #fff;
	border: 1px solid var(--tr-border);
	border-radius: 14px;
	box-shadow: var(--tr-shadow);
	margin-top: 1.5rem;
	padding: 1.75rem;
}

.ty-wrap .woocommerce-bacs-bank-details > :is(h2, h3) {
	font-size: 1.25rem;
	margin: 0 0 .4rem;
}

.ty-wrap .woocommerce-bacs-bank-details > p {
	color: var(--tr-text-muted);
	margin: 0;
}

.ty-wrap .woocommerce-bacs-bank-details ul.wc-bacs-bank-details {
	background: var(--tr-bg-alt);
	border: 1px solid var(--tr-border);
	border-radius: var(--tr-radius);
	display: block;
	list-style: none;
	margin: 1rem 0 0;
	padding: 1.25rem;
}

.ty-wrap .wc-bacs-bank-details li {
	color: var(--tr-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .75rem;
	justify-content: space-between;
	margin: 0 0 .5rem;
}

.ty-wrap .wc-bacs-bank-details li:last-child {
	margin-bottom: 0;
}

.ty-wrap .wc-bacs-bank-details li strong {
	color: var(--tr-text);
}

.ty-notice {
	border-radius: var(--tr-radius);
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem;
}

.ty-notice--error {
	background: #fdecea;
	border: 1px solid #f0c0bb;
	color: var(--tr-text);
}

.ty-next-actions {
	display: flex;
	gap: .75rem;
	margin: 0 0 1.5rem;
}

@media (max-width: 47.999rem) {
	.ty-addresses {
		grid-template-columns: minmax(0, 1fr);
	}

	.ty-card,
	.ty-next {
		padding: 1.25rem;
	}

	.ty-thumb img {
		height: 3.5rem;
		width: 3.5rem;
	}

	.ty-actions .button {
		justify-content: center;
		width: 100%;
	}
}

/* ==========================================================================
   47. Breadcrumb bar — full width, right under the header.
   All pages except the front page. biru background, white text.
   ========================================================================== */

/* This colour was chosen because white text on it = 12.76:1 (WCAG AA).
   The theme accent must NOT be used for text — white on it fails WCAG AA. */
:root {
	--tr-breadcrumb-bg: #1c3f93;
}

.tr-breadcrumb {
	background: var(--tr-breadcrumb-bg);
	color: #fff;
	font-size: .875rem;
	line-height: 1.5;
}

.tr-breadcrumb__inner {
	padding-top: .6rem;
	padding-bottom: .6rem;
}

.tr-breadcrumb__trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	min-width: 0;
}

.tr-breadcrumb__trail a,
.tr-breadcrumb__current {
	color: #fff;
	text-decoration: none;
}

.tr-breadcrumb__trail a:hover,
.tr-breadcrumb__trail a:focus {
	text-decoration: underline;
	text-underline-offset: .15em;
}

.tr-breadcrumb__current {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.tr-breadcrumb__sep {
	color: rgba(255, 255, 255, .6);
}

@media (max-width: 47.999rem) {
	.tr-breadcrumb {
		font-size: .8125rem;
	}
}

/* ==========================================================================
   Header menu: long sub-menus scroll (desktop +
   Only the deepest sub-menu (the one with no children/flyout) is affected
   so the level-3 flyout is never clipped. Old browsers without :has() support
   akan jatuh balik ke menu asal (tanpa scroll).
   This block was added 2026-09-18 — remove it to go back
   ========================================================================== */
@media (min-width: 48rem) {
	.tr-menu .sub-menu:not(:has(.sub-menu)) {
		max-height: min(60vh, calc(100vh - 10rem));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.tr-menu .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar {
		width: 8px;
	}

	.tr-menu .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar-thumb {
		background: var(--tr-border);
		border-radius: 4px;
	}

	.tr-menu .sub-menu:not(:has(.sub-menu))::-webkit-scrollbar-track {
		background: transparent;
	}
}

@media (max-width: 47.9375rem) {
	.tr-menu.is-accordion .menu-item-has-children.is-open > .sub-menu:not(:has(.sub-menu)) {
		max-height: 35vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}