/* ==========================================================================
   Terrain — components for tools, commerce, content and policy screens.
   Loaded after terrain.css. Same token vocabulary; no new colour values.
   ========================================================================== */

/* ---------- compare ---------- */
.t-compare-wrap { border: 1px solid var(--b-10); border-radius: 16px; overflow-x: auto; }
.t-compare { width: 100%; min-width: 720px; border-collapse: collapse; }
.t-compare th, .t-compare td { text-align: left; padding: 13px 16px; vertical-align: top; }
.t-compare thead th { background: var(--ink-alt); border-bottom: 1px solid var(--b-10); }
.t-compare thead th:first-child { width: 210px; }
.t-compare__media { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--panel); margin-bottom: 10px; }
.t-compare__media img { width: 100%; height: 100%; object-fit: cover; }
.t-compare__name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
.t-compare__price { font-family: var(--font-mono); font-size: 13px; color: var(--lime); display: block; margin-bottom: 10px; }
.t-compare tbody tr:nth-child(odd) td { background: var(--ink-alt); }
.t-compare tbody tr:nth-child(even) td { background: var(--panel); }
.t-compare tbody td { border-bottom: 1px solid var(--b-07); font-family: var(--font-mono); font-size: 12.5px; }
.t-compare tbody th { border-bottom: 1px solid var(--b-07); font-weight: 400; color: rgba(232,226,212,.58); font-size: 13px; background: var(--ink-alt); }
.t-compare .is-empty { color: var(--t-35); }

/* ---------- finder ---------- */
.t-finder__step { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--t-42); }
.t-finder__bar { height: 3px; border-radius: 2px; background: rgba(232,226,212,.09); overflow: hidden; margin: 14px 0 30px; }
.t-finder__bar span { display: block; height: 100%; width: 100%; background: var(--lime); transform-origin: left center; transition: transform 500ms var(--ease); }
.t-finder h1 { font-size: clamp(30px, 4.4vw, 52px); }
.t-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--panel); border: 1px solid var(--b-10); border-radius: 13px;
  padding: 22px 24px; margin-bottom: 10px; width: 100%; text-align: left; cursor: pointer;
  transition: border-color .2s, transform .2s var(--ease);
}
.t-opt:hover { border-color: var(--b-lime-hover); transform: translateX(4px); }
.t-opt__l { font-size: 17px; font-weight: 750; display: block; margin-bottom: 3px; }
.t-opt__s { font-size: 13px; color: var(--t-55); display: block; }
.t-opt__a { color: var(--lime); font-size: 18px; flex: none; }
.t-result { display: flex; flex-wrap: wrap; gap: 22px; background: var(--panel); border: 1px solid var(--b-10); border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.t-result__media { flex: 0 0 220px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--ink-alt); }
.t-result__media img { width: 100%; height: 100%; object-fit: cover; }
.t-result__body { flex: 1 1 260px; min-width: 0; }
.t-match { display: inline-block; background: rgba(212,243,74,.12); border: 1px solid var(--b-lime-active); color: var(--lime); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; margin-bottom: 10px; }

/* ---------- cart & checkout ---------- */
.t-line { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--b-07); position: relative; }
.t-line__media { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--ink-alt); }
.t-line__media img { width: 100%; height: 100%; object-fit: cover; }
.t-line__name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 6px; }
.t-line__rm { position: absolute; right: 0; top: 20px; opacity: .4; font-size: 12px; background: none; border: 0; cursor: pointer; }
.t-line__rm:hover { opacity: 1; color: var(--coral); }
.t-line__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.t-line__total { font-size: 20px; font-weight: 900; text-align: right; }
.t-line__each { font-family: var(--font-mono); font-size: 11px; color: var(--t-42); display: block; }

