/* ==========================================================================
   Alevectis Commerce theme - components.
   Everything shared by every page: controls, fields, badges, THE product card,
   and the chrome (announcement, header, navigation, mega menu, search, phone
   drawer, mini-cart, footer).
   Every page loads this file.  Do not fork a component here; if a page needs a
   variant, add a modifier class in this file.
   Changes from the template: controls take --k-r-control (the panel's button
   shape), fills that carry the owner's accent take --k-accent-fill, lines and
   bars that carry information take --k-accent-edge, the logo image takes the
   panel's widths, and the mini-cart is WooCommerce's (no store engine).

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

/* =========================================================== 1. CONTROLS == */

.k-btn {
  --btn-bg: var(--k-action);
  --btn-fg: var(--k-text-on-action);
  --btn-bd: var(--k-action);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s-4);
  min-height: 48px;
  padding-inline: var(--k-s-8);
  border: 1px solid var(--btn-bd);
  border-radius: var(--k-r-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-strong);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state),
              border-color var(--k-dur-state) var(--k-ease-state),
              color var(--k-dur-state) var(--k-ease-state),
              transform var(--k-dur-feedback) var(--k-ease-state);
}
.k-btn:hover  { --btn-bg: var(--k-action-hover); --btn-bd: var(--k-action-hover); }
.k-btn:active { --btn-bg: var(--k-action-active); transform: translateY(1px); }

.k-btn--secondary { --btn-bg: transparent; --btn-fg: var(--k-text); --btn-bd: var(--k-line-control); }
.k-btn--secondary:hover  { --btn-bg: var(--k-bg-sub); --btn-bd: var(--k-text); }
.k-btn--secondary:active { --btn-bg: var(--k-c-ink-100); }

.k-btn--ghost { --btn-bg: transparent; --btn-fg: var(--k-text); --btn-bd: transparent; padding-inline: var(--k-s-5); }
.k-btn--ghost:hover  { --btn-bg: var(--k-bg-sub); --btn-fg: var(--k-accent-hover); }
.k-btn--ghost:active { --btn-bg: var(--k-c-ink-100); }

.k-btn--accent { --btn-bg: var(--k-accent-fill); --btn-bd: var(--k-accent-fill); --btn-fg: var(--k-on-accent-fill); }
.k-btn--accent:hover { --btn-bg: var(--k-accent-hover); --btn-bd: var(--k-accent-hover); }

.k-btn--onDark { --btn-bg: var(--k-c-white); --btn-fg: var(--k-c-ink-900); --btn-bd: var(--k-c-white); }
.k-btn--onDark:hover { --btn-bg: var(--k-c-ink-050); --btn-bd: var(--k-c-ink-050); }
.k-btn--onDark.k-btn--secondary { --btn-bg: transparent; --btn-fg: var(--k-c-white); --btn-bd: var(--k-line-on-dark); }
.k-btn--onDark.k-btn--secondary:hover { --btn-bg: rgba(255,255,255,.1); --btn-bd: var(--k-c-white); }

.k-btn--small { min-height: var(--k-tap); padding-inline: var(--k-s-6); font-size: var(--k-fs-ui); }
.k-btn--block { width: 100%; }

/* Disabled with the attribute, never with pointer-events: the reason must stay
   reachable by keyboard and screen reader. */
.k-btn[aria-disabled="true"], .k-btn:disabled {
  --btn-bg: var(--k-c-ink-050);
  --btn-fg: var(--k-c-ink-600);
  --btn-bd: var(--k-line);
  cursor: not-allowed;
}
.k-btn[aria-disabled="true"]:active, .k-btn:disabled:active { transform: none; }
.k-btn[aria-busy="true"] { --btn-bg: var(--k-action-hover); cursor: progress; }

.k-spin {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: k-spin 800ms linear infinite;
  flex: none;
}
@keyframes k-spin { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .k-spin { animation-duration: 2400ms; } }

/* An icon control in the chrome: always at least one comfortable tap target. */
.k-icon-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s-3);
  min-width: var(--k-tap);
  min-height: var(--k-tap);
  padding-inline: var(--k-s-4);
  border: 1px solid transparent;
  border-radius: var(--k-r-2);
  background: transparent;
  color: inherit;
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-ui);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background var(--k-dur-state) var(--k-ease-state),
              border-color var(--k-dur-state) var(--k-ease-state),
              color var(--k-dur-state) var(--k-ease-state);
}
.k-icon-btn:hover  { background: var(--k-bg-sub); border-color: var(--k-line); }
.k-icon-btn:active { background: var(--k-c-ink-100); }
.k-icon-btn svg { width: 22px; height: 22px; flex: none; }
.k-icon-btn__t { display: none; }
/* the labels appear only where there is room for them without crowding */
@media (min-width: 1280px) { .k-icon-btn__t { display: inline; } }

