@charset "UTF-8";
/* ==========================================================================
   KAMJOO — Header, mega-menu, search, mini-cart, mobile drawer, bottom bar
   ========================================================================== */

/* ---------- Announcement bar --------------------------------------------- */
.kj-announce {
  position: relative;
  background: var(--kj-grad-brand);
  color: #fff;
  font-size: var(--kj-fs-xs);
  font-weight: 500;
}
.kj-announce__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--kj-s2);
  min-height: 38px;
  padding-block: var(--kj-s1);
  text-align: center;
}
.kj-announce__inner svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.kj-announce strong { font-weight: 800; }
.kj-announce__close {
  position: absolute; inset-inline-end: var(--kj-s2); top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: #fff; opacity: .75;
  border-radius: var(--kj-r-xs);
  transition: opacity var(--kj-t-fast) var(--kj-ease), background var(--kj-t-fast) var(--kj-ease);
}
.kj-announce__close:hover { opacity: 1; background: rgba(255,255,255,.16); }
.kj-announce__close svg { width: 14px; height: 14px; }
@media (max-width: 767.98px) { .kj-announce__inner { font-size: var(--kj-fs-2xs); padding-inline: var(--kj-s8); } }

/* ---------- Header shell -------------------------------------------------- */
.kj-header {
  position: sticky; top: 0;
  z-index: var(--kj-z-header);
  background: var(--kj-surface);
  border-bottom: 1px solid var(--kj-line);
  transition: box-shadow var(--kj-t-base) var(--kj-ease);
}
.kj-header.is-stuck { box-shadow: var(--kj-sh-md); }

.kj-header__main {
  display: flex; align-items: center; gap: var(--kj-s4);
  min-height: var(--kj-header-h);
}

/* ---------- Logo ---------------------------------------------------------- */
.kj-logo { flex: none; display: inline-flex; align-items: center; gap: var(--kj-s2); }
.kj-logo svg, .kj-logo img { height: 38px; width: auto; }
.kj-logo svg { direction: ltr; }
@media (max-width: 575.98px) { .kj-logo svg, .kj-logo img { height: 32px; } }

/* ---------- Search -------------------------------------------------------- */
.kj-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 620px; }
.kj-search__form {
  display: flex; align-items: center; gap: var(--kj-s2);
  height: 48px;
  padding-inline: var(--kj-s4);
  background: var(--kj-surface-2);
  border: 1.5px solid transparent;
  border-radius: var(--kj-r-md);
  transition: border-color var(--kj-t-fast) var(--kj-ease),
              background var(--kj-t-fast) var(--kj-ease),
              box-shadow var(--kj-t-fast) var(--kj-ease);
}
.kj-search__form:focus-within {
  background: var(--kj-surface);
  border-color: var(--kj-primary);
  box-shadow: 0 0 0 4px var(--kj-primary-ring);
}
.kj-search__icon { width: 19px; height: 19px; color: var(--kj-faint); flex: none; }
.kj-search__input {
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  border: 0; background: none;
  font-size: var(--kj-fs-md);
  color: var(--kj-ink);
}
.kj-search__input::placeholder { color: var(--kj-faint); }
.kj-search__submit {
  flex: none; height: 34px; padding-inline: var(--kj-s4);
  font-size: var(--kj-fs-sm); font-weight: 700;
  color: var(--kj-on-primary, #fff); background: var(--kj-primary-solid, var(--kj-primary));
  border-radius: var(--kj-r-sm);
  transition: background var(--kj-t-fast) var(--kj-ease);
}
.kj-search__submit:hover { background: var(--kj-primary-hover); }
@media (max-width: 991.98px) { .kj-search__submit { display: none; } }

/* Suggestions panel */
.kj-search__panel {
  position: absolute; top: calc(100% + 8px);
  inset-inline: 0;
  background: var(--kj-surface);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-sh-lg);
  padding: var(--kj-s3);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--kj-t-fast) var(--kj-ease),
              transform var(--kj-t-fast) var(--kj-ease),
              visibility var(--kj-t-fast);
  z-index: var(--kj-z-drawer);
  max-height: min(70vh, 520px); overflow-y: auto;
}
.kj-search__panel.is-open { opacity: 1; visibility: visible; transform: none; }
.kj-search__panel-title {
  font-size: var(--kj-fs-xs); font-weight: 700; color: var(--kj-muted);
  padding: var(--kj-s2) var(--kj-s2) var(--kj-s1);
}
.kj-search__chips { display: flex; flex-wrap: wrap; gap: var(--kj-s2); padding: var(--kj-s1) var(--kj-s2) var(--kj-s3); }
.kj-search__chip {
  display: inline-flex; align-items: center; min-height: 32px;
  padding-inline: var(--kj-s3);
  font-size: var(--kj-fs-sm); font-weight: 500;
  color: var(--kj-body); background: var(--kj-surface-2);
  border-radius: var(--kj-r-pill);
  transition: background var(--kj-t-fast) var(--kj-ease), color var(--kj-t-fast) var(--kj-ease);
}
.kj-search__chip:hover { background: var(--kj-primary-soft); color: var(--kj-primary-ink, var(--kj-primary)); }

