/*
 * Golchay component kit. Anatomy from web-design/assets/kit.css (shadcn-like), rebuilt for this site.
 * Style source: house look "warm boutique" · palette: design/palette.css (copied to palette.css) · font: Vazirmatn (self-hosted, OFL).
 * Appearance: ONE fixed light appearance (cream paper, ink text). Every overlay uses the popover tokens of that
 * appearance in both OS modes, and color-scheme is fixed to light so native controls match.
 * Layers: primitive (--color-*, palette.css) → semantic (--surface, --on-surface, --popover-*) → component (--kit-*).
 * Gaps fixed vs. the source kit: 44px chips/qty/checks, no hex in components, logical chevrons, RTL switch, ring tokens.
 */
@font-face {
  font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../fonts/vazirmatn-arabic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Vazirmatn"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../../fonts/vazirmatn-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* primitives that palette.css does not provide */
  --white: #ffffff;
  --ink-a45: rgb(21 16 2 / .45);
  --ink-a08: rgb(21 16 2 / .08);

  /* semantic */
  --page: var(--color-light);                 /* cream paper */
  --surface: var(--white);
  --surface-2: var(--color-secondary-50);
  --surface-sunk: var(--color-neutral-100);
  --on-surface: var(--color-dark);
  --on-surface-muted: var(--color-neutral-700);
  --line: var(--color-neutral-200);
  --line-strong: var(--color-neutral-500);
  --action-bg: var(--color-primary);
  --action-bg-hover: var(--color-primary-700);
  --action-fg: var(--white);
  --action-tint: var(--color-primary-50);
  --link: var(--color-primary-700);
  --brand-red: var(--color-accent-600);
  --brand-red-soft: var(--color-accent-50);
  --inverse-bg: var(--color-dark);
  --inverse-fg: var(--color-light);
  --inverse-muted: var(--color-neutral-300);
  --popover-bg: var(--white);
  --popover-fg: var(--color-dark);
  --popover-line: var(--color-neutral-200);
  --nav-panel-bg: var(--color-light);         /* opaque (alpha 1) */
  --header-bg: var(--color-light);
  --scrim: var(--ink-a45);
  --focus: var(--color-primary-700);
  --success: var(--color-success-700);
  --success-tint: var(--color-success-50);
  --error: var(--color-accent-700);
  --error-tint: var(--color-accent-50);
  --info: var(--color-info-700);
  --info-tint: var(--color-info-50);

  /* typography */
  --font-body: "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-body);
  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .875rem;    /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-2xl: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --lh-body: 1.8;
  --lh-tight: 1.35;

  /* component layer */
  --kit-font: var(--font-body);
  --kit-primary: var(--action-bg);
  --kit-primary-hover: var(--action-bg-hover);
  --kit-primary-fg: var(--action-fg);
  --kit-primary-tint: var(--action-tint);
  --kit-accent: var(--brand-red);
  --kit-bg: var(--page);
  --kit-surface: var(--surface);
  --kit-muted: var(--surface-sunk);
  --kit-text: var(--on-surface);
  --kit-text-muted: var(--on-surface-muted);
  --kit-border: var(--line);
  --kit-border-strong: var(--line-strong);
  --kit-popover-bg: var(--popover-bg);
  --kit-popover-fg: var(--popover-fg);
  --kit-radius: 12px;
  --kit-radius-lg: 20px;
  --kit-radius-pill: 999px;
  --kit-h: 44px;
  --kit-h-lg: 52px;
  --kit-px: 14px;
  --kit-1: 4px; --kit-2: 8px; --kit-3: 12px; --kit-4: 16px; --kit-5: 24px; --kit-6: 32px; --kit-7: 48px; --kit-8: 64px; --kit-9: 96px;
  --kit-shadow-sm: 0 1px 2px var(--ink-a08);
  --kit-shadow: 0 10px 30px -12px rgb(21 16 2 / .22);
  --kit-shadow-lg: 0 30px 70px -24px rgb(21 16 2 / .4);
  --kit-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
  --kit-fast: 160ms; --kit-mid: 240ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
}