/* ============================================================= 2. FIELDS == */

.k-field { display: grid; gap: var(--k-s-3); }
.k-field__l { font-size: var(--k-fs-label); font-weight: var(--k-w-strong); }
.k-field__i {
  width: 100%;
  min-height: 48px;
  padding-inline: var(--k-s-5);
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  transition: border-color var(--k-dur-state) var(--k-ease-state),
              box-shadow var(--k-dur-state) var(--k-ease-state);
}
.k-field__i::placeholder { color: var(--k-text-faint); }
.k-field__i:hover { border-color: var(--k-c-ink-600); }
.k-field__i:focus { border-color: var(--k-accent-edge); box-shadow: inset 0 0 0 1px var(--k-accent-edge); outline: none; }
.k-field__i:focus-visible { outline: 3px solid var(--k-focus); outline-offset: 2px; }
.k-field__i:disabled { background: var(--k-bg-sub); color: var(--k-text-secondary); cursor: not-allowed; }
.k-field__h { font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.5; }
.k-field__e { font-size: var(--k-fs-small); color: var(--k-sale); font-weight: var(--k-w-strong); }

/* ============================================================= 3. BADGES == */

.k-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding-inline: var(--k-s-4);
  border-radius: var(--k-r-1);
  font-size: var(--k-fs-badge);
  font-weight: var(--k-w-strong);
  line-height: 1;
  white-space: nowrap;
}
.k-badge--new  { background: var(--k-action); color: var(--k-text-on-action); }
.k-badge--sale { background: var(--k-sale-soft); color: var(--k-sale); box-shadow: inset 0 0 0 1px currentColor; }
.k-badge--oos  { background: var(--k-bg-page); color: var(--k-oos); box-shadow: inset 0 0 0 1px var(--k-line-strong); }
.k-badge--mto  { background: var(--k-accent-soft); color: var(--k-accent-hover); box-shadow: inset 0 0 0 1px currentColor; }

/* ======================================================= 4. PRODUCT CARD ==
   ONE component, used on the home page, the shop, the category, the search
   results, the cross-sells and the related row.  Its markup lives in
   template-parts/product/card.php.  Never write a second card. */

.k-card {
  display: flex;
  flex-direction: column;
  gap: var(--k-s-5);
  min-width: 0;
  height: 100%;            /* siblings share one baseline for the add control */
  background: var(--k-bg-raised);
  position: relative;
}

.k-card__media {
  position: relative;
  aspect-ratio: 4 / 5;      /* reserves the space: no shift when an image arrives */
  background: var(--k-bg-sub);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color var(--k-dur-state) var(--k-ease-state);
}
.k-card__media img { width: 100%; height: 100%; object-fit: cover; }
.k-card__media svg { width: 62%; height: auto; opacity: .62; color: var(--k-text); }
.k-card:hover .k-card__media { border-color: var(--k-line-strong); }

.k-card__flags {
  /* a child of .k-card, not of the media slot, so a swapped image never takes
     the badges with it */
  position: absolute;
  inset-block-start: var(--k-s-5);
  inset-inline-start: var(--k-s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-s-3);
  z-index: 2;
  pointer-events: none;
}
.k-card__flags:empty { display: none; }

.k-card__body { display: grid; gap: var(--k-s-3); }
.k-card__name {
  font-family: var(--k-font-text);
  font-size: var(--k-fs-name);
  font-weight: var(--k-w-ui);
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
}
 /* The overlay below makes the whole card the link, but a checker measures the
   <a>'s own box, and so does a finger that lands on the name.  Both get a
   comfortable target. */
.k-card__name a { text-decoration: none; display: inline-block; padding-block: var(--k-s-3); }
/* the whole media + name block is the link target, without nesting two links */
.k-card__name a::after { content: ""; position: absolute; inset: 0; }
.k-card__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.k-card__meta { font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.5; }
.k-card__prices { display: flex; align-items: baseline; gap: var(--k-s-4); flex-wrap: wrap; }
/* The price slot may hold a Hebrew sentence with one price in it ("החל מ־₪289").
   Only the price run is an LTR isolate; wrapping the whole slot in one renders
   the Hebrew backwards. So the slot sets the size, and the <bdi> inside it
   does the isolating. alv_card_price_html() writes exactly this shape. */
