/*
Theme Name: Twig Revival
Theme URI: https://twigrevival.com
Author: Twig Revival
Description: Custom theme for Twig Revival — hockey stick repair & resale. Matches v1 brand (Barlow / #030102 / grain).
Version: 0.1.13
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: twig-revival
*/

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

:root {
  --bg: #030102;
  --fg: #f0ede8;
  --muted: #666;
  --border: #1e1e1e;
  --accent: #C9854E; /* copper — Alt 1 (GL-27 2026-06-30); was #c8a85b gold */
  --field-border: #5e5246; /* form input idle border — visible on dark (GL-27) */
  /* Product card image ratio — child themes / Customizer can override */
  --product-image-ratio: 4 / 3;
  /* Vertical rhythm between major content blocks on the homepage / pages */
  --section-gap: 3rem;
  --cta-row-gap: 1.5rem;
  /* Logo image height — admin / child theme / Customizer overridable.
     Per-breakpoint tweaks below in the media queries. */
  --logo-height: 235px;
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--fg); }

img { max-width: 100%; height: auto; display: block; }

/* A11Y — skip-to-content link.
   Visually hidden until focused; becomes a prominent pill on keyboard tab. */
.tr-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.85rem 1.25rem;
  background: var(--accent);
  color: var(--bg);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.tr-skip-link:focus,
.tr-skip-link:focus-visible {
  left: 1rem;
  top: 1rem;
  outline: none;
}

/* A11Y — focus-visible rings.
   Browsers default to a barely-visible outline against #030102. Replace with
   the same accent glow used by inputs (D15/D17/D18) for consistency. */
:where(.tr-cta, .tr-nav a, .tr-footer-nav a, .contact-link, .tr-logo-link, .tr-skip-link, .tr-admin-link):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* GRAIN overlay (matches v1) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 100;
}

.site {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

/* BRAND — full-size logo at the top of the page, in normal flow. It scrolls
   away with the page (NOT sticky). No resize-on-scroll anywhere, so there is
   nothing to reflow → the old compact-mode bounce (GL-17) cannot occur. */
.tr-brand {
  text-align: center;
  padding: 2.5rem 0 0;
  animation: fadeUp 0.8s ease both;
}
.tr-brand .tr-logo-img,
.tr-brand img { height: var(--logo-height); width: auto; max-width: 100%; }

/* HEADER — the persistent bar: small logo (left) + nav (right), pinned to the
   top. Always one fixed size (no compact toggle), so it can't oscillate. */
.tr-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(3, 1, 2, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Small logo inside the bar — fixed height, overrides the global logo size. */
.tr-bar-logo { line-height: 0; flex: 0 0 auto; }
.tr-bar-logo .tr-logo-img,
.tr-header .tr-logo-img { height: 40px; width: auto; }

/* Homepage warranty selling-point line (GL-10). Copy mocked — Matt confirms terms. */
.tr-warranty-note {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.95rem;
  color: var(--accent);
  margin: 0.5rem 0 2rem;
}
.tr-warranty-note a { color: var(--fg); text-decoration: underline; }

/* When the WP admin bar is visible (logged-in user), offset the sticky bar
   so it sits below the 32px admin bar instead of being hidden behind it. */
.admin-bar .tr-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .tr-header { top: 46px; }
}

/* Default logo sizing (brand block uses this; the bar overrides to 40px). */
.tr-logo-img { height: var(--logo-height); width: auto; max-width: 100%; }

/* Logo link — also carries the text-logo styling for the no-logo.jpg fallback. */
.tr-logo-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.tr-logo-link:hover { color: var(--accent); }

.tr-admin-link {
  color: var(--accent) !important;
  border-color: var(--border);
}
.tr-admin-link:hover,
.tr-admin-link:focus { color: var(--fg) !important; border-color: var(--accent); }

/* Cart link in header nav — small badge with item count. */
.tr-cart-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}
.tr-cart-link::before {
  /* Tiny bag glyph in front of "Cart" — no icon font needed. */
  content: '\1F6D2';  /* 🛒 SHOPPING TROLLEY */
  font-size: 0.9em;
  filter: grayscale(1) brightness(1.3);
  line-height: 1;
}
.tr-cart-link__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.4em;
  background: var(--accent);
  color: var(--bg);
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.72em;
  letter-spacing: 0;
  line-height: 1;
}
.tr-cart-link:hover,
.tr-cart-link.current { color: var(--fg); }
.tr-cart-link:hover .tr-cart-link__count { background: var(--fg); color: var(--bg); }