[class^="k-"], [class*=" k-"], [class^="k-"]::before, [class^="k-"]::after { box-sizing: border-box; }
.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { inline-size: 20px; block-size: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { inline-size: 16px; block-size: 16px; }
.icon--lg { inline-size: 24px; block-size: 24px; }
.icon--flip:dir(rtl) { transform: scaleX(-1); }

/* Button -------------------------------------------------------------------------------------------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kit-2);
  min-block-size: var(--kit-h); padding-inline: 20px; border: 1px solid transparent; border-radius: var(--kit-radius);
  font: inherit; font-family: var(--kit-font); font-size: var(--fs-base); font-weight: 600; line-height: 1.2;
  white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none; position: relative;
  transition: background-color var(--kit-fast), border-color var(--kit-fast), color var(--kit-fast), box-shadow var(--kit-fast), transform var(--kit-fast);
}
.k-btn:focus-visible { outline: none; box-shadow: var(--kit-ring); }
.k-btn:active { transform: scale(.98); }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.k-btn--primary { background: var(--kit-primary); color: var(--kit-primary-fg); }
.k-btn--secondary { background: var(--kit-muted); color: var(--kit-text); }
.k-btn--outline { background: var(--kit-surface); border-color: var(--kit-border-strong); color: var(--kit-text); }
.k-btn--ghost { background: transparent; color: var(--kit-text); }
.k-btn--inverse { background: var(--inverse-fg); color: var(--inverse-bg); }
.k-btn--link { background: none; min-block-size: 44px; padding-inline: 4px; color: var(--link); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.k-btn--destructive { background: var(--error); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .k-btn--primary:hover:not(:disabled) { background: var(--kit-primary-hover); }
  .k-btn--secondary:hover:not(:disabled) { background: var(--kit-border); }
  .k-btn--outline:hover:not(:disabled) { border-color: var(--kit-text); }
  .k-btn--ghost:hover:not(:disabled) { background: var(--kit-muted); }
  .k-btn--inverse:hover { background: var(--white); }
  .k-btn--link:hover { text-decoration-thickness: 2px; }
}
.k-btn--lg { min-block-size: var(--kit-h-lg); padding-inline: 28px; font-size: var(--fs-md); }
.k-btn--block { display: flex; inline-size: 100%; }
.k-btn--icon { inline-size: var(--kit-h); padding: 0; }
.k-btn[aria-busy="true"] { pointer-events: none; }
.k-btn[aria-busy="true"]::before {
  content: ""; flex: none; inline-size: 18px; block-size: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-block-start-color: transparent; animation: k-spin .8s linear infinite;
}
.k-btn[data-state="done"] { background: var(--success); color: var(--white); border-color: transparent; }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* Icon button with count badge (header) */
.k-iconbtn {
  position: relative; display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  border: 0; border-radius: var(--kit-radius-pill); background: transparent; color: var(--kit-text); cursor: pointer;
  transition: background-color var(--kit-fast);
}
@media (hover: hover) and (pointer: fine) { .k-iconbtn:hover { background: var(--kit-muted); } }
.k-iconbtn:focus-visible { outline: none; box-shadow: var(--kit-ring); }
.k-count {
  position: absolute; inset-block-start: 2px; inset-inline-end: 0; min-inline-size: 20px; block-size: 20px; padding-inline: 5px;
  display: grid; place-items: center; border-radius: var(--kit-radius-pill); background: var(--brand-red); color: var(--white);
  font-size: var(--fs-xs); font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px var(--page);
}
.k-count[data-empty="true"] { display: none; }
.k-count.is-bump { animation: k-bump 360ms var(--ease-out); }
@keyframes k-bump { 40% { transform: scale(1.35); } }

/* Field ---------------------------------------------------------------------------------------------- */
.k-field { display: grid; gap: 6px; min-inline-size: 0; }
.k-fields { display: grid; gap: var(--kit-4); }
.k-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .k-fields--2 { grid-template-columns: minmax(0, 1fr); } }
.k-label { font-size: var(--fs-sm); font-weight: 600; color: var(--kit-text); }
.k-req { color: var(--error); margin-inline-start: 2px; }
.k-help { margin: 0; font-size: var(--fs-sm); color: var(--kit-text-muted); line-height: 1.6; }
.k-error { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--error); line-height: 1.6; }
.k-error[hidden] { display: none; }
.k-input, .k-select, .k-textarea {
  display: block; inline-size: 100%; min-block-size: var(--kit-h); padding-inline: var(--kit-px);
  background: var(--kit-surface); color: var(--kit-text); border: 1px solid var(--kit-border-strong);
  border-radius: var(--kit-radius); font: inherit; font-size: var(--fs-base); line-height: 1.5;
  transition: border-color var(--kit-fast), box-shadow var(--kit-fast); appearance: none;
}
.k-textarea { min-block-size: 112px; padding-block: 10px; resize: vertical; field-sizing: content; }
.k-input::placeholder, .k-textarea::placeholder { color: var(--kit-text-muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .k-input:hover, .k-select:hover, .k-textarea:hover { border-color: var(--kit-text); } }
.k-input:focus-visible, .k-select:focus-visible, .k-textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: var(--kit-ring); }
.k-input[aria-invalid="true"], .k-select[aria-invalid="true"], .k-textarea[aria-invalid="true"] { border-color: var(--error); background: var(--error-tint); }
.k-input:disabled, .k-select:disabled { background: var(--kit-muted); color: var(--kit-text-muted); cursor: not-allowed; }
.k-input[readonly] { background: var(--surface-2); border-style: dashed; }
/* Native select: arrow at inline-end (left in RTL), 40px reserved. */
.k-select-wrap { position: relative; display: block; }
.k-select { padding-inline-end: 40px; cursor: pointer; }
.k-select-wrap > .icon { position: absolute; inset-inline-end: 14px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--kit-text-muted); }
.k-select option { background: var(--kit-popover-bg); color: var(--kit-popover-fg); }

