/*
 * Trailhead — storefront stylesheet ("Charcoal & Rust")
 *
 * An engineered, fabrication-shop look: graphite header, footer and deep bands,
 * an off-white page, white paper and a slightly darker panel behind product
 * photos. One muted brand colour (rust by default) is kept for the main
 * button, links and small details — never for big fills. Headings in IBM Plex
 * Sans Condensed, text in IBM Plex Sans, fitment lines, eyebrows and years in
 * IBM Plex Mono. 2px corners, hairline borders, no heavy shadows.
 *
 * Colours are the store's own. The layout emits the full design-token set
 * (--primary-color, --header-bg-color, --bg-warm, …) from the store's settings,
 * with any Trailhead-only overrides applied; this file maps them onto a small
 * --th-* layer and never hard-codes a brand colour. The fallbacks below are the
 * Charcoal & Rust defaults, used only if a token is missing.
 *
 * Three vocabularies are styled here:
 *   1. Trailhead's own (.th-*), for the pages this theme draws.
 *   2. Modern Industrial's (.mi-*), which the account and one-message pages
 *      Trailhead took from it still use. The --mi-* tokens are aliased to
 *      Trailhead's, so those pages' own inline rules follow this palette.
 *   3. Classic's (.container, .btn, .card, .alert, forms, tables), because
 *      terms, privacy, contact, license, refund and checkout always render
 *      Classic's templates inside this layout.
 */

