/* Triple Cue Billiards design system (Phase 3a).
   The only stylesheet of the public site: since T4 every page links site.css alone; the three legacy
   stylesheets are deleted. Components use the tc- prefix. */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
/* T17: the TRIPLE CUE wordmark uses a Newsreader subset with only the wordmark letters (A B C D E I L P R S T U and the
   space; same outlines, axes and kerning), preloaded on every page; the full Newsreader file is only a fallback, loaded
   only if the wordmark's text ever uses another letter (no page preloads it since T4). */
@font-face{font-family:'Newsreader Wordmark';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-wordmark.woff2?v=135cdf02a37d) format('woff2');unicode-range:U+0020,U+0041-0045,U+0049,U+004C,U+0050,U+0052-0055}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-var.woff2?v=3100e775e861) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-latin-var.woff2?v=6e4f2958c3a7) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- Tokens ---------- */
:root{
 color-scheme:light;
 --bg:#FAF9F6;            /* 3c.3: a cleaner warm white (was the cream #F7F4EE) */
 --surface:#FFFFFF;
 --surface-2:#F1EFEA;
 --text:#1C1C1A;
 --muted:#5E5A52;
 --line:#E5E1D9;
 --line-strong:#CDBFA6;
 --green:#1F4B39;
 --green-hover:#183D2E;
 --green-deep:#173A2C;
 --green-bright:#2C6A51;
 --on-green:#F7F4EE;
 --gold:#977637;          /* 3c.3: gold only for the active-nav underline, the selected thumbnail and the focus ring */
 --eyebrow:#1F4B39;       /* eyebrow labels: 9.4:1 on --bg, 9.9:1 on --surface */
 --gold-text:#7F6128;     /* gold eyebrow text on light surfaces: >=4.5:1 */
 --gold-on-dark:#D2B270;  /* gold on photos, green badges and the quote band */
 --badge-bg:#1F4B39;
 --header-bg:var(--bg);
 --footer-bg:#161615;
 --footer-text:#E9E4DA;
 --footer-muted:#ADA79B;
 --shadow:0 1px 2px rgba(28,28,26,.04),0 8px 24px rgba(28,28,26,.06);
 --shadow-hover:0 2px 4px rgba(28,28,26,.05),0 14px 32px rgba(28,28,26,.09);
 --focus:var(--gold);
 --dock-shadow:var(--shadow-hover);
 --field-bg:#FFFFFF;
 --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
 --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 --radius:10px;           /* 3c.3: one radius for buttons, inputs, tiles and images */
 --radius-card:10px;
 /* Responsive system (3a.2): gutter, stepped content width, type and section spacing all grow with the viewport. */
 --gutter:clamp(16px,4vw,72px);
 --container:1200px;
 --measure:68ch;
 --section-y:56px;
 --body-size:17px;
 --h1:clamp(36px,calc(5vw + 18px),64px);
 --h2:clamp(30px,3.6vw,44px);
 --dock-h:0px;
}
@media (min-width:768px){:root{--section-y:88px}}
@media (min-width:1024px){:root{--body-size:18px}}
@media (min-width:1440px){:root{--container:1360px;--h1:clamp(64px,calc(1.25vw + 46px),76px);--h2:clamp(44px,calc(.84vw + 32px),52px)}}
/* 3c.3: the H1 stops at 64px on the rebuilt pages (the legacy pages keep their scale until 3b-3B/3b-4). */
@media (min-width:1440px){:where([data-route="home"],[data-template]){--h1:64px}}
@media (min-width:1680px){:root{--container:1520px}}
@media (min-width:1920px){:root{--container:1680px;--section-y:112px;--body-size:19px}}
@media (min-width:2400px){:root{--container:1840px;--body-size:20px}}
/* Dark theme: follows the device unless the visitor chose Light, or forced with data-theme="dark". */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 color-scheme:dark;
 --bg:#111412;
 --surface:#1A1E1B;
 --surface-2:#161A17;
 --text:#EEE9DF;
 --muted:#A9A396;
 --line:#2B302C;
 --line-strong:#48504A;
 --green:#2C6A51;
 --green-hover:#347A5E;
 --green-deep:#10261D;
 --green-bright:#2C6A51;
 --on-green:#F7F4EE;
 --gold:#CDAA62;
 --gold-text:#CDAA62;
 --eyebrow:#8CCBAB;
 --gold-on-dark:#D2B270;
 --badge-bg:#173A2C;
 --header-bg:var(--surface);
 --footer-bg:#0B0C0B;
 --footer-text:#E9E4DA;
 --footer-muted:#ADA79B;
 --shadow:none;
 --shadow-hover:none;
 --dock-shadow:0 8px 24px rgba(0,0,0,.45);
 --field-bg:#F7F4EE;
}}
:root[data-theme="dark"]{
 color-scheme:dark;
 --bg:#111412;
 --surface:#1A1E1B;
 --surface-2:#161A17;
 --text:#EEE9DF;
 --muted:#A9A396;
 --line:#2B302C;
 --line-strong:#48504A;
 --green:#2C6A51;
 --green-hover:#347A5E;
 --green-deep:#10261D;
 --green-bright:#2C6A51;
 --on-green:#F7F4EE;
 --gold:#CDAA62;
 --gold-text:#CDAA62;
 --eyebrow:#8CCBAB;
 --gold-on-dark:#D2B270;
 --badge-bg:#173A2C;
 --header-bg:var(--surface);
 --footer-bg:#0B0C0B;
 --footer-text:#E9E4DA;
 --footer-muted:#ADA79B;
 --shadow:none;
 --shadow-hover:none;
 --dock-shadow:0 8px 24px rgba(0,0,0,.45);
 --field-bg:#F7F4EE;
}
@media (max-width:767px){:root{--dock-h:calc(72px + env(safe-area-inset-bottom))}}

/* ---------- Base ---------- */
/* The few resets the pages used to get from the legacy stylesheets (deleted in T4). Every page matches the scope: the
   home page by data-route="home", every other page by data-template. */
:where([data-route="home"],[data-template]) *{box-sizing:border-box}
:where([data-route="home"],[data-template]) img{display:block;max-width:100%}
:where([data-route="home"],[data-template]) :where(button,input,select,textarea){font:inherit}
:where([data-route="home"],[data-template]) :where(figure,dl,dd){margin:0}
:where([data-route="home"],[data-template]) a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* T10 (WCAG 2.4.11): a focused control or an anchor target never lands under the sticky header or the phone dock. */
html{scroll-padding-top:76px;scroll-padding-bottom:calc(var(--dock-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--body-size);line-height:1.6;padding-bottom:var(--dock-h)}
/* T9: the page is at least one window tall and <main> takes the spare height, so on a short page (the 404, a short
   policy, a wide screen) the footer still reaches the bottom of the window. */
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;box-sizing:border-box}
body>main{flex:1 0 auto}
h1,h2,h3{font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;line-height:1.12}
/* 3c.3: every heading is Inter; Newsreader stays only in the TRIPLE CUE wordmark. */
:where([data-route="home"],[data-template]) :is(h1,h2,h3){font-family:var(--font-sans)}
:where([data-route="home"],[data-template]) h1{font-weight:700;letter-spacing:-.025em;line-height:1.1}
:where([data-route="home"],[data-template]) h2{font-weight:700;letter-spacing:-.02em;line-height:1.2}
:where([data-route="home"],[data-template]) h3{font-weight:600;letter-spacing:-.01em}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tc-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tc-icon{flex:none;display:inline-block;vertical-align:middle}


/* ---------- Layout ---------- */
.tc-container{box-sizing:border-box;width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.tc-section{padding-block:var(--section-y)}

/* ---------- Type helpers ---------- */
.tc-eyebrow{margin:0 0 14px;font-family:var(--font-sans);font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow)}
.tc-h1{margin:0 0 20px;font-size:var(--h1);text-wrap:balance;font-weight:700;line-height:1.1;letter-spacing:-.025em;max-width:none}
.tc-h2{margin:0 0 16px;font-size:var(--h2);text-wrap:balance;font-weight:700;line-height:1.2;letter-spacing:-.02em;max-width:none}
.tc-lede{margin:0;color:var(--muted);max-width:60ch;text-wrap:pretty}

/* ---------- Buttons ---------- */
.tc-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 22px;border:1px solid transparent;border-radius:var(--radius);font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:.01em;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
@media (max-width:767px){.tc-btn{min-height:52px}}
.tc-btn-primary{background:var(--green);border-color:var(--green);color:var(--on-green)}
.tc-btn-primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:var(--on-green)}
.tc-btn-secondary{background:transparent;border-color:currentColor;color:inherit}
.tc-btn-secondary:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.tc-btn-outline{background:transparent;border-color:var(--text);color:var(--text)}
.tc-btn-outline:hover{background:var(--text);color:var(--bg)}
.tc-btn .tc-icon{width:18px;height:18px}

/* ---------- No boxed cards ---------- */
/* Owner rule (3a.2): no bordered, padded or shadowed box around images or content tiles. Tiles sit directly
   on the page background; hover is a title underline plus a small image zoom or chevron nudge. */

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
 .tc-service-card:hover .tc-service-chevron{transform:none!important}
}

/* Theme switch: colours ease for 150ms only while switching (class set by app.js), never under reduced motion. */
@media (prefers-reduced-motion:no-preference){html.tc-theme-anim,html.tc-theme-anim *,html.tc-theme-anim *::before,html.tc-theme-anim *::after{transition:background-color .15s ease,color .15s ease,border-color .15s ease,fill .15s ease,stroke .15s ease!important}}
/* Photos are never dimmed or filtered in dark mode. */
img{filter:none}

/* ---------- Wordmark ---------- */
.tc-wordmark{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;align-items:stretch;color:inherit;text-decoration:none;line-height:1;flex:none}
.tc-wordmark-main{font-family:'Newsreader Wordmark',var(--font-serif);font-weight:600;font-size:25px;letter-spacing:.12em;margin-right:-.12em;white-space:nowrap}
.tc-wordmark-sub{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:.4em}
.tc-wordmark-sub::before,.tc-wordmark-sub::after{content:"";flex:1;height:1px;background:currentColor;opacity:.55}
.tc-wordmark-sub>span{margin-right:-.4em}
@media (max-width:479px){.tc-wordmark-main{font-size:22px}.tc-wordmark-sub{font-size:10px}}

/* ---------- Header ---------- */
body>header{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--line);color:var(--text)}
/* 3c.3: one header height at every scroll position (a height change on scroll fed back through scroll anchoring and
   toggled is-scrolled on every frame). is-scrolled may change box-shadow, border-color or background-color only. */
body>header{transition:box-shadow .15s ease}
.tc-header-inner{display:flex;align-items:center;gap:20px;padding-block:9px}
body>header.is-scrolled{box-shadow:0 1px 8px rgba(0,0,0,.08)}
.tc-icon-btn{box-sizing:border-box;position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;text-decoration:none}
.tc-icon-btn:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.tc-header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.tc-header-phone{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:8px;color:inherit;text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap}
.tc-header-phone:hover .tc-phone-text{text-decoration:underline;text-underline-offset:3px}
.tc-cart-badge{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:var(--green);color:var(--on-green);font-size:11px;font-weight:600;line-height:18px;text-align:center}
.tc-cart-badge[hidden]{display:none}
.tc-header-cta{margin-left:8px;white-space:nowrap}
.tc-panel-top,.tc-panel-contact{display:none}

