/* Reset + base typography — extracted from makeart-home-v4.html */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Currency symbol (₪ U+20AA) — Frank Ruhl Libre and similar Hebrew serif
 * fonts render the New Sheqel glyph in a way that's easily mistaken for
 * the Hebrew letter ש (Shin), confusing customers.
 *
 * Trick: define an "alias" @font-face whose `unicode-range` covers ONLY
 * U+20AA and whose `src` points to a sans-serif font with a clear ₪
 * glyph (Heebo / Arial). Then prepend that font to every font stack —
 * the browser uses it for ₪ characters and falls back to the normal
 * font for everything else. No span wrapping needed; works on bare
 * `₪` in text too. */
@font-face {
  font-family: 'MakeartShekel';
  src: local('Heebo'), local('HeeboRegular'), local('Arial Hebrew'), local('Arial'), local('system-ui');
  unicode-range: U+20AA;
}
:root, body, button, input, select, textarea {
  font-family: 'MakeartShekel', var(--sans);
}
/* NOTE: ₪ glyph rendering is now handled by an inline `style="..."`
 * attribute on each .currency span (see template-tags.php and the
 * various templates). Inline styles win the cascade over normal
 * author CSS — but they LOSE to author `!important`. So we removed
 * the `!important` font-family rule that used to live here.
 *
 * The font stack lives in inline styles so:
 *  - we don't need to load a custom @font-face for ONLY ₪
 *  - the override is per-glyph, leaving the rest of the page in its
 *    intended typography
 *
 * Don't add a `.currency { font-family: ... !important }` rule here.
 */

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--orange-light); color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Visually hidden — for a11y labels */
.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;
}