/* ==========================================================================
   Alevectis Commerce theme - base.
   Reset, document type, the layout primitives every page uses and the shared
   utilities.  Nothing here names a colour, a size or a font directly: every
   value is a token from tokens.css.
   Load order: [inline: alevectis-commerce-core-tokens, critical, @font-face] -> tokens.css
   -> base.css -> components.css -> <page>.css

   @package Alevectis Commerce
   @author Alevectis <https://alevectis.co.il>
   @copyright 2026 Alevectis
   @license GPL-2.0-or-later
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--k-header-h) + var(--k-s-8));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--k-bg-page);
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-body);
  line-height: var(--k-lh-body);
  font-weight: 400;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* never a scrollbar; `clip` keeps position:sticky working */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--k-bg-sub); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--k-font-display);
  margin: 0;
  text-wrap: balance;
  letter-spacing: var(--k-ls-heading);
  line-height: var(--k-lh-heading);
  font-weight: var(--k-w-heading);
}

p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button { font: inherit; }

::selection { background: var(--k-accent-soft); color: var(--k-text); }

/* The store engine requires this rule and requires that no display rule beat it. */
[hidden] { display: none !important; }

/* ---------- focus: one ring, everywhere, keyboard only ------------------ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--k-focus);
  outline-offset: 3px;
  border-radius: var(--k-r-1);
}
:where(.k-band--dark, .k-onDark) :where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline-color: var(--k-focus-on-dark);
}

/* ---------- skip link ---------------------------------------------------- */

.k-skip {
  position: absolute;
  inset-block-start: var(--k-s-4);
  inset-inline-start: var(--k-s-4);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--k-action);
  color: var(--k-text-on-action);
  padding: var(--k-s-5) var(--k-s-8);
  border-radius: var(--k-r-2);
  text-decoration: none;
  font-weight: var(--k-w-strong);
  transition: transform var(--k-dur-state) var(--k-ease-arrive);
}
.k-skip:focus { transform: translateY(0); }

/* ---------- layout primitives ------------------------------------------- */

.k-container {
  width: 100%;
  max-width: var(--k-container);
  margin-inline: auto;
  padding-inline: var(--k-pad-gutter);
}
.k-container--wide { max-width: 1680px; }
.k-container--narrow { max-width: 920px; }

.k-band { padding-block: var(--k-pad-block); position: relative; }
.k-band--sub    { background: var(--k-bg-sub); }
.k-band--dark   { background: var(--k-bg-dark); color: var(--k-text-on-dark); }
.k-band--accent { background: var(--k-accent-soft); }
.k-band--tight  { padding-block: clamp(28px, 3.2vw, 48px); }

/* a rule appears only where two same-coloured bands meet */
.k-band + .k-band:not(.k-band--sub):not(.k-band--dark):not(.k-band--accent) { border-block-start: 1px solid var(--k-line); }

.k-band--dark a:not(.k-btn) { color: var(--k-text-on-dark); }
.k-band--dark .k-lead, .k-band--dark .k-small { color: rgba(255,255,255,.76); }

.k-stack { display: grid; gap: var(--k-s-6); align-content: start; }
.k-stack--tight { gap: var(--k-s-4); }
.k-stack--loose { gap: var(--k-s-9); }
.k-row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-s-5); }

/* ---------- the type roles ---------------------------------------------- */

.k-display {
  font-family: var(--k-font-display);
  font-size: var(--k-fs-display);
  font-weight: var(--k-w-display);
  letter-spacing: var(--k-ls-display);
  line-height: var(--k-lh-display);
}
.k-h1 {
  font-size: var(--k-fs-h1);
  font-weight: var(--k-w-display);
  letter-spacing: var(--k-ls-display);
  line-height: 1.14;
}
.k-h2 { font-size: var(--k-fs-h2); }
.k-h3 { font-size: var(--k-fs-h3); }
.k-lead { font-size: var(--k-fs-lead); line-height: 1.62; color: var(--k-text-secondary); max-width: var(--k-measure); }
.k-body { font-size: var(--k-fs-body); line-height: var(--k-lh-body); max-width: var(--k-measure); }
.k-small { font-size: var(--k-fs-small); line-height: 1.6; color: var(--k-text-secondary); }
.k-label { font-size: var(--k-fs-label); font-weight: var(--k-w-strong); line-height: 1.4; }
/* No letter-spacing and no text-transform on any of these: Hebrew has neither. */

