@charset "UTF-8";
/* ==========================================================================
   KAMJOO — Reset, base elements, layout primitives, a11y utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky header is the main bar PLUS the nav row, so anchor targets must
     clear both — otherwise skip-link and in-page jumps land underneath it.
     The nav row is hidden below 992px, where only the main bar is sticky. */
  scroll-padding-top: calc(var(--kj-header-h) + var(--kj-nav-h) + var(--kj-s3));
}

body {
  margin: 0;
  font-family: var(--kj-font);
  font-size: var(--kj-fs-base);
  line-height: var(--kj-lh-base);
  font-weight: 400;
  color: var(--kj-body);
  background: var(--kj-surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--kj-lh-tight);
  color: var(--kj-ink);
  letter-spacing: -.01em;
}
h1 { font-size: var(--kj-fs-3xl); }
h2 { font-size: var(--kj-fs-2xl); }
h3 { font-size: var(--kj-fs-xl); }
h4 { font-size: var(--kj-fs-lg); }
h5 { font-size: var(--kj-fs-md); }
h6 { font-size: var(--kj-fs-sm); }

p  { margin: 0 0 var(--kj-s4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--kj-primary-ink, var(--kj-primary));
  text-decoration: none;
  transition: color var(--kj-t-fast) var(--kj-ease);
}
a:hover { color: var(--kj-primary-hover); }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { border-style: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

table { border-collapse: collapse; width: 100%; }

/* Persian numerals + correct bidi for prices/digits */
.kj-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------- Focus: visible, branded, never removed ----------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--kj-primary);
  outline-offset: 2px;
  border-radius: var(--kj-r-xs);
}
/* Inputs get a ring instead of an outline jump */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--kj-primary);
  box-shadow: 0 0 0 4px var(--kj-primary-ring);
}

/* ---------- Selection ---------------------------------------------------- */
::selection { background: var(--kj-violet-200); color: var(--kj-violet-900); }

/* ---------- Scrollbar ---------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--kj-line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--kj-line); border-radius: var(--kj-r-pill);
  border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--kj-faint); background-clip: content-box; }

/* ---------- The hidden attribute ------------------------------------------
   [hidden] is only a UA rule of display:none, so any class that sets its own
   display (grid, flex, block) silently overrides it and the element stays on
   screen. The theme toggles several regions with the attribute — the compare
   empty state, the compare table, panels — so make it authoritative once,
   here, rather than patching each component. */
[hidden] { display: none !important; }

/* ---------- A11y utilities ----------------------------------------------- */
/* WordPress core, WooCommerce and most plugins emit .screen-reader-text for
   visually-hidden copy. Without a global rule the text renders inline — a Woo
   login label reads "نام کاربری * الزامی" instead of "نام کاربری *". The
   theme's own utility is .kj-sr-only, so both share one definition. */
.screen-reader-text,
.kj-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0;
  /* margin:-1px is the classic recipe, but in RTL it parks the 1px box one
     pixel past the right edge and the document gains a horizontal scrollbar.
     clip-path does the hiding, so the box can stay inside the viewport. */
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus,
.kj-sr-only-focusable:focus,
.kj-sr-only-focusable:focus-visible {
  position: fixed !important;
  top: var(--kj-s4); inset-inline-start: var(--kj-s4);
  width: auto; height: auto;
  padding: var(--kj-s3) var(--kj-s5);
  margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
  background: var(--kj-primary-solid, var(--kj-primary)); color: var(--kj-on-primary, #fff);
  border-radius: var(--kj-r-sm);
  box-shadow: var(--kj-sh-lg);
  z-index: var(--kj-z-toast);
  font-weight: 600;
}

/* ---------- Layout ------------------------------------------------------- */
.kj-container {
  width: 100%;
  max-width: var(--kj-container);
  margin-inline: auto;
  padding-inline: var(--kj-gutter);
}

.kj-section { padding-block: var(--kj-section-y); }

.kj-grid { display: grid; gap: var(--kj-gutter); }

/*
 * Product grids.
 *
 * The small-screen track is a hard 2-column split rather than an auto-fill
 * minmax. auto-fill compares the min track against the *available* width, so
 * on a 320-375px phone (iPhone SE, older Androids) 2x172px plus the gutter no
 * longer fits and the grid silently collapses to a single column — cards
 * become enormous and the page triples in height. Two columns is the right
 * answer at every phone width, so state it directly and let auto-fill take
 * over from 640px up where it has room to work.
 */
.kj-grid--products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .kj-grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
}
@media (min-width: 1024px) {
  .kj-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/*
 * Above ~1280px auto-fill found room for a fifth 224px track, but every
 * catalogue section ships 4 or 8 cards, so a 5-column grid always left a
 * ragged 5+3 row with one empty cell. The card count is the design unit
 * here, so the column count is stated rather than derived: 4 across every
 * desktop width, which divides both 4 and 8 exactly.
 */

/*
 * The shop archive gives up a 264px filter rail, so four tracks there are
 * much narrower than four on the homepage — 155px at 1024px, too cramped for
 * a title, rating and price. Drop to three until the viewport can afford
 * four comfortably.
 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .kj-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  html { scroll-padding-top: calc(var(--kj-header-h) + var(--kj-s3)); }
}

/* ---------- Section heading ---------------------------------------------- */
.kj-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kj-s4);
  margin-bottom: var(--kj-s5);
  /* When a heading carries a filter rail beside the title, the rail is wider
     than a 320px screen on its own. Without wrapping it refused to shrink
     (flex-basis auto + min-width auto), squeezed the title to zero and pushed
     the document 28px wide. Let the row wrap instead. */
  flex-wrap: wrap;
  row-gap: var(--kj-s3);
}
/* flex:1 so the title block claims the row and the rail wraps beneath it,
   rather than the title collapsing to nothing. */