/* Checkbox / radio / choice card ----------------------------------------------------------------------- */
.k-check, .k-radio { display: flex; align-items: center; gap: var(--kit-3); min-block-size: 44px; cursor: pointer; font-size: var(--fs-base); }
.k-check input, .k-radio input, .k-choice input {
  appearance: none; flex: none; inline-size: 20px; block-size: 20px; margin: 0; display: grid; place-content: center;
  background: var(--kit-surface); border: 1.5px solid var(--kit-border-strong); cursor: pointer;
  transition: background-color var(--kit-fast), border-color var(--kit-fast);
}
.k-check input { border-radius: 6px; }
.k-radio input, .k-choice input[type="radio"] { border-radius: 50%; }
.k-check input::before { content: ""; inline-size: 11px; block-size: 11px; transform: scale(0); transition: transform var(--kit-fast); background: var(--kit-primary-fg); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.k-radio input::before, .k-choice input[type="radio"]::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; transform: scale(0); transition: transform var(--kit-fast); background: var(--kit-primary); }
.k-check input:checked { background: var(--kit-primary); border-color: var(--kit-primary); }
.k-radio input:checked, .k-choice input[type="radio"]:checked { border-color: var(--kit-primary); }
.k-check input:checked::before, .k-radio input:checked::before, .k-choice input:checked::before { transform: scale(1); }
.k-check input:focus-visible, .k-radio input:focus-visible, .k-choice input:focus-visible { outline: none; box-shadow: var(--kit-ring); }
.k-check__count { margin-inline-start: auto; font-size: var(--fs-sm); color: var(--kit-text-muted); }
.k-check:has(input:disabled), .k-radio:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.k-choice {
  display: flex; align-items: center; gap: var(--kit-3); padding: var(--kit-4); min-block-size: 64px; cursor: pointer;
  background: var(--kit-surface); border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  transition: border-color var(--kit-fast), background-color var(--kit-fast);
}
@media (hover: hover) and (pointer: fine) { .k-choice:hover { border-color: var(--kit-border-strong); } }
.k-choice:has(input:checked) { border-color: var(--kit-primary); background: var(--kit-primary-tint); box-shadow: inset 0 0 0 1px var(--kit-primary); }
.k-choice__body { display: grid; gap: 2px; flex: 1; min-inline-size: 0; }
.k-choice__title { font-weight: 700; }
.k-choice__meta { font-size: var(--fs-sm); color: var(--kit-text-muted); }