html:not(.js) .tc-theme-seg{display:none}
/* Theme control (mobile menu panel and footer, 3b.3A): 3-segment control on native radios. */
.tc-theme-seg{margin:0 0 12px;padding:0;border:0;min-width:0}
.tc-theme-seg legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tc-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line-strong);border-radius:calc(var(--radius) + 4px)}
.tc-seg label{position:relative;display:flex}
.tc-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tc-seg span{display:flex;flex:1;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--radius);font-size:15px;font-weight:600}
.tc-seg input:checked+span{background:var(--green);color:var(--on-green)}
.tc-seg input:focus-visible+span{outline:2px solid var(--focus);outline-offset:2px}

/* Menu */
.tc-nav-menu{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.tc-nav-item{position:relative;display:flex;align-items:center}
.tc-nav-item>a{display:block;padding:10px 12px;color:inherit;font-family:var(--font-sans);font-size:16px;font-weight:500;line-height:1.3;white-space:nowrap;text-decoration:none;border-radius:var(--radius)}
.tc-nav-item.has-dropdown>a{padding-right:2px}
.tc-nav-item>a:hover,.tc-nav-item>a[aria-current]{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}
.tc-sub-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:40px;padding:0;border:0;border-radius:var(--radius);background:none;color:inherit;cursor:pointer}
.tc-sub-toggle .tc-icon{transition:transform .15s ease}
.tc-sub-toggle[aria-expanded="true"] .tc-icon{transform:rotate(180deg)}
.tc-dropdown{display:none;margin:0;padding:8px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}
.tc-dropdown a{display:block;padding:10px 14px;border-radius:var(--radius);color:var(--text);font-size:15px;font-weight:500;line-height:1.35;text-decoration:none;white-space:nowrap}
.tc-dropdown a:hover{background:var(--surface-2)}
.tc-dropdown a[aria-current]{color:var(--gold-text)}
.tc-nav-item.is-open>.tc-dropdown{display:block}
/* Neutralise the legacy nav a / nav a[aria-current] rules inside the new header. */
.tc-panel>nav{display:block;gap:0}
.tc-header nav a:hover,.tc-header nav a[aria-current]{color:inherit}
.tc-header .tc-dropdown a[aria-current]{color:var(--gold-text)}

@media (min-width:1024px){
 .tc-panel{display:flex;flex:1;justify-content:center;min-width:0}
 .tc-dropdown{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;box-shadow:var(--shadow-hover);z-index:10}
 .tc-dropdown::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
 html:not(.js) .tc-nav-item:hover>.tc-dropdown,html:not(.js) .tc-nav-item:focus-within>.tc-dropdown{display:block}
 .tc-menu-btn{display:none}
}
@media (min-width:1024px) and (max-width:1199px){
 .tc-header-inner{gap:12px}
 .tc-nav-item>a{padding-inline:8px}
 .tc-phone-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
@media (max-width:1023px){
 .tc-header-phone,.tc-header-email,.tc-header-cta{display:none}
 .tc-header-inner{padding-block:8px}
 .tc-panel{display:none;position:fixed;inset:0;z-index:100;flex-direction:column;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:12px var(--gutter) calc(24px + env(safe-area-inset-bottom));background:var(--bg);color:var(--text)}
 .tc-panel.is-open{display:flex}
 .tc-panel-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--line)}
 .tc-nav-menu{flex-direction:column;align-items:stretch;gap:0}
 .tc-nav-item{flex-wrap:wrap;border-bottom:1px solid var(--line)}
 .tc-nav-item>a{flex:1;padding:16px 0;font-family:var(--font-sans);font-size:24px;font-weight:600;letter-spacing:-.01em}
 .tc-nav-item.has-dropdown>a{padding-right:0}
 .tc-sub-toggle{width:48px;height:48px}
 .tc-dropdown{width:100%;padding:0 0 12px;border:0;background:none}
 .tc-dropdown a{padding:12px 16px;font-size:17px}
 .tc-panel-contact{display:flex;flex-direction:column;gap:4px;margin-top:16px}
 .tc-panel-link{display:flex;align-items:center;gap:12px;min-height:48px;color:inherit;font-weight:500;text-decoration:none}
 .tc-panel-contact .tc-btn{margin-top:12px}
}
html.tc-lock,html.tc-lock body{overflow:hidden}
/* Chrome values that used to come from the legacy stylesheets (deleted in T4); kept so the header, panel and skip
   link look the same (3b.2C). */
.skip{position:absolute;top:-100px;left:20px;background:#fff;color:var(--green);padding:12px;z-index:200;text-decoration:none}
.skip:focus{top:10px}
.tc-header nav{align-items:center}
.tc-header .tc-dropdown a[aria-current]{text-decoration:underline;text-underline-offset:7px}
.tc-theme-seg legend{font-family:var(--font-sans);font-weight:600}
.tc-seg input{width:100%;height:100%;min-height:0;padding:0;border:0}

/* ---------- Docks ---------- */
.tc-dock-mobile{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);color:var(--text)}
.tc-dock-mobile .tc-btn{min-height:52px;padding-inline:12px}
.tc-dock-mobile .tc-dock-contact{gap:6px;padding-inline:8px}
/* T9: at 360px "Free Quote" wrapped to two lines, so the dock grew past --dock-h and covered the page end. */
@media (max-width:379px){.tc-dock-mobile .tc-btn{gap:6px;padding-inline:8px;font-size:15px}.tc-dock-mobile .tc-dock-contact{padding-inline:6px}}
.tc-dock-desktop{display:none}
@media (min-width:768px){
 .tc-dock-mobile{display:none}
 .tc-dock-desktop{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;gap:6px;padding:6px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:999px;box-shadow:var(--dock-shadow);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s linear .15s}
 .tc-dock-desktop.is-visible{opacity:1;visibility:visible;transition:opacity .15s ease}
 .tc-dock-desktop .tc-btn{min-height:44px;border-radius:999px;padding-inline:18px;font-size:15px}
 .tc-dock-email{border:1px solid var(--line)}
}

/* ---------- Footer ---------- */
footer.tc-footer{margin:0;padding:72px 0 28px;border:0;background:var(--footer-bg);color:var(--footer-text);font-size:15px;line-height:1.6;--focus:var(--gold-on-dark)}
.tc-footer a{color:inherit;text-decoration:none}
.tc-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.tc-footer p{max-width:none}
.tc-footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1fr 1.4fr;gap:40px}
.tc-footer-brand p{margin:18px 0 0;color:var(--footer-muted);max-width:26ch}
.tc-footer-heading{margin:0 0 14px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8CCBAB;line-height:1.4}
.tc-footer ul{margin:0;padding:0;list-style:none}
.tc-footer-col li{margin:0 0 6px}
.tc-footer-col a{display:inline-block;padding-block:3px;color:var(--footer-muted)}
.tc-footer-col a:hover{color:var(--footer-text)}
.tc-footer-contact li{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;color:var(--footer-text)}
.tc-footer-contact a{display:inline-flex;align-items:flex-start;gap:10px;padding:0;color:var(--footer-text)}
.tc-footer-contact .tc-icon{color:var(--footer-muted);margin-top:3px}
.tc-footer-contact address{font-style:normal}
.tc-footer-note{color:var(--footer-muted)}
.tc-social{display:flex;gap:6px;margin-top:16px}
.tc-social .tc-icon-btn{border:1px solid color-mix(in srgb,var(--footer-text) 30%,transparent)}
.tc-footer-bottom{margin-top:48px}
.tc-footer-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--footer-text) 16%,transparent)}
.tc-footer-bottom p{margin:0;color:var(--footer-muted);font-size:14px}
/* Footer theme control (every page, 3b.3A): the same radios on the dark footer; the checked segment is the light footer text colour (3c.3: no gold). */
.tc-footer-theme{margin:0;width:min(100%,360px)}
.tc-footer-theme legend{color:var(--footer-muted);font-family:var(--font-sans);font-size:12px;letter-spacing:.2em}
.tc-footer-theme .tc-seg{border-color:color-mix(in srgb,var(--footer-text) 30%,transparent)}
.tc-footer-theme .tc-seg span{color:var(--footer-text)}
.tc-footer-theme .tc-seg input:checked+span{background:var(--footer-text);color:#161615}
.tc-footer-theme .tc-seg input:focus-visible+span{outline-color:var(--gold-on-dark)}
.tc-footer-theme .tc-seg label:hover span{background:color-mix(in srgb,var(--footer-text) 10%,transparent)}
.tc-footer-theme .tc-seg label:hover input:checked+span{background:var(--footer-text)}
@media (max-width:767px){.tc-footer-bar{flex-direction:column-reverse;align-items:stretch}.tc-footer-theme{width:100%}}
@media (max-width:1023px){.tc-footer-grid{grid-template-columns:repeat(3,1fr)}.tc-footer-brand,.tc-footer-contact{grid-column:1/-1}}
/* Footer link columns: <details>; plain headed lists from 768px, +/− accordion rows below. */
.tc-footer-acc>summary{display:block;list-style:none;cursor:default}
.tc-footer-acc>summary::-webkit-details-marker{display:none}
.tc-acc-sign{display:none}
@media (max-width:767px){
 footer.tc-footer{padding:48px 0 24px}
 .tc-footer-grid{grid-template-columns:1fr;gap:0}
 .tc-footer-brand{margin-bottom:28px}
 .tc-footer-acc{border-top:1px solid color-mix(in srgb,var(--footer-text) 16%,transparent)}
 .tc-footer-acc:last-of-type{border-bottom:1px solid color-mix(in srgb,var(--footer-text) 16%,transparent)}
 .tc-footer-acc>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer}
 .tc-footer-acc>summary .tc-footer-heading{margin:0;font-size:13px}
 .tc-acc-sign{display:inline-flex;color:var(--footer-muted)}
 .tc-acc-minus,.tc-footer-acc[open] .tc-acc-plus{display:none}
 .tc-footer-acc[open] .tc-acc-minus{display:inline-block}
 .tc-footer-acc>ul{padding-bottom:12px}
 .tc-footer-col li{margin:0}
 .tc-footer-col a{display:flex;align-items:center;min-height:44px;padding-block:0}
 .tc-footer-contact{margin-top:32px}
 .tc-footer-contact a{min-height:44px;align-items:center}
 .tc-footer-bottom{margin-top:32px}
}
/* Touch screens at any width: footer links get full 44px rows. */
@media (pointer:coarse){.tc-footer-col li{margin:0}.tc-footer-col a{display:flex;align-items:center;min-height:44px;padding-block:0}}
/* Form text never below 16px (stops iOS zoom on focus). */
input,select,textarea{font-size:16px}

/* ---------- Homepage ---------- */
.tc-hero,.tc-services,.tc-trust,.tc-featured,.tc-quote-band{color:var(--text)}
.tc-hero p,.tc-services p,.tc-trust p,.tc-featured p,.tc-quote-band p{max-width:none}
.tc-hero ul,.tc-services ul,.tc-trust ul,.tc-featured ul{margin:0;padding:0;list-style:none}