.kj-search__row {
  display: flex; align-items: center; gap: var(--kj-s3);
  padding: var(--kj-s2);
  border-radius: var(--kj-r-sm);
  transition: background var(--kj-t-fast) var(--kj-ease);
}
.kj-search__row:hover { background: var(--kj-surface-2); }
.kj-search__row img {
  width: 44px; height: 44px; flex: none;
  object-fit: contain;
  background: var(--kj-surface-2);
  border-radius: var(--kj-r-xs);
}
.kj-search__row-name {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--kj-fs-sm); font-weight: 500; color: var(--kj-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.kj-search__row-price {
  flex: none; display: inline-flex; align-items: baseline; gap: 3px;
  font-size: var(--kj-fs-sm); font-weight: 700; color: var(--kj-ink);
  white-space: nowrap;
}
.kj-search__row-price .kj-num { font-variant-numeric: tabular-nums; }

/* ---------- Header actions ------------------------------------------------ */
.kj-header__actions { flex: none; display: flex; align-items: center; gap: var(--kj-s1); }

.kj-action {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--kj-s2);
  min-height: var(--kj-tap); padding-inline: var(--kj-s3);
  border-radius: var(--kj-r-md);
  color: var(--kj-body); font-size: var(--kj-fs-sm); font-weight: 600;
  transition: background var(--kj-t-fast) var(--kj-ease), color var(--kj-t-fast) var(--kj-ease);
}
.kj-action:hover { background: var(--kj-surface-2); color: var(--kj-ink); }
.kj-action svg { width: 21px; height: 21px; flex: none; }
.kj-action__label { white-space: nowrap; }
@media (max-width: 1199.98px) { .kj-action__label { display: none; } }

.kj-action__count {
  position: absolute; top: 4px; inset-inline-end: 2px;
  min-width: 18px; height: 18px;
  display: grid; place-items: center;
  padding-inline: 4px;
  font-size: 10px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--kj-accent-solid);
  border: 2px solid var(--kj-surface);
  border-radius: var(--kj-r-pill);
}

/* Cart button (emphasised) */
.kj-action--cart {
  background: var(--kj-primary-soft);
  color: var(--kj-primary-ink, var(--kj-primary));
  padding-inline: var(--kj-s4);
}
.kj-action--cart:hover { background: var(--kj-violet-100); color: var(--kj-primary-hover); }

/* ---------- Nav row ------------------------------------------------------- */
.kj-nav { border-top: 1px solid var(--kj-line-2); }
.kj-nav__inner { display: flex; align-items: center; gap: var(--kj-s2); min-height: var(--kj-nav-h); }
@media (max-width: 991.98px) { .kj-nav { display: none; } }

