/**
 * TitanCart Marketplace — Plugin Baseline CSS
 *
 * Self-sufficient Pulse UI baseline so the marketplace plugin renders
 * coherently on ANY WordPress theme — not just the partner `titancart-market`
 * theme. Themes that want their own visual identity layer rules ON TOP of
 * this file (later in the cascade); the plugin's intent is always reachable
 * through the cascade so a vanilla theme install still gets a clean,
 * professional render.
 *
 * Architecture:
 *   1. Pulse UI design tokens defined as CSS custom properties on :root.
 *      Light defaults; dark overrides keyed off [data-tcm-theme="dark"]
 *      (set by tcm-theme-boot.js based on bg-luminance probe — independent
 *      of any partner-theme attribute convention, see Pattern #131).
 *   2. Inter font enqueued separately as Google Fonts (see Storefront\Assets);
 *      this file consumes via the --tcm-font stack with system fallbacks
 *      so font rendering degrades gracefully if the Inter request fails.
 *   3. Component layer keyed under the `tcm-` prefix to avoid collision
 *      with TC core's `tc-` namespace (S166.5 collision: TC core's
 *      checkout.css force-locks `.tc-checkout__step` to a light bg with
 *      !important; the plugin's own component classes are renamed to
 *      `tcm-` to escape that override).
 *   4. Minimum utility layer (spacing, flex, text, radius) included
 *      so we don't depend on theme-bundled Bootstrap. Utilities are
 *      `tcm-` prefixed to avoid clobbering any theme that does ship
 *      its own utility framework.
 *
 * Pattern #123 deliverable.
 *
 * @package TitanCartMarketplace
 * @since   S167 — Track A Module A8.
 */

/* ════════════════════════════════════════════════════════════════════════
 * 1. Pulse UI Design Tokens
 * ════════════════════════════════════════════════════════════════════════ */

:root {
	/* Brand */
	--tcm-accent:        #2563EB;
	--tcm-accent-hover:  #1D4ED8;
	--tcm-accent-active: #1E40AF;
	--tcm-accent-glow:   rgba(37, 99, 235, 0.15);
	--tcm-accent-on:     #FFFFFF; /* text/icon on accent fills */

	/* Surfaces */
	--tcm-bg:            #FFFFFF;
	--tcm-bg-alt:        #F8F9FB;
	--tcm-bg-card:       #FFFFFF;
	--tcm-bg-input:      #FFFFFF;
	--tcm-bg-muted:      #F3F4F6;

	/* Text */
	--tcm-text:          #0A0A0A;
	--tcm-text-soft:     #404040;
	--tcm-text-muted:    #737373;
	--tcm-text-on-bg:    #0A0A0A;

	/* Borders */
	--tcm-border:        #E5E5E5;
	--tcm-border-strong: #D4D4D4;
	--tcm-border-soft:   #F0F0F0;

	/* Status */
	--tcm-error:         #DC2626;
	--tcm-error-bg:      #FEF2F2;
	--tcm-error-border:  #FECACA;
	--tcm-success:       #16A34A;
	--tcm-success-bg:    #F0FDF4;
	--tcm-warning:       #D97706;
	--tcm-warning-bg:    #FFF7ED;
	--tcm-warning-border:#FED7AA;
	--tcm-info:          #0EA5E9;

	/* Radii */
	--tcm-radius-sm:     6px;
	--tcm-radius:        8px;
	--tcm-radius-lg:     12px;
	--tcm-radius-xl:     16px;
	--tcm-radius-pill:   9999px;

	/* Shadows */
	--tcm-shadow-sm:     0 1px 2px 0 rgba(0,0,0,0.04);
	--tcm-shadow:        0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px 0 rgba(0,0,0,0.04);
	--tcm-shadow-md:     0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
	--tcm-shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
	--tcm-shadow-focus:  0 0 0 3px var(--tcm-accent-glow);

	/* Type */
	--tcm-font:          'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--tcm-font-mono:     ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

	/* Layout */
	--tcm-container-max: 1200px;
	--tcm-step-bubble:   28px;

	/* Transitions */
	--tcm-trans-fast:    0.12s ease;
	--tcm-trans:         0.18s ease;
}

/* Dark theme overrides — keyed off our own data-tcm-theme attribute,
   set by tcm-theme-boot.js. Independent of partner-theme conventions. */
[data-tcm-theme="dark"] {
	--tcm-bg:            #0A0A0A;
	--tcm-bg-alt:        #0F0F12;
	--tcm-bg-card:       #161A23;
	--tcm-bg-input:      #1A1A1A;
	--tcm-bg-muted:      #1F232B;

	--tcm-text:          #FAFAFA;
	--tcm-text-soft:     #D4D4D4;
	--tcm-text-muted:    #A3A3A3;
	--tcm-text-on-bg:    #FAFAFA;

	--tcm-border:        #262626;
	--tcm-border-strong: #3F3F46;
	--tcm-border-soft:   #1F1F23;

	--tcm-error-bg:      #2A0F0F;
	--tcm-error-border:  #5C1F1F;
	--tcm-success-bg:    #0F2A1A;
	--tcm-warning-bg:    #2A1A0F;
	--tcm-warning-border:#5C3A1F;

	--tcm-shadow-sm:     0 1px 2px 0 rgba(0,0,0,0.30);
	--tcm-shadow:        0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px 0 rgba(0,0,0,0.30);
	--tcm-shadow-md:     0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -2px rgba(0,0,0,0.30);
	--tcm-shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.40);
}

/* ════════════════════════════════════════════════════════════════════════
 * 2. Marketplace-page root scope
 *
 *    All marketplace plugin pages render inside containers carrying the
 *    `tcm-page` hook class. Typography + base font apply only inside this
 *    scope so the plugin doesn't fight the host theme's body styles
 *    sitewide. Pages that aren't marketplace plugin output are completely
 *    untouched.
 * ════════════════════════════════════════════════════════════════════════ */

/* Box-sizing reset for all marketplace surface roots and their descendants.
   Originally scoped to `.tcm-page` only (account/cart/checkout/order-received/
   PDP all wrap in .tcm-page). Extended in S173 to include the standalone
   shop archive + category landing surface roots which emit independently
   without a .tcm-page wrapper (per S169 architecture). On host themes that
   ship `* { box-sizing: border-box }` (the partner theme does), this is
   redundant; on block themes (TwentyTwentyFive, etc.) it's required —
   without it, `width: 600px; padding: 24px 64px` on the hero search input
   renders 690px and overflows its 600px form parent. The :is() group has
   the same specificity as a single class selector (0,1,0). */
:is(
	.tcm-page,
	.tcm-shop,
	.tcm-shop-hero,
	.tcm-shop-toolbar,
	.tcm-shop-sidebar,
	.tcm-category-hero,
	.tcm-category-subcats,
	.tcm-category-section
),
:is(
	.tcm-page,
	.tcm-shop,
	.tcm-shop-hero,
	.tcm-shop-toolbar,
	.tcm-shop-sidebar,
	.tcm-category-hero,
	.tcm-category-subcats,
	.tcm-category-section
) * {
	box-sizing: border-box;
}

/* Accessibility utility — visually hide an element while keeping it
   exposed to assistive tech. Standard a11y pattern (originally HTML5
   Boilerplate / Bootstrap's .sr-only). The partner theme defines this
   on the host theme; on block themes (TwentyTwentyFive etc.) no host
   rule exists, so the marketplace baseline must own it (Pattern #123).
   Used for form labels paired with placeholder-only visible inputs
   (shop hero search, cart line-item label slots, etc.) — without this
   rule the label text renders as visible body copy and breaks the
   form's vertical layout (S173 — surfaced by TwentyTwentyFive
   ship-verify showing "Search extensions" label visible above the
   hero search input). */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * S174 hotfix — paint <body> with the marketplace bg token on
 * marketplace-routed pages WHEN IN DARK MODE ONLY. The S172 .tcm-page
 * paint covered the main content surface, but the body sits BENEATH
 * and is painted by the partner theme (dpmarket) with
 * `body.change-gradient { background: #000424 }` in dark mode. This
 * shows through in the inter-section gaps — most visibly the strip
 * between the partner-theme sale-offer (top y=86) and `.tcm-page-hero`
 * (top y=186), a ~100px band on order-received and similar surfaces
 * where dpmarket's #000424 dark blue contrasts with the marketplace's
 * #0A0A0A neutral.
 *
 * **CRITICAL — DARK-MODE-ONLY SCOPE.** Earlier S174 attempt scoped the
 * rule on `[data-tcm-theme]` (attribute presence, any value) and that
 * re-introduced Pattern #139 (probe/paint bootstrap loop, S172):
 *   1. Page loads, data-tcm-theme not set, partner theme paints body.
 *   2. Boot probes body, reads partner color, sets data-tcm-theme.
 *   3. With presence-scoped rule, ANY value of data-tcm-theme fires
 *      this paint, including initial "light". Body paints `--tcm-bg`
 *      = `#FFFFFF` (light default).
 *   4. Partner theme later flips its data-theme (dpmarket's deferred
 *      dark-mode write).
 *   5. MutationObserver re-probes body — but my white paint is now
 *      winning (specificity 0,2,1 vs partner theme 0,1,1). Probe
 *      reads white, no change, LOCK IN LIGHT.
 * Two-instance recurrence of Pattern #139 (first: S172 .tcm-page
 * paint; second: S174 [data-tcm-theme] body paint). Both fixes share
 * the same shape: do not paint the surface the probe reads BEFORE
 * the probe has decided.
 *
 * **DARK-MODE-ONLY scope** breaks the loop:
 *   - Light mode: rule does NOT fire. Partner theme paints body, probe
 *     reads white correctly, decides light correctly. No marketplace
 *     interference. Body bleed in inter-section gaps is white-on-white,
 *     not visually distinguishable.
 *   - Dark mode: probe reads partner's `#000424` first, decides dark,
 *     sets data-tcm-theme="dark". THEN this rule fires, repainting
 *     body `#0A0A0A`. Re-probe sees `#0A0A0A` → still dark → no flip.
 *     LOOP DOES NOT FORM.
 *
 * Selector scope: the body-class set emitted by TC core's
 * `StorefrontModule::body_classes()` filter (see
 * src/Storefront/StorefrontModule.php:2336). Each class corresponds to
 * a query-var-routed marketplace page; non-marketplace pages on the
 * same site (e.g. WordPress posts, partner-theme landing pages) are
 * untouched.
 *
 * S175 addition: `body.error404` is also included so users who land
 * on a 404 from a marketplace nav link see the marketplace `#0A0A0A`
 * body instead of the partner theme's `#000424`. error404 is a WP-core
 * body class (not added by StorefrontModule). Pattern #139 still safe
 * because the dark-mode-only scope still holds: light mode doesn't
 * fire the rule, dark mode locks dark on an already-dark partner-theme
 * body so the loop cannot form. Caveat: partner-theme chrome on 404
 * (header / footer) may surface a seam against the new body color;
 * verified during S175 ship after upload.
 *
 * S242 addition: `body.home` is also included so the WordPress front
 * page (the homepage) matches the marketplace `#0A0A0A` like every
 * other page. Same mechanics — partner theme paints body with its
 * `body.change-gradient { background: #000424 }` dark token first
 * (the homepage carries the `change-gradient` class), the boot probe
 * reads dark, sets `data-tcm-theme="dark"`, then this rule fires and
 * repaints body `#0A0A0A`. Re-probe sees `#0A0A0A` → still dark → no
 * loop. Sean flagged it as the only page that hadn't been color-matched
 * to the marketplace neutral after the S173/S174/S175 work.
 *
 * S243 addition: the WordPress blog body classes — `body.blog` (posts
 * index), `body.single-post` (article), `body.archive` (category / tag /
 * author / date archives) and `body.search` (WP search results) — are
 * included so the blog section matches the marketplace `#0A0A0A` body in
 * dark mode. These are WP-core classes (not added by StorefrontModule);
 * without them the partner theme's dark token `--body-bg: 234 100% 7%`
 * (= #000424 navy, main.css:242) painted the blog body via the base
 * `body { background-color: hsl(var(--body-bg)) }` rule. Same mechanics
 * and same Pattern #139 safety as the S242 `body.home` addition.
 * ════════════════════════════════════════════════════════════════════════ */
[data-tcm-theme="dark"] body.titancart-shop,
[data-tcm-theme="dark"] body.titancart-tag,
[data-tcm-theme="dark"] body.titancart-product,
[data-tcm-theme="dark"] body.titancart-cart,
[data-tcm-theme="dark"] body.titancart-checkout,
[data-tcm-theme="dark"] body.titancart-order-received,
[data-tcm-theme="dark"] body.titancart-account,
[data-tcm-theme="dark"] body.titancart-search,
[data-tcm-theme="dark"] body.error404,
[data-tcm-theme="dark"] body.home,
[data-tcm-theme="dark"] body.blog,
[data-tcm-theme="dark"] body.single-post,
[data-tcm-theme="dark"] body.archive,
[data-tcm-theme="dark"] body.search {
	background-color: var(--tcm-bg);
}

/* ════════════════════════════════════════════════════════════════════════
 * 404 sticky-footer fix (S175).
 *
 * Companion to the `body.error404` body-paint above. The partner theme
 * (dpmarket) wraps the whole page in a single `<main class="change-gradient">`
 * with the footer as a flow child. Body is `display:flex; flex-direction:
 * column; min-height:100vh` and expects an interior `flex: 1` element to
 * absorb the vertical slack — but no such element exists, so on sparse
 * pages (404) main's intrinsic height falls short of viewport and the
 * footer floats up. In light mode the resulting body bg below the footer
 * is white-on-white and invisible; the S175 dark-mode body-paint exposed
 * the gap (~241px of `var(--tcm-bg)` showing through).
 *
 * Fix: make `<main>` itself a flex column that fills body's 100vh, and
 * push the footer (plus the .bottom-footer sibling) to the bottom with
 * `margin-top: auto`. Children remain in default block flow order;
 * converting main from block to flex column is layout-neutral for the
 * partner theme's existing children (verified S175 — sale-offer, header,
 * section, footer, bottom-footer all `display:block; position:static; float:none`).
 *
 * Scope: error404 only. Real marketplace surfaces have enough content
 * to fill the viewport naturally and changing their <main> formatting
 * context risks disrupting partner-theme grids and floats elsewhere.
 * ════════════════════════════════════════════════════════════════════════ */
body.error404 > main {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

body.error404 > main > .footer-section {
	margin-top: auto;
}

.tcm-page {
	font-family: var(--tcm-font);
	color: var(--tcm-text);
	/* S172 — paint the marketplace bg on cart/checkout/order-received/
	   account/PDP wrappers so they match the shop archive's `.tcm-shop`
	   bg. Token-driven, so it follows the dark/light mode flip. NOTE:
	   tcm-theme-boot.js's `detectTheme()` MUST anchor on `document.body`
	   (not on a marketplace surface) — otherwise this rule creates a
	   bootstrap loop where the probe reads `.tcm-page`'s self-paint and
	   never flips off the light-mode default. Both ends of that contract
	   need to stay in sync. */
	background: var(--tcm-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tcm-page h1, .tcm-page h2, .tcm-page h3,
.tcm-page h4, .tcm-page h5, .tcm-page h6 {
	font-family: var(--tcm-font);
	color: var(--tcm-text);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.tcm-page a {
	color: var(--tcm-accent);
	text-decoration: none;
	transition: color var(--tcm-trans-fast);
}
.tcm-page a:hover {
	color: var(--tcm-accent-hover);
	text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════
 * 3. Page hero (replaces dpmarket .breadcrumb / .breadcrumb-one /
 *    .breadcrumb-four). Two variants: simple title hero, and the multi-
 *    step process hero used by cart → checkout → order-received.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-page-hero {
	position: relative;
	padding: 60px 0;
	background:
		radial-gradient(ellipse 70% 60% at 15% 25%, var(--tcm-accent-glow), transparent 60%),
		radial-gradient(ellipse 60% 50% at 85% 75%, var(--tcm-accent-glow), transparent 65%),
		linear-gradient(135deg, var(--tcm-bg-alt) 0%, var(--tcm-bg) 50%, var(--tcm-bg-alt) 100%);
	border-bottom: 1px solid var(--tcm-border-soft);
	overflow: hidden;
}
.tcm-page-hero__inner {
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 0 16px;
	position: relative;
	z-index: 1;
}
.tcm-page-hero__title {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 12px;
	color: var(--tcm-text);
	text-align: center;
	text-transform: capitalize;
}
.tcm-page-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	color: var(--tcm-text-muted);
	list-style: none;
	margin: 0;
	padding: 0;
}
.tcm-page-hero__crumbs-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tcm-page-hero__crumbs-item + .tcm-page-hero__crumbs-item::before {
	content: '/';
	color: var(--tcm-text-muted);
	opacity: 0.6;
}
.tcm-page-hero__crumbs-item a {
	color: var(--tcm-text-muted);
}
.tcm-page-hero__crumbs-item--active {
	color: var(--tcm-accent);
}

/* Step variant — renders the cart → checkout → order-received progress
   indicator. Fully self-sufficient: badge sizing, line connectors, and
   active state all driven by tokens. */
.tcm-page-hero--steps {
	padding: 80px 0 100px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 4. Steps indicator (replaces dpmarket .process-list)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-steps {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.tcm-steps__item {
	flex: 1 1 0;
	min-width: 80px;
	position: relative;
	text-align: center;
}
.tcm-steps__item + .tcm-steps__item::before {
	content: '';
	position: absolute;
	top: 28px;
	left: -50%;
	right: 50%;
	height: 2px;
	background: var(--tcm-border);
	z-index: 0;
}
.tcm-steps__item--active ~ .tcm-steps__item::before,
.tcm-steps__item:not(.tcm-steps__item--active):not(.tcm-steps__item--complete) + .tcm-steps__item::before {
	background: var(--tcm-border);
}
.tcm-steps__item--complete + .tcm-steps__item::before,
.tcm-steps__item--active + .tcm-steps__item::before {
	background: var(--tcm-border);
}
.tcm-steps__link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: var(--tcm-text-muted);
	text-decoration: none;
	position: relative;
	z-index: 1;
}
.tcm-steps__link:hover {
	color: var(--tcm-text);
	text-decoration: none;
}
.tcm-steps__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tcm-bg-card);
	border: 2px solid var(--tcm-border);
	color: var(--tcm-text-muted);
	font-size: 22px;
	transition: background var(--tcm-trans), border-color var(--tcm-trans), color var(--tcm-trans);
}
.tcm-steps__icon i,
.tcm-steps__icon svg {
	font-size: 22px;
	line-height: 1;
}
.tcm-steps__label {
	font-size: 13px;
	font-weight: 500;
	color: inherit;
}
.tcm-steps__item--active .tcm-steps__icon,
.tcm-steps__item--complete .tcm-steps__icon {
	background: var(--tcm-accent);
	border-color: var(--tcm-accent);
	color: var(--tcm-accent-on);
	box-shadow: 0 6px 14px -4px var(--tcm-accent-glow);
}
.tcm-steps__item--active .tcm-steps__link,
.tcm-steps__item--active .tcm-steps__label {
	color: var(--tcm-accent);
	font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════
 * 5. Card surface (replaces dpmarket .section-bg)
 *
 *    The single most-used component in the marketplace. Handles theme
 *    flipping via tokens, optional padding scale, and rounded corners.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-card {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-lg);
	padding: 24px;
	color: var(--tcm-text);
}
.tcm-card--padded {
	padding: 32px;
}
@media (min-width: 768px) {
	.tcm-card--padded {
		padding: 40px;
	}
}
.tcm-card--snug {
	padding: 16px;
}
.tcm-card--rounded-lg {
	border-radius: var(--tcm-radius-xl);
}
.tcm-card--no-border {
	border-color: transparent;
}
.tcm-card--shadow {
	box-shadow: var(--tcm-shadow);
}
.tcm-card h1, .tcm-card h2, .tcm-card h3,
.tcm-card h4, .tcm-card h5, .tcm-card h6 {
	color: var(--tcm-text);
}

/* ════════════════════════════════════════════════════════════════════════
 * 6. Inputs (replaces dpmarket .common-input + .bg--white .border--color-dark)
 *
 *    Single class `tcm-input` flips with theme via tokens. No need for
 *    separate "bg modifier" — surface stays opaque on every theme because
 *    --tcm-bg-input resolves to literal #FFFFFF in light mode (per the
 *    S166.5 carry-forward note about not relying on theme-variable
 *    inheritance for input opacity).
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-input,
.tcm-textarea,
.tcm-select {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-family: var(--tcm-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--tcm-text);
	background: var(--tcm-bg-input);
	border: 1px solid var(--tcm-border-strong);
	border-radius: var(--tcm-radius);
	box-shadow: var(--tcm-shadow-sm);
	transition: border-color var(--tcm-trans-fast), box-shadow var(--tcm-trans-fast);
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
.tcm-input::placeholder,
.tcm-textarea::placeholder {
	color: var(--tcm-text-muted);
	opacity: 1;
}
.tcm-input:focus,
.tcm-textarea:focus,
.tcm-select:focus {
	outline: none;
	border-color: var(--tcm-accent);
	box-shadow: var(--tcm-shadow-focus);
}
.tcm-input:disabled,
.tcm-textarea:disabled,
.tcm-select:disabled {
	background: var(--tcm-bg-muted);
	color: var(--tcm-text-muted);
	cursor: not-allowed;
}
.tcm-input--lg {
	padding: 14px 18px;
	font-size: 16px;
}
.tcm-input--with-icon {
	padding-left: 44px;
}
.tcm-input--error,
.tcm-textarea--error,
.tcm-select--error {
	border-color: var(--tcm-error) !important;
	background: var(--tcm-error-bg);
}
.tcm-textarea {
	min-height: 100px;
	resize: vertical;
}
.tcm-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}
.tcm-input-group {
	position: relative;
	display: flex;
	align-items: stretch;
}
.tcm-input-group__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
	color: var(--tcm-text-muted);
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	font-size: 18px;
}

/* Field error message */
.tcm-field__error {
	display: block;
	min-height: 1em;
	margin-top: 4px;
	font-size: 13px;
	color: var(--tcm-error);
}
.tcm-field__hint {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--tcm-text-muted);
}
.tcm-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-text);
}

/* ── Dark-mode form-control override ──────────────────────────────────────
   TC core's titancart.css and the partner-theme skin (tc-checkout-skin.css)
   both target `#tc-checkout input[type="text"], …` at specificity (1,1,1)
   with `background: #fff !important` and `color: hsl(var(--black, …))
   !important`. The partner theme's --black token resolves to a near-white
   HSL in its inverted dark mode (Pattern #131), producing white-on-white
   invisible inputs.

   Cascade math: when multiple !important rules apply, the higher-specificity
   one wins. TC core's rule is (1,1,1) — ID + element + attribute. To beat
   it, this rule must include a page-level ID (#tc-checkout / #tc-cart /
   #tc-account / #tc-order-received) so it lands at (1,2,1).

   Light mode is unaffected — TC core's white inputs render correctly there
   and this rule only fires under our own [data-tcm-theme="dark"] attribute. */
[data-tcm-theme="dark"] #tc-checkout input.tcm-input,
[data-tcm-theme="dark"] #tc-checkout textarea.tcm-textarea,
[data-tcm-theme="dark"] #tc-checkout select.tcm-select,
[data-tcm-theme="dark"] #tc-checkout input.tcm-input:focus,
[data-tcm-theme="dark"] #tc-checkout textarea.tcm-textarea:focus,
[data-tcm-theme="dark"] #tc-checkout select.tcm-select:focus,
[data-tcm-theme="dark"] #tc-cart input.tcm-input,
[data-tcm-theme="dark"] #tc-cart textarea.tcm-textarea,
[data-tcm-theme="dark"] #tc-cart select.tcm-select,
[data-tcm-theme="dark"] #tc-cart input.tcm-input:focus,
[data-tcm-theme="dark"] #tc-cart textarea.tcm-textarea:focus,
[data-tcm-theme="dark"] #tc-account input.tcm-input,
[data-tcm-theme="dark"] #tc-account textarea.tcm-textarea,
[data-tcm-theme="dark"] #tc-account select.tcm-select,
[data-tcm-theme="dark"] #tc-account input.tcm-input:focus,
[data-tcm-theme="dark"] #tc-account textarea.tcm-textarea:focus,
[data-tcm-theme="dark"] #tc-account select.tcm-select:focus,
[data-tcm-theme="dark"] #tc-order-received input.tcm-input,
[data-tcm-theme="dark"] #tc-order-received textarea.tcm-textarea,
[data-tcm-theme="dark"] #tc-order-received select.tcm-select {
	background: var(--tcm-bg-input) !important;
	color: var(--tcm-text) !important;
	border-color: var(--tcm-border-strong) !important;
}
[data-tcm-theme="dark"] #tc-checkout input.tcm-input::placeholder,
[data-tcm-theme="dark"] #tc-checkout textarea.tcm-textarea::placeholder,
[data-tcm-theme="dark"] #tc-cart input.tcm-input::placeholder,
[data-tcm-theme="dark"] #tc-cart textarea.tcm-textarea::placeholder,
[data-tcm-theme="dark"] #tc-account input.tcm-input::placeholder,
[data-tcm-theme="dark"] #tc-account textarea.tcm-textarea::placeholder {
	color: var(--tcm-text-muted) !important;
	opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════
 * 7. Buttons (replaces dpmarket .btn .btn-main, .btn-icon, .pill)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-family: var(--tcm-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
	border-radius: var(--tcm-radius);
	background: transparent;
	color: var(--tcm-text);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--tcm-trans-fast), border-color var(--tcm-trans-fast), color var(--tcm-trans-fast), box-shadow var(--tcm-trans-fast), transform var(--tcm-trans-fast);
	-webkit-appearance: none;
	user-select: none;
}
.tcm-btn:focus-visible {
	outline: none;
	box-shadow: var(--tcm-shadow-focus);
}
.tcm-btn:disabled,
.tcm-btn--disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}
.tcm-btn--primary {
	background: var(--tcm-accent);
	border-color: var(--tcm-accent);
	color: var(--tcm-accent-on);
}
.tcm-btn--primary:hover {
	background: var(--tcm-accent-hover);
	border-color: var(--tcm-accent-hover);
	color: var(--tcm-accent-on);
	text-decoration: none;
}
.tcm-btn--primary:active {
	background: var(--tcm-accent-active);
	border-color: var(--tcm-accent-active);
}

