/* ==========================================================================
   BASE — reset, document defaults, semantic element styling, layout shells
   Depends on: tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MODERN RESET
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset anchor jumps so the sticky header never covers the target */
  scroll-padding-top: calc(var(--header-height) + var(--space-6));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* Guarantees the "no horizontal scrolling" requirement site-wide */
  overflow-x: hidden;
}

/* The [hidden] attribute must always win.
   Any author rule that sets `display` (e.g. .product-card { display: flex })
   beats the UA stylesheet's [hidden] { display: none }, which would leave
   JS-filtered items on screen. This is the one place !important is correct. */
[hidden] { display: none !important; }

/* Media defaults — block-level, never overflow their container */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  /* Neutral placeholder while lazy images decode; avoids white flash */
  background-color: var(--color-surface-muted);
}

/* Form controls inherit type instead of using UA defaults */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: none; cursor: pointer; }

/* Prevent long unbroken strings (product codes, URLs) from forcing overflow */
p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption, blockquote, td, th {
  overflow-wrap: break-word;
}

/* Remove list styling only where we opt in */
:where(ul, ol)[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

hr {
  border: none;
  border-top: var(--border-hairline) solid var(--color-border);
  margin: var(--space-12) 0;
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}


/* --------------------------------------------------------------------------
   2. TYPOGRAPHY — semantic defaults
   Every heading level has a real default so unstyled CMS content still looks
   correct. Utility classes below let any element borrow another level's look
   without breaking the document outline (critical for SEO + a11y).
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--color-text);
  text-wrap: balance;   /* avoids orphaned single words in headings */
}

h1 { font-size: var(--text-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); }
h5 { font-size: var(--text-h5); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); }
h6 {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--color-text-muted);
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: var(--transition-color);
}

a:hover { color: var(--color-primary-hover); }

strong, b { font-weight: var(--fw-semibold); }

small { font-size: var(--text-caption); }

blockquote {
  font-family: var(--font-display);
  font-variation-settings: var(--font-display-settings);
  font-size: var(--text-h4);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--color-text-secondary);
  border-left: var(--border-thick) solid var(--color-rule-accent);
  padding-left: var(--space-6);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}


/* --- Type utility classes ------------------------------------------------
   Use these to apply a visual level independent of the semantic tag.
   e.g. an <h2> that must look like an h3 keeps correct heading order. */

.t-display-xl { font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--text-display-xl); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-display-lg { font-family: var(--font-display); font-variation-settings: var(--font-display-settings); font-size: var(--text-display-lg); font-weight: var(--fw-semibold); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-h1 { font-size: var(--text-h1); }
.t-h2 { font-size: var(--text-h2); }
.t-h3 { font-size: var(--text-h3); }
.t-h4 { font-size: var(--text-h4); }
.t-h5 { font-size: var(--text-h5); }

.t-lead {
  font-size: var(--text-lead);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  font-weight: var(--fw-regular);
}

.t-body-lg { font-size: var(--text-body-lg); line-height: var(--lh-relaxed); }
.t-body-sm { font-size: var(--text-body-sm); }
.t-caption { font-size: var(--text-caption); line-height: var(--lh-snug); color: var(--color-text-muted); }

/* Eyebrow / kicker — the small tracked caps above a section heading.
   The short brass rule is what makes it feel considered rather than generic. */
.t-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  line-height: var(--lh-flat);
  color: var(--color-accent);
}

.t-eyebrow::before {
  content: "";
  inline-size: var(--space-8);
  block-size: 1px;
  background-color: var(--color-rule-accent);
  flex: none;
}

.t-eyebrow--center { justify-content: center; }
.t-eyebrow--center::after {
  content: "";
  inline-size: var(--space-8);
  block-size: 1px;
  background-color: var(--color-rule-accent);
  flex: none;
}

/* Numerals in spec tables and stats must align in columns */
.t-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.t-muted     { color: var(--color-text-muted); }
.t-secondary { color: var(--color-text-secondary); }
.t-inverse   { color: var(--color-text-inverse); }
.t-primary   { color: var(--color-primary); }
.t-accent    { color: var(--color-accent); }

.t-measure-narrow { max-width: var(--measure-narrow); }
.t-measure        { max-width: var(--measure); }
.t-measure-wide   { max-width: var(--measure-wide); }

.t-center { text-align: center; }
.t-center p { margin-inline: auto; }


/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   These map 1:1 onto Elementor Containers:
   .container      -> Container, boxed, max-width 1280
   .section        -> Container, padding block from --section-y
   .grid           -> Container, grid layout
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--form   { max-width: var(--container-form); }
.container--flush  { padding-inline: 0; }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: var(--section-y-sm); }
.section--flush-top    { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }

/* Section surface variants */
.section--surface  { background-color: var(--color-surface); }
.section--sunken   { background-color: var(--color-surface-sunken); }
.section--muted    { background-color: var(--color-surface-muted); }
.section--inverse  { background-color: var(--color-surface-inverse); color: var(--color-text-inverse); }
.section--primary  { background-color: var(--color-primary-deep); color: var(--color-text-inverse); }

/* Inside inverse sections, headings and rules must flip too */
.section--inverse :is(h1,h2,h3,h4,h5),
.section--primary :is(h1,h2,h3,h4,h5) { color: var(--color-text-inverse); }
.section--inverse .t-secondary,
.section--primary .t-secondary { color: rgba(251, 249, 247, 0.72); }
.section--inverse .t-muted,
.section--primary .t-muted { color: rgba(251, 249, 247, 0.60); }

/* Hairline separator between adjacent same-colour sections */
.section--ruled { border-block-start: var(--border-hairline) solid var(--color-border); }


/* --- Section header block ------------------------------------------------ */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--section-gap);
  max-width: var(--measure-wide);
}

.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head--split {
  max-width: none;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
}

.section-head--split > :first-child { flex: 1 1 auto; }
.section-head--split > :last-child  { flex: 0 0 auto; }

@media (max-width: 767px) {
  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* --- Grid ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--lg { gap: var(--grid-gap-lg); }

/* Fixed column counts collapse predictably: 4 -> 3 -> 2 -> 1 */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Auto-fit grid — preferred for product/collection listings because it needs
   no breakpoints at all and never leaves a stranded single column. */
.grid--auto    { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }

/* Asymmetric editorial splits */
.grid--split      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid--split-7-5  { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grid--split-5-7  { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.grid--split-8-4  { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.grid--split-4-8  { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }

@media (max-width: 1023px) {
  .grid--5, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .grid--3, .grid--5, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split, .grid--split-7-5, .grid--split-5-7,
  .grid--split-8-4, .grid--split-4-8 { grid-template-columns: minmax(0, 1fr); }
}

/* Product/collection listings: keep two swatches per row on phones rather
   than dropping to a single oversized column. The 260px auto-fill min would
   otherwise collapse to one column below ~570px. */
@media (max-width: 640px) {
  .grid--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: minmax(0, 1fr); }
  .grid--auto-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Stack — vertical flow with a consistent gap */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.stack--xl { gap: var(--space-10); }

/* Cluster — horizontal group that wraps (button rows, tag lists) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster--lg { gap: var(--space-6); }
.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }


/* --- Media frame ---------------------------------------------------------
   Standard wrapper for every image on the site. Enforces a ratio, clips the
   hover scale, and keeps the layout stable while images load (no CLS). */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-muted);
  aspect-ratio: var(--ratio-landscape);
}

.media > img,
.media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--square    { aspect-ratio: var(--ratio-square); }
.media--portrait  { aspect-ratio: var(--ratio-portrait); }
.media--landscape { aspect-ratio: var(--ratio-landscape); }
.media--wide      { aspect-ratio: var(--ratio-wide); }
.media--slab      { aspect-ratio: var(--ratio-slab); }
.media--auto      { aspect-ratio: auto; }
.media--sharp     { border-radius: var(--radius-sm); }
.media--flat      { border-radius: 0; }

/* Zoom on hover — the single most effective "premium" micro-interaction */
.media--zoom > img { transition: transform var(--duration-image) var(--ease-out); }
.media--zoom:hover > img,
a:hover .media--zoom > img,
.card:hover .media--zoom > img { transform: scale(1.06); }

/* Scrim for text-over-image */
.media--scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-ink);
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   4. ACCESSIBILITY
   -------------------------------------------------------------------------- */

/* Visible focus for keyboard users only — never a focus ring on mouse click */
:focus { outline: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.section--inverse :focus-visible,
.section--primary :focus-visible {
  box-shadow: 0 0 0 3px var(--hm-ink-900), 0 0 0 5px var(--color-focus);
}

/* Screen-reader-only text. Used for icon-button labels and section landmarks. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--color-text-on-primary);
}

/* Expand a small control's hit area to the 44px WCAG target without
   changing its visual size */
.tap-target { position: relative; }
.tap-target::after {
  content: "";
  position: absolute;
  inset: 50% 50% 50% 50%;
  min-width: 44px;
  min-height: 44px;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}


/* --------------------------------------------------------------------------
   5. SCROLL REVEAL
   Progressive enhancement: content is visible by default and only hidden
   once JS adds .js-reveal-ready, so it never disappears if JS fails.
   -------------------------------------------------------------------------- */

.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   6. PRINT — spec sheets get printed by architects and buyers
   -------------------------------------------------------------------------- */

@media print {
  :root { --color-bg: #fff; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .site-footer, .whatsapp-float, .breadcrumbs,
  .btn, .no-print { display: none !important; }
  .section { padding-block: var(--space-6); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .media { break-inside: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
}