.kj-nav__list { display: flex; align-items: center; gap: var(--kj-s1); }
.kj-nav__link {
  display: inline-flex; align-items: center; gap: var(--kj-s1);
  height: 38px; padding-inline: var(--kj-s3);
  font-size: var(--kj-fs-md); font-weight: 600;
  color: var(--kj-body);
  border-radius: var(--kj-r-sm);
  transition: background var(--kj-t-fast) var(--kj-ease), color var(--kj-t-fast) var(--kj-ease);
}
.kj-nav__link:hover { background: var(--kj-surface-2); color: var(--kj-primary-ink, var(--kj-primary)); }
.kj-nav__link svg { width: 15px; height: 15px; transition: transform var(--kj-t-fast) var(--kj-ease); }
.kj-nav__item { position: relative; }
.kj-nav__item:hover > .kj-nav__link svg { transform: rotate(180deg); }

.kj-nav__link--sale { color: var(--kj-sale-ink); }
.kj-nav__link--sale:hover { background: var(--kj-sale-soft); color: var(--kj-rose-600); }

/* Categories trigger */
.kj-nav__cats {
  display: inline-flex; align-items: center; gap: var(--kj-s2);
  height: 40px; padding-inline: var(--kj-s4);
  font-size: var(--kj-fs-md); font-weight: 700;
  color: var(--kj-on-primary, #fff); background: var(--kj-primary-solid, var(--kj-primary));
  border-radius: var(--kj-r-sm);
  transition: background var(--kj-t-fast) var(--kj-ease);
}
.kj-nav__cats:hover { background: var(--kj-primary-hover); }
.kj-nav__cats svg { width: 17px; height: 17px; }

/* ---------- Mega menu ----------------------------------------------------- */
.kj-mega {
  position: absolute; top: calc(100% + 6px);
  inset-inline-start: 0;
  width: min(880px, calc(100vw - var(--kj-gutter) * 2));
  background: var(--kj-surface);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-sh-xl);
  padding: var(--kj-s5);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--kj-t-base) var(--kj-ease),
              transform var(--kj-t-base) var(--kj-ease),
              visibility var(--kj-t-base);
  z-index: var(--kj-z-drawer);
}
.kj-nav__item:hover > .kj-mega,
.kj-nav__item:focus-within > .kj-mega,
.kj-mega.is-open { opacity: 1; visibility: visible; transform: none; }

.kj-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--kj-s5);
}
.kj-mega__col-title {
  display: flex; align-items: center; gap: var(--kj-s2);
  font-size: var(--kj-fs-md); font-weight: 800; color: var(--kj-ink);
  margin-bottom: var(--kj-s3);
  padding-bottom: var(--kj-s2);
  border-bottom: 1px solid var(--kj-line-2);
}
.kj-mega__col-title svg { width: 17px; height: 17px; color: var(--kj-primary-ink, var(--kj-primary)); }
.kj-mega__links { display: flex; flex-direction: column; gap: 2px; }
.kj-mega__link {
  display: block;
  padding: var(--kj-s2) var(--kj-s2);
  font-size: var(--kj-fs-sm); font-weight: 500;
  color: var(--kj-muted);
  border-radius: var(--kj-r-xs);
  transition: background var(--kj-t-fast) var(--kj-ease),
              color var(--kj-t-fast) var(--kj-ease),
              padding-inline-start var(--kj-t-fast) var(--kj-ease);
}
.kj-mega__link:hover {
  background: var(--kj-primary-soft); color: var(--kj-primary-ink, var(--kj-primary));
  padding-inline-start: var(--kj-s3);
}

/* ---------- Mini cart ----------------------------------------------------- */
.kj-minicart {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  width: min(380px, calc(100vw - var(--kj-gutter) * 2));
  background: var(--kj-surface);
  border: 1px solid var(--kj-line);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-sh-xl);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--kj-t-base) var(--kj-ease),
              transform var(--kj-t-base) var(--kj-ease),
              visibility var(--kj-t-base);
  z-index: var(--kj-z-drawer);
  overflow: hidden;
}
.kj-minicart.is-open { opacity: 1; visibility: visible; transform: none; }
.kj-minicart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--kj-s4);
  border-bottom: 1px solid var(--kj-line-2);
  font-weight: 700; color: var(--kj-ink);
}
.kj-minicart__body { max-height: 320px; overflow-y: auto; padding: var(--kj-s2); }
.kj-minicart__empty {
  display: grid; place-items: center; gap: var(--kj-s3);
  padding: var(--kj-s10) var(--kj-s4); text-align: center;
}
.kj-minicart__empty svg { width: 64px; height: 64px; color: var(--kj-line); }
.kj-minicart__empty p { font-size: var(--kj-fs-sm); color: var(--kj-muted); }

