/* Braknie UI 1.2.0 — framework-agnostic component library.
   Requires ../dist/tokens.css. Uses only --bk-* tokens (no raw colours), light and dark via the token file.
   Naming: .bk-<component>, modifiers .bk-<component>--<variant>, states via [aria-*], [disabled], :focus-visible. */

/* ---------- base ---------- */
.bk-root,.bk-root *{box-sizing:border-box}
.bk-root{font:var(--bk-font-body);color:var(--bk-color-fg);background:var(--bk-color-bg);-webkit-font-smoothing:antialiased}
.bk-root :focus-visible{outline:var(--bk-focus-ring);outline-offset:var(--bk-focus-offset)}
.bk-num{font-family:var(--bk-font-family-ui);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.bk-code{font-family:var(--bk-font-family-ui);font-weight:var(--bk-font-weight-medium);letter-spacing:.01em} /* order numbers, lot ids: proportional figures (standalone) */
.bk-eyebrow{font:var(--bk-font-overline);letter-spacing:var(--bk-font-overline-tracking);color:var(--bk-color-fg-3)}
.bk-stat{font:var(--bk-font-stat);font-size:var(--bk-font-stat-size-fluid);letter-spacing:var(--bk-font-stat-tracking)}
/* IBM Plex Mono only in developer documentation (token names, code blocks, hex values); never for figures in the product. */
.bk-doc-code{font:var(--bk-font-code)}
.bk-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bk-icon{width:var(--bk-icon-size-20);height:var(--bk-icon-size-20);flex:none;fill:none;stroke:currentColor;stroke-width:var(--bk-icon-stroke-20);stroke-linecap:round;stroke-linejoin:round}

/* ---------- button ---------- */
.bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--bk-button-gap);min-height:var(--bk-button-height);padding:0 var(--bk-button-padding-x);border:0;border-radius:var(--bk-button-radius);font:var(--bk-button-font);cursor:pointer;text-decoration:none;transition:transform var(--bk-button-duration) var(--bk-button-easing),background-color var(--bk-duration-state) var(--bk-ease-out);-webkit-tap-highlight-color:transparent}
.bk-btn:active{transform:scale(var(--bk-button-press-scale))}
.bk-btn .bk-icon{width:var(--bk-button-icon-size);height:var(--bk-button-icon-size)}
.bk-btn--cta{background:var(--bk-button-cta-bg);color:var(--bk-button-cta-fg)}
.bk-btn--cta:hover,.bk-btn--cta:active{background:var(--bk-button-cta-bg-pressed)}
.bk-btn--primary{background:var(--bk-button-primary-bg);color:var(--bk-button-primary-fg)}
.bk-btn--secondary{background:var(--bk-button-secondary-bg);color:var(--bk-button-secondary-fg);box-shadow:inset 0 0 0 1px var(--bk-color-line-input)}
.bk-btn--ghost{background:var(--bk-button-ghost-bg);color:var(--bk-button-ghost-fg)}
.bk-btn--icon{padding:0;width:var(--bk-icon-button-size);min-height:var(--bk-icon-button-size);border-radius:var(--bk-icon-button-radius);background:var(--bk-icon-button-bg);color:var(--bk-icon-button-fg)}
.bk-btn--kitchen{min-height:var(--bk-button-height-kitchen);font-size:var(--bk-font-size-17)}
.bk-btn--block{display:flex;width:100%}
.bk-btn[disabled],.bk-btn[aria-disabled="true"]{background:var(--bk-button-disabled-bg);color:var(--bk-button-disabled-fg);box-shadow:none;cursor:not-allowed;transform:none}
.bk-btn[aria-busy="true"]{position:relative;color:transparent;pointer-events:none}
.bk-btn[aria-busy="true"]::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid var(--bk-color-fg-3);border-right-color:transparent;animation:bk-spin var(--bk-duration-spin) var(--bk-ease-spin) infinite}
@keyframes bk-spin{to{transform:rotate(360deg)}}