.k-card__price { font-size: var(--k-fs-price-s); font-weight: var(--k-w-strong); }
.k-card__price .k-price { font-size: inherit; font-weight: inherit; }
.k-card__stock { font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.k-card__stock--out { color: var(--k-oos); }

/* the add control sits above the card's own link overlay */
.k-card__add { margin-block-start: auto; position: relative; z-index: 3; }

/* the add control while WooCommerce answers, and once it has */
.k-card__add[aria-busy="true"] .k-spin { display: inline-block; }
.k-card__add .k-spin { display: none; }

/* a product row that has nothing to show: seen only by someone who can edit it */
.k-empty-note {
  display: grid;
  gap: var(--k-s-4);
  padding: var(--k-s-8);
  border: 1px dashed var(--k-line-control);
  border-radius: var(--k-r-3);
  background: var(--k-bg-page);
  color: var(--k-text-secondary);
  font-size: var(--k-fs-small);
  max-width: 62ch;
}
.k-empty-note b { color: var(--k-text); font-size: var(--k-fs-ui); }

/* ============================================================== 5. CHROME =
   Announcement bar, header, navigation, mega menu, search, phone drawer. */

.k-announce {
  background: var(--k-bg-dark);
  color: var(--k-text-on-dark);
  font-size: var(--k-fs-small);
}
.k-announce__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s-5);
  min-height: 40px;
  padding-block: var(--k-s-3);
}
.k-announce__t { flex: 1 1 auto; text-align: center; line-height: 1.5; padding-inline-start: var(--k-tap); }
.k-announce__t a { color: var(--k-accent-on-dark); text-underline-offset: 3px; }
/* the two other colourings the panel offers: the brand's own fill, and the raised ground */
.k-announce--brand { background: var(--k-color-brand, var(--k-bg-dark)); color: var(--k-color-on-brand, var(--k-text-on-dark)); }
.k-announce--brand .k-announce__t a { color: inherit; }
.k-announce--raised { background: var(--k-bg-sub); color: var(--k-text); border-block-end: 1px solid var(--k-line); }
.k-announce--raised .k-announce__t a { color: var(--k-accent); }
.k-announce__x {
  appearance: none;
  flex: none;
  width: var(--k-tap);
  height: var(--k-tap);
  display: grid;
  place-items: center;
  margin-inline-start: auto;
  border: 1px solid transparent;
  border-radius: var(--k-r-2);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.k-announce__x:hover { background: rgba(255,255,255,.12); border-color: var(--k-line-on-dark); }
.k-announce__x:active { background: rgba(255,255,255,.2); }
.k-announce__x svg { width: 16px; height: 16px; }
/* set on <html> before first paint by partials/head.html, so the bar a reader
   already dismissed never appears and then vanishes */
[data-k-announce="dismissed"] .k-announce { display: none; }

.k-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--k-z-header);
  background: var(--k-bg-page);
  border-block-end: 1px solid var(--k-line);
  transition: box-shadow var(--k-dur-state) var(--k-ease-state);
}
.k-header[data-k-stuck="true"] { box-shadow: var(--k-shadow-2); }
/* A signed-in owner sees the WordPress toolbar; the header sticks under it. */
body.admin-bar .k-header { inset-block-start: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar .k-header { inset-block-start: 0; } }
/* The owner turned "keep the header visible" off in the panel. */
.k-header--static { position: relative; }

.k-header__main {
  display: flex;
  align-items: center;
  gap: var(--k-s-4);
  min-height: var(--k-header-row);
  padding-block: var(--k-s-4);
}
@media (min-width: 1024px) {
  .k-header__main { gap: var(--k-s-8); }
  .k-header__burger, .k-tools__search { display: none; }
}
@media (max-width: 479px) {
  .k-header__main { gap: var(--k-s-2); }
  .k-tools { gap: 0; }
  .k-icon-btn { padding-inline: var(--k-s-2); }
  /* On the smallest phones the account goes to the drawer, where it is one tap
     away, and the room it frees goes to the store's name: a 27-character name
     needs it, and search, phone and cart are what a buyer reaches for. */
  .k-tools__account { display: none; }
  .k-logo__word { font-size: 0.9375rem; line-height: 1.16; }
}

/* ---- logo slot: a wordmark, or an image, or both ---------------------- */