:root {
    --th-ink: var(--header-bg-color, #1f2124);
    --th-on-ink: var(--header-text-color, #f2f1ee);
    --th-foot: var(--footer-bg-color, #1f2124);
    --th-foot-text: var(--footer-text-color, #a9aaa6);
    --th-deep: var(--th-ink);
    --th-bone: var(--bg-warm, #f2f1ee);
    --th-paper: var(--bg-color, #ffffff);
    --th-white: #ffffff;
    --th-panel: color-mix(in srgb, var(--th-bone) 97%, var(--th-text));
    --th-brand: var(--primary-color, #a4471f);
    --th-brand-dark: var(--primary-dark, #86391a);
    --th-brand-wash: color-mix(in srgb, var(--th-brand) 7%, var(--th-paper));
    --th-brand-edge: color-mix(in srgb, var(--th-brand) 30%, var(--th-paper));
    --th-link: var(--th-brand);
    --th-accent: var(--accent-color, #1f2124);
    --th-text: var(--text-color, #1b1d20);
    --th-muted: var(--text-light, #5c5f63);
    --th-faint: color-mix(in srgb, var(--th-muted) 75%, var(--th-bone));
    --th-line: var(--border-color, #dcdad5);
    --th-line-dark: rgba(255, 255, 255, .12);
    --th-good: #2f6b3a;
    --th-good-bg: #e6efe5;
    --th-bad: #a3261b;
    --th-bad-bg: #fbe9e6;
    --th-star: var(--th-text);
    --th-star-off: color-mix(in srgb, var(--th-line) 75%, var(--th-muted));
    --th-shadow: 0 1px 2px rgba(20, 20, 20, .05), 0 8px 22px -16px rgba(20, 20, 20, .3);
    --th-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --th-gutter: clamp(16px, 3.5vw, 36px);
    --th-max: 1240px;
    --th-radius: 2px;
    --th-btn-radius: 2px;

    /* Modern Industrial's tokens, for the page styles Trailhead inherited. */
    --mi-ink: var(--th-text);
    --mi-ink-soft: var(--th-muted);
    --mi-surface: var(--th-paper);
    --mi-surface-alt: var(--th-bone);
    --mi-line: var(--th-line);
    --mi-steel: var(--th-ink);
    --mi-steel-soft: color-mix(in srgb, var(--th-ink) 88%, #ffffff);
    --mi-radius: 2px;
    --mi-shadow: var(--th-shadow);
    --mi-maxw: var(--th-max);

    color-scheme: light;
}

/* ================================================================== base */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.th-locked { overflow: hidden; }

body {
    margin: 0;
    background: var(--th-bone);
    color: var(--th-text);
    font-family: var(--th-font, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img, svg, video { max-width: 100%; }
button { font-family: inherit; }
img { height: auto; }
b, strong { font-weight: 600; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--th-font-head, "IBM Plex Sans Condensed", "Arial Narrow", sans-serif);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.1;
    margin: 0 0 .6em;
    color: inherit;
    text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1em; }

a { color: var(--th-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--th-text); }

hr, .divider { height: 1px; background: var(--th-line); border: 0; margin: 2rem 0; }

:focus-visible { outline: 2px solid var(--th-link); outline-offset: 2px; }

::selection { background: color-mix(in srgb, var(--th-brand) 22%, #ffffff); color: var(--th-text); }

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

.th-skip {
    position: absolute;
    left: 8px; top: -60px;
    z-index: 200;
    background: var(--th-brand);
    color: var(--th-on-primary, #ffffff);
    padding: .6rem 1rem;
    border-radius: var(--th-btn-radius);
    font-weight: 600;
    text-decoration: none;
}
.th-skip:focus { top: 8px; }

.th-wrap, .container {
    width: 100%;
    max-width: var(--th-max);
    margin: 0 auto;
    padding-left: var(--th-gutter);
    padding-right: var(--th-gutter);
}

.th-main { display: block; min-height: 50vh; }
.th-page { padding-top: clamp(24px, 4vw, 44px); padding-bottom: clamp(48px, 7vw, 88px); }
.th-page-flash { padding-bottom: 0; }

/* Eyebrows: small mono uppercase. */
.th-label, .mi-eyebrow {
    display: inline-block;
    font-family: var(--th-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--th-muted);
    margin-bottom: .45rem;
}

.th-fits {
    font-family: var(--th-mono);
    font-size: .78rem;
    font-weight: 500;
    color: var(--th-muted);
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================== buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.35rem;
    background: var(--th-brand);
    color: var(--th-on-primary, #ffffff);
    border: 1.5px solid var(--th-brand);
    border-radius: var(--th-btn-radius);
    font-family: var(--th-font, "IBM Plex Sans", sans-serif);
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    -webkit-appearance: none;
    appearance: none;
}
.btn:hover {
    background: var(--th-brand-dark);
    border-color: var(--th-brand-dark);
    color: var(--th-on-primary, #ffffff);
    text-decoration: none;
}
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-secondary, .btn-line, .btn-outline {
    background: transparent;
    color: var(--th-text);
    border-color: currentColor;
}
.btn-secondary:hover, .btn-line:hover, .btn-outline:hover {
    background: var(--th-text);
    border-color: var(--th-text);
    color: var(--th-bone);
}

.btn-dark {
    background: var(--th-ink);
    border-color: var(--th-ink);
    color: var(--th-on-ink);
}
.btn-dark:hover {
    background: color-mix(in srgb, var(--th-ink) 84%, #ffffff);
    border-color: color-mix(in srgb, var(--th-ink) 84%, #ffffff);
    color: var(--th-on-ink);
}

.btn-ghost, .mi-on-dark {
    background: transparent;
    color: #ffffff;
    border-color: currentColor;
}
.btn-ghost:hover, .mi-on-dark:hover { background: rgba(255, 255, 255, .1); border-color: #ffffff; color: #ffffff; }

.btn-accent {
    background: var(--th-accent);
    border-color: var(--th-accent);
    color: var(--th-on-accent, #ffffff);
}
.btn-accent:hover { background: color-mix(in srgb, var(--th-accent) 85%, #ffffff); border-color: transparent; color: var(--th-on-accent, #ffffff); }

.btn-danger { background: var(--th-bad); border-color: var(--th-bad); color: #fff; }
.btn-sm { padding: .5rem .85rem; font-size: .85rem; }
.btn-lg { padding: 1rem 1.6rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ================================================================== top line + header */

/* Only drawn when the store has written trust lines (quiet text on the page
   colour) or turned on its top banner (a graphite line that reads as part of
   the header). Never a coloured band. */
.th-util {
    background: var(--th-bone);
    color: var(--th-muted);
    border-bottom: 1px solid var(--th-line);
    font-size: .8rem;
    font-weight: 500;
    line-height: 1.35;
}
.th-util .th-wrap {
    display: flex;
    justify-content: center;
    gap: 4px 28px;
    flex-wrap: wrap;
    padding-top: 7px;
    padding-bottom: 7px;
    text-align: center;
}
.th-util a { color: inherit; }
.th-util-banner {
    background: var(--th-ink);
    color: color-mix(in srgb, var(--th-on-ink) 80%, transparent);
    border-bottom-color: var(--th-line-dark);
}

.th-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--th-ink);
    color: var(--th-on-ink);
}

.th-header-row {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 74px;
}

.th-logo { display: flex; align-items: center; flex-shrink: 0; color: var(--th-on-ink); text-decoration: none; min-width: 0; }
.th-logo:hover { color: var(--th-on-ink); }
.th-logo img { display: block; height: auto; max-height: 48px; width: auto; max-width: 240px; object-fit: contain; }
/* No logo: the store name as a wordmark. */
.th-logo-text {
    font-family: var(--th-font-head, "IBM Plex Sans Condensed", "Arial Narrow", sans-serif);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.th-nav a {
    display: block;
    color: color-mix(in srgb, var(--th-on-ink) 86%, transparent);
    font-weight: 500;
    font-size: .95rem;
    padding: .4rem 0;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1.5px solid transparent;
}
.th-nav a:hover { color: var(--th-on-ink); border-bottom-color: currentColor; }

.th-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    width: 240px;
    min-width: 0;
    padding: 0 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--th-radius);
    color: color-mix(in srgb, var(--th-on-ink) 62%, transparent);
}
.th-search:focus-within { border-color: color-mix(in srgb, var(--th-on-ink) 60%, transparent); }
.th-search svg { width: 18px; height: 18px; flex-shrink: 0; }
.th-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--th-on-ink);
    font: inherit;
    font-size: .92rem;
    outline: none;
}
.th-search input:focus { outline: none; }
.th-search input::placeholder { color: color-mix(in srgb, var(--th-on-ink) 55%, transparent); }

.th-icons { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.th-search + .th-icons { margin-left: -12px; }

.th-icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: var(--th-radius);
    background: transparent;
    color: var(--th-on-ink);
    cursor: pointer;
    text-decoration: none;
}
.th-icon-btn:hover { background: rgba(255, 255, 255, .08); color: var(--th-on-ink); }
.th-icon-btn svg { width: 21px; height: 21px; stroke-width: 1.8; }

.th-cart-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--th-brand);
    color: var(--th-on-primary, #ffffff);
    font-size: .66rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

.th-menu-btn, .th-search-btn { display: none; }

/* Account menu */
.th-account { position: relative; }
.th-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--th-paper);
    color: var(--th-text);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    box-shadow: var(--th-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 70;
}
.th-account:hover .th-menu, .th-account:focus-within .th-menu { opacity: 1; visibility: visible; transform: none; }
.th-menu a, .th-menu button {
    display: block;
    width: 100%;
    padding: .5rem .7rem;
    border: 0;
    border-radius: var(--th-radius);
    background: none;
    color: var(--th-text);
    font: inherit;
    font-size: .92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.th-menu a:hover, .th-menu button:hover { background: var(--th-bone); color: var(--th-text); }
.th-menu form { margin: 0; }
.th-menu-name { padding: .45rem .7rem .35rem; font-family: var(--th-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--th-muted); }
.th-menu-sep { border-top: 1px solid var(--th-line); margin-top: 4px; padding-top: 4px; }

/* Search row (narrow screens) */
.th-search-row { border-top: 1px solid var(--th-line-dark); padding: 10px 0; }
.th-search-row[hidden] { display: none; }
.th-search-row form { display: flex; gap: 8px; }
.th-search-row input { flex: 1; min-width: 0; height: 44px; }

/* Drawer */
.th-drawer { position: fixed; inset: 0; z-index: 120; }
.th-drawer[hidden] { display: none; }
.th-drawer-overlay { position: absolute; inset: 0; background: rgba(15, 16, 18, .6); }
.th-drawer-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: min(340px, 86vw);
    overflow-y: auto;
    background: var(--th-ink);
    color: var(--th-on-ink);
    padding: 12px 16px 28px;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .3);
}
.th-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--th-line-dark); }
.th-drawer-title { font-family: var(--th-font-head, "IBM Plex Sans Condensed", sans-serif); font-weight: 700; font-size: 1.1rem; letter-spacing: .05em; text-transform: uppercase; }
.th-drawer-links { list-style: none; margin: 8px 0 0; padding: 0; }
.th-drawer-links a, .th-drawer-links button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .85rem .25rem;
    border: 0;
    border-bottom: 1px solid var(--th-line-dark);
    background: none;
    color: var(--th-on-ink);
    font: inherit;
    font-size: 1.02rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.th-drawer-links form { margin: 0; }
.th-drawer-account { margin-top: 18px; }
.th-drawer-account a, .th-drawer-account button { font-size: .95rem; font-weight: 400; color: color-mix(in srgb, var(--th-on-ink) 78%, transparent); }
.th-drawer-count { min-width: 22px; height: 22px; border-radius: 11px; background: var(--th-brand); color: var(--th-on-primary, #ffffff); font-size: .75rem; font-weight: 600; display: inline-grid; place-items: center; padding: 0 6px; }

.announcement-banner {
    text-align: center;
    padding: .55rem var(--th-gutter);
    font-size: .88rem;
    font-weight: 500;
}
.announcement-banner a { color: inherit; }

@media (max-width: 1180px) {
    .th-search { display: none; }
    .th-search-btn { display: inline-grid; }
    .th-search + .th-icons { margin-left: auto; }
}

@media (max-width: 900px) {
    .th-nav { display: none; }
    .th-menu-btn { display: inline-grid; margin-left: -8px; }
    .th-header-row { height: 62px; gap: 10px; }
    .th-logo img { max-height: 40px; max-width: 170px; }
    .th-logo-text { font-size: 1.25rem; }
    .th-account .th-menu { display: none; }
}

@media (min-width: 1181px) {
    .th-search-row { display: none !important; }
}

/* ================================================================== footer */

.th-footer { background: var(--th-foot); color: var(--th-foot-text); font-size: .9rem; border-top: 1px solid var(--th-line-dark); }
.th-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding-top: 44px;
    padding-bottom: 24px;
}
.th-footer-logo { display: inline-block; color: #ffffff; text-decoration: none; margin-bottom: 12px; }
.th-footer-logo img { display: block; max-height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.th-footer-logo .th-logo-text { font-size: 1.3rem; }
.th-footer-brand p { max-width: 36ch; margin: 0; }
.th-footer h4 {
    color: color-mix(in srgb, #ffffff 70%, var(--th-foot-text));
    margin: 0 0 12px;
    font-family: var(--th-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.th-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.th-footer a { color: color-mix(in srgb, #ffffff 84%, var(--th-foot-text)); text-decoration: none; }
.th-footer a:hover { color: #ffffff; text-decoration: underline; }
.th-legal {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--th-line-dark);
    padding-top: 16px;
    font-size: .8rem;
}
.th-legal a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
    .th-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .th-footer-brand { grid-column: 1 / -1; }
}

/* Sticky mobile cart */
.th-sticky-cart {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem var(--th-gutter) calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--th-ink);
    color: var(--th-on-ink);
    font-size: .9rem;
    font-weight: 500;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
}
.th-sticky-cart .btn { padding: .6rem 1rem; font-size: .9rem; }
@media (max-width: 900px) { .th-sticky-cart.is-visible { display: flex; } }

/* ================================================================== sections */

.th-section { padding-top: clamp(44px, 6vw, 76px); padding-bottom: 0; }
.th-section:last-child { padding-bottom: clamp(44px, 6vw, 76px); }
.th-main > .th-section:last-child,
.th-main > .th-framed-section:last-child { padding-bottom: clamp(48px, 7vw, 88px); }

.th-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.th-head h2 { margin: 0; }
.th-head .th-label { margin-bottom: 6px; }
.th-head p { color: var(--th-muted); max-width: 56ch; margin: 8px 0 0; }
.th-head > a {
    color: var(--th-link);
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 1px;
    white-space: nowrap;
}
.th-head > a:hover { color: var(--th-text); }

.th-framed-section { padding-top: clamp(32px, 5vw, 64px); }

/* Classic section partials rendered inside Trailhead (text blocks, banners, testimonials…) */
.th-framed-section > section { padding-top: 0 !important; padding-bottom: 0 !important; }
.section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.section-header h2 { margin: 0; }
.product-card { transition: border-color .15s; background: var(--th-paper) !important; border-radius: var(--th-radius) !important; }
.product-card:hover { border-color: var(--th-muted) !important; }
.category-icon-card { background: var(--th-paper) !important; border-radius: var(--th-radius) !important; }
.category-icon-card:hover { border-color: var(--th-text) !important; }

/* ================================================================== hero */

.th-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(440px, 60vh, 600px);
    overflow: hidden;
    background: var(--th-ink);
    color: #ffffff;
}
.th-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.th-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%),
        linear-gradient(0deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 55%);
    pointer-events: none;
}
.th-hero-banner::after { display: none; }
.th-hero-plain { min-height: 0; align-items: center; }
.th-hero-plain::after { display: none; }
.th-hero .th-wrap { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px; }
.th-hero-plain .th-wrap { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); }
.th-hero .th-label { color: rgba(255, 255, 255, .8); }
.th-hero h1 {
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.9rem);
    line-height: 1.04;
    max-width: 17ch;
    margin: 8px 0 0;
}
.th-hero-sub { margin: 14px 0 0; font-size: 1.1rem; max-width: 50ch; color: rgba(255, 255, 255, .88); }
.th-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.th-hero-link { position: absolute; inset: 0; z-index: 2; }

/* ================================================================== trust row */

.th-trust { background: var(--th-paper); border-bottom: 1px solid var(--th-line); }
.th-trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.th-trust-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-trust-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.th-trust-1 { grid-template-columns: minmax(0, 1fr); }
.th-trust-item { padding: 16px 0; font-size: .92rem; line-height: 1.4; color: var(--th-muted); min-width: 0; }
.th-trust-item strong { display: block; color: var(--th-text); font-weight: 600; }
.th-trust-item small { display: block; font-size: inherit; }

@media (max-width: 900px) {
    .th-trust-4, .th-trust-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .th-trust-item { padding: 12px 0; }
    .th-trust-grid { padding-top: 6px; padding-bottom: 6px; }
}

/* ================================================================== shop by rig */

.th-rigs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.th-rigs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-rigs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.th-rigs-1 { grid-template-columns: minmax(0, 1fr); }
.th-rig {
    display: grid;
    gap: 2px;
    align-content: start;
    padding: 18px 18px 16px;
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    color: var(--th-text);
    text-decoration: none;
    transition: border-color .15s;
}
.th-rig:hover { border-color: var(--th-text); color: var(--th-text); }
.th-rig-make { color: var(--th-muted); font-size: .85rem; }
.th-rig h3 { font-size: 1.3rem; margin: 0; }
.th-rig-years { font-family: var(--th-mono); font-size: .85rem; color: var(--th-muted); }
.th-rig-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--th-line);
    font-weight: 600;
    font-size: .9rem;
}
.th-rig-count span:last-child { color: var(--th-link); }

@media (max-width: 900px) {
    .th-rigs, .th-rigs-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .th-rig { padding: 14px 14px 12px; }
    .th-rig h3 { font-size: 1.15rem; }
}

/* A vehicle tile with a picture (set on its category). The picture bleeds to
   the tile's edges; tiles without one get a matching blank panel so the row
   stays level. Tiles with no pictures at all keep the plain text card above. */
/* The count row sits on the tile's bottom edge, so a row of tiles lines up
   whether or not a name has a year range under it. */
.th-rig { display: flex; flex-direction: column; }
.th-rig-count { margin-top: auto; }
.th-rig > :nth-last-child(2) { margin-bottom: 12px; }
.th-rig-has-media { overflow: hidden; }
.th-rig-media {
    display: block;
    margin: -18px -18px 14px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--th-panel);
    border-bottom: 1px solid var(--th-line);
}
.th-rig-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.th-rig:hover .th-rig-media img { transform: scale(1.03); }
.th-rig-media.is-blank { display: grid; place-items: center; color: var(--th-faint); }
.th-rig-media.is-blank svg { width: 38%; max-width: 120px; height: auto; }
@media (max-width: 900px) {
    .th-rig-media { margin: -14px -14px 12px; }
}

/* ================================================================== shop page */

.th-shop-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px 24px;
    flex-wrap: wrap;
}
.th-shop-all-count {
    font-family: var(--th-mono);
    font-size: .8rem;
    font-weight: 500;
    opacity: .7;
    margin-left: 4px;
}
.th-shop-block { padding-top: clamp(24px, 3.5vw, 40px); }
.th-shop-block + .th-shop-block { margin-top: clamp(8px, 1.5vw, 16px); }

.th-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.th-cat { display: grid; gap: 8px; align-content: start; min-width: 0; }
.th-cat-link { display: grid; gap: 10px; color: var(--th-text); text-decoration: none; }
.th-cat-link:hover { color: var(--th-text); }
.th-cat-media { border: 1px solid transparent; transition: border-color .15s; }
.th-cat-link:hover .th-cat-media { border-color: var(--th-text); }
.th-cat-blank span {
    font-family: var(--th-font-head, "IBM Plex Sans Condensed", "Arial Narrow", sans-serif);
    font-size: clamp(2.6rem, 6vw, 4rem);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--th-faint);
}
.th-cat-body { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.th-cat-name {
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.2;
    min-width: 0;
    text-wrap: balance;
}
.th-cat-link:hover .th-cat-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.th-cat-count { flex-shrink: 0; font-family: var(--th-mono); font-size: .78rem; color: var(--th-muted); white-space: nowrap; }
.th-cat-subs { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--th-line); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.th-cat-subs a { font-size: .86rem; color: var(--th-muted); text-decoration: none; }
.th-cat-subs a:hover { color: var(--th-link); text-decoration: underline; }

.th-shop-foot { display: none; padding-top: 28px; }

@media (max-width: 1080px) { .th-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
    .th-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
    .th-cat-body { flex-direction: column; align-items: flex-start; gap: 2px; }
    .th-cat-name { font-size: 1.05rem; }
    .th-cat-subs { display: none; }
    .th-shop-head-row > .btn { display: none; }
    .th-shop-foot { display: block; }
    .th-shop-foot .btn { display: block; width: 100%; text-align: center; }
}

/* ================================================================== chips */

.th-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.th-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: .5rem .85rem;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    background: var(--th-paper);
    color: var(--th-text);
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
    white-space: nowrap;
}
.th-pill:hover { border-color: var(--th-text); color: var(--th-text); }
.th-pill small { color: var(--th-muted); font-family: var(--th-mono); font-size: .75rem; }
.th-pill.is-active { background: var(--th-ink); border-color: var(--th-ink); color: var(--th-on-ink); }
.th-pill.is-active small { color: color-mix(in srgb, var(--th-on-ink) 70%, transparent); }

/* ================================================================== product grid + card */

.th-grid {
    display: grid;
    grid-template-columns: repeat(var(--th-cols, 4), minmax(0, 1fr));
    gap: 24px 16px;
}
@media (max-width: 1080px) { .th-grid { grid-template-columns: repeat(min(var(--th-cols, 4), 3), minmax(0, 1fr)); } }
@media (max-width: 860px) { .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } }

/* No box: a square photo on the panel colour, then three quiet lines. */
.th-card {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
    color: var(--th-text);
    text-decoration: none;
}
.th-card:hover { color: var(--th-text); }
.th-card:hover .th-card-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.th-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--th-panel);
    border-radius: var(--th-radius);
}
/* Contained by default: a white-background cut-out melts into the panel.
   The layout's script adds .is-photo when the picture is a photo. */
.th-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
    mix-blend-mode: multiply;
}
.th-card-media.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.th-card-placeholder { width: 44px; height: 44px; color: var(--th-faint); }

.th-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .22rem .5rem;
    border-radius: var(--th-radius);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.3;
    background: var(--th-ink);
    color: var(--th-on-ink);
}
.th-tag-sale { left: auto; right: 10px; background: var(--th-brand); color: var(--th-on-primary, #ffffff); }

.th-card-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.th-card-title {
    font-family: var(--th-font, "IBM Plex Sans", sans-serif);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    margin: 0;
    text-wrap: pretty;
}
.th-price { font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.th-price s { font-weight: 400; font-size: .85rem; color: var(--th-faint); margin-right: 4px; }

@media (max-width: 520px) {
    .th-card-title { font-size: .94rem; }
    .th-card .th-fits { font-size: .72rem; }
    .th-tag { font-size: .66rem; top: 8px; left: 8px; }
    .th-tag-sale { left: auto; right: 8px; }
}

/* Stars */
.th-stars { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: .85rem; }
.th-stars-glyphs {
    letter-spacing: 1px;
    background: linear-gradient(90deg, var(--th-star) var(--th-rating, 0%), var(--th-star-off) var(--th-rating, 0%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.th-stars small { color: var(--th-muted); font-size: .8rem; }
.mi-stars { color: var(--th-star); letter-spacing: 0; }

/* ================================================================== story band */

.th-story { background: var(--th-deep); color: var(--th-on-ink); margin-top: clamp(44px, 6vw, 76px); }
.th-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding-top: clamp(44px, 6vw, 76px);
    padding-bottom: clamp(44px, 6vw, 76px);
}
.th-story-solo { grid-template-columns: minmax(0, 1fr); }
.th-story-solo > div { max-width: 780px; }
.th-story .th-label { color: color-mix(in srgb, var(--th-on-ink) 70%, transparent); }
.th-story h2 { color: inherit; margin: 8px 0 0; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.th-story p { color: color-mix(in srgb, var(--th-on-ink) 86%, transparent); margin: 12px 0 0; max-width: 48ch; }
.th-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.th-facts div { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 10px; }
.th-facts b { display: block; font-family: var(--th-font-head, "IBM Plex Sans Condensed", sans-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.th-facts small { display: block; margin-top: 2px; color: color-mix(in srgb, var(--th-on-ink) 72%, transparent); font-size: .82rem; line-height: 1.35; }
.th-story .th-ctas { margin-top: 22px; }
.th-story figure { margin: 0; border-radius: var(--th-radius); overflow: hidden; }
.th-story figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.th-story figcaption { font-family: var(--th-mono); font-size: .74rem; color: color-mix(in srgb, var(--th-on-ink) 70%, transparent); padding: 8px 0 0; }

@media (max-width: 900px) {
    .th-story-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
    .th-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* ================================================================== trip reports (blog cards) */

.th-trips { display: grid; grid-template-columns: repeat(var(--th-cols, 3), minmax(0, 1fr)); gap: 16px; }
.th-trip {
    position: relative;
    display: grid;
    align-items: end;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--th-radius);
    background: var(--th-ink);
    color: #ffffff;
    text-decoration: none;
}
.th-trip:hover { color: #ffffff; }
.th-trip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.th-trip:hover img { transform: scale(1.03); }
.th-trip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) 60%); }
.th-trip-plain::after { background: none; }
.th-trip > div { position: relative; z-index: 1; display: grid; gap: 6px; padding: 18px; }
.th-trip .th-label { color: rgba(255, 255, 255, .78); margin: 0; }
.th-trip h3 { font-size: 1.2rem; margin: 0; color: #ffffff; }

@media (max-width: 860px) {
    .th-trips { grid-template-columns: minmax(0, 1fr); }
    .th-trip { aspect-ratio: 16 / 10; }
}

/* ================================================================== newsletter strip */

.th-news { background: var(--th-paper); color: var(--th-text); border-top: 1px solid var(--th-line); border-bottom: 1px solid var(--th-line); margin-top: clamp(44px, 6vw, 76px); }
.th-news .th-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px;
}
.th-news h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0; color: inherit; }
.th-news p { margin: 4px 0 0; color: var(--th-muted); }
.th-news-form { flex: 1 1 360px; max-width: 480px; }
.th-news form { display: flex; gap: 8px; }
.th-news input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    padding: 0 14px;
    background: var(--th-white);
    color: var(--th-text);
}
.th-news .btn { height: 48px; }
.th-news-msg { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--th-radius); background: var(--th-bone); color: var(--th-text); font-size: .9rem; }
.th-news-msg[hidden] { display: none; }
.th-news-form .th-news-msg:last-child { margin: 8px 0 0; }
.th-news-msg.is-bad { color: var(--th-bad); }
.th-hp { position: absolute; left: -9999px; }

.th-main > .th-news:last-child { margin-bottom: 0; border-bottom: 0; }

@media (max-width: 520px) {
    .th-news form { flex-direction: column; }
    .th-news .btn { width: 100%; }
}

/* ================================================================== small parts */

.th-owner-note {
    margin-top: 24px;
    padding: 12px 16px;
    border: 1px dashed var(--th-brand);
    border-radius: var(--th-radius);
    background: var(--th-brand-wash);
    font-size: .9rem;
}

.th-empty, .mi-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--th-line);
    border-radius: var(--th-radius);
    background: var(--th-paper);
}
.th-empty h2, .th-empty h3, .mi-empty h2, .mi-empty h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.th-empty p, .mi-empty p { color: var(--th-muted); margin: 0 auto 1.25rem; max-width: 44ch; }
.mi-empty-frame { border: 1px dashed var(--th-line); border-radius: var(--th-radius); background: var(--th-paper); }

.th-crumbs, .mi-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .85rem;
    color: var(--th-muted);
    margin-bottom: 14px;
}
.th-crumbs a, .mi-crumbs a { color: var(--th-muted); text-decoration: none; }
.th-crumbs a:hover, .mi-crumbs a:hover { color: var(--th-text); text-decoration: underline; }
.th-crumbs span[aria-hidden], .mi-crumbs span[aria-hidden] { opacity: .5; }
.th-crumbs [aria-current] { color: var(--th-text); }

/* ================================================================== Classic vocabulary */

.card {
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
}
.card-hover { transition: box-shadow .15s, transform .15s; }
.card-hover:hover { box-shadow: var(--th-shadow); transform: translateY(-2px); }

.alert {
    padding: .85rem 1.1rem;
    border: 1px solid var(--th-line);
    border-left: 4px solid var(--th-muted);
    border-radius: var(--th-radius);
    background: var(--th-paper);
    margin-bottom: 1.25rem;
    font-size: .95rem;
}
.alert-success { border-left-color: var(--th-good); background: var(--th-good-bg); color: #1d3f24; border-color: color-mix(in srgb, var(--th-good) 30%, transparent); }
.alert-error, .alert-danger { border-left-color: var(--th-bad); background: var(--th-bad-bg); color: #6b1911; border-color: color-mix(in srgb, var(--th-bad) 30%, transparent); }
.alert-warning { border-left-color: var(--th-brand); background: var(--th-brand-wash); color: var(--th-link); }
.alert-info { border-left-color: #2f5f8a; background: #e8f0f7; color: #1c3a55; }

input, select, textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--th-text);
    background: var(--th-white);
    border: 1.5px solid var(--th-line);
    border-radius: var(--th-radius);
    padding: .65rem .8rem;
    width: 100%;
    max-width: 100%;
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--th-brand); }
input[type="file"] { padding: .5rem; background: var(--th-paper); }
input:focus, select:focus, textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--th-brand) 40%, transparent);
    outline-offset: 0;
    border-color: var(--th-brand);
}
input::placeholder, textarea::placeholder { color: var(--th-faint); }
label { font-size: .88rem; font-weight: 600; color: var(--th-text); }
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; margin-bottom: .35rem; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .75rem .75rem; text-align: left; border-bottom: 1px solid var(--th-line); }
th { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--th-muted); }

/* Classic's legal pages and contact form render inside .th-page. Classic
   collapses its inline two- and three-column grids on phones from its own
   layout; the same rules, scoped to page content, do it here. */
@media (max-width: 768px) {
    .th-page [style*="grid-template-columns: 2fr 1fr"],
    .th-page [style*="grid-template-columns: 1fr 1fr"],
    .th-page [style*="grid-template-columns: 1fr 2fr"],
    .th-page [style*="grid-template-columns: 3fr 1fr"],
    .th-page [style*="grid-template-columns: repeat(2, 1fr)"]:not(.products-grid),
    .th-page [style*="grid-template-columns: repeat(3, 1fr)"]:not(.products-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .th-page [style*="position: sticky"] { position: static !important; }
    .th-page .card table:not(.mi-table) { display: block; overflow-x: auto; }
}
.th-page > h1:first-child, .th-page > .card:first-child h1 { margin-top: 0; }
.th-page .legal-content, .th-page .policy-content { max-width: 78ch; }

/* ================================================================== MI vocabulary (inherited pages) */

.mi-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.mi-page-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0; }
.mi-page-lede { color: var(--th-muted); max-width: 62ch; margin: .75rem 0 0; }
.mi-page-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.mi-section { padding: 3rem 0; }
.mi-section-alt { background: var(--th-paper); }
.mi-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.mi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

.mi-hero {
    position: relative;
    background: var(--th-ink);
    color: #ffffff;
    padding: clamp(3.5rem, 9vw, 6.5rem) 0;
    background-size: cover;
    background-position: center;
}
.mi-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .88), rgba(10, 10, 10, .5)); }
.mi-hero > * { position: relative; z-index: 1; }
.mi-hero h1 { color: #ffffff; max-width: 18ch; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.mi-hero p { max-width: 56ch; color: rgba(255, 255, 255, .85); font-size: 1.08rem; }
.mi-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.75rem; }

.mi-panel {
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    padding: clamp(1.1rem, 2.4vw, 1.5rem);
}
.mi-panel-flat { box-shadow: none; }
.mi-panel-alt { background: var(--th-bone); }
.mi-panel-title {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--th-muted);
    margin: 0 0 1rem;
}