.k-num {
  font-family: var(--k-font-display);
  font-size: var(--k-fs-hero);
  font-weight: var(--k-w-display);
  letter-spacing: var(--k-ls-display);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- prices: tabular figures, one isolated LTR run --------------- */

.k-price {
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  font-feature-settings: "tnum" 1;
}
.k-price--l    { font-size: var(--k-fs-price-l); font-weight: var(--k-w-strong); letter-spacing: -.01em; }
.k-price--s    { font-size: var(--k-fs-price-s); font-weight: var(--k-w-strong); }
.k-price--was  { color: var(--k-text-secondary); font-weight: 400; text-decoration: line-through; font-size: var(--k-fs-small); }
.k-price--sale { color: var(--k-sale); }

/* ---------- utilities the engine and the pages both need ---------------- */

/* Every price, phone, SKU, order number and Latin run.  Required by _shop. */
.k-ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; display: inline-block; }

/* .screen-reader-text is WordPress's and WooCommerce's name for the same thing */
.k-sr, .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.k-measure { max-width: var(--k-measure); }
.k-list-plain { list-style: none; margin: 0; padding: 0; }
.k-nowrap { white-space: nowrap; }

/* A section head: the heading, an optional sub-line, and one link at the end. */
.k-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--k-s-6);
  flex-wrap: wrap;
  margin-block-end: var(--k-s-9);
  padding-block-end: var(--k-s-5);
  border-block-end: 1px solid var(--k-line);
}
.k-band--dark .k-head { border-block-end-color: var(--k-line-on-dark); }
.k-head__t { font-size: var(--k-fs-h2); }
.k-head__sub { color: var(--k-text-secondary); font-size: var(--k-fs-small); margin-block-start: var(--k-s-3); max-width: 54ch; }
.k-band--dark .k-head__sub { color: rgba(255,255,255,.76); }

.k-viewall {
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-ui);
  color: var(--k-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-3);
  min-height: var(--k-tap);
  border-block-end: 1px solid transparent;
  transition: border-color var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state);
}
.k-viewall:hover { color: var(--k-accent-hover); border-block-end-color: currentColor; }
.k-viewall svg { flex: none; }
.k-band--dark .k-viewall { color: var(--k-accent-on-dark); }
.k-band--dark .k-viewall:hover { color: var(--k-text-on-dark); }

/* the arrow in a "view all" points the way the reader is going: leftwards in RTL */
.k-arrow { width: 16px; height: 16px; }

/* ---------- grids ------------------------------------------------------- */

.k-grid-products {
  display: grid;
  gap: calc(var(--k-gap-grid) + 8px) var(--k-gap-grid);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px)  { .k-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .k-grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.k-grid-auto {
  display: grid;
  gap: var(--k-gap-grid);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.k-cols-2 { display: grid; gap: var(--k-s-9) var(--k-s-11); grid-template-columns: 1fr; }
@media (min-width: 900px) { .k-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- contact routes are never a small target ---------------------
   WCAG 2.2 sets 24x24 as the minimum and this theme designs to 44.
   A phone number, a WhatsApp link or an email address
   is the route a reader in a hurry reaches for, so it gets the comfortable
   size even when it sits inside a sentence. */
a[href^="tel:"], a[href^="mailto:"], a[href*="wa.me"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--k-tap);
  min-width: var(--k-tap);
}