/* Quantity ---------------------------------------------------------------------------------------------- */
.k-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--kit-border-strong); border-radius: var(--kit-radius); background: var(--kit-surface); }
.k-qty button { inline-size: 44px; block-size: 44px; border: 0; background: none; color: var(--kit-text); cursor: pointer; display: grid; place-items: center; border-radius: var(--kit-radius); }
.k-qty button:disabled { opacity: .35; cursor: not-allowed; }
.k-qty button:focus-visible { outline: none; box-shadow: var(--kit-ring); }
@media (hover: hover) and (pointer: fine) { .k-qty button:hover:not(:disabled) { background: var(--kit-muted); } }
.k-qty output { min-inline-size: 32px; display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Chips and badges ----------------------------------------------------------------------------------------- */
.k-chips { display: flex; flex-wrap: wrap; gap: var(--kit-2); }
.k-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; min-inline-size: 44px;
  padding-inline: 16px; border: 1px solid var(--kit-border-strong); border-radius: var(--kit-radius-pill);
  background: var(--kit-surface); color: var(--kit-text); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: border-color var(--kit-fast), background-color var(--kit-fast), color var(--kit-fast);
}
@media (hover: hover) and (pointer: fine) { .k-chip:hover { border-color: var(--kit-text); } }
.k-chip[aria-pressed="true"], .k-chip[aria-current="true"], .k-chip:has(input:checked) { background: var(--kit-text); border-color: var(--kit-text); color: var(--kit-surface); }
.k-chip:focus-visible, .k-chip:has(input:focus-visible) { outline: none; box-shadow: var(--kit-ring); }
.k-chip:disabled, .k-chip:has(input:disabled) { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.k-chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }
/* the visible ring is on the label; the hidden input mirrors a colour that contrasts with the label fill */
.k-chip:has(input:checked) input:focus-visible { outline-color: var(--kit-surface); }
.k-chip--remove { padding-inline: 14px 10px; background: var(--kit-primary-tint); border-color: var(--color-primary-300); color: var(--color-primary-800); }
.k-chip--remove .icon { inline-size: 16px; block-size: 16px; }
.k-chip__swatch, .k-swatch { inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(21 16 2 / .25); flex: none; }
.k-badge { display: inline-flex; align-items: center; min-block-size: 24px; padding-inline: 10px; border-radius: var(--kit-radius-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--kit-muted); color: var(--kit-text); white-space: nowrap; }
.k-badge--new { background: var(--brand-red); color: var(--white); }
.k-badge--soft { background: var(--surface); color: var(--kit-text); }
.k-badge--low { background: var(--color-warning-50); color: var(--color-warning-800); }