/* Hero: the photo and its gradient stay the same in both themes. */
.tc-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(560px,40vw,860px);overflow:hidden;background:#141816;color:#F7F4EE;--focus:var(--gold-on-dark)}
.tc-hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:62% 72%}
.tc-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,13,11,.9) 0%,rgba(10,13,11,.8) 30%,rgba(10,13,11,.45) 55%,rgba(10,13,11,.08) 78%,rgba(10,13,11,0) 100%)}
.tc-hero-inner{padding-block:72px}
.tc-hero-copy{max-width:640px}
.tc-hero .tc-eyebrow{color:#8CCBAB}
.tc-hero .tc-h1{color:#F7F4EE}
.tc-hero-text{margin:0 0 32px;font-size:18px;line-height:1.6;color:#E4DED2;max-width:52ch}
.tc-hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.tc-hero-actions .tc-btn{min-height:56px}
.tc-hero .tc-btn-secondary{border-color:#F7F4EE;color:#F7F4EE}
.tc-hero .tc-btn-secondary .tc-icon{color:#F7F4EE}
.tc-btn-call{justify-content:flex-start;padding-block:6px}
.tc-btn-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.tc-btn-sub{font-size:14px;font-weight:500;opacity:.9}
@media (min-width:1440px){.tc-hero-copy{max-width:720px}.tc-hero-text{font-size:19px}}
@media (min-width:1920px){.tc-hero-copy{max-width:820px}.tc-hero-text{font-size:21px}.tc-hero-inner{padding-block:96px}}
@media (max-width:767px){
 .tc-hero{--hero-img-h:clamp(230px,64vw,340px);display:block;min-height:0;padding-top:calc(var(--hero-img-h) - 36px)}
 .tc-hero-img{height:var(--hero-img-h);bottom:auto;object-position:42% 78%}
 .tc-hero-shade{background:linear-gradient(180deg,rgba(20,24,22,0) 0,rgba(20,24,22,0) calc(var(--hero-img-h) - 120px),#141816 var(--hero-img-h),#141816 100%)}
 .tc-hero-inner{padding-block:24px 48px}
 .tc-hero-text{font-size:17px;margin-bottom:24px}
 .tc-hero-actions{flex-direction:column}
 .tc-hero-actions .tc-btn{width:100%}
 .tc-btn-call{justify-content:center}
 .tc-btn-call .tc-btn-stack{align-items:center}
}

/* Service tiles: no card box. Badge, title + chevron, text on the page background. */
.tc-services{padding-block:64px 72px}
.tc-service-grid{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:481px){.tc-service-grid{grid-template-columns:repeat(2,1fr);gap:48px 40px}}
@media (min-width:1024px){.tc-service-grid{grid-template-columns:repeat(4,1fr);gap:40px}}
@media (min-width:1920px){.tc-service-grid{gap:56px}}
/* T18: three services (Moving hidden) sit in one row of 3 from 768px, not 2 + 1. */
@media (min-width:768px) and (max-width:1023px){.tc-service-grid:has(>:last-child:nth-child(3)){grid-template-columns:repeat(3,1fr)}}
.tc-service-grid>li{display:flex}
.tc-service-card{display:grid;grid-template-columns:1fr auto;grid-template-areas:"badge badge" "title chev" "text text";align-items:start;align-content:start;column-gap:12px;width:100%;color:var(--text);text-decoration:none}
.tc-badge{grid-area:badge;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin-bottom:20px;border-radius:50%;background:var(--badge-bg);color:var(--on-green)}
.tc-service-title{grid-area:title;margin:0 0 8px;font-family:var(--font-sans);font-size:23px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--text);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .2s ease}
.tc-service-chevron{grid-area:chev;display:inline-flex;margin-top:3px;color:var(--eyebrow);transition:transform .2s ease}
.tc-service-text{grid-area:text;margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:40ch}
.tc-service-card:hover .tc-service-title{text-decoration-color:currentColor}
.tc-service-card:hover .tc-service-chevron{transform:translateX(3px)}
/* <=480px: full-width list rows (icon | title + text | chevron) with hairlines between rows. */
@media (max-width:480px){
 .tc-services{padding-block:24px 32px}
 .tc-service-grid>li+li{border-top:1px solid var(--line)}
 .tc-service-card{grid-template-columns:auto 1fr auto;grid-template-areas:"badge title chev" "badge text chev";column-gap:16px;align-items:center;min-height:44px;padding-block:18px}
 .tc-badge{width:44px;height:44px;margin:0;align-self:start}
 .tc-badge .tc-icon{width:20px;height:20px}
 .tc-service-title{margin:0 0 2px;font-size:19px}
 .tc-service-text{font-size:14px;line-height:1.5}
 .tc-service-chevron{margin:0}
}

/* Trust strip: full-width band, items separated by space only (no dividers). */
.tc-trust{padding-block:36px;background:var(--surface-2)}
.tc-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 48px}
.tc-trust-item{display:flex;align-items:flex-start;gap:14px}
.tc-trust-icon{color:var(--eyebrow);margin-top:2px}
.tc-trust-title{margin:0 0 2px;font-weight:600;font-size:16px;line-height:1.35}
.tc-trust-line{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
@media (max-width:1023px){.tc-trust-grid{grid-template-columns:repeat(2,1fr);gap:28px 40px}}
@media (max-width:767px){
 .tc-trust{padding-block:32px}
 .tc-trust-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}
 .tc-trust-item{flex-direction:column;gap:10px}
 .tc-trust-icon{width:26px;height:26px}
 .tc-trust-title{font-size:15px}
 .tc-trust-line{font-size:14px}
}

/* Featured tables */
.tc-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.tc-section-head .tc-btn{flex:none}
.tc-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* 3c.2: one 4:3 cover crop on every featured image, table in the lower-middle; the title sits below the image, never over the table */
/* 3c.3: the caption sits under the image on the page background in theme colours, with no box; the whole card is one link. */
.tc-feature-card{position:relative;display:flex;flex-direction:column;height:100%;color:var(--text);text-decoration:none}
.tc-feature-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 70%;border-radius:var(--radius)}
.tc-feature-title{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px}
.tc-feature-card:hover .tc-feature-title{text-decoration-color:currentColor}
.tc-feature-body{position:relative;flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 0 0}
.tc-feature-title{margin:0 0 4px;font-family:var(--font-sans);font-size:28px;font-weight:600;line-height:1.15;color:var(--text);letter-spacing:-.01em}
.tc-feature-sub{display:block;font-size:15px;line-height:1.45;color:var(--muted)}
.tc-round-arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;color:var(--text);transition:background-color .15s,color .15s}
.tc-feature-card:hover .tc-round-arrow{background:var(--text);color:var(--bg)}
@media (max-width:767px){
 .tc-section-head{flex-direction:column;align-items:flex-start;margin-bottom:28px}
 .tc-feature-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:83%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
 @media (pointer:coarse){.tc-feature-grid{scrollbar-width:none}.tc-feature-grid::-webkit-scrollbar{display:none}}
 .tc-feature-grid:focus-visible{outline-offset:-2px}
 .tc-feature-grid>li{scroll-snap-align:start}
 .tc-feature-title{font-size:24px}
}

/* Tablet (768-1023): three narrow featured cards need smaller type and a stacked caption. */
@media (min-width:768px) and (max-width:1023px){
 .tc-feature-grid{gap:16px}
 .tc-feature-body{gap:12px}
 .tc-feature-title{font-size:22px}
 .tc-feature-sub{font-size:14px}
 .tc-round-arrow{width:44px;height:44px}
}

/* Quote band: deep felt, CSS-only texture over --green-deep. */
.tc-quote-band{position:relative;padding-block:var(--section-y);background-color:var(--green-deep);background-image:radial-gradient(ellipse 80% 90% at 20% 0%,rgba(255,255,255,.07),transparent 65%),radial-gradient(ellipse 70% 80% at 100% 100%,rgba(0,0,0,.22),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px);color:#F7F4EE;--focus:var(--gold-on-dark)}
.tc-quote-inner{display:grid;grid-template-columns:1fr 1.25fr;gap:12px 56px;align-items:end}
.tc-quote-band .tc-eyebrow{color:#8CCBAB}
.tc-quote-band .tc-h2{color:#F7F4EE;margin-bottom:10px}
.tc-quote-copy p:last-child{margin:0;color:#DCE3DD}
form.tc-quote-form{display:grid;grid-template-columns:1.5fr 1fr auto;gap:12px;align-items:end;margin:0;padding:0;background:none;border:0;border-radius:0;min-width:0}
.tc-field{display:flex;flex-direction:column;gap:6px;margin:0;font-size:14px;font-weight:500;color:#E3E9E4}
.tc-field select,.tc-field input{box-sizing:border-box;width:100%;min-height:52px;margin:0;padding:12px 14px;border:1px solid rgba(247,244,238,.5);border-radius:var(--radius)!important;background:var(--field-bg);color:#1C1C1A;font:inherit;font-size:16px;font-weight:400;color-scheme:light}
.tc-quote-form .tc-btn{min-height:52px;background:var(--green-bright);border-color:rgba(247,244,238,.35);white-space:nowrap}
.tc-quote-form .tc-btn:hover{background:#347A5E}
.tc-quote-phone{grid-column:2;margin:4px 0 0;color:#DCE3DD;font-size:15px}
.tc-quote-phone a{color:#F7F4EE;font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
@media (max-width:1023px){.tc-quote-inner{grid-template-columns:1fr}.tc-quote-phone{grid-column:auto}}
@media (max-width:767px){form.tc-quote-form{grid-template-columns:1fr}.tc-quote-form .tc-btn{width:100%}}


/* ---------- Large screens (3a.2): components grow with the stepped container. ---------- */
@media (min-width:1920px){
 .tc-nav-item>a{font-size:17px}
 .tc-header-phone{font-size:16px}
 .tc-wordmark-main{font-size:28px}
 .tc-lede{font-size:20px}
 .tc-service-title{font-size:27px}
 .tc-service-text{font-size:17px}
 .tc-trust-title{font-size:18px}
 .tc-trust-line{font-size:16px}
 .tc-feature-title{font-size:34px}
 .tc-feature-sub{font-size:17px}
 footer.tc-footer{font-size:16px}
 .tc-footer-heading{font-size:13px}
 .tc-btn{font-size:17px}
}

/* ---------- Listing pages (3b Part 1): /tables/, /new-tables/, /pre-owned/, /xing-pai/, /game-room/, /shop/ ----------
   body[data-template="listing"] pages use these tokens in both themes; the pre-3b palette no longer reaches them. */
:root{--status-ok:#1F4B39;--status-ok-bg:#E3EEE7;--status-wait:#7A5A1C;--status-wait-bg:#F4EAD3;--status-off:#5E5A52;--status-off-bg:#ECE8E0;--scrim:rgba(17,20,18,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--status-ok:#9BD3B5;--status-ok-bg:#16291F;--status-wait:#E2C27F;--status-wait-bg:#2C2415;--status-off:#B5AFA2;--status-off-bg:#24272A;--scrim:rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--status-ok:#9BD3B5;--status-ok-bg:#16291F;--status-wait:#E2C27F;--status-wait-bg:#2C2415;--status-off:#B5AFA2;--status-off-bg:#24272A;--scrim:rgba(0,0,0,.7)}
body[data-template="listing"] main,body[data-template="product"] main,body[data-template="cart"] main,body[data-template="page"] main{background:var(--bg);color:var(--text)}
.tc-page-head{padding-block:clamp(32px,5vw,72px) clamp(8px,2vw,24px)}
.tc-page-head .tc-h1{font-size:clamp(34px,calc(2.6vw + 22px),60px);margin-bottom:14px}
.tc-page-head .tc-lede{font-size:clamp(17px,calc(.3vw + 16px),20px)}
.tc-page-head .tc-lede+.tc-lede{margin-top:14px}
.tc-authorized{margin:14px 0 0;font-weight:600;color:var(--text)}
/* Trust row (3c.3): three short facts under a listing intro, small green line icons, no boxes; one column under 480px. */
.tc-trust-row{display:flex;flex-wrap:wrap;gap:10px 32px;margin:20px 0 0;padding:0;list-style:none}
.tc-trust-row li{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:500;line-height:1.4;color:var(--text)}
.tc-trust-row-icon{flex:none;margin-top:0;color:var(--eyebrow)}
@media (max-width:479px){.tc-trust-row{flex-direction:column}}
.tc-collection{padding-block:clamp(28px,4vw,56px)}
.tc-collection+.tc-collection{border-top:1px solid var(--line)}
/* T18: a section divider on a .tc-container spans the content, not the gutters (the border ran the full container
   width, gutters included). The line moves to an absolutely positioned ::before inset by the gutter; the
   border stays, transparent, so nothing moves, and top:-1px draws the line exactly where the border was. */
.tc-collection+.tc-collection,.tc-notes.tc-container,.tc-listing-cta.tc-container,.tc-pdp-related.tc-container{position:relative;border-top-color:transparent}
.tc-collection+.tc-collection::before,.tc-notes.tc-container::before,.tc-listing-cta.tc-container::before,.tc-pdp-related.tc-container::before{content:"";position:absolute;top:-1px;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line)}
.tc-collection-head{max-width:760px;margin-bottom:clamp(20px,3vw,36px)}
.tc-collection-head .tc-h2{font-size:clamp(28px,calc(1.6vw + 22px),44px)}
.tc-collection-head p{margin:0 0 12px;max-width:68ch;color:var(--muted)}
.tc-facts{display:grid;gap:6px;margin:18px 0 0;padding:0;list-style:none;font-size:16px;color:var(--text)}
.tc-facts li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 10px;align-items:baseline}
@media (max-width:479px){.tc-facts li{grid-template-columns:minmax(0,1fr)}}
.tc-facts-key{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow)}
.tc-jump{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:24px}
.tc-jump a{display:flex;flex-direction:column;justify-content:center;min-height:44px;color:var(--text);text-decoration:none}
.tc-jump a span{font-family:var(--font-sans);font-size:20px;font-weight:600;letter-spacing:-.01em;text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:5px}
.tc-jump a:hover span{text-decoration-thickness:2px}
.tc-jump small{font-size:14px;color:var(--muted)}
.tc-text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px}
.tc-text-link:hover{text-decoration-thickness:2px}

/* Grids widen with the screen. Tables 1/2/3/3/4; accessories and Game Room 2/3/4/5/5. Gap ~16px -> 32px. */
.tc-product-grid{--cols:1;--gap:clamp(16px,calc(1.25vw + 11px),32px);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap);row-gap:calc(var(--gap) * 1.75);margin:0;padding:0}
.tc-grid-cutouts{--cols:2}
@media (min-width:600px){.tc-grid-tables{--cols:2}.tc-grid-cutouts{--cols:3}}
@media (min-width:1024px){.tc-grid-tables{--cols:3}.tc-grid-cutouts{--cols:4}}
@media (min-width:1680px){.tc-grid-cutouts{--cols:5}}
@media (min-width:1920px){.tc-grid-tables{--cols:4}}
/* T18 (Zae, Oct 29): no card alone on the last row. Where the plain count would leave one card over, the column count
   follows the number of cards (quantity queries on the last card's position): e.g. 4 tables (/tables/, Xing Pai snooker,
   related tables) 2+2 or 4; 7 Signature tables 4+3; 13 Game Room items 5+5+3; 4 related accessories 2+2 or one row of 4
   at 1680+. The filterable grids (pre-owned, /shop/) keep the plain counts: their visible cards change with the filters.
   Counts with no even split stay as they are: odd counts in two columns (phones; 7 tables at 600-1023) and the 13
   Game Room items below 1024px (13 leaves one over in 2, 3 and 4 columns). */
@media (min-width:768px) and (max-width:1023px){
 .tc-grid-tables:not(#preowned-grid):has(>:last-child:nth-child(odd)):not(:has(>:last-child:nth-child(3n+1))){--cols:3}
}
@media (min-width:600px) and (max-width:1023px){
 .tc-grid-cutouts:not(:has(>[data-shop-name])):has(>:last-child:nth-child(6n+4)){--cols:2}
}
@media (min-width:1024px) and (max-width:1279px){
 .tc-grid-tables:not(#preowned-grid):has(>:last-child:nth-child(6n+4)){--cols:2}
 .tc-grid-tables:not(#preowned-grid):has(>:last-child:nth-child(6n+7)){--cols:4}
}
@media (min-width:1280px) and (max-width:1919px){
 .tc-grid-tables:not(#preowned-grid):has(>:last-child:nth-child(3n+4)){--cols:4}
}
@media (min-width:1920px){
 .tc-grid-tables:not(#preowned-grid):has(>:last-child:nth-child(4n+5)):not(:has(>:last-child:nth-child(3n+1))){--cols:3}
}
@media (min-width:1024px) and (max-width:1679px){
 .tc-grid-cutouts:not(:has(>[data-shop-name])):has(>:last-child:nth-child(4n+5)):not(:has(>:last-child:nth-child(5n+1))){--cols:5}
 /* In five columns the long Game Room titles get up to 4 lines instead of being cut off with "…" at 2 (Zae, Oct 29). */
 .tc-grid-cutouts:not(:has(>[data-shop-name])):has(>:last-child:nth-child(4n+5)):not(:has(>:last-child:nth-child(5n+1))) .tc-product-name a{-webkit-line-clamp:4;line-clamp:4}
}
@media (min-width:1680px){
 .tc-grid-cutouts:not(:has(>[data-shop-name])):is(:has(>:last-child:nth-child(4)),:has(>:last-child:nth-child(5n+6))){--cols:4}
}

/* tc-product-card: frameless. Image, then eyebrow, name, meta, price and one action directly on the page. */
.tc-product-card,.tc-hub-tile{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text)}
.tc-product-card[hidden]{display:none}
.tc-product-media{display:block;position:relative;aspect-ratio:4/3;padding:0;border:0;border-radius:var(--radius);background:transparent;box-shadow:none;overflow:hidden}
.tc-media-cutout{aspect-ratio:1/1}
.tc-product-img{display:block;width:100%;height:100%;max-height:none;padding:0;border:0;border-radius:0;object-fit:cover;transition:transform .2s ease}
.tc-fit-contain .tc-product-img{object-fit:contain}
.tc-product-card:hover .tc-product-img,.tc-hub-tile:hover .tc-product-img{transform:scale(1.03)}
.tc-product-pending{display:flex;align-items:center;justify-content:center;height:100%;padding:0 12px;text-align:center;font-size:14px;color:var(--muted)}
/* T18: a card with no photo ("Photograph coming soon") gets the same plain tile as the product page's no-photo slide
   (.tc-gallery-empty), so it does not read as a hole in the grid in dark mode. */
.tc-product-media:has(>.tc-product-pending){background:var(--surface-2)}
.tc-product-body{display:flex;flex-direction:column;flex:1;padding-top:14px}
.tc-product-eyebrow{margin:0 0 6px;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow)}
.tc-product-name{margin:0 0 6px;font-family:var(--font-sans);font-size:clamp(21px,calc(.5vw + 18px),26px);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
.tc-grid-cutouts .tc-product-name{font-size:clamp(16px,calc(.3vw + 15px),19px);line-height:1.3}
.tc-product-name a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .2s ease}
.tc-product-card:hover .tc-product-name a,.tc-hub-tile:hover .tc-product-name a,.tc-product-name a:focus-visible{text-decoration-color:currentColor}
.tc-product-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;font-size:15px;line-height:1.45;color:var(--muted)}
.tc-product-price{margin:0 0 14px;font-size:17px;font-weight:600;line-height:1.3;color:var(--text)}
.tc-product-actions{margin-top:auto}
.tc-product-btn{width:100%;min-height:44px;padding:8px 14px}
.tc-grid-cutouts .tc-product-btn{font-size:15px}
.tc-hub-tile .tc-product-name{margin-top:16px}
.tc-hub-tile .tc-room-img{object-position:50% 70%}
.tc-hub-line{margin:0;color:var(--muted)}
/* Pre-owned status: a text badge with a colour, never colour alone. Sold stays listed, muted, at the end. */
.tc-status{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.5}
.tc-status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.tc-status-available{background:var(--status-ok-bg);color:var(--status-ok)}
.tc-status-pending{background:var(--status-wait-bg);color:var(--status-wait)}
.tc-status-sold{background:var(--status-off-bg);color:var(--status-off)}
.tc-product-card.is-muted .tc-product-img{opacity:.55}
.tc-product-card.is-muted .tc-product-name,.tc-product-card.is-muted .tc-product-price{color:var(--muted)}

/* Search and filters: no boxed panel; inputs keep their borders. */
.tc-listing-tools{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px 16px;align-items:end;margin:0 0 16px}
.tc-tools-preowned{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) auto}
.tc-listing-tools label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:14px;font-weight:600;color:var(--text)}
.tc-input{box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:10px 14px;border:1px solid var(--muted);border-radius:var(--radius)!important;background:var(--surface);color:var(--text);font:inherit;font-size:16px;font-weight:400;line-height:1.3}
.tc-input::placeholder{color:var(--muted);opacity:1}
.tc-input:hover{border-color:var(--muted)}
.tc-listing-tools .tc-btn{min-height:48px}
/* Filters disclosure (pre-owned): the button only shows under 768px; above it the panel adds no box of its own. */
.tc-filter-toggle{display:none}
.tc-filter-panel{display:contents}
.tc-listing-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin:0 0 4px}
.tc-listing-bar p{margin:0;color:var(--muted)}
.tc-listing-note{margin:0 0 clamp(20px,3vw,32px);max-width:80ch;color:var(--muted);font-size:15px}
.tc-empty{padding:48px 0;text-align:center}
.tc-empty[hidden]{display:none}
.tc-empty p{margin:0 0 16px;font-size:18px;color:var(--text)}
/* T18: /shop/ "Show more" below the grid (shown by /listing.js only; without JS every card shows). */
.tc-show-more{display:flex;flex-direction:column;align-items:center;gap:12px;padding:clamp(32px,4vw,48px) 0 0;text-align:center}
.tc-show-more-count{margin:0;color:var(--muted);font-size:15px}
@media (max-width:1023px){.tc-tools-preowned{grid-template-columns:repeat(3,minmax(0,1fr))}.tc-tools-preowned .tc-tool-search{grid-column:1/-1}}
@media (max-width:767px){.tc-listing-tools,.tc-tools-preowned{grid-template-columns:minmax(0,1fr)}.tc-tools-preowned .tc-tool-search{grid-column:auto}.tc-listing-tools .tc-btn{width:100%}.tc-filter-toggle{display:inline-flex}.tc-filter-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:end}.tc-filter-toggle[aria-expanded="false"]+.tc-filter-panel{display:none}}

/* Frameless notes and the closing band. */
.tc-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 48px;padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
/* T18: five notes (/pre-owned/) fill rows of 3 + 2 from 1024px instead of 4 + 1 or 2 + 2 + 1. */
@media (min-width:1024px){.tc-notes:has(>:last-child:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
.tc-note{margin:0;padding:0;border:0;background:transparent;color:var(--text);font-size:16px}
.tc-note p{margin:0 0 10px;color:var(--text)}
.tc-note .purchase-note{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text)}
.tc-note .purchase-note .eyebrow{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow)}
.tc-note .purchase-note a{color:var(--text);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
.tc-note .purchase-note nav{display:flex;flex-wrap:wrap;gap:0 16px}
.tc-note .purchase-note nav a{display:inline-flex;align-items:center;min-height:44px}
/* T9: the text keeps at least 320px; a long button label ("Schedule warehouse inspection") wraps the buttons instead of
   squeezing the heading to one word per line at tablet widths. */
.tc-listing-cta{display:grid;grid-template-columns:minmax(min(100%,320px),1fr) auto;gap:24px 48px;align-items:end;margin-top:clamp(16px,3vw,32px);padding-block:clamp(40px,6vw,88px);border-top:1px solid var(--line)}
.tc-listing-cta .tc-h2{font-size:clamp(28px,calc(1.6vw + 22px),44px)}
.tc-listing-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:767px){.tc-listing-cta{grid-template-columns:minmax(0,1fr)}.tc-listing-cta-actions .tc-btn{flex:1 1 100%}}

/* Choose Options picker: dialog on desktop, bottom sheet under 768px. */
.tc-picker{box-sizing:border-box;width:min(560px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:auto;overscroll-behavior:contain}
.tc-picker::backdrop{background:var(--scrim)}
.tc-picker-form{display:grid;gap:16px;margin:0;padding:20px 24px 24px;border:0;border-radius:0;background:transparent;min-width:0}
/* A single-option finish or size is stated, not asked (3b.2C). */
.tc-picker-fixed{margin:0;font-size:16px;color:var(--text)}
.tc-picker-top{display:grid;grid-template-columns:112px minmax(0,1fr) 44px;gap:16px;align-items:start}
.tc-picker-media{display:block;position:relative;width:112px;aspect-ratio:4/3;border-radius:var(--radius);background:transparent}
.tc-picker-media[hidden]{display:none}
.tc-picker-thumb{display:block;width:100%;height:100%;object-fit:contain}
.tc-picker-title{margin:4px 0 0;font-family:var(--font-sans);font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--text)}
.tc-picker-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer}
.tc-picker-close:hover{background:var(--surface-2)}
.tc-picker label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:14px;font-weight:600;color:var(--text)}
.tc-picker-row{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:16px;align-items:end}
.tc-picker-price{margin:0;font-size:22px;font-weight:600;color:var(--text)}
.tc-picker-price small{display:block;font-size:14px;font-weight:400;color:var(--muted)}
.tc-picker-msg{margin:0;font-size:15px;color:var(--muted)}
.tc-picker .tc-btn-primary{width:100%}
.tc-picker .tc-btn-primary:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:767px){
 .tc-picker{width:100%;max-width:100%;max-height:90dvh;margin:auto 0 0;border-width:1px 0 0;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}
 .tc-picker-top{grid-template-columns:88px minmax(0,1fr) 44px}
 .tc-picker-media{width:88px}
 .tc-picker-title{font-size:20px}
}

/* Added-to-cart confirmation: top right under the header (desktop), above the mobile dock (<768px). */
.tc-toast{position:fixed;z-index:60;top:var(--toast-top,96px);right:var(--gutter);box-sizing:border-box;width:min(380px,calc(100vw - 2 * var(--gutter)));padding:16px 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:var(--dock-shadow)}
.tc-toast:empty{padding:0;border:0;box-shadow:none;width:0;height:0;overflow:hidden}
.tc-toast p{margin:0 0 12px;font-size:16px;color:var(--text)}
.tc-toast-actions{display:flex;gap:10px}
.tc-toast-actions .tc-btn{flex:1;min-height:44px;padding:8px 12px;font-size:15px}
@media (max-width:767px){.tc-toast{top:auto;left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(var(--dock-h) + 12px)}}
@media (prefers-reduced-motion:reduce){.tc-product-card:hover .tc-product-img,.tc-hub-tile:hover .tc-product-img{transform:none!important}}

/* ---------- White-background photos (3b Part 2) ----------
   .tc-cut marks the element holding a supplier/studio photo shot on white (src/cutouts.mjs).
   Light: the tile is the page colour and the photo multiplies into it, so the white disappears. Scoped to light
   only (system light, or the Light choice); it never applies under dark.
   Dark: clean transparent cut-outs (.tc-has-cutout) sit straight on the page; every other white photo keeps a
   warm #C4BDB1 tile (T18: was #ECE8E1, which read as a bright box on the dark page), 8px radius, with the photo
   multiplied onto that tile (never onto the dark page). The full-screen viewer keeps the lighter #ECE8E1 for detail.
   Dark cut-outs also get a soft, edgeless highlight (a radial gradient that reaches transparent at the element's
   nearest side) so black tables don't vanish into the page; T18: brighter (.16 in the centre, .04 at 70%) so the dark
   tables (Westminster, Summit, Onyx, Titanium) stand out. Dark only; never on the tiles. */
.tc-cut{background:var(--bg)}
/* Clean cut-outs (.tc-has-cutout) are the same transparent file in both themes, never multiplied (3c.1); multiply stays
   only for photos still on the tile and for accessories. */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tc-cut:not(.tc-has-cutout) img,:root:not([data-theme="dark"]) .tc-picker-media.is-cut img{mix-blend-mode:multiply}}
:root[data-theme="light"] .tc-cut:not(.tc-has-cutout) img,:root[data-theme="light"] .tc-picker-media.is-cut img{mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .tc-cut{background:transparent}
 :root:not([data-theme="light"]) .tc-cut:not(.tc-has-cutout),:root:not([data-theme="light"]) .tc-picker-media.is-cut{background:#C4BDB1;border-radius:var(--radius)}
 :root:not([data-theme="light"]) .tc-cut:not(.tc-has-cutout) img,:root:not([data-theme="light"]) .tc-picker-media.is-cut img{mix-blend-mode:multiply}
 :root:not([data-theme="light"]) .tc-cut.tc-has-cutout,:root:not([data-theme="light"]) .tc-picker-media.is-cutout{background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,.04) 70%,transparent)}
}
:root[data-theme="dark"] .tc-cut{background:transparent}
:root[data-theme="dark"] .tc-cut:not(.tc-has-cutout),:root[data-theme="dark"] .tc-picker-media.is-cut{background:#C4BDB1;border-radius:var(--radius)}
:root[data-theme="dark"] .tc-cut:not(.tc-has-cutout) img,:root[data-theme="dark"] .tc-picker-media.is-cut img{mix-blend-mode:multiply}
:root[data-theme="dark"] .tc-cut.tc-has-cutout,:root[data-theme="dark"] .tc-picker-media.is-cutout{background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,.04) 70%,transparent)}