.tr-nav {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.tr-nav a {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.tr-nav a:hover, .tr-nav a.current { color: var(--fg); border-color: var(--border); }

/* MAIN */
main { padding: 1.5rem 0 3rem; animation: fadeUp 0.8s 0.15s ease both; }

.description {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #aaa;
  max-width: 620px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}

/* Generic page content wrapper used by page.php (About / Reviews / static pages).
   Centered measure of ~680px reads comfortably at our base font size. */
.tr-page-content {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.8;
  color: #cfcbc6;
  font-size: 1rem;
}
.tr-page-content h2,
.tr-page-content h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 2rem 0 0.75rem;
}
.tr-page-content h2 { font-size: 1.5rem; letter-spacing: 0.15em; } /* GL: up from 1rem — content headings were too small (Mark 2026-06-30) */
.tr-page-content h3 { font-size: 1.15rem; } /* up from 0.85rem */
.tr-page-content p { margin-bottom: 1.1rem; }
.tr-page-content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 1px; }
.tr-page-content a:hover { border-bottom-color: var(--accent); }
.tr-page-content ul, .tr-page-content ol { margin: 0 0 1.1rem 1.5rem; }
.tr-page-content li { margin-bottom: 0.4rem; }

/* 404 page — action row of CTAs + search field. */
.tr-404-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem auto 0;
}
.tr-404-search {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem auto 0;
}
.tr-404-search input[type="search"] {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0;
  font: inherit;
  padding: 0.85rem 1rem;
  min-width: 16rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tr-404-search input[type="search"]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 133, 78, 0.22);
}

/* POST LIST — blog index, search results, generic archive (rendered by index.php). */
.tr-post-list {
  max-width: 680px;
  margin: 0 auto;
}
.tr-post-list-article {
  text-align: left;
  margin: 0 0 2rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--border);
}
.tr-post-list-article:last-child { border-bottom: none; }
.tr-post-list-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.tr-post-list-title a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.2s;
}
.tr-post-list-title a:hover { color: var(--accent); }
.tr-post-list-excerpt {
  color: #cfcbc6;
  line-height: 1.7;
}
.tr-post-list-excerpt p { margin: 0; }

/* Pagination */
.tr-pagination,
.navigation.pagination {
  max-width: 680px;
  margin: 2rem auto;
  text-align: center;
}
.tr-pagination .nav-links,
.navigation.pagination .nav-links {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.tr-pagination .page-numbers,
.navigation.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.tr-pagination .page-numbers:hover,
.tr-pagination .page-numbers.current,
.navigation.pagination .page-numbers:hover,
.navigation.pagination .page-numbers.current {
  border-color: var(--accent);
  color: var(--fg);
}
.tr-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current { background: #1a0e0e; }

.section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.4rem; /* GL: 2× (was 0.7rem) — eyebrows read as real section headings (Mark 2026-06-30) */
  letter-spacing: 0.2em; /* trimmed from 0.3em so the larger size doesn't sprawl */
  text-transform: uppercase;
  color: #b7b1a7; /* lifted from --muted #666 — a 2× heading shouldn't also be dim */
  margin-bottom: 1.25rem;
}

/* Page hero title — used by page.php, 404.php, index.php as <h1>.
   Matches the WC shop-archive title (D32) so all major page types feel
   like one design system. */
.page-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fg) !important;
  margin: 0 0 2rem !important;
  text-align: center;
  line-height: 1.1;
}