.k-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-4);
  min-height: var(--k-tap);
  margin-inline-end: auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.k-logo img {
  width: var(--k-logo-w-phone);
  max-width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  object-position: center right;
  background: none;
}
@media (min-width: 768px) { .k-logo img { width: var(--k-logo-w); max-height: 72px; } }
.k-logo__word {
  font-family: var(--k-font-display);
  font-size: clamp(0.9375rem, 0.6rem + 1.5vw, 1.375rem);
  font-weight: var(--k-w-display);
  letter-spacing: var(--k-ls-heading);
  line-height: 1.2;
  text-wrap: balance;
  min-width: 0;
}
.k-logo__sub {
  display: none;
  font-family: var(--k-font-text);
  font-size: var(--k-fs-label);
  font-weight: 400;
  color: var(--k-text-secondary);
  line-height: 1.3;
}
@media (min-width: 1024px) { .k-logo__sub { display: block; } }
.k-logo:hover .k-logo__word { color: var(--k-accent); }

/* ---- the utilities cluster ------------------------------------------- */

.k-tools { display: flex; align-items: center; gap: var(--k-s-2); flex: none; }

.k-count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  border-radius: var(--k-r-pill);
  background: var(--k-accent-fill);
  color: var(--k-on-accent-fill);
  font-size: 11px;
  font-weight: var(--k-w-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* not direction: ltr - the badge's own direction would turn its logical inset
     around and drop it on the label's far end */
  unicode-bidi: isolate;
}

/* ---- the inline search form (>=1024) and the search panel (<1024) ----- */

.k-search { flex: 1 1 auto; max-width: 420px; display: none; }
@media (min-width: 1024px) { .k-search { display: block; } }
.k-search__f { display: flex; align-items: stretch; gap: 0; }
.k-search__i {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--k-tap);
  padding-inline: var(--k-s-5);
  border: 1px solid var(--k-line-control);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  transition: border-color var(--k-dur-state) var(--k-ease-state);
}
/* The field is dir="auto" (a search typed in English runs left to right), and an
   empty dir="auto" field is LTR, so its own logical properties point the wrong
   way under a Hebrew page: the outer edge lost its border and the inner one kept
   it.  The joined edge is therefore set from
   the page's direction, not the field's. */
[dir="rtl"] .k-search__i { border-left-width: 0; border-radius: 0 var(--k-r-control) var(--k-r-control) 0; }
[dir="ltr"] .k-search__i { border-right-width: 0; border-radius: var(--k-r-control) 0 0 var(--k-r-control); }
.k-search__i::placeholder { color: var(--k-text-faint); }
.k-search__i:hover { border-color: var(--k-c-ink-600); }
.k-search__i:focus { border-color: var(--k-accent-edge); outline: none; }
.k-search__b {
  appearance: none;
  flex: none;
  min-width: var(--k-tap);
  min-height: var(--k-tap);
  display: grid;
  place-items: center;
  border: 1px solid var(--k-line-control);
  border-start-end-radius: var(--k-r-control);
  border-end-end-radius: var(--k-r-control);
  background: var(--k-bg-sub);
  color: var(--k-text);
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state);
}
.k-search__b:hover { background: var(--k-action); color: var(--k-text-on-action); }
.k-search__b:active { background: var(--k-action-active); }
.k-search__b svg { width: 20px; height: 20px; }

.k-searchpanel { border-block-start: 1px solid var(--k-line); background: var(--k-bg-sub); }
.k-searchpanel__in { padding-block: var(--k-s-6); display: grid; gap: var(--k-s-4); }
.k-searchpanel .k-search { display: block; max-width: none; }
@media (min-width: 1024px) { .k-searchpanel { display: none; } }
.k-searchpanel__hint { font-size: var(--k-fs-small); color: var(--k-text-secondary); }

/* ---- the navigation row (>=1024), with the mega menu ------------------ */

.k-nav { display: none; }
@media (min-width: 1024px) {
  .k-nav {
    /* the row collapses on scroll; grid rows animate without layout thrash */
    display: grid;
    border-block-start: 1px solid var(--k-line);
    grid-template-rows: 1fr;
    transition: grid-template-rows var(--k-dur-move) var(--k-ease-state);
  }
  .k-header[data-k-condensed="true"] .k-nav { grid-template-rows: 0fr; }
  .k-nav__clip { overflow: hidden; min-height: 0; }
}

