/* ==========================================================================
   Alevectis Commerce theme - every page but the home page.
   The page head (breadcrumb, h1), the reading column of an information or
   legal page with its list of sections, the draft and demo notes the content
   carries, Alevectis Commerce Core's forms (contact, cancellation), the search and 404
   pages.  The store's own pages add store.css.
   Load order: tokens -> base -> components -> page.css [-> store.css]

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

/* ============================================================ 1. BREADCRUMB
   Navigation the reader uses, not a label above a heading: one row, the arrow
   pointing the way the reader travels (leftwards in Hebrew), the current page
   last and unlinked.  Printed by WooCommerce's breadcrumb (inc/store.php). */

.k-crumbs__l {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--k-s-2) var(--k-s-4);
  font-size: var(--k-fs-small);
  color: var(--k-text-secondary);
}
.k-crumbs__i { display: flex; align-items: center; gap: var(--k-s-4); }
.k-crumbs__i:last-child { color: var(--k-text); font-weight: var(--k-w-ui); }
.k-crumbs__s { width: 12px; height: 12px; opacity: .55; flex: none; }
.k-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  text-underline-offset: 3px;
  transition: color var(--k-dur-state) var(--k-ease-state);
}
.k-crumbs a:hover { color: var(--k-accent); }

/* an arrow that points back (pagination's "previous") */
.k-arrow--back { transform: scaleX(-1); }

/* =============================================================== 2. HEAD ==
   The sub ground, the breadcrumb, the h1.  Shorter than a home band: the page
   starts working in the first screen. */

.k-phead { padding-block: clamp(28px, 4vw, 56px); }
.k-phead__t { margin-block-start: var(--k-s-5); max-width: 24ch; }
.k-phead > .k-container > .k-phead__t:first-child { margin-block-start: 0; }
.k-phead__meta { margin-block-start: var(--k-s-5); }
.k-phead__search { margin-block-start: var(--k-s-8); max-width: 560px; }

/* the store's own pages (cart, checkout, account): the h1 and straight to work */
.k-phead--store { padding-block: clamp(24px, 3vw, 40px) var(--k-s-6); }
.k-phead--store .k-phead__t { margin-block-start: 0; }

/* ====================================================== 3. READING COLUMN =
   One column at a reading measure.  A page with four sections or more gets
   their list beside it from 1024 up, on the reading-start side, and stuck
   under the header while the reader moves through the text.  Below 1024 the
   list is left out: the headings are the way through. */

.k-page__band { padding-block: clamp(32px, 4.5vw, 72px) clamp(48px, 6vw, 96px); }
.k-page__in { display: grid; gap: var(--k-s-11); grid-template-columns: minmax(0, 1fr); }
.k-toc { display: none; }
@media (min-width: 1024px) {
  .k-page__in--toc { grid-template-columns: 240px minmax(0, 1fr); gap: var(--k-s-12); align-items: start; }
  .k-toc {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--k-header-h) + var(--k-s-8));
    max-height: calc(100vh - var(--k-header-h) - var(--k-s-11));
    overflow-y: auto;
    padding-inline-end: var(--k-s-8);
    border-inline-end: 1px solid var(--k-line);
  }
}
.k-toc__t { 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-4); }
.k-toc__l { display: grid; }
.k-toc__l a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-block: var(--k-s-2);
  font-size: var(--k-fs-small);
  line-height: 1.45;
  color: var(--k-text-secondary);
  text-decoration: none;
  transition: color var(--k-dur-state) var(--k-ease-state);
}
.k-toc__l a:hover { color: var(--k-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- the text itself ---------------------------------------------------- */

.k-prose { max-width: 70ch; min-width: 0; font-size: var(--k-fs-body); line-height: var(--k-lh-body); }
.k-prose > * + * { margin-block-start: var(--k-s-6); }
.k-prose h2 {
  font-size: var(--k-fs-h2);
  margin-block-start: var(--k-s-11);
  scroll-margin-block-start: calc(var(--k-header-h) + var(--k-s-8));
}
.k-prose h3 { font-size: var(--k-fs-h3); margin-block-start: var(--k-s-9); }
.k-prose h4 { font-size: var(--k-fs-ui); margin-block-start: var(--k-s-8); }
.k-prose :is(h2, h3, h4) + * { margin-block-start: var(--k-s-4); }
.k-prose > :first-child { margin-block-start: 0; }
.k-prose :is(ul, ol) { padding-inline-start: 1.4em; }
.k-prose ul { list-style: disc; }
.k-prose ol { list-style: decimal; }
.k-prose li + li { margin-block-start: var(--k-s-3); }
.k-prose li::marker { color: var(--k-text-secondary); }
.k-prose a:not(.k-btn):not(.k-form__submit) { color: var(--k-accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--k-dur-state) var(--k-ease-state); }
.k-prose a:not(.k-btn):not(.k-form__submit):hover { color: var(--k-accent-hover); text-decoration-thickness: 2px; }
.k-prose strong, .k-prose b { font-weight: var(--k-w-strong); }
.k-prose blockquote { border-inline-start: 3px solid var(--k-line-strong); padding-inline-start: var(--k-s-7); color: var(--k-text-secondary); }
.k-prose hr { border: 0; border-block-start: 1px solid var(--k-line); margin-block: var(--k-s-10); }
.k-prose img { border-radius: var(--k-r-2); }
.k-prose figure figcaption { font-size: var(--k-fs-small); color: var(--k-text-secondary); margin-block-start: var(--k-s-3); }

/* A table reads as ruled rows; a wide one scrolls inside its own box, never the page. */
.k-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--k-fs-ui);
  line-height: 1.55;
}
.k-prose :is(th, td) {
  padding: var(--k-s-5) var(--k-s-6);
  border-block-end: 1px solid var(--k-line);
  text-align: start;
  vertical-align: top;
}
.k-prose :is(th, td):first-child { padding-inline-start: 0; }
.k-prose thead th { border-block-end: 1px solid var(--k-line-strong); font-weight: var(--k-w-strong); font-size: var(--k-fs-small); color: var(--k-text-secondary); }
.k-prose tbody th { font-weight: var(--k-w-strong); }