/* ---------- Product stage (3c.1) ----------
   Every table photo shot on white (src/cutouts.mjs stageClass) looks like one shoot: a fixed 4:3 box; the table
   contained in 90% of its width x 78% of its height, centred, bottom-aligned on one floor line at 88% of the height.
   Table cut-outs also stand on one soft ground shadow: an edgeless elliptical radial gradient ~72% x 7% of the box,
   centred on the floor line, drawn by the stage (a ::before layer under the image), never a box, border or frame.
   Contexts: table cards (listings and related), gallery slides and thumbnails, the picker and cart thumbnails, the
   full-screen viewer. Room photos (no .tc-cut) keep their cover crop and never get the stage. */
:root{--stage-shadow:rgba(0,0,0,.14)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--stage-shadow:rgba(0,0,0,.5)}}
:root[data-theme="dark"]{--stage-shadow:rgba(0,0,0,.5)}
.tc-stage{position:relative;aspect-ratio:4/3}
.tc-stage.tc-cut>img,.tc-picker-media.tc-stage>img,.tc-viewer-stage.tc-stage>img{position:absolute;left:5%;top:10%;width:90%;height:78%;max-width:none;max-height:none;margin:0;padding:0;border-radius:0;object-fit:contain;object-position:50% 100%}
.tc-stage.tc-has-cutout::before,.tc-picker-media.tc-stage.is-cutout::before,.tc-viewer-figure.is-cutout .tc-stage::before{content:"";position:absolute;left:14%;top:84.5%;width:72%;height:7%;background:radial-gradient(closest-side,var(--stage-shadow),transparent);pointer-events:none}
.tc-cart-thumb.tc-stage{height:auto}