/* ---------- Mobile drawer ------------------------------------------------- */
.kj-burger { display: none; }
@media (max-width: 991.98px) { .kj-burger { display: inline-grid; } }

.kj-overlay {
  position: fixed; inset: 0;
  background: rgba(18,19,26,.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--kj-t-base) var(--kj-ease), visibility var(--kj-t-base);
  z-index: var(--kj-z-drawer);
}
.kj-overlay.is-open { opacity: 1; visibility: visible; }

.kj-drawer {
  position: fixed; top: 0; bottom: 0;
  inset-inline-start: 0;
  width: min(320px, 86vw);
  background: var(--kj-surface);
  box-shadow: var(--kj-sh-xl);
  transform: translateX(-100%);
  transition: transform var(--kj-t-slow) var(--kj-ease-out);
  z-index: calc(var(--kj-z-drawer) + 1);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
/* inset-inline-start already resolves to the RIGHT edge in RTL, so the drawer
   is anchored correctly by the base rule. Only the hide direction flips:
   LTR hides to the left (-100%), RTL hides to the right (+100%). */
[dir="rtl"] .kj-drawer { transform: translateX(100%); }
/* Closed drawer must be unreachable by keyboard and screen readers.
   visibility:hidden removes its 30 focusable children from the tab order;
   the delayed transition keeps the slide-out animation intact. */
.kj-drawer {
  visibility: hidden;
  transition: transform var(--kj-t-slow) var(--kj-ease-out),
              visibility 0s linear var(--kj-t-slow);
}
.kj-drawer.is-open {
  transform: translateX(0) !important;
  visibility: visible;
  transition: transform var(--kj-t-slow) var(--kj-ease-out), visibility 0s;
}

.kj-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kj-s3);
  padding: var(--kj-s4);
  border-bottom: 1px solid var(--kj-line);
  flex: none;
}
.kj-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--kj-s3); }
.kj-drawer__foot { flex: none; padding: var(--kj-s4); border-top: 1px solid var(--kj-line); }

.kj-drawer__link {
  display: flex; align-items: center; gap: var(--kj-s3);
  min-height: var(--kj-tap);
  padding: var(--kj-s2) var(--kj-s3);
  font-size: var(--kj-fs-md); font-weight: 600; color: var(--kj-body);
  border-radius: var(--kj-r-sm);
  transition: background var(--kj-t-fast) var(--kj-ease), color var(--kj-t-fast) var(--kj-ease);
}
.kj-drawer__link:hover { background: var(--kj-surface-2); color: var(--kj-primary-ink, var(--kj-primary)); }
.kj-drawer__link svg { width: 19px; height: 19px; color: var(--kj-faint); flex: none; }
.kj-drawer__link:hover svg { color: var(--kj-primary-ink, var(--kj-primary)); }

/* Accordion inside drawer */
.kj-acc__trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kj-s3); width: 100%;
  min-height: var(--kj-tap);
  padding: var(--kj-s2) var(--kj-s3);
  font-size: var(--kj-fs-md); font-weight: 600; color: var(--kj-body);
  border-radius: var(--kj-r-sm);
  text-align: start;
  transition: background var(--kj-t-fast) var(--kj-ease);
}
.kj-acc__trigger:hover { background: var(--kj-surface-2); }
/* Icon + label group; min-width:0 lets a long category name ellipsize
   instead of pushing the chevron out of the panel. */