/* ================================================ 4. DRAFT AND DEMO NOTES ==
   Two notices the content carries as its first paragraph.
   The draft note says a legal text awaits the business's lawyer: a solid
   rule, because it is a condition of the page.  The demo note says the store's
   facts are invented: a dashed edge, the same language as the note an editor
   sees on an empty home section, because it marks a placeholder. */

.k-prose :is(.k-draft-note, .k-demo-note) {
  display: block;
  padding: var(--k-s-6) var(--k-s-7);
  border-radius: var(--k-r-2);
  font-size: var(--k-fs-ui);
  line-height: 1.6;
}
.k-prose .k-draft-note {
  background: var(--k-bg-sub);
  border: 1px solid var(--k-line-control);
  border-inline-start: 4px solid var(--k-text);
  color: var(--k-text);
}
.k-prose .k-draft-note :is(strong, b) { display: block; font-family: var(--k-font-display); font-weight: var(--k-w-heading); margin-block-end: var(--k-s-2); }
/* (the footer's own .k-demo-note, on the dark ground, is components.css) */
.k-prose .k-demo-note {
  background: var(--k-bg-page);
  border: 1px dashed var(--k-line-control);
  color: var(--k-text-secondary);
}
.k-prose :is(.k-draft-note, .k-demo-note) + * { margin-block-start: var(--k-s-8); }

/* ===================================================== 5. ALEVECTIS COMMERCE CORE FORMS =
   The contact form and the cancellation form (Alevectis Commerce Core prints them into the
   page content).  Fields take the theme's field component; the send button is
   the primary button. */

.k-form-wrap { margin-block-start: var(--k-s-8); }
.k-form { display: grid; gap: var(--k-s-7); max-width: 560px; }
.k-form__intro, .k-form__note, .k-form__routes { font-size: var(--k-fs-ui); color: var(--k-text-secondary); }
.k-form__field { display: grid; gap: var(--k-s-3); }
.k-form__fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--k-s-3); }
.k-form__label, .k-form__legend { font-size: var(--k-fs-label); font-weight: var(--k-w-strong); padding: 0; }
.k-form__field--required > .k-form__label::after { content: " *"; color: var(--k-sale); }
.k-form :is(.k-form__input, .k-form__select, .k-form__textarea) {
  width: 100%;
  min-height: 48px;
  padding: var(--k-s-4) 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);
  line-height: 1.5;
  transition: border-color var(--k-dur-state) var(--k-ease-state), box-shadow var(--k-dur-state) var(--k-ease-state);
}
.k-form .k-form__textarea { min-height: 144px; resize: vertical; }
.k-form :is(.k-form__input, .k-form__select, .k-form__textarea):hover { border-color: var(--k-c-ink-600); }
.k-form :is(.k-form__input, .k-form__select, .k-form__textarea):focus { border-color: var(--k-accent-edge); box-shadow: inset 0 0 0 1px var(--k-accent-edge); outline: none; }
.k-form :is(.k-form__input, .k-form__select, .k-form__textarea):focus-visible { outline: 3px solid var(--k-focus); outline-offset: 2px; }
.k-form [aria-invalid="true"] { border-color: var(--k-sale); }
.k-form__hint, .k-form__privacy { font-size: var(--k-fs-small); color: var(--k-text-secondary); line-height: 1.6; }
.k-form__error { font-size: var(--k-fs-small); color: var(--k-sale); font-weight: var(--k-w-strong); }
.k-form :is(.k-form__hint-link, .k-form__privacy-link, .k-form__note-link) { display: inline-block; padding-block: 3px; color: var(--k-accent); text-underline-offset: 3px; }
.k-form__option {
  display: flex;
  align-items: center;
  gap: var(--k-s-5);
  min-height: var(--k-tap);
  font-size: var(--k-fs-ui);
}
.k-form :is(.k-form__radio, .k-form__checkbox) { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--k-accent); cursor: pointer; }
.k-form__actions { display: flex; flex-wrap: wrap; gap: var(--k-s-5); }
.k-form__submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--k-s-9);
  border: 1px solid var(--k-action);
  border-radius: var(--k-r-control);
  background: var(--k-action);
  color: var(--k-text-on-action);
  font-family: var(--k-font-text);
  font-size: var(--k-fs-ui);
  font-weight: var(--k-w-strong);
  cursor: pointer;
  transition: background var(--k-dur-state) var(--k-ease-state), transform var(--k-dur-feedback) var(--k-ease-state);
}
.k-form__submit:hover { background: var(--k-action-hover); }
.k-form__submit:active { background: var(--k-action-active); transform: translateY(1px); }
.k-form__submit:disabled { background: var(--k-bg-sub); border-color: var(--k-line); color: var(--k-text-secondary); cursor: not-allowed; }
.k-form__summary, .k-form__status {
  padding: var(--k-s-6) var(--k-s-7);
  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);
}
.k-form__summary { border-inline-start-color: var(--k-sale); }
.k-form__summary-title, .k-form__status-title { font-size: var(--k-fs-h3); }
.k-form__summary-list { margin-block-start: var(--k-s-4); padding-inline-start: 1.2em; list-style: disc; }
.k-form__summary-link { color: var(--k-sale); }
.k-form__hp { display: none; }
.k-routes { display: grid; gap: var(--k-s-3); }
.k-routes__link { color: var(--k-accent); }