/* ---------- field, input, select, textarea ---------- */
.bk-field{display:flex;flex-direction:column;gap:var(--bk-input-label-gap)}
.bk-label{font:var(--bk-input-label-font);color:var(--bk-color-fg)}
.bk-hint{font:var(--bk-input-hint-font);color:var(--bk-input-hint-fg)}
.bk-hint--error{color:var(--bk-input-error-fg)}
.bk-input{display:flex;align-items:center;gap:var(--bk-input-gap);min-height:var(--bk-input-height);padding:0 var(--bk-input-padding-x);border-radius:var(--bk-input-radius);background:var(--bk-input-bg);color:var(--bk-input-fg);box-shadow:inset 0 0 0 1.5px var(--bk-color-line-input);font:var(--bk-input-font);transition:box-shadow var(--bk-duration-state) var(--bk-ease-out)}
.bk-input input,.bk-input textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:inherit;padding:0}
.bk-input input::placeholder,.bk-input textarea::placeholder{color:var(--bk-input-placeholder)}
.bk-input:focus-within{background:var(--bk-input-bg-focus);box-shadow:inset 0 0 0 2px var(--bk-color-fg)}
.bk-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--bk-color-err-fg)}
.bk-input .bk-icon{width:var(--bk-input-icon-size);height:var(--bk-input-icon-size);color:var(--bk-color-fg-3)}
.bk-input--area{align-items:flex-start;padding-block:var(--bk-space-3);min-height:var(--bk-input-textarea-min-height)}
.bk-input--area textarea{resize:vertical;min-height:calc(var(--bk-input-textarea-min-height) - 2 * var(--bk-space-3))}
.bk-input.is-disabled{opacity:var(--bk-opacity-disabled)}
/* select: native element, own chevron 12 px from the edge (never the browser arrow on the border) */
.bk-select{position:relative;display:block}
.bk-select select{appearance:none;-webkit-appearance:none;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;min-height:var(--bk-input-height);padding:0 calc(var(--bk-input-padding-x) + 24px) 0 var(--bk-input-padding-x);border:0;border-radius:var(--bk-input-radius);background:var(--bk-input-bg);color:var(--bk-input-fg);box-shadow:inset 0 0 0 1.5px var(--bk-color-line-input);font:var(--bk-input-font);cursor:pointer}
.bk-select select:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--bk-color-fg)}
.bk-select::after{content:"";position:absolute;right:var(--bk-input-padding-x);top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;background:var(--bk-color-fg-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* ---------- checkbox, radio, toggle ---------- */
.bk-check{display:flex;gap:var(--bk-space-3);align-items:flex-start;font:var(--bk-checkbox-label-font);cursor:pointer;min-height:var(--bk-touch-target);padding-block:calc((var(--bk-touch-target) - var(--bk-checkbox-size)) / 2 - 2px)}
.bk-check input{appearance:none;-webkit-appearance:none;flex:none;width:var(--bk-checkbox-size);height:var(--bk-checkbox-size);margin:1px 0 0;border-radius:var(--bk-checkbox-radius);box-shadow:inset 0 0 0 1.5px var(--bk-color-line-input);background:var(--bk-color-surface);display:grid;place-items:center;cursor:pointer}
.bk-check input:checked{background:var(--bk-checkbox-bg-checked);box-shadow:none}
.bk-check input:checked::after{content:"";width:12px;height:12px;background:var(--bk-checkbox-mark);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.bk-check input[type=radio]{border-radius:50%}
.bk-check input[type=radio]:checked{background:var(--bk-color-surface);box-shadow:inset 0 0 0 var(--bk-radio-dot-inset) var(--bk-radio-checked)}
.bk-check input[type=radio]:checked::after{content:none}
.bk-check small{display:block;font:var(--bk-font-caption);color:var(--bk-color-fg-3);margin-top:2px}
.bk-toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--bk-space-3);min-height:var(--bk-touch-target);cursor:pointer}
.bk-toggle input{appearance:none;-webkit-appearance:none;flex:none;width:var(--bk-toggle-width);height:var(--bk-toggle-height);border-radius:var(--bk-radius-pill);background:var(--bk-toggle-track-off);position:relative;cursor:pointer;transition:background-color var(--bk-toggle-duration) var(--bk-ease-out)}
.bk-toggle input::after{content:"";position:absolute;top:var(--bk-toggle-knob-inset);left:var(--bk-toggle-knob-inset);width:var(--bk-toggle-knob-size);height:var(--bk-toggle-knob-size);border-radius:50%;background:var(--bk-toggle-knob);box-shadow:var(--bk-toggle-knob-shadow);transition:transform var(--bk-toggle-duration) var(--bk-ease-out)}
.bk-toggle input:checked{background:var(--bk-toggle-track-on)}
.bk-toggle input:checked::after{transform:translateX(calc(var(--bk-toggle-width) - var(--bk-toggle-knob-size) - 2 * var(--bk-toggle-knob-inset)))}

/* ---------- stepper, segmented, chip, badge ---------- */
.bk-stepper{display:inline-flex;align-items:center;border-radius:var(--bk-radius-control);background:var(--bk-color-surface-2)}
.bk-stepper button{border:0;background:transparent;color:var(--bk-color-fg);width:var(--bk-touch-target);height:var(--bk-touch-target);display:grid;place-items:center;cursor:pointer;border-radius:var(--bk-radius-control)}
.bk-stepper button[disabled]{color:var(--bk-color-fg-3);cursor:not-allowed}
.bk-stepper output{min-width:88px;text-align:center;font:var(--bk-font-num-lg);font-variant-numeric:tabular-nums}
.bk-segmented{display:inline-flex;gap:var(--bk-segmented-gap);padding:var(--bk-segmented-padding);border-radius:var(--bk-segmented-radius);background:var(--bk-segmented-bg)}
.bk-segmented button{border:0;background:transparent;color:var(--bk-segmented-fg);min-height:calc(var(--bk-segmented-height) - 2 * var(--bk-segmented-padding));padding:0 var(--bk-space-3);border-radius:var(--bk-segmented-radius);font:var(--bk-segmented-font);cursor:pointer;white-space:nowrap}
.bk-segmented button[aria-pressed="true"],.bk-segmented button[aria-selected="true"]{background:var(--bk-segmented-bg-selected);color:var(--bk-segmented-fg-selected);box-shadow:var(--bk-segmented-shadow-selected)}
.bk-segmented--block{display:flex}.bk-segmented--block button{flex:1}
.bk-chip{display:inline-flex;align-items:center;gap:var(--bk-chip-gap);height:var(--bk-chip-height);padding:0 var(--bk-chip-padding-x);border-radius:var(--bk-chip-radius);border:0;background:var(--bk-chip-bg);color:var(--bk-chip-fg);font:var(--bk-chip-font);cursor:pointer;white-space:nowrap}
.bk-chip[aria-pressed="true"],.bk-chip[aria-checked="true"]{background:var(--bk-chip-bg-selected);color:var(--bk-chip-fg-selected)}
.bk-chip .bk-dot{width:var(--bk-haccp-dot-size);height:var(--bk-haccp-dot-size);border-radius:50%}
.bk-badge{display:inline-flex;align-items:center;gap:var(--bk-badge-gap);padding:var(--bk-badge-padding-y) var(--bk-badge-padding-end) var(--bk-badge-padding-y) var(--bk-badge-padding-start);border-radius:var(--bk-badge-radius);background:var(--bk-badge-bg);color:var(--bk-badge-fg);font:var(--bk-badge-font);white-space:nowrap}
.bk-badge--ok{background:var(--bk-color-ok-bg);color:var(--bk-color-ok-fg)}
.bk-badge--warn{background:var(--bk-color-warn-bg);color:var(--bk-color-warn-fg)}
.bk-badge--err{background:var(--bk-color-err-bg);color:var(--bk-color-err-fg)}
.bk-badge--brand{background:var(--bk-color-brand);color:var(--bk-color-on-brand)}
.bk-dot--fish{background:var(--bk-color-cat-fish)}.bk-dot--meat{background:var(--bk-color-cat-meat)}.bk-dot--veg{background:var(--bk-color-cat-veg)}.bk-dot--poultry{background:var(--bk-color-cat-poultry)}.bk-dot--ready{background:var(--bk-color-cat-ready)}
.bk-dot--dairy{background:var(--bk-color-cat-dairy);box-shadow:inset 0 0 0 var(--bk-haccp-dot-ring-width) var(--bk-color-cat-dairy-ring)}

/* ---------- status ring (SVG inside: 24 viewBox, circle r 8, stroke 3) ---------- */
.bk-status{display:inline-flex;width:var(--bk-status-ring-size-badge);height:var(--bk-status-ring-size-badge);flex:none}
.bk-status svg{width:100%;height:100%;fill:none;stroke-width:3;stroke-linecap:butt}
.bk-status .ink{stroke:var(--bk-status-ring-ink)}.bk-status .acc{stroke:var(--bk-status-ring-accent)}
.bk-status--searching svg{animation:bk-spin var(--bk-duration-spin) var(--bk-ease-spin) infinite}

/* ---------- card, kv, banner, kpi ---------- */
.bk-card{background:var(--bk-card-bg);border-radius:var(--bk-card-radius);box-shadow:inset 0 0 0 1px var(--bk-color-line);padding:var(--bk-card-padding);display:flex;flex-direction:column;gap:var(--bk-space-2)}
.bk-card[aria-selected="true"],.bk-card.is-selected{box-shadow:inset 0 0 0 2px var(--bk-color-fg)}
.bk-card.is-new{box-shadow:inset 0 0 0 1.5px var(--bk-color-brand)}
.bk-card--floating{box-shadow:var(--bk-card-shadow-floating),inset 0 0 0 1px var(--bk-color-line)}
.bk-kv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--bk-space-3);font:var(--bk-font-body-sm)}
.bk-kv>:first-child{color:var(--bk-color-fg-2)}
.bk-kv--sum{padding-top:var(--bk-space-2);box-shadow:inset 0 1px 0 var(--bk-color-line);font-weight:var(--bk-font-weight-semibold)}
.bk-kv--sum>:first-child{color:var(--bk-color-fg)}
.bk-banner{display:flex;gap:var(--bk-space-2);align-items:flex-start;padding:var(--bk-banner-padding-y) var(--bk-banner-padding-x);border-radius:var(--bk-banner-radius);background:var(--bk-banner-info-bg);color:var(--bk-banner-info-fg);font:var(--bk-banner-font)}
.bk-banner .bk-icon{width:var(--bk-banner-icon-size);height:var(--bk-banner-icon-size);margin-top:1px}
.bk-banner--ok{background:var(--bk-banner-ok-bg);color:var(--bk-banner-ok-fg)}
.bk-banner--warn{background:var(--bk-banner-warn-bg);color:var(--bk-banner-warn-fg)}
.bk-banner--err{background:var(--bk-banner-err-bg);color:var(--bk-banner-err-fg)}
.bk-kpi{background:var(--bk-kpi-bg);border-radius:var(--bk-kpi-radius);box-shadow:inset 0 0 0 1px var(--bk-color-line);padding:var(--bk-kpi-padding);display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-kpi b{font:var(--bk-kpi-value-font);letter-spacing:var(--bk-kpi-value-font-tracking)}
.bk-kpi span{font:var(--bk-kpi-label-font);color:var(--bk-kpi-label-fg)}
.bk-kpi.is-attention{box-shadow:inset 0 0 0 1.5px var(--bk-color-brand)}

/* ---------- market: lot row, offer card, countdown ---------- */
.bk-lot{display:grid;grid-template-columns:var(--bk-lot-row-tile-size) minmax(0,1fr) auto;gap:var(--bk-lot-row-gap);align-items:center;padding:var(--bk-lot-row-padding);border-radius:var(--bk-lot-row-radius);background:var(--bk-color-surface);box-shadow:inset 0 0 0 1px var(--bk-color-line);color:inherit;text-decoration:none}
.bk-lot__tile{position:relative;width:var(--bk-lot-row-tile-size);height:var(--bk-lot-row-tile-size);border-radius:var(--bk-lot-row-tile-radius);background:var(--bk-lot-row-tile-bg);display:grid;place-items:center}
.bk-lot__tile .bk-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px var(--bk-color-surface)}
.bk-lot__name{font:var(--bk-lot-row-name-font);display:block}
.bk-lot__meta{font:var(--bk-lot-row-meta-font);color:var(--bk-lot-row-meta-fg);display:flex;flex-wrap:wrap;gap:6px}
.bk-lot__price{text-align:right;font:var(--bk-lot-row-price-font)}
.bk-lot__price small{display:block;font:var(--bk-font-caption);color:var(--bk-color-fg-3)}
.bk-lot.is-unavailable{opacity:var(--bk-opacity-unavailable)}
.bk-offer{display:flex;flex-direction:column;gap:var(--bk-space-2);padding:var(--bk-space-3);border-radius:var(--bk-radius-md);border:0;background:var(--bk-color-surface);box-shadow:inset 0 0 0 1px var(--bk-color-line);text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer}
.bk-offer[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--bk-color-fg)}
.bk-offer.is-expired{opacity:var(--bk-opacity-expired);cursor:default}
.bk-offer__top{display:flex;justify-content:space-between;align-items:center;gap:var(--bk-space-2)}
.bk-offer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bk-space-2)}
.bk-offer__grid span{display:flex;flex-direction:column;min-width:0;font:var(--bk-font-caption);color:var(--bk-color-fg-3)}
.bk-offer__grid b{font:600 15px/1.3 var(--bk-font-family-ui);font-variant-numeric:tabular-nums;color:var(--bk-color-fg);white-space:nowrap}
.bk-countdown{position:relative;width:120px;height:120px;display:grid;place-items:center}
.bk-countdown svg{position:absolute;inset:0;transform:rotate(-90deg)}
.bk-countdown circle{fill:none;stroke-width:6}
.bk-countdown .track{stroke:var(--bk-color-line-2)}.bk-countdown .bar{stroke:var(--bk-color-brand);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.bk-countdown output{font:var(--bk-countdown-font);font-variant-numeric:tabular-nums}

/* ---------- list row, table, empty, skeleton, progress ---------- */
.bk-row{display:flex;align-items:center;gap:var(--bk-list-row-gap);min-height:var(--bk-list-row-height);padding:0 var(--bk-list-row-padding);border-radius:var(--bk-list-row-radius);background:var(--bk-list-row-bg);box-shadow:inset 0 0 0 1px var(--bk-color-line);color:inherit;text-decoration:none}
.bk-row>div{flex:1;min-width:0;display:flex;flex-direction:column}
.bk-row small{font:var(--bk-font-caption);color:var(--bk-color-fg-3)}
.bk-row[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--bk-color-fg)}
.bk-table-wrap{overflow-x:auto;border-radius:var(--bk-table-radius);background:var(--bk-table-bg);box-shadow:inset 0 0 0 1px var(--bk-color-line)}
.bk-table{width:100%;border-collapse:collapse;font:var(--bk-font-body-sm)}
.bk-table th{position:sticky;top:0;background:var(--bk-color-surface-2);text-align:left;font:var(--bk-table-header-font);letter-spacing:var(--bk-table-header-font-tracking);color:var(--bk-table-header-fg);padding:10px var(--bk-table-cell-padding-x);white-space:nowrap}
.bk-table td{height:var(--bk-table-row-height);padding:0 var(--bk-table-cell-padding-x);box-shadow:inset 0 1px 0 var(--bk-table-row-divider);white-space:nowrap}
.bk-table td.bk-num,.bk-table th.bk-num{text-align:right}
.bk-table tr.is-warn td{background:var(--bk-table-row-warn-bg)}
.bk-table tr[aria-selected="true"] td{background:var(--bk-color-surface-2)}
.bk-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--bk-space-2);padding:var(--bk-empty-state-padding);border-radius:var(--bk-empty-state-radius);background:var(--bk-empty-state-bg)}
.bk-empty .bk-icon{width:var(--bk-empty-state-icon-size);height:var(--bk-empty-state-icon-size)}
.bk-empty b{font:var(--bk-font-h4)}
.bk-empty p{margin:0;font:var(--bk-font-body-sm);color:var(--bk-color-fg-2)}
.bk-skeleton{display:block;border-radius:var(--bk-skeleton-radius);background:linear-gradient(90deg,var(--bk-skeleton-base) 0 40%,var(--bk-skeleton-highlight) 50%,var(--bk-skeleton-base) 60% 100%) 0 0/300% 100%;animation:bk-shimmer var(--bk-skeleton-duration) var(--bk-skeleton-easing) infinite;min-height:12px}
@keyframes bk-shimmer{from{background-position:100% 0}to{background-position:0 0}}
.bk-progress{display:flex;gap:var(--bk-progress-gap)}
.bk-progress i{flex:1;height:var(--bk-progress-segment-height);border-radius:var(--bk-progress-radius);background:var(--bk-progress-todo)}
.bk-progress i.done{background:var(--bk-progress-done)}.bk-progress i.current{background:var(--bk-progress-current)}