.kj-sechead__titles { display: flex; align-items: center; gap: var(--kj-s3); min-width: 0; flex: 1 1 auto; }
/* A scrollable rail next to the title must be allowed to shrink; min-width
   defaults to auto on a flex child, which is what broke the layout. */
.kj-sechead > .kj-tabs { min-width: 0; max-width: 100%; }
.kj-sechead__bar {
  flex: none;
  width: 5px; height: 26px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-grad-brand);
}
.kj-sechead__title {
  font-size: var(--kj-fs-xl);
  font-weight: 800;
  color: var(--kj-ink);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kj-sechead__sub {
  font-size: var(--kj-fs-sm);
  color: var(--kj-muted);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 575.98px) { .kj-sechead__sub { display: none; } }

.kj-sechead__more {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--kj-s1);
  min-height: 36px;
  padding-inline: var(--kj-s3);
  font-size: var(--kj-fs-sm); font-weight: 600;
  color: var(--kj-primary-ink, var(--kj-primary));
  background: var(--kj-primary-soft);
  border-radius: var(--kj-r-pill);
  transition: background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease);
}
.kj-sechead__more:hover { background: var(--kj-violet-100); color: var(--kj-primary-hover); }
.kj-sechead__more svg { width: 15px; height: 15px; transition: transform var(--kj-t-fast) var(--kj-ease); }
.kj-sechead__more:hover svg { transform: translateX(-3px); }

/* ---------- Buttons ------------------------------------------------------ */
.kj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kj-s2);
  min-height: var(--kj-tap);
  padding: 0 var(--kj-s5);
  font-size: var(--kj-fs-md);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--kj-r-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease),
              box-shadow var(--kj-t-base) var(--kj-ease),
              transform var(--kj-t-fast) var(--kj-ease),
              border-color var(--kj-t-fast) var(--kj-ease);
}
.kj-btn:active { transform: translateY(1px) scale(.995); }
.kj-btn svg { width: 18px; height: 18px; flex: none; }

