/* Counter ordering: compact menu and a clearly separated order summary. */
.counter-layout { --counter-surface: #fff; --counter-subtle: var(--paper-100); --counter-border: var(--line-200); --counter-gap: clamp(.75rem, 1.4vw, 1.25rem); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); gap: var(--counter-gap); align-items: start; }
.counter-heading h1 { font-size: clamp(1.4rem, 1.7vw, 1.9rem); scroll-margin-top: calc(var(--topbar-height, var(--top-h)) + 1rem); }
.counter-catalog, .counter-basket { min-width: 0; border: 1px solid var(--counter-border); background: var(--counter-surface); border-radius: var(--radius); }
.counter-catalog-tools { padding: var(--space-card); border-bottom: 1px solid var(--counter-border); display: grid; gap: .75rem; }
.counter-search { display: flex; align-items: center; gap: .5rem; padding-inline: .75rem; background: var(--counter-subtle); border: 1px solid var(--counter-border); border-radius: var(--radius); color: var(--ink-600); }
.counter-search input { min-width: 0; width: 100%; border: 0; background: transparent; box-shadow: none; padding-inline: 0; }
.counter-categories { display: flex; flex-wrap: wrap; gap: .375rem; }
.counter-categories button { min-height: 40px; padding: .4rem .7rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink-600); font-size: var(--text-sm); }
.counter-categories button[aria-pressed=true] { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); font-weight: 600; }
.counter-categories button:hover:not(:disabled) { background: var(--counter-subtle); }
.counter-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .75rem; padding: var(--space-card); }
.counter-product { min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .625rem; border: 1px solid var(--counter-border); border-radius: var(--radius); background: var(--counter-surface); color: var(--ink-900); text-align: left; transition: border-color .15s ease-out, background-color .15s ease-out; }
.counter-product:hover:not(:disabled) { border-color: var(--brand-600); background: var(--brand-50); }
.counter-product:disabled { cursor: default; }
.counter-product:disabled img { opacity: .6; }
.counter-product img { width: clamp(3.5rem, 6vw, 5rem); aspect-ratio: 1; height: auto; object-fit: cover; flex: none; border-radius: calc(var(--radius) / 2); }
.counter-product-copy { display: grid; gap: .25rem; min-width: 0; flex: 1; }
.counter-product-copy > strong { font-size: var(--text-base); line-height: 1.35; overflow-wrap: anywhere; }
.counter-product-copy > small { color: var(--ink-600); font-size: var(--text-xs); }
.counter-product-price { display: flex; align-items: center; justify-content: space-between; gap: .25rem; color: var(--brand-700); font-weight: 600; }
.counter-add { display: grid; place-items: center; min-width: 1.7rem; min-height: 1.7rem; background: var(--brand-50); border-radius: 50%; }
.counter-add .icon { width: 1rem; height: 1rem; }
.counter-basket { position: sticky; top: calc(var(--topbar-height, var(--top-h)) + 1rem); padding: var(--space-card); }
.counter-basket-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.counter-basket-head h2 { margin: 0; font-size: clamp(1rem, 1.2vw, 1.2rem); }
.counter-creator { display: flex; gap: .5rem; align-items: flex-start; margin: .75rem 0 1rem; color: var(--ink-700); font-size: var(--text-sm); }
.counter-creator > span { display: grid; gap: .125rem; }
.counter-creator small { color: var(--ink-600); }
.counter-fields { min-width: 0; border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
.counter-mode { display: flex; width: 100%; }
.counter-mode button { flex: 1; justify-content: center; }
.counter-table .field { margin: 0; }
.counter-lines { display: grid; gap: .75rem; }
.counter-line { display: grid; gap: .3rem; padding-bottom: .6rem; border-bottom: 1px solid var(--counter-border); }
.counter-line-name { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
.counter-line-name > strong { font-size: var(--text-sm); }
.counter-line-name > small { color: var(--ink-600); font-size: var(--text-xs); }
.counter-line-controls { display: flex; align-items: center; justify-content: flex-end; gap: .15rem; }
.counter-line-controls > span { min-width: 1.8rem; text-align: center; font-variant-numeric: tabular-nums; }
.counter-line-controls .icon-button { width: 40px; min-width: 40px; min-height: 40px; height: 40px; }
.counter-line-controls [data-counter-remove] { margin-left: .5rem; color: var(--ink-600); }
.counter-field { display: grid; gap: .375rem; font-size: var(--text-sm); font-weight: 600; }
.counter-field textarea { min-width: 0; width: 100%; resize: vertical; font-weight: 400; }
.counter-payment { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: 0; margin: 0; border: 0; }
.counter-payment legend { margin-bottom: .5rem; font-size: var(--text-sm); font-weight: 600; }
.counter-payment-option { display: flex; align-items: flex-start; gap: .45rem; padding: .65rem .5rem; border: 1px solid var(--counter-border); border-radius: var(--radius); cursor: pointer; }
.counter-payment-option:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
.counter-payment-option input { flex: none; margin: .15rem 0 0; accent-color: var(--brand-600); }
.counter-payment-option > span { min-width: 0; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.counter-payment-option strong { font-size: var(--text-sm); font-weight: 600; }
.counter-payment-option small { font-size: var(--text-xs); color: var(--ink-600); }
.counter-payment-option.is-unavailable { cursor: default; background: var(--counter-subtle); color: var(--ink-600); }
.counter-checkout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--counter-border); }
.counter-checkout > span { display: grid; gap: .125rem; }
.counter-checkout > span small { color: var(--ink-600); font-size: var(--text-xs); }
.counter-checkout > span strong { font-size: clamp(1.2rem, 1.4vw, 1.5rem); }
.counter-checkout p { flex-basis: 100%; margin: 0; color: var(--ink-600); font-size: var(--text-xs); }
.counter-empty { padding: 1.25rem .5rem; color: var(--ink-600); font-size: var(--text-sm); text-align: center; }
.counter-products > .counter-empty { grid-column: 1 / -1; }
.counter-validation { color: var(--danger-700, #9c3028); font-size: var(--text-sm); }
.counter-recovery { align-items: center; flex-wrap: wrap; }
.counter-recovery > div { flex: 1 1 15rem; }
.counter-recovery p { margin-top: .25rem; }
.ticket-counter-source { display: flex; align-items: center; gap: .35rem; font-size: var(--text-xs); color: var(--ink-600); }
.ticket-counter-source .icon { width: 1rem; height: 1rem; }
.order-counter-source { font-size: var(--text-sm); }
.admin-app .dialog[data-key="product"] .detail-hero { aspect-ratio: 16 / 7; max-height: min(12rem, 28dvh); overflow: hidden; background: var(--paper-200); border-radius: var(--radius); }
.admin-app .dialog[data-key="product"] .detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.admin-app .dialog[data-key="product"] .detail-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.admin-app .dialog[data-key="product"] .detail-head .alt { color: var(--ink-600); font-size: var(--text-sm); }
.admin-app .dialog[data-key="product"] .detail-head .price { font-size: var(--text-xl); }
.admin-app .dialog[data-key="product"] .options { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.admin-app .dialog[data-key="product"] .qty-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.admin-app .dialog[data-key="product"] .foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.admin-app .dialog[data-key="product"] .foot-total { display: grid; gap: .25rem; margin-right: auto; }
.admin-app .dialog[data-key="product"] .foot-total small { color: var(--ink-600); font-size: var(--text-xs); }
.admin-app .dialog[data-key="product"] .foot-total strong { font-size: var(--text-xl); }
[data-theme="dark"] .counter-layout { --counter-surface: #211e1b; --counter-subtle: #2b2723; --counter-border: #49423a; }
@media (max-width: 1000px) { .counter-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, .9fr); } .counter-products { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .counter-layout { grid-template-columns: minmax(0, 1fr); }
  .counter-basket { position: static; }
  .counter-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; padding: .75rem; }
  .counter-product { display: grid; padding: .5rem; gap: .4rem; }
  .counter-product img { width: 100%; aspect-ratio: 1.7; max-height: 6.5rem; }
  .counter-product-copy > strong { font-size: var(--text-sm); }
  .counter-catalog-tools { padding: .75rem; }
  .counter-categories { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .counter-categories button { flex: none; }
  .counter-line { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
  .counter-line-controls .icon-button { min-width: 40px; width: 40px; height: 44px; min-height: 44px; }
  .counter-line-controls [data-counter-remove] { margin-left: 0; }
  .counter-line-controls > span { min-width: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .counter-product { transition: none; } }