/* CONTACT */
.contact-section {
  margin: 0 0 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.contact-link {
  color: var(--fg);
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.contact-link:hover { border-color: var(--fg); }

/* SECTION RHYTHM — homepage content blocks.
   Override --section-gap (in :root or per-block) to retune spacing without
   editing this file. */
.repair-section,
.shop-preview,
.reviews-section,
.contact-section { margin-bottom: var(--section-gap); }

/* Prompt row (GL-43): a short eyebrow label + a normal-size CTA button on ONE line,
   centered. Used by the homepage Contact + repair prompts so the CTA reads inline
   (not a full-width two-line affair). Wraps on narrow screens. */
.tr-prompt-row {
  display: flex;
  flex-direction: row; /* override .contact-section's column so label + button share one line */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.tr-prompt-row .section-label { margin-bottom: 0; }

.tr-cta-row { margin-top: var(--cta-row-gap); }

/* CTA buttons (used for repair-trigger, add-to-cart, etc.) */
.tr-cta,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button {
  display: inline-flex !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  text-decoration: none !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 0.95rem 1.5rem !important;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  border-radius: 0 !important;
}
.tr-cta:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover { border-color: #444 !important; background: #111 !important; }

.tr-cta.full {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
/* (play-arrow glyph removed — the .arrow span is deleted from the templates) */

/* REVIEWS */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0 3rem;
  text-align: left;
}

.review-card {
  border: 1px solid var(--border);
  padding: 1.5rem;
  background: #0a0608;
  /* Stretch all cards to equal height (grid default) and push the author
     line to the bottom so cards with shorter bodies still feel grounded. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}
.review-card .review-author {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.review-stars {
  color: var(--accent);
  letter-spacing: 0.2em;
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.review-body {
  color: #cfcbc6;
  font-size: 0.97rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.review-author {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}

/* WOOCOMMERCE overrides */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

/* WC core ships a `::before`/`::after` clearfix (content:" ";display:table) on
   ul.products. In a grid container those pseudo-elements become grid items —
   the `::before` claims the first cell and shows up as an empty, item-sized gap
   at the start of row one. Neutralize them; the grid needs no clearfix. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product {
  text-align: center;
  border: 1px solid var(--border);
  padding: 1.5rem 1rem;
  background: #0a0608;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover affordance — uses --accent so brand changes propagate.
   Disabled at reduced-motion preference. */
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product:focus-within .woocommerce-loop-product__title {
  color: var(--accent) !important;
}
@media (prefers-reduced-motion: reduce) {
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product:hover {
    transition: none;
    transform: none;
  }
}

/* Uniform product image aspect — prevents portrait/landscape mix from
   misaligning the shop grid. Admin/child-theme can override --product-image-ratio. */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  aspect-ratio: var(--product-image-ratio);
  object-fit: cover;
  object-position: center;
  width: 100% !important;
  height: auto !important;
  display: block;
  background: #0a0608;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg) !important;
  padding: 0.75rem 0 0.25rem !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
}

/* Tax-included suffix appended by the woocommerce_get_price_html filter */
.tr-tax-suffix {
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  font-size: 0.72em;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-left: 0.45em;
  text-transform: lowercase;
  white-space: nowrap;
  vertical-align: baseline;
}

/* WC NOTICES — classic shortcode notices (.woocommerce-message etc.) and the
   block-editor variant (.wc-block-components-notice-banner). Both appear after
   Add to Cart, validation errors, login messages, etc. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.wc-block-components-notice-banner {
  background: #0a0608 !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-top-color: var(--border) !important;
  color: var(--fg) !important;
  padding: 1rem 1.25rem !important;
  margin: 1rem 0 1.5rem !important;
  border-radius: 0 !important;
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.woocommerce .woocommerce-error,
.wc-block-components-notice-banner.is-error {
  border-left-color: #b04040 !important;
}
.wc-block-components-notice-banner.is-success {
  border-left-color: var(--accent) !important;
}
.wc-block-components-notice-banner.is-info {
  border-left-color: #7ab !important;
}

/* Action buttons inside notices ("View cart", "Try again", etc.) */
.woocommerce .woocommerce-message .button,
.woocommerce-notices-wrapper .button,
.wc-block-components-notice-banner .wc-block-components-button {
  margin-left: auto !important;
  font-size: 0.9rem !important;
  padding: 0.65rem 1rem !important;
  letter-spacing: 0.15em !important;
}

/* Notice icon (the SVG WC inserts inside block notices) */
.wc-block-components-notice-banner > svg {
  fill: var(--accent) !important;
  flex-shrink: 0;
}
.wc-block-components-notice-banner.is-error > svg { fill: #b04040 !important; }
.wc-block-components-notice-banner.is-info > svg { fill: #7ab !important; }

/* WC CLASSIC FORMS — covers My Account login, Lost Password, Register,
   Edit Address, Edit Account, and any classic-shortcode WC form using the
   .woocommerce-form / .woocommerce-Input--text class API. */
.woocommerce form.woocommerce-form,
.woocommerce-page form.woocommerce-form {
  background: #0a0608;
  border: 1px solid var(--border);
  padding: 1.75rem 1.75rem 1.5rem;
  max-width: 460px;
  margin: 1.5rem auto;
}
.woocommerce form.woocommerce-form h2,
.woocommerce-page form.woocommerce-form h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 1rem;
}
.woocommerce form .woocommerce-form-row,
.woocommerce-page form .woocommerce-form-row,
.woocommerce form .form-row,
.woocommerce-page form .form-row {
  padding: 0;
  margin-bottom: 0.85rem;
}
.woocommerce form .woocommerce-form__label:not(.woocommerce-form__label-for-checkbox),
.woocommerce-page form .woocommerce-form__label:not(.woocommerce-form__label-for-checkbox),
.woocommerce form label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.woocommerce .woocommerce-Input--text,
.woocommerce-page .woocommerce-Input--text,
.woocommerce input.input-text,
.woocommerce-page input.input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="number"],
.woocommerce form textarea,
.woocommerce form select {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 3px solid var(--field-border) !important;
  border-radius: 0 !important;
  font: inherit !important;
  padding: 0.75rem 0.85rem !important;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce form input.input-text:hover,
.woocommerce form input[type="text"]:hover,
.woocommerce form input[type="email"]:hover,
.woocommerce form input[type="password"]:hover,
.woocommerce form textarea:hover { border-color: #2a2628 !important; }
.woocommerce form input.input-text:focus,
.woocommerce form input[type="text"]:focus,
.woocommerce form input[type="email"]:focus,
.woocommerce form input[type="password"]:focus,
.woocommerce form input[type="tel"]:focus,
.woocommerce form input[type="number"]:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201, 133, 78, 0.22) !important;
}
.woocommerce form .woocommerce-form__label-for-checkbox {
  color: var(--fg);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.woocommerce form input[type="checkbox"],
.woocommerce form input[type="radio"] {
  accent-color: var(--accent);
}
.woocommerce-LostPassword a,
.woocommerce-form a,
.woocommerce-MyAccount-content a:not(.button) {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
}
.woocommerce-LostPassword a:hover,
.woocommerce-form a:hover { border-bottom-color: var(--accent); }

/* My Account sidebar + content (visible only after login, but ship the
   styling so it's ready). */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border: 1px solid var(--border);
  background: #0a0608;
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--border); }
.woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.85rem 1.25rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.woocommerce-MyAccount-navigation li a:hover {
  color: var(--fg);
  background: #1a0e0e;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
  color: var(--fg);
  border-left-color: var(--accent);
  background: #1a0e0e;
}

.woocommerce-product-gallery img { background: #0a0608; }

/* Gallery hover — signal that clicking the image opens the lightbox.
   Subtle scale + accent overlay on the wrapper; muted opacity on the
   image itself so the accent border reads. */
.woocommerce-product-gallery__image {
  position: relative;
  overflow: hidden;
  display: block;
}
.woocommerce-product-gallery__image a {
  display: block;
  position: relative;
  border: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.woocommerce-product-gallery__image a:hover,
.woocommerce-product-gallery__image a:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.woocommerce-product-gallery__image a img {
  transition: transform 0.35s ease, opacity 0.2s ease;
  will-change: transform;
}
.woocommerce-product-gallery__image a:hover img,
.woocommerce-product-gallery__image a:focus-visible img {
  transform: scale(1.03);
}

/* Zoom-hint affordance — small "click to zoom" cue overlay on hover. */
.woocommerce-product-gallery__image a::after {
  content: '⤢';
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 1, 2, 0.7);
  color: var(--accent);
  font-size: 0.95rem;
  border: 1px solid var(--border);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.woocommerce-product-gallery__image a:hover::after,
.woocommerce-product-gallery__image a:focus-visible::after {
  opacity: 1;
  border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-product-gallery__image a img,
  .woocommerce-product-gallery__image a:hover img { transition: none; transform: none; }
}

/* PRODUCT DETAIL — single product page typography & rhythm.
   The summary/entry-summary column holds title, price, short desc, add-to-cart;
   the tabs block below holds long description + additional info. */
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title.entry-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg) !important;
  line-height: 1.15;
  margin: 0 0 1rem !important;
}
.woocommerce div.product .summary .price {
  font-size: 1.4rem !important;
  margin: 0 0 1.25rem !important;
  display: block;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: #cfcbc6;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.woocommerce div.product .product_meta {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.woocommerce div.product .product_meta a { color: var(--fg); text-decoration: none; }
.woocommerce div.product .product_meta a:hover { color: var(--accent); }

/* Add-to-cart row — flex-align qty input + button so they sit on one line
   with a consistent gap regardless of cart-form variations WC injects. */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  margin: 1.5rem 0 1rem;
}
.woocommerce div.product form.cart .quantity {
  margin: 0 !important;
  display: flex;
}
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce div.product form.cart input.qty {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font: inherit !important;
  font-size: 1rem !important;
  padding: 0.85rem 0.75rem !important;
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.woocommerce div.product form.cart input.qty:hover { border-color: #2a2628 !important; }
.woocommerce div.product form.cart input.qty:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201, 133, 78, 0.22) !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  min-width: 12rem;
  /* Inherits the base .woocommerce .button rules; this just sizes it. */
}

/* Tabs (Description / Additional information / Reviews) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--border) !important;
  padding: 0 !important;
  margin: 2rem 0 1.5rem !important;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--muted) !important;
  padding: 0.85rem 1.25rem !important;
  display: inline-block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--accent) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--fg) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-Tabs-panel { color: #cfcbc6; line-height: 1.7; }
.woocommerce div.product .woocommerce-Tabs-panel h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 1rem;
}

/* SHOP ARCHIVE header — breadcrumb, title, result-count, sort dropdown.
   WC renders all of these in `.woocommerce-products-header` + siblings; left
   unstyled they look like default WP block-editor output dropped on a dark
   page. Treat as a header bar with branded type + spacing. */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-page .woocommerce-breadcrumb {
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}
.woocommerce .woocommerce-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.woocommerce .woocommerce-breadcrumb a:hover {
  color: var(--fg);
  border-bottom-color: var(--border);
}

.woocommerce .woocommerce-products-header {
  margin: 0 0 2rem;
  padding: 0;
  text-align: center;
}
.woocommerce .woocommerce-products-header__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fg) !important;
  margin: 0 !important;
  line-height: 1.1;
}

/* Result count + sort dropdown sit on the same row above the product grid. */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem !important;
  padding-top: 0.5rem;
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
  margin: 0 0 1.5rem !important;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font: inherit !important;
  font-size: 0.85rem !important;
  padding: 0.55rem 2rem 0.55rem 0.85rem !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23c8a85b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
}
.woocommerce .woocommerce-ordering select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201, 133, 78, 0.22) !important;
}