/* ---------- Product detail pages (3b Part 2): body[data-template="product"] ----------
   Breadcrumbs; gallery (~58%) + sticky info column from 1024px, stacked below; then details, description, delivery,
   warranty and related products. Frameless: no border, shadow or padding around the gallery or thumbnails. */
:root{--pdp-error:#A23B2A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pdp-error:#F0A08C}}
:root[data-theme="dark"]{--pdp-error:#F0A08C}
.tc-crumbs{padding-block:12px 4px;font-size:14px}
.tc-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;color:var(--muted)}
.tc-crumbs li{display:inline-flex;align-items:center;min-height:44px}
.tc-crumbs li+li::before{content:"\203A";content:"\203A"/"";margin-inline:10px;color:var(--muted)}
.tc-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.tc-crumbs a:hover{color:var(--text);text-decoration-color:currentColor}
.tc-crumbs [aria-current]{color:var(--text)}
/* Mobile (3b.2C): one line. The trail keeps its width; the current page truncates with an ellipsis, never wraps. */
@media (max-width:767px){
 .tc-crumbs ol{flex-wrap:nowrap;min-width:0}
 .tc-crumbs li{flex:none;white-space:nowrap}
 .tc-crumbs li:last-child{flex:0 1 auto;min-width:0}
 .tc-crumbs li:last-child [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.tc-pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-block:8px clamp(32px,5vw,64px)}
@media (min-width:1024px){
 .tc-pdp{grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:0 clamp(40px,4vw,72px);align-items:start}
 .tc-pdp-sticky{position:sticky;top:96px}
}
/* Gallery: one slide at a time on a scroll-snap row (swipe on touch). */
.tc-gallery{min-width:0}
.tc-gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:8px}
.tc-gallery-track::-webkit-scrollbar{display:none}
.tc-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.tc-slide-open{display:block;width:100%;margin:0;padding:0;border:0;border-radius:var(--radius);background:transparent;color:inherit;cursor:zoom-in;overflow:hidden}
.tc-slide-table{aspect-ratio:4/3}
.tc-slide-cutout{aspect-ratio:1/1}
.tc-slide-img{display:block;width:100%;height:100%;object-fit:contain}
.tc-slide-caption{margin:10px 0 0;color:var(--muted);font-size:14px}
.tc-gallery-empty{display:grid;place-items:center;color:var(--muted);background:var(--surface-2);border-radius:var(--radius)}
.tc-gallery-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.tc-gallery-dots{display:flex;flex-wrap:wrap;gap:8px}
.tc-dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.tc-dot.is-current{background:var(--text)}
.tc-thumbs{display:none}
@media (min-width:768px){
 .tc-gallery-bar{display:none}
 .tc-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:16px 12px;margin-top:16px}
}
.tc-thumb{position:relative;display:block;min-height:44px;margin:0;padding:0;border:0;border-radius:var(--radius);background:transparent;color:inherit;cursor:pointer}
.tc-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;opacity:.7;transition:opacity .15s ease}
.tc-gallery[data-shape="cutout"] .tc-thumb img{aspect-ratio:1/1}
.tc-thumb:hover img,.tc-thumb[aria-current="true"] img{opacity:1}
.tc-thumb::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:1px;background:transparent}
.tc-thumb[aria-current="true"]::after{background:var(--gold)}
.tc-pdp-gallery-note{max-width:var(--measure);margin:14px 0 0;color:var(--muted);font-size:14px}
/* Info column */
.tc-pdp-title{margin:0 0 10px;font-family:var(--font-sans);font-weight:700;font-size:clamp(32px,calc(2.2vw + 20px),50px);line-height:1.1;letter-spacing:-.025em}
.tc-pdp-meta{margin:0 0 18px;color:var(--muted);font-size:15px}
.tc-pdp-price-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 6px}
.tc-pdp-price{margin:0;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.tc-pdp-price small{display:block;margin-top:2px;color:var(--muted);font-size:14px;font-weight:500}
.tc-pdp-small{margin:0 0 6px;color:var(--muted);font-size:15px}
.tc-pdp-actions{display:grid;gap:10px;margin:22px 0 0}
.tc-pdp-actions>.tc-text-link{justify-self:start}
.tc-pdp-buttons{display:grid;gap:10px}
.tc-pdp-buttons .tc-btn,.tc-pdp-add{width:100%;min-height:52px}
.tc-pdp-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tc-pdp-buttons .tc-pdp-email{display:none}
@media (min-width:768px){.tc-pdp-contact{grid-template-columns:1fr}.tc-pdp-buttons .tc-pdp-phone{display:none}.tc-pdp-buttons .tc-pdp-email{display:inline-flex}}
.tc-pdp-add[aria-disabled]{opacity:.6}
/* Purchase area is frameless (3b.2C): no box, background, border or padding around the form; only the fields keep borders. */
.tc-pdp-form{display:grid;gap:16px;margin:0;padding:0;border:0;background:none}
.tc-pdp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tc-pdp-field label{font-size:14px;font-weight:600;color:var(--text)}
/* Without a frame the field border is the control boundary, so it meets 3:1 (WCAG 1.4.11) in both themes. */
.tc-pdp-field .tc-input{min-height:52px;font-size:16px;border-color:var(--muted)}
.tc-pdp-field .tc-input:hover{border-color:var(--text)}
.tc-pdp-field .tc-input[aria-invalid="true"]{border-color:var(--pdp-error);outline-color:var(--pdp-error)}
/* A single-option finish or size is stated, not asked: "Size — 8 ft" (3b.2C). */
.tc-pdp-fixed{margin:0;font-size:16px;color:var(--text)}
.tc-pdp-fixed-label{font-size:14px;font-weight:600}
.tc-pdp-error{margin:0;color:var(--pdp-error);font-size:14px;font-weight:500}
.tc-pdp-option-quote{margin:0;font-size:15px}
.tc-pdp-buyrow{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:end}
.tc-pdp-notes{display:grid;gap:10px;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line);list-style:none;color:var(--muted);font-size:15px}
.tc-pdp-notes strong{color:var(--text);font-weight:600}
/* Below the fold */
.tc-pdp-more{padding-bottom:8px}
.tc-pdp-section{padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
@media (min-width:1024px){.tc-pdp-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}}
.tc-pdp-h2{margin:0 0 16px;font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em;font-size:clamp(24px,calc(1.2vw + 16px),32px);line-height:1.2}
.tc-pdp-body>p{max-width:var(--measure);margin:0 0 14px}
.tc-pdp-body>p:last-child{margin-bottom:0}
.tc-spec{display:grid;margin:0 0 14px}
.tc-spec div{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr);gap:4px 24px;padding-block:12px;border-bottom:1px solid var(--line)}
.tc-spec div:first-child{padding-top:0}
.tc-spec dt{color:var(--muted);font-size:15px}
.tc-spec dd{margin:0}
@media (max-width:599px){.tc-spec div{grid-template-columns:minmax(0,1fr)}}
.tc-pdp-links{display:flex;flex-wrap:wrap;gap:0 24px;margin:0;padding:0;list-style:none}
.tc-pdp-related{padding-block:clamp(32px,5vw,64px);border-top:1px solid var(--line)}
/* Mobile (3b.2C): related products scroll sideways like the homepage featured carousel (~83% cards with a peek);
   the grid returns at 768px. */