/* ── Anchor-as-button color overrides ─────────────────────────────────────
   .tcm-page a (specificity 0,1,1) wins over .tcm-btn--primary (0,1,0) on
   color, producing accent-on-accent invisible text for `<a class="tcm-btn
   tcm-btn--primary">` (e.g. Proceed to Checkout, Continue Shopping). These
   rules at specificity 0,2,1 beat .tcm-page a so the button's color token
   takes effect on any anchor. Hover / active included so hover state stays
   readable too. */
.tcm-page a.tcm-btn,
.tcm-page button.tcm-btn {
	color: var(--tcm-text);
}
.tcm-page a.tcm-btn:hover,
.tcm-page button.tcm-btn:hover {
	text-decoration: none;
}
.tcm-page a.tcm-btn--primary,
.tcm-page a.tcm-btn--primary:hover,
.tcm-page a.tcm-btn--primary:active,
.tcm-page button.tcm-btn--primary,
.tcm-page button.tcm-btn--primary:hover,
.tcm-page button.tcm-btn--primary:active {
	color: var(--tcm-accent-on);
}
.tcm-page a.tcm-btn--outline,
.tcm-page a.tcm-btn--outline:hover,
.tcm-page button.tcm-btn--outline,
.tcm-page button.tcm-btn--outline:hover {
	color: var(--tcm-text);
}
.tcm-page a.tcm-btn--ghost,
.tcm-page button.tcm-btn--ghost {
	color: var(--tcm-text);
}
.tcm-btn--ghost {
	background: transparent;
	border-color: var(--tcm-border-strong);
	color: var(--tcm-text);
}
.tcm-btn--ghost:hover {
	background: var(--tcm-bg-muted);
	border-color: var(--tcm-border-strong);
	color: var(--tcm-text);
}
.tcm-btn--link {
	background: transparent;
	border-color: transparent;
	color: var(--tcm-accent);
	padding-left: 0;
	padding-right: 0;
}
.tcm-btn--link:hover {
	color: var(--tcm-accent-hover);
	text-decoration: underline;
}
.tcm-btn--danger {
	background: var(--tcm-error);
	border-color: var(--tcm-error);
	color: #fff;
}
.tcm-btn--danger:hover {
	background: #B91C1C;
	border-color: #B91C1C;
	color: #fff;
	text-decoration: none;
}
.tcm-page a.tcm-btn--danger,
.tcm-page a.tcm-btn--danger:hover,
.tcm-page button.tcm-btn--danger,
.tcm-page button.tcm-btn--danger:hover {
	color: #fff;
}
.tcm-btn--pill {
	border-radius: var(--tcm-radius-pill);
}
.tcm-btn--icon {
	padding: 12px;
	width: 44px;
	min-width: 44px;
	height: 44px;
}
.tcm-btn--lg {
	padding: 14px 28px;
	font-size: 16px;
	min-height: 52px;
}
.tcm-btn--sm {
	padding: 8px 14px;
	font-size: 13px;
}
.tcm-btn--block {
	width: 100%;
}
.tcm-btn--loading {
	opacity: 0.7;
	cursor: wait;
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * 8. Checkout layout + step blocks (kept consistent with S166.5 renames)
 *
 *    The page-id is `#tc-checkout` (set by core's checkout.php template);
 *    component classes inside it are `tcm-` to escape TC core's
 *    `.tc-checkout__step { color: rgb(17,17,17) !important }` override.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-checkout__grid,
.tcm-checkout__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 60px 16px;
}
@media (min-width: 992px) {
	.tcm-checkout__grid,
	.tcm-checkout__layout {
		grid-template-columns: minmax(0, 1fr) 380px;
		align-items: start;
	}
	.tcm-checkout__summary-col {
		position: sticky;
		top: 96px;
	}
}
.tcm-checkout__form-col,
.tcm-checkout__summary-col {
	min-width: 0;
}

.tcm-checkout__step {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 24px;
	margin-bottom: 16px;
	color: var(--tcm-text);
}
@media (min-width: 768px) {
	.tcm-checkout__step {
		padding: 32px 40px;
	}
}
.tcm-checkout__step h5,
.tcm-checkout__step h6 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	color: var(--tcm-text);
}
.tcm-checkout__step h5 i.las,
.tcm-checkout__step h6 i.las {
	font-size: 28px;
}
.tcm-checkout__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tcm-step-bubble);
	height: var(--tcm-step-bubble);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tcm-accent) 0%, #3B82F6 100%);
	color: var(--tcm-accent-on);
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.tcm-checkout__error-banner {
	background: var(--tcm-error-bg);
	color: var(--tcm-error);
	border: 1px solid var(--tcm-error-border);
	border-radius: var(--tcm-radius);
	padding: 14px 18px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 500;
}
.tcm-checkout__login-prompt a {
	font-weight: 500;
}
.tcm-checkout__products {
	display: block;
}

/* ── Summary product-row layout ────────────────────────────────────────────
   The section-summary partial emits one row per cart line:
     <div class="tcm-checkout__product-row tcm-u-flex tcm-u-items-start tcm-u-gap-3">
       <div class="tcm-checkout__product-img-wrap"><img …product-img></div>
       <div class="tcm-checkout__product-info"><p…product-name>…</p></div>
       <div class="tcm-checkout__product-price">1 × $99.00</div>
     </div>
   Without a flex-grow on the info column, all three children sit tight
   together — the price ends up "crushed" right next to the title instead of
   flushing to the right edge of the summary card. These rules give info the
   grow factor and lock the image + price columns to natural width. */
.tcm-checkout__product-row {
	margin-bottom: 16px;
}
.tcm-checkout__product-row:last-child {
	margin-bottom: 0;
}
.tcm-checkout__product-img-wrap {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--tcm-radius-sm);
	overflow: hidden;
	background: var(--tcm-bg-muted);
}
.tcm-checkout__product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tcm-checkout__product-info {
	flex: 1 1 auto;
	min-width: 0;
}
.tcm-checkout__product-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-text);
	line-height: 1.35;
	margin: 0;
	overflow-wrap: anywhere;
}
.tcm-checkout__product-price {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--tcm-text);
	text-align: right;
	white-space: nowrap;
}
.tcm-checkout__summary-card {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 24px;
	color: var(--tcm-text);
}
.tcm-checkout__summary-totals {
	width: 100%;
	border-collapse: collapse;
}
.tcm-checkout__summary-total-row td {
	padding: 8px 0;
	color: inherit;
}
.tcm-checkout__summary-total-row--grand td {
	padding-top: 14px;
	border-top: 1px solid var(--tcm-border);
	font-size: 17px;
	font-weight: 700;
}
.tcm-checkout__rewards {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 24px;
	margin-bottom: 16px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 9. Payment / shipping method radio cards
 *
 *    Border + shadow only on hover/selected — never a bg color change.
 *    Lets text inherit theme-appropriate color via tokens. (This is the
 *    same pattern the TC theme uses; documented in S166.5 close-out.)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-payment-method,
.tcm-shipping-method {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-lg);
	cursor: pointer;
	margin-bottom: 8px;
	color: var(--tcm-text);
	background: var(--tcm-bg-card);
	transition: border-color var(--tcm-trans-fast), box-shadow var(--tcm-trans-fast);
}
.tcm-payment-method:hover,
.tcm-shipping-method:hover {
	border-color: var(--tcm-accent);
}
.tcm-payment-method:has(input[type="radio"]:checked),
.tcm-shipping-method:has(input[type="radio"]:checked) {
	border-color: var(--tcm-accent);
	box-shadow: 0 0 0 3px var(--tcm-accent-glow);
}
.tcm-payment-method:has(input[type="radio"]:checked) span,
.tcm-shipping-method:has(input[type="radio"]:checked) span {
	color: var(--tcm-accent);
	font-weight: 600;
}