/* ====================================================== 6. INDEX OF LINKS =
   A ruled list whose rows respond: the 404 page's categories, the search
   page's pages. */

.k-index { border-block-start: 1px solid var(--k-line-strong); }
.k-index__a {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) 16px;
  align-items: baseline;
  gap: var(--k-s-3) var(--k-s-8);
  min-height: 64px;
  padding-block: var(--k-s-6);
  border-block-end: 1px solid var(--k-line-strong);
  text-decoration: none;
  transition: background var(--k-dur-state) var(--k-ease-state), padding var(--k-dur-state) var(--k-ease-state);
}
.k-index__n { font-family: var(--k-font-display); font-size: var(--k-fs-h3); font-weight: var(--k-w-heading); }
.k-index__a .k-arrow { align-self: center; color: var(--k-accent); transition: transform var(--k-dur-state) var(--k-ease-arrive); }
.k-index__a:hover { background: var(--k-bg-sub); }
.k-index__a:hover .k-index__n { color: var(--k-accent); }
.k-index__a:hover .k-arrow { transform: translateX(-4px); }
[dir="ltr"] .k-index__a:hover .k-arrow { transform: translateX(4px); }
@media (max-width: 599px) {
  .k-index__a { grid-template-columns: minmax(0, 1fr) 16px; }
  .k-index__c { grid-column: 1; }
  .k-index__a .k-arrow { grid-column: 2; grid-row: 1 / span 2; }
}

/* ============================================================= 7. SEARCH ==*/

.k-searchform { max-width: 560px; }
.k-searchform .k-search__i { min-height: 52px; font-size: var(--k-fs-body); }
.k-searchform .k-search__b { min-width: 52px; min-height: 52px; }
.k-search__h { margin-block: var(--k-s-10) var(--k-s-8); }
.k-search__h:first-child { margin-block-start: 0; }

.k-pagination { margin-block-start: var(--k-s-11); }
.k-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--k-s-3); justify-content: center; }
.k-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: var(--k-tap);
  min-height: var(--k-tap);
  border: 1px solid var(--k-line);
  border-radius: var(--k-r-control);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.k-pagination .page-numbers.current { background: var(--k-action); color: var(--k-text-on-action); border-color: var(--k-action); }

/* ================================================================ 8. 404 ==
   The page's number is its display moment, on the side away from the words. */

.k-404__in { display: grid; gap: var(--k-s-9); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .k-404__in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--k-s-12); } }
.k-404 .k-lead { margin-block-start: var(--k-s-6); }
.k-404__search { margin-block-start: var(--k-s-8); max-width: 560px; }
.k-404__home { margin-block-start: var(--k-s-6); }
.k-404__code {
  font-size: clamp(5rem, 3rem + 9vw, 11rem);
  color: var(--k-accent);
  justify-self: start;
}
@media (min-width: 900px) { .k-404__code { justify-self: end; } }
.k-404__h { margin-block-end: var(--k-s-8); }