.mi-sticky { position: sticky; top: 96px; }
.mi-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 2rem; align-items: start; }
.mi-split-rail { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; align-items: start; }

.mi-rail { display: grid; gap: 1rem; }
.mi-rail ul { list-style: none; margin: 0; padding: 0; }
.mi-rail a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .6rem;
    border-radius: var(--th-radius);
    color: var(--th-text);
    font-size: .93rem;
    text-decoration: none;
}
.mi-rail a:hover { background: var(--th-bone); color: var(--th-text); }
.mi-rail a.is-active { background: var(--th-text); color: var(--th-bone); font-weight: 600; }
.mi-rail a.is-active .mi-rail-count { color: color-mix(in srgb, var(--th-bone) 70%, transparent); }
.mi-rail-count { color: var(--th-faint); font-family: var(--th-mono); font-size: .75rem; }
/* .mi-rail ul resets margins, so the sub-list needs the extra class to indent. */
.mi-rail .mi-rail-sub { margin: 2px 0 6px .75rem; padding-left: .35rem; border-left: 1px solid var(--th-line); }
.mi-rail-sub a { font-size: .87rem; color: var(--th-muted); }

/* Category tree: parents read as headings, children fold under a toggle. */
.th-rail-row { display: flex; align-items: center; gap: 2px; }
.th-rail-row > a { flex: 1; min-width: 0; }
.th-rail-parent { font-weight: 600; }
.th-rail-toggle {
    flex: none; display: inline-grid; place-items: center;
    width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--th-radius);
    background: none; color: var(--th-muted); cursor: pointer;
}
.th-rail-toggle:hover { background: var(--th-bone); color: var(--th-text); }
.th-rail-toggle svg { transition: transform .15s ease; }
.th-rail-group.is-open > .th-rail-row .th-rail-toggle svg { transform: rotate(180deg); }
.th-rail-group:not(.is-open) > .mi-rail-sub { display: none; }