/* Product card -------------------------------------------------------------------------------------------- */
.k-product { position: relative; display: flex; flex-direction: column; gap: var(--kit-3); min-inline-size: 0; }
.k-product__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--kit-radius-lg); background: var(--surface-sunk); isolation: isolate; }
.k-product__track { display: flex; block-size: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.k-product__track::-webkit-scrollbar { display: none; }
.k-product__track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--kit-radius-lg); }
.k-product__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.k-product__slide img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.k-product__badges { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; display: flex; gap: 6px; pointer-events: none; z-index: 2; }
.k-product__dots { position: absolute; inset-block-end: 12px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; z-index: 2; }
.k-product__dots span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--surface); opacity: .55; box-shadow: 0 0 0 1px rgb(21 16 2 / .18); transition: opacity var(--kit-fast), transform var(--kit-fast); }
.k-product__dots span.is-on { opacity: 1; transform: scale(1.35); }
.k-product__nav {
  position: absolute; inset-block-start: 50%; z-index: 3; inline-size: 40px; block-size: 40px; margin-block-start: -20px;
  display: none; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--kit-text);
  box-shadow: var(--kit-shadow-sm); cursor: pointer; opacity: 0; transition: opacity var(--kit-fast), transform var(--kit-fast);
}
.k-product__nav--prev { inset-inline-start: 10px; }
.k-product__nav--next { inset-inline-end: 10px; }
.k-product__nav:disabled { visibility: hidden; }
.k-product__nav:focus-visible { outline: none; box-shadow: var(--kit-ring); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .k-product__nav { display: grid; }
  .k-product__media:hover .k-product__nav, .k-product__media:focus-within .k-product__nav { opacity: 1; }
  .k-product__nav:hover { transform: scale(1.06); }
}
.k-product__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-inline-size: 0; }
.k-product__cat { margin: 0; font-size: var(--fs-xs); color: var(--kit-text-muted); }
.k-product__title { margin: 0; font-size: var(--fs-base); font-weight: 700; line-height: 1.55; }
.k-product__meta { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--kit-text-muted); }
.k-product__foot { margin-block-start: auto; padding-block-start: var(--kit-2); display: grid; gap: var(--kit-3); }
.k-product__sizes {
  position: absolute; inset-inline: 8px; inset-block-end: 8px; z-index: 4; padding: 12px; display: grid; gap: 10px;
  background: var(--kit-popover-bg); color: var(--kit-popover-fg); border-radius: 14px; box-shadow: var(--kit-shadow);
  transform: translateY(0); opacity: 1; transition: transform var(--kit-mid) var(--ease-out);
}
.k-product__sizes[hidden] { display: grid; visibility: hidden; transform: translateY(12px); opacity: 0; pointer-events: none; transition: transform var(--kit-fast) var(--ease-in), opacity var(--kit-fast), visibility 0s var(--kit-fast); }
.k-product__sizes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); font-weight: 700; }
.k-product__sizes-head button { inline-size: 44px; block-size: 44px; margin: -12px; border: 0; border-radius: 50%; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; }
.k-product__sizes-head button:focus-visible { outline: none; box-shadow: var(--kit-ring); }
.k-product__sizes .k-chips { gap: 6px; }
.k-product__sizes .k-chip { padding-inline: 8px; flex: 1 0 44px; }

/* Price */
.k-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-weight: 800; font-size: var(--fs-md); color: var(--kit-text); font-variant-numeric: tabular-nums; }
.k-price__unit { font-size: var(--fs-xs); font-weight: 500; color: var(--kit-text-muted); }

/* Breadcrumbs */
.k-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--kit-text-muted); }
.k-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); display: inline-flex; align-items: center; min-block-size: 24px; }
.k-crumbs li + li::before { content: "/"; margin-inline-end: 8px; opacity: .6; }
.k-crumbs [aria-current="page"] { color: var(--kit-text); font-weight: 600; }