/* WC SECTION HEADINGS — Related products / Cross-sells / Upsells / Cart totals.
   WC renders these as plain <h2>, which falls through to WP block-editor
   defaults — visually disconnected from our branded type. Brand to match
   `.section-label` eyebrow treatment used elsewhere on the site, plus a top
   border to mark the section break. */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2,
.woocommerce .cross-sells > h2,
.woocommerce .cart_totals > h2,
.woocommerce-page .related.products > h2,
.woocommerce-page .upsells.products > h2,
.woocommerce-page .cross-sells > h2,
.woocommerce-page .cart_totals > h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: var(--fg) !important;
  margin: 3rem 0 1.5rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.woocommerce .related.products,
.woocommerce .upsells.products,
.woocommerce .cross-sells {
  margin-top: 2rem;
}

/* WC BLOCK GRID — used by the empty-cart "recommended products" slot and
   anywhere the New Products / Featured Products blocks appear. Mirrors the
   regular shop-loop card aesthetic so the empty cart doesn't look like a
   different theme. */
.wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 1.5rem !important;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.wc-block-grid__product {
  text-align: center;
  border: 1px solid var(--border);
  padding: 1.5rem 1rem;
  background: #0a0608;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wc-block-grid__product:hover,
.wc-block-grid__product:focus-within {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
.wc-block-grid__product-image img {
  aspect-ratio: var(--product-image-ratio);
  object-fit: cover;
  width: 100% !important;
  height: auto !important;
  display: block;
  background: #0a0608;
}
.wc-block-grid__product-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg) !important;
  padding: 0.75rem 0 0.25rem !important;
}
.wc-block-grid__product:hover .wc-block-grid__product-title { color: var(--accent) !important; }
.wc-block-grid__product-price {
  color: var(--accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
}
.wc-block-cart__empty-cart__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg) !important;
  margin: 2rem 0 1.5rem !important;
}