.mi-prose, .th-prose { font-size: 1.04rem; line-height: 1.75; color: var(--th-text); }
.mi-prose > *:first-child, .th-prose > *:first-child { margin-top: 0; }
.mi-prose > *:last-child, .th-prose > *:last-child { margin-bottom: 0; }
.mi-prose h2, .th-prose h2 { font-size: 1.6rem; margin: 2.2rem 0 .7rem; }
.mi-prose h3, .th-prose h3 { font-size: 1.25rem; margin: 1.8rem 0 .55rem; }
.mi-prose h4, .th-prose h4 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.mi-prose p, .mi-prose ul, .mi-prose ol, .th-prose p, .th-prose ul, .th-prose ol { margin: 0 0 1.1rem; }
.mi-prose ul, .mi-prose ol, .th-prose ul, .th-prose ol { padding-left: 1.35rem; }
.mi-prose li, .th-prose li { margin-bottom: .35rem; }
.mi-prose a, .th-prose a { color: var(--th-link); text-decoration: underline; }
.mi-prose img, .th-prose img { border-radius: var(--th-radius); display: block; margin: 1.5rem 0; }
.mi-prose blockquote, .th-prose blockquote {
    margin: 1.75rem 0;
    padding: .2rem 0 .2rem 1.25rem;
    border-left: 3px solid var(--th-brand);
    color: var(--th-muted);
    font-size: 1.1rem;
}
.mi-prose code, .th-prose code { background: var(--th-bone); padding: .1rem .35rem; border-radius: var(--th-radius); font-family: var(--th-mono); font-size: .9em; }
.mi-prose pre, .th-prose pre { background: var(--th-ink); color: #ffffff; padding: 1.1rem; border-radius: var(--th-radius); overflow-x: auto; }
.mi-prose pre code, .th-prose pre code { background: none; color: inherit; padding: 0; }
.mi-prose hr, .th-prose hr { margin: 2.2rem 0; }
.mi-prose table, .th-prose table { margin-bottom: 1.25rem; display: block; overflow-x: auto; }
.mi-prose iframe, .th-prose iframe { max-width: 100%; }

.mi-meta { display: grid; gap: .6rem; margin: 0; }
.mi-meta-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mi-meta-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--th-faint); }
.mi-meta-value { font-size: .95rem; font-weight: 600; text-align: right; }
.mi-meta-total { border-top: 1px solid var(--th-line); padding-top: .85rem; margin-top: .35rem; }
.mi-meta-total .mi-meta-label { color: var(--th-text); font-size: .8rem; }
.mi-meta-total .mi-meta-value { font-family: var(--th-font-head, "IBM Plex Sans Condensed", sans-serif); font-size: 1.5rem; font-weight: 700; color: var(--th-text); }