/* Notice, empty state, toast */
.k-notice { display: flex; align-items: flex-start; gap: var(--kit-3); padding: var(--kit-3) var(--kit-4); border-radius: var(--kit-radius); border: 1px solid; font-size: var(--fs-sm); line-height: 1.7; }
.k-notice .icon { margin-block-start: 2px; }
.k-notice--info { background: var(--info-tint); border-color: var(--color-info-200); color: var(--info); }
.k-notice--success { background: var(--success-tint); border-color: var(--color-success-200); color: var(--success); }
.k-notice--error { background: var(--error-tint); border-color: var(--color-accent-200); color: var(--error); }
.k-notice--warning { background: var(--color-warning-50); border-color: var(--color-warning-200); color: var(--color-warning-800); }
.k-empty { display: grid; justify-items: center; gap: var(--kit-3); padding: var(--kit-7) var(--kit-4); text-align: center; color: var(--kit-text-muted); }
.k-empty__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--kit-text); }
.k-empty p { margin: 0; }
.k-toast-region { position: fixed; inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline: 16px; z-index: 120; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.k-toast {
  display: flex; align-items: center; gap: 12px; max-inline-size: 480px; padding: 12px 16px; border-radius: 14px;
  background: var(--inverse-bg); color: var(--inverse-fg); box-shadow: var(--kit-shadow-lg); font-size: var(--fs-sm); line-height: 1.6;
  pointer-events: auto; animation: k-toast-in var(--kit-mid) var(--ease-out);
}
.k-toast img { inline-size: 40px; block-size: 50px; object-fit: cover; border-radius: 8px; flex: none; }
.k-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--kit-fast) var(--ease-in), transform var(--kit-fast) var(--ease-in); }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* Filter bar, filter dropdown ------------------------------------------------------------------------------- */
.k-filter { position: relative; }
.k-filter__trigger { gap: 8px; padding-inline: 16px 12px; }
.k-filter__trigger[aria-expanded="true"] { border-color: var(--kit-text); }
.k-filter__trigger[aria-expanded="true"] .icon--chev { transform: rotate(180deg); }
.k-filter__trigger .icon--chev { transition: transform var(--kit-fast); }
.k-filter__n { min-inline-size: 22px; block-size: 22px; padding-inline: 6px; display: inline-grid; place-items: center; border-radius: var(--kit-radius-pill); background: var(--kit-text); color: var(--kit-surface); font-size: var(--fs-xs); }
.k-filter__panel {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; z-index: 40; inline-size: max-content; min-inline-size: 260px; max-inline-size: min(360px, calc(100vw - 32px));
  padding: var(--kit-4); background: var(--kit-popover-bg); color: var(--kit-popover-fg); border: 1px solid var(--popover-line);
  border-radius: 16px; box-shadow: var(--kit-shadow); transform-origin: top; animation: k-pop var(--kit-mid) var(--ease-out);
}
.k-filter__panel[hidden] { display: none; }
.k-filter__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
@keyframes k-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.k-group { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.k-group__legend { padding: 0; margin-block-end: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--kit-text); }
.k-group + .k-group { margin-block-start: var(--kit-5); }
.k-group__sub { margin: 12px 0 6px; font-size: var(--fs-xs); color: var(--kit-text-muted); font-weight: 600; }

/* Sheet (dialog) — drawer from the inline-end or the bottom ------------------------------------------------------ */
.k-sheet {
  position: fixed; margin: 0; padding: 0; border: 0; max-inline-size: none; max-block-size: none;
  background: var(--kit-popover-bg); color: var(--kit-popover-fg); box-shadow: var(--kit-shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.k-sheet:not([open]) { display: none; }
.k-sheet::backdrop { background: var(--scrim); }
.k-sheet--side { inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; block-size: 100dvh; inline-size: min(440px, 100vw); }
.k-sheet--bottom { inset-inline: 0; inset-block-start: auto; inset-block-end: 0; inline-size: 100vw; max-block-size: 88dvh; border-radius: 20px 20px 0 0; }
.k-sheet--center { inset: 0; margin: auto; inline-size: min(560px, calc(100vw - 32px)); block-size: fit-content; max-block-size: calc(100dvh - 32px); border-radius: 20px; }
.k-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 12px 12px; padding-inline: 20px 12px; border-block-end: 1px solid var(--popover-line); min-block-size: 64px; }
.k-sheet__title { margin: 0; font-size: var(--fs-md); font-weight: 800; }
.k-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.k-sheet__foot { display: grid; gap: 12px; padding: 16px 20px max(16px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--popover-line); background: var(--kit-popover-bg); }
.k-sheet__foot--row { grid-template-columns: auto 1fr; }
@media (prefers-reduced-motion: no-preference) {
  .k-sheet[open] { animation: k-sheet-side var(--kit-mid) var(--ease-out); }
  .k-sheet--bottom[open] { animation-name: k-sheet-up; }
  .k-sheet--center[open] { animation-name: k-sheet-fade; }
  .k-sheet[open]::backdrop { animation: k-fade var(--kit-mid) ease; }
}
@keyframes k-sheet-side { from { transform: translateX(var(--sheet-from, -100%)); } }
@keyframes k-sheet-side-out { to { transform: translateX(var(--sheet-from, -100%)); } }
[dir="ltr"] .k-sheet--side { --sheet-from: 100%; }
@keyframes k-sheet-up { from { transform: translateY(100%); } }
@keyframes k-sheet-down { to { transform: translateY(100%); } }
@keyframes k-sheet-fade { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes k-sheet-fade-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes k-fade { from { opacity: 0; } }
@keyframes k-fade-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}