/* WC CHECKOUT loading skeleton — block checkout (React) shows light grey
   placeholders until JS mounts. Default WC palette is light; on our dark
   page that flashes white panels. Re-theme to dark + branded shimmer. */
.wp-block-woocommerce-checkout.is-loading,
.wp-block-woocommerce-cart.is-loading {
  background: transparent;
  min-height: 50vh;
  padding: 2rem 0;
  position: relative;
}
/* WC inserts <div class="wp-block-woocommerce-..."> placeholder bars; we tint
   any direct-child div inside the loading wrapper. */
.wp-block-woocommerce-checkout.is-loading > div,
.wp-block-woocommerce-cart.is-loading > div {
  background: linear-gradient(
    90deg,
    var(--border) 0%,
    #2a2628 50%,
    var(--border) 100%
  );
  background-size: 200% 100%;
  min-height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 2px;
  animation: trShimmer 1.4s ease-in-out infinite;
}
@keyframes trShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-woocommerce-checkout.is-loading > div,
  .wp-block-woocommerce-cart.is-loading > div {
    animation: none;
    background: var(--border);
  }
}

/* WC BLOCK CHECKOUT — form fields, panels, totals, payment, place-order.
   Targets WC's documented block-checkout class names. All colors flow
   through CSS variables in :root so brand changes propagate. */

/* Section panels (Contact, Shipping address, Billing address, Payment...) */
.wc-block-components-checkout-step {
  background: #0a0608 !important;
  border: 1px solid var(--border) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.25rem !important;
}
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wp-block-woocommerce-checkout h2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--fg) !important;
  margin-bottom: 1rem !important;
}
.wc-block-components-checkout-step__description {
  color: var(--muted) !important;
  font-size: 0.9rem !important;
}