/* ---------- OTP ---------- */
.bk-otp{display:flex;gap:var(--bk-otp-gap)}
.bk-otp input{width:100%;min-width:0;height:var(--bk-otp-cell-height);border:0;border-radius:var(--bk-otp-cell-radius);background:var(--bk-color-surface-2);box-shadow:inset 0 0 0 1.5px var(--bk-color-line-input);text-align:center;font:var(--bk-otp-font);font-variant-numeric:tabular-nums;color:var(--bk-color-fg)}
.bk-otp input:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--bk-color-focus)}

/* ---------- overlays: toast, sheet, dialog, tooltip ---------- */
.bk-toast{display:flex;align-items:center;gap:var(--bk-toast-gap);padding:var(--bk-toast-padding-y) var(--bk-toast-padding-x);border-radius:var(--bk-toast-radius);background:var(--bk-toast-bg);color:var(--bk-toast-fg);font:var(--bk-toast-font);z-index:var(--bk-z-index-toast)}
.bk-toast .bk-icon{width:var(--bk-toast-icon-size);height:var(--bk-toast-icon-size)}
.bk-toast button{margin-left:auto;border:0;background:transparent;color:inherit;font:inherit;font-weight:var(--bk-font-weight-semibold);text-decoration:underline;cursor:pointer;min-height:var(--bk-touch-target)}
.bk-scrim{position:fixed;inset:0;background:var(--bk-sheet-overlay);z-index:var(--bk-z-index-overlay)}
.bk-sheet{background:var(--bk-sheet-bg);border-radius:var(--bk-sheet-radius) var(--bk-sheet-radius) 0 0;padding:var(--bk-sheet-padding-top) var(--bk-sheet-padding-x) var(--bk-sheet-padding-bottom);display:flex;flex-direction:column;gap:var(--bk-space-3);max-height:calc(var(--bk-sheet-max-height-ratio) * 100dvh);overflow:auto;z-index:var(--bk-z-index-sheet)}
.bk-sheet::before{content:"";align-self:center;width:var(--bk-sheet-grabber-width);height:var(--bk-sheet-grabber-height);border-radius:var(--bk-radius-pill);background:var(--bk-sheet-grabber)}
.bk-dialog{background:var(--bk-dialog-bg);border-radius:var(--bk-dialog-radius);padding:var(--bk-dialog-padding);box-shadow:var(--bk-dialog-shadow);display:flex;flex-direction:column;gap:var(--bk-space-3);max-width:420px;border:0;color:var(--bk-color-fg)}
.bk-dialog::backdrop{background:var(--bk-dialog-overlay)}
.bk-dialog h2{margin:0;font:var(--bk-dialog-title-font)}
.bk-dialog p{margin:0;font:var(--bk-dialog-body-font);color:var(--bk-color-fg-2)}
.bk-tooltip{position:relative;display:inline-flex}
.bk-tooltip [role=tooltip]{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:6px 10px;border-radius:var(--bk-radius-sm);background:var(--bk-color-inverse-bg);color:var(--bk-color-inverse-fg);font:var(--bk-font-caption);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--bk-duration-state) var(--bk-ease-out)}
.bk-tooltip:hover [role=tooltip],.bk-tooltip:focus-within [role=tooltip]{opacity:1}

