/* ============================================================================
   Cawood Flooring Systems — "Premium Craftsman" design pack.
   Loads AFTER styles.css + the inline brand-token block, so it wins the cascade.
   Lives only in this site dir; the generator's copyShared never overwrites it,
   so it survives `generate-site.js` regenerations.
   Goal: warm, tactile, boutique-installer feel that's distinct from the other
   generator sites — without touching shared base.css.
   ============================================================================ */

:root {
  /* Warm wood-toned neutral canvas (replaces the cool white/gray) */
  --brand-bg: #FBF8F3;          /* warm bone */
  --brand-bg-alt: #F1E9DB;      /* warm sand */
  --brand-text: #221F1A;        /* warm near-black */
  --brand-text-muted: #6E655A;  /* warm taupe */
  --brand-border: #E4D9C7;      /* warm hairline */

  /* Wood accent — the craftsman signature. Used for rules, eyebrows, numerals,
     and editorial detailing. The indigo (--brand-primary/secondary) stays the
     anchor for CTAs + dark sections. */
  --wood: #A9763F;
  --wood-deep: #875B2C;
  --wood-soft: #E9D7BE;
  --ink: #221F1A;
}

/* Slightly warmer body rendering + faint paper grain for tactility */
body {
  background-color: var(--brand-bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(120,90,50,0.03) 1px, transparent 0);
  background-size: 9px 9px;
}

/* ---- Type: let the serif breathe a touch more than the stock luxury profile ---- */
h1, h2, h3 { letter-spacing: -0.015em; }
.x-body p, .hero p.lead { line-height: 1.78; }

/* ---- Eyebrows: hairline + tracked caps instead of a solid indigo chip ---- */
.x-head .k,
.section-head .eyebrow,
.x-areamap-k {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--wood-deep);
  letter-spacing: .26em;
  font-weight: 700;
}
.x-head .k::before,
.section-head .eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--wood);
}
.x-head.center .k::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--wood);
}
.x-head.center .k { justify-content: center; }

/* ---- Hero: warm, deeper scrim with an indigo wash; refined outlined eyebrow ---- */
.x-hero .x-hero-scrim {
  background:
    linear-gradient(180deg, rgba(34,31,26,.28) 0%, rgba(34,31,26,.16) 38%, rgba(20,18,32,.92) 100%),
    linear-gradient(110deg, rgba(49,49,84,.35) 0%, rgba(49,49,84,0) 55%);
}
.x-banner .x-hero-scrim {
  background: linear-gradient(180deg, rgba(20,18,32,.62), rgba(20,18,32,.86));
}
.x-eyebrow {
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  border-left: 3px solid var(--wood);
  letter-spacing: .22em;
  padding: 8px 16px;
  border-radius: 0;
}
.x-hero .x-sub { color: rgba(255,255,255,.9); }
/* Thin wood rule under the chips strip echoes a floor seam */
.x-chips { border-top-color: rgba(233,215,190,.32); }
.x-chip svg { color: var(--wood-soft); }

/* ---- Buttons: squared, tactile, warm hover ---- */
.x-btn { border-radius: 2px; letter-spacing: .02em; }
.x-btn-primary { background: var(--brand-primary); box-shadow: 0 12px 28px rgba(34,31,26,.22); }
.x-btn-primary:hover { background: #3a3a63; }
.x-btn-white { color: var(--brand-secondary); border-radius: 2px; }
.x-btn-ghost { border-color: rgba(255,255,255,.5); border-radius: 2px; }
.btn { border-radius: 2px; }

/* ============================================================================
   "Shop by floor" — the home service tiles restyled as editorial category
   cards (ready to point at product pages later). Numbered, with a wood rule.
   ============================================================================ */
.x-services { gap: 28px; }
.x-svc {
  border-radius: 3px;
  min-height: 420px;
  box-shadow: 0 14px 40px rgba(34,31,26,.16);
}
.x-svc::after {
  background: linear-gradient(180deg, rgba(20,18,32,0) 28%, rgba(20,18,32,.55) 62%, rgba(20,18,32,.92) 100%);
}
.x-svc .x-svc-body { padding: 30px 30px 32px; }
/* editorial index number + label rail */
.x-svc .x-svc-body::before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--wood);
  margin-bottom: 16px;
  transition: width .35s ease;
}
.x-svc:hover .x-svc-body::before { width: 88px; }
.x-svc h3 { font-weight: 600; letter-spacing: -.01em; }
.x-svc .x-arrow span { color: var(--wood-soft); }
.x-svc .x-arrow { letter-spacing: .04em; }