/* Mount divs for iframe-based gateway widgets (Stripe / Square) inherit
   the card surface color so iframe transparent regions paint coherently
   on both themes. Border is slightly more visible than the wrapper for
   visual delineation (matches S166.5 design call). */
#tc-stripe-card-wrapper,
#tc-square-card-wrapper,
#tc-authnet-card-wrapper {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius);
	padding: 18px;
}
#tc-stripe-card-number,
#tc-stripe-card-expiry,
#tc-stripe-card-cvc {
	background: var(--tcm-bg-input);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-sm);
	padding: 12px 14px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 10. Promo code, notes, breadcrumbs, misc cart-page surfaces
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-promo-card__row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.tcm-promo-card__row .tcm-input {
	flex: 1 1 auto;
	min-width: 0;
}
.tcm-promo-card__btn {
	flex-shrink: 0;
	white-space: nowrap;
}

.tcm-cart-table {
	width: 100%;
	border-collapse: collapse;
}
.tcm-cart-table th,
.tcm-cart-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--tcm-border-soft);
	color: var(--tcm-text);
	vertical-align: middle;
}
.tcm-cart-table th {
	font-weight: 600;
	font-size: 14px;
	color: var(--tcm-text-soft);
	text-align: left;
}
/* Totals row inside <tfoot> — used by order-received items-table.
   Top border separates totals from the discount/shipping/tax stack;
   stronger type + accent color on the total amount. */
.tcm-cart-table__total-row > th,
.tcm-cart-table__total-row > td {
	border-top: 2px solid var(--tcm-border);
	padding-top: 18px;
	font-size: 16px;
	font-weight: 700;
}
.tcm-cart-table__total-amount {
	color: var(--tcm-accent);
	font-size: 18px;
}

/* ── Cart table per-column tweaks ──────────────────────────────────────────
   The cart items table has 4 columns: Product Details (text+image, wide) /
   Quantity / Price / Total. The first column carries all the visual weight
   (image + name + meta + remove button) so it auto-sizes to ~70% of the
   available width. The remaining 3 numeric columns get squished into ~70px
   each by the auto-layout. Right-align them, lock minimum widths, and
   prevent line wrapping so prices read cleanly aligned right.

   Selectors use adjacent-sibling combinators (`th + th`, `td + td`) so the
   rule matches every cell EXCEPT the first — no need for nth-child gymnastics
   if a future row adds or removes a column. */
.tcm-cart-table th + th,
.tcm-cart-table td + td {
	text-align: right;
	white-space: nowrap;
	min-width: 90px;
}

/* ── Stacked product-details column (S175) ─────────────────────────────────
   First column stacks image / title+category / remove button vertically
   instead of side-by-side (was: flex row with image left, content right).
   Stacking narrows the first column's natural width, giving the numeric
   columns (Quantity / Price / Total) the visual room they need to read
   cleanly. The image is constrained to a fixed width (160px desktop /
   120px mobile) so the column doesn't blow out on wide product images. */
.tcm-cart-item__thumb--stacked {
	max-width: 160px;
	margin-bottom: 0;
}

.tcm-cart-item__cover {
	width: 100%;
	height: auto;
	border-radius: var(--tcm-radius);
	display: block;
}

.tcm-cart-table td:first-child {
	max-width: 360px;
}

/* Tighten title size when stacked so name + category read as a unit
   immediately under the image rather than competing with column siblings
   for vertical centering. Specificity (0,2,0) beats baseline h6 (0,1,0). */
.tcm-cart-table .tcm-cart-item__title {
	font-size: 15px;
	line-height: 1.35;
	margin-bottom: 4px;
}

.tcm-cart-table .tcm-cart-item__title a {
	color: var(--tcm-text);
	text-decoration: none;
}

.tcm-cart-table .tcm-cart-item__title a:hover {
	color: var(--tcm-accent);
}

/* Mobile: shrink the thumb a bit more so the table doesn't horizontally
   scroll on narrow viewports. Also align the first column top so the
   image doesn't visually float in the middle of an extra-tall row. */
@media (max-width: 640px) {
	.tcm-cart-item__thumb--stacked {
		max-width: 120px;
	}
	.tcm-cart-table td:first-child {
		max-width: 200px;
	}
}

.tcm-cart-table td:first-child {
	vertical-align: top;
}

/* ── Price / Total typography unification (S175) ───────────────────────────
   Pre-S175 state in the rendered DOM (verified live, market.titancart.io):
       Price column — `.tcm-cart-item__price` only
                      computed: 21.76px / weight 300 / Inter
       Total column — `.tcm-cart-item__price.tc-cart__line-total`
                      computed: 16px / weight 700 / system stack
   The Price size/weight came from an ancestor's heading-ish typography
   leaking through; the Total was overridden by TC core's titancart.css
   `#tc-cart .tc-cart__line-total` rule (specificity 0,1,1). Net visual
   was two "$99.00" cells with wildly different size + weight side by
   side — Sean flagged it as "font size different that make it look
   strange".

   Fix: anchor on `#tc-cart` to match TC core's specificity tier (0,2,1
   beats 0,1,1) and reset both columns to the same 15px / Inter / text
   base. Total still reads as the row's primary number via font-weight
   alone (700 vs 500 on Price), but size and family now match exactly. */
#tc-cart .tcm-cart-table .tcm-cart-item__price {
	font-size: 15px;
	font-weight: 500;
	color: var(--tcm-text);
	font-family: var(--tcm-font);
	line-height: 1.4;
}

#tc-cart .tcm-cart-table .tc-cart__line-total {
	font-weight: 700;
}

/* ── Order Summary subtotal alignment (S175) ───────────────────────────────
   The Subtotal/Discount rows live inside <ul.tcm-cart__summary-list> which
   inherits the browser default `padding-inline-start: 40px`. The grand
   Total row is a sibling <div> directly below the UL with no such padding,
   so Subtotal renders 40px to the right of Total — verified live via
   bounding-rect probe (subtotal-label.left was 1222, total-label.left was
   1182, delta = 40). The UL also retained list-style: disc from the
   browser default (no list-style: none reset applied), which would render
   bullets if any container set padding-left.

   Fix: zero out padding + list-style so the UL contributes no horizontal
   offset and the rows align at the same x as the Total row below. */
.tcm-cart__summary-list {
	list-style: none;
	padding: 0;
}

/* ── Line-total color override ────────────────────────────────────────────
   TC core's titancart.css has `.tc-cart__line-total { color: var(--tc-text,
   #111) }` (specificity 0,1,0). The `--tc-text` variable resolves correctly
   in TC core's standalone cart but doesn't flip for the marketplace's own
   dark mode (Pattern #131 — partner-theme attribute conventions diverge).
   Result: line totals render near-black even when the surrounding cart is
   in dark mode, making them invisible.

   Fix: route line-total color through baseline's --tcm-text token so it
   flips with our own [data-tcm-theme] attribute. Specificity (1,1,0) beats
   TC core's (0,1,0). Applies in both light and dark mode — both resolve
   to the right contrast color via the token. */
#tc-cart .tc-cart__line-total {
	color: var(--tcm-text);
}

/* ════════════════════════════════════════════════════════════════════════
 * 11. Utility layer (minimum subset our partials need)
 *
 *    All `tcm-u-` prefixed. We don't recreate Bootstrap — just provide
 *    the spacing / flex / text / radius helpers our markup uses, so the
 *    plugin works without any host-theme utility framework.
 * ════════════════════════════════════════════════════════════════════════ */

/* Vertical padding scale (replaces dpmarket .padding-y-60, .padding-y-120,
   .padding-static-y-60). Mobile-first; "static" variants don't shrink. */
.tcm-u-py-60      { padding-top: 60px;  padding-bottom: 60px; }
.tcm-u-py-80      { padding-top: 80px;  padding-bottom: 80px; }
.tcm-u-py-120     { padding-top: 120px; padding-bottom: 120px; }
@media (max-width: 767px) {
	.tcm-u-py-60:not(.tcm-u-py--static),
	.tcm-u-py-80:not(.tcm-u-py--static)  { padding-top: 40px; padding-bottom: 40px; }
	.tcm-u-py-120:not(.tcm-u-py--static) { padding-top: 60px; padding-bottom: 60px; }
}

.tcm-u-mt-0    { margin-top: 0; }
.tcm-u-mt-2    { margin-top: 8px; }
.tcm-u-mt-3    { margin-top: 12px; }
.tcm-u-mt-4    { margin-top: 16px; }
.tcm-u-mt-5    { margin-top: 24px; }
.tcm-u-mb-0    { margin-bottom: 0; }
.tcm-u-mb-2    { margin-bottom: 8px; }
.tcm-u-mb-3    { margin-bottom: 12px; }
.tcm-u-mb-4    { margin-bottom: 16px; }
.tcm-u-mb-5    { margin-bottom: 24px; }

.tcm-u-flex          { display: flex; }
.tcm-u-inline-flex   { display: inline-flex; }
.tcm-u-flex-center   { display: flex; justify-content: center; align-items: center; }
.tcm-u-flex-between  { display: flex; justify-content: space-between; align-items: center; }
.tcm-u-flex-col      { display: flex; flex-direction: column; }
.tcm-u-items-center  { align-items: center; }
.tcm-u-items-start   { align-items: flex-start; }
.tcm-u-justify-end   { justify-content: flex-end; }
.tcm-u-gap-2         { gap: 8px; }
.tcm-u-gap-3         { gap: 12px; }
.tcm-u-gap-4         { gap: 16px; }

.tcm-u-text-center      { text-align: center; }
.tcm-u-text-left        { text-align: left; }
.tcm-u-text-right       { text-align: right; }
.tcm-u-text-capitalize  { text-transform: capitalize; }
.tcm-u-text-muted       { color: var(--tcm-text-muted); }
.tcm-u-text-accent      { color: var(--tcm-accent); }
.tcm-u-text-soft        { color: var(--tcm-text-soft); }
.tcm-u-text-success     { color: var(--tcm-success); }
.tcm-u-text-error       { color: var(--tcm-error); }

.tcm-u-rounded     { border-radius: var(--tcm-radius); }
.tcm-u-rounded-lg  { border-radius: var(--tcm-radius-lg); }
.tcm-u-rounded-xl  { border-radius: var(--tcm-radius-xl); }
.tcm-u-rounded-pill{ border-radius: var(--tcm-radius-pill); }

.tcm-u-block       { display: block; }
.tcm-u-hidden      { display: none !important; }
.tcm-u-w-full      { width: 100%; }
.tcm-u-relative    { position: relative; }
.tcm-u-shadow      { box-shadow: var(--tcm-shadow); }
.tcm-u-shadow-sm   { box-shadow: var(--tcm-shadow-sm); }

/* ════════════════════════════════════════════════════════════════════════
 * 12. Image / media helpers and decorative slots used by hero variants
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-page-hero__decoration {
	position: absolute;
	pointer-events: none;
	opacity: 0.5;
	z-index: 0;
}
.tcm-page-hero__decoration--top-left   { top: 24px;  left: 32px;   width: 64px; }
.tcm-page-hero__decoration--bottom-right { bottom: 24px; right: 40px; width: 80px; }

/* ── Decorative moon rotation ─────────────────────────────────────────────
   The breadcrumb-hero decorations (element-moon3.png top-left, element-
   moon1.png bottom-right) had a combined rotate + vertical-bob animation
   in dpmarket (their `upDownRotate` keyframes). The S167 rename to
   tcm-page-hero__decoration* dropped the animation along with the class.
   Restore it here at baseline level so the effect ships with the plugin
   regardless of theme.

   Both moons drift toward the banner's vertical center while rotating
   through a full revolution per cycle. Top-left moves down, bottom-right
   moves up — they meet roughly in the middle and return. Opposite
   rotation directions add visual variety. The `prefers-reduced-motion`
   query disables motion for users who've set that accessibility
   preference. */
@keyframes tcm-orbit-cw {
	0%, 100% { transform: translateY(0)    rotate(0deg); }
	50%      { transform: translateY(60px) rotate(180deg); }
}
@keyframes tcm-orbit-ccw {
	0%, 100% { transform: translateY(0)     rotate(0deg); }
	50%      { transform: translateY(-60px) rotate(-180deg); }
}
.tcm-page-hero__decoration--top-left {
	animation: tcm-orbit-cw 16s ease-in-out infinite;
}
.tcm-page-hero__decoration--bottom-right {
	animation: tcm-orbit-ccw 16s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.tcm-page-hero__decoration--top-left,
	.tcm-page-hero__decoration--bottom-right {
		animation: none;
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 13. Cart layout (orchestrator-level grid; partials live inside)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-cart__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 992px) {
	.tcm-cart__grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		align-items: start;
	}
	.tcm-cart__sidebar {
		position: sticky;
		top: 96px;
	}
}
.tcm-cart__items,
.tcm-cart__sidebar {
	min-width: 0;
}
.tcm-cart__bottom {
	margin-top: 24px;
	display: flex;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════════
 * 14. Outline button + image placeholder + status badge + icon-circle
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-btn--outline {
	background: transparent;
	border-color: var(--tcm-border-strong);
	color: var(--tcm-text);
}
.tcm-btn--outline:hover {
	background: var(--tcm-bg-muted);
	border-color: var(--tcm-text);
	color: var(--tcm-text);
	text-decoration: none;
}

.tcm-img-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 80px;
	background: var(--tcm-bg-muted);
	border-radius: var(--tcm-radius);
	color: var(--tcm-text-muted);
}
.tcm-img-placeholder i,
.tcm-img-placeholder svg {
	font-size: 28px;
	color: var(--tcm-text-muted);
}
.tcm-img-placeholder--lg {
	min-height: 160px;
}
.tcm-img-placeholder--lg i,
.tcm-img-placeholder--lg svg {
	font-size: 36px;
}

/* Dynamic status badge — colors come in via CSS custom properties set
   on the element itself (PHP sets `style="--tcm-badge-bg: ...;"`). This
   keeps the per-row data inline (it IS data, not theme) but the rule
   itself is in the stylesheet so dpmarket-coupled inline values can
   retire. */
.tcm-status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--tcm-radius-pill);
	font-weight: 500;
	font-size: 13px;
	background: var(--tcm-badge-bg, var(--tcm-bg-muted));
	color: var(--tcm-badge-fg, var(--tcm-text));
	border: 1px solid var(--tcm-badge-border, var(--tcm-border));
}

.tcm-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--tcm-bg-muted);
	border: 2px solid var(--tcm-border);
	color: var(--tcm-text-muted);
	margin-bottom: 16px;
}
.tcm-icon-circle--error {
	background: var(--tcm-error-bg);
	border-color: var(--tcm-error-border);
	color: var(--tcm-error);
}
.tcm-icon-circle--success {
	background: var(--tcm-success-bg);
	border-color: var(--tcm-success);
	color: var(--tcm-success);
}
.tcm-icon-circle--accent {
	background: var(--tcm-accent-glow);
	border-color: var(--tcm-accent);
	color: var(--tcm-accent);
}
.tcm-icon-circle--warning {
	background: var(--tcm-warning-bg);
	border-color: var(--tcm-warning-border);
	color: var(--tcm-warning);
}
.tcm-icon-circle svg,
.tcm-icon-circle i {
	font-size: 36px;
}

/* Banner heading + subtitle — used by the order-received success banner
   and any other in-card "hero message" pattern (icon + title + subtitle).
   Independent of .tcm-page-hero which is the actual page-top hero band. */
.tcm-banner-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 8px;
	color: var(--tcm-text);
}
@media (min-width: 768px) {
	.tcm-banner-title {
		font-size: 32px;
	}
}
.tcm-banner-subtitle {
	font-size: 15px;
	line-height: 1.55;
	color: var(--tcm-text-muted);
	margin: 0;
}

/* Order-received details grid — 4-card row showing Order number, Date, Status, Total.
   Used by checkout/partials/order-received/details-grid.php. The order-number value
   `TC-YYYYMMDD-NNNN` is 16 chars and overflows .col-md-3 at default `<strong>` size,
   so the value font is held at 0.9375rem with tabular-nums for consistent numeric
   width. `word-break: break-word` is the safety net for any longer locale-extended
   order numbers — they wrap cleanly instead of breaking the grid. Card itself has
   no `--padded` modifier in the template so internal padding is set here.  S174. */