.k-nav__list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 var(--k-s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.k-nav__i { position: relative; display: flex; }

.k-nav__l {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-3);
  min-height: var(--k-header-nav);
  padding-inline: var(--k-s-5);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: inherit;
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-ui);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--k-dur-state) var(--k-ease-state),
              border-color var(--k-dur-state) var(--k-ease-state),
              background var(--k-dur-state) var(--k-ease-state);
}
.k-nav__l:hover { color: var(--k-accent); border-block-end-color: var(--k-accent); }
.k-nav__l:active { background: var(--k-bg-sub); }
.k-nav__l[aria-current="page"] { border-block-end-color: var(--k-action); font-weight: var(--k-w-strong); }
.k-nav__l[aria-expanded="true"] { color: var(--k-accent); border-block-end-color: var(--k-accent); }
.k-nav__l--sale { color: var(--k-sale); }
.k-nav__l--sale:hover { color: var(--k-sale); border-block-end-color: var(--k-sale); }
.k-nav__caret { width: 12px; height: 12px; transition: transform var(--k-dur-state) var(--k-ease-state); }
.k-nav__l[aria-expanded="true"] .k-nav__caret { transform: rotate(180deg); }

.k-mega {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  z-index: var(--k-z-flyout);
  min-width: min(680px, 78vw);
  padding: var(--k-s-9);
  background: var(--k-bg-page);
  border: 1px solid var(--k-line);
  border-block-start: 0;
  border-radius: 0 0 var(--k-r-3) var(--k-r-3);
  box-shadow: var(--k-shadow-3);
  display: grid;
  gap: var(--k-s-9);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 15rem;
}
.k-mega__h {
  font-family: var(--k-font-text);
  font-size: var(--k-fs-label);
  font-weight: var(--k-w-strong);
  color: var(--k-text-secondary);
  margin-block-end: var(--k-s-5);
  padding-block-end: var(--k-s-3);
  border-block-end: 1px solid var(--k-line);
}
.k-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-s-1); }
.k-mega__list a {
  display: flex;
  min-height: var(--k-tap);
  align-items: center;
  padding-inline: var(--k-s-4);
  margin-inline: calc(var(--k-s-4) * -1);
  border-radius: var(--k-r-2);
  font-size: var(--k-fs-ui);
  text-decoration: none;
  transition: background var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state);
}
.k-mega__list a:hover { background: var(--k-bg-sub); color: var(--k-accent); }
.k-mega__list a:active { background: var(--k-c-ink-100); }
.k-mega__promo {
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-3);
  padding: var(--k-s-6);
  background: var(--k-bg-sub);
  display: grid;
  gap: var(--k-s-4);
  align-content: start;
  text-decoration: none;
}
.k-mega__promo svg { width: 100%; height: auto; opacity: .7; }
.k-mega__promo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--k-r-2); }
.k-mega__promo:hover { border-color: var(--k-line-strong); }
.k-mega__promo b { font-family: var(--k-font-display); font-size: var(--k-fs-h3); font-weight: var(--k-w-display); }

/* ---- the reading-progress line, drawn on the header's own edge -------- */

.k-progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.k-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--k-accent-edge);
  transform: scaleX(var(--k-read, 0));
  transform-origin: right center;   /* RTL: the line grows leftwards, the way the reader travels */
  transition: transform 60ms linear;
}

/* ---- the phone drawer (navigation) and the scrim --------------------- */

/* The dimming layer is body::after, not an element.  The store engine makes
   every child of <body> inert while its own drawer is open, and an inert scrim
   could not be clicked; body itself is never inert, so this one always can. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--k-z-scrim);
  background: var(--k-scrim);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--k-dur-move) var(--k-ease-state);
}
body[data-k-dim="true"]::after { opacity: 1; pointer-events: auto; }

/* Two drawers, each entering from the edge its own button sits on: the menu from
   the reading-start edge (the right in Hebrew, where the menu button is) and the
   cart from the other (where the cart button is).  A transform is physical, so
   the direction is named once per side rather than inferred. */
.k-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: var(--k-z-drawer);
  width: var(--k-drawer-w);
  max-width: 100%;
  background: var(--k-bg-page);
  box-shadow: var(--k-shadow-3);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);      /* RTL: the reading-start edge is the right */
  transition: transform var(--k-dur-move) var(--k-ease-arrive);
}
[dir="ltr"] .k-drawer { transform: translateX(-100%); }

.k-drawer--end {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateX(-100%);
}
[dir="ltr"] .k-drawer--end { transform: translateX(100%); }

.k-drawer[data-k-open="true"] { transform: translateX(0); }