.mi-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .5rem;
    border-radius: var(--th-radius);
    border: 1px solid transparent;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--th-bone);
    color: var(--th-muted);
}
.mi-status-ok { background: var(--th-good-bg); color: var(--th-good); }
.mi-status-warn { background: var(--th-brand-wash); color: var(--th-link); }
.mi-status-info { background: #e8f0f7; color: #2f5f8a; }
.mi-status-bad { background: var(--th-bad-bg); color: var(--th-bad); }
.mi-status-muted { background: var(--th-bone); color: var(--th-muted); }
.mi-status-solid { background: var(--th-brand); color: var(--th-on-primary, #ffffff); }

.mi-table { border: 1px solid var(--th-line); border-radius: var(--th-radius); overflow: hidden; background: var(--th-paper); border-collapse: separate; border-spacing: 0; }
.mi-table th { background: var(--th-bone); white-space: nowrap; }
.mi-table tbody tr:hover { background: color-mix(in srgb, var(--th-bone) 55%, transparent); }
.mi-table tbody tr:last-child td { border-bottom: 0; }
.mi-table td { vertical-align: top; }
.mi-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

@media (max-width: 700px) {
    .mi-table-stack thead { display: none; }
    .mi-table-stack tbody tr { display: block; border-bottom: 1px solid var(--th-line); padding: .85rem .75rem; }
    .mi-table-stack tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem 0; text-align: left; }
    .mi-table-stack tbody td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--th-faint);
    }
    .mi-table-stack .mi-num { text-align: right; }
}

.mi-field { display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.mi-field-error { color: var(--th-bad); font-size: .82rem; }
.mi-field input[aria-invalid="true"], .mi-field .is-invalid { border-color: var(--th-bad); }
.mi-field-hint { color: var(--th-muted); font-size: .82rem; }
.mi-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.25rem; }
.mi-req { color: var(--th-bad); }
.mi-optional { color: var(--th-faint); font-weight: 400; }

.mi-note { color: var(--th-muted); font-size: .88rem; }
.mi-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.mi-tag {
    display: inline-block;
    padding: .22rem .6rem;
    border: 1.5px solid var(--th-line);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--th-muted);
    text-decoration: none;
}
a.mi-tag:hover { border-color: var(--th-text); color: var(--th-text); }

