body{margin: 0;background: var(--surface);color: var(--ink);font-family: var(--font-sans);-webkit-font-smoothing: antialiased}
.kl-pad{padding: var(--space-24)}
.kl-row{display: flex;flex-wrap: wrap;gap: var(--space-12);align-items: center}
.kl-stack{display: flex;flex-direction: column;gap: var(--space-16)}
.kl-sr{position: absolute;width: 1px;height: 1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap}
.kl-sand{background: var(--sand);color: var(--on-sand);
--surface: var(--sand);--surface-raised: var(--sand);--ink: var(--on-sand);--ink-muted: var(--on-sand-muted);
--action: var(--on-sand);--on-action: var(--sand);--line: var(--sand-deep);--line-strong: var(--sand-line-strong);
--focus: var(--focus-on-sand)}
.kl-btn{appearance: none;font-family: var(--font-sans);font-size: 16px;line-height: 20px;font-weight: 600;letter-spacing: -0.005em;
min-height: var(--tap-min);padding: 0 var(--space-24);border-radius: var(--radius-nub);border: 1.5px solid var(--ink);
background: transparent;color: var(--ink);cursor: pointer;display: inline-flex;align-items: center;justify-content: center;gap: var(--space-8);
transition: background-color 150ms cubic-bezier(.4,0,.2,1), color 150ms cubic-bezier(.4,0,.2,1), box-shadow 150ms cubic-bezier(.4,0,.2,1), transform 240ms cubic-bezier(.34,1.56,.64,1)}
.kl-btn:hover{background: var(--ink);color: var(--surface)}
.kl-btn:active{transform: scale(.96)}
.kl-btn:focus-visible{outline: 2px solid var(--focus);outline-offset: 2px}
.kl-btn--primary{background: var(--action);border-color: var(--action);color: var(--on-action)}
.kl-btn--primary:hover{background: var(--action);color: var(--on-action);box-shadow: inset 0 -4px 0 var(--ink-muted)}
.kl-btn--quiet{border-color: transparent;padding: 0 var(--space-8);text-decoration: underline;text-decoration-thickness: 1.5px;text-underline-offset: 5px}
.kl-btn--quiet:hover{background: transparent;color: var(--ink);text-decoration-thickness: 3px}
.kl-btn--wide{width: 100%}
.kl-btn:disabled{opacity: .45;cursor: not-allowed;transform: none;box-shadow: none}
.kl-btn:disabled:hover{background: transparent;color: var(--ink)}
.kl-btn--primary:disabled:hover{background: var(--action);color: var(--on-action)}
.kl-btn svg{width: 20px;height: 20px;flex: none}
.kl-badge{display: inline-flex;align-items: center;font-family: var(--font-mono);font-size: 11px;line-height: 16px;font-weight: 500;
letter-spacing: .08em;text-transform: uppercase;padding: 4px var(--space-8);border-radius: var(--radius-nub);
border: 1px solid var(--line-strong);color: var(--ink);background: transparent;white-space: nowrap}
.kl-badge--ink{background: var(--ink);border-color: var(--ink);color: var(--surface)}
.kl-badge--sand{background: var(--sand);border-color: var(--sand);color: var(--on-sand)}
.kl-badge--success{border-color: var(--success);color: var(--success)}
.kl-badge--danger{border-color: var(--danger);color: var(--danger)}
.kl-swatches{display: flex;flex-direction: column;gap: var(--space-8);border: 0;padding: 0;margin: 0}
.kl-swatches-legend{font-family: var(--font-mono);font-size: 12px;line-height: 16px;font-weight: 500;letter-spacing: .08em;text-transform: uppercase;color: var(--ink-muted);padding: 0}
.kl-swatches-legend b{font-family: var(--font-sans);font-size: 16px;letter-spacing: 0;text-transform: none;font-weight: 600;color: var(--ink);margin-inline-start: var(--space-8)}
.kl-swatches-row{display: flex;flex-wrap: wrap;gap: 0;margin-inline-start: -6px}
.kl-swatch{appearance: none;background: transparent;border: 0;padding: 0;width: var(--tap-min);height: var(--tap-min);display: grid;place-items: center;cursor: pointer;position: relative;border-radius: var(--radius-full)}
.kl-swatch-disc{width: 32px;height: 32px;border-radius: var(--radius-full);box-shadow: inset 0 0 0 1px var(--line-strong);transition: box-shadow 150ms cubic-bezier(.4,0,.2,1)}
.kl-swatch[aria-checked="true"] .kl-swatch-disc{box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 3px var(--surface), 0 0 0 5px var(--ink);animation: kl-squish 240ms cubic-bezier(.34,1.56,.64,1)}
.kl-swatch:focus-visible{outline: 2px solid var(--focus);outline-offset: -2px}
.kl-swatch[aria-disabled="true"]{cursor: not-allowed}
.kl-swatch[aria-disabled="true"] .kl-swatch-disc{opacity: .5}
.kl-swatch[aria-disabled="true"]::after{content: "";position: absolute;width: 34px;height: 2px;background: var(--ink);transform: rotate(-45deg);border-radius: var(--radius-full)}
@keyframes kl-squish{0%{transform: scale(.88)}100%{transform: scale(1)}}
.kl-price{display: inline-flex;align-items: baseline;gap: var(--space-8);font-family: var(--font-sans);font-variant-numeric: tabular-nums;color: var(--ink)}
.kl-price-now{font-size: 20px;line-height: 24px;font-weight: 600}
.kl-price-was{font-size: 16px;line-height: 24px;font-weight: 400;color: var(--ink-muted);text-decoration-thickness: 1.5px}
.kl-lead{display: grid;grid-template-columns: 20px 1fr;gap: var(--space-12);align-items: start;padding: var(--space-12) 0;border-top: 1px solid var(--line);border-bottom: 1px solid var(--line);color: var(--ink)}
.kl-lead-glyph{display: flex;flex-direction: column;gap: 2px;padding-top: 3px}
.kl-lead-glyph i{display: block;height: 3px;background: var(--ink)}
.kl-lead-glyph i:first-child{border-radius: var(--radius-full)}
.kl-lead-title{font-size: 16px;line-height: 24px;font-weight: 600}
.kl-lead-detail{font-family: var(--font-mono);font-size: 14px;line-height: 22px;color: var(--ink-muted)}
.kl-specs{margin: 0;border-top: 1px solid var(--line)}
.kl-spec{display: grid;grid-template-columns: minmax(104px, 34%) 1fr;gap: var(--space-16);padding: var(--space-12) 0;border-bottom: 1px solid var(--line)}
.kl-spec dt{font-family: var(--font-mono);font-size: 12px;line-height: 22px;font-weight: 500;letter-spacing: .08em;text-transform: uppercase;color: var(--ink-muted)}
.kl-spec dd{margin: 0;font-family: var(--font-mono);font-size: 14px;line-height: 22px;color: var(--ink);font-variant-numeric: tabular-nums}
.kl-specs-note{font-size: 14px;line-height: 22px;color: var(--ink-muted);margin: var(--space-12) 0 0}
.kl-qty{display: inline-grid;grid-template-columns: var(--tap-min) 48px var(--tap-min);align-items: center;border: 1.5px solid var(--line-strong);border-radius: var(--radius-nub);height: var(--tap-min);color: var(--ink)}
.kl-qty button{appearance: none;background: transparent;border: 0;color: var(--ink);height: 100%;display: grid;place-items: center;cursor: pointer;border-radius: var(--radius-nub)}
.kl-qty button:hover{background: var(--surface-raised)}
.kl-qty button:focus-visible{outline: 2px solid var(--focus);outline-offset: -2px}
.kl-qty button:disabled{color: var(--line-strong);cursor: not-allowed;background: transparent}
.kl-qty button svg{width: 20px;height: 20px}
.kl-qty output{text-align: center;font-size: 16px;font-weight: 600;font-variant-numeric: tabular-nums}
.kl-field{display: flex;flex-direction: column;gap: 6px}
.kl-field label{font-size: 14px;line-height: 20px;font-weight: 600;color: var(--ink)}
.kl-field input{font-family: var(--font-sans);font-size: 16px;line-height: 24px;color: var(--ink);background: var(--surface-raised);
border: 1.5px solid var(--line-strong);border-radius: var(--radius-nub);height: var(--tap-min);padding: 0 var(--space-16)}
.kl-field input::placeholder{color: var(--ink-muted)}
.kl-field input:focus-visible{outline: 2px solid var(--focus);outline-offset: 2px}
.kl-field--error input{border-color: var(--danger)}
.kl-field-hint{font-size: 14px;line-height: 22px;color: var(--ink-muted);margin: 0}
.kl-field-error{font-size: 14px;line-height: 22px;color: var(--danger);margin: 0;font-weight: 500}
.kl-disc{border-bottom: 1px solid var(--line)}
.kl-disc-btn{appearance: none;width: 100%;min-height: 64px;background: transparent;border: 0;color: var(--ink);cursor: pointer;display: flex;align-items: center;justify-content: space-between;gap: var(--space-16);
font-family: var(--font-sans);font-size: 22px;line-height: 28px;font-weight: 600;letter-spacing: -.01em;text-align: start;padding: 0}
.kl-disc-btn:focus-visible{outline: 2px solid var(--focus);outline-offset: 2px}
.kl-disc-btn svg{width: 20px;height: 20px;flex: none;transition: transform 200ms cubic-bezier(.4,0,.2,1)}
.kl-disc-btn[aria-expanded="true"] svg{transform: rotate(180deg)}
.kl-disc-body{padding: 0 0 var(--space-24);font-size: 16px;line-height: 26px;color: var(--ink);max-width: var(--measure)}
.kl-card{display: flex;flex-direction: column;gap: var(--space-12);color: var(--ink);text-decoration: none}
.kl-card:focus-visible{outline: 2px solid var(--focus);outline-offset: 4px}
.kl-card-well{position: relative;aspect-ratio: 4 / 5;background: var(--sand-sweep);overflow: hidden;border-radius: var(--radius-0)}
.kl-card--arch .kl-card-well{border-radius: var(--radius-full) var(--radius-full) var(--radius-0) var(--radius-0)}
.kl-card-well img{width: 100%;height: 100%;object-fit: cover;display: block;transition: transform 320ms cubic-bezier(.4,0,.2,1)}
.kl-card:hover .kl-card-well img{transform: scale(1.03)}
.kl-card-badge{position: absolute;top: var(--space-12);inset-inline-start: var(--space-12)}
.kl-card--arch .kl-card-badge{top: auto;bottom: var(--space-12)}
.kl-card-meta{display: flex;flex-direction: column;gap: 2px}
.kl-card-sku{font-family: var(--font-mono);font-size: 11px;line-height: 16px;font-weight: 500;letter-spacing: .04em;color: var(--ink-muted)}
.kl-card-name{font-size: 22px;line-height: 28px;font-weight: 600;letter-spacing: -.01em;margin: 0}
.kl-card:hover .kl-card-name{text-decoration: underline;text-decoration-thickness: 1.5px;text-underline-offset: 4px}
.kl-card-foot{display: flex;align-items: center;justify-content: space-between;gap: var(--space-12)}
.kl-card-dots{display: flex;align-items: center;gap: 4px;font-family: var(--font-mono);font-size: 11px;color: var(--ink-muted)}
.kl-card-dots i{width: 12px;height: 12px;border-radius: var(--radius-full);box-shadow: inset 0 0 0 1px var(--line-strong);display: block}
@media (prefers-reduced-motion: reduce){
.kl-btn, .kl-swatch-disc, .kl-disc-btn svg, .kl-card-well img{transition: none}
.kl-btn:active, .kl-card:hover .kl-card-well img{transform: none}
.kl-swatch[aria-checked="true"] .kl-swatch-disc{animation: none}
}
:lang(fa) .kl-btn, :lang(fa) .kl-badge, :lang(fa) .kl-swatches-legend, :lang(fa) .kl-spec dt, :lang(fa) .kl-disc-btn,
:lang(fa) .kl-card-name, :lang(fa) .kl-field label{letter-spacing: 0;text-transform: none}
:lang(fa) .kl-badge{font-family: var(--font-sans);font-size: 12px;font-weight: 600}
:lang(fa) .kl-swatches-legend, :lang(fa) .kl-spec dt{font-family: var(--font-sans);font-size: 13px;font-weight: 600}
:lang(fa) .kl-spec dd, :lang(fa) .kl-lead-detail{font-family: var(--font-sans);font-size: 15px}
:lang(fa) .kl-disc-body, :lang(fa) .kl-field input{line-height: 1.9}
[dir="rtl"] .kl-lead-glyph i{margin-inline-start: 0 !important}