.tcm-or__detail-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 16px 18px;
	height: 100%;
}
.tcm-or__detail-label {
	font-size: 13px;
	color: var(--tcm-text-muted);
	line-height: 1.3;
}
.tcm-or__detail-value {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--tcm-text);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.tcm-page *,
	.tcm-page *::before,
	.tcm-page *::after {
		transition-duration: 0.001ms !important;
		animation-duration:  0.001ms !important;
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 15. Utility additions used by PDP / shop / category / account sweeps
 *     (S168 — completes the utility surface the dpmarket partials needed
 *     before they could be swept off Bootstrap-style helpers entirely).
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-u-mt-1   { margin-top: 4px; }
.tcm-u-mb-1   { margin-bottom: 4px; }
.tcm-u-mt-6   { margin-top: 28px; }
.tcm-u-mb-6   { margin-bottom: 28px; }
.tcm-u-mt-7   { margin-top: 32px; }
.tcm-u-mb-7   { margin-bottom: 32px; }
.tcm-u-mr-1   { margin-right: 4px; }
.tcm-u-mr-2   { margin-right: 8px; }
.tcm-u-mr-3   { margin-right: 12px; }
.tcm-u-ml-1   { margin-left: 4px; }
.tcm-u-ml-2   { margin-left: 8px; }
.tcm-u-ml-3   { margin-left: 12px; }
.tcm-u-ml-auto{ margin-left: auto; }

.tcm-u-py-40  { padding-top: 40px; padding-bottom: 40px; }
.tcm-u-pb-60  { padding-bottom: 60px; }
.tcm-u-pb-120 { padding-bottom: 120px; }
@media (max-width: 767px) {
	.tcm-u-pb-120:not(.tcm-u-py--static) { padding-bottom: 60px; }
}

.tcm-u-gap-1         { gap: 4px; }
.tcm-u-gap-5         { gap: 20px; }
.tcm-u-gap-6         { gap: 24px; }
.tcm-u-flex-wrap     { flex-wrap: wrap; }
.tcm-u-flex-shrink-0 { flex-shrink: 0; }
.tcm-u-flex-1        { flex: 1 1 auto; min-width: 0; }
.tcm-u-justify-center  { justify-content: center; }
.tcm-u-justify-between { justify-content: space-between; }

.tcm-u-h-full        { height: 100%; }
.tcm-u-inline-block  { display: inline-block; }

.tcm-u-strikethrough { text-decoration: line-through; }

.tcm-u-fw-300 { font-weight: 300; }
.tcm-u-fw-400 { font-weight: 400; }
.tcm-u-fw-500 { font-weight: 500; }
.tcm-u-fw-600 { font-weight: 600; }
.tcm-u-fw-700 { font-weight: 700; }

.tcm-u-text-sm  { font-size: 13px; }
.tcm-u-text-md  { font-size: 15px; }
.tcm-u-text-lg  { font-size: 18px; }
.tcm-u-text-xl  { font-size: 22px; }

.tcm-u-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ════════════════════════════════════════════════════════════════════════
 * 16. PDP layout (orchestrator-level grid)
 *     The PDP body is 8/4 on desktop (2fr 1fr) — wider than cart's
 *     1fr/380px because the left column carries the description, image,
 *     features, support copy, and related-extensions grid. Sticky sidebar
 *     keeps price + CTA in view on long descriptions.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-pdp {
	color: var(--tcm-text);
}
.tcm-pdp__container {
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 0 16px;
}
.tcm-pdp__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}
@media (min-width: 992px) {
	.tcm-pdp__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: start;
	}
	.tcm-pdp__sidebar-col {
		position: sticky;
		top: 96px;
	}
}
.tcm-pdp__main,
.tcm-pdp__sidebar-col {
	min-width: 0;
}

/* ════════════════════════════════════════════════════════════════════════
 * 17. PDP hero — left-aligned variant of the page hero
 *
 *     Reuses .tcm-page-hero's gradient background + decorative moon slots
 *     (Pattern #134 animations) but the inner content is left-aligned and
 *     denser: inline crumbs, big title, badges row, then a tab-nav row at
 *     the bottom that connects to the .tcm-tabs__content blocks below the
 *     hero.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-pdp-hero {
	position: relative;
	padding: 48px 0 0;
	background:
		radial-gradient(ellipse 70% 60% at 15% 25%, var(--tcm-accent-glow), transparent 60%),
		radial-gradient(ellipse 60% 50% at 85% 75%, var(--tcm-accent-glow), transparent 65%),
		linear-gradient(135deg, var(--tcm-bg-alt) 0%, var(--tcm-bg) 50%, var(--tcm-bg-alt) 100%);
	border-bottom: 1px solid var(--tcm-border-soft);
	overflow: hidden;
}
.tcm-pdp-hero__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
	pointer-events: none;
	z-index: 0;
}
.tcm-pdp-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 0 16px;
}
.tcm-pdp-hero__content {
	padding: 32px 0 24px;
}
.tcm-pdp-hero__title {
	font-size: clamp(28px, 4vw, 38px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 16px;
	color: var(--tcm-text);
}
.tcm-pdp-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
}
.tcm-pdp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-text-soft);
}
.tcm-pdp-hero__badge i.las {
	font-size: 18px;
	color: var(--tcm-text-muted);
}
.tcm-pdp-hero__badge a {
	color: var(--tcm-accent);
	font-weight: 600;
}
.tcm-pdp-tabnav-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
	padding-bottom: 0;
}

/* ── Inline crumbs (left-aligned, used by PDP, shop, category) ──────────
   Distinct from .tcm-page-hero__crumbs (centered, used by cart/checkout
   /order-received). Inline variant flows left-to-right with chevron
   separators, no wrap-on-mobile centering. */
.tcm-crumbs--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
	color: var(--tcm-text-muted);
}
.tcm-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tcm-crumbs__item a {
	color: var(--tcm-text-muted);
}
.tcm-crumbs__item a:hover {
	color: var(--tcm-accent);
}
.tcm-crumbs__sep {
	font-size: 10px;
	color: var(--tcm-text-muted);
	opacity: 0.6;
}

/* ════════════════════════════════════════════════════════════════════════
 * 18. Tabs — vanilla pill-tab system (replaces Bootstrap nav-pills)
 *
 *     Uses data-tcm-tabs-toggle="pill" data-tcm-tabs-target="#pane-id"
 *     instead of data-bs-* so we don't depend on Bootstrap's collapse JS.
 *     The handler is wired in tcm-theme-boot.js — works on any theme.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--tcm-border);
}
.tcm-tabs__item {
	margin: 0;
}
.tcm-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 18px;
	border: 0;
	background: transparent;
	color: var(--tcm-text-muted);
	font-family: var(--tcm-font);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	position: relative;
	transition: color var(--tcm-trans-fast);
	margin-bottom: -1px; /* sits on the .tcm-tabs__nav border */
}
.tcm-tabs__link:hover {
	color: var(--tcm-text);
}
.tcm-tabs__link--active {
	color: var(--tcm-accent);
	border-bottom: 2px solid var(--tcm-accent);
}
.tcm-tabs__content {
	margin-top: 24px;
}
.tcm-tabs__pane {
	display: none;
	/* Card-styled tab panes — match the PDP sidebar so the page feels like
	   two coordinated cards (sidebar + tab content) rather than a sidebar
	   floating in front of a transparent flat region. Same tokens as
	   .tcm-pdp-sidebar so a theme override that retunes the sidebar
	   chrome retunes the tabs in lockstep. */
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 28px;
	color: var(--tcm-text);
}
@media (min-width: 768px) {
	.tcm-tabs__pane { padding: 32px; }
}
.tcm-tabs__pane--active {
	display: block;
	animation: tcm-fade-in 0.18s ease;
}
@keyframes tcm-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════════
 * 19. Stars (replaces dpmarket .star-rating)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.tcm-stars__item {
	font-size: 12px;
	color: var(--tcm-warning);
	display: inline-flex;
}
.tcm-stars__item--empty {
	color: var(--tcm-text-muted);
	opacity: 0.45;
}
.tcm-stars__text {
	font-size: 13px;
	color: var(--tcm-text-muted);
	margin-left: 6px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 20. Share button (replaces dpmarket .social-share)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tcm-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--tcm-border);
	color: var(--tcm-text-soft);
	cursor: pointer;
	transition: border-color var(--tcm-trans-fast), color var(--tcm-trans-fast), background var(--tcm-trans-fast);
}
.tcm-share__btn:hover {
	border-color: var(--tcm-accent);
	color: var(--tcm-accent);
	background: var(--tcm-accent-glow);
}
.tcm-share__btn i.las {
	font-size: 18px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 21. PDP sidebar (price block + plan pills + benefits + author + meta)
 *
 *     Outer container is a tcm-card with extra padding. Internal blocks
 *     (price row, benefits, author, meta-list) are stacked vertically with
 *     consistent rhythm via component margins, not an outer space-y class.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-pdp-sidebar {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 28px;
	color: var(--tcm-text);
}
@media (min-width: 768px) {
	.tcm-pdp-sidebar { padding: 32px; }
}
.tcm-pdp-sidebar__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 4px;
}
.tcm-pdp-sidebar__price-label {
	font-size: 16px;
	font-weight: 600;
	color: var(--tcm-text-soft);
}
.tcm-pdp-sidebar__price {
	font-size: 30px;
	font-weight: 700;
	color: var(--tcm-text);
	line-height: 1.1;
	margin: 0;
}
.tcm-pdp-sidebar__price-period {
	font-size: 14px;
	font-weight: 400;
	color: var(--tcm-text-muted);
}

.tcm-price-was {
	color: var(--tcm-text-muted);
	font-size: 15px;
	font-weight: 400;
	text-decoration: line-through;
	margin-right: 8px;
}

/* ── Benefits checklist (replaces dpmarket .sidebar-list) ──────────────── */
.tcm-benefits {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}
.tcm-benefits__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 14px;
	color: var(--tcm-text-soft);
}
.tcm-benefits__item:last-child { margin-bottom: 0; }
.tcm-benefits__item .icon {
	display: inline-flex;
	color: var(--tcm-success);
	font-size: 18px;
}

/* ── Author block (replaces dpmarket .author-details) ──────────────────── */
.tcm-pdp-author {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--tcm-border);
}
.tcm-pdp-author__row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.tcm-pdp-author__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--tcm-accent), #3B82F6);
	color: var(--tcm-accent-on);
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
}
.tcm-pdp-author__content {
	flex: 1 1 auto;
	min-width: 0;
}
.tcm-pdp-author__name {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 2px;
}
.tcm-pdp-author__name a {
	color: var(--tcm-text);
}
.tcm-pdp-author__name a:hover {
	color: var(--tcm-accent);
	text-decoration: none;
}
.tcm-pdp-author__verified {
	font-size: 13px;
	color: var(--tcm-text-muted);
}

/* ── Meta-attribute list (replaces dpmarket .meta-attribute) ──────────── */
.tcm-meta-list {
	list-style: none;
	margin: 28px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--tcm-border);
}
.tcm-meta-list__item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 8px 0;
	font-size: 14px;
}
.tcm-meta-list__name {
	color: var(--tcm-text-muted);
	font-weight: 400;
	flex-shrink: 0;
}
.tcm-meta-list__value {
	color: var(--tcm-text);
	text-align: right;
	font-weight: 500;
}
.tcm-meta-list__value a {
	color: var(--tcm-accent);
}

/* ════════════════════════════════════════════════════════════════════════
 * 22. PDP detail body (left column / Tab 1 contents)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-pdp-detail__thumb {
	border-radius: var(--tcm-radius-lg);
	overflow: hidden;
	margin-bottom: 24px;
	background: var(--tcm-bg-muted);
}
.tcm-pdp-detail__thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.tcm-pdp-detail__thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--tcm-bg-alt) 0%, var(--tcm-bg-muted) 100%);
	border-radius: var(--tcm-radius-lg);
	color: var(--tcm-text-muted);
}
.tcm-pdp-detail__thumb-placeholder i.las {
	font-size: 80px;
}
.tcm-pdp-detail__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 24px;
}

/* ── Multi-image gallery (S236) ───────────────────────────────────────────
 * PHYSICAL mode: inline thumbnail strip below the main image; clicking a
 * thumb swaps the main <img> in place. DIGITAL mode: the "Screenshots (N)"
 * button opens the lightbox below. Tokens reuse the Pulse UI vars so this
 * inherits light/dark automatically. */

/* Make the main image obviously clickable in physical (zoomable) mode. */
.tcm-pdp-detail__main-img--zoomable {
	cursor: zoom-in;
}

/* Tighten the gap between the main image and the thumbnail strip. */
.tcm-pdp-detail__thumb:has(+ .tcm-pdp-detail__thumbs) {
	margin-bottom: 12px;
}

.tcm-pdp-detail__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}
.tcm-pdp-detail__thumb-item {
	padding: 0;
	margin: 0;
	border: 2px solid var(--tcm-border);
	border-radius: var(--tcm-radius);
	overflow: hidden;
	background: var(--tcm-bg-muted);
	cursor: pointer;
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	transition: border-color .15s ease, transform .15s ease;
	line-height: 0;
}
.tcm-pdp-detail__thumb-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tcm-pdp-detail__thumb-item:hover {
	border-color: var(--tcm-border-strong);
}
.tcm-pdp-detail__thumb-item.is-active {
	border-color: var(--tcm-accent);
}
.tcm-pdp-detail__thumb-item:focus-visible {
	outline: 2px solid var(--tcm-accent);
	outline-offset: 2px;
}

/* ── Lightbox overlay ─────────────────────────────────────────────────── */
.tcm-pdp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcm-pdp-lightbox[hidden] {
	display: none;
}
.tcm-pdp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 10, 0.85);
	cursor: zoom-out;
}
.tcm-pdp-lightbox__body {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 92vw;
	max-height: 92vh;
}
.tcm-pdp-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}
.tcm-pdp-lightbox__img {
	max-width: 80vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: var(--tcm-radius-lg);
	background: var(--tcm-bg-card);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.tcm-pdp-lightbox__counter {
	color: #FFFFFF;
	font-size: 14px;
	font-family: var(--tcm-font);
	opacity: 0.85;
}
.tcm-pdp-lightbox__close,
.tcm-pdp-lightbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	color: #FFFFFF;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	transition: background .15s ease;
}
.tcm-pdp-lightbox__close:hover,
.tcm-pdp-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
}
.tcm-pdp-lightbox__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 22px;
}
.tcm-pdp-lightbox__nav {
	width: 48px;
	height: 48px;
	font-size: 24px;
	flex: 0 0 auto;
}
.tcm-pdp-lightbox__close:focus-visible,
.tcm-pdp-lightbox__nav:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.tcm-pdp-lightbox__nav {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
	.tcm-pdp-lightbox__img {
		max-width: 88vw;
	}
	.tcm-pdp-detail__thumb-item {
		width: 60px;
		height: 60px;
	}
}

.tcm-pdp-detail__desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--tcm-text-soft);
	margin-top: 16px;
}
.tcm-pdp-detail__desc p { margin: 0 0 16px; }
.tcm-pdp-detail__desc p:last-child { margin-bottom: 0; }
.tcm-pdp-detail__desc h2,
.tcm-pdp-detail__desc h3,
.tcm-pdp-detail__desc h4 {
	color: var(--tcm-text);
	margin: 24px 0 12px;
}
.tcm-pdp-detail__desc ul,
.tcm-pdp-detail__desc ol { margin: 0 0 16px 20px; }
.tcm-pdp-detail__desc img { max-width: 100%; height: auto; border-radius: var(--tcm-radius); }

/* Rich-description container — when populated by `wp_kses_post()` from the
 * product's HTML description, the markup typically carries inline `style`
 * attributes from the editor (color, background-color on callout boxes,
 * etc.) authored against a LIGHT page background. We can't rewrite the
 * author's content, so in dark mode we give the rich container its own
 * light surface so the inline-styled content renders as the author saw
 * it. The `--rich` modifier targets only the orchestrator-rendered
 * rich-description DIV — the static support paragraph and the short_desc
 * fallback don't get this treatment, so theme-aware copy keeps adapting
 * normally. (S168.1)
 *
 * Light mode: container is transparent (inherits the tab pane's white
 * card bg), inline content colors render as authored, no override needed.
 * Dark mode:  container forces white bg + dark fallback color so any
 *             rich element WITHOUT inline color still reads correctly
 *             instead of inheriting the page's `--tcm-text` (#FAFAFA). */
