/* MCC base.css — tokens, reset, typography, root. Load 1st. */
/* ============================================================
   MCC — El-Madina Coatings · Shared Design System (mcc.css)
   Phase 1 Foundation. Inherits the locked Homepage visual language.
   Tokens → base → layout → navbar → footer → components → utils → responsive
   ============================================================ */

/* ---------- TOKENS (locked, from approved Homepage) ---------- */
:root{
  --floor:#15130F; --floor-2:#1E1B16; --floor-3:#2A261F; --floor-4:#3A352B;
  --primary:#E98C42; --primary-d:#A3622E; --primary-dd:#804D24;
  --concrete:#F4F1EA; --concrete-2:#E9E4D8; --ink:#1A1813;
  --muted:#9C9486; --muted-d:#6E685C;
  --teal:#2B999F; --yellow:#E9CF39; --green:#ABC554; --red:#D54D4A; --blue:#366EA1; --constr:#7E8B97;
  --ok:#7CB342; --warn:#E9A93A; --err:#D54D4A; --info:#366EA1;
  --hair:rgba(244,241,234,.10); --hair-2:rgba(244,241,234,.06);
  --f-display:'Archivo',sans-serif; --f-body:'Inter',system-ui,sans-serif; --f-mono:'IBM Plex Mono',monospace;
  --ease:cubic-bezier(.22,.8,.26,.99);
  --wrap:1280px; --nav-h:68px;
}
/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--floor);color:#D9D4C8;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
em{font-style:normal;color:var(--primary)}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--concrete);letter-spacing:-.015em;line-height:1.06}
p{margin:10px 0;color:#C7C2B6}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,48px)}
.sec{padding-block:clamp(64px,9vw,120px);position:relative}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--primary)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px}

/* === Accessibility: skip link (Phase 3) === */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--primary,#E98C42);color:#fff;padding:10px 18px;border-radius:0 0 6px 0;font-family:var(--f-display,sans-serif);font-weight:700;font-size:14px;text-decoration:none}
.skip-link:focus{left:0}
/* === Single-image product gallery (no faked grids) === */
.pd-gallery.pd-gallery-one{display:flex;justify-content:center}
.pd-gallery.pd-gallery-one .g{max-width:460px;width:100%}