.k-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s-5);
  padding: var(--k-s-5) var(--k-s-6);
  border-block-end: 1px solid var(--k-line);
  flex: none;
}
.k-drawer__t { font-size: var(--k-fs-h3); }
.k-drawer__body { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
.k-drawer__foot { flex: none; border-block-start: 1px solid var(--k-line); padding: var(--k-s-6); display: grid; gap: var(--k-s-4); }

.k-mnav { list-style: none; margin: 0; padding: 0; }
.k-mnav > li { border-block-end: 1px solid var(--k-line); }
.k-mnav__row { display: flex; align-items: stretch; }
.k-mnav__l {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding-inline: var(--k-s-6);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-ui);
  text-decoration: none;
  transition: background var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state);
}
.k-mnav__l:hover { background: var(--k-bg-sub); color: var(--k-accent); }
.k-mnav__l:active { background: var(--k-c-ink-100); }
.k-mnav__l[aria-current="page"] { font-weight: var(--k-w-strong); box-shadow: inset 3px 0 0 var(--k-action); }
[dir="ltr"] .k-mnav__l[aria-current="page"] { box-shadow: inset -3px 0 0 var(--k-action); }
.k-mnav__x {
  appearance: none;
  flex: none;
  width: 56px;
  min-height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  border-inline-start: 1px solid var(--k-line);
  background: transparent;
  color: var(--k-text-secondary);
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state), color var(--k-dur-state) var(--k-ease-state);
}
.k-mnav__x:hover { background: var(--k-bg-sub); color: var(--k-text); }
.k-mnav__x:active { background: var(--k-c-ink-100); }
.k-mnav__x svg { width: 14px; height: 14px; transition: transform var(--k-dur-state) var(--k-ease-state); }
.k-mnav__x[aria-expanded="true"] svg { transform: rotate(180deg); }
.k-mnav__sub { list-style: none; margin: 0; padding: 0 0 var(--k-s-5); background: var(--k-bg-sub); }
.k-mnav__sub a {
  display: flex;
  align-items: center;
  min-height: var(--k-tap);
  padding-inline: var(--k-s-11) var(--k-s-6);
  font-size: var(--k-fs-ui);
  color: var(--k-text-secondary);
  text-decoration: none;
}
.k-mnav__sub a:hover { color: var(--k-accent); text-decoration: underline; text-underline-offset: 3px; }

/* contact routes, always one tap from the phone drawer */
.k-contact-routes { display: grid; gap: var(--k-s-4); }
.k-contact-routes a {
  display: flex;
  align-items: center;
  gap: var(--k-s-5);
  min-height: var(--k-tap);
  padding-inline: var(--k-s-5);
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-ui);
  text-decoration: none;
  transition: border-color var(--k-dur-state) var(--k-ease-state), background var(--k-dur-state) var(--k-ease-state);
}
.k-contact-routes a:hover { background: var(--k-bg-sub); border-color: var(--k-text); }
.k-contact-routes a:active { background: var(--k-c-ink-100); }
.k-contact-routes svg { width: 20px; height: 20px; flex: none; color: var(--k-accent); }

/* ========================================================= 6. MINI-CART ==
   WooCommerce's cart in the shared drawer.  app.js adds the focus trap, Esc,
   focus return and inert; cart.js swaps .k-mini__inner with WooCommerce's
   cart fragments after every change. */

.k-mini { padding: 0; }
.k-mini__inner { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.k-mini[aria-busy="true"] .k-mini__inner { opacity: .6; transition: opacity var(--k-dur-state) var(--k-ease-state); }
.k-mini__body { display: grid; gap: var(--k-s-6); padding: var(--k-s-6); }
.k-mini__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-s-6); }

.k-mline {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--k-s-5);
  padding-block-end: var(--k-s-6);
  border-block-end: 1px solid var(--k-line);
  position: relative;
}
.k-mline__media {
  aspect-ratio: 4 / 5;
  background: var(--k-bg-sub);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-2);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.k-mline__media img { width: 100%; height: 100%; object-fit: cover; }