.mi-badge { position: absolute; top: 10px; left: 10px; padding: .25rem .5rem; border-radius: var(--th-radius); background: var(--th-brand); color: var(--th-on-primary, #ffffff); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mi-badge-soon { background: var(--th-ink); color: var(--th-brand); }

.mi-back { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--th-text); text-decoration: none; }
.mi-back:hover { color: var(--th-link); }

.hover-text-primary:hover { color: var(--th-link) !important; }
.hover-opacity-80:hover { opacity: .85; }

/* Pagination — the vendor view sets inline colours, so these need !important. */
nav[aria-label="Pagination"] { border-top: 1px solid var(--th-line); }
.pagination-info { color: var(--th-muted) !important; font-size: .82rem !important; }
.page-btn { border-radius: var(--th-radius) !important; font-size: .88rem !important; }
a.page-btn { border-color: var(--th-line) !important; color: var(--th-text) !important; background: var(--th-paper) !important; text-decoration: none; }
a.page-btn:hover { border-color: var(--th-text) !important; }
.page-num-current { background: var(--th-text) !important; border: 1px solid var(--th-text) !important; color: var(--th-bone) !important; }

@media (max-width: 1000px) {
    .mi-split, .mi-split-rail { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .mi-sticky { position: static; }
}

/* Status pages (partials/status) */
.mi-status-page { max-width: 640px; margin: clamp(1rem, 4vw, 3rem) auto; }
.mi-status-card { text-align: center; padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem); position: relative; overflow: hidden; }
.mi-status-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--th-muted); }
.mi-status-card-ok::before { background: var(--th-good); }
.mi-status-card-info::before { background: #2f5f8a; }
.mi-status-card-warn::before { background: var(--th-brand); }
.mi-status-card-bad::before { background: var(--th-bad); }
.mi-status-mark {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: var(--th-muted);
}
.mi-status-card-ok .mi-status-mark { background: var(--th-good); }
.mi-status-card-info .mi-status-mark { background: #2f5f8a; }
.mi-status-card-warn .mi-status-mark { background: var(--th-brand); color: var(--th-on-primary, #ffffff); }
.mi-status-card-bad .mi-status-mark { background: var(--th-bad); }
.mi-status-title { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: 0 0 .75rem; }
.mi-status-text { color: var(--th-muted); font-size: 1.04rem; margin: 0 auto; max-width: 46ch; }
.mi-status-text p:last-child { margin-bottom: 0; }
.mi-status-facts { text-align: left; margin: 1.75rem 0 0; padding: 1.1rem 1.25rem; background: var(--th-bone); border-radius: var(--th-radius); }
.mi-status-note { margin: 1.25rem 0 0; font-size: .9rem; color: var(--th-muted); }
.mi-status-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
@media (max-width: 520px) { .mi-status-actions .btn { width: 100%; } }

/* ================================================================== page header (listing / blog / pages) */

.th-page-head { margin-bottom: 22px; }
.th-page-head h1 { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); }
.th-page-head p { color: var(--th-muted); margin: 10px 0 0; max-width: 62ch; }
.th-page-head .th-count { font-family: var(--th-mono); font-size: .85rem; color: var(--th-faint); margin-left: 6px; font-weight: 500; letter-spacing: 0; }

/* ================================================================== products index */


.th-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    margin-bottom: 20px;
    border-top: 1px solid var(--th-line);
    border-bottom: 1px solid var(--th-line);
}
.th-toolbar-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.th-toolbar-search form { display: flex; gap: 6px; align-items: center; }
.th-toolbar-search input[type="text"] { height: 42px; padding: 0 12px; }
.th-toolbar-search .btn { height: 42px; padding: 0 14px; font-size: .9rem; }
.th-toolbar-clear { font-size: .85rem; white-space: nowrap; }
.th-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.th-toolbar select { width: auto; height: 42px; padding: 0 2rem 0 .75rem; font-size: .9rem; }
.th-toolbar .filter-toggle { height: 42px; padding: 0 14px; font-size: .9rem; }
.th-result-count { font-size: .88rem; color: var(--th-muted); white-space: nowrap; }
.grid-switcher { display: flex; gap: 4px; align-items: center; }
.grid-switcher button { height: 32px; }

#search-results {
    border: 1px solid var(--th-line) !important;
    border-radius: var(--th-radius) !important;
    box-shadow: var(--th-shadow) !important;
    background: var(--th-paper) !important;
    margin-top: 4px;
}

/* Catalogue: a sticky left category menu beside the toolbar and grid (desktop).
   On phones the menu is hidden and .th-menu-toggle opens it in the filter drawer. */
.th-shop { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.th-shop-main { min-width: 0; }
.products-sidebar.th-shop-menu { display: grid; gap: 0; }
.th-shop-menu .mi-panel { background: none; border: 0; border-radius: 0; padding: 0 0 18px; }
.th-shop-menu .mi-panel + .mi-panel { border-top: 1px solid var(--th-line); padding-top: 18px; }
.th-shop-menu .mi-panel-title { font-family: var(--th-mono); font-size: .72rem; margin-bottom: .6rem; }
.th-shop-menu a { padding: .38rem .6rem .38rem .7rem; border-radius: 0; border-left: 2px solid transparent; font-size: .92rem; }
.th-shop-menu a:hover { background: none; border-left-color: var(--th-line-strong, var(--th-line)); }
.th-shop-menu a.is-active { background: none; color: var(--th-text); font-weight: 600; border-left-color: var(--th-link, var(--primary-color)); }
.th-shop-menu a.is-active .mi-rail-count { color: var(--th-muted); }
.th-shop-menu .mi-rail-sub { margin-left: .7rem; }
.th-shop-menu .th-rail-toggle { width: 30px; height: 30px; }
.th-shop-menu-years { color: var(--th-faint); font-family: var(--th-mono); font-size: .72rem; margin-left: 4px; }
.th-shop-menu .th-price-actions .btn { font-size: .85rem; }
.th-menu-toggle { display: none; }
@media (max-width: 960px) {
    .th-shop { grid-template-columns: minmax(0, 1fr); }
    .products-sidebar.th-shop-menu { display: none; }
    .th-menu-toggle { display: inline-flex; }
}
.filter-drawer { display: none; }
.filter-drawer[data-open] { display: block; position: fixed; inset: 0; z-index: 130; }
.filter-drawer-overlay { position: absolute; inset: 0; background: rgba(10, 10, 10, .55); }
.filter-drawer-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(380px, 90vw);
    overflow-y: auto;
    background: var(--th-bone);
    padding: 20px;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .25);
}
.filter-drawer-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 40px; height: 40px;
    border: 0; border-radius: var(--th-radius);
    background: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--th-text);
}
.filter-drawer-panel .mi-panel + .mi-panel { margin-top: 12px; }
.th-price-filter { display: flex; gap: .5rem; align-items: center; }
.th-price-filter input { padding: .5rem .6rem; font-size: .9rem; }
.th-price-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.th-price-actions .btn { flex: 1; padding: .55rem .75rem; font-size: .88rem; }

.products-grid { display: grid; gap: 16px; }
@media (max-width: 1080px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) {
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    .grid-switcher { display: none !important; }
    .th-toolbar-search { max-width: none; flex-basis: 100%; }
    .th-toolbar-right { margin-left: 0; width: 100%; justify-content: space-between; }
}

.category-content-block { margin-bottom: 22px; }
.category-content-block img { border-radius: var(--th-radius); }
.category-content-block p { color: var(--th-muted); }
@media (max-width: 860px) { .category-content-block > div { grid-template-columns: minmax(0, 1fr) !important; } }

/* ================================================================== product page */

/* Full-bleed paper band without overflow: the colour extends sideways as a
   spread shadow (a second, 1px-lower shadow draws the bottom rule) and
   clip-path trims it vertically. */
.th-pdp-band {
    background: var(--th-paper);
    box-shadow: 0 0 0 100vmax var(--th-paper), 0 1px 0 100vmax var(--th-line);
    clip-path: inset(0 -100vmax -1px);
    padding-top: clamp(18px, 3vw, 28px);
    padding-bottom: clamp(28px, 5vw, 56px);
}
.th-page:has(> .th-pdp-band:first-child) { padding-top: 0; }
.th-pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

/* Gallery: the main image at 4:3 across the column, the other pictures as
   squares beneath it. Cut-outs are contained on the panel colour, photos fill
   (the layout's script adds .is-photo). */