@media (max-width:767px){
 .tc-pdp-related .tc-product-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:83%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scrollbar-width:thin}
 @media (pointer:coarse){.tc-pdp-related .tc-product-grid{scrollbar-width:none}.tc-pdp-related .tc-product-grid::-webkit-scrollbar{display:none}}
 .tc-pdp-related .tc-product-card{scroll-snap-align:start;min-width:0}
}
/* Full-screen viewer */
.tc-viewer{box-sizing:border-box;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--text)}
.tc-viewer::backdrop{background:var(--scrim)}
.tc-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.tc-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px var(--gutter)}
.tc-viewer-count{margin:0;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.tc-viewer-figure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;margin:0;padding:0 var(--gutter) 24px}
.tc-viewer-img{display:block;max-width:100%;max-height:calc(100dvh - 140px);object-fit:contain;border-radius:var(--radius)}
.tc-viewer-stage{display:contents}
.tc-viewer-stage.tc-stage{display:block;width:min(100%,calc((100dvh - 140px) * 4 / 3));border-radius:var(--radius)}
.tc-viewer-caption{color:var(--muted);font-size:14px}
.tc-viewer-prev,.tc-viewer-next{position:absolute;top:50%;translate:0 -50%;background:var(--surface);color:var(--text)}
.tc-viewer-prev{left:12px}.tc-viewer-next{right:12px}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tc-viewer-figure.is-cut .tc-viewer-img{mix-blend-mode:multiply}}
:root[data-theme="light"] .tc-viewer-figure.is-cut .tc-viewer-img{mix-blend-mode:multiply}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]) .tc-viewer-figure.is-cut .tc-viewer-img,:root:not([data-theme="light"]) .tc-viewer-figure.is-cut .tc-stage{background:#ECE8E1}
 :root:not([data-theme="light"]) .tc-viewer-figure.is-cut .tc-stage .tc-viewer-img{background:none}
 :root:not([data-theme="light"]) .tc-viewer-figure.is-cutout{background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent)}
}
:root[data-theme="dark"] .tc-viewer-figure.is-cut .tc-viewer-img,:root[data-theme="dark"] .tc-viewer-figure.is-cut .tc-stage{background:#ECE8E1}
:root[data-theme="dark"] .tc-viewer-figure.is-cut .tc-stage .tc-viewer-img{background:none}
:root[data-theme="dark"] .tc-viewer-figure.is-cutout{background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent)}
/* Mobile dock on product pages: the page's own primary action; hidden while the action area is on screen. */
body[data-template="product"] .tc-dock-mobile{transition:transform .2s ease,visibility 0s linear 0s}
body[data-template="product"] .tc-dock-mobile.is-pdp-hidden{transform:translateY(110%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
.tc-dock-mobile button.tc-btn{font:inherit;font-size:16px;font-weight:600}
@media (prefers-reduced-motion:reduce){body[data-template="product"] .tc-dock-mobile,body[data-template="product"] .tc-dock-mobile.is-pdp-hidden,.tc-thumb img{transition:none}}

/* ---------- Cart page (3b.3A): body[data-template="cart"] ----------
   Frameless: lines and summary sit on the page with thin dividers; only form controls keep borders. No docks (the page's
   own button is the action). >=1024: lines + form (~60%) beside a sticky summary; below: lines, summary, form, button. */
body[data-template="cart"]{--dock-h:0px}
.tc-cartpage{padding-block:8px clamp(40px,6vw,88px)}
.tc-cart-status-text{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0 0 16px;padding-block:4px;border-bottom:1px solid var(--line)}
.tc-cart-undo{min-width:44px;min-height:44px;padding:0 6px;border:0;background:none;color:var(--text);font:inherit;font-weight:700;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px;cursor:pointer}
.tc-cart-empty{padding-block:24px 48px}
.tc-cart-empty p{margin:0 0 12px;font-size:20px}
.tc-cart-empty-links{display:flex;flex-wrap:wrap;gap:0 28px;margin:0;padding:0;list-style:none}
html:not(.js) .tc-cart-empty{display:block!important}
.tc-cart-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.tc-cart-h2{margin:0 0 12px;font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em;font-size:clamp(24px,calc(1.2vw + 16px),30px);line-height:1.2}
.tc-cart-h3{margin:0 0 12px;font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;font-size:22px}
/* Lines */
.tc-cart-lines{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.tc-cart-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"thumb info info" "thumb qty total" "thumb remove remove";gap:8px 16px;align-items:center;padding-block:20px;border-bottom:1px solid var(--line)}
.tc-cart-thumb{grid-area:thumb;align-self:start;display:block;width:96px;height:96px;border-radius:var(--radius);overflow:hidden}
.tc-cart-thumb img{width:100%;height:100%;object-fit:contain}
.tc-cart-thumb:not(.tc-cut) img{object-fit:cover}
.tc-cart-info{grid-area:info;min-width:0}
.tc-cart-name{margin:0 0 4px;font-family:var(--font-sans);font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.tc-cart-name a:hover{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:4px}
.tc-cart-variant,.tc-cart-unit{margin:0;color:var(--muted);font-size:15px}
.tc-cart-qty{grid-area:qty;justify-self:start;display:inline-flex;align-items:center;border:1px solid var(--muted);border-radius:var(--radius)}
.tc-cart-step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--text);cursor:pointer}
.tc-cart-step:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.tc-cart-step[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.tc-cart-qty-input{width:52px;height:44px;margin:0;padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:16px;font-variant-numeric:tabular-nums;text-align:center;appearance:textfield;-moz-appearance:textfield}
.tc-cart-qty-input::-webkit-inner-spin-button,.tc-cart-qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tc-cart-linetotal{grid-area:total;margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.tc-cart-remove{grid-area:remove;justify-self:start;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.tc-cart-remove:hover{color:var(--text)}
@media (min-width:768px){
 .tc-cart-line{grid-template-columns:96px minmax(0,1fr) auto minmax(88px,auto);grid-template-areas:"thumb info qty total" "thumb info qty remove";align-items:start}
 .tc-cart-linetotal{display:flex;align-items:center;justify-content:flex-end;min-height:44px}
 .tc-cart-remove{justify-self:end}
}
/* Summary */
.tc-cart-summary{min-width:0}
.tc-cart-totals{margin:0 0 20px}
.tc-cart-totals div{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-bottom:1px solid var(--line)}
.tc-cart-totals dt{color:var(--muted)}
.tc-cart-totals dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.tc-cart-totals .is-total{border-bottom:0}
.tc-cart-totals .is-total dt,.tc-cart-totals .is-total dd{color:var(--text);font-size:19px;font-weight:700}
.tc-cart-submit{width:100%;min-height:52px}
.tc-cart-submit-wide{display:none}
.tc-cart-reassure{margin:14px 0 0;color:var(--muted);font-size:15px}
.tc-cart-rules{margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.tc-cart-rules p{margin:0 0 8px}
/* Form */
.tc-cart-form{display:grid;gap:32px;min-width:0;margin:0}
.tc-cart-form>.tc-cart-h2{margin:0 0 -12px}
.tc-cart-fieldset{min-width:0;margin:0;padding:0;border:0}
.tc-cart-fieldset>legend{margin:0 0 14px;padding:0;font-family:var(--font-sans);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.tc-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tc-field-wide{grid-column:1/-1}
@media (max-width:599px){.tc-field-grid{grid-template-columns:minmax(0,1fr)}}
.tc-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tc-field label{font-size:15px;font-weight:600;color:var(--text)}
/* Frameless form: the field border is the control boundary, so it meets 3:1 (WCAG 1.4.11) in both themes. */
.tc-cartpage .tc-input{min-height:52px;border-color:var(--muted)}
.tc-cartpage textarea.tc-input{resize:vertical}
.tc-cartpage .tc-input:hover{border-color:var(--text)}
.tc-cartpage .tc-input[aria-invalid="true"]{border-color:var(--pdp-error);box-shadow:inset 0 0 0 1px var(--pdp-error)}
.tc-field-error{margin:0;color:var(--pdp-error);font-size:15px;font-weight:500}
.tc-field-hint{margin:0;color:var(--muted);font-size:15px}
.tc-address-results{display:grid}
.address-suggestion{min-height:44px;padding:8px 12px;border:0;border-bottom:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.address-suggestion:hover{background:var(--surface-2)}
.tc-address-results .small{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:13px}
/* Payment preference: native radios, 44px rows. */
.tc-radio-list{display:grid;gap:2px;margin:10px 0 0}
.tc-radio{display:flex;align-items:center;gap:12px;min-height:44px;font-size:16px;cursor:pointer}
.tc-radio input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--green);cursor:pointer}
.tc-radio input[aria-invalid="true"]{outline:2px solid var(--pdp-error);outline-offset:2px}
.tc-cart-pay .tc-field-error{margin-top:6px}
.tc-cart-security{margin:14px 0 0;font-size:15px;font-weight:600}
.tc-cart-details{margin:10px 0}
.tc-cart-details summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-weight:600;cursor:pointer;list-style:none}
.tc-cart-details summary::-webkit-details-marker{display:none}
.tc-details-chevron{flex:none;transition:transform .15s ease}
.tc-cart-details[open] .tc-details-chevron{transform:rotate(180deg)}
.tc-cart-details address{font-style:normal}
.tc-cart-details p{margin:0 0 8px}
/* Button row after the payment section (below 1024), with the summary total repeated beside it. */
.tc-cart-submitbar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;padding-top:20px;border-top:1px solid var(--line)}
.tc-cart-submit-total{display:flex;flex-direction:column;margin:0;color:var(--muted);font-size:14px}
.tc-cart-submit-total strong{color:var(--text);font-size:20px;font-variant-numeric:tabular-nums}
@media (max-width:379px){.tc-cart-submitbar{grid-template-columns:minmax(0,1fr)}}
.tc-cart-review{padding-top:24px;border-top:1px solid var(--line)}
.tc-cart-review pre{max-height:320px;margin:0 0 12px;overflow:auto;white-space:pre-wrap;font:inherit;font-size:15px;color:var(--muted)}
.tc-cart-send{display:grid;gap:10px;margin:16px 0}
.tc-cart-send p{margin:0}
@media (min-width:1024px){
 .tc-cart-layout{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:48px clamp(48px,5vw,96px);align-items:start}
 .tc-cart-lines{grid-column:1;grid-row:1}
 .tc-cart-form{grid-column:1;grid-row:2}
 .tc-cart-summary{grid-column:2;grid-row:1/span 2}
 .tc-cart-submit-wide{display:inline-flex}
 .tc-cart-submitbar{display:none}
}
/* T10 (WCAG 2.4.11): the summary only sticks on windows tall enough to show all of it; on shorter ones a sticky
   summary hid its own last links and buttons below the window edge. */
@media (min-width:1024px) and (min-height:1000px){.tc-cart-summary{position:sticky;top:96px}}

/* ---------- 3e: plain rebuilt pages (/accessibility/, /order-confirmed/, the 404 and redirect pages) ---------- */
.tc-page-plain{padding-bottom:clamp(48px,8vw,96px)}
.tc-page-plain .tc-lede{max-width:68ch}
.tc-page-plain a:not(.tc-btn){text-decoration:underline;text-underline-offset:3px}
/* Redirect pages (T4): the heading, then the link to the new location as a button. */
.tc-page-head>.tc-h1+.tc-btn{margin-top:12px}

/* ---------- Policy pages (T4): /terms/, /warranty/, /shipping/, /privacy/ ----------
   The page head, then the policy links (a row above the text; a column beside it from 1024px) and the text at a
   reading width. No boxes: hairline dividers only. Words come from src/policies.mjs unchanged. */
.tc-policy{display:grid;gap:clamp(20px,3vw,32px);padding-block:clamp(4px,1.5vw,16px) clamp(56px,8vw,112px)}
.tc-policy-nav{display:flex;flex-wrap:wrap;gap:0 24px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tc-policy-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:15px;font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px}
.tc-policy-nav a:hover{color:var(--text);text-decoration-color:currentColor}
.tc-policy-nav a[aria-current="page"]{color:var(--text);text-decoration-color:var(--eyebrow)}
@media (min-width:1024px){
 .tc-policy{grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:clamp(48px,6vw,112px);align-items:start}
 /* /privacy/ has no policy links: its text starts in the same column as the other policy pages' text. */
 .tc-policy-single>.tc-policy-copy{grid-column:2}
 .tc-policy-nav{position:sticky;top:96px;flex-direction:column;flex-wrap:nowrap;padding:0;border-bottom:0}
}
.tc-policy-copy{min-width:0;max-width:68ch;color:var(--text)}
.tc-policy-copy p{margin:0 0 14px}
.tc-policy-copy :is(h2,h3){font-family:var(--font-sans);color:var(--text);text-wrap:balance}
.tc-policy-copy h2{margin:44px 0 14px;font-size:clamp(22px,calc(.8vw + 17px),30px);font-weight:700;letter-spacing:-.02em;line-height:1.25}
.tc-policy-copy h3{margin:28px 0 10px;font-size:clamp(18px,calc(.3vw + 16px),22px);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tc-policy-copy ul{margin:0 0 16px;padding-left:1.25em}
.tc-policy-copy li{margin:0 0 8px;padding-left:4px}
.tc-policy-copy li::marker{color:var(--eyebrow)}
.tc-policy-copy strong{font-weight:650}
.tc-policy-copy a{font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;overflow-wrap:anywhere}
.tc-policy-copy .tc-policy-date{margin:40px 0 0;padding-top:20px;border-top:1px solid var(--line)}
/* /shipping/: the pre-owned freight budgets side by side from 600px, each under a hairline. */
.tc-policy-freight{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px 40px;margin:24px 0}
.tc-policy-freight section{padding-top:16px;border-top:1px solid var(--line)}
.tc-policy-freight .tc-eyebrow{margin:0 0 6px}
.tc-policy-freight h3{margin:0 0 8px;font-size:clamp(24px,calc(.8vw + 19px),32px);font-weight:700;letter-spacing:-.02em}
.tc-policy-freight p:last-child{margin:0;color:var(--muted)}
/* /shipping/ "Delivery by product": a table from 601px, a definition list below that. */
.tc-policy-table{width:100%;border-collapse:collapse;margin:20px 0 24px;font-size:16px;line-height:1.5}
.tc-policy-table th,.tc-policy-table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.tc-policy-table thead th{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom-color:color-mix(in srgb,var(--text) 30%,var(--bg))}
.tc-policy-table tbody th{font-weight:600}
.tc-policy-table td:last-child{white-space:nowrap;padding-right:0}
/* The copy starts with its first section heading (the DBA line above it was removed Oct 29), level with the nav. */
.tc-policy-copy>h2:first-child{margin-top:0}
.tc-policy-dl{display:none;margin:20px 0 24px}
.tc-policy-dl div{padding:12px 0;border-bottom:1px solid var(--line)}
.tc-policy-dl dt{font-weight:600}
.tc-policy-dl dd{margin:8px 0 0}
.tc-policy-dl dd[data-label]::before{content:attr(data-label);display:block;font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--muted)}
@media (max-width:600px){.tc-policy-table{display:none}.tc-policy-dl{display:block}}

/* ---------- Gallery (T4; hidden until galleryEnabled) ----------
   Frameless photos (4:3, the shared radius) in a grid; the caption and date below each on the page background. */
.tc-work-page{padding-block:clamp(8px,2vw,24px) clamp(56px,8vw,112px)}
.tc-work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(28px,3vw,44px) clamp(16px,2vw,32px)}
.tc-work-item{margin:0;min-width:0}
.tc-work-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.tc-work-pending{display:grid;place-items:center;aspect-ratio:4/3;color:var(--muted);font-size:15px;text-align:center}
.tc-work-caption{margin-top:12px;font-weight:600;line-height:1.4;color:var(--text)}
.tc-work-caption time{display:block;margin-top:2px;font-size:15px;font-weight:400;color:var(--muted)}
.tc-work-empty{margin:0;color:var(--muted)}
/* 3e: the terms agreement directly above each cart submit button (the summary's from 1024px, the form's below). */
.tc-cart-terms{display:grid;gap:6px;margin:20px 0 16px}
.tc-cart-terms-wide{display:none}
.tc-cart-submitbar .tc-cart-terms-narrow{grid-column:1/-1;margin:0}
.tc-cart-check{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5}
.tc-cart-check input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--green);cursor:pointer}
.tc-cart-check input[aria-invalid="true"]{outline:2px solid var(--pdp-error);outline-offset:2px}
.tc-cart-check label{cursor:pointer}
.tc-cart-check a{text-decoration:underline;text-underline-offset:3px}
.tc-cart-final{margin:0;color:var(--muted);font-size:15px}
@media (min-width:1024px){.tc-cart-terms-wide{display:grid}}
/* 3e: the final-sale line on product pages, each policy name linked. */
.tc-pdp-final a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
/* Instant payment: the Pay now hint and status under each submit button; the thank-you page's button row. */
.tc-paynow-hint{margin:0 0 8px 32px}
.tc-cart-paystatus{margin:10px 0 0;font-size:15px;font-weight:500;color:var(--text)}
.tc-cart-paystatus:empty{display:none}
.tc-cart-paystatus-wide{text-align:left}
.tc-cart-submitbar .tc-cart-paystatus-narrow{grid-column:1/-1;margin:0}
.tc-page-actions{margin:24px 0 0}
/* T9: several actions in a row (the 404) wrap with a gap; full width on a phone. */
.tc-page-actions:has(.tc-btn+.tc-btn){display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:599px){.tc-page-actions:has(.tc-btn+.tc-btn)>.tc-btn{flex:1 1 100%}}
@supports not selector(:has(*)){.tc-page-actions>.tc-btn+.tc-btn{margin:12px 0 0 12px}}