.tcm-pdp-detail__desc--rich {
	border-radius: var(--tcm-radius-lg);
}
[data-tcm-theme="dark"] .tcm-pdp-detail__desc--rich {
	background: #FFFFFF;
	color: #1C2430;
	padding: 24px;
}
[data-tcm-theme="dark"] .tcm-pdp-detail__desc--rich h1,
[data-tcm-theme="dark"] .tcm-pdp-detail__desc--rich h2,
[data-tcm-theme="dark"] .tcm-pdp-detail__desc--rich h3,
[data-tcm-theme="dark"] .tcm-pdp-detail__desc--rich h4 {
	/* Specificity bump so our default `.tcm-pdp-detail__desc h2/h3/h4 {
	 * color: var(--tcm-text) }` rule above doesn't pull the heading back
	 * to dark-mode light text against this newly-light container. Inline
	 * style colors authored on the heading take precedence over both
	 * (specificity 1,0,0,0 from style attr beats any selector chain). */
	color: #0E2B53;
}
.tcm-pdp-detail__section {
	margin-top: 32px;
}
.tcm-pdp-detail__heading {
	font-size: 20px;
	font-weight: 600;
	color: var(--tcm-text);
	margin: 0 0 12px;
}
.tcm-pdp-detail__features {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
	color: var(--tcm-text-soft);
	font-size: 15px;
	line-height: 1.7;
}
.tcm-pdp-detail__feature-item { margin-bottom: 6px; }
.tcm-pdp-detail__feature-item strong { color: var(--tcm-text); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════
 * 23. PDP reviews (Tab 2 contents)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-pdp-reviews {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.tcm-pdp-review {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-lg);
	padding: 20px;
}
.tcm-pdp-review__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.tcm-pdp-review__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tcm-pdp-review__meta {
	font-size: 13px;
	color: var(--tcm-text-muted);
}
.tcm-pdp-review__user {
	color: var(--tcm-text);
	font-weight: 600;
}
.tcm-pdp-review__body {
	color: var(--tcm-text-soft);
}
.tcm-pdp-review__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}
.tcm-pdp-reviews__empty {
	padding: 60px 0;
	text-align: center;
	color: var(--tcm-text-muted);
	font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 24. More-extensions / related grid (bottom of Tab 1)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-more {
	margin-top: 40px;
}
.tcm-more__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.tcm-more__title {
	font-size: 20px;
	font-weight: 600;
	color: var(--tcm-text);
	margin: 0;
}
.tcm-more__viewall {
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-accent);
}
.tcm-more__viewall:hover {
	text-decoration: underline;
}
.tcm-more__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
@media (min-width: 480px) {
	.tcm-more__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.tcm-more__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}
.tcm-more__item {
	aspect-ratio: 1 / 1;
	border-radius: var(--tcm-radius);
	overflow: hidden;
	background: var(--tcm-bg-muted);
	border: 1px solid var(--tcm-border);
	transition: transform var(--tcm-trans-fast), border-color var(--tcm-trans-fast);
}
.tcm-more__item:hover {
	transform: translateY(-2px);
	border-color: var(--tcm-accent);
}
.tcm-more__item a {
	display: block;
	width: 100%;
	height: 100%;
}
.tcm-more__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ════════════════════════════════════════════════════════════════════════
 * 25. Product card (used by shop archive grid + related strips)
 *
 *     Card is the shop grid's primary unit. The grid container itself lives
 *     in shop/archive.php (S168 will sweep that to .tcm-shop__grid). Card
 *     is self-contained and works in any column layout.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-product-card {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-lg);
	overflow: hidden;
	transition: border-color var(--tcm-trans-fast), box-shadow var(--tcm-trans-fast), transform var(--tcm-trans-fast);
	display: flex;
	flex-direction: column;
	height: 100%;
}
.tcm-product-card:hover {
	border-color: var(--tcm-accent);
	box-shadow: var(--tcm-shadow-md);
	transform: translateY(-2px);
}
.tcm-product-card__thumb {
	position: relative;
	aspect-ratio: 290 / 160;
	overflow: hidden;
	background: var(--tcm-bg-muted);
}
.tcm-product-card__thumb a {
	display: block;
	width: 100%;
	height: 100%;
}
.tcm-product-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--tcm-trans);
}
.tcm-product-card:hover .tcm-product-card__thumb img {
	transform: scale(1.04);
}
.tcm-product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--tcm-bg-alt) 0%, var(--tcm-bg-muted) 100%);
	color: var(--tcm-text-muted);
}
.tcm-product-card__placeholder i.las {
	font-size: 48px;
}
.tcm-product-card__wishlist {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	color: var(--tcm-text-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color var(--tcm-trans-fast), background var(--tcm-trans-fast), border-color var(--tcm-trans-fast);
}
.tcm-product-card__wishlist:hover {
	color: var(--tcm-error);
	border-color: var(--tcm-error);
}
.tcm-product-card__wishlist.is-active {
	color: var(--tcm-error);
}
.tcm-product-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}
.tcm-product-card__title {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.tcm-product-card__title a {
	color: var(--tcm-text);
}
.tcm-product-card__title a:hover {
	color: var(--tcm-accent);
	text-decoration: none;
}
.tcm-product-card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.tcm-product-card__author {
	font-size: 13px;
	color: var(--tcm-text-muted);
}
.tcm-product-card__author a {
	color: var(--tcm-text-soft);
	font-weight: 500;
}
.tcm-product-card__price {
	font-size: 17px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.tcm-product-card__pricegroup {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.tcm-product-card__pricegroup .tcm-price-was {
	font-size: 13px;
}
.tcm-product-card__bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--tcm-border-soft);
}
.tcm-product-card__sales {
	display: block;
	font-size: 13px;
	color: var(--tcm-text-muted);
	margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
 * 26. Btn--success (for JS-driven success-state swaps, e.g. Add-to-Cart)
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-btn--success {
	background: var(--tcm-success);
	border-color: var(--tcm-success);
	color: var(--tcm-accent-on);
}
.tcm-btn--success:hover {
	background: var(--tcm-success);
	border-color: var(--tcm-success);
	color: var(--tcm-accent-on);
	opacity: 0.92;
}
.tcm-page a.tcm-btn--success,
.tcm-page button.tcm-btn--success {
	color: var(--tcm-accent-on);
}

/* ════════════════════════════════════════════════════════════════════════
 * 27. Subscriptions extension — dark-mode compatibility shim (S168.1)
 *
 * The Subscriptions extension's standalone stylesheet
 * (Extensions/titancart-subscriptions/assets/css/subscriptions.css) was
 * authored before this baseline shipped — its plan-pill rules hardcode
 * Pulse-UI **light-mode** values (white background, dark text). When the
 * marketplace PDP renders in dark mode, those pills look like white cards
 * embedded inside the dark sidebar card, with the text inheriting the
 * page's `--tcm-text` (#FAFAFA) where the extension's CSS doesn't override
 * it — producing a near-invisible label on white.
 *
 * Until the Subscriptions extension gets its own A8 sweep with theme-aware
 * tokens, this shim restyles the pill chrome under our own
 * [data-tcm-theme="dark"] attribute. Specificity (0,2,1) beats the
 * extension's (0,1,0) without `!important`, and the override is bounded
 * to dark mode so the extension's light-mode rendering remains untouched.
 *
 * Class ownership unchanged — `.tc-sub-plans__*` still belongs to the
 * Subscriptions extension namespace (Pattern #122). This is a one-way
 * compatibility shim; the extension's CSS doesn't depend on the shim
 * existing, so removing this section after the extension's sweep is
 * a clean delete.
 * ════════════════════════════════════════════════════════════════════════ */

[data-tcm-theme="dark"] .tc-sub-plans__pill {
	background: var(--tcm-bg-input);
	border-color: var(--tcm-border);
}
[data-tcm-theme="dark"] .tc-sub-plans__pill:hover {
	border-color: var(--tcm-accent-glow, rgba(37, 99, 235, 0.45));
}
[data-tcm-theme="dark"] .tc-sub-plans__pill--active {
	border-color: var(--tcm-accent);
	box-shadow: 0 0 0 1px var(--tcm-accent);
}
[data-tcm-theme="dark"] .tc-sub-plans__pill-name {
	color: var(--tcm-text);
}
[data-tcm-theme="dark"] .tc-sub-plans__pill-price {
	color: var(--tcm-text-muted);
}
[data-tcm-theme="dark"] .tc-sub-plans__pill-trial {
	/* Trial badge stays green but bumped to a brighter mid-tone for
	   readability against the dark pill bg. */
	color: #22C55E;
}
[data-tcm-theme="dark"] .tc-sub-plans__pill-radio {
	border-color: var(--tcm-border);
	background: transparent;
}
[data-tcm-theme="dark"] .tc-sub-plans__pill--active .tc-sub-plans__pill-radio {
	border-color: var(--tcm-accent);
}
[data-tcm-theme="dark"] .tc-sub-plans__pill--active .tc-sub-plans__pill-radio::after {
	background: var(--tcm-accent);
}

/* ════════════════════════════════════════════════════════════════════════
 * 28. Forms — radio component (reusable)
 *
 * Custom-styled radio buttons for the shop sidebar (Rating, Date Updated)
 * and any future surface (account profile prefs, checkout options).
 * Replaces dpmarket's `.common-check.common-radio` + Bootstrap's
 * `.form-check-input` pattern. The native radio is visually hidden but
 * kept in the DOM for a11y + form submission. The label paints the dot
 * via ::before / ::after.
 *
 * Markup contract:
 *   <div class="tcm-radio">
 *     <input class="tcm-radio__input" type="radio" id="..." name="...">
 *     <label class="tcm-radio__label" for="...">Label text</label>
 *   </div>
 *
 * The `tcmp-auto-submit` JS hook on .tcm-radio__input is preserved — it's
 * a JS-marker class, not a styling concern.
 * ════════════════════════════════════════════════════════════════════════ */

.tcm-radio {
	display: flex;
	align-items: center;
	padding: 6px 0;
}
.tcm-radio__input {
	/* Visually hidden but reachable to screen readers + keyboard */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}
.tcm-radio__label {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: 28px;
	font-family: var(--tcm-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tcm-text-soft);
	cursor: pointer;
	user-select: none;
	transition: color var(--tcm-trans-fast);
}
.tcm-radio__label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--tcm-border-strong);
	background: var(--tcm-bg-input);
	transition: border-color var(--tcm-trans-fast), background var(--tcm-trans-fast);
}
.tcm-radio__label::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 50%;
	transform: translateY(-50%) scale(0);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tcm-accent-on);
	transition: transform var(--tcm-trans-fast);
}

.tcm-radio:hover .tcm-radio__label,
.tcm-radio__input:focus-visible + .tcm-radio__label {
	color: var(--tcm-text);
}
.tcm-radio:hover .tcm-radio__label::before,
.tcm-radio__input:focus-visible + .tcm-radio__label::before {
	border-color: var(--tcm-accent);
}
.tcm-radio__input:focus-visible + .tcm-radio__label::before {
	box-shadow: var(--tcm-shadow-focus);
}

.tcm-radio__input:checked + .tcm-radio__label {
	color: var(--tcm-text);
	font-weight: 500;
}
.tcm-radio__input:checked + .tcm-radio__label::before {
	border-color: var(--tcm-accent);
	background: var(--tcm-accent);
}
.tcm-radio__input:checked + .tcm-radio__label::after {
	transform: translateY(-50%) scale(1);
}

.tcm-radio__input:disabled + .tcm-radio__label {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
 * 29. Shop archive layout
 *
 * Self-contained marketplace shop archive page styling. Drives:
 *   - Centered hero with page title + description + search bar
 *   - Toolbar with sort pills + list/grid view toggle
 *     (filter pill + filter-form retired in S169 — sort/search/etc are
 *     already covered by toolbar/hero/sidebar)
 *   - Two-column body: sidebar (Category / Rating / Date Updated) + main
 *   - Responsive product grid: 3 → 2 → 1 columns
 *   - Numeric pagination with Prev / Next links
 *   - Mobile sidebar offcanvas drawer
 *
 * Class prefixes:
 *   .tcm-shop          page-level section + grid scaffolding
 *   .tcm-shop-hero     hero block (title / desc / search)
 *   .tcm-shop-toolbar  sort pills + view toggle bar
 *   .tcm-shop-sidebar  filter accordion sidebar
 *   .tcm-pagination    numeric pagination strip
 *
 * Replaces dpmarket's .all-product, .breadcrumb-one, .filter-tab,
 * .filter-sidebar, .common-pagination.
 *
 * The orchestrator preserves these dpmarket / TC-core classes verbatim
 * because TC core JS binds to them:
 *   - .tc-shop  +  #tc-shop-app  with data-* attrs
 *   - .tc-shop__loading  +  .tc-spinner
 *   - .tc-offcanvas  +  #tc-filter-toggle  +  #tc-product-count
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 29.1 Section + container ─────────────────────────────────────────── */
.tcm-shop {
	padding: 60px 0 100px;
	background: var(--tcm-bg);
}
.tcm-shop__inner {
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 0 24px;
}
@media (max-width: 767px) {
	.tcm-shop {
		padding: 40px 0 60px;
	}
	.tcm-shop__inner {
		padding: 0 16px;
	}
}

/* ── 29.2 Shop hero (centered title + desc + pill search) ─────────────── */
.tcm-shop-hero {
	position: relative;
	padding: 80px 0 60px;
	background:
		radial-gradient(ellipse 70% 60% at 15% 25%, var(--tcm-accent-glow), transparent 60%),
		radial-gradient(ellipse 60% 50% at 85% 75%, var(--tcm-accent-glow), transparent 65%),
		linear-gradient(135deg, var(--tcm-bg-alt) 0%, var(--tcm-bg) 50%, var(--tcm-bg-alt) 100%);
	border-bottom: 1px solid var(--tcm-border-soft);
	overflow: hidden;
}
.tcm-shop-hero__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 1;
	text-align: center;
}
.tcm-shop-hero__title {
	font-family: var(--tcm-font);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--tcm-text);
	text-transform: capitalize;
}
.tcm-shop-hero__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--tcm-text-muted);
	margin: 0 auto 32px;
	max-width: 640px;
}
.tcm-shop-hero__search {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
.tcm-shop-hero__search-input {
	display: block;
	width: 100%;
	height: 56px;
	padding: 0 64px 0 24px;
	font-family: var(--tcm-font);
	font-size: 15px;
	font-weight: 400;
	color: var(--tcm-text);
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-pill);
	box-shadow: var(--tcm-shadow);
	transition: border-color var(--tcm-trans-fast), box-shadow var(--tcm-trans-fast);
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
.tcm-shop-hero__search-input::placeholder {
	color: var(--tcm-text-muted);
}
.tcm-shop-hero__search-input:focus {
	outline: none;
	border-color: var(--tcm-accent);
	box-shadow: var(--tcm-shadow-focus);
}
.tcm-shop-hero__search-btn {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tcm-accent);
	color: var(--tcm-accent-on);
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
	transition: background var(--tcm-trans-fast), transform var(--tcm-trans-fast);
}
.tcm-shop-hero__search-btn:hover {
	background: var(--tcm-accent-hover);
}
.tcm-shop-hero__search-btn:active {
	background: var(--tcm-accent-active);
	transform: translateY(-50%) scale(0.96);
}
.tcm-shop-hero__search-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--tcm-accent-glow);
}
@media (max-width: 767px) {
	.tcm-shop-hero {
		padding: 60px 0 40px;
	}
	.tcm-shop-hero__inner {
		padding: 0 16px;
	}
	.tcm-shop-hero__desc {
		font-size: 14px;
		margin-bottom: 24px;
	}
	.tcm-shop-hero__search-input {
		height: 48px;
		padding-right: 56px;
		font-size: 14px;
	}
	.tcm-shop-hero__search-btn {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

/* ── 29.3 Layout — sidebar + main (CSS Grid; mobile stacks) ──────────── */
.tcm-shop__layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 991px) {
	.tcm-shop__layout {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ── 29.4 Toolbar (sort pills + view toggle) ──────────────────────────── */
.tcm-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0 0 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--tcm-border-soft);
}
.tcm-shop-toolbar__sort {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.tcm-shop-toolbar__sort-item {
	margin: 0;
}
.tcm-shop-toolbar__sort-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-family: var(--tcm-font);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--tcm-text-soft);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--tcm-radius-pill);
	text-decoration: none;
	transition: background var(--tcm-trans-fast), color var(--tcm-trans-fast), border-color var(--tcm-trans-fast);
	white-space: nowrap;
}
.tcm-shop-toolbar__sort-link:hover {
	color: var(--tcm-text);
	background: var(--tcm-bg-muted);
}
.tcm-shop-toolbar__sort-link.is-active {
	color: var(--tcm-text);
	background: var(--tcm-bg-card);
	border-color: var(--tcm-border);
	box-shadow: var(--tcm-shadow-sm);
	cursor: default;
}
.tcm-shop-toolbar__sort-link:focus-visible {
	outline: none;
	box-shadow: var(--tcm-shadow-focus);
}
/* Anchor-as-button color trap (Pattern #135) */
.tcm-page a.tcm-shop-toolbar__sort-link {
	color: var(--tcm-text-soft);
}
.tcm-page a.tcm-shop-toolbar__sort-link:hover,
.tcm-page a.tcm-shop-toolbar__sort-link.is-active {
	color: var(--tcm-text);
}

.tcm-shop-toolbar__views {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.tcm-shop-toolbar__view {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius);
	color: var(--tcm-text-muted);
	font-size: 16px;
	cursor: pointer;
	transition: background var(--tcm-trans-fast), color var(--tcm-trans-fast), border-color var(--tcm-trans-fast);
}
.tcm-shop-toolbar__view:hover {
	color: var(--tcm-text);
	border-color: var(--tcm-border-strong);
}
.tcm-shop-toolbar__view.is-active {
	color: var(--tcm-accent-on);
	background: var(--tcm-accent);
	border-color: var(--tcm-accent);
}
.tcm-shop-toolbar__view:focus-visible {
	outline: none;
	box-shadow: var(--tcm-shadow-focus);
}
.tcm-shop-toolbar__sidebar-open {
	display: none;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius);
	color: var(--tcm-text-muted);
	font-size: 16px;
	cursor: pointer;
	transition: background var(--tcm-trans-fast), color var(--tcm-trans-fast), border-color var(--tcm-trans-fast);
}
.tcm-shop-toolbar__sidebar-open:hover {
	color: var(--tcm-text);
	border-color: var(--tcm-border-strong);
}
@media (max-width: 991px) {
	.tcm-shop-toolbar__sidebar-open {
		display: inline-flex;
	}
}