.th-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
@media (min-width: 901px) { .th-gallery { position: sticky; top: 96px; } }
/* The panel sits on a wrapper so a cut-out's white multiplies into it. */
.th-gallery-main, .th-thumb {
    display: block;
    overflow: hidden;
    background: var(--th-panel);
    border-radius: var(--th-radius);
}
.th-gallery .main-image,
.th-gallery .thumbnail {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.th-gallery .main-image { aspect-ratio: 4 / 3; padding: 6%; cursor: zoom-in; }
.th-gallery .thumbnail { aspect-ratio: 1 / 1; padding: 10%; cursor: pointer; }
.th-gallery .main-image.is-photo,
.th-gallery .thumbnail.is-photo { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.th-gallery .thumbnail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.th-gallery-2 .thumbnail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.th-gallery-3 .thumbnail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.th-thumb { position: relative; }
.th-thumb::after { content: ""; position: absolute; inset: 0; border: 1.5px solid transparent; border-radius: inherit; pointer-events: none; transition: border-color .15s; }
.th-thumb:hover::after { border-color: var(--th-muted); }
.th-thumb:has(.active)::after { border-color: var(--th-text); }
.th-gallery-main { position: relative; }
.th-gallery-count { display: none; }
.th-gallery-empty { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--th-panel); border-radius: var(--th-radius); color: var(--th-faint); }
.th-gallery-empty svg { width: 64px; height: 64px; }

.th-buy { display: grid; gap: 14px; align-content: start; min-width: 0; }
.th-buy > * { margin: 0; }
.th-buy .th-fits {
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.5;
}
.th-buy-title { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.th-buy h1, .product-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0; flex: 1 1 auto; }
.th-edit-link { flex-shrink: 0; font-size: .75rem; font-weight: 600; padding: .25rem .55rem; border-radius: var(--th-radius); background: var(--th-paper); color: var(--th-muted); text-decoration: none; border: 1px solid var(--th-line); }
.th-rating { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: .92rem; color: var(--th-muted); }
.th-rating .th-stars { font-size: .95rem; }
.th-rating b { color: var(--th-text); font-weight: 600; }
.th-rating a { color: var(--th-muted); text-decoration: none; }
.th-rating a:hover { color: var(--th-text); text-decoration: underline; }
.th-by { color: var(--th-muted); }

.th-buy-price .product-price { font-size: 1.8rem; font-weight: 600; line-height: 1.1; color: var(--th-text); font-variant-numeric: tabular-nums; }
.th-buy-price s { color: var(--th-faint); font-size: 1.1rem; font-weight: 400; margin-right: 6px; }
.th-price-badge { display: inline-block; vertical-align: middle; margin-left: 6px; padding: .2rem .5rem; border-radius: var(--th-radius); font-size: .75rem; font-weight: 600; color: #ffffff; }
.th-save { display: inline-block; padding: .2rem .5rem; border-radius: var(--th-radius); background: var(--th-brand); color: var(--th-on-primary, #ffffff); font-size: .75rem; font-weight: 600; margin-left: 6px; vertical-align: middle; }
.th-unit { font-size: .88rem; color: var(--th-muted); margin-top: 4px; }
.th-short { color: var(--th-muted); font-size: 1.02rem; }

/* Status: a note with a brand-colour rule down its left edge. */
.th-status {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--th-brand);
    font-size: .95rem;
}
.th-status b { font-weight: 600; }
.th-status span { color: var(--th-muted); }

#add-to-cart-form { margin: 0; }
#add-to-cart-btn { width: 100%; padding: 1rem; font-size: 1.05rem; }
.th-qty { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.th-qty input { width: 90px; text-align: center; }
.th-qty-rules { font-size: .85rem; color: var(--th-muted); margin: 0 0 .75rem; }

.variant-option-btn { border-radius: var(--th-radius) !important; border-width: 1px !important; background: var(--th-white) !important; font-weight: 500; }
.variant-option-btn:hover { border-color: var(--th-text) !important; }
.variant-option-btn.selected { border-color: var(--th-text) !important; box-shadow: inset 0 0 0 1px var(--th-text); }
.variant-option-btn[style*="border-radius: 50%"] { border-radius: 50% !important; }
.variant-option-btn.unavailable { opacity: .4; text-decoration: line-through; }
#variant-selector label { font-family: var(--th-mono); font-size: .72rem !important; font-weight: 500 !important; letter-spacing: .1em !important; color: var(--th-muted); }
#variant-price-display { background: var(--th-bone) !important; border: 1px solid var(--th-line); border-radius: var(--th-radius) !important; }

/* Notify me: an email field and the main button, nothing boxed around them. */
.th-notify { display: grid; gap: 8px; }
.th-notify h3 { font-family: var(--th-font, "IBM Plex Sans", sans-serif); font-size: .95rem; font-weight: 600; letter-spacing: 0; margin: 0; }
.th-notify p { font-size: .9rem; color: var(--th-muted); margin: 0; }
.th-notify form { margin: 0; }
.th-notify-row { display: flex; gap: 8px; }
.th-notify-row input { flex: 1; min-width: 0; height: 48px; }
.th-notify-row .btn { height: 48px; flex-shrink: 0; }
.th-notify-more { margin-top: 8px; font-size: .88rem; }
.th-notify-more summary { cursor: pointer; color: var(--th-muted); }
.th-notify-more[open] > div { display: grid; gap: 8px; margin-top: 8px; }

.th-bto-box {
    padding: 4px 0 4px 12px;
    border-left: 3px solid var(--th-brand);
    font-size: .95rem;
}
.th-bto-box strong { font-weight: 600; }
.th-bto-box p { margin: 4px 0 0; color: var(--th-muted); font-size: .9rem; }
.th-bto-meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.th-bto-slots { margin-left: auto; font-family: var(--th-mono); font-size: .76rem; color: var(--th-muted); }
.th-queue { padding: 10px 14px; border-radius: var(--th-radius); font-size: .88rem; }
.th-queue-block { background: var(--th-bad-bg); color: var(--th-bad); }
.th-queue-warn { background: var(--th-brand-wash); color: var(--th-link); }
.th-queue p { margin: 4px 0 0; }

.th-custom-files { padding: 12px 14px; border-radius: var(--th-radius); background: var(--th-bone); border: 1px solid var(--th-line); font-size: .9rem; }
.th-custom-files p { margin: 4px 0 0; font-size: .85rem; color: var(--th-muted); }

/* Spec list: two columns of label / value rows on hairlines. */
.specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    margin: 0;
    border-top: 1px solid var(--th-line);
}
.specs > div { padding: 10px 0; border-bottom: 1px solid var(--th-line); min-width: 0; font-size: .92rem; }
.specs dt { font-size: .8rem; color: var(--th-muted); }
.specs dd { margin: 1px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.specs dd a { color: var(--th-text); }
.specs dd a:hover { color: var(--th-link); }
.specs dd .th-mono { font-family: var(--th-mono); font-weight: 500; font-size: .88rem; }

/* One short excerpt from the best review. */
.th-buy-review { margin: 0; padding-top: 2px; font-size: .95rem; }
.th-buy-review blockquote { margin: 0; }
.th-buy-review blockquote::before { content: "\201C"; }
.th-buy-review blockquote::after { content: "\201D"; }
.th-buy-review figcaption { margin-top: 4px; font-size: .85rem; color: var(--th-muted); }

.th-assure { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; color: var(--th-muted); }
.th-assure li { display: flex; gap: 8px; align-items: center; }
.th-assure svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--th-muted); }

.th-share { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--th-muted); }
.th-share a, .th-share button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--th-radius);
    border: 1px solid var(--th-line);
    background: var(--th-paper);
    color: var(--th-text);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.th-share a:hover, .th-share button:hover { border-color: var(--th-text); }
.th-share svg { width: 14px; height: 14px; }

.th-pdp-section { padding-top: clamp(36px, 5vw, 64px); }
.th-pdp-section:first-child { padding-top: 0; }
.th-description { max-width: 78ch; }
.product-description { font-size: 1.03rem; line-height: 1.75; }
.product-description h1, .product-description h2, .product-description h3 { margin: 1.6rem 0 .6rem; }
.product-description ul, .product-description ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.product-description img { border-radius: var(--th-radius); }
.product-description table { display: block; overflow-x: auto; }
.product-description iframe { max-width: 100%; }

.th-license { background: var(--th-paper); border: 1px solid var(--th-line); border-radius: var(--th-radius); padding: 1.25rem; }
.th-license h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; font-size: 1.2rem; }

/* Lightbox — structural: the scripts toggle .active */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.lightbox.active { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, .94); z-index: -1; }
.lightbox img { max-width: 86%; max-height: 86%; object-fit: contain; z-index: 1; border-radius: var(--th-radius); }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; color: #fff; font-size: 2.2rem; cursor: pointer; z-index: 2; background: none; border: none; padding: .5rem; line-height: 1; }
.lightbox-close:hover { color: var(--th-brand); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    padding: 0;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 2;
}
.lightbox-nav:hover { background: var(--th-brand); border-color: var(--th-brand); color: var(--th-on-primary, #ffffff); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-counter { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: .82rem; z-index: 2; background: rgba(0, 0, 0, .55); padding: .4rem .9rem; border-radius: 999px; font-family: var(--th-mono); }

@media (max-width: 900px) {
    .th-pdp { grid-template-columns: minmax(0, 1fr); }
    /* Phones: one photo you swipe, and the thumbnails as a single strip, so the
       name, price and Add to Cart are close to the first screen (Max, 2026-09-30). */
    .th-gallery .main-image { touch-action: pan-y; }
    .th-gallery-count {
        display: block; position: absolute; right: 10px; bottom: 10px;
        padding: 3px 9px; border-radius: 999px;
        background: rgba(17, 18, 20, .62); color: #fff;
        font: 500 .72rem var(--th-mono); font-variant-numeric: tabular-nums; pointer-events: none;
    }
    .th-gallery .thumbnail-grid,
    .th-gallery-2 .thumbnail-grid,
    .th-gallery-3 .thumbnail-grid {
        display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px;
    }
    .th-gallery .thumbnail-grid::-webkit-scrollbar { display: none; }
    .th-gallery .thumbnail-grid .th-thumb { flex: 0 0 60px; scroll-snap-align: start; }
}
@media (max-width: 560px) {
    .specs { grid-template-columns: minmax(0, 1fr); }
    .th-buy-price .product-price { font-size: 1.65rem; }
    .lightbox img { max-width: 94%; }
    .lightbox-nav { width: 40px; height: 40px; }
}

/* ================================================================== reviews */

.th-reviews-top { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.th-score { background: var(--th-ink); color: var(--th-on-ink); border-radius: var(--th-radius); padding: 22px; display: grid; gap: 6px; --th-star: var(--th-on-ink); }
.th-score b { font-family: var(--th-font-head, "IBM Plex Sans Condensed", sans-serif); font-size: 3rem; line-height: 1; font-weight: 700; }
.th-score .th-stars { font-size: 1.1rem; }
.th-score .th-stars-glyphs { --th-star-off: rgba(255, 255, 255, .22); }
.th-score small { color: rgba(255, 255, 255, .65); font-size: .88rem; }
.th-score-empty b { font-size: 1.4rem; }
.th-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.th-photos .review-photo-thumb { cursor: pointer; line-height: 0; }
.th-photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--th-radius); }
.th-photos-more { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--th-radius); background: var(--th-paper); border: 1px solid var(--th-line); color: var(--th-muted); font-weight: 600; text-decoration: none; }
.th-review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.th-review {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 18px;
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
    min-width: 0;
}
.th-review h3 { font-size: 1rem; margin: 0; }
.th-review p { font-size: .96rem; margin: 0; overflow-wrap: anywhere; }
.th-review footer { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .82rem; color: var(--th-muted); }
.th-verified { color: var(--th-good); font-weight: 600; }
.th-review-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.th-review-thumbs .review-photo-thumb { cursor: pointer; line-height: 0; }
.th-review-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--th-radius); border: 1px solid var(--th-line); }
.th-review-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.th-review-tools select { width: auto; height: 40px; padding: 0 2rem 0 .75rem; font-size: .9rem; }
.th-review-form { background: var(--th-paper); border: 1px solid var(--th-line); border-radius: var(--th-radius); padding: 20px; }
.th-review-form h3 { margin-bottom: .5rem; }
.th-review-form .form-group label { display: block; margin-bottom: .35rem; }
.rating-star { font-size: 1.7rem; color: var(--th-star-off); cursor: pointer; }
.th-review-invite { padding: 14px 16px; border: 1px dashed var(--th-line); border-radius: var(--th-radius); font-size: .95rem; color: var(--th-muted); }
.th-review-invite a { font-weight: 600; }
.th-review-done { padding: 12px 14px; border-radius: var(--th-radius); background: var(--th-good-bg); color: var(--th-good); font-size: .92rem; }
.th-see-all { margin-top: 16px; }