.t-summary { background: var(--panel); border: 1px solid var(--b-10); border-radius: 16px; padding: 26px; }
.t-summary__row { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; padding: 9px 0; }
.t-summary__row span:last-child { font-family: var(--font-mono); font-size: 13px; }
.t-summary__row.is-included span:last-child { color: var(--lime); }
.t-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--b-10); }
.t-summary__total b { font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.t-note { font-size: 12px; color: var(--t-42); line-height: 1.6; margin-top: 14px; }

.t-fieldset { background: var(--panel); border: 1px solid var(--b-10); border-radius: 16px; padding: 26px; margin-bottom: 16px; }
.t-fieldset__h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.t-fieldset__n { font-family: var(--font-mono); font-size: 12px; color: var(--lime); }
.t-fieldset__t { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin: 0; }

/* WooCommerce form fields, restyled in place — the markup stays Woo's */
.woocommerce form .form-row label,
.t-form label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(232,226,212,.45); margin-bottom: 7px; }
.woocommerce form .form-row, .woocommerce-page form .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce-checkout #payment div.form-row, .woocommerce-checkout #payment div.form-row.place-order { padding: 0; margin: 0; }
.woocommerce .input-text, .woocommerce select, .woocommerce textarea,
.t-form input, .t-form select, .t-form textarea, .select2-container .select2-selection {
  width: 100%; background: rgba(232,226,212,.05); border: 1px solid var(--b-12) !important;
  border-radius: 9px; padding: 13px 14px; color: var(--sand); outline: none;
  transition: border-color .2s;
}
.woocommerce .input-text:focus, .woocommerce select:focus, .woocommerce textarea:focus,
.t-form input:focus, .t-form select:focus, .t-form textarea:focus { border-color: var(--lime) !important; }
.woocommerce .required { color: var(--lime); }
.woocommerce-error, .woocommerce-info, .woocommerce-message {
  background: rgba(212,243,74,.06); border: 1px solid var(--b-lime-active);
  border-radius: 10px; padding: 14px 18px; margin: 0 0 20px; list-style: none; font-size: 14px;
}
.woocommerce-error { background: rgba(255,138,107,.07); border-color: rgba(255,138,107,.35); color: var(--coral); }
.t-err { color: var(--coral); font-size: 12px; margin-top: 6px; }

/* WooCommerce buttons inherit the design's button */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #respond input#submit, .woocommerce #respond input#submit.alt,
.woocommerce button.single_add_to_cart_button, .wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); color: #000; border: 0; border-radius: 11px;
  padding: 13px 22px; font-size: 13px; font-weight: 800; letter-spacing: .075em;
  text-transform: uppercase; cursor: pointer; transition: background .2s, box-shadow .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover, .woocommerce #respond input#submit.alt:hover,
.woocommerce button.single_add_to_cart_button:hover {
  background: var(--lime-hover); color: #000; box-shadow: 0 14px 34px rgba(212,243,74,.28);
}
.woocommerce button.single_add_to_cart_button { min-width: 190px; }
.woocommerce button.button:disabled, .woocommerce button.button[disabled],
.woocommerce button.button.alt:disabled, .woocommerce button.button.alt[disabled] {
  background: rgba(212,243,74,.4); cursor: not-allowed; box-shadow: none;
}
.woocommerce .quantity input.qty {
  width: 68px; text-align: center; background: rgba(232,226,212,.05);
  border: 1px solid var(--b-16); border-radius: 9px; padding: 12px 6px; font-family: var(--font-mono);
}

/* ---------- order confirmation ---------- */
.t-check { width: 56px; height: 56px; border-radius: 14px; background: rgba(212,243,74,.12); border: 1px solid var(--b-lime-active); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.t-orderpanel { background: var(--panel); border: 1px solid var(--b-10); border-radius: 16px; padding: 26px; margin: 24px 0; }
.t-orderno { font-family: var(--font-mono); font-size: 17px; color: var(--lime); }

/* ---------- my account ---------- */
.t-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.t-tabs a { white-space: nowrap; font-size: 13px; font-weight: 700; padding: 9px 15px; border-radius: 9px; border: 1px solid var(--b-12); color: var(--t-72); }
.t-tabs a:hover { border-color: var(--b-lime-hover); }
.t-tabs .is-active a, .t-tabs a.is-active { background: var(--lime); color: #000; border-color: var(--lime); }
.t-stats { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin-bottom: 26px; }
.t-stat { background: var(--panel); border: 1px solid var(--b-10); border-radius: 14px; padding: 20px; }
.t-stat b { display: block; font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.woocommerce-MyAccount-content table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-MyAccount-content table.shop_table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-42); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--b-10); font-weight: 400; }
.woocommerce-MyAccount-content table.shop_table td { padding: 13px 12px; border-bottom: 1px solid var(--b-07); font-size: 14px; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-number a { font-family: var(--font-mono); color: var(--lime); }
.t-addr { white-space: pre-line; font-size: 14px; color: var(--t-72); line-height: 1.75; }

/* ---------- accordion (FAQ) ---------- */
.t-acc { border: 1px solid var(--b-10); border-radius: 13px; background: var(--panel); margin-bottom: 8px; overflow: hidden; }
.t-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; font-size: 15.5px; font-weight: 650; }
.t-acc summary::-webkit-details-marker { display: none; }
.t-acc summary::after { content: '+'; color: var(--lime); font-size: 20px; line-height: 1; flex: none; transition: transform .3s var(--ease); }
.t-acc[open] summary::after { transform: rotate(45deg); }
.t-acc__b { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.7; color: var(--t-65); max-width: 74ch; }
.t-group__h { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; opacity: .5; margin: 30px 0 12px; font-weight: 700; }

