/*
Theme Name: Thrive Lifecare
Theme URI: https://thrivelifecare.com.au
Author: Thrive Lifecare
Description: Block theme for the Thrive Lifecare public website. Referrer-first layout, brand tokens in theme.json, WooCommerce catalogue mode (browse and enquire, no checkout), Odoo form embeds for every enquiry.
Version: 0.9.85
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thrive-lifecare
Tags: block-patterns, full-site-editing, e-commerce, accessibility-ready
*/

/* All design tokens live in theme.json. This file carries the handful of
   rules that block styles cannot express: cards, pills, the dot-arc motif,
   product grid overrides and the catalogue-mode tweaks. */

:root {
  --tl-radius-card: 20px;
  --tl-radius-control: 12px;
  --tl-shadow-lift: 0 18px 40px rgba(22, 58, 66, 0.10);
}

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

/* Skip link for keyboard users */
.tl-skip-link { position: absolute; left: -999px; top: 8px; background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); padding: 0.6rem 1rem; border-radius: 999px; z-index: 1000; font-weight: 700; }
.tl-skip-link:focus { left: 8px; }

/* Header */
.tl-topbar { font-size: 0.9375rem; }
.tl-topbar a { color: #ffffff; }
.tl-header .wp-block-site-logo img { max-height: 84px; width: auto; }
.tl-logo { line-height: 0; flex-shrink: 0; }
.tl-logo__link { display: inline-block; }
.tl-logo__img { height: auto; display: block; }
.tl-header .wp-block-navigation .wp-block-navigation-item__content { padding: 0.25rem 0; border-bottom: 3px solid transparent; }
.tl-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--wp--preset--color--yellow); color: var(--wp--preset--color--teal-text); }

/* Eyebrow label */
.tl-eyebrow { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-text); }

/* Cards */
.tl-card { background: #ffffff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); padding: 1.75rem; }
.tl-card--tint { background: var(--wp--preset--color--mist); }
.tl-card--lift { box-shadow: var(--tl-shadow-lift); border: 0; }
.tl-card h3 { margin-top: 0; }
.tl-card > * + * { margin-top: 0.6rem; }

/* Numbered step badge */
.tl-step { width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--yellow); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.25rem; color: var(--wp--preset--color--ink); }

/* Tag pill */
.tl-pill { display: inline-block; background: var(--wp--preset--color--lime); color: var(--wp--preset--color--ink); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; }
.tl-pill--sky { background: var(--wp--preset--color--sky-light); }

/* Dot arc motif (decorative, aria-hidden) */
.tl-dots { position: relative; }
.tl-dots::before, .tl-dots::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.tl-dots--hero::before { width: 64px; height: 64px; background: var(--wp--preset--color--yellow); right: 140px; top: -20px; }
.tl-dots--hero::after { width: 44px; height: 44px; background: var(--wp--preset--color--lime); right: 80px; top: 28px; }
.tl-dots-svg { position: absolute; right: 0; top: 0; width: 240px; height: 120px; pointer-events: none; }
@media (max-width: 781px) { .tl-dots-svg { width: 150px; height: 75px; } }

/* Yellow CTA band */
.tl-band { border-radius: 28px; }

/* Rounded product and category images */
.tl-imgbox { background: var(--wp--preset--color--mist); border-radius: var(--tl-radius-card); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.tl-imgbox img { object-fit: contain; max-height: 220px; width: auto; }

/* Forms (Odoo embeds and any native forms) */
.tl-form input[type="text"], .tl-form input[type="email"], .tl-form input[type="tel"], .tl-form select, .tl-form textarea { width: 100%; min-height: 52px; border: 2px solid #c9d9dd; border-radius: var(--tl-radius-control); padding: 0.6rem 0.9rem; font: inherit; }
.tl-form :is(input, select, textarea):focus { outline: none; border-color: var(--wp--preset--color--teal); box-shadow: 0 0 0 4px var(--wp--preset--color--sky-light); }
.tl-embed iframe { width: 100%; min-height: 900px; border: 0; border-radius: var(--tl-radius-card); }

/* WooCommerce catalogue mode */
.woocommerce ul.products li.product, .wc-block-product-template .wc-block-product { background: #ffffff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); padding: 1.25rem; }
.wc-block-product-template .wc-block-product img, .woocommerce ul.products li.product img { object-fit: contain; aspect-ratio: 1 / 1; width: 100%; }
.wc-block-components-product-price, .price { color: var(--wp--preset--color--slate); font-size: 0.9375rem; }
.wc-block-product-template .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.tl-sku { font-size: 0.8125rem; color: var(--wp--preset--color--muted); }
.tl-product-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.tl-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.9375rem; text-decoration: none; }
.tl-btn--primary { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); }
.tl-btn--outline { border: 2px solid var(--wp--preset--color--teal); color: var(--wp--preset--color--teal-text); background: transparent; }
.tl-btn:hover { text-decoration: none; filter: brightness(0.96); }
.tl-btn:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 2px; }

/* Single product */
.tl-product-hero .wp-block-woocommerce-product-image-gallery { background: var(--wp--preset--color--mist); border-radius: 24px; padding: 1.5rem; }
.tl-spec-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tl-spec-table th, .tl-spec-table td { text-align: left; padding: 0.8rem 0; border-bottom: 1px solid var(--wp--preset--color--line); vertical-align: top; }
.tl-spec-table th { color: var(--wp--preset--color--muted); font-weight: 400; width: 38%; }

/* Reduced motion, contrast and focus */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
a:focus-visible, button:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 2px; }