/* Text inputs / selects / textareas */
.wc-block-components-text-input,
.wc-block-components-select,
.wc-block-components-textarea {
  background: var(--bg) !important;
}
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-select select,
.wc-block-components-textarea textarea,
.wp-block-woocommerce-checkout input[type="text"],
.wp-block-woocommerce-checkout input[type="email"],
.wp-block-woocommerce-checkout input[type="tel"],
.wp-block-woocommerce-checkout select {
  background: var(--bg) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font: inherit !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(200, 168, 91, 0.15) !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-textarea label,
.wc-block-components-checkout-step__heading-content label {
  color: var(--muted) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label,
.wc-block-components-text-input input:not(:placeholder-shown) + label {
  color: var(--accent) !important;
}

/* Checkbox + radio inputs */
.wc-block-components-checkbox input,
.wc-block-components-radio-control input,
.wc-block-components-radio-control__input {
  accent-color: var(--accent);
}
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
  color: var(--fg) !important;
}

/* Order summary panel */
.wc-block-components-totals-item,
.wc-block-components-totals-wrapper {
  color: var(--fg) !important;
  border-top-color: var(--border) !important;
}
.wc-block-components-totals-item__label { color: var(--muted) !important; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
}

/* Validation error notices */
.wc-block-components-validation-error {
  color: #e88 !important;
}

/* Place-order / next-step button (also covers cart "Proceed to Checkout") */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wc-block-cart__submit-container .wc-block-components-button {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  padding: 1rem 1.5rem !important;
  border-radius: 0 !important;
  transition: background 0.2s, color 0.2s;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
}

/* WP ADMIN BAR — visible only to logged-in users. WP's own admin-bar.min.css
   ships a purple-grey palette that clashes with the brand. Restyle to fit.
   Doesn't touch positioning (WP sets html { margin-top: 32px } and we honor
   that); just retints surfaces and uses the accent for hover/active states. */
#wpadminbar {
  background: #0a0608 !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: 'Barlow', sans-serif !important;
  color: var(--fg) !important;
  box-shadow: none !important;
}
#wpadminbar .ab-empty-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon,
#wpadminbar #wp-admin-bar-site-name > a {
  color: var(--fg) !important;
}
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar #adminbarsearch::before {
  color: var(--muted) !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:focus,
#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus {
  background: #1a0e0e !important;
  color: var(--accent) !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item::before,
#wpadminbar .ab-top-menu > li.hover > .ab-item::before {
  color: var(--accent) !important;
}
#wpadminbar .ab-submenu .ab-item,
#wpadminbar .quicklinks .menupop ul li a {
  color: var(--fg) !important;
}
#wpadminbar .menupop .ab-sub-wrapper {
  background: #0a0608 !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7) !important;
}
#wpadminbar .quicklinks .menupop ul li a:hover,
#wpadminbar .quicklinks .menupop ul li a:focus,
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar.nojq .quicklinks .menupop ul li a:focus,
#wpadminbar li:hover .ab-icon::before,
#wpadminbar li:hover .ab-item::before {
  color: var(--accent) !important;
  background: #1a0e0e !important;
}

