/* ============================================================================
   PANPRUKSA — POLISH LAYER  (v0.12.0)
   ---------------------------------------------------------------------------
   Additive, cross-cutting refinements loaded AFTER styles.css + motion.css.
   Brand tokens are untouched — this layer only sharpens execution:
   accessible focus, tactile states, text-wrapping, type micro-rhythm, and a
   few shared primitives (section heads, chips, spec tiles). Nothing here
   changes the palette, fonts, or layout intent.
   ============================================================================ */

/* --- Typography micro-rhythm ------------------------------------------------ */
h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }

/* Subtle optical tightening on large display type (Source Sans reads crisper). */
.hero-content h1,
.page-hero h1,
.intro-section h2 { letter-spacing: -0.012em; }

/* Keep prose from running edge-to-edge on very wide viewports. */
.intro-section p,
.values-section .value-item p { max-width: 68ch; }

/* --- Accessible focus ------------------------------------------------------- */
/* No focus styling existed anywhere. One consistent copper ring, visible on
   both light and dark surfaces, only on keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.color-card:focus-visible,
.product-category-card:focus-visible,
.collection-card:focus-visible {
  outline: 2px solid var(--pp-accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.btn:focus-visible { outline-offset: 4px; }

/* Skip clipped outlines inside overflow-hidden cards by lifting the target. */
.color-card:focus-visible { outline-offset: 2px; }

/* --- CTA hierarchy on dark heroes ------------------------------------------- */
/* A filled-white primary reads as the dominant action next to a ghost secondary. */
.btn-white.btn-primary { background: var(--white); color: var(--black); }
.btn-white.btn-primary:hover { background: transparent; color: var(--white); }

/* --- Tactile press feedback ------------------------------------------------- */
.btn:active            { transform: translateY(1px); }
.link-arrow:active     { opacity: 0.7; }
.product-tabs button:active { transform: translateY(0.5px); }

/* --- Shared primitive: section head ---------------------------------------- */
/* Centralises eyebrow + heading so eyebrow restraint can be applied per page
   (taste-skill: at most one eyebrow per ~3 sections). */
.section-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head.center { text-align: center; }
.section-head .eyebrow {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--copper);
  margin-bottom: 0.85rem;
}
.section-head h2,
.section-head h3 { margin: 0; }
.section-head .sub {
  margin-top: 1rem;
  color: var(--text-muted);
  max-width: 60ch;
}
.section-head.center .sub { margin-left: auto; margin-right: auto; }

/* --- Shared primitive: chips (highlights / tags) ---------------------------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--warm-gray);
  color: var(--text-muted);
  background: transparent;
  white-space: nowrap;
}
.chip.chip-accent { border-color: var(--copper); color: var(--copper); }

/* --- Color-card refinement (used by the data-driven flooring grid) ---------- */
.color-card { outline: none; }
.color-card-img img { transition: transform var(--duration-slow) var(--ease-out); }
.color-card:hover .color-card-img img,
.color-card:focus-visible .color-card-img img { transform: scale(1.04); }

/* --- Filter empty state ----------------------------------------------------- */
[data-filter-empty] {
  display: none;
  padding: 2.5rem 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
[data-filter-empty].show { display: block; }

/* Reduced motion: drop the transforms the press/hover states introduce. */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .product-tabs button:active,
  .color-card:hover .color-card-img img,
  .color-card:focus-visible .color-card-img img { transform: none; }
}