/* ---------- navigation: appbar, tabbar, rail, tabs, avatar, fab ---------- */
.bk-appbar{display:flex;align-items:center;justify-content:space-between;gap:var(--bk-space-2);min-height:var(--bk-header-height);padding:0 var(--bk-space-3);background:var(--bk-color-bg);position:sticky;top:0;z-index:var(--bk-z-index-sticky)}
.bk-appbar h1{margin:0;font:var(--bk-header-title-font);flex:1;text-align:center}
.bk-appbar--large h1{font:var(--bk-header-large-title-font);text-align:left}
.bk-tabbar{display:grid;grid-template-columns:repeat(var(--bk-tabbar-tabs),1fr);gap:var(--bk-tabbar-gap);min-height:var(--bk-tabbar-height);padding:var(--bk-tabbar-padding-top) var(--bk-space-2) max(var(--bk-space-3),env(safe-area-inset-bottom));background:var(--bk-tabbar-bg);box-shadow:inset 0 1px 0 var(--bk-tabbar-divider)}
.bk-tabbar a,.bk-tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:var(--bk-tabbar-fg);font:var(--bk-tabbar-label-font);text-decoration:none;cursor:pointer;min-height:var(--bk-touch-target)}
.bk-tabbar .bk-icon{width:var(--bk-tabbar-icon-size);height:var(--bk-tabbar-icon-size)}
.bk-tabbar [aria-current="page"]{color:var(--bk-tabbar-fg-active)}
.bk-tabbar [aria-current="page"] .bk-piece{stroke:var(--bk-tabbar-accent-active)}
.bk-rail{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--bk-rail-width);padding:var(--bk-space-3) 0;background:var(--bk-rail-bg);box-shadow:inset -1px 0 0 var(--bk-color-line)}
.bk-rail a{position:relative;width:var(--bk-rail-item-size);height:var(--bk-rail-item-size);border-radius:var(--bk-rail-item-radius);display:grid;place-items:center;color:var(--bk-rail-fg)}
.bk-rail a[aria-current="page"]{background:var(--bk-rail-bg-active);color:var(--bk-rail-fg-active)}
.bk-rail .bk-count{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--bk-radius-pill);background:var(--bk-rail-counter-bg);color:var(--bk-rail-counter-fg);font:var(--bk-font-micro);display:grid;place-items:center}
.bk-avatar{width:36px;height:36px;border-radius:var(--bk-radius-sm);background:var(--bk-color-surface-2);display:grid;place-items:center;font:var(--bk-font-label);color:var(--bk-color-fg-2);flex:none}
.bk-fab{position:fixed;right:var(--bk-space-4);bottom:calc(var(--bk-tabbar-height) + var(--bk-space-4));display:inline-flex;align-items:center;gap:var(--bk-space-2);min-height:var(--bk-fab-size-collapsed);padding:0 var(--bk-space-4);border:0;border-radius:var(--bk-radius-pill);background:var(--bk-fab-bg);color:var(--bk-fab-fg);font:var(--bk-button-font);box-shadow:var(--bk-fab-shadow);cursor:pointer;z-index:var(--bk-z-index-raised)}
.bk-photo{width:var(--bk-photo-tile-size);height:var(--bk-photo-tile-size);border-radius:var(--bk-photo-tile-radius);background:var(--bk-color-surface-2);box-shadow:inset 0 0 0 1.5px var(--bk-photo-tile-border-add);display:grid;place-items:center;color:var(--bk-color-fg-3)}
.bk-photo.is-error{box-shadow:inset 0 0 0 2px var(--bk-photo-tile-border-error)}
.bk-slider{width:100%;accent-color:var(--bk-slider-fill);height:var(--bk-touch-target)}

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion:reduce){.bk-root *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bk-btn:active{transform:none}}

/* ---------- goods colours and product illustrations (1.1.0) ---------- */
/* .bk-goods--<key> sets the category colours; .bk-illo is a tile with an illustration from design-system/illustrations */
.bk-goods{--bk-g-tile:var(--bk-color-surface-2);--bk-g-shape:var(--bk-color-fg-3);--bk-g-ink:var(--bk-color-fg)}
.bk-goods--ryby{--bk-g-tile:var(--bk-color-goods-ryby-tile);--bk-g-shape:var(--bk-color-goods-ryby-shape);--bk-g-ink:var(--bk-color-goods-ryby-ink)}
.bk-goods--morze{--bk-g-tile:var(--bk-color-goods-morze-tile);--bk-g-shape:var(--bk-color-goods-morze-shape);--bk-g-ink:var(--bk-color-goods-morze-ink)}
.bk-goods--mieso{--bk-g-tile:var(--bk-color-goods-mieso-tile);--bk-g-shape:var(--bk-color-goods-mieso-shape);--bk-g-ink:var(--bk-color-goods-mieso-ink)}
.bk-goods--drob{--bk-g-tile:var(--bk-color-goods-drob-tile);--bk-g-shape:var(--bk-color-goods-drob-shape);--bk-g-ink:var(--bk-color-goods-drob-ink)}
.bk-goods--warzywa{--bk-g-tile:var(--bk-color-goods-warzywa-tile);--bk-g-shape:var(--bk-color-goods-warzywa-shape);--bk-g-ink:var(--bk-color-goods-warzywa-ink)}
.bk-goods--owoce{--bk-g-tile:var(--bk-color-goods-owoce-tile);--bk-g-shape:var(--bk-color-goods-owoce-shape);--bk-g-ink:var(--bk-color-goods-owoce-ink)}
.bk-goods--nabial{--bk-g-tile:var(--bk-color-goods-nabial-tile);--bk-g-shape:var(--bk-color-goods-nabial-shape);--bk-g-ink:var(--bk-color-goods-nabial-ink)}
.bk-goods--pieczywo{--bk-g-tile:var(--bk-color-goods-pieczywo-tile);--bk-g-shape:var(--bk-color-goods-pieczywo-shape);--bk-g-ink:var(--bk-color-goods-pieczywo-ink)}
.bk-goods--suche{--bk-g-tile:var(--bk-color-goods-suche-tile);--bk-g-shape:var(--bk-color-goods-suche-shape);--bk-g-ink:var(--bk-color-goods-suche-ink)}
.bk-goods--napoje{--bk-g-tile:var(--bk-color-goods-napoje-tile);--bk-g-shape:var(--bk-color-goods-napoje-shape);--bk-g-ink:var(--bk-color-goods-napoje-ink)}
.bk-goods--kawa{--bk-g-tile:var(--bk-color-goods-kawa-tile);--bk-g-shape:var(--bk-color-goods-kawa-shape);--bk-g-ink:var(--bk-color-goods-kawa-ink)}
.bk-goods--chemia{--bk-g-tile:var(--bk-color-goods-chemia-tile);--bk-g-shape:var(--bk-color-goods-chemia-shape);--bk-g-ink:var(--bk-color-goods-chemia-ink)}
.bk-goods--opak{--bk-g-tile:var(--bk-color-goods-opak-tile);--bk-g-shape:var(--bk-color-goods-opak-shape);--bk-g-ink:var(--bk-color-goods-opak-ink)}
.bk-illo{display:grid;place-items:center;border-radius:var(--bk-radius-lg);background:var(--bk-g-tile,var(--bk-color-surface-2));aspect-ratio:1;flex:none}
.bk-illo svg{width:82%;height:82%}
.bk-illo--sm{width:var(--bk-lot-row-tile-size);height:var(--bk-lot-row-tile-size);border-radius:16px}
.bk-illo--md{width:72px;height:72px;border-radius:22px}
.bk-cat-chip{display:inline-flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;font:var(--bk-font-caption);color:var(--bk-color-fg-2);cursor:pointer}
.bk-cat-chip .bk-illo{width:64px;height:64px;border-radius:20px}
.bk-cat-chip[aria-pressed="true"] .bk-illo{box-shadow:inset 0 0 0 2px var(--bk-color-fg)}
.bk-cat-chip[aria-pressed="true"]{color:var(--bk-color-fg);font-weight:var(--bk-font-weight-semibold)}
.bk-icon--goods .bk-piece,.bk-icon--goods .pk{stroke:var(--bk-g-shape)}
.bk-lot .bk-illo{width:var(--bk-lot-row-tile-size);height:var(--bk-lot-row-tile-size);border-radius:16px}