/* FOOTER */
.tr-footer {
  padding: 2.5rem 0 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.tr-footer-nav ul.tr-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.tr-footer-nav a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.tr-footer-nav a:hover,
.tr-footer-nav a:focus {
  color: var(--fg);
  border-bottom-color: var(--border);
}
/* Current-page indicator — works for both wp_nav_menu (.current-menu-item)
   and the hardcoded fallback (aria-current). Mirrors header .tr-nav.current. */
.tr-footer-nav .current-menu-item > a,
.tr-footer-nav a[aria-current="page"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.tr-footer-contact a {
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  text-transform: lowercase;
  font-size: 0.95rem;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
}
.tr-footer-contact a:hover { border-bottom-color: var(--fg); }
.tr-footer-copy {
  font-size: 0.9rem;
  opacity: 0.75;
}

/* NATIVE REPAIR FORM (rendered by twig-repair-form mu-plugin).
   Targets the form's existing class hooks; no mu-plugin edit required.
   These rules override the mu-plugin's inline styles via higher specificity. */

/* Submit success + validation-error notices. Match the WC notice card
   pattern from D20 (dark card, 3px accent left rail) so all "notification"
   surfaces across the site read as one system. Body-level selector adds
   specificity to defeat the mu-plugin's inline `style` attribute without
   per-property !important sprawl. */
body .trrf-success,
body .trrf-error {
  background: #0a0608 !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  padding: 1rem 1.25rem !important;
  margin: 1rem 0 1.5rem !important;
  border-radius: 0;
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg);
}
body .trrf-error { border-left-color: #b04040 !important; }
body .trrf-success .section-label,
body .trrf-success p:first-of-type {
  color: var(--accent) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin: 0 0 0.5rem !important;
}
body .trrf-success p:not(:first-of-type),
body .trrf-error strong + ul { color: var(--fg); margin: 0; }
body .trrf-error strong {
  color: #e88;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
body .trrf-error ul { padding-left: 1.25rem; margin-top: 0.5rem !important; }

/* Base typography + box rules for the repair form's per-field elements.
   The mu-plugin emits inline `style="..."` on each label/input/textarea;
   these `body .trrf-form ...` selectors override via specificity so an
   admin's Customizer "Additional CSS" can re-tune labels/inputs without
   fighting inline declarations. !important still required because inline
   styles beat any non-!important external rule. */
body .trrf-form .trrf-field label:not(.trrf-form fieldset label) {
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important; /* GL: 1.5× larger (was 0.7rem) per Mark 2026-06-30 */
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #cfcbc6 !important; /* GL-27: was var(--muted) #666 — too dim on dark */
  margin-bottom: 0.35rem !important;
}
body .trrf-form .trrf-field input[type="text"],
body .trrf-form .trrf-field input[type="email"],
body .trrf-form .trrf-field input[type="tel"],
body .trrf-form .trrf-field input[type="date"],
body .trrf-form .trrf-field input[type="file"],
body .trrf-form .trrf-field textarea,
body .trrf-form .trrf-field select {
  width: 100% !important;
  padding: 0.75rem 0.85rem !important;
  background: #0a0608 !important;
  border: 3px solid var(--field-border) !important;
  color: var(--fg) !important;
  font: inherit !important;
  border-radius: 0 !important;
}

.trrf-form fieldset {
  border: 2px solid var(--field-border) !important;
  padding: 1.4rem 1.5rem 1.2rem !important;
  margin: 1.25rem 0 !important;
  background: #0a0608;
  position: relative;
}
.trrf-form fieldset legend {
  /* Anchor the legend into the border with a bg-matched halo so the top
     border reads as continuous around the label, not broken under it. */
  margin-left: 0.25rem;
  padding: 0 0.6rem !important;
  background: #0a0608 !important;
  color: var(--muted, #666) !important;
}
.trrf-form fieldset label {
  margin-right: 1.5rem !important;
}
/* Focus states for every input/textarea/select in the form. Mirrors the
   D15 WC checkout treatment so customers get the same affordance across both
   forms. !important defeats the mu-plugin's inline border. */
.trrf-form input[type="text"]:focus,
.trrf-form input[type="email"]:focus,
.trrf-form input[type="tel"]:focus,
.trrf-form input[type="date"]:focus,
.trrf-form input[type="file"]:focus,
.trrf-form textarea:focus,
.trrf-form select:focus {
  border: 3px solid var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(201, 133, 78, 0.22);
}
/* Hover affordance — subtle border shift to indicate the field is interactive. */
.trrf-form input[type="text"]:hover,
.trrf-form input[type="email"]:hover,
.trrf-form input[type="tel"]:hover,
.trrf-form input[type="date"]:hover,
.trrf-form textarea:hover {
  border-color: #2a2628 !important;
}
/* Branded radio + checkbox accent across the whole form, not just inside the
   payment-method fieldset where iter 6 had it. */
.trrf-form input[type="radio"],
.trrf-form input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}
/* Placeholder text — kept clearly legible on the dark bg (brighter than the
   old #555, which read too faint). */
.trrf-form ::placeholder { color: #9a938a; opacity: 1; }

/* GL-34 (interim parity, 2026-06-30): mirror the repair-form field treatment
   onto the WooCommerce checkout fields so the two forms read consistently until
   the proper shared-form refactor (GL-34). Border thickness + placeholder are
   structure-agnostic and additive; the WC *block* checkout's floating labels
   (wc-block-components-*) differ structurally, so full label parity waits for
   the refactor. VERIFY LIVE once the shop un-gates (checkout currently gated). */
.woocommerce form ::placeholder,
.woocommerce-checkout ::placeholder,
.wc-block-components-text-input input::placeholder,
.wc-block-components-textarea::placeholder { color: #9a938a !important; opacity: 1 !important; }

.wc-block-components-text-input input,
.wc-block-components-text-input select,
.wc-block-components-address-form input,
.wc-block-components-textarea {
  border-width: 3px !important;
  border-style: solid !important;
  border-color: var(--field-border) !important;
}

.trrf-form fieldset input[type="radio"] {
  margin-right: 0.35rem;
  accent-color: var(--accent);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* RESPONSIVE — three tiers:
   ≤600px : phone     · single column, tight padding, small logo
   601–900px : tablet · tighter desktop, mid-size logo, denser product grid
   ≥901px : desktop  · base styles (no overrides) */

@media (max-width: 900px) {
  :root { --logo-height: 185px; }
  .tr-brand { padding: 2rem 0 1.25rem; }
  main { padding: 2rem 0; }
  .site { padding: 0 1.25rem; }
  .tr-nav { gap: 1.25rem; }
  .description { padding: 1.5rem 1rem 0; font-size: 1rem; }
  /* Allow product cards to pack tighter on tablet to keep 2-up rows. */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  :root { --logo-height: 130px; }
  .tr-header .tr-logo-img { height: 34px; }
  main { padding: 1.5rem 0; }
  .site { padding: 0 1rem; }
  .tr-nav { gap: 1rem; font-size: 0.92em; }
  /* Tax-suffix wraps to its own line on phones so the price reads cleaner. */
  .tr-tax-suffix { display: block; margin-left: 0; margin-top: 0.2em; }
  /* Force single-column shop on phones — minmax was still 2-up on narrow phones. */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr;
  }
}

/* PRINT — when a customer prints an order confirmation / repair-request /
   product page or saves as PDF. Switch to white-paper aesthetic, hide
   navigation chrome, surface URLs after inline links. */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
  }

  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Grain overlay would print as a haze; nuke it. */
  body::before { display: none !important; }

  /* Chrome: hide everything that's nav or decoration. */
  .tr-header,
  .tr-footer,
  .tr-skip-link,
  #wpadminbar,
  .tr-cart-link,
  .tr-admin-link,
  .woocommerce-ordering,
  .woocommerce-breadcrumb,
  .woocommerce-product-gallery__image a::after,
  .add_to_cart_button,
  .single_add_to_cart_button,
  .cart,
  .wc-block-cart__submit-container,
  .wp-block-woocommerce-checkout-actions-block,
  .tr-pagination,
  .navigation.pagination,
  .tr-404-actions,
  .tr-404-search,
  .reviews-section,
  .shop-preview .tr-cta-row,
  .repair-section,
  .related.products,
  .wp-block-woocommerce-cart-cross-sells-block { display: none !important; }

  /* WP also adjusts <html margin-top> for the admin bar — undo. */
  html { margin-top: 0 !important; }

  .site { max-width: 100% !important; padding: 0 !important; }
  main { padding: 0 !important; }

  /* Headings should still hierarchy clearly on paper. */
  h1, h2, h3, h4, .page-title, .product_title {
    color: #000 !important;
    page-break-after: avoid;
  }

  /* Surface link targets in print (long URLs get a `[url]` after the text). */
  a[href]:not([href^="#"])::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
    color: #444 !important;
  }
  /* But not for nav-like or button-like links that aren't visible anyway. */
  .tr-cta::after,
  .button::after,
  .tr-nav a::after,
  .tr-footer-nav a::after { content: none !important; }

  /* Tables (line items, totals) should be inked clearly. */
  table, th, td {
    border-color: #000 !important;
    color: #000 !important;
  }

  /* No widow lines under section headings. */
  p { orphans: 3; widows: 3; }
  img { max-width: 100% !important; page-break-inside: avoid; }
}

/* ------------------------------------------------------------------
   PL-1 / PL-2: Shop landing intro + "repair is a service" callout.
   Intro is a centered lede; the callout is a bordered card that lays
   out horizontally (text left, CTA right) on desktop and stacks on
   narrow viewports.
   ------------------------------------------------------------------ */
.tr-shop-intro {
  max-width: 60ch;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.tr-shop-intro p {
  color: var(--fg);
  font-weight: 300;
  line-height: 1.65;
  margin: 0;
}
.tr-repair-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: #0a0608;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.5rem;
}
.tr-repair-callout__text { flex: 1 1 22rem; }
.tr-repair-callout__text .section-label { margin-bottom: 0.35rem; }
.tr-repair-callout__text p { margin: 0; color: var(--fg); font-weight: 300; line-height: 1.6; }
.tr-repair-callout__text strong { color: var(--accent); font-weight: 400; }
.tr-repair-callout .tr-cta { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .tr-repair-callout { flex-direction: column; align-items: stretch; }
  .tr-repair-callout .tr-cta { text-align: center; }
}

/* GL-27 (2026-06-30): PRIMARY-ACTION buttons = copper-filled so the click target
   pops (Matt: "hard to navigate"). Scoped to buy/submit actions only — secondary
   buttons (update cart, apply coupon, etc.) keep the minimalist outline. */
.tr-cta,
.woocommerce .button.single_add_to_cart_button,
.woocommerce .button.add_to_cart_button,
.woocommerce .button.checkout-button,
.woocommerce a.checkout-button,
.woocommerce #place_order {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--bg) !important;
}
.tr-cta:hover,
.woocommerce .button.single_add_to_cart_button:hover,
.woocommerce .button.add_to_cart_button:hover,
.woocommerce .button.checkout-button:hover,
.woocommerce a.checkout-button:hover,
.woocommerce #place_order:hover {
  background: #b3743f !important;
  border-color: #b3743f !important;
  color: var(--bg) !important;
}