@media (max-width: 900px) {
    .th-reviews-top { grid-template-columns: minmax(0, 1fr); }
    .th-review-list { grid-template-columns: minmax(0, 1fr); }
    .th-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================================================================== cart */

.th-cart-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.th-cart-items { display: grid; gap: 12px; }
.th-cart-item {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 16px;
    background: var(--th-paper);
    border: 1px solid var(--th-line);
    border-radius: var(--th-radius);
}
.th-cart-thumb { width: 112px; height: 112px; border-radius: var(--th-radius); overflow: hidden; background: var(--th-white); border: 1px solid var(--th-line); display: grid; place-items: center; }
.th-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.th-cart-thumb canvas { width: 100%; height: 100%; }
.th-cart-info { min-width: 0; display: grid; gap: 4px; align-content: start; }
.th-cart-info h3 { font-size: 1.05rem; margin: 0; }
.th-cart-info h3 a { color: var(--th-text); text-decoration: none; }
.th-cart-info h3 a:hover { text-decoration: underline; }
.th-cart-meta { font-size: .85rem; color: var(--th-muted); margin: 0; }
.th-cart-price { font-weight: 600; font-size: 1.1rem; margin: 2px 0 0; }
.th-cart-price s { font-weight: 500; font-size: .85rem; color: var(--th-faint); margin-right: 4px; }
.th-cart-price .th-price-badge, .th-cart-price .th-quote-badge { font-size: .65rem; }
.th-quote-badge { display: inline-block; padding: .15rem .4rem; border-radius: var(--th-radius); background: #2f5f8a; color: #fff; font-weight: 600; vertical-align: middle; }
.th-cart-qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.th-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--th-line); border-radius: var(--th-radius); overflow: hidden; background: var(--th-white); }
.th-stepper button { width: 36px; height: 36px; border: 0; background: var(--th-bone); color: var(--th-text); font-size: 1.15rem; cursor: pointer; }
.th-stepper button:hover { background: var(--th-line); }
.th-stepper input { width: 54px; height: 36px; border: 0; border-radius: 0; text-align: center; padding: 0; font-weight: 600; -moz-appearance: textfield; }
.th-stepper input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--th-brand); }
.th-line-total { font-size: .9rem; color: var(--th-muted); }
.th-cart-side { display: grid; justify-items: end; align-content: space-between; gap: 8px; }
.th-remove { background: none; border: 0; padding: .25rem 0; color: var(--th-muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.th-remove:hover { color: var(--th-bad); }
.th-cart-item .customization-files-section { grid-column: 2 / -1; }
.th-cart-item .bto-reservation-timer { grid-column: 2 / -1; }
.th-cart-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.th-cart-actions form { margin: 0; }

.th-summary { background: var(--th-paper); border: 1px solid var(--th-line); border-radius: var(--th-radius); padding: 20px; position: sticky; top: 96px; }
.th-summary h2 { font-size: 1.2rem; margin: 0 0 14px; }
.th-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: .95rem; }
.th-summary-save { color: var(--th-good); }
.th-summary-total { border-top: 1px solid var(--th-line); margin-top: 6px; padding-top: 14px; font-size: 1.2rem; font-weight: 600; }
.th-summary .btn { width: 100%; margin-top: 16px; padding: 1rem; font-size: 1.05rem; }
.th-summary-note { margin: 12px 0 0; font-size: .85rem; color: var(--th-muted); display: flex; gap: 8px; align-items: center; }
.th-summary-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--th-good); }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
    .th-cart-layout { grid-template-columns: minmax(0, 1fr); }
    .th-summary { position: static; }
}
@media (max-width: 560px) {
    .th-cart-item { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .th-cart-thumb { width: 84px; height: 84px; }
    .th-cart-side { grid-column: 1 / -1; grid-row: auto; display: flex; justify-content: space-between; align-items: center; }
    .th-cart-item .customization-files-section, .th-cart-item .bto-reservation-timer { grid-column: 1 / -1; }
}

/* ================================================================== blog */

.th-blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.th-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.th-blog-grid .th-trip { aspect-ratio: 4 / 3.4; }
.th-blog-grid .th-trip-feature { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.th-blog-grid .th-trip-feature h3 { font-size: clamp(1.4rem, 3vw, 2rem); max-width: 26ch; }
.th-trip-excerpt { font-size: .92rem; color: rgba(255, 255, 255, .85); margin: 0; max-width: 60ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.th-blog-side { display: grid; gap: 14px; }
.th-blog-side .mi-panel ul { list-style: none; margin: 0; padding: 0; }
.th-recent { display: grid; gap: 10px; }
.th-recent li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--th-line); }
.th-recent li:last-child { border-bottom: 0; padding-bottom: 0; }
.th-recent a { display: block; padding: 0; background: none; color: var(--th-text); font-weight: 600; font-size: .93rem; text-decoration: none; line-height: 1.35; }
.th-recent a:hover { background: none; color: var(--th-link); }
.th-recent a:hover { text-decoration: underline; }

.th-article { max-width: 760px; }
.th-article-hero { position: relative; border-radius: var(--th-radius); overflow: hidden; margin-bottom: 28px; background: var(--th-ink); }
.th-article-hero img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.th-article-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; color: var(--th-muted); margin-bottom: 10px; }
.th-article-meta a { color: var(--th-link); font-weight: 600; text-decoration: none; }
.th-article-meta span[aria-hidden] { opacity: .45; }
.th-article h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 0 0 18px; }
.th-author { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: .92rem; }
.th-author-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--th-ink); color: var(--th-on-ink); font-weight: 600; }
.th-article-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--th-line); }
.th-related { margin-top: 48px; }
.th-related .th-trips { --th-cols: 3; }
.th-related .th-trip { aspect-ratio: 4 / 4.2; }

@media (max-width: 900px) {
    .th-blog-layout { grid-template-columns: minmax(0, 1fr); }
    .th-blog-grid { grid-template-columns: minmax(0, 1fr); }
    .th-blog-grid .th-trip, .th-blog-grid .th-trip-feature { aspect-ratio: 16 / 11; }
}

/* ================================================================== custom pages */

.th-custom-page .th-prose { max-width: 76ch; }
.th-custom-page > .th-page-head { max-width: 76ch; }

/* ================================================================== print / motion */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; }
}

@media print {
    .th-util, .th-header, .th-footer, .th-sticky-cart, .th-drawer, .announcement-banner { display: none !important; }
    body { background: #ffffff; }
}
.th-review-form-wrap { margin-top: 14px; }
.th-reviews-top > div:last-child > .th-review-form-wrap:first-child { margin-top: 0; }