/* ── 29.5 Sidebar (Category / Rating / Date Updated accordion) ─────────
 *
 * Root element is `<dialog>` (S173) so the mobile offcanvas behavior at
 * ≤991px can use the browser-native modal API (showModal() → top-layer +
 * ::backdrop overlay + scroll-lock). The base rule below restores normal
 * inline-block rendering at desktop (≥992px) by overriding the four UA
 * default styles that <dialog> ships with:
 *
 *   - `display: none` (when [open] attr absent)  →  `display: block`
 *   - `position: absolute; inset: 0; margin: auto`  →  `position: relative; margin: 0`
 *   - `max-width: ...` / `max-height: ...`  →  reset to `none`
 *   - `color: CanvasText; background-color: Canvas`  →  inherit / token
 *
 * The mobile @media block in §29.8 below re-applies fixed positioning +
 * slide-in transform when the dialog is showModal'd at ≤991px.
 * ─────────────────────────────────────────────────────────────────────── */
.tcm-shop-sidebar {
	display: block;
	position: relative;
	margin: 0;
	max-width: none;
	max-height: none;
	color: inherit;
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-lg);
	padding: 8px 4px;
}
.tcm-shop-sidebar__close {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--tcm-text-muted);
	font-size: 18px;
	cursor: pointer;
	z-index: 2;
	border-radius: var(--tcm-radius);
	transition: background var(--tcm-trans-fast), color var(--tcm-trans-fast);
}
.tcm-shop-sidebar__close:hover {
	color: var(--tcm-text);
	background: var(--tcm-bg-muted);
}
.tcm-shop-sidebar__group {
	border-bottom: 1px solid var(--tcm-border-soft);
}
.tcm-shop-sidebar__group:last-child {
	border-bottom: 0;
}
.tcm-shop-sidebar__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 20px;
	font-family: var(--tcm-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--tcm-text);
	background: transparent;
	border: 0;
	text-align: left;
	text-transform: capitalize;
	cursor: pointer;
	transition: color var(--tcm-trans-fast);
}
.tcm-shop-sidebar__heading::after {
	content: '';
	width: 8px;
	height: 8px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(-135deg);
	transition: transform var(--tcm-trans-fast);
	margin-left: 12px;
	margin-top: 4px;
}
.tcm-shop-sidebar__heading[aria-expanded="false"]::after {
	transform: rotate(45deg);
	margin-top: -2px;
}
.tcm-shop-sidebar__heading:hover {
	color: var(--tcm-accent);
}
.tcm-shop-sidebar__heading:focus-visible {
	outline: none;
	box-shadow: inset var(--tcm-shadow-focus);
	border-radius: var(--tcm-radius);
}

.tcm-shop-sidebar__body {
	padding: 0 20px 16px;
}
.tcm-shop-sidebar__form {
	margin: 0;
}
.tcm-shop-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tcm-shop-sidebar__item {
	margin: 0;
}

/* Category links (anchor variant, Category accordion only) */
.tcm-shop-sidebar__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 0;
	font-family: var(--tcm-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--tcm-text-soft);
	text-decoration: none;
	transition: color var(--tcm-trans-fast);
}
.tcm-shop-sidebar__link:hover {
	color: var(--tcm-accent);
}
.tcm-shop-sidebar__link.is-active {
	color: var(--tcm-accent);
	font-weight: 500;
}
/* Anchor-as-button color trap (Pattern #135) */
.tcm-page a.tcm-shop-sidebar__link {
	color: var(--tcm-text-soft);
}
.tcm-page a.tcm-shop-sidebar__link:hover,
.tcm-page a.tcm-shop-sidebar__link.is-active {
	color: var(--tcm-accent);
}
.tcm-shop-sidebar__count {
	font-size: 12px;
	font-weight: 400;
	color: var(--tcm-text-muted);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}

/* ── 29.6 Product grid (CSS Grid, responsive 3 → 2 → 1) ──────────────── */
.tcm-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1199px) {
	.tcm-shop__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 575px) {
	.tcm-shop__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* List-view variant — when the user clicks the list-view toggle button.
   Body class `.list-view` is added by partials/scripts.php (preserved
   from S163). Cards stack vertically full-width. */
body.list-view .tcm-shop__grid {
	grid-template-columns: 1fr;
}

/* Empty-state (no products match the active filters) */
.tcm-shop__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 24px;
	color: var(--tcm-text-muted);
}
.tcm-shop__empty-icon {
	font-size: 64px;
	color: var(--tcm-border-strong);
	margin-bottom: 16px;
	display: block;
	line-height: 1;
}
.tcm-shop__empty-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--tcm-text);
	margin: 0 0 8px;
}
.tcm-shop__empty-desc {
	font-size: 14px;
	margin: 0;
}

/* ── 29.7 Pagination (numeric + Prev / Next) ─────────────────────────── */
.tcm-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}
.tcm-pagination__item {
	margin: 0;
}
.tcm-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: var(--tcm-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-text-soft);
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius);
	text-decoration: none;
	transition: background var(--tcm-trans-fast), color var(--tcm-trans-fast), border-color var(--tcm-trans-fast);
}
.tcm-pagination__link:hover {
	color: var(--tcm-text);
	border-color: var(--tcm-border-strong);
	background: var(--tcm-bg-muted);
}
.tcm-pagination__link.is-active {
	color: var(--tcm-accent-on);
	background: var(--tcm-accent);
	border-color: var(--tcm-accent);
	cursor: default;
}
.tcm-pagination__link:focus-visible {
	outline: none;
	box-shadow: var(--tcm-shadow-focus);
}
.tcm-pagination__link--prev,
.tcm-pagination__link--next {
	padding: 0 16px;
}
/* Anchor-as-button color trap (Pattern #135) */
.tcm-page a.tcm-pagination__link {
	color: var(--tcm-text-soft);
}
.tcm-page a.tcm-pagination__link:hover {
	color: var(--tcm-text);
}
.tcm-page a.tcm-pagination__link.is-active {
	color: var(--tcm-accent-on);
}

/* ── 29.8 Mobile sidebar offcanvas behavior ─────────────────────────────
 *
 * Browser-native via <dialog>+showModal() (S173). The browser owns:
 *   - top-layer rendering (above all other content regardless of z-index)
 *   - ::backdrop pseudo-element overlay (replaces former body::after)
 *   - focus-trap inside the dialog while modal'd
 *   - Escape-to-close
 *   - `open` attribute set/removed on the element (CSS targets [open])
 *
 * Scroll-lock complement (the html:has() rule below) — required because
 * TC core's `titancart/assets/css/titancart.css:41` sets
 * `html { overflow-x: hidden }` (to suppress horizontal scrollbar from the
 * cart drawer). Per CSS spec, when `overflow-x` is non-`visible`, browsers
 * compute `overflow-y` as `auto` rather than `visible` — which makes
 * `<html>` its own scroll container instead of delegating to the viewport.
 * `<dialog>+showModal()`'s native scroll-lock targets the viewport, so when
 * `<html>` itself scrolls, the lock is bypassed (page scrolls behind the
 * modal). The `html:has()` rule below catches that — when the dialog is
 * open it forces `html { overflow: hidden }` (specificity (0,2,1) beats
 * TC core's (0,0,1) regardless of source order). Browser-driven by the
 * `[open]` attribute on the dialog, no JS state to manage.
 *
 * The base @media rule below re-applies fixed positioning + slide-in
 * transform that <dialog>'s top-layer treatment doesn't provide for free.
 *
 * UA-default modal positioning that needs to be defeated when showModal'd:
 *   - `inset: 0` shorthand (we set `right: auto` to nullify the right edge)
 *   - `margin: auto` for centering (we set `margin: 0`)
 *   - default `padding: 1em` (already overridden by `padding: 56px 4px 24px`)
 *
 * Removed in S173 (replaced by browser-native modal):
 *   - `html.tcm-shop-sidebar-open, body.tcm-shop-sidebar-open` scroll-lock
 *     CSS rules (position:fixed, overflow:hidden, touch-action:none, etc.)
 *   - `body.tcm-shop-sidebar-open::after` overlay pseudo (now ::backdrop)
 *   - Per-element `touch-action: pan-y` / `overscroll-behavior: contain` on
 *     the open drawer (no longer needed — ::backdrop intercepts page scroll
 *     and dialog content scrolls naturally as the only scrollable surface
 *     inside the top-layer).
 * ─────────────────────────────────────────────────────────────────────── */

/* Scroll-lock complement — applies regardless of viewport width because the
   dialog's [open] attribute is only ever set on mobile (the open trigger is
   `display: none` at ≥992px), so this rule is effectively self-gating. */
html:has(.tcm-shop-sidebar[open]) {
	overflow: hidden;
}

@media (max-width: 991px) {
	.tcm-shop-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		right: auto;
		bottom: 0;
		margin: 0;
		width: min(320px, 90vw);
		z-index: 1050;
		border-radius: 0;
		border: 0;
		border-right: 1px solid var(--tcm-border);
		transform: translateX(-100%);
		transition: transform 0.28s ease;
		overflow-y: auto;
		padding: 56px 4px 24px;
		box-shadow: var(--tcm-shadow-lg);
	}
	.tcm-shop-sidebar[open] {
		transform: translateX(0);
	}
	.tcm-shop-sidebar__close {
		display: inline-flex;
	}
	.tcm-shop-sidebar::backdrop {
		background: rgba(0, 0, 0, 0.5);
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * 30. Category landing
 *
 * Self-contained marketplace category landing styling. Drives:
 *   - Centered hero with breadcrumb + h1 title + description + count/CTA row
 *   - Subcategories grid (6 → 3 → 2 columns) with icon cards
 *   - Reusable section strip (Featured / Popular / Recently Updated)
 *     composing the canonical .tcm-shop__grid product grid
 *
 * Each section partial emits independently as a sibling top-level <section>
 * (no body-level wrapper) so theme overrides via tcmp_partial_path() can swap
 * any partial without disturbing the others. Visual unity comes from shared
 * gradient + token vocabulary, not nested wrappers. Mirrors §29 shop archive
 * convention (each section self-styled, no .tcm-page wrapper at orchestrator).
 *
 * Class prefixes:
 *   .tcm-category-hero      breadcrumb hero (orig: dpmarket .breadcrumb-one)
 *   .tcm-category-subcats   subcategory cards grid (orig: dpmarket .popular)
 *   .tcm-category-section   featured/popular/recent strip sections
 *
 * Replaces dpmarket's .breadcrumb-one, .breadcrumb-one-content, .popular,
 * .popular-item, .section-heading.style-left.
 *
 * The product grid inside .tcm-category-section composes the canonical
 * .tcm-shop__grid (defined in §29.6) — single source of truth for product
 * grid layout across shop archive AND category landing.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 30.1 Category hero ──────────────────────────────────────────────── */
.tcm-category-hero {
	position: relative;
	padding: 80px 0 60px;
	background:
		radial-gradient(ellipse 70% 60% at 15% 25%, var(--tcm-accent-glow), transparent 60%),
		radial-gradient(ellipse 60% 50% at 85% 75%, var(--tcm-accent-glow), transparent 65%),
		linear-gradient(135deg, var(--tcm-bg-alt) 0%, var(--tcm-bg) 50%, var(--tcm-bg-alt) 100%);
	border-bottom: 1px solid var(--tcm-border-soft);
	overflow: hidden;
}
.tcm-category-hero__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 1;
	text-align: center;
}

/* Breadcrumb */
.tcm-category-hero__crumbs {
	display: flex;
	justify-content: center;
	margin: 0 0 14px;
}
.tcm-category-hero__crumbs-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--tcm-font);
	font-size: 13px;
	color: var(--tcm-text-muted);
}
.tcm-category-hero__crumbs-item {
	display: inline-flex;
	align-items: center;
}
.tcm-category-hero__crumbs-item--current {
	color: var(--tcm-text);
	font-weight: 500;
}
.tcm-category-hero__crumbs-link {
	color: var(--tcm-text-muted);
	text-decoration: none;
	transition: color var(--tcm-trans-fast);
}
.tcm-category-hero__crumbs-link:hover,
.tcm-category-hero__crumbs-link:focus-visible {
	color: var(--tcm-accent);
	text-decoration: none;
}
.tcm-category-hero__crumbs-sep {
	color: var(--tcm-text-muted);
	opacity: 0.6;
	user-select: none;
}

/* Title + desc */
.tcm-category-hero__title {
	font-family: var(--tcm-font);
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--tcm-text);
	text-transform: capitalize;
}
.tcm-category-hero__desc {
	font-size: 15px;
	line-height: 1.6;
	color: var(--tcm-text-muted);
	margin: 0 auto 24px;
	max-width: 640px;
}

/* Meta row: count + view-all */
.tcm-category-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}
.tcm-category-hero__count {
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-text);
}
.tcm-category-hero__sep {
	color: var(--tcm-text-muted);
	opacity: 0.6;
	user-select: none;
}
.tcm-category-hero__view-all {
	font-size: 14px;
	font-weight: 600;
	color: var(--tcm-accent);
	text-decoration: none;
	transition: color var(--tcm-trans-fast);
}
.tcm-category-hero__view-all:hover,
.tcm-category-hero__view-all:focus-visible {
	color: var(--tcm-accent-hover);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.tcm-category-hero {
		padding: 60px 0 40px;
	}
	.tcm-category-hero__inner {
		padding: 0 16px;
	}
	.tcm-category-hero__desc {
		font-size: 14px;
		margin-bottom: 18px;
	}
	.tcm-category-hero__crumbs-list {
		font-size: 12px;
	}
}

/* ── 30.2 Subcategories grid ─────────────────────────────────────────── */
.tcm-category-subcats {
	padding: 60px 0;
	background: var(--tcm-bg);
}
.tcm-category-subcats__inner {
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 0 24px;
}
.tcm-category-subcats__heading {
	margin-bottom: 24px;
}
.tcm-category-subcats__title {
	font-family: var(--tcm-font);
	font-size: 22px;
	font-weight: 600;
	margin: 0;
	color: var(--tcm-text);
}
.tcm-category-subcats__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

/* Card */
.tcm-category-subcats__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 20px 12px;
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-lg);
	color: var(--tcm-text);
	text-decoration: none;
	transition: border-color var(--tcm-trans-fast), box-shadow var(--tcm-trans-fast), transform var(--tcm-trans-fast);
}
.tcm-category-subcats__card:hover {
	border-color: var(--tcm-accent);
	box-shadow: var(--tcm-shadow-md);
	text-decoration: none;
	transform: translateY(-2px);
}
.tcm-category-subcats__card:focus-visible {
	outline: none;
	box-shadow: var(--tcm-shadow-focus);
	border-color: var(--tcm-accent);
	transform: translateY(-2px);
}

/* Icon block */
.tcm-category-subcats__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tcm-bg-muted);
	color: var(--tcm-accent);
	overflow: hidden;
}
.tcm-category-subcats__icon img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 50%;
}
.tcm-category-subcats__icon-fallback {
	width: 28px;
	height: 28px;
	color: var(--tcm-accent);
}