/* ---------- guide / policies ---------- */
.t-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.t-toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--t-72); }
.t-toc a:hover { color: var(--lime); background: var(--b-07); }
.t-toc .t-i { font-family: var(--font-mono); font-size: 10.5px; color: var(--t-42); flex: none; }
.t-toc a[aria-current] { color: var(--lime); background: var(--b-07); }
.t-browse .t-toc a { justify-content: space-between; }
.t-aeo { margin-top: 48px; max-width: 76ch; }
.t-aeo h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 36px 0 12px; color: var(--t-88); }
.t-aeo h2:first-child { margin-top: 0; }
.t-aeo h3 { font-size: 17px; margin: 22px 0 6px; color: var(--t-88); }
.t-aeo p { margin: 0 0 10px; }
.t-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--b-10); border-radius: 13px; }
.t-aeo-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; min-width: 640px; }
.t-aeo-table caption { caption-side: bottom; text-align: left; padding: 10px 14px; font-size: 12.5px; color: var(--t-42); }
.t-aeo-table th, .t-aeo-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--b-07); vertical-align: top; }
.t-aeo-table thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-42); background: var(--ink-alt); }
.t-aeo-table tbody tr:nth-child(even) { background: var(--ink-alt); }
.t-aeo-table tbody th { font-weight: 500; }
.t-answer { border-left: 3px solid var(--lime); background: var(--ink-alt); padding: 14px 18px; border-radius: 10px; }
.t-longform--wide { max-width: none; }
.t-longform--wide > :not(.t-grid) { max-width: 68ch; }
.t-longform--wide > .t-grid { margin: 26px 0 36px; }
.t-listing-sum { font-size: 17px; color: var(--t-88); }
.t-listing-facts { padding-left: 1.1em; }
.t-listing-facts li { margin: 4px 0; }
.t-browse-more { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.t-browse-more .t-meta > span { color: var(--t-42); margin-right: 6px; }
.t-browse-more a { color: var(--t-72); }
.t-browse-more a:hover { color: var(--lime); }
.t-chapter { scroll-margin-top: 100px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--b-07); }
.t-chapter:last-child { border-bottom: 0; }
.t-chapter__n { font-family: var(--font-mono); font-size: 11px; color: var(--lime); letter-spacing: .18em; }
.t-rule { background: rgba(212,243,74,.07); border: 1px solid rgba(212,243,74,.2); border-radius: 12px; padding: 16px 18px; margin-top: 16px; }
.t-rule b { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); display: block; margin-bottom: 6px; }
.t-rule p { margin: 0; font-size: 14px; color: var(--t-72); }

.t-polnav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.t-polnav a { display: block; padding: 10px 13px; border-radius: 9px; font-size: 13.5px; color: var(--t-72); border: 1px solid transparent; }
.t-polnav a:hover { background: var(--b-07); }
.t-polnav a.is-active { background: rgba(212,243,74,.1); border-color: var(--b-lime-active); color: var(--lime); }
.t-draft { border: 1px dashed var(--b-16); border-radius: 12px; padding: 14px 16px; margin-top: 18px; font-size: 12px; color: var(--t-42); line-height: 1.6; }
.t-doc { max-width: 74ch; }
.t-doc h2 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.1; margin: 0 0 10px; }
.t-doc section { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--b-07); }
.t-doc section:last-of-type { border-bottom: 0; }
.t-doc p { font-size: 16px; line-height: 1.78; color: var(--t-65); }
.t-updated { font-family: var(--font-mono); font-size: 11px; color: var(--t-42); margin-bottom: 22px; }