.kj-acc__label {
  display: inline-flex; align-items: center; gap: var(--kj-s3);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kj-acc__label svg { width: 19px; height: 19px; flex: none; color: var(--kj-faint); }
.kj-acc__trigger > svg:last-child {
  width: 16px; height: 16px; flex: none; color: var(--kj-faint);
  transition: transform var(--kj-t-base) var(--kj-ease);
}
.kj-acc__trigger[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.kj-acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--kj-t-base) var(--kj-ease);
}
.kj-acc__panel > div { overflow: hidden; }
.kj-acc__trigger[aria-expanded="true"] + .kj-acc__panel { grid-template-rows: 1fr; }
.kj-acc__panel .kj-drawer__link {
  font-weight: 500; font-size: var(--kj-fs-sm);
  padding-inline-start: var(--kj-s8);
  color: var(--kj-muted);
}

/* ---------- Mobile bottom bar --------------------------------------------- */
.kj-mobilebar {
  position: fixed; bottom: 0; inset-inline: 0;
  height: calc(var(--kj-mobilebar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--kj-surface);
  border-top: 1px solid var(--kj-line);
  box-shadow: 0 -4px 20px rgba(18,19,26,.07);
  z-index: var(--kj-z-sticky);
  display: none;
}
@media (max-width: 991.98px) {
  .kj-mobilebar { display: block; }
  body { padding-bottom: calc(var(--kj-mobilebar-h) + env(safe-area-inset-bottom, 0px)); }
}
.kj-mobilebar__inner { display: flex; height: var(--kj-mobilebar-h); }
.kj-mobilebar__item {
  position: relative;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  font-size: var(--kj-fs-2xs); font-weight: 600;
  color: var(--kj-muted);
  transition: color var(--kj-t-fast) var(--kj-ease);
}
.kj-mobilebar__item svg { width: 22px; height: 22px; }
.kj-mobilebar__item:hover, .kj-mobilebar__item.is-active { color: var(--kj-primary-ink, var(--kj-primary)); }
.kj-mobilebar__item.is-active::before {
  content: ""; position: absolute; top: 0;
  width: 26px; height: 3px;
  background: var(--kj-primary-solid, var(--kj-primary));
  border-radius: 0 0 var(--kj-r-pill) var(--kj-r-pill);
}
.kj-mobilebar__count {
  position: absolute; top: 6px;
  inset-inline-end: calc(50% - 20px);
  min-width: 17px; height: 17px;
  display: grid; place-items: center; padding-inline: 4px;
  font-size: 9px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--kj-accent-solid);
  border: 2px solid var(--kj-surface);
  border-radius: var(--kj-r-pill);
}

/* Lock scroll when a drawer/modal is open */
body.kj-no-scroll { overflow: hidden; }

/* Inline SVG inherits `direction: rtl` from <html>, which makes any <text>
   inside it lay out right-to-left from its x coordinate and collide with the
   icon. SVG coordinates are always logical-left-to-right, so pin the drawing
   surface to LTR; individual <text> nodes opt back into RTL for shaping. */
.kj-logo svg { direction: ltr; }

/* ==========================================================================
   MOBILE HEADER — search gets its own row
   --------------------------------------------------------------------------
   Below 768px the logo and the action buttons consume the whole flex row and
   squeeze .kj-search down to an unusable sliver. Wrap the bar and give the
   search field a full-width second row instead of letting it collapse.
   ========================================================================== */
@media (max-width: 767.98px) {
  .kj-header__main {
    flex-wrap: wrap;
    padding-block: var(--kj-s2);
    row-gap: var(--kj-s2);
  }
  .kj-search {
    order: 10;
    flex: 1 0 100%;
    max-width: none;
  }
  .kj-search__form { height: 42px; }
  /* Keep the logo and the actions on the first row, pushed apart. */
  .kj-logo { margin-inline-end: auto; }
  .kj-header__actions { gap: 2px; }
  .kj-action { padding-inline: var(--kj-s2); }
}

/* Labels beside the icons are noise on narrow screens. */
@media (max-width: 575.98px) {
  .kj-action__label { display: none; }
  .kj-action--cart { padding-inline: var(--kj-s2); }
}