/* Name + count */
.tcm-category-subcats__name {
	font-family: var(--tcm-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--tcm-text);
	margin: 0;
	line-height: 1.3;
	/* Prevent excessively long names from blowing card height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tcm-category-subcats__count {
	font-size: 13px;
	color: var(--tcm-text-muted);
}

@media (max-width: 991px) {
	.tcm-category-subcats__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 575px) {
	.tcm-category-subcats {
		padding: 40px 0;
	}
	.tcm-category-subcats__inner {
		padding: 0 16px;
	}
	.tcm-category-subcats__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.tcm-category-subcats__card {
		padding: 16px 8px;
	}
	.tcm-category-subcats__icon {
		width: 56px;
		height: 56px;
	}
	.tcm-category-subcats__name {
		font-size: 14px;
	}
}

/* ── 30.3 Section strip (Featured / Popular / Recently Updated) ──────── */
.tcm-category-section {
	padding: 60px 0;
	background: var(--tcm-bg);
}
.tcm-category-section__inner {
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 0 24px;
}
.tcm-category-section__heading {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 24px;
}
.tcm-category-section__heading-text {
	flex: 1 1 auto;
	min-width: 0;
}
.tcm-category-section__title {
	font-family: var(--tcm-font);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 4px;
	color: var(--tcm-text);
	line-height: 1.3;
}
.tcm-category-section__sub {
	font-size: 14px;
	color: var(--tcm-text-muted);
	margin: 0;
	line-height: 1.5;
}
.tcm-category-section__view-all {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--tcm-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: color var(--tcm-trans-fast);
}
.tcm-category-section__view-all:hover,
.tcm-category-section__view-all:focus-visible {
	color: var(--tcm-accent);
	text-decoration: underline;
}

/* The product grid inside is .tcm-shop__grid (defined in §29.6) — the
   canonical product grid for shop archive AND category landing. No new
   grid rule here; we compose the existing one. */

@media (max-width: 575px) {
	.tcm-category-section {
		padding: 40px 0;
	}
	.tcm-category-section__inner {
		padding: 0 16px;
	}
	.tcm-category-section__heading {
		gap: 12px;
		margin-bottom: 20px;
	}
	.tcm-category-section__title {
		font-size: 20px;
	}
}


/* ════════════════════════════════════════════════════════════════════════
 * 31. Account section
 *
 * Self-contained marketplace customer "My Account" page styling. Drives:
 *   - Centered hero with breadcrumb path + h1 page/section title
 *   - Two-column body: sidebar (avatar + nav + logout) + content
 *   - Logged-in dashboard: greeting + 3-stat row + 3-quicklink row + recent
 *   - Orders list: full table or empty state
 *   - Order detail: header + line-items table + totals breakdown
 *   - Profile form: name + email-disabled + password change
 *   - Logged-out: centered auth-cards (login + register) with JS toggle
 *   - Alert messages (success / error / warning / info)
 *
 * Page wrapper convention: orchestrator uses
 *   <div id="tc-account"><div class="tcm-page">…</div></div>
 * matching cart/checkout precedent. Aligns with TC core's #tc-* page IDs
 * already scoped by baseline dark-form rules (§N) and activates Pattern
 * #135 anchor-as-button rules for the View buttons on order rows.
 *
 * Class prefixes:
 *   .tcm-account-hero        breadcrumb hero (orig: dpmarket .breadcrumb-two)
 *   .tcm-account-layout      sidebar + content grid
 *   .tcm-account-sidebar     avatar + nav card
 *   .tcm-account-nav         sidebar nav list
 *   .tcm-avatar              circular initials badge
 *   .tcm-account-greeting    "Hello, X!" intro card
 *   .tcm-account-stats       3-up stats row (auto-fit grid)
 *   .tcm-account-quicklinks  3-up quicklinks row (auto-fit grid)
 *   .tcm-account-card-heading title row inside content cards
 *   .tcm-orders-table        Bootstrap .table override (token-driven)
 *   .tcm-order-totals        right-aligned totals breakdown
 *   .tcm-account-empty       empty-state pattern (matches .tcm-shop__empty)
 *   .tcm-auth-cards          centered login + register auth section
 *   .tcm-alert               inline message banner (4 semantic variants)
 *
 * Replaces dpmarket's .breadcrumb-two, .breadcrumb-two-content,
 * .section-bg.rounded-16, .common-input.bg--white.border--color-dark,
 * .btn.btn-main.btn-lg.pill, .btn.btn-outline-light.pill.
 *
 * Status badge (.tcm-status-badge) reuses the contract from §N — partials
 * emit `style="--tcm-badge-bg:…;--tcm-badge-fg:…"` rather than the older
 * single-prop `style="--c:…"` form. The --lg size modifier added below.
 *
 * Mobile (≤991px): layout grid stacks vertically (sidebar above content).
 * Mobile (≤575px): sidebar nav flips to horizontal flex-wrap row, stats
 * and quicklinks compress to 1-up.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 31.1 Account hero ────────────────────────────────────────────────── */
.tcm-account-hero {
	position: relative;
	padding: 60px 0 50px;
	background:
		radial-gradient(ellipse 70% 60% at 15% 25%, var(--tcm-accent-glow), transparent 60%),
		radial-gradient(ellipse 60% 50% at 85% 75%, var(--tcm-accent-glow), transparent 65%),
		linear-gradient(135deg, var(--tcm-bg-alt) 0%, var(--tcm-bg) 50%, var(--tcm-bg-alt) 100%);
	border-bottom: 1px solid var(--tcm-border-soft);
	overflow: hidden;
}
.tcm-account-hero__inner {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}
.tcm-account-hero__crumbs {
	display: block;
	margin-bottom: 14px;
}
.tcm-account-hero__crumbs-list {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.tcm-account-hero__crumbs-item {
	font-size: 14px;
	color: var(--tcm-text-muted);
}
.tcm-account-hero__crumbs-link {
	color: var(--tcm-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}
.tcm-account-hero__crumbs-link:hover,
.tcm-account-hero__crumbs-link:focus-visible {
	color: var(--tcm-accent);
}
.tcm-account-hero__crumbs-sep {
	font-size: 10px;
	color: var(--tcm-text-muted);
	opacity: 0.6;
}
.tcm-account-hero__crumbs-item--current {
	color: var(--tcm-text);
	font-weight: 500;
}
.tcm-account-hero__title {
	font-family: var(--tcm-font);
	font-size: clamp(24px, 3.5vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--tcm-text);
	margin: 0;
	text-transform: capitalize;
}

@media (max-width: 575px) {
	.tcm-account-hero {
		padding: 40px 0 32px;
	}
	.tcm-account-hero__inner {
		padding: 0 16px;
	}
}

/* ── 31.2 Account layout (sidebar + content grid) ─────────────────────── */
.tcm-account-layout {
	max-width: var(--tcm-container-max);
	margin: 0 auto;
	padding: 60px 16px 80px;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}
.tcm-account-layout__sidebar-col {
	min-width: 0;
}
.tcm-account-layout__content-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * 31.2a — SPA section width override (S184).
 *
 * When the marketplace's My Account page hosts the React admin SPA in the
 * content column (vendor-products, future B3.5e admin approval surface, etc.)
 * the editor's form grids and table layouts need substantially more
 * horizontal room than the 1200px max-width container gives. Bumping the
 * layout's max-width to 1600px lets the content column reach ~1290px on
 * desktop while keeping the 280px sidebar visible — wide enough that
 * field grids fit without horizontal scroll, narrow enough that the
 * design doesn't sprawl on ultra-wide monitors.
 *
 * Mobile breakpoint behavior is unchanged — single column at <=991px, same
 * vertical stacking as every other My Account section. The modifier only
 * adjusts horizontal sizing on desktop where it matters.
 *
 * Side padding tightens from 16px to 12px so the content column gains a
 * few more usable pixels on themes whose viewport is exactly at 1600px.
 */
.tcm-account-layout--spa {
	max-width: 1600px;
	padding-left: 12px;
	padding-right: 12px;
}

@media (max-width: 991px) {
	.tcm-account-layout {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 40px 16px 56px;
	}
}

/* ── 31.3 Account sidebar ─────────────────────────────────────────────── */
.tcm-account-sidebar {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 16px;
	box-shadow: var(--tcm-shadow-sm);
}
.tcm-account-sidebar__user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 4px 16px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--tcm-border-soft);
}
.tcm-account-sidebar__user-info {
	min-width: 0;
}
.tcm-account-sidebar__user-name {
	font-family: var(--tcm-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--tcm-text);
	margin: 0 0 2px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tcm-account-sidebar__user-email {
	display: block;
	font-size: 12px;
	color: var(--tcm-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Avatar — circular initials badge with accent fill. Used in the sidebar
   user block; reusable in any future profile UI. */
.tcm-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--tcm-accent);
	color: var(--tcm-accent-on);
	font-family: var(--tcm-font);
	font-size: 16px;
	font-weight: 700;
	flex-shrink: 0;
	letter-spacing: 0.5px;
}

/* Sidebar nav list */
.tcm-account-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tcm-account-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: var(--tcm-radius-md);
	font-family: var(--tcm-font);
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-text);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.tcm-account-nav__heading {
	padding: 14px 14px 4px;
	margin-top: 6px;
	font-family: var(--tcm-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tcm-text-muted, #9a9a9a);
	border-top: 1px solid var(--tcm-border, #eee);
}
.tcm-account-nav__heading:first-child {
	margin-top: 0;
	border-top: none;
}
.tcm-account-nav__link i,
.tcm-account-nav__link svg {
	font-size: 18px;
	width: 22px;
	text-align: center;
	flex-shrink: 0;
	color: var(--tcm-text-muted);
	transition: color 0.15s ease;
}
.tcm-account-nav__link:hover {
	background: var(--tcm-bg-muted);
	color: var(--tcm-accent);
}
.tcm-account-nav__link:hover i,
.tcm-account-nav__link:hover svg {
	color: var(--tcm-accent);
}
.tcm-account-nav__link:focus-visible {
	outline: none;
	box-shadow: var(--tcm-shadow-focus);
}
.tcm-account-nav__link.active {
	background: var(--tcm-accent);
	color: var(--tcm-accent-on);
}
.tcm-account-nav__link.active i,
.tcm-account-nav__link.active svg {
	color: var(--tcm-accent-on);
}
.tcm-account-nav__link.active:hover {
	background: var(--tcm-accent);
	color: var(--tcm-accent-on);
}
.tcm-account-nav__link--logout {
	margin-top: 8px;
	color: var(--tcm-error);
}
.tcm-account-nav__link--logout i,
.tcm-account-nav__link--logout svg {
	color: var(--tcm-error);
}
.tcm-account-nav__link--logout:hover {
	background: var(--tcm-error-bg);
	color: var(--tcm-error);
}
.tcm-account-nav__link--logout:hover i,
.tcm-account-nav__link--logout:hover svg {
	color: var(--tcm-error);
}

/* Pattern #135 override — beat .tcm-page a:hover { text-decoration: underline }
   from §3 (which has higher specificity (0,2,1) than .tcm-account-nav__link:hover
   at (0,2,0) because the <a> element token). Sidebar nav is button-styled, not
   text-link-styled, so underline on hover is wrong here. Same fix-shape as
   .tcm-page a.tcm-shop-sidebar__link:hover at line 2703. */
.tcm-page a.tcm-account-nav__link:hover {
	text-decoration: none;
}

/* ── 31.4 Account dashboard greeting ──────────────────────────────────── */
.tcm-account-greeting {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 28px 32px;
	box-shadow: var(--tcm-shadow-sm);
}
.tcm-account-greeting__title {
	font-family: var(--tcm-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0 0 8px 0;
}
.tcm-account-greeting__lede {
	font-size: 14px;
	line-height: 1.6;
	color: var(--tcm-text-muted);
	margin: 0;
}

@media (max-width: 575px) {
	.tcm-account-greeting {
		padding: 22px 20px;
	}
	.tcm-account-greeting__title {
		font-size: 20px;
	}
}

/* ── 31.5 Account dashboard stats ─────────────────────────────────────── */
.tcm-account-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.tcm-account-stats__item {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 24px 20px;
	text-align: center;
	box-shadow: var(--tcm-shadow-sm);
}
.tcm-account-stats__value {
	font-family: var(--tcm-font);
	font-size: 28px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0 0 4px 0;
	line-height: 1.1;
}
.tcm-account-stats__label {
	display: block;
	font-size: 13px;
	color: var(--tcm-text-muted);
}

/* ── 31.6 Account dashboard quicklinks ────────────────────────────────── */
.tcm-account-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.tcm-account-quicklinks__item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 20px 22px;
	color: var(--tcm-text);
	text-decoration: none;
	box-shadow: var(--tcm-shadow-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.tcm-account-quicklinks__item:hover {
	border-color: var(--tcm-accent);
	box-shadow: var(--tcm-shadow-md);
	transform: translateY(-2px);
	color: var(--tcm-text);
	text-decoration: none;
}
.tcm-account-quicklinks__item:focus-visible {
	outline: none;
	box-shadow: var(--tcm-shadow-focus);
}
.tcm-account-quicklinks__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tcm-bg-muted);
	color: var(--tcm-accent);
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}
/* Explicit child rule — Line Awesome <i> elements don't reliably inherit
   font-size + color through an inline-flex parent in every theme context.
   Mirrors the sidebar nav pattern (§31.3) which declares the same on its
   <i>/<svg> children directly. Without this, the circle backdrop shows
   but the glyph itself rendered transparent / line-height-clipped on the
   live site (S171 ship-verify). */
.tcm-account-quicklinks__icon i,
.tcm-account-quicklinks__icon svg {
	font-size: 22px;
	line-height: 1;
	color: var(--tcm-accent);
}
.tcm-account-quicklinks__label {
	font-family: var(--tcm-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--tcm-text);
}

/* Pattern #135 override — beat .tcm-page a:hover { text-decoration: underline }
   from §3. Quicklinks are card-styled (lift on hover, accent border), not
   text-link-styled. Same fix-shape as .tcm-page a.tcm-shop-toolbar__sort-link:hover
   at line 2520. */
.tcm-page a.tcm-account-quicklinks__item:hover {
	text-decoration: none;
}

/* ── 31.7 Account content card + heading ──────────────────────────────── */
.tcm-account-card {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 28px;
	box-shadow: var(--tcm-shadow-sm);
}
.tcm-account-card--lg {
	padding: 32px 36px;
}
.tcm-account-card-heading {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.tcm-account-card-heading__title {
	font-family: var(--tcm-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0;
}
.tcm-account-card-heading__view-all {
	font-size: 14px;
	font-weight: 500;
	color: var(--tcm-accent);
	text-decoration: none;
	white-space: nowrap;
}
.tcm-account-card-heading__view-all:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 575px) {
	.tcm-account-card {
		padding: 22px 18px;
	}
	.tcm-account-card--lg {
		padding: 24px 20px;
	}
}

/* Section title inside profile/back-button context */
.tcm-account-section-title {
	font-family: var(--tcm-font);
	font-size: 20px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0 0 24px 0;
}

/* Order detail — back link */
.tcm-account-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--tcm-text-muted);
	text-decoration: none;
	margin-bottom: 16px;
	transition: color 0.15s ease;
}
.tcm-account-back-link:hover,
.tcm-account-back-link:focus-visible {
	color: var(--tcm-accent);
}
/* Pattern #135 override — beat .tcm-page a:hover { text-decoration: underline }
   from §3. Back-link is icon+text combo styled as nav action, color-change
   only on hover. */
.tcm-page a.tcm-account-back-link:hover {
	text-decoration: none;
}

/* Order detail header (title + status badge) */
.tcm-account-order-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}
.tcm-account-order-header__title {
	font-family: var(--tcm-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0 0 4px 0;
}
.tcm-account-order-header__date {
	display: block;
	font-size: 13px;
	color: var(--tcm-text-muted);
}

/* ── 31.8 Orders table ────────────────────────────────────────────────── */
/* Token-driven Bootstrap .table override. Replaces the inline assets-style
   shim's same-name rules — those used hsl(var(--main))/hsl(var(--heading))
   which exist only on the dpmarket partner theme. */
.tcm-orders-table.table,
table.tcm-orders-table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--tcm-text);
	--bs-table-border-color: var(--tcm-border);
	width: 100%;
	font-size: 14px;
	background: transparent;
	color: var(--tcm-text);
	border-collapse: collapse;
}
.tcm-orders-table > :not(caption) > * > * {
	background: transparent !important;
	color: var(--tcm-text);
	box-shadow: none;
}
.tcm-orders-table thead th {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--tcm-text-muted);
	padding: 10px 12px;
	border-bottom: 1px solid var(--tcm-border);
	background: transparent;
	text-align: left;
}
.tcm-orders-table thead th.tcm-text-center { text-align: center; }
.tcm-orders-table thead th.tcm-text-end    { text-align: right; }
.tcm-orders-table tbody td {
	padding: 12px;
	vertical-align: middle;
	border-bottom: 1px solid var(--tcm-border-soft);
	color: var(--tcm-text);
}
.tcm-orders-table tbody td.tcm-text-center { text-align: center; }
.tcm-orders-table tbody td.tcm-text-end    { text-align: right; }
.tcm-orders-table tbody td .tcm-orders-table__muted {
	color: var(--tcm-text-muted);
}
.tcm-orders-table tbody td .tcm-orders-table__num {
	font-weight: 500;
	color: var(--tcm-accent);
	text-decoration: none;
}
.tcm-orders-table tbody td .tcm-orders-table__num:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tcm-orders-table tbody td .tcm-orders-table__total {
	font-weight: 600;
	color: var(--tcm-text);
}
.tcm-orders-table tbody tr:last-child td {
	border-bottom: 0;
}
.tcm-orders-table tbody tr:hover td {
	background: var(--tcm-bg-muted) !important;
}
.tcm-orders-table__product-thumb {
	width: 48px;
	height: 48px;
	border-radius: var(--tcm-radius-md);
	object-fit: cover;
	flex-shrink: 0;
}
.tcm-orders-table__product-thumb--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tcm-bg-muted);
	color: var(--tcm-text-muted);
	font-size: 20px;
}
.tcm-orders-table__product-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}
.tcm-orders-table__product-name {
	font-weight: 600;
	color: var(--tcm-text);
}
.tcm-orders-table__product-sku {
	display: block;
	font-size: 12px;
	color: var(--tcm-text-muted);
	margin-top: 2px;
}
.tcm-orders-table__more {
	font-size: 12px;
	color: var(--tcm-text-muted);
}