/* Category grid (shortcode) */
.tl-cat-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-cat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-cat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .tl-cat-grid, .tl-cat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .tl-cat-grid, .tl-cat-grid--4, .tl-cat-grid--2 { grid-template-columns: 1fr; } }
.tl-cat-card { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
.tl-cat-card > * + * { margin-top: 0; }
.tl-cat-img { width: 100%; height: 180px; object-fit: contain; }
.tl-cat-card .tl-imgbox.tl-cat-img { height: 180px; box-sizing: border-box; }
.tl-cat-title { margin: 0; font-size: 1.25rem; }
.tl-cat-title a { color: var(--wp--preset--color--ink); }
.tl-cat-title a::after { content: ""; position: absolute; inset: 0; }
.tl-cat-card:hover { border-color: var(--wp--preset--color--teal); }
.tl-cat-desc { color: var(--wp--preset--color--slate); font-size: 0.9375rem; }

/* Header: keep logo, menu and buttons on one line; hide Woo's account and cart icons in catalogue mode */
.tl-header > .wp-block-group { flex-wrap: nowrap; }
.tl-header .wp-block-buttons { flex-wrap: nowrap; }
.tl-header .wp-block-button__link { padding-top: 0.7rem; padding-bottom: 0.7rem; padding-left: 1.3rem; padding-right: 1.3rem; font-size: 0.9375rem; white-space: nowrap; }
.tl-header .wp-block-woocommerce-customer-account, .tl-header .wp-block-woocommerce-mini-cart { display: none !important; }
@media (max-width: 1100px) { .tl-header .wp-block-button.is-style-outline { display: none; } }
@media (max-width: 781px) { .tl-header > .wp-block-group { flex-wrap: wrap; } .tl-topbar .wp-block-group { justify-content: center; text-align: center; } }

/* Site-info blocks and utility classes */
.tl-site-info { margin: 0; }
.tl-strong { font-weight: 700; }
.tl-strong a { color: #ffffff; }
.tl-topbar .tl-site-info a { color: #ffffff; }
.tl-loc-name { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.5rem; margin: 0 0 0.25rem; }
.tl-btn--large { min-height: 56px; padding: 0 1.75rem; font-size: 1.0625rem; }
.tl-btn--ink { background: var(--wp--preset--color--ink); color: #ffffff; }
.tl-btn--ink a { color: #ffffff; }
p.tl-btn { margin: 0; }
p.tl-btn a { text-decoration: none; color: inherit; }
.tl-step.wp-block-paragraph, p.tl-step { width: 48px; height: 48px; margin: 0 0 0.5rem; }
.tl-cat-grid__heading { grid-column: 1 / -1; margin: 0; }
.tl-dots-svg { position: absolute; right: 0; top: 0; width: 240px; margin: 0; pointer-events: none; }
.tl-dots-svg img { width: 240px; height: auto; }
.tl-price-note { color: var(--wp--preset--color--slate); }
/* Editor: make server-rendered blocks visible while selected */
.editor-styles-wrapper .tl-site-info:empty::before { content: "Site detail"; color: #999; }
/* Footer lists: no bullets */
footer .wp-block-list { list-style: none; padding-left: 0; margin: 0; }
footer .wp-block-list li { margin-bottom: 0.4rem; }
footer .wp-block-list a { color: var(--wp--preset--color--slate); }

/* Product page v2 */
.tl-howto { margin: 1.25rem 0; }
.tl-howto__title { font-size: 1.125rem; margin: 0 0 0.6rem; }
.tl-howto__card { border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); overflow: hidden; background: #fff; }
.tl-howto__row { display: grid; grid-template-columns: 34px 1fr; gap: 0.65rem; align-items: start; padding: 0.95rem 1.1rem; border-top: 1px solid var(--wp--preset--color--line); }
.tl-howto__row:first-child { border-top: 0; }
.tl-howto__row--hl { background: var(--wp--preset--color--mist); }
.tl-howto__icon { color: var(--wp--preset--color--slate); display: flex; padding-top: 2px; }
.tl-howto__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tl-howto__label { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1rem; color: var(--wp--preset--color--ink); }
.tl-howto__action { align-self: flex-start; justify-content: center; margin: 0.15rem 0; }
.tl-howto__action:hover { text-decoration: none; }
.tl-howto__note { font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.tl-compare h2 { margin: 0 0 0.25rem; }
.tl-compare__intro { color: var(--wp--preset--color--slate); font-size: 0.9375rem; margin: 0 0 1rem; }
.tl-compare__scroll { overflow-x: auto; border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); }
.tl-compare__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tl-compare__table thead tr { background: var(--wp--preset--color--mist); }
.tl-compare__table th, .tl-compare__table td { padding: 0.75rem 0.9rem; border-top: 1px solid var(--wp--preset--color--line); text-align: center; vertical-align: top; }
.tl-compare__table thead th { border-top: 0; }
.tl-compare__table tbody th { text-align: left; color: var(--wp--preset--color--muted); font-weight: 400; white-space: nowrap; }
.tl-compare__col { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; }
.tl-compare__name { font-family: var(--wp--preset--font-family--heading); font-weight: 800; }
.tl-docs h2 { font-size: 1.375rem; margin: 0 0 0.75rem; }
.tl-docs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.tl-docs__list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; color: var(--wp--preset--color--ink); font-size: 0.9375rem; text-decoration: none; }
.tl-docs__list a:hover { border-color: var(--wp--preset--color--teal); }
.tl-docs__dl { color: var(--wp--preset--color--teal-text); font-weight: 700; }
.tl-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #ffffff; border-top: 1px solid var(--wp--preset--color--line); box-shadow: 0 -8px 30px rgba(22, 58, 66, 0.08); }
.tl-sticky[hidden] { display: none; }
.tl-sticky__inner { max-width: 1280px; margin: 0 auto; padding: 0.6rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tl-sticky__who { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
.tl-sticky__img { width: 44px; height: 44px; object-fit: contain; }
.tl-sticky__name { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-sticky .tl-product-actions { margin: 0; flex-wrap: nowrap; }
@media (max-width: 600px) { .tl-sticky__who { display: none; } .tl-sticky .tl-product-actions { width: 100%; } .tl-sticky .tl-btn { flex: 1; justify-content: center; } }
.tl-trust { display: grid; gap: 0.75rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-trust--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-trust--1 { grid-template-columns: 1fr; } .tl-trust--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 781px) { .tl-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tl-trust__item { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8125rem; color: var(--wp--preset--color--slate); }
.tl-stock { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.8125rem; color: var(--wp--preset--color--slate); margin: 0; }
.tl-stock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--wp--preset--color--mint); }
.tl-stock--out .tl-stock__dot { background: var(--wp--preset--color--lime); }
.tl-pdp-clinician { background: var(--wp--preset--color--mist); border-radius: 16px; padding: 1rem 1.25rem; }
.tl-pdp-clinician p { margin: 0; }
.tl-funding-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--wp--preset--color--slate); }
.tl-funding-pills span { border: 1px solid #c9d9dd; border-radius: 999px; padding: 0.25rem 0.65rem; }

.tl-pdp-columns--flip { flex-direction: row-reverse; }
.tl-strong-ink { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.875rem; }
/* Variation form in catalogue mode: keep the selectors, hide cart controls */
.tl-product-hero .single_add_to_cart_button, .tl-product-hero .quantity, .tl-product-hero .woocommerce-variation-add-to-cart { display: none !important; }
.tl-product-hero table.variations th { text-align: left; padding: 0.4rem 0; font-size: 0.875rem; font-weight: 600; }
.tl-product-hero table.variations select { min-height: 44px; border: 2px solid #c9d9dd; border-radius: 10px; padding: 0 0.75rem; font: inherit; }
.tl-product-hero .reset_variations { font-size: 0.8125rem; }
.tl-product-hero .woocommerce-variation-price { margin: 0.5rem 0; }

/* 0.3.1: header dropdown and footer menus */
.tl-header .wp-block-navigation .wp-block-navigation__submenu-container { min-width: 17rem; padding: 0.5rem 0; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(22,58,66,0.12); background: #fff; }
.tl-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; padding: 0.4rem 1rem; border-bottom: 0; font-weight: 600; }
.tl-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--teal-text); }
footer .tl-footer-heading { font-size: 1.125rem; margin-bottom: 0.75rem; }
footer .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
footer .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--teal-text); text-decoration: underline; }

/* 0.4.0 */
/* Header search box */
.tl-header .wp-block-search__inside-wrapper { border: 2px solid var(--wp--preset--color--line); border-radius: 999px; padding: 2px 2px 2px 0.9rem; background: #fff; }
.tl-header .wp-block-search__input { border: 0; background: transparent; font: inherit; font-size: 0.9375rem; min-height: 38px; padding: 0; }
.tl-header .wp-block-search__input:focus { outline: none; }
.tl-header .wp-block-search__inside-wrapper:focus-within { border-color: var(--wp--preset--color--teal); box-shadow: 0 0 0 3px var(--wp--preset--color--sky-light); }
.tl-header .wp-block-search__button { background: var(--wp--preset--color--teal); color: #fff; border: 0; border-radius: 999px; min-height: 36px; padding: 0 0.7rem; margin: 0; }
.tl-header .wp-block-search__button svg { fill: #fff; }
/* 0.9.10: below 1100px the search drops to its own full-width row under the menu instead of hiding */
@media (max-width: 1100px) { .tl-header > .wp-block-group { flex-wrap: wrap; } .tl-header-actions { flex: 1 1 100%; flex-wrap: wrap; order: 10; margin-top: 0.5rem; } .tl-header .tl-header-search { display: block; flex: 1 1 200px; width: auto !important; max-width: none; } }
/* Prefix and button in the yellow band: "Call 03 ..." keeps its space; Book a trial stands out */
.tl-btn .tl-prefix { margin-right: 0.35em; }
.tl-band .tl-btn--primary { background: var(--wp--preset--color--ink); color: #ffffff; }
.tl-band .tl-btn--primary:hover { background: var(--wp--preset--color--teal-dark); color: #ffffff; }
.tl-band .tl-btn--ink { background: #ffffff; color: var(--wp--preset--color--ink); }
.tl-band .tl-btn--ink a { color: var(--wp--preset--color--ink); }
/* Footer addresses: two lines each, no overflow */
footer .tl-site-info--north_address, footer .tl-site-info--south_address, footer .tl-site-info--postal_address { line-height: 1.45; margin-top: 0.5rem; overflow-wrap: anywhere; }
footer .tl-addr__line { display: block; }
footer .tl-addr__line:first-child { font-weight: 600; color: var(--wp--preset--color--ink); }
.tl-addr__line + .tl-addr__line::before { content: none; }
.tl-site-info--postal_address .tl-prefix { font-weight: 600; color: var(--wp--preset--color--ink); }
/* Product page: excerpt, badges, swatches */
.tl-pdp-excerpt { font-size: 1.125rem; }
.tl-gallery-wrap { position: relative; }
.tl-badges { position: absolute; top: 1rem; left: 1rem; z-index: 5; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tl-badge { display: inline-block; border-radius: 999px; padding: 0.35rem 0.8rem; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.8125rem; line-height: 1.2; box-shadow: 0 4px 14px rgba(22,58,66,0.12); }
.tl-badge--hire { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); }
.tl-badge--swl { background: var(--wp--preset--color--ink); color: #ffffff; }
.tl-swatch-select { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.tl-product-hero table.variations td.value { position: relative; }
.tl-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.15rem 0 0.4rem; }
.tl-swatch { min-height: 40px; padding: 0 1rem; border: 2px solid #c9d9dd; border-radius: 999px; background: #fff; color: var(--wp--preset--color--ink); font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.tl-swatch:hover { border-color: var(--wp--preset--color--teal); }
.tl-swatch.is-selected { border-color: var(--wp--preset--color--teal); background: var(--wp--preset--color--sky-light); box-shadow: 0 0 0 2px var(--wp--preset--color--teal) inset; }
.tl-swatch.is-unavailable { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.tl-swatch:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 2px; }
.tl-swatch--circle { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; justify-content: center; position: relative; }
.tl-swatch--circle .tl-swatch__dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(22,58,66,0.15); display: block; }
.tl-swatch--circle .tl-swatch__text { position: absolute; left: -9999px; }
.tl-swatch--circle.is-selected { box-shadow: 0 0 0 3px var(--wp--preset--color--teal); background: #fff; }
.tl-swatch--circle:hover .tl-swatch__text, .tl-swatch--circle:focus-visible .tl-swatch__text { left: 50%; transform: translateX(-50%); top: 100%; margin-top: 4px; font-size: 0.75rem; white-space: nowrap; background: var(--wp--preset--color--ink); color: #fff; padding: 0.15rem 0.5rem; border-radius: 6px; z-index: 3; }
.tl-product-hero table.variations th { vertical-align: top !important; padding-top: 0.85rem !important; }
.tl-price-note--configurable { display: inline-block; background: var(--wp--preset--color--sky-light); color: var(--wp--preset--color--ink); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8125rem; font-weight: 600; }
/* Heading scale: H2 always larger than H3, whatever the editor chose */
.wp-block-post-content h2:not([class*="has-"]) { font-size: var(--wp--preset--font-size--xx-large); }
.wp-block-post-content h3:not([class*="has-"]) { font-size: var(--wp--preset--font-size--x-large); }
.wp-block-post-content h4:not([class*="has-"]) { font-size: var(--wp--preset--font-size--large); }
/* Contact page cards under "What do you need?" */
.tl-need-cards { gap: 1.25rem; }
.tl-need-cards .tl-card { padding: 1.5rem; }
.tl-need-cards .tl-card h3 { font-size: 1.25rem; line-height: 1.25; overflow-wrap: anywhere; }
.tl-need-cards .tl-card p { margin-top: 0.5rem; }

/* Category intro paragraphs (from the category description) */
.tl-cat-intro { margin-bottom: 0.5rem; }
.tl-cat-intro .wp-block-term-description p { font-size: 1rem; line-height: 1.65; margin: 0 0 0.9rem; }

/* Signpost callout: use inside a category description or any text block.
   Editable without code: add class="tl-callout" to a paragraph. */
.tl-callout {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0 0.5rem;
	padding: 0.9rem 1.15rem;
	background: var(--wp--preset--color--mist, #F3FAFB);
	border: 2px solid var(--wp--preset--color--teal, #00ABBF);
	border-radius: 999px;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink, #163A42);
	line-height: 1.4;
}
.tl-callout::before {
	content: "";
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow, #FFD602);
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--mist, #F3FAFB), 0 0 0 2px var(--wp--preset--color--teal, #00ABBF);
}
.tl-callout a { color: var(--wp--preset--color--teal-text, #007F8F); text-decoration: underline; text-underline-offset: 2px; }
.tl-callout a:hover { text-decoration-thickness: 2px; }
@media (max-width: 480px) {
	.tl-callout { border-radius: 18px; align-items: flex-start; }
}

/* 0.5: references */
.tl-refs__heading { margin: 0 0 1.5rem; }
.tl-refs__grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-refs--1 .tl-refs__grid { grid-template-columns: 1fr; } .tl-refs--2 .tl-refs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-refs--4 .tl-refs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 781px) { .tl-refs__grid, .tl-refs--4 .tl-refs__grid { grid-template-columns: 1fr; } }
.tl-ref { margin: 0; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.tl-ref__mark { flex-shrink: 0; }
.tl-ref__quote { margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.6; color: var(--wp--preset--color--ink); flex-grow: 1; }
.tl-ref__quote::before { content: "\201C"; } .tl-ref__quote::after { content: "\201D"; }
.tl-ref__who { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.875rem; }
.tl-ref__name { font-family: var(--wp--preset--font-family--heading); font-weight: 800; color: var(--wp--preset--color--ink); }
.tl-ref__meta { color: var(--wp--preset--color--slate); }

/* 0.5.1: keep the menu on one line at 1280px now that Home modifications is in it */
.tl-header .wp-block-navigation { font-size: 0.9375rem; }
.tl-header .wp-block-navigation .wp-block-navigation__container { gap: 1.2rem; }
.tl-header .tl-header-search { width: 270px !important; max-width: 270px; }
.tl-header .tl-header-search .wp-block-search__input { font-size: 0.9375rem; }
@media (max-width: 1100px) { .tl-header .wp-block-navigation .wp-block-navigation__container { gap: 0.9rem; } }

/* 0.5.2: CookieYes banner and preference centre in brand colours (plugin sets inline colours, hence !important) */
.cky-consent-container { font-family: var(--wp--preset--font-family--body) !important; }
.cky-consent-container .cky-consent-bar { background: #fff !important; border: 1px solid var(--wp--preset--color--line) !important; border-radius: 16px !important; box-shadow: 0 12px 40px rgba(22,58,66,0.16) !important; padding: 1.25rem 1.5rem !important; }
.cky-consent-container .cky-title { font-family: var(--wp--preset--font-family--heading) !important; font-weight: 800 !important; font-size: 1.0625rem !important; color: var(--wp--preset--color--ink) !important; margin-bottom: 0.5rem !important; }
.cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des * { color: var(--wp--preset--color--slate) !important; font-size: 0.875rem !important; line-height: 1.55 !important; }
.cky-consent-container .cky-notice-des a { color: var(--wp--preset--color--teal-text) !important; text-decoration: underline !important; }
.cky-consent-container .cky-btn, .cky-preference-center .cky-btn { font-family: var(--wp--preset--font-family--heading) !important; font-weight: 800 !important; font-size: 0.875rem !important; border-radius: 999px !important; padding: 0.55rem 1.1rem !important; border-width: 2px !important; border-style: solid !important; line-height: 1.2 !important; }
.cky-consent-container .cky-btn-accept, .cky-preference-center .cky-btn-accept { background: var(--wp--preset--color--yellow) !important; border-color: var(--wp--preset--color--yellow) !important; color: var(--wp--preset--color--ink) !important; }
.cky-consent-container .cky-btn-reject, .cky-preference-center .cky-btn-reject { background: #fff !important; border-color: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--ink) !important; }
.cky-consent-container .cky-btn-customize, .cky-preference-center .cky-btn-preferences { background: transparent !important; border-color: transparent !important; color: var(--wp--preset--color--teal-text) !important; text-decoration: underline !important; padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.cky-consent-container .cky-btn:hover, .cky-preference-center .cky-btn:hover { filter: brightness(0.95); }
.cky-consent-container .cky-btn:focus-visible, .cky-preference-center .cky-btn:focus-visible { outline: 3px solid var(--wp--preset--color--teal) !important; outline-offset: 2px !important; }
.cky-preference-center { font-family: var(--wp--preset--font-family--body) !important; border-radius: 16px !important; color: var(--wp--preset--color--ink) !important; }
.cky-preference-center .cky-preference-title, .cky-preference-center .cky-accordion-btn { font-family: var(--wp--preset--font-family--heading) !important; font-weight: 800 !important; color: var(--wp--preset--color--ink) !important; }
.cky-preference-center .cky-preference-content-wrapper, .cky-preference-center .cky-accordion-header-des, .cky-preference-center .cky-accordion-header-des * { color: var(--wp--preset--color--slate) !important; }
.cky-preference-center .cky-accordion { border-color: var(--wp--preset--color--line) !important; }
.cky-preference-center .cky-switch input[type="checkbox"]:checked { background: var(--wp--preset--color--teal) !important; }
.cky-preference-center .cky-switch input[type="checkbox"] { background: #cfdadd !important; }
.cky-preference-center .cky-always-active { color: var(--wp--preset--color--teal-text) !important; }
.cky-btn-revisit-wrapper { background: var(--wp--preset--color--yellow) !important; }
.cky-btn-revisit-wrapper .cky-btn-revisit img { filter: brightness(0) saturate(100%) invert(18%) sepia(30%) saturate(900%) hue-rotate(150deg); }

/* 0.5.3: Odoo form cards. The frame fills the card so the form has the full column width. */
.tl-card--form { padding: 0; overflow: hidden; }
.tl-card--form .tl-embed { margin: 0; }
.tl-card--form .tl-embed iframe { display: block; border-radius: var(--tl-radius-card); }
.tl-embed iframe { min-height: 1000px; }
@media (max-width: 781px) { .tl-embed iframe { min-height: 1100px; } }

/* 0.6: Equipment mega menu */
.tl-header { position: relative; }
.tl-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: #fff; border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); box-shadow: 0 18px 40px rgba(22,58,66,0.14); }
.tl-mega[hidden] { display: none; }
.tl-mega__inner { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.5rem 1.25rem; }
.tl-mega__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem 1.5rem; }
.tl-mega--3 .tl-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tl-mega--5 .tl-mega__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .tl-mega--2 .tl-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-mega__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.5rem; border-radius: 12px; text-decoration: none; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.9375rem; line-height: 1.25; }
.tl-mega__link:hover, .tl-mega__link:focus-visible { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--teal-text); outline: none; }
.tl-mega__img { width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: 10px; background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--line); }
.tl-mega__img--empty { display: inline-block; }
.tl-mega__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); }
.tl-mega__cta { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--slate); }
.tl-mega__cta a { color: var(--wp--preset--color--teal-text); font-weight: 700; }
.tl-btn--outline { background: #fff; color: var(--wp--preset--color--ink); border: 2px solid var(--wp--preset--color--ink); }
.tl-btn--outline:hover { background: var(--wp--preset--color--ink); color: #fff; }
/* Desktop: the plain drop-down under Equipment is replaced by the panel. Toggle keeps its arrow for keyboard users. */
@media (min-width: 1024px) {
	.tl-header .tl-has-mega > .wp-block-navigation__submenu-container { display: none !important; }
	.tl-header .tl-has-mega.tl-mega-open > .wp-block-navigation-item__content { color: var(--wp--preset--color--teal-text); border-bottom-color: var(--wp--preset--color--yellow); }
}


/* 0.7: accessories and parts on the product page */
.tl-accs { margin-top: 2.5rem; }
.tl-accs__heading { margin: 0 0 0.5rem; }
.tl-accs__intro { color: var(--wp--preset--color--slate); max-width: 720px; margin: 0 0 1.25rem; }
.tl-accs__group { font-size: 1.0625rem; margin: 1.5rem 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.tl-accs__count { font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.75rem; background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 0.1rem 0.55rem; color: var(--wp--preset--color--slate); }
.tl-accs__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 1023px) { .tl-accs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tl-acc__link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--wp--preset--color--ink); height: 100%; }
.tl-acc__link:hover { border-color: var(--wp--preset--color--teal); }
.tl-acc__img, .tl-acc__link img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #fff; flex-shrink: 0; }
.tl-acc__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.tl-acc__name { font-weight: 700; font-size: 0.875rem; line-height: 1.3; }
.tl-acc__sku { font-size: 0.75rem; color: var(--wp--preset--color--slate); }
.tl-accs--fits .tl-accs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 0.7.3: continuous listings */
.tl-loadmore { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 2rem 0 1rem; }
.tl-loadmore__status { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--slate); }
.tl-pagination--hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 0.8: category questions */
.tl-faq { margin-top: 1.5rem; }
.tl-faq__heading { font-size: 1.375rem; margin: 0 0 0.75rem; }
.tl-faq__item { border-top: 1px solid var(--wp--preset--color--line); }
.tl-faq__item:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.tl-faq__q { cursor: pointer; padding: 0.85rem 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.tl-faq__q::-webkit-details-marker { display: none; }
.tl-faq__q::after { content: "+"; color: var(--wp--preset--color--teal-text); font-weight: 800; flex-shrink: 0; }
.tl-faq__item[open] .tl-faq__q::after { content: "\2013"; }
.tl-faq__a { padding: 0 0 1rem; color: var(--wp--preset--color--slate); max-width: 760px; }
.tl-faq__a p { margin: 0 0 0.6rem; }

/* 0.9.0: photo slots */
.tl-photo { margin: 0; overflow: hidden; background: var(--wp--preset--color--mist); position: relative; }
.tl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-photo__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.6rem 1rem; background: linear-gradient(to top, rgba(22,58,66,0.75), rgba(22,58,66,0)); color: #fff; font-size: 0.875rem; font-weight: 600; }
.tl-photo-strip { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .tl-photo-strip { grid-template-columns: 1fr; } }
.tl-cat-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
@media (max-width: 800px) { .tl-cat-hero { grid-template-columns: 1fr; } .tl-cat-hero .tl-photo { max-height: 220px; } }
.tl-hero-badge { margin-top: -2.5rem; margin-left: 1.5rem; max-width: 320px; position: relative; }

/* 0.9.2: fit product images, on-brand sorting select, mint service button, 15% smaller on desktop */
@media (min-width: 1024px) { html { font-size: 85%; } }
.wc-block-product-template .wc-block-product img, .wc-block-components-product-image img, .wc-block-grid__product-image img, .woocommerce ul.products li.product img { object-fit: contain !important; aspect-ratio: 1 / 1; width: 100%; height: auto; padding: 5%; box-sizing: border-box; background: #fff; }
.woocommerce-product-gallery__image img, .woocommerce-product-gallery__image a img { object-fit: contain !important; aspect-ratio: 1 / 1; width: 100%; background: #fff; }
.tl-btn--mint { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); }
.tl-header-actions .tl-btn--mint { display: none; }
@media (min-width: 1280px) { .tl-header-actions .tl-btn--mint { display: inline-flex; } }
.wc-block-catalog-sorting, .woocommerce-ordering { margin: 0; }
.wc-block-catalog-sorting select, .woocommerce-ordering select, .wc-block-components-select__container select, select.orderby { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 2.6rem 0 1rem; border: 2px solid var(--wp--preset--color--line); border-radius: 999px; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2300ABBF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.875rem; color: var(--wp--preset--color--ink); cursor: pointer; }
.wc-block-catalog-sorting select:focus-visible, .woocommerce-ordering select:focus-visible { outline: none; border-color: var(--wp--preset--color--teal); box-shadow: 0 0 0 4px var(--wp--preset--color--sky-light); }
.wc-block-catalog-sorting label { font-size: 0.8125rem; color: var(--wp--preset--color--slate); margin-right: 0.5rem; }

/* 0.9.2: photo hero band (full-bleed photo, content card) */
.tl-hero-band { position: relative; overflow: hidden; isolation: isolate; padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; min-height: 520px; display: flex; flex-direction: column; justify-content: center; }
.tl-hero-band > .tl-photo.tl-hero-band__bg { position: absolute; inset: 0; margin: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; z-index: -2; max-width: none; }
.tl-hero-band > .tl-photo.tl-hero-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.tl-hero-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,58,66,0.55) 0%, rgba(22,58,66,0.15) 60%, rgba(22,58,66,0) 100%); z-index: -1; }
/* 0.9.83: the card is more transparent so the photo reads through it. The blur
   keeps the text legible over a busy photo; browsers without it fall back to the
   flat tint, which is why the background sits at 0.86 rather than lower. */
.tl-hero-band__card { background: rgba(255,255,255,0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 24px; padding: 2.25rem; max-width: 640px; box-shadow: var(--tl-shadow-lift, 0 18px 40px rgba(22,58,66,0.10)); }
.tl-hero-band__card .tl-eyebrow { margin-top: 0; }
.tl-hero-band--tall { min-height: 620px; }
@media (max-width: 781px) { .tl-hero-band { min-height: 0; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .tl-hero-band__card { padding: 1.5rem; } }

/* 0.9.3: hero card sits left; discreet footer mark */
.tl-hero-band > .tl-hero-band__card { margin-left: max(1.25rem, calc((100% - 1280px) / 2 + 1rem)) !important; margin-right: auto !important; }
.tl-footer-mark { margin-top: 1rem; opacity: 0.75; }

/* 0.9.4: photo-only page banner, photo-backed cards */
.tl-page-banner { margin: 0 0 2rem !important; }
.tl-page-banner .tl-photo { border-radius: 0 !important; max-height: 380px; }
.tl-card--photo { position: relative; overflow: hidden; isolation: isolate; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.tl-card--photo { background: transparent !important; }
.tl-card--photo > .tl-photo { position: absolute; inset: 0; margin: 0 !important; border-radius: 0 !important; aspect-ratio: auto !important; z-index: 0; }
.tl-card--photo > .tl-photo img { width: 100%; height: 100%; object-fit: cover; }
.tl-card--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,58,66,0) 20%, rgba(22,58,66,0.85) 100%); z-index: 1; }
.tl-card--photo > *:not(.tl-photo) { position: relative; z-index: 2; }
.tl-card--photo :is(h2,h3,h4,p) { color: #fff !important; }

/* 0.9.7: larger mega menu tiles, tinted sections helper */
.tl-mega__img { width: 84px; height: 84px; border-radius: 14px; }
.tl-page-banner .tl-photo { max-height: 420px; }

/* 0.9.8: hero card on the right (photo subject on the left), photo location cards */
.tl-hero-band--right > .tl-hero-band__card { margin-left: auto !important; margin-right: max(1.25rem, calc((100% - 1280px) / 2 + 1rem)) !important; }
.tl-card--photo .tl-loc-name, .tl-card--photo a { color: #fff !important; }
.tl-card--photo.tl-card--tint { background: transparent !important; }

/* 0.9.11: full-width search row on small screens, shorter top bar on phones */
@media (max-width: 1100px) { .tl-header .tl-header-search { width: auto !important; max-width: none !important; flex: 1 1 200px; } .tl-header-actions { gap: 0.75rem; } }
@media (max-width: 600px) { .tl-topbar .wp-block-group > p:not(.tl-topbar-about):not(.tl-topbar-portal), .tl-topbar .tl-site-info--hours_short, .tl-topbar .tl-site-info--email { display: none; } }

/* 0.9.13: on phones the search row and Book a trial sit centred */
@media (max-width: 781px) { .tl-header-actions { justify-content: center; } .tl-header .tl-header-search { flex: 1 1 100%; max-width: 420px !important; margin: 0 auto; } .tl-header-actions .tl-btn { margin: 0 auto; } }

/* 0.9.14: brand badge on product cards, brand logo grid */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link, .woocommerce ul.products li.product > a:first-of-type { position: relative; display: block; }
.tl-brand-badge { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 26%; max-width: 92px; min-width: 56px; aspect-ratio: 5 / 3; background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; box-shadow: 0 2px 8px rgba(22,58,66,0.12); display: flex; align-items: center; justify-content: center; padding: 0.3rem 0.45rem; box-sizing: border-box; pointer-events: none; }
.woocommerce ul.products li.product .tl-brand-badge img { width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; object-fit: contain !important; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.tl-brand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--tl-brand-cols, 5), minmax(0, 1fr)); gap: 1rem; }
.tl-brand-grid__item { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 1.25rem 1.5rem; box-sizing: border-box; }
.tl-brand-grid__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 781px) { .tl-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .tl-brand-grid__item { padding: 0.9rem 1rem; } }
@media (max-width: 480px) { .tl-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 0.9.15: brand badge inside Product Collection block cards (category archives) */
.wc-block-product-template .wc-block-product { position: relative; }
.wc-block-product > .tl-brand-badge { top: 1.85rem; right: 1.85rem; }
.wc-block-product .tl-brand-badge img { padding: 0 !important; background: transparent !important; aspect-ratio: auto !important; }

/* 0.9.16: address lines stack everywhere (location tiles, contact page), not only in the footer */
.tl-addr__line { display: block; }

/* 0.9.18: below 1280px the search, Book a trial and Request a service drop into their own centred row under the main header */
@media (max-width: 1279px) {
	.tl-header > .wp-block-group { flex-wrap: wrap; }
	.tl-header-actions { flex: 1 1 100%; order: 10; margin-top: 0.75rem; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
	.tl-header-actions .tl-btn--mint { display: inline-flex; }
	.tl-header .tl-header-search { flex: 0 0 auto; width: 270px !important; max-width: 270px !important; margin: 0; }
	.tl-header-actions .tl-btn { margin: 0; }
}
@media (max-width: 600px) {
	.tl-header .tl-header-search { flex: 1 1 100%; width: 100% !important; max-width: 420px !important; margin: 0 auto; }
	.tl-header .tl-header-search .wp-block-search__inside-wrapper { width: 100%; }
	.tl-header-actions .tl-product-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; width: 100%; }
}

/* 0.9.20 */
/* Category tiles: product cut-outs sit centred in the frame, never cropped */
.tl-cat-img { display: block; margin: 0 auto; object-position: center; padding: 0.5rem; box-sizing: border-box; background: #fff; }
.tl-cat-card { align-items: stretch; }
.tl-mega__img { object-fit: contain; object-position: center; background: #fff; }

/* Shop and category search bar takes the header search styling */
.wc-block-product-search .wc-block-product-search__fields, .wp-block-woocommerce-product-search form { display: flex; align-items: center; gap: 0; border: 2px solid var(--wp--preset--color--line); border-radius: 999px; padding: 3px 3px 3px 1.1rem; background: #fff; max-width: 560px; }
.wc-block-product-search .wc-block-product-search__field, .wp-block-woocommerce-product-search input[type="search"] { border: 0 !important; background: transparent !important; font: inherit; font-size: 1rem; min-height: 44px; padding: 0; flex: 1 1 auto; box-shadow: none !important; }
.wc-block-product-search .wc-block-product-search__field:focus, .wp-block-woocommerce-product-search input[type="search"]:focus { outline: none; box-shadow: none !important; }
.wc-block-product-search .wc-block-product-search__fields:focus-within, .wp-block-woocommerce-product-search form:focus-within { border-color: var(--wp--preset--color--teal); box-shadow: 0 0 0 3px var(--wp--preset--color--sky-light); }
.wc-block-product-search .wc-block-product-search__button, .wp-block-woocommerce-product-search button { background: var(--wp--preset--color--teal); color: #fff; border: 0; border-radius: 999px; min-height: 40px; padding: 0 1.1rem; margin: 0; font-weight: 600; }
.wc-block-product-search .wc-block-product-search__button svg, .wp-block-woocommerce-product-search button svg { fill: #fff; }
.wc-block-product-search .wc-block-product-search__label { font-weight: 600; margin-bottom: 0.4rem; display: block; }

/* Photo tiles that link: the whole card is clickable, design unchanged */
.tl-card--photo :is(h2,h3,h4) a { text-decoration: none; }
.tl-card--photo :is(h2,h3,h4) a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.tl-card--photo:has(a:hover)::after, .tl-card--photo:has(a:focus-visible)::after { background: linear-gradient(180deg, rgba(22,58,66,0.1) 10%, rgba(22,58,66,0.9) 100%); }
.tl-card--photo:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--yellow); outline-offset: 3px; }

/* Tinted value tiles (About: five values, our commitment) */
.tl-card--mist { background: var(--wp--preset--color--mist) !important; }
.tl-card--sky { background: var(--wp--preset--color--sky-light, #EAF7FB) !important; }
.tl-card--mint { background: color-mix(in srgb, var(--wp--preset--color--mint) 35%, #fff) !important; }
.tl-card--lime { background: color-mix(in srgb, var(--wp--preset--color--lime) 45%, #fff) !important; }
.tl-card--sand { background: color-mix(in srgb, var(--wp--preset--color--yellow) 22%, #fff) !important; }
:is(.tl-card--mist,.tl-card--sky,.tl-card--mint,.tl-card--lime,.tl-card--sand) { border-color: transparent; }

/* Embedded forms and framed sections stay inside the page width */
.tl-embed, .tl-card--form { max-width: 100%; }
.tl-section-card { max-width: var(--wp--style--global--content-size, 900px); margin-left: auto; margin-right: auto; }

/* Wide (but not full bleed) hero photo, used on Home modifications */
.tl-photo--wide { width: 100%; margin-left: auto; margin-right: auto; }
.tl-photo--wide img { width: 100%; height: auto; object-fit: cover; }

/* Portal embed */
.tl-portal-frame { width: 100%; border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); overflow: hidden; background: #fff; }
.tl-portal-frame iframe { display: block; width: 100%; border: 0; min-height: 900px; }

/* 0.9.22 */
/* Category grid balances its rows: --tl-cat-cols is set by the block so tiles scale to fill the width */
.tl-cat-grid { grid-template-columns: repeat(var(--tl-cat-cols, 3), minmax(0, 1fr)); }
.tl-cat-grid--tight { gap: 0.9rem; }
.tl-cat-grid--tight .tl-cat-card { padding: 1rem; }
.tl-cat-grid--tight .tl-cat-img { height: 120px; }
.tl-cat-grid--tight .tl-cat-card .tl-imgbox.tl-cat-img { height: 120px; }
.tl-cat-grid--tight .tl-cat-title { font-size: 1rem; }
.tl-cat-grid--tight .tl-cat-desc { display: none; }
@media (max-width: 1200px) { .tl-cat-grid { grid-template-columns: repeat(min(var(--tl-cat-cols, 3), 4), minmax(0, 1fr)); } }
@media (max-width: 1000px) { .tl-cat-grid, .tl-cat-grid--4 { grid-template-columns: repeat(min(var(--tl-cat-cols, 2), 3), minmax(0, 1fr)); } }
@media (max-width: 600px) { .tl-cat-grid, .tl-cat-grid--4, .tl-cat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-cat-grid .tl-cat-img { height: 110px; } .tl-cat-grid .tl-cat-desc { display: none; } .tl-cat-grid .tl-cat-title { font-size: 1rem; } }

/* Mega menu: a toggle at every width, full screen on phones */
.tl-mega__close { display: none; position: absolute; top: 0.75rem; right: 0.9rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--wp--preset--color--mist); color: var(--wp--preset--color--ink); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.tl-mega__title { display: none; }
.tl-header .tl-has-mega > .wp-block-navigation-item__content { cursor: pointer; }
@media (max-width: 1023px) {
	.tl-mega { position: fixed; inset: 0; top: 0; z-index: 100001; overflow-y: auto; border: 0; box-shadow: none; -webkit-overflow-scrolling: touch; }
	.tl-mega__inner { position: relative; max-width: none; padding: 1.25rem 1.25rem 2rem; min-height: 100%; }
	.tl-mega__close { display: block; }
	.tl-mega__title { display: block; margin: 0.25rem 3rem 1rem 0; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.5rem; color: var(--wp--preset--color--ink); }
	.tl-mega__grid { grid-template-columns: 1fr; gap: 0.15rem; }
	.tl-mega--5 .tl-mega__grid, .tl-mega--3 .tl-mega__grid, .tl-mega--2 .tl-mega__grid { grid-template-columns: 1fr; }
	.tl-mega__link { padding: 0.7rem 0.5rem; font-size: 1.0625rem; border-bottom: 1px solid var(--wp--preset--color--line); border-radius: 0; }
	.tl-mega__img { width: 46px; height: 46px; }
	.tl-mega__foot { flex-direction: column; align-items: flex-start; }
	.tl-header .tl-has-mega > .wp-block-navigation__submenu-container { display: none !important; }
}


/* 0.9.24: portal sign-in card */
.tl-portal-signin { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.tl-portal-signin .wp-block-group { justify-content: center; }
.tl-portal-signin h2 { margin-top: 0; }

/* 0.9.25: portal block. The iframe carries .tl-portal-frame itself; height comes from the block setting. */
.tl-portal { width: 100%; }
iframe.tl-portal-frame { display: block; width: 100%; border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); background: #fff; }
.tl-portal-note { max-width: 720px; margin: 1rem auto 0; text-align: center; font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* 0.9.26: product video */
.tl-video { margin: 2rem 0; }
.tl-video__heading { font-size: 1.5rem; margin: 0 0 0.75rem; }
.tl-video__player { display: block; width: 100%; height: auto; border-radius: var(--tl-radius-card); background: #000; border: 1px solid var(--wp--preset--color--line); }

/* 0.9.33: brand filter on category archives */
.tl-brandfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0.9rem 1rem; background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); }
.tl-brandfilter__label { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--wp--preset--color--ink); margin-right: 0.25rem; }
.tl-chip { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--wp--preset--color--line); background: #ffffff; color: var(--wp--preset--color--ink); border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.875rem; line-height: 1.3; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
.tl-chip:hover, .tl-chip:focus { border-color: var(--wp--preset--color--teal); background: var(--wp--preset--color--sky); }
.tl-chip.is-on { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: #ffffff; }
.tl-chip__n { font-size: 0.75rem; opacity: 0.7; }
.tl-chip.is-on .tl-chip__n { opacity: 0.85; }

/* 0.9.37: training embed. Odoo lays the event cards 3 across above 992px, 2 across
   from 768px and 1 across below that, and each card is square. The block height set
   in the editor covers the desktop row; these rules add the extra rows so up to three
   sessions stay visible without scrolling inside the frame. */
iframe.tl-portal-frame[src*="/training"] { height: 520px; min-height: 520px; }
@media (max-width: 991px) {
	iframe.tl-portal-frame[src*="/training"] { height: 900px; min-height: 900px; }
}
@media (max-width: 767px) {
	iframe.tl-portal-frame[src*="/training"] { height: 1560px; min-height: 1560px; }
}

/* 0.9.39: in page anchors clear the sticky header, and buttons that scroll to a form move smoothly */
html { scroll-behavior: smooth; }
.tl-embed[id], .tl-portal[id] { scroll-margin-top: 120px; }

/* 0.9.39: category archive. Filters sit in a left column as radio buttons, tiles run four across. */
.tl-shop { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; align-items: start; }
.tl-shop__side { position: sticky; top: 110px; }
/* 0.9.72: the filter column scrolls on its own, so a long brand list can be worked through
   while the product grid stays put. overscroll-behavior stops the scroll handing back to the
   page when the list reaches its end. */
.tl-shop__side { max-height: calc(100vh - 130px); display: flex; overflow: hidden; }
.tl-shop__side .tl-filter { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--wp--preset--color--line) transparent; }
.tl-shop__side .tl-filter::-webkit-scrollbar { width: 8px; }
.tl-shop__side .tl-filter::-webkit-scrollbar-track { background: transparent; }
.tl-shop__side .tl-filter::-webkit-scrollbar-thumb { background: var(--wp--preset--color--line); border-radius: 4px; }
.tl-shop__side .tl-filter:hover::-webkit-scrollbar-thumb { background: var(--wp--preset--color--mint); }
.tl-filter { border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); background: #ffffff; padding: 1rem 1.1rem; }
.tl-filter__title { margin: 0 0 0.75rem; font-weight: 700; }
.tl-filter__group { border: 0; padding: 0; margin: 0 0 1.25rem; }
.tl-filter__group:last-of-type { margin-bottom: 0.5rem; }
.tl-filter__legend { padding: 0; margin: 0 0 0.45rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--muted); }
.tl-filter__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0; font-size: 0.9375rem; cursor: pointer; }
.tl-filter__row input { margin: 0; accent-color: var(--wp--preset--color--teal); flex: none; }
.tl-filter__row span:nth-of-type(1) { flex: 1 1 auto; }
.tl-filter__n { font-size: 0.75rem; color: var(--wp--preset--color--muted); }
.tl-filter__clear { font-size: 0.875rem; }
@media (max-width: 900px) {
	.tl-shop { grid-template-columns: minmax(0, 1fr); }
	.tl-shop__side { position: static; max-height: none; display: block; overflow: visible; }
	.tl-shop__side .tl-filter { min-height: 0; overflow: visible; }
}

/* 0.9.39: inline call to action lines under a section */
.tl-cta-line { margin-top: 1.5rem; }
.tl-cta-strip { text-align: center; padding-top: var(--wp--preset--spacing--40); padding-bottom: var(--wp--preset--spacing--40); }
.tl-cta-strip .tl-cta-line { margin: 0; }

/* 0.9.44: sizes and options table on a consolidated product */
.tl-options { margin: 2rem 0; }
.tl-options__heading { font-size: 1.5rem; margin: 0 0 0.5rem; }
.tl-options__intro { color: var(--wp--preset--color--muted); margin: 0 0 1rem; max-width: 60ch; }
.tl-options__scroll { overflow-x: auto; }
.tl-options__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tl-options__table th, .tl-options__table td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.tl-options__table thead th { background: var(--wp--preset--color--mist); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tl-options__table td:last-child { white-space: nowrap; color: var(--wp--preset--color--muted); }

/* ============================================================================
   0.9.59: phone layout. Written for older readers and low vision: nothing is
   hidden behind a tap except the category filter panel (a control). Text
   stays at its full size, every tap target is at least 44px, primary actions
   48px, and pinch zoom is never blocked. Desktop is unchanged: every rule
   here sits inside a max-width query.
   ========================================================================== */

/* --- Tablet and below: section spacing comes down a step ------------------ */
@media (max-width: 781px) {
	:root {
		--wp--preset--spacing--40: 1.5rem;
		--wp--preset--spacing--50: 2rem;
		--wp--preset--spacing--60: 2.75rem;
	}
	.has-global-padding { padding-left: 1rem; padding-right: 1rem; }
	/* Long words (product codes, email addresses) never push the page sideways */
	body { overflow-wrap: anywhere; }
	h1, h2, h3, h4 { overflow-wrap: normal; word-break: normal; hyphens: manual; }
	.tl-card { padding: 1.25rem; }
	.tl-band { border-radius: 20px; }
	.tl-band .tl-btn, .tl-cta-line .tl-btn { width: 100%; justify-content: center; }
	/* Buttons: 48px tall, centred text, whole width where they stack */
	.tl-btn { min-height: 48px; }
	.tl-btn--large { min-height: 52px; }
	.tl-product-actions { gap: 0.6rem; }
	.wp-block-buttons { gap: 0.6rem; }
	.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
	/* Photo hero band: card fills the width, photo shows above it */
	.tl-hero-band > .tl-hero-band__card, .tl-hero-band--right > .tl-hero-band__card { margin-left: 1rem !important; margin-right: 1rem !important; max-width: none; }
	.tl-hero-band__card { padding: 1.25rem !important; }
	.tl-dots--hero::before, .tl-dots--hero::after { display: none; }
	.tl-page-banner .tl-photo { max-height: 240px; }
	/* Phone and email links in the page body are easy to hit */
	main a[href^="tel:"], main a[href^="mailto:"], footer a[href^="tel:"], footer a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Header ----------------------------------------------------------------- */
@media (max-width: 781px) {
	/* Top bar: one row. Tagline and hours go, phone number stays as a real button-sized link. */
	.tl-topbar { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
	.tl-topbar > .wp-block-group { justify-content: center; }
	.tl-topbar .tl-site-info--tagline, .tl-topbar .tl-site-info--hours_short, .tl-topbar .tl-site-info--email { display: none; }
	.tl-topbar .wp-block-group .wp-block-group { gap: 0.25rem 1rem; justify-content: center; }
	.tl-topbar .wp-block-group > p:not(.tl-topbar-about):not(.tl-topbar-portal) { display: none; }
	.tl-topbar a, .tl-topbar .tl-site-info a { display: inline-flex; align-items: center; min-height: 40px; font-size: 1rem; text-decoration: none; }
	.tl-topbar .tl-site-info--phone a { font-weight: 800; }

	/* Main header: logo left, Menu right, then search, then two equal buttons */
	.tl-header { padding-top: 0.6rem !important; padding-bottom: 0.75rem !important; }
	.tl-header > .wp-block-group { flex-wrap: wrap; align-items: center; row-gap: 0.75rem; }
	.tl-header .wp-block-site-logo img, .tl-header .tl-logo__img { max-height: 64px; width: auto; }
	.tl-logo { flex: 0 0 auto; }
	.tl-logo__img { max-width: 132px; height: auto; }
	.tl-header .wp-block-navigation { margin-left: auto; }

	/* The hamburger becomes a labelled "Menu" button, 48px tall */
	.tl-header .wp-block-navigation__responsive-container-open { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; padding: 0 0.9rem; border: 2px solid var(--wp--preset--color--ink); border-radius: 999px; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.9375rem; background: #fff; }
	.tl-header .wp-block-navigation__responsive-container-open::after { content: "Menu"; }
	.tl-header .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

	/* Search row, then the two action buttons side by side */
	.tl-header-actions { flex: 1 1 100%; order: 10; margin-top: 0 !important; display: flex; flex-wrap: wrap; gap: 0.6rem !important; justify-content: stretch; }
	.tl-header .tl-header-search { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
	.tl-header .wp-block-search__inside-wrapper { min-height: 48px; padding-left: 1rem; }
	.tl-header .wp-block-search__input { font-size: 1rem; min-height: 42px; }
	.tl-header .wp-block-search__button { min-height: 42px; min-width: 48px; }
	.tl-header-actions .tl-product-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; margin: 0; }
	.tl-header-actions .tl-btn { display: inline-flex; justify-content: center; text-align: center; width: 100%; margin: 0 !important; padding: 0 0.5rem; min-height: 48px; font-size: 0.9375rem; white-space: nowrap; }
	.tl-header-actions .tl-btn--mint { display: inline-flex; }

	/* Slide-in menu: big, well spaced links */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 1rem; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; min-height: 48px; font-size: 1.125rem; font-weight: 700; padding: 0.35rem 0; border-bottom: 0; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.0625rem; font-weight: 600; padding-left: 1rem; }
	.wp-block-navigation__responsive-container-close { min-width: 48px; min-height: 48px; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
	.tl-mega__link { min-height: 56px; font-size: 1.125rem; }
	.tl-mega__close { width: 48px; height: 48px; }
}
@media (max-width: 360px) {
	.tl-header-actions .tl-product-actions { grid-template-columns: 1fr; }
	.tl-logo__img { max-width: 118px; }
}

/* --- Grids and tiles -------------------------------------------------------- */
@media (max-width: 600px) {
	/* Editor grids (home tiles, value tiles, location cards) run one per row so text stays large */
	.wp-block-group.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem; }
	/* Category tiles stay two across: they are pictures with a short title, and two across keeps browsing quick */
	.tl-cat-grid, .tl-cat-grid--4, .tl-cat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.tl-cat-grid .tl-cat-card { padding: 0.75rem; }
	.tl-cat-grid .tl-cat-title { font-size: 1.0625rem; line-height: 1.25; }
	.tl-cat-grid .tl-cat-img { height: 120px; }
	.tl-trust { grid-template-columns: 1fr; gap: 0.5rem; }
	.tl-trust--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tl-trust__item { font-size: 0.9375rem; }
	.tl-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
	.tl-refs__grid { grid-template-columns: 1fr; }
	.tl-accs__grid, .tl-accs--fits .tl-accs__grid { grid-template-columns: 1fr; }
	.tl-acc__link { min-height: 64px; }
	.tl-acc__name { font-size: 1rem; }
	.tl-acc__sku { font-size: 0.875rem; }
	.tl-mega__grid, .tl-mega--5 .tl-mega__grid, .tl-mega--3 .tl-mega__grid, .tl-mega--2 .tl-mega__grid { grid-template-columns: 1fr; }
	.tl-need-cards { gap: 0.75rem; }
	.tl-photo-strip { gap: 0.75rem; }
}

/* --- Product listings: one card per row, image beside the words ------------- */
@media (max-width: 600px) {
	.wc-block-product-template.wc-block-product-template__responsive, .wc-block-product-template { grid-template-columns: minmax(0, 1fr) !important; gap: 0.75rem !important; }
	.wc-block-product-template .wc-block-product { display: grid; grid-template-columns: 38% minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.3rem; align-items: start; padding: 0.9rem; }
	.wc-block-product-template .wc-block-product > .wc-block-components-product-image { grid-column: 1; grid-row: 1 / span 5; margin: 0; }
	.wc-block-product-template .wc-block-product > :not(.wc-block-components-product-image):not(.tl-brand-badge):not(.tl-product-actions) { grid-column: 2; }
	.wc-block-catalog-sorting, .woocommerce-ordering { width: 100%; }
	.wc-block-product-template .wc-block-product .wp-block-post-title { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
	.wc-block-product-template .wc-block-product .tl-sku { font-size: 0.875rem; margin: 0; }
	.wc-block-product-template .wc-block-product .tl-product-actions { grid-column: 1 / -1; margin-top: 0.5rem; }
	.wc-block-product-template .wc-block-product .tl-product-actions .tl-btn { flex: 1 1 100%; justify-content: center; }
	.wc-block-product > .tl-brand-badge { top: 0.5rem; right: 0.5rem; width: 22%; min-width: 48px; }
	/* Sort control and result count stack */
	.tl-shop__main > .wp-block-group.is-layout-flex { flex-direction: column; align-items: stretch; gap: 0.6rem; }
	.wc-block-catalog-sorting select, .woocommerce-ordering select, select.orderby { width: 100%; min-height: 48px; font-size: 1rem; }
	.tl-brandfilter { padding: 0.75rem; gap: 0.5rem; }
	.tl-chip { min-height: 44px; padding: 0.4rem 1rem; font-size: 0.9375rem; }
	.tl-loadmore .tl-btn { width: 100%; justify-content: center; }
}

/* --- Category filter: folds into one large button on small screens ---------- */
@media (max-width: 900px) {
	.tl-shop { gap: 1rem; }
	.tl-filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 52px; padding: 0 1.1rem; margin: 0 0 0.75rem; border: 2px solid var(--wp--preset--color--ink); border-radius: 999px; background: #fff; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1rem; cursor: pointer; text-align: left; }
	.tl-filter-toggle__count { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: 0.875rem; }
	.tl-filter-toggle__arrow { margin-left: auto; transition: transform 0.15s ease; }
	.tl-filter-toggle[aria-expanded="true"] .tl-filter-toggle__arrow { transform: rotate(180deg); }
	.tl-filter-toggle:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 2px; }
	.tl-filter.is-folded { display: none; }
	.tl-filter { margin-bottom: 1rem; }
	.tl-filter__row { min-height: 44px; font-size: 1rem; padding: 0.2rem 0; }
	.tl-filter__row input { width: 22px; height: 22px; }
	.tl-filter__legend { font-size: 0.875rem; }
	.tl-filter__clear { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
}
/* Without the script (or with it delayed), the panel simply stays open. The jump list is a phone-only aid. */
.tl-filter-toggle { display: none; }
.tl-jump { display: none; }
@media (max-width: 781px) { .tl-jump { display: block; } }

/* --- Product page ----------------------------------------------------------- */
@media (max-width: 781px) {
	.tl-product-hero { padding-top: 0.75rem !important; }
	.tl-product-hero .wp-block-woocommerce-product-image-gallery { padding: 0.75rem; border-radius: 16px; }
	.tl-pdp-columns, .tl-pdp-columns.tl-pdp-columns--flip { flex-direction: column; gap: 1.25rem !important; }
	.tl-pdp-columns > .wp-block-column { flex-basis: 100% !important; width: 100%; }
	.tl-pdp-excerpt { font-size: 1.0625rem; }
	.tl-howto__row { padding: 0.9rem 0.9rem; }
	.tl-howto__action { min-height: 44px; font-size: 1rem; align-self: stretch; }
	.tl-howto__label { font-size: 1.0625rem; }
	.tl-howto__note { font-size: 0.9375rem; }
	.tl-pdp-clinician { padding: 0.9rem 1rem; }
	/* Swatches and size pills are easy to hit */
	.tl-swatch { min-height: 44px; font-size: 1rem; }
	.tl-swatch--circle { width: 48px; height: 48px; min-height: 48px; }
	.tl-product-hero table.variations select { min-height: 48px; font-size: 1rem; width: 100%; }
	.tl-product-hero table.variations, .tl-product-hero table.variations tbody, .tl-product-hero table.variations tr, .tl-product-hero table.variations th, .tl-product-hero table.variations td { display: block; width: 100%; }
	.tl-product-hero table.variations th { padding: 0.6rem 0 0.2rem !important; }

	/* "On this page" jump list, added by mobile.js under the buy box */
	.tl-jump { margin: 1.25rem 0 0; padding: 1rem 1.1rem; background: var(--wp--preset--color--mist); border-radius: 16px; }
	.tl-jump__title { margin: 0 0 0.4rem; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wp--preset--color--teal-text); }
	.tl-jump__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
	.tl-jump__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 2px solid var(--wp--preset--color--line); border-radius: 999px; background: #fff; color: var(--wp--preset--color--ink); font-weight: 700; font-size: 0.9375rem; text-decoration: none; }
	.tl-jump__list a:hover, .tl-jump__list a:focus-visible { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal-text); }
	[data-tl-section] { scroll-margin-top: 1rem; }

	/* Specification table: two clear columns, never sideways */
	.tl-spec-table { font-size: 1rem; }
	.tl-spec-table th { width: 42%; padding-right: 0.75rem; }
	.tl-spec-table th, .tl-spec-table td { padding-top: 0.7rem; padding-bottom: 0.7rem; overflow-wrap: anywhere; }
	.tl-docs__list a { min-height: 52px; font-size: 1rem; }
	.tl-docs__list a span:first-child { flex: 1 1 auto; }
	.tl-video { margin: 1.5rem 0; }
	.tl-options__heading, .tl-video__heading, .tl-docs h2, .tl-faq__heading { font-size: 1.375rem; }

	/* Wide tables scroll inside their own box, first column stays put, and a hint says so */
	.tl-compare__scroll, .tl-options__scroll { position: relative; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
	.tl-compare__table tbody th, .tl-options__table th:first-child, .tl-options__table td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 4px 0 8px -6px rgba(22,58,66,0.25); }
	.tl-compare__table thead th:first-child { position: sticky; left: 0; background: var(--wp--preset--color--mist); z-index: 2; }
	.tl-compare__table, .tl-options__table { font-size: 0.9375rem; }
	.tl-compare__table th, .tl-compare__table td { padding: 0.65rem 0.75rem; }
	.tl-scroll-hint { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--wp--preset--color--slate); }
	.tl-scroll-hint::before { content: "\2194"; font-size: 1.25rem; color: var(--wp--preset--color--teal-text); }

	/* Similar products: two small cards a row */
	.tl-related .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.75rem; }
	.tl-related .tl-card { padding: 0.75rem; }
	.tl-related .wp-block-post-title { font-size: 1rem; line-height: 1.3; }
	.tl-faq__q { min-height: 48px; font-size: 1.0625rem; }

	/* Sticky action bar: two full-width buttons, clear of the phone's home bar */
	.tl-sticky__inner { padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom)); }
	.tl-sticky .tl-product-actions { width: 100%; gap: 0.6rem; }
	.tl-sticky .tl-btn { flex: 1 1 0; min-height: 50px; justify-content: center; padding: 0 0.5rem; }
	body.tl-has-sticky main { padding-bottom: 5rem; }
}

/* --- Footer ----------------------------------------------------------------- */
@media (max-width: 781px) {
	footer .wp-block-columns { gap: 1.75rem !important; }
	footer .tl-footer-heading { font-size: 1.1875rem; margin-bottom: 0.5rem; }
	footer .wp-block-list li { margin-bottom: 0; }
	footer .wp-block-list a, footer .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }
	footer .wp-block-navigation__container { flex-direction: column; gap: 0; }
	footer .wp-block-navigation-item { width: 100%; }
	footer .tl-site-info, footer p { font-size: 1rem; }
	footer .wp-block-group.is-content-justification-space-between { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
	/* Training and portal frames on phones */
	iframe.tl-portal-frame[src*="/training"] { height: 1560px; min-height: 1560px; }
}

/* --- Small phones ----------------------------------------------------------- */
@media (max-width: 400px) {
	.has-global-padding { padding-left: 0.9rem; padding-right: 0.9rem; }
	.wp-block-post-content h2:not([class*="has-"]) { font-size: 1.5rem; }
	.wp-block-post-content h3:not([class*="has-"]) { font-size: 1.25rem; }
	.tl-related .wp-block-post-template { grid-template-columns: 1fr !important; }
	.tl-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 0.9.60: category archive uses the wide width (1280px), and the filter column only exists
   when the filter block actually renders. Four tiles a row stay four, so each tile gets wider. */
.tl-shop { max-width: var(--wp--style--global--wide-size, 1280px) !important; margin-left: auto; margin-right: auto; }
.tl-shop:not(:has(.tl-filter)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
	.tl-shop .wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* 0.9.62: category header photo taken from a product image sits whole on white, never cropped */
.tl-photo--contain { background: #fff; border: 1px solid var(--wp--preset--color--line); }
.tl-photo--contain img { object-fit: contain; padding: 6%; box-sizing: border-box; }

/* 0.9.64: footer social links, driven by Appearance > Thrive Lifecare > Social and profile links. */
.tl-social{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .6rem}
.tl-social__item{margin:0}
.tl-social__link{display:inline-block;padding:.3rem .75rem;border:1px solid var(--wp--preset--color--line);border-radius:999px;font-size:.8125rem;font-weight:600;color:var(--wp--preset--color--teal-text);text-decoration:none;background:#fff}
.tl-social__link:hover,.tl-social__link:focus{border-color:var(--wp--preset--color--teal);color:var(--wp--preset--color--ink)}
.tl-social__link:focus-visible{outline:2px solid var(--wp--preset--color--teal);outline-offset:2px}

/* 0.9.65: catalogue search box (Products page). WooCommerce wraps the input and button in
   .wc-block-product-search__fields, so the pill styling belongs on that box only. The form
   around it is plain, and the Search label sits above the pill. */
.wp-block-woocommerce-product-search form:has(.wc-block-product-search__fields) { display: block; border: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; max-width: 560px; }
.wp-block-woocommerce-product-search form:has(.wc-block-product-search__fields):focus-within { border-color: transparent; box-shadow: none; }
.wc-block-product-search .wc-block-product-search__fields { width: 100%; max-width: none; }

/* 0.9.68: references carousel. The cards keep their grid look but sit in a scroll-snap track,
   with a large arrow either side and page dots underneath. No autoplay. Grid view (carousel
   switched off in the editor) is unchanged. */
.tl-refs--carousel .tl-refs__carousel { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev track next" "dots dots dots"; align-items: center; gap: 0.75rem; }
.tl-refs__btn--prev { grid-area: prev; } .tl-refs__btn--next { grid-area: next; } .tl-refs--carousel .tl-refs__grid { grid-area: track; } .tl-refs__dots { grid-area: dots; }
.tl-refs--carousel .tl-refs__grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.5rem * (var(--tl-refs-cols, 3) - 1)) / var(--tl-refs-cols, 3)); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px; margin: -4px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tl-refs--carousel .tl-refs__grid::-webkit-scrollbar { display: none; }
.tl-refs--carousel .tl-refs__grid:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 4px; border-radius: 16px; }
.tl-refs--carousel .tl-ref { scroll-snap-align: start; height: 100%; }
.tl-refs--1.tl-refs--carousel { --tl-refs-cols: 1; } .tl-refs--2.tl-refs--carousel { --tl-refs-cols: 2; } .tl-refs--3.tl-refs--carousel { --tl-refs-cols: 3; } .tl-refs--4.tl-refs--carousel { --tl-refs-cols: 4; }
.tl-refs__btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--wp--preset--color--ink); background: #fff; color: var(--wp--preset--color--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.tl-refs__btn:hover { background: var(--wp--preset--color--ink); color: #fff; }
.tl-refs__btn:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 2px; }
.tl-refs__btn:disabled { opacity: 0.3; cursor: default; background: #fff; color: var(--wp--preset--color--ink); }
.tl-refs__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.tl-refs__dot { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tl-refs__dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--line); border: 2px solid #c9d9dd; transition: transform 0.15s ease, background 0.15s ease; }
.tl-refs__dot.is-on::before { background: var(--wp--preset--color--teal); border-color: var(--wp--preset--color--teal); transform: scale(1.25); }
.tl-refs__dot:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: -4px; border-radius: 50%; }
.tl-refs--single .tl-refs__btn, .tl-refs--single .tl-refs__dots { display: none; }
@media (max-width: 1023px) { .tl-refs--3.tl-refs--carousel, .tl-refs--4.tl-refs--carousel { --tl-refs-cols: 2; } }
@media (max-width: 781px) {
	.tl-refs--carousel { --tl-refs-cols: 1 !important; }
	/* Phones: the card takes the full width, and the arrows sit under it either side of the dots */
	.tl-refs--carousel .tl-refs__carousel { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "track track track" "prev dots next"; }
	.tl-refs--carousel .tl-refs__grid { grid-auto-columns: 100%; }
	.tl-refs__dots { margin-top: 0; }
}

/* 0.9.71: home hero photo anchored to the top so the faces stay in view on wide screens
   (cover cropping used to take the top of the picture off above about 1400 px). */
.tl-hero-band > .tl-photo.tl-hero-band__bg img { object-position: 55% 0; }


/* ============================================================================
   0.9.74: product grid column guard.

   Hummingbird's Used CSS inlines WooCommerce's small screen stylesheet
   (woocommerce-smallscreen.css) into the page without its
   @media only screen and (max-width: 768px) wrapper. Its two column rules then
   apply at every width, and because they land after the columns-N rules at the
   same specificity they win, so every [products] grid renders two across
   instead of three. It comes back every time that cache is rebuilt.

   These rules put WooCommerce's own desktop widths back above the small screen
   breakpoint. They are deliberately !important: they have to beat a stylesheet
   that is injected after the theme's.
   ========================================================================= */
@media (min-width: 769px) {
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product { float: left !important; clear: none !important; margin: 0 3.8% 2.992em 0 !important; }
	.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
	.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) { float: left !important; clear: none !important; }
	.woocommerce ul.products.columns-1 li.product, .woocommerce.columns-1 ul.products li.product { width: 100% !important; margin-right: 0 !important; }
	.woocommerce ul.products.columns-2 li.product, .woocommerce.columns-2 ul.products li.product { width: 48% !important; }
	.woocommerce ul.products.columns-3 li.product, .woocommerce.columns-3 ul.products li.product { width: 30.75% !important; }
	.woocommerce ul.products.columns-4 li.product, .woocommerce.columns-4 ul.products li.product { width: 22.05% !important; }
	.woocommerce ul.products.columns-5 li.product, .woocommerce.columns-5 ul.products li.product { width: 16.95% !important; }
	.woocommerce ul.products.columns-6 li.product, .woocommerce.columns-6 ul.products li.product { width: 13.5% !important; }
	/* 0.9.85: these two must carry [class*="columns-"] so they outrank the generic margin rule above (0,5,2 v 0,4,2); without it the third tile keeps its right margin and wraps to a new row. */
	.woocommerce ul.products[class*="columns-"] li.product.first, .woocommerce-page ul.products[class*="columns-"] li.product.first { clear: both !important; }
	.woocommerce ul.products[class*="columns-"] li.product.last, .woocommerce-page ul.products[class*="columns-"] li.product.last { margin-right: 0 !important; }
}


/* ============================================================================
   0.9.75: two reusable patterns.

   tl-choose  the Contact page chooser. Six reasons as buttons; the one you click
              opens its form underneath. Built on details/summary so it works with
              no JavaScript and keyboard users get it for free.
   tl-icards  icon cards, for turning a wall of bullets into something scannable.
   ========================================================================= */
.tl-choose { display: grid; gap: 0.75rem; margin: 1.75rem 0; }
.tl-choose__item { border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); background: #ffffff; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.tl-choose__item:hover { border-color: var(--wp--preset--color--mint); }
.tl-choose__item[open] { border-color: var(--wp--preset--color--teal); box-shadow: 0 8px 24px rgba(22, 58, 66, 0.08); }
.tl-choose__item > summary, .tl-choose__q { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.15rem; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.0625rem; color: var(--wp--preset--color--ink); }
.tl-choose__item > summary::-webkit-details-marker, .tl-choose__q::-webkit-details-marker { display: none; }
.tl-choose__item > summary::marker { content: ""; }
.tl-choose__item > summary::after, .tl-choose__q::after { content: "+"; margin-left: auto; color: var(--wp--preset--color--teal-text); font-weight: 800; font-size: 1.375rem; line-height: 1; flex: none; }
.tl-choose__item[open] > summary::after, .tl-choose__item[open] .tl-choose__q::after { content: "\2013"; }
.tl-choose__item > summary:focus-visible, .tl-choose__q:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: -3px; }
.tl-choose__ico { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--wp--preset--color--mist); color: var(--wp--preset--color--teal-text); display: inline-flex; align-items: center; justify-content: center; }
.tl-choose__ico svg { width: 22px; height: 22px; display: block; }
.tl-choose__item--primary > summary, .tl-choose__item--primary .tl-choose__q { background: var(--wp--preset--color--yellow); }
.tl-choose__item--primary .tl-choose__ico { background: rgba(22, 58, 66, 0.12); color: var(--wp--preset--color--ink); }
.tl-choose__item--primary > summary::after, .tl-choose__item--primary .tl-choose__q::after { color: var(--wp--preset--color--ink); }
.tl-choose__body { padding: 0.25rem 1.15rem 1.25rem; color: var(--wp--preset--color--slate); }
.tl-choose__body > p { margin: 0 0 0.9rem; max-width: 70ch; }
.tl-choose__body .tl-form, .tl-choose__body iframe { margin-top: 0.25rem; }

.tl-icards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.tl-icards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-icard { border: 1px solid var(--wp--preset--color--line); border-radius: var(--tl-radius-card); background: #ffffff; padding: 1.35rem; display: flex; flex-direction: column; gap: 0.55rem; }
.tl-icard__ico { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--wp--preset--color--mist); color: var(--wp--preset--color--teal-text); display: inline-flex; align-items: center; justify-content: center; }
.tl-icard__ico svg { width: 24px; height: 24px; display: block; }
.tl-icard__t { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 1.0625rem; line-height: 1.3; color: var(--wp--preset--color--ink); }
.tl-icard p { margin: 0; color: var(--wp--preset--color--slate); font-size: 0.9375rem; }
@media (max-width: 900px) { .tl-icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.tl-icards, .tl-icards--2 { grid-template-columns: 1fr; }
	.tl-choose__item > summary, .tl-choose__q { min-height: 56px; font-size: 1.125rem; }
}


/* ============================================================================
   0.9.77: icon cards take their icon from a modifier class, so the card body
   stays ordinary editable blocks. The glyph is a CSS mask, so it picks up the
   brand colour and no image files are involved.
   ========================================================================= */
.tl-icard[class*="tl-icard--"]::before {
	content: ""; width: 46px; height: 46px; flex: none; border-radius: 14px; display: block;
	background: var(--wp--preset--color--teal-text);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 26px 26px; mask-size: 26px 26px;
}
.tl-icard--quote::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M9%2013h6%22%2F%3E%3Cpath%20d%3D%22M9%2017h4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z%22%2F%3E%3Cpath%20d%3D%22M14%203v5h5%22%2F%3E%3Cpath%20d%3D%22M9%2013h6%22%2F%3E%3Cpath%20d%3D%22M9%2017h4%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--funding::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v10%22%2F%3E%3Cpath%20d%3D%22M15%209.5c0-1.4-1.3-2-3-2s-3%20.6-3%202%201.2%201.8%203%202.2%203%20.8%203%202.3-1.3%202-3%202-3-.6-3-2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v10%22%2F%3E%3Cpath%20d%3D%22M15%209.5c0-1.4-1.3-2-3-2s-3%20.6-3%202%201.2%201.8%203%202.2%203%20.8%203%202.3-1.3%202-3%202-3-.6-3-2%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--spec::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%209h10%22%2F%3E%3Cpath%20d%3D%22M7%2013h10%22%2F%3E%3Cpath%20d%3D%22M7%2017h6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%209h10%22%2F%3E%3Cpath%20d%3D%22M7%2013h10%22%2F%3E%3Cpath%20d%3D%22M7%2017h6%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--person::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M4.5%2020a7.5%207.5%200%200%201%2015%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M4.5%2020a7.5%207.5%200%200%201%2015%200%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--advice::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%201%201-3.1-6.3%22%2F%3E%3Cpath%20d%3D%22M9%2012l2.5%202.5L21%205%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a8%208%200%201%201-3.1-6.3%22%2F%3E%3Cpath%20d%3D%22M9%2012l2.5%202.5L21%205%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--service::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200%205%205L21%2012l-8.5%208.5a2.1%202.1%200%200%201-3-3L18%209l.7-1.3z%22%2F%3E%3Cpath%20d%3D%22M6%206l3%203%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200%205%205L21%2012l-8.5%208.5a2.1%202.1%200%200%201-3-3L18%209l.7-1.3z%22%2F%3E%3Cpath%20d%3D%22M6%206l3%203%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--home::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011l8-7%208%207%22%2F%3E%3Cpath%20d%3D%22M6%2010v9a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1v-9%22%2F%3E%3Cpath%20d%3D%22M10%2020v-6h4v6%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2011l8-7%208%207%22%2F%3E%3Cpath%20d%3D%22M6%2010v9a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1v-9%22%2F%3E%3Cpath%20d%3D%22M10%2020v-6h4v6%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--showroom::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l1.6-4.2A2%202%200%200%201%206.5%203.5h11a2%202%200%200%201%201.9%201.3L21%209%22%2F%3E%3Cpath%20d%3D%22M3%209h18v2a3%203%200%200%201-6%200%203%203%200%200%201-6%200%203%203%200%200%201-6%200z%22%2F%3E%3Cpath%20d%3D%22M5%2013.5V20h14v-6.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l1.6-4.2A2%202%200%200%201%206.5%203.5h11a2%202%200%200%201%201.9%201.3L21%209%22%2F%3E%3Cpath%20d%3D%22M3%209h18v2a3%203%200%200%201-6%200%203%203%200%200%201-6%200%203%203%200%200%201-6%200z%22%2F%3E%3Cpath%20d%3D%22M5%2013.5V20h14v-6.5%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--partner::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%2013.5%2011%2016l4.5-4.5%22%2F%3E%3Cpath%20d%3D%22M12%2021s-7-4.3-7-9.5A4.5%204.5%200%200%201%2012%208a4.5%204.5%200%200%201%207%203.5C19%2016.7%2012%2021%2012%2021z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%2013.5%2011%2016l4.5-4.5%22%2F%3E%3Cpath%20d%3D%22M12%2021s-7-4.3-7-9.5A4.5%204.5%200%200%201%2012%208a4.5%204.5%200%200%201%207%203.5C19%2016.7%2012%2021%2012%2021z%22%2F%3E%3C%2Fsvg%3E"); }
.tl-icard--mobility::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2217.5%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M7.5%2017.5V8h5l3%206h2%22%2F%3E%3Cpath%20d%3D%22M12.5%208h4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2217.5%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M7.5%2017.5V8h5l3%206h2%22%2F%3E%3Cpath%20d%3D%22M12.5%208h4%22%2F%3E%3C%2Fsvg%3E"); }


/* ============================================================================
   0.9.79: quote list. The list lives in the browser, so nothing here depends on
   a session cookie and every page stays cacheable.
   ========================================================================= */

/* Add to quote button. The added state is a filled tick, not a colour change
   alone, so it reads without relying on colour. */
.tl-quote-btn { cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 0.5rem; }
.tl-quote-btn::before {
	content: ""; width: 18px; height: 18px; flex: none; display: block;
	background: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
	-webkit-mask-size: 18px 18px; mask-size: 18px 18px;
	-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14%22%2F%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14%22%2F%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
}
.tl-quote-btn.is-added { background: var(--wp--preset--color--mint); border-color: var(--wp--preset--color--mint); color: var(--wp--preset--color--ink); }
.tl-quote-btn.is-added::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013l4%204L19%207%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2013l4%204L19%207%22%2F%3E%3C%2Fsvg%3E");
}
.tl-btn--full { width: 100%; justify-content: center; }
.tl-quote-add { margin-top: 0.5rem; }

/* Header counter. */
.tl-quote-counter { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--wp--preset--color--ink); font-weight: 700; }
.tl-quote-counter:hover { color: var(--wp--preset--color--teal-text); }
.tl-quote-counter__icon {
	width: 20px; height: 20px; display: block; background: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 20px 20px; mask-size: 20px 20px;
	-webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h12%22%2F%3E%3Cpath%20d%3D%22M8%2012h12%22%2F%3E%3Cpath%20d%3D%22M8%2018h12%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2218%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h12%22%2F%3E%3Cpath%20d%3D%22M8%2012h12%22%2F%3E%3Cpath%20d%3D%22M8%2018h12%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%226%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2212%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2218%22%20r%3D%221%22%2F%3E%3C%2Fsvg%3E");
}
.tl-quote-counter__num { background: var(--wp--preset--color--yellow); color: var(--wp--preset--color--ink); border-radius: 999px; min-width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; padding: 0 0.4rem; }
.tl-quote-counter.is-empty .tl-quote-counter__num { background: var(--wp--preset--color--line); }

/* The list. */
.tl-quote-rows { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--wp--preset--color--line); }
.tl-quote-row { display: grid; grid-template-columns: 72px 1fr 6rem auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.tl-quote-row__img img { width: 72px; height: 72px; object-fit: contain; background: #fff; border-radius: 8px; }
.tl-quote-row__main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.tl-quote-row__name { font-weight: 700; color: var(--wp--preset--color--ink); text-decoration: none; }
.tl-quote-row__name:hover { color: var(--wp--preset--color--teal-text); text-decoration: underline; }
.tl-quote-row__sku { font-size: 0.875rem; color: #5A7076; }
.tl-quote-row__qty input { width: 5rem; padding: 0.5rem; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; }
.tl-quote-rm, .tl-link-btn { background: none; border: 0; padding: 0.25rem 0; color: var(--wp--preset--color--teal-text); text-decoration: underline; cursor: pointer; font: inherit; }
.tl-quote-actions { margin: 0 0 2rem; }

/* The form. */
.tl-quote-form { background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--line); border-radius: 16px; padding: 1.75rem; }
.tl-quote-intro { max-width: 60ch; }
.tl-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.tl-field { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.tl-field--wide { grid-column: 1 / -1; margin-top: 1rem; }
.tl-field label { font-weight: 700; font-size: 0.9375rem; }
.tl-field input, .tl-field select, .tl-field textarea { padding: 0.65rem 0.75rem; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; background: #fff; font: inherit; width: 100%; }
.tl-field input:focus-visible, .tl-field select:focus-visible, .tl-field textarea:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 1px; }
.tl-req { color: #B3261E; }
.tl-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tl-quote-consent { margin: 1.25rem 0 0; font-size: 0.9375rem; }
.tl-quote-consent label { display: flex; gap: 0.5rem; align-items: flex-start; }
.tl-quote-submit { margin: 1.25rem 0 0; }
.tl-quote-msg { margin: 0.75rem 0 0; min-height: 1.5em; }
.tl-quote-msg--error { color: #B3261E; font-weight: 700; }
.tl-quote-done { margin-bottom: 2rem; }
.tl-quote-done:focus { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 4px; }

@media (max-width: 782px) {
	.tl-field-grid { grid-template-columns: 1fr; }
	.tl-quote-row { grid-template-columns: 56px 1fr; grid-template-areas: "img main" "qty rm"; row-gap: 0.75rem; }
	.tl-quote-row__img { grid-area: img; }
	.tl-quote-row__img img { width: 56px; height: 56px; }
	.tl-quote-row__main { grid-area: main; }
	.tl-quote-row__qty { grid-area: qty; }
	.tl-quote-row__rm { grid-area: rm; justify-self: end; }
	.tl-quote-form { padding: 1.25rem; }
}


/* ============================================================================
   0.9.81: the quote list lives on a floating tab on the right edge, so the
   header keeps the logo, menu, search and the two enquiry buttons. The tab is
   hidden until something is added (quote.js removes the hidden attribute).
   ========================================================================= */
.tl-quote-float {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1rem 0.85rem 0.9rem;
	background: var(--wp--preset--color--ink);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	border-radius: 16px 0 0 16px;
	box-shadow: 0 8px 24px rgba(22, 58, 66, 0.28);
	transition: transform 0.18s ease, background-color 0.18s ease;
}
.tl-quote-float:hover,
.tl-quote-float:focus-visible {
	background: var(--wp--preset--color--teal-text);
	color: #fff;
	transform: translateY(-50%) translateX(-3px);
}
.tl-quote-float:focus-visible { outline: 3px solid var(--wp--preset--color--yellow); outline-offset: 2px; }
.tl-quote-float[hidden] { display: none; }
.tl-quote-float .tl-quote-counter__icon { width: 22px; height: 22px; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; }
.tl-quote-float__text { display: flex; align-items: center; gap: 0.5rem; }
.tl-quote-float .tl-quote-counter__num {
	background: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	min-width: 1.6rem;
	height: 1.6rem;
}

/* A short nudge when something is added, so the tab is noticed. */
@keyframes tl-quote-bump {
	0%   { transform: translateY(-50%) scale(1); }
	35%  { transform: translateY(-50%) scale(1.09); }
	100% { transform: translateY(-50%) scale(1); }
}
.tl-quote-float.is-bump { animation: tl-quote-bump 0.42s ease; }

@media (prefers-reduced-motion: reduce) {
	.tl-quote-float, .tl-quote-float.is-bump { transition: none; animation: none; }
	.tl-quote-float:hover, .tl-quote-float:focus-visible { transform: translateY(-50%); }
}

/* Phones: a pill above the bottom right corner, clear of the thumb rest. */
@media (max-width: 782px) {
	.tl-quote-float {
		top: auto;
		bottom: 1rem;
		right: 1rem;
		transform: none;
		border-radius: 999px;
		padding: 0.75rem 1.1rem;
	}
	.tl-quote-float:hover, .tl-quote-float:focus-visible { transform: none; }
	@keyframes tl-quote-bump {
		0%   { transform: scale(1); }
		35%  { transform: scale(1.09); }
		100% { transform: scale(1); }
	}
}