/* ---- Why-us: warm tile chips, wood icon accent ---- */
.x-feat .ic {
  background: color-mix(in srgb, var(--wood) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--wood) 30%, transparent);
  border-radius: 4px;
}
.x-feat .ic svg { color: var(--wood-deep); }
.x-feat h4 { font-weight: 600; }

/* ---- Process steps: serif wood numerals, like chapter marks ---- */
.x-step .n {
  font-family: var(--font-heading);
  color: var(--wood);
  -webkit-text-fill-color: var(--wood);
  font-weight: 500;
  font-size: 3.4rem;
}
.x-step h4 { font-weight: 600; }

/* ---- Stat strip: wood numerals on the indigo band ---- */
.x-stat .num { color: var(--wood-soft); font-weight: 700; }

/* ---- Cards / lists / FAQ: warm detailing + wood markers ---- */
.card { border-radius: 3px; border-color: var(--brand-border); }
.card:hover { box-shadow: 0 14px 34px rgba(34,31,26,.14); }
.x-body ul li::before { background: var(--wood); box-shadow: inset 0 0 0 3px var(--brand-bg), 0 0 0 1px var(--wood); }
.x-body ul.x-checklist .x-ck { color: var(--wood-deep); }
.x-faq summary::after { color: var(--wood); }
.x-faq details[open] summary::after { color: var(--wood); }

/* ---- Service-area page county headers: wood rule ---- */
.x-county-block h3 { border-bottom-color: var(--wood); }
.x-town-list a svg { color: var(--wood); }

/* ---- Gallery category caption headings stay crisp serif ---- */
.x-gcat-cap h3 { font-weight: 600; }

/* ---- Nav: wood underline on hover, warm header ---- */
.site-header { border-bottom-color: var(--brand-border); }
/* Wood underline on hover — text links only, never the CTA button (excluding it
   keeps the button's padding symmetric and stops a stray bar under it). */
.profile-luxury_service .nav-links > li > a:not(.nav-cta) {
  position: relative;
  padding-bottom: 3px;
}
.profile-luxury_service .nav-links > li > a:not(.nav-cta):hover { color: var(--ink); }
.profile-luxury_service .nav-links > li > a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--wood);
  transition: right .25s ease;
}
.profile-luxury_service .nav-links > li > a:not(.nav-cta):hover::after { right: 0; }
.nav-cta { border-radius: 2px; }

/* ---- Footer: warm top hairline accent over the indigo ---- */
.site-footer { border-top: 3px solid var(--wood); }

/* ---- Big CTA band: keep indigo, add a centered wood rule above heading ---- */
.x-bigcta .container { position: relative; }
.x-bigcta h2 { font-weight: 600; }
.x-bigcta h2::before {
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--wood-soft);
  margin: 0 auto 22px;
}

@media (max-width: 860px) {
  .x-svc { min-height: 340px; }
}

/* ---- "Brands We Carry" strip (products index + product pages) ---- */
.prod-brands {
  margin: 40px 0 8px;
  padding: 26px 30px;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--wood);
  border-radius: 3px;
}
.prod-brands-k {
  display: block;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 12px;
  font-weight: 700;
  color: var(--wood-deep);
  margin-bottom: 14px;
}
.prod-brands ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 14px;
}
.prod-brands li {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  padding-right: 14px;
  border-right: 1px solid var(--brand-border);
  line-height: 1;
}
.prod-brands li:last-child { border-right: none; }
.prod-brands li.more { color: var(--brand-text-muted); font-style: italic; font-weight: 500; }