/* ── 31.8b Orders table → stacked cards on mobile (S246) ──────────────────
 * The 6-column orders table (Order / Date / Status / Total / Product / View)
 * cannot fit a phone viewport: the Product cell (48px thumb + product name)
 * is wide, and the full row forced HORIZONTAL PAGE OVERFLOW on mobile
 * (reported S246 — "products showing on the right"; the product images were
 * pushing the table past the viewport, breaking the whole my-account page).
 * Below 768px each <tr> becomes a self-contained card: scalar cells render
 * as "LABEL … value" rows (label pulled from the data-label attribute the
 * partials set, so it stays translatable), and the product cell + View
 * action each span the full row width. No horizontal scroll, no page break.
 * Shared by section-dashboard.php (Recent Orders) and section-orders-list.php.
 */
@media (max-width: 767px) {
	table.tcm-orders-table,
	.tcm-orders-table.table { display: block; width: 100%; }
	.tcm-orders-table thead { display: none; }
	.tcm-orders-table tbody { display: block; }
	.tcm-orders-table tbody tr {
		display: block;
		padding: 14px 2px;
		border-bottom: 1px solid var(--tcm-border);
	}
	.tcm-orders-table tbody tr:last-child { border-bottom: 0; }
	.tcm-orders-table tbody tr:hover td { background: transparent !important; }
	.tcm-orders-table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 5px 0 !important;
		border: 0 !important;
		text-align: right;
	}
	.tcm-orders-table tbody td[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		color: var(--tcm-text-muted);
		text-align: left;
	}
	/* Product cell + View action: full-width rows, not label/value pairs. */
	.tcm-orders-table tbody td.tcm-orders-table__cell--product {
		display: block;
		text-align: left;
		padding-top: 10px !important;
	}
	.tcm-orders-table tbody td.tcm-orders-table__cell--action {
		display: block;
		padding-top: 12px !important;
	}
	.tcm-orders-table tbody td.tcm-orders-table__cell--action .tcm-btn {
		display: block;
		width: 100%;
		text-align: center;
	}
	.tcm-orders-table__product-name { overflow-wrap: anywhere; }
}

/* ── 31.9 Status badge --lg modifier ──────────────────────────────────── */
/* Base .tcm-status-badge is in §N (line 1159). The --lg modifier here is
   used on the order detail page header. */
.tcm-status-badge--lg {
	font-size: 13px;
	padding: 6px 16px;
}

/* ── 31.10 Order totals ───────────────────────────────────────────────── */
.tcm-order-totals {
	max-width: 360px;
	margin-left: auto;
}
.tcm-order-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0;
	font-size: 14px;
	color: var(--tcm-text-muted);
	border-bottom: 1px solid var(--tcm-border-soft);
}
.tcm-order-totals__row:last-child {
	border-bottom: 0;
}
.tcm-order-totals__row--total {
	font-size: 16px;
	font-weight: 700;
	color: var(--tcm-text);
	padding-top: 14px;
	margin-top: 4px;
	border-top: 1px solid var(--tcm-border);
}

/* ── 31.11 Account empty state ────────────────────────────────────────── */
.tcm-account-empty {
	text-align: center;
	padding: 48px 24px;
}
.tcm-account-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--tcm-bg-muted);
	color: var(--tcm-text-muted);
	font-size: 32px;
	line-height: 1;
	margin-bottom: 16px;
	flex-shrink: 0;
}
/* Same explicit child rule as quicklinks __icon — Line Awesome <i> doesn't
   reliably inherit through inline-flex centered containers. */
.tcm-account-empty__icon i,
.tcm-account-empty__icon svg {
	font-size: 32px;
	line-height: 1;
	color: var(--tcm-text-muted);
}
.tcm-account-empty__icon svg {
	width: 32px;
	height: 32px;
	stroke: currentColor;
	fill: none;
}
.tcm-account-empty__text {
	font-size: 15px;
	color: var(--tcm-text-muted);
	margin: 0 0 20px 0;
}

/* ── 31.12 Auth cards (logged-out login + register) ───────────────────── */
.tcm-auth-cards {
	padding: 80px 0 100px;
}
.tcm-auth-cards__container {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 16px;
}
.tcm-auth-card {
	background: var(--tcm-bg-card);
	border: 1px solid var(--tcm-border);
	border-radius: var(--tcm-radius-xl);
	padding: 32px;
	box-shadow: var(--tcm-shadow-sm);
}
.tcm-auth-card__title {
	font-family: var(--tcm-font);
	font-size: 22px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0 0 6px 0;
	text-transform: capitalize;
}
.tcm-auth-card__lede {
	font-size: 14px;
	color: var(--tcm-text-muted);
	margin: 0 0 20px 0;
}
.tcm-auth-card__lede a {
	color: var(--tcm-accent);
	font-weight: 500;
	text-decoration: none;
}
.tcm-auth-card__lede a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tcm-auth-card__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}
.tcm-auth-card__row > * {
	flex: 1 1 calc(50% - 12px);
	min-width: 0;
}
.tcm-auth-card__row--single > * {
	flex: 1 1 100%;
}
.tcm-auth-card__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}
.tcm-auth-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}
.tcm-auth-card__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--tcm-text-muted);
	cursor: pointer;
}
.tcm-auth-card__check input {
	margin: 0;
	accent-color: var(--tcm-accent);
}
.tcm-auth-card__forgot {
	font-size: 14px;
	color: var(--tcm-accent);
	text-decoration: none;
}
.tcm-auth-card__forgot:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tcm-auth-card__divider {
	display: block;
	margin: 24px 0;
	text-align: center;
	font-size: 12px;
	font-weight: 500;
	color: var(--tcm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	position: relative;
}
.tcm-auth-card__divider::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--tcm-border);
	z-index: 0;
}
.tcm-auth-card__divider span {
	position: relative;
	z-index: 1;
	background: var(--tcm-bg-card);
	padding: 0 12px;
}
.tcm-auth-card__social {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (max-width: 575px) {
	.tcm-auth-cards {
		padding: 48px 0 64px;
	}
	.tcm-auth-card {
		padding: 24px 20px;
	}
	.tcm-auth-card__row > * {
		flex: 1 1 100%;
	}
}

/* ── 31.13 Inline alert messages ──────────────────────────────────────── */
.tcm-alert {
	padding: 10px 14px;
	border-radius: var(--tcm-radius-md);
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 16px;
	border: 1px solid transparent;
	border-left-width: 3px;
}
.tcm-alert:last-child {
	margin-bottom: 0;
}
.tcm-alert--error {
	background: var(--tcm-error-bg);
	border-color: var(--tcm-error-border);
	border-left-color: var(--tcm-error);
	color: var(--tcm-error);
}
.tcm-alert--success {
	background: var(--tcm-success-bg);
	border-color: var(--tcm-success);
	border-left-color: var(--tcm-success);
	color: var(--tcm-success);
}
.tcm-alert--warning {
	background: var(--tcm-warning-bg);
	border-color: var(--tcm-warning-border);
	border-left-color: var(--tcm-warning);
	color: var(--tcm-warning);
}
.tcm-alert--info {
	background: var(--tcm-bg-muted);
	border-color: var(--tcm-border);
	border-left-color: var(--tcm-info);
	color: var(--tcm-text);
}

/* ── 31.14 Form helpers ───────────────────────────────────────────────── */
/* Small hint/caption text below an input */
.tcm-form-hint {
	display: block;
	font-size: 12px;
	color: var(--tcm-text-muted);
	margin-top: 4px;
	line-height: 1.5;
}
/* Horizontal rule between form sections (e.g. profile name → password) */
.tcm-form-divider {
	border: none;
	border-top: 1px solid var(--tcm-border-soft);
	margin: 24px 0;
}
/* Sub-heading inside a form, lighter weight than card-heading__title */
.tcm-form-section-heading {
	font-family: var(--tcm-font);
	font-size: 16px;
	font-weight: 700;
	color: var(--tcm-text);
	margin: 0 0 16px 0;
}
/* Flex container for submit/cancel rows at the bottom of a form */
.tcm-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}
/* Slightly wider button — used for "Save Changes" style primary submits */
.tcm-btn--wide {
	padding-left: 32px;
	padding-right: 32px;
}

/* ── 31.14 Mobile sidebar nav ─────────────────────────────────────────── */
@media (max-width: 991px) {
	.tcm-account-sidebar {
		padding: 12px 16px;
	}
	.tcm-account-sidebar__user {
		padding: 4px 4px 12px;
		margin-bottom: 8px;
	}
	.tcm-account-nav {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 4px;
	}
	/* Group headings (AFFILIATE / VENDOR) and the divider must break the
	 * wrapped row — without a full-basis they flow as inline grid cells
	 * mid-row and look broken (reported S246). Forcing 100% basis puts each
	 * heading on its own line above its group, and logout on its own line. */
	.tcm-account-nav__heading {
		flex: 0 0 100%;
	}
	.tcm-account-nav__link--logout {
		flex: 0 0 100%;
	}
	.tcm-account-nav__link {
		padding: 8px 12px;
		font-size: 13px;
	}
	.tcm-account-nav__link i,
	.tcm-account-nav__link svg {
		font-size: 16px;
		width: auto;
	}
	.tcm-account-nav__link--logout {
		margin-top: 0;
	}
}
@media (max-width: 575px) {
	.tcm-account-stats {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.tcm-account-stats__item {
		padding: 18px 14px;
	}
	.tcm-account-stats__value {
		font-size: 24px;
	}
	.tcm-account-quicklinks {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.tcm-account-order-header {
		flex-direction: column;
		gap: 12px;
	}
	.tcm-order-totals {
		max-width: 100%;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
 * §32 — VENDOR SECTIONS (Track B Module B3, S179)
 * ══════════════════════════════════════════════════════════════════════════
 *
 * Component rules for the four vendor account sections shipped at B3:
 *   - section-vendor-dashboard.php   (greeting + stats tiles)
 *   - section-vendor-products.php    (products list table)
 *   - section-vendor-sales.php       (coming-soon stub)
 *   - section-vendor-payouts.php     (coming-soon stub)
 *   - vendor-state-banner.php        (shared non-active banner)
 *
 * Most of the visual surface reuses existing §31 components:
 *   .tcm-account-greeting / .tcm-account-stats / .tcm-account-quicklinks
 *   / .tcm-account-card / .tcm-account-empty / .tcm-btn variants. The
 * rules below add only what's net-new — modifier classes for placeholder
 * tiles, the products table component, and the two pill variants for
 * stock and product status.
 */

/* §32.1 — Stats tile modifiers (placeholder + sub-label + small-value variant) */
.tcm-account-stats__item--pending {
	opacity: 0.75;
	background: linear-gradient(180deg, var(--tcm-bg) 0%, var(--tcm-bg-muted, var(--tcm-bg)) 100%);
	border-style: dashed;
}
.tcm-account-stats__hint {
	display: block;
	margin-top: 4px;
	font-family: var(--tcm-font);
	font-size: 11px;
	color: var(--tcm-text-muted);
	font-style: italic;
}
.tcm-account-stats__value--small {
	font-size: 18px;
	line-height: 1.3;
}

/* §32.2 — Empty-state title (used by stub sections + banner) */
.tcm-account-empty__title {
	font-family: var(--tcm-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--tcm-text);
	margin: 12px 0 6px 0;
}

/* §32.3 — Vendor products table */
.tcm-vendor-products-table {
	width: 100%;
	border-collapse: collapse;
}
.tcm-vendor-products-table thead th {
	font-family: var(--tcm-font);
	font-size: 12px;
	font-weight: 600;
	color: var(--tcm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-align: left;
	padding: 12px;
	border-bottom: 1px solid var(--tcm-border);
}
.tcm-vendor-products-table tbody td {
	padding: 12px;
	font-family: var(--tcm-font);
	font-size: 14px;
	color: var(--tcm-text);
	border-bottom: 1px solid var(--tcm-border);
	vertical-align: middle;
}
.tcm-vendor-products-table tbody tr:last-child td {
	border-bottom: 0;
}
.tcm-vendor-products-table tbody tr:hover td {
	background: var(--tcm-bg-muted, transparent);
}

/* §32.3.a — Image column (narrow, thumb-sized) */
.tcm-vendor-products-table__th-image {
	width: 76px;
}
.tcm-vendor-products-table__cell-image {
	width: 76px;
	padding: 8px 12px;
}
.tcm-vendor-products-table__thumb {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 6px;
	object-fit: cover;
	background: var(--tcm-bg-muted, var(--tcm-bg));
	border: 1px solid var(--tcm-border);
}
.tcm-vendor-products-table__thumb--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tcm-text-muted);
	font-size: 22px;
}

/* §32.3.b — Name + Code columns */
.tcm-vendor-products-table__cell-name {
	min-width: 200px;
}
.tcm-vendor-products-table__name {
	font-weight: 600;
	color: var(--tcm-text);
}
.tcm-vendor-products-table__cell-sku code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	color: var(--tcm-text-muted);
	background: var(--tcm-bg-muted, transparent);
	padding: 2px 6px;
	border-radius: 4px;
}

/* §32.3.c — Price + Stock columns */
.tcm-vendor-products-table__cell-price {
	font-weight: 600;
	white-space: nowrap;
}
.tcm-vendor-products-table__qty {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--tcm-text-muted);
}

/* §32.4 — Stock pill (in-stock / out-of-stock / on-backorder) */
.tcm-stock-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-family: var(--tcm-font);
	font-size: 11px;
	font-weight: 600;
	border: 1px solid transparent;
	white-space: nowrap;
}
.tcm-stock-pill--in-stock {
	background: color-mix(in srgb, var(--tcm-success, #10b981) 12%, transparent);
	color:      var(--tcm-success, #10b981);
	border-color: color-mix(in srgb, var(--tcm-success, #10b981) 25%, transparent);
}
.tcm-stock-pill--out-of-stock {
	background: color-mix(in srgb, var(--tcm-danger, #ef4444) 12%, transparent);
	color:      var(--tcm-danger, #ef4444);
	border-color: color-mix(in srgb, var(--tcm-danger, #ef4444) 25%, transparent);
}
.tcm-stock-pill--on-backorder {
	background: color-mix(in srgb, var(--tcm-warning, #f59e0b) 12%, transparent);
	color:      var(--tcm-warning, #f59e0b);
	border-color: color-mix(in srgb, var(--tcm-warning, #f59e0b) 25%, transparent);
}

/* §32.5 — Product status pill (active / disabled / hidden) */
.tcm-product-status-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 12px;
	font-family: var(--tcm-font);
	font-size: 11px;
	font-weight: 600;
	border: 1px solid var(--tcm-border);
	background: var(--tcm-bg);
	color: var(--tcm-text-muted);
	white-space: nowrap;
}
.tcm-product-status-pill--active {
	background: color-mix(in srgb, var(--tcm-success, #10b981) 12%, transparent);
	color:      var(--tcm-success, #10b981);
	border-color: color-mix(in srgb, var(--tcm-success, #10b981) 25%, transparent);
}
.tcm-product-status-pill--disabled {
	background: var(--tcm-bg-muted, var(--tcm-bg));
	color: var(--tcm-text-muted);
	border-color: var(--tcm-border);
}
.tcm-product-status-pill--hidden {
	background: color-mix(in srgb, var(--tcm-warning, #f59e0b) 10%, transparent);
	color:      var(--tcm-warning, #f59e0b);
	border-color: color-mix(in srgb, var(--tcm-warning, #f59e0b) 22%, transparent);
}

/* §32.6 — Mobile adjustments for the products table */
@media (max-width: 768px) {
	.tcm-vendor-products-table thead {
		display: none;
	}
	.tcm-vendor-products-table,
	.tcm-vendor-products-table tbody,
	.tcm-vendor-products-table tr {
		display: block;
		width: 100%;
	}
	.tcm-vendor-products-table tbody td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 12px;
		border-bottom: 0;
		gap: 12px;
	}
	.tcm-vendor-products-table tbody tr {
		border: 1px solid var(--tcm-border);
		border-radius: 8px;
		padding: 8px 0;
		margin-bottom: 12px;
	}
	.tcm-vendor-products-table tbody tr:hover td {
		background: transparent;
	}
	.tcm-vendor-products-table__cell-image {
		justify-content: center;
		padding: 12px;
	}
	/* Stack a data-label column for mobile via ::before on each cell.
	   Falls back gracefully when the cell is empty (the image cell). */
	.tcm-vendor-products-table__cell-name::before    { content: 'Name'; }
	.tcm-vendor-products-table__cell-sku::before     { content: 'Product Code'; }
	.tcm-vendor-products-table__cell-price::before   { content: 'Price'; }
	.tcm-vendor-products-table__cell-stock::before   { content: 'Stock'; }
	.tcm-vendor-products-table__cell-status::before  { content: 'Status'; }
	.tcm-vendor-products-table__cell-name::before,
	.tcm-vendor-products-table__cell-sku::before,
	.tcm-vendor-products-table__cell-price::before,
	.tcm-vendor-products-table__cell-stock::before,
	.tcm-vendor-products-table__cell-status::before {
		font-family: var(--tcm-font);
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--tcm-text-muted);
	}
}