/* ---------- gradient CTA panel ---------- */
.t-cta { background: var(--accent-panel); border: 1px solid var(--b-lime-active); border-radius: 20px; padding: clamp(26px, 4vw, 44px); }

/* ---------- about ---------- */
.t-stack { border: 1px solid var(--b-10); border-radius: 16px; overflow: hidden; }
.t-stack__row { padding: 22px 24px; border-bottom: 1px solid var(--b-07); }
.t-stack__row:last-child { border-bottom: 0; }
.t-stack__n { font-family: var(--font-mono); font-size: 10.5px; color: var(--lime); letter-spacing: .16em; }
.t-stack__t { font-size: 18px; font-weight: 800; margin: 6px 0 8px; letter-spacing: -.01em; }
.t-stack__b { font-size: 15px; line-height: 1.7; color: var(--t-65); max-width: 68ch; margin: 0; }
.t-bizpanel { background: var(--panel); border: 1px solid var(--b-10); border-radius: 16px; padding: 24px; }
.t-bizpanel dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-42); margin-top: 14px; }
.t-bizpanel dt:first-child { margin-top: 0; }
.t-bizpanel dd { margin: 4px 0 0; font-size: 14px; color: var(--t-88); }

@media (max-width: 640px) {
  .t-line { grid-template-columns: 84px 1fr; }
  .t-result__media { flex-basis: 100%; }
}

/* ---------- enquiry / quote form ---------- */
.t-form__grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.t-form__grid .form-row { margin: 0; }
.t-form__grid .form-row--wide { grid-column: 1 / -1; }
.t-form textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.t-form__hint { text-transform: none; letter-spacing: 0; color: var(--t-35); margin-left: 6px; font-family: var(--font-display); font-size: 11px; }
.t-form input::placeholder, .t-form textarea::placeholder { color: var(--t-35); }
.t-select--block { display: flex; width: 100%; }
.t-select--block select { width: 100%; background: rgba(232,226,212,.05); border-color: var(--b-12); border-radius: 9px; padding: 13px 38px 13px 14px; font-weight: 400; }
.t-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.t-enquiry__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
.t-enquiry__foot .t-note { max-width: 40ch; }
.t-enquiry__form.is-sending .t-btn { opacity: .6; pointer-events: none; }
.t-alert { border-radius: 12px; padding: 14px 18px; margin: 0 0 18px; font-size: 14px; line-height: 1.55; border: 1px solid; }
.t-alert--ok { background: rgba(212,243,74,.08); border-color: var(--b-lime-active); color: var(--t-88); }
.t-alert--ok strong { color: var(--lime); }
.t-alert--err { background: rgba(255,138,107,.07); border-color: rgba(255,138,107,.35); color: var(--coral); }
.t-pdp__quote { margin-top: 12px; align-items: center; gap: 12px; }
.t-pdp__quote-note { font-size: 10px; }
.t-contact .t-bizpanel dd a:hover { color: var(--lime); }

/* ---------- map ----------
   Click-to-load: the placeholder is the default state, so a plain visit reaches
   Google not at all and the cookie policy stays true. The iframe replaces the
   placeholder in the same box, which is why the box owns the radius and clip. */
.t-map {
  position: relative; display: flex; min-height: 340px;
  border: 1px solid var(--b-10); border-radius: 18px; overflow: hidden;
  background: var(--accent-panel); margin-top: 26px;
}
.t-map__ph {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  width: 100%; padding: clamp(24px, 4vw, 44px);
}
.t-map__addr { font-family: var(--font-mono); font-size: 14px; line-height: 1.8; color: var(--t-88); margin: 0; max-width: 32ch; }
.t-map__hours { font-size: 13px; color: var(--t-55); margin: 0; }
.t-map__note { margin: 4px 0 0; max-width: 58ch; }
.t-map iframe { width: 100%; height: 440px; border: 0; display: block; }

@media (max-width: 767px) {
  .t-map { min-height: 280px; }
  .t-map iframe { height: 320px; }
}

/* Without JS the button cannot build the iframe; the directions link still works. */
.no-js [data-map-load] { display: none; }