/* ---------- T2: free quote pop-up and form, /quote/ and /contact/, send results ---------- */
/* /quote/ and /contact/ have no docks. */
body[data-route="quote"],body[data-route="contact"]{--dock-h:0px}
/* The pop-up: a native modal <dialog> (top layer, page behind inert). It is on legacy pages too, so it sets its own
   box model, type and form styles instead of relying on the scoped resets. */
.tc-qd,.tc-qd *,.tc-qd *::before,.tc-qd *::after{box-sizing:border-box}
.tc-qd{width:min(760px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:16px;line-height:1.5;box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:hidden}
.tc-qd:not([open]){display:none}
/* Without JavaScript the email, text and download buttons can't work; the Call link stays. */
html:not(.js) .tc-qf [data-quote-alt]{display:none}
.tc-qd::backdrop{background:rgba(17,20,18,.6)}
.tc-qd-inner{display:flex;flex-direction:column;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.tc-qd-head{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 12px 24px;border-bottom:1px solid var(--line)}
.tc-qd-title{margin:0;font-family:var(--font-sans);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--text)}
.tc-qd-title:focus,.tc-done-title:focus{outline:none}
.tc-qd-close{flex:none;color:var(--text)}
.tc-qd-close:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.tc-qd-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 28px}
.tc-qd a{color:inherit}
@media (max-width:599px){
 .tc-qd{width:calc(100% - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
 .tc-qd-inner{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
 .tc-qd-head{padding:8px 6px 8px 16px}
 .tc-qd-title{font-size:20px}
 .tc-qd-body{padding:16px 16px 24px}
}
@media (prefers-reduced-motion:no-preference){.tc-qd[open]{animation:tc-qd-in .18s ease-out}.tc-qd[open]::backdrop{animation:tc-fade .18s ease-out}}
@keyframes tc-qd-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes tc-fade{from{opacity:0}}
/* The form (page and pop-up). Frameless: only the inputs and outline buttons have borders. */
form.tc-qf{display:grid;gap:28px;min-width:0;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.tc-qf p,.tc-done p{max-width:none}
.tc-qf-set{min-width:0;margin:0;padding:0;border:0}
.tc-qf-set>legend{margin:0 0 12px;padding:0;font-family:var(--font-sans);font-size:18px;font-weight:700;letter-spacing:0;line-height:1.3;color:var(--text)}
.tc-qf-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.tc-qf-group-title{margin:0 0 2px;font-size:13px;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow)}
.tc-qf-checks{display:grid}
.tc-check{display:flex;align-items:center;gap:12px;min-height:44px;margin:0;font-size:16px;font-weight:400;line-height:1.35;color:var(--text);cursor:pointer}
.tc-check input{flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;accent-color:var(--green);cursor:pointer}
.tc-check input[aria-invalid="true"]{outline:2px solid var(--pdp-error);outline-offset:2px}
.tc-qf-set>.tc-field-error{margin:8px 0 0}
.tc-qf .tc-field{margin:0;color:var(--text);font-size:15px}
.tc-qf .tc-field label{display:block;margin:0;font-size:15px;font-weight:600;color:var(--text)}
.tc-qf .tc-input{width:100%;min-height:52px;margin:0;padding:12px 14px;border:1px solid var(--muted);background:var(--field-bg);color:#1C1C1A;font-family:var(--font-sans);font-size:16px;font-weight:400;line-height:1.3;color-scheme:light}
.tc-qf textarea.tc-input{min-height:112px;resize:vertical}
.tc-qf .tc-input::placeholder{color:#5E5A52;opacity:1}
/* The pop-up shows errors only after Send (aria-invalid), so an :invalid field keeps its normal border until then. */
.tc-qf .tc-input:is(:invalid,:user-invalid){border-color:var(--muted)}
.tc-qf .tc-input:hover{border-color:var(--text)}
.tc-qf .tc-input[aria-invalid="true"]{border-color:var(--pdp-error);box-shadow:inset 0 0 0 1px var(--pdp-error)}
.tc-qf .tc-field-error{margin:0}
.tc-qf .tc-field-hint{margin:10px 0 0}
.tc-qf-onsite{display:contents}
/* Product prefill chip (an outlined control, like an outline button). */
.tc-qf-chip{display:inline-flex;align-items:center;gap:2px;justify-self:start;max-width:100%;margin:0 0 -8px;padding:2px 2px 2px 14px;border:1px solid var(--eyebrow);border-radius:999px;color:var(--text);font-size:15px;font-weight:600;line-height:1.3}
.tc-qf-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-qf-chip-clear{display:inline-flex;flex:none;align-items:center;justify-content:center;width:40px;height:40px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.tc-qf-chip-clear:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.tc-qf-submit{display:grid;gap:14px;justify-items:start}
.tc-qf-submit .tc-btn{min-width:220px;min-height:52px}
.tc-qf-privacy{margin:0;color:var(--muted);font-size:14px}
.tc-qf-privacy a,.tc-qf-more a{text-decoration:underline;text-underline-offset:3px}
.tc-qf-more{margin:0;padding:4px 0 0;border-top:1px solid var(--line)}
.tc-qf-more summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:600;cursor:pointer;list-style:none}
.tc-qf-more summary::-webkit-details-marker{display:none}
.tc-qf-more[open] .tc-details-chevron{transform:rotate(180deg)}
.tc-qf-more-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 14px}
.tc-qf-more-actions .tc-btn{justify-content:flex-start;padding-inline:16px;text-decoration:none}
@media (max-width:599px){.tc-qf-groups,.tc-qf-more-actions{grid-template-columns:minmax(0,1fr)}.tc-qf-submit{justify-items:stretch}.tc-qf-submit .tc-btn{width:100%}}
/* Send results (request-feedback.js): a deep-green check that draws in, or the error colour; no box around them. */
.tc-feedback-host:empty{display:none}
.tc-feedback{display:flex;align-items:flex-start;gap:12px;color:var(--text);outline:none}
.tc-feedback:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.tc-feedback-icon{flex:none;fill:none;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.tc-feedback-icon.is-success circle{fill:var(--green);stroke:var(--green)}
.tc-feedback-icon.is-success path{stroke:var(--on-green)}
.tc-feedback-icon.is-error circle{fill:var(--pdp-error);stroke:var(--pdp-error)}
.tc-feedback-icon.is-error path{stroke:var(--surface)}
.tc-feedback-body{display:grid;gap:2px;min-width:0}
.tc-feedback-body p{margin:0;max-width:none}
.tc-feedback-title{font-size:17px;font-weight:700;line-height:1.35}
.tc-feedback-success .tc-feedback-title{color:var(--eyebrow)}
.tc-feedback-error .tc-feedback-title{color:var(--pdp-error)}
.tc-feedback-text{color:var(--text);font-size:15px;line-height:1.5}
.tc-cart-send .tc-feedback{margin:4px 0}
/* Success state after Send: replaces the form until the visitor closes the pop-up (or starts a new request). */
.tc-done{display:grid;justify-items:center;gap:10px;padding:28px 0 8px;text-align:center}
.tc-done-mark svg{display:block;width:72px;height:72px}
.tc-done-circle{fill:var(--green)}
.tc-done-check{stroke:var(--on-green);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.tc-done-title{margin:6px 0 0;font-family:var(--font-sans);font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--text)}
.tc-done-text{margin:0;color:var(--muted);font-size:17px}
.tc-done-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px}
.tc-done-actions .tc-btn{min-width:160px}
@media (prefers-reduced-motion:no-preference){
 .tc-feedback{animation:tc-rise .25s ease-out}
 .tc-feedback-icon.is-success,.tc-done-mark svg{animation:tc-pop .4s cubic-bezier(.2,.8,.3,1.25)}
 .tc-feedback-check{stroke-dasharray:15;stroke-dashoffset:15;animation:tc-draw .35s .15s ease-out forwards}
 .tc-done-check{stroke-dasharray:33;stroke-dashoffset:33;animation:tc-draw .4s .2s ease-out forwards}
}
@keyframes tc-draw{to{stroke-dashoffset:0}}
@keyframes tc-pop{from{opacity:0;transform:scale(.6)}}
@keyframes tc-rise{from{opacity:0;transform:translateY(4px)}}
/* /quote/ and /contact/ pages. */
.tc-quote-page,.tc-contact-page{display:grid;gap:48px clamp(48px,6vw,112px);padding-block:clamp(24px,4vw,48px) clamp(56px,8vw,112px)}
.tc-quote-main{min-width:0;max-width:760px}
.tc-contact-main,.tc-quote-aside{display:grid;gap:32px;min-width:0;align-content:start}
.tc-contact-quote{min-width:0}
@media (min-width:1024px){
 .tc-quote-page{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);align-items:start}
 .tc-quote-aside{position:sticky;top:96px}
 /* T18: the columns follow their content (call buttons 520px, text 60ch), so no wide gap opens between them at 1440+. */
 .tc-contact-page{grid-template-columns:minmax(0,560px) minmax(0,520px);justify-content:start;align-items:start}
}
.tc-contact-h{margin:0 0 12px;font-family:var(--font-sans);font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--text)}
.tc-contact-actions{display:grid;gap:12px;max-width:520px;margin:0;padding:0;list-style:none}
.tc-quote-aside .tc-contact-actions{margin-top:-20px}
.tc-contact-action{width:100%;min-height:72px;justify-content:flex-start;gap:16px;padding:12px 20px;text-align:left}
.tc-contact-action .tc-icon{flex:none;width:22px;height:22px}
.tc-contact-action .tc-btn-stack{min-width:0}
.tc-contact-action .tc-btn-sub{overflow-wrap:anywhere}
.tc-contact-address{display:flex;align-items:flex-start;gap:12px;margin:0}
.tc-contact-address .tc-icon{flex:none;margin-top:3px;color:var(--eyebrow)}
.tc-contact-address address{font-style:normal}
.tc-contact-address strong{display:block;font-weight:600}
.tc-contact-visit .tc-text-link{margin-left:32px}
.tc-contact-note p,.tc-contact-quote p{margin:0 0 16px;max-width:60ch;color:var(--muted)}
.tc-quote-aside .tc-contact-visit .tc-contact-h{font-size:18px}
.tc-qf-group{min-width:0}

/* ---------- Services hub and service pages (T3): body[data-template="page"] ----------
   The rebuilt patterns: compact page head, frameless rows divided by hairlines, notes, tc- buttons. No boxes. */
.tc-svc-lede{margin-top:14px}
.tc-svc-hub{padding-block:clamp(16px,3vw,32px) clamp(16px,3vw,32px)}
.tc-svc-rows{margin:0;padding:0;list-style:none}
.tc-svc-row{display:grid;gap:16px;padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.tc-svc-row:first-child{padding-top:clamp(8px,1.5vw,16px);border-top:0}
.tc-svc-copy{min-width:0;max-width:var(--measure)}
.tc-svc-name{margin:0 0 8px}
.tc-svc-row:hover .tc-product-img{transform:scale(1.03)}
.tc-svc-row:hover .tc-svc-name a{text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){.tc-svc-row:hover .tc-product-img{transform:none!important}}
.tc-svc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:16px 0 0}
.tc-svc-btn{min-height:44px;padding:8px 18px}
@media (min-width:768px){
 .tc-svc-row.has-photo{grid-template-columns:minmax(0,1fr) minmax(0,clamp(240px,30%,400px));gap:clamp(32px,4vw,64px);align-items:center}
 .tc-svc-row.has-photo .tc-svc-media{grid-column:2;grid-row:1}
 .tc-svc-row.has-photo .tc-svc-copy{grid-column:1;grid-row:1}
}
/* The closing notes sit inside the container, so their divider lines up with the row dividers above. */
.tc-svc-end{padding-bottom:clamp(56px,8vw,112px)}
.tc-svc-notes .tc-eyebrow,.tc-svc-plan .tc-eyebrow{color:var(--eyebrow)}
.tc-svc-notes .tc-page-actions{margin:20px 0 0}
/* Service page: the text column, with the photo beside it from 1024px (above it on smaller screens). */
.tc-svc-page{display:grid;gap:32px;padding-block:clamp(16px,3vw,32px) clamp(56px,8vw,112px)}
.tc-svc-body{min-width:0;max-width:760px}
.tc-svc-photo{margin:0;min-width:0}
.tc-svc-photo-img{display:block;width:100%;height:auto;border-radius:var(--radius)}
@media (min-width:1024px){
 .tc-svc-page.has-photo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,6vw,112px);align-items:start}
 .tc-svc-page.has-photo .tc-svc-photo{grid-column:2;grid-row:1;position:sticky;top:96px}
 .tc-svc-page.has-photo .tc-svc-body{grid-column:1;grid-row:1}
}
.tc-svc-h2{margin:40px 0 16px;font-family:var(--font-sans);font-size:clamp(24px,calc(1.2vw + 16px),32px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.tc-svc-body>.tc-svc-h2:first-child{margin-top:0}
.tc-svc-list,.tc-svc-steps{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.tc-svc-list li{position:relative;max-width:var(--measure);padding-left:26px}
.tc-svc-list li::before{content:"";position:absolute;left:4px;top:calc(.8em - 4px);width:8px;height:8px;border-radius:50%;background:var(--eyebrow)}
.tc-svc-steps{counter-reset:tc-step}
.tc-svc-steps li{counter-increment:tc-step;display:flex;align-items:center;gap:14px}
.tc-svc-steps li::before{content:counter(tc-step);flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green);color:var(--on-green);font-size:15px;font-weight:700;line-height:1}
.tc-svc-text{max-width:var(--measure);margin:16px 0 0}
.tc-svc-text a{font-weight:600;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;overflow-wrap:anywhere}
.tc-svc-facts{margin-top:32px}
.tc-svc-permit{margin:16px 0 0}
.tc-svc-plan{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.tc-svc-body .tc-svc-actions{gap:12px;margin-top:28px}
@media (max-width:767px){.tc-svc-body .tc-svc-actions .tc-btn{flex:1 1 100%}}
.tc-svc-back{margin:20px 0 0}