.kj-btn--primary {
  background: var(--kj-primary-solid, var(--kj-primary)); color: var(--kj-on-primary, #fff);
  box-shadow: 0 4px 14px rgba(122,43,226,.22);
}
.kj-btn--primary:hover { background: var(--kj-primary-hover); color: #fff; box-shadow: var(--kj-sh-brand); }

.kj-btn--accent {
  background: var(--kj-accent-solid); color: #fff;
  box-shadow: 0 4px 14px rgba(249,112,8,.24);
}
.kj-btn--accent:hover { background: var(--kj-accent-hover); color: #fff; box-shadow: var(--kj-sh-accent); }

.kj-btn--ghost {
  background: var(--kj-surface); color: var(--kj-body);
  box-shadow: var(--kj-sh-inset);
}
.kj-btn--ghost:hover { background: var(--kj-surface-2); color: var(--kj-ink); border-color: var(--kj-faint); }

.kj-btn--soft { background: var(--kj-primary-soft); color: var(--kj-primary-ink, var(--kj-primary)); }
.kj-btn--soft:hover { background: var(--kj-violet-100); color: var(--kj-primary-hover); }

.kj-btn--block { width: 100%; }
.kj-btn--sm { min-height: 36px; padding-inline: var(--kj-s4); font-size: var(--kj-fs-sm); border-radius: var(--kj-r-sm); }
.kj-btn--lg { min-height: 52px; padding-inline: var(--kj-s7); font-size: var(--kj-fs-lg); border-radius: var(--kj-r-lg); }

/* Icon-only button — always meets 44px tap target */
/* ---------- Section bands ------------------------------------------------- */
/*
 * Ten consecutive transparent sections on a single page colour read as one
 * long scroll with no rhythm — the homepage's main remaining weakness against
 * iShop, which varies its backgrounds. A band is a full-bleed tinted strip
 * behind an otherwise unchanged section, so alternating bands give the eye a
 * beat without touching any layout.
 *
 * The modifier goes on the same <section> that carries .kj-container, so the
 * tint has to escape the centred column. A viewport-wide box-shadow does that
 * without a wrapper element, extra DOM, or the horizontal overflow that
 * 100vw margins cause when a scrollbar is present.
 */
.kj-band {
  position: relative;
  background: var(--kj-band-bg, var(--kj-surface));
  box-shadow: -100vmax 0 0 var(--kj-band-bg, var(--kj-surface)),
               100vmax 0 0 var(--kj-band-bg, var(--kj-surface));
}
.kj-band--tint  { --kj-band-bg: var(--kj-surface); }
.kj-band--soft  { --kj-band-bg: var(--kj-primary-soft); }

/*
 * Bands meet edge to edge, so their own vertical padding is what separates
 * the content inside them.
 */
.kj-band.kj-section {
  padding-block: calc(var(--kj-section-y) * 1.15);
  margin-block: 0;
}

/* ---------- Icons --------------------------------------------------------- */
/*
 * Stroke presentation for every sprite icon. These five declarations used to
 * be repeated as attributes on all 313 <svg> elements of the homepage (~31KB
 * of identical bytes); stating them once here is the whole point of the
 * sprite. .kj-i--fill inverts the pair for solid glyphs such as the rating
 * star. stroke/fill themselves are set on the <symbol> so a <use> inherits
 * them while still resolving currentColor at the call site.
 */
.kj-i {
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.kj-iconbtn {
  display: inline-grid; place-items: center;
  width: var(--kj-tap); height: var(--kj-tap);
  border-radius: var(--kj-r-md);
  color: var(--kj-muted);
  background: transparent;
  cursor: pointer;
  transition: background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease),
              transform var(--kj-t-fast) var(--kj-ease);
}
.kj-iconbtn:hover { background: var(--kj-surface-3); color: var(--kj-ink); }
.kj-iconbtn:active { transform: scale(.93); }
.kj-iconbtn svg { width: 21px; height: 21px; }

/* ---------- Badges ------------------------------------------------------- */
.kj-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding-inline: var(--kj-s2);
  font-size: var(--kj-fs-2xs); font-weight: 700; line-height: 1;
  border-radius: var(--kj-r-xs);
  white-space: nowrap;
}
.kj-badge--sale    { background: var(--kj-sale-solid); color: #fff; }
.kj-badge--new     { background: var(--kj-grad-cool); color: #fff; }
.kj-badge--hot     { background: var(--kj-grad-warm); color: #fff; }
.kj-badge--success { background: var(--kj-success-soft); color: var(--kj-mint-600); }
.kj-badge--muted   { background: var(--kj-surface-3); color: var(--kj-muted); }

/* ---------- Skeleton ----------------------------------------------------- */
.kj-skeleton {
  position: relative; overflow: hidden;
  background: var(--kj-surface-3);
  border-radius: var(--kj-r-sm);
}
.kj-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: var(--kj-grad-sheen);
  transform: translateX(-100%);
  animation: kj-sheen 1.4s infinite;
}
@keyframes kj-sheen { 100% { transform: translateX(100%); } }

/* ---------- Scroll reveal ------------------------------------------------ */
/* Scroll reveal is a PROGRESSIVE ENHANCEMENT.
   The hiding only applies when JS is running (html.kj-js is set by an inline
   snippet in <head>). Without JS — or if the script fails — every section stays
   fully visible. Content must never depend on JavaScript to be readable. */
.kj-reveal { opacity: 1; transform: none; }
.kj-js .kj-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--kj-ease-out), transform .55s var(--kj-ease-out);
}
/* Release the compositing layer once the section has appeared. Leaving
   will-change on permanently pins every section to the GPU and can make the
   browser skip repaints on long pages. */
.kj-js .kj-reveal.is-in { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .kj-reveal, .kj-js .kj-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Horizontal scroller (mobile carousels) ----------------------- */
.kj-hscroll {
  display: flex;
  gap: var(--kj-gutter);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block-end: var(--kj-s2);
  scrollbar-width: none;
}
.kj-hscroll::-webkit-scrollbar { display: none; }
.kj-hscroll > * { scroll-snap-align: start; flex: none; }

/* ---------- Print -------------------------------------------------------- */
@media print {
  .kj-header, .kj-mobilebar, .kj-footer, .kj-noprint { display: none !important; }
  body { background: #fff; }
}

/* ---------- Minimum touch target (WCAG 2.5.8 AA) --------------------------
   A link that stands alone -- a breadcrumb step, a cart row's product name,
   a "forgot password" link, a rating summary -- is a target a thumb has to
   find, and 2.5.8 only exempts links set inside a run of prose. Rather than
   patch each component as a screenshot catches it, give the standalone cases
   a 24px minimum here. inline-flex keeps the text baseline where the design
   put it; the extra height is pure hit area, so nothing moves visually. */
.kj-crumbs a,
.kj-crumbs li,
.kj-cartrow__title,
.kj-product__rating,
.kj-auth__lost a,
.kj-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}
/* A short Persian word such as "خانه" is only ~20px wide, so the height floor
   alone still leaves an undersized target. Centre the text inside a 24px
   minimum width; wider labels are unaffected. */
.kj-crumbs a,
.kj-crumbs li {
  justify-content: center;
  min-inline-size: 24px;
}