.k-mline__media svg { width: 70%; height: auto; opacity: .55; }
.k-mline__b { display: grid; gap: var(--k-s-3); align-content: start; min-width: 0; }
.k-mline__n { font-size: var(--k-fs-name); font-weight: var(--k-w-ui); line-height: 1.4; }
.k-mline__n a { text-decoration: none; }
.k-mline__n a:hover { text-decoration: underline; text-underline-offset: 3px; }
.k-mline__o { font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.k-mline__f { display: flex; align-items: center; justify-content: space-between; gap: var(--k-s-5); flex-wrap: wrap; }

.k-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  overflow: hidden;
  background: var(--k-bg-page);
}
.k-qty button {
  appearance: none;
  width: var(--k-tap);
  min-height: var(--k-tap);
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--k-text);
  font-size: var(--k-fs-ui);
  line-height: 1;
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state);
}
.k-qty button:hover { background: var(--k-bg-sub); }
.k-qty button:active { background: var(--k-c-ink-100); }
.k-qty button[disabled], .k-qty button[aria-disabled="true"] { color: var(--k-text-faint); cursor: not-allowed; }
.k-qty input {
  width: 44px;
  min-height: var(--k-tap);
  border: 0;
  border-inline: 1px solid var(--k-line);
  background: transparent;
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-ui);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.k-qty input::-webkit-outer-spin-button,
.k-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.k-mline__x {
  appearance: none;
  min-height: var(--k-tap);
  padding-inline: var(--k-s-4);
  border: 0;
  background: transparent;
  color: var(--k-text-secondary);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--k-dur-state) var(--k-ease-state);
}
.k-mline__x:hover { color: var(--k-sale); }
.k-mline__x:active { color: var(--k-text); }

/* free-shipping progress: the engine sets --k-progress from 0 to 1 */
.k-free { display: grid; gap: var(--k-s-4); }
.k-free__t { font-size: var(--k-fs-small); }
.k-free__bar {
  height: 6px;
  border-radius: var(--k-r-pill);
  background: var(--k-c-ink-100);
  overflow: hidden;
}
.k-free__bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  border-radius: var(--k-r-pill);
  background: var(--k-accent-edge);
  transform: scaleX(var(--k-progress, 0));
  transform-origin: right center;   /* RTL: fills from the right */
  transition: transform var(--k-dur-move) var(--k-ease-arrive);
}
[dir="ltr"] .k-free__bar::after { transform-origin: left center; }

.k-sums { display: grid; gap: var(--k-s-4); padding-block-start: var(--k-s-5); border-block-start: 1px solid var(--k-line); }
.k-sums__r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-s-5); font-size: var(--k-fs-ui); }
.k-sums__r--total { font-size: var(--k-fs-h3); font-family: var(--k-font-display); font-weight: var(--k-w-display); }
.k-sums__n { font-size: var(--k-fs-small); color: var(--k-text-secondary); }

.k-mini__empty { display: grid; gap: var(--k-s-6); padding: var(--k-s-12) var(--k-s-6); text-align: center; justify-items: center; }
.k-mini__empty svg { width: 88px; height: auto; opacity: .45; }

/* ============================================================= 7. FOOTER == */

.k-footer { background: var(--k-bg-dark); color: var(--k-text-on-dark); }
.k-footer a { color: inherit; }

