/* Panel handlowca i sklep B2B – uzupełnienie app.css */

/* Wyszukiwarka na starcie */
.rep-search { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; }
.rep-search .icon-lg { color: var(--muted); }
.rep-search input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 18px; padding: 10px 0; background: transparent; color: var(--ink); }
.rep-search input:focus { outline: none; }
.rep-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91, 58, 46, .12); }

.client-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 14px; }

/* Narzędzia katalogu */
.catalog-tools { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.input-lg-search { min-height: 50px; font-size: 17px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .swatch { width: 12px; height: 12px; }

.loc-avail { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.loc-avail > span { display: inline-flex; gap: 5px; align-items: baseline; }

/* Karta modelu (handlowiec) */
.product-hero { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 32px; align-items: start; }
.product-hero-photo { aspect-ratio: 2 / 3; background: #F1ECE6; border-radius: var(--radius-lg); overflow: hidden; }
.product-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.product-hero-info .page-title { font-size: 40px; margin-top: 4px; }
.client-context { max-width: 520px; display: flex; flex-direction: column; gap: 8px; }

.variant-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.variant-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.variant-card + .variant-card { margin-top: 0; }
.variant-card:target { box-shadow: 0 0 0 2px var(--accent); }
.variant-card-head { display: flex; justify-content: space-between; gap: 8px 12px; align-items: flex-start; flex-wrap: wrap; }
.variant-card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.variant-card-price { display: flex; flex-direction: column; gap: 2px; flex: none; }
.size-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.size-chip { display: inline-flex; align-items: baseline; gap: 1px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; color: var(--ink-2); background: var(--cream); font-variant-numeric: tabular-nums; }
.size-chip small { color: var(--muted); font-size: 10.5px; }
.loc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.loc-cell { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; background: #FCFAF8; }
.loc-cell .avail { font-size: 20px; }
.loc-cell.is-locked { background: var(--danger-bg); border-color: #EBC1C4; }
.loc-name { font-size: 12px; color: var(--muted); }
.variant-actions > summary { list-style: none; width: fit-content; }
.variant-actions > summary::-webkit-details-marker { display: none; }
.variant-actions[open] > summary { background: var(--cream-2); }
.variant-form { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.variant-form .field:nth-child(n+5) { grid-column: auto; }
.variant-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }

/* Listy klientów */
.rep-list { list-style: none; margin: 0; padding: 4px 0; }
.rep-list a { display: flex; gap: 12px; align-items: center; padding: 10px 22px; color: var(--ink); text-decoration: none; }
.rep-list a:hover { background: var(--cream); }
.rep-list-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rep-list-main small { color: var(--muted); font-size: 12.5px; }
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.client-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.client-card + .client-card { margin-top: 0; }
.client-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.15; }
.client-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.client-meta strong { color: var(--ink); }

.big-check { width: 22px; height: 22px; accent-color: var(--accent); }
.stepper-sm button { width: 34px; font-size: 18px; }
.stepper-sm input { width: 52px; font-size: 15px; padding: 6px 0; }

.pay-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; background: var(--paper); }
.pay-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pay-option input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.pay-option span { display: flex; flex-direction: column; gap: 2px; }
.pay-option small { color: var(--muted); font-size: 13px; }

/* Postęp zamówienia */
.order-steps { list-style: none; margin: 0; padding: 16px 18px; display: flex; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.order-steps li { flex: 1; min-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; text-align: center; font-size: 13px; color: var(--faint); }
.order-steps li::before { content: ''; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--line); z-index: 0; }
.order-steps li:first-child::before { display: none; }
.order-steps li.is-done::before, .order-steps li.is-current::before { background: var(--accent); }
.step-dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--line-strong); font-weight: 600; font-size: 13px; color: var(--muted); }
.order-steps li.is-done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.order-steps li.is-current .step-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.order-steps li.is-done, .order-steps li.is-current { color: var(--ink); }
.order-steps li.is-current .step-label { font-weight: 600; }

/* ---------- Sklep B2B ---------- */
.shop-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.shop-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.shop-filters .field { min-width: 180px; }
.shop-filters .grow { flex: 1; min-width: 240px; }
.shop-product { display: grid; grid-template-columns: minmax(260px, 460px) minmax(0, 1fr); gap: 40px; align-items: start; }
.shop-product-photo { aspect-ratio: 2 / 3; background: #F1ECE6; overflow: hidden; position: sticky; top: 96px; }
.shop-product-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.shop-product h1 { font-family: var(--font-display); font-weight: 500; font-size: 46px; line-height: 1.02; margin: 6px 0 8px; }
.shop-variant { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.shop-variant:first-child { border-top: 1px solid var(--ink); }
.shop-variant-info { display: flex; flex-direction: column; gap: 5px; }
.shop-variant-buy { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.shop-variant .price { font-size: 24px; }
.shop-note { font-size: 13px; color: var(--muted); }
.thank-you { border: 1px solid var(--ok); background: var(--ok-bg); border-radius: var(--radius-lg); padding: 20px 22px; }
.thank-you h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; margin-bottom: 6px; color: var(--ink); }
.transfer-box { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin-top: 12px; font-size: 15px; }
.transfer-box dt { color: var(--muted); }
.transfer-box dd { margin: 0; font-weight: 600; }

.sticky-actions { position: sticky; bottom: 0; z-index: 5; }

@media (max-width: 760px) {
  .product-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .product-hero-photo { aspect-ratio: 4 / 5; max-height: 52vh; }
  .product-hero-info .page-title { font-size: 30px; }
  .variant-list { grid-template-columns: minmax(0, 1fr); }
  .variant-form { grid-template-columns: minmax(0, 1fr); }
  .variant-form-actions .btn { flex: 1; }
  .catalog-tools { padding: 12px; }
  .rep-search input { font-size: 16px; }
  .rep-search .btn { padding: 8px 12px; }
  .loc-avail { gap: 8px; }
  .sticky-actions { bottom: calc(60px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; }
  .sticky-actions .btn { width: 100%; }
  .order-steps { padding: 12px 8px; }
  .order-steps li { min-width: 74px; font-size: 11.5px; }
  .shop-product { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .shop-product-photo { position: static; aspect-ratio: 4 / 5; }
  .shop-product h1 { font-size: 34px; }
  .shop-variant { grid-template-columns: minmax(0, 1fr); }
  .shop-variant-buy { justify-content: flex-start; }
  .shop-filters .field, .shop-filters .grow { min-width: 0; flex: 1 1 100%; }
  .transfer-box { grid-template-columns: minmax(0, 1fr); }
  .table-cards td .variant-cell { min-width: 0; }
}

/* Cyfry wersalikowe w nagłówkach – czytelne numery zamówień */
.page-title, .shop-hero h1, .product-name, .client-name, .price { font-variant-numeric: lining-nums; }
.stack-lg > .card + .card, .stack-lg > section + section { margin-top: 0; }