.k-footer__news {
  border-block-end: 1px solid var(--k-line-on-dark);
  padding-block: var(--k-s-11);
}
.k-news {
  display: grid;
  gap: var(--k-s-8) var(--k-s-12);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .k-news { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.k-news__t { font-size: var(--k-fs-h2); }
.k-news__p { color: rgba(255,255,255,.76); font-size: var(--k-fs-body); margin-block-start: var(--k-s-4); max-width: 46ch; }
.k-news__f { display: grid; gap: var(--k-s-5); }
.k-news__row { display: flex; gap: var(--k-s-4); flex-wrap: wrap; }
.k-news__row .k-field { flex: 1 1 260px; }
.k-news .k-field__l { color: rgba(255,255,255,.88); }
.k-news .k-field__i { background: transparent; border-color: var(--k-line-on-dark); color: var(--k-text-on-dark); }
.k-news .k-field__i::placeholder { color: rgba(255,255,255,.5); }
.k-news .k-field__i:hover { border-color: rgba(255,255,255,.5); }
.k-news .k-field__i:focus { border-color: var(--k-c-white); box-shadow: inset 0 0 0 1px var(--k-c-white); }
.k-news__c { font-size: var(--k-fs-small); color: rgba(255,255,255,.7); line-height: 1.6; max-width: 62ch; }
.k-news__s { font-size: var(--k-fs-small); color: var(--k-accent-on-dark); font-weight: var(--k-w-strong); }

.k-footer__cols {
  padding-block: var(--k-s-12);
  display: grid;
  gap: var(--k-s-10) var(--k-s-9);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px)  { .k-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .k-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.2fr; } }

.k-fcol__h {
  font-family: var(--k-font-text);
  font-size: var(--k-fs-label);
  font-weight: var(--k-w-strong);
  color: rgba(255,255,255,.62);
  margin-block-end: var(--k-s-5);
  padding-block-end: var(--k-s-4);
  border-block-end: 1px solid var(--k-line-on-dark);
}
.k-fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k-s-1); }
.k-fcol a, .k-fcol button.k-linkish {
  display: inline-flex;
  align-items: center;
  min-height: var(--k-tap);
  font-size: var(--k-fs-ui);
  color: rgba(255,255,255,.86);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.k-fcol a:hover, .k-fcol button.k-linkish:hover { color: var(--k-c-white); border-block-end-color: currentColor; }
.k-fcol a:active { color: var(--k-accent-on-dark); }
button.k-linkish { appearance: none; border: 0; border-block-end: 1px solid transparent; background: transparent; padding: 0; font-family: var(--k-font-text); cursor: pointer; }

/* the cancellation block: the law asks for it, so it is a block, not a link */
.k-cancel {
  border: 1px solid var(--k-line-on-dark);
  border-radius: var(--k-r-3);
  padding: var(--k-s-7);
  display: grid;
  gap: var(--k-s-4);
  align-content: start;
}
.k-cancel__h { font-size: var(--k-fs-h3); }
.k-cancel__p { font-size: var(--k-fs-small); color: rgba(255,255,255,.78); line-height: 1.65; }

.k-footer__base {
  border-block-start: 1px solid var(--k-line-on-dark);
  padding-block: var(--k-s-8);
  display: grid;
  gap: var(--k-s-7);
}
.k-biz { font-size: var(--k-fs-small); color: rgba(255,255,255,.72); line-height: 1.7; }
.k-biz b { color: var(--k-text-on-dark); font-weight: var(--k-w-strong); }

.k-pay { display: flex; align-items: center; gap: var(--k-s-4); flex-wrap: wrap; }
.k-pay svg { width: 46px; height: 30px; opacity: .92; }
.k-social { display: flex; align-items: center; gap: var(--k-s-2); }
.k-social a {
  width: var(--k-tap);
  height: var(--k-tap);
  display: grid;
  place-items: center;
  border: 1px solid var(--k-line-on-dark);
  border-radius: var(--k-r-2);
  transition: background var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
.k-social a:hover { background: rgba(255,255,255,.12); border-color: var(--k-c-white); }
.k-social a:active { background: rgba(255,255,255,.2); }
.k-social svg { width: 20px; height: 20px; }

.k-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-4) var(--k-s-7);
  font-size: var(--k-fs-small);
  color: rgba(255,255,255,.72);
}
.k-footer__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s-6);
}

/* a demo store says so, once, quietly */
.k-demo-note {
  font-size: var(--k-fs-small);
  color: rgba(255,255,255,.6);
  border-inline-start: 2px solid var(--k-accent-on-dark);
  padding-inline-start: var(--k-s-5);
  line-height: 1.6;
}

/* WooCommerce's own messages: an add to cart with no script lands on the page
   it came from (.k-notices, printed by header.php), and every store page prints
   its own (store.css places them). One look everywhere. */
.woocommerce-notices-wrapper:empty { display: none; }
.k-notices { padding-block: var(--k-s-6) 0; }
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-s-4) var(--k-s-5);
  margin: 0 0 var(--k-s-6);
  padding: var(--k-s-5) var(--k-s-6);
  border: 1px solid var(--k-line-control);
  border-inline-start: 3px solid var(--k-accent-edge);
  border-radius: var(--k-r-2);
  background: var(--k-bg-sub);
  color: var(--k-text);
  list-style: none;
  font-size: var(--k-fs-ui);
  line-height: 1.6;
}
.woocommerce-error { border-inline-start-color: var(--k-sale); display: grid; justify-content: stretch; }
/* WooCommerce moves focus to a new notice so a screen reader reads it; the
   notice is not a control, so it draws no focus ring */
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper, .woocommerce-NoticeGroup):focus { outline: none; }
.woocommerce-error li { margin: 0; }
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: var(--k-accent); text-underline-offset: 3px; }
/* the link a notice carries ("View bag", "Log in") is the notice's one action */
:is(.woocommerce-message, .woocommerce-info) .button {
  order: 2;
  display: inline-flex;
  align-items: center;
  min-height: var(--k-tap);
  padding-inline: var(--k-s-6);
  border: 1px solid var(--k-line-control);
  border-radius: var(--k-r-control);
  background: var(--k-bg-page);
  color: var(--k-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-strong);
  text-decoration: none;
  transition: background var(--k-dur-state) var(--k-ease-state), border-color var(--k-dur-state) var(--k-ease-state);
}
:is(.woocommerce-message, .woocommerce-info) .button:hover { border-color: var(--k-text); background: var(--k-bg-sub); }

/* a small icon sitting on a line of text */
.k-inline-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }