/* =========================================================================
   DUAL · order.css — Phase 5 ordering / inquiry flow
   Cart page (korpa) · Checkout / inquiry (porudzbina) · Confirmation (potvrda)
   · Status pills · Account orders list + detail · Print sheet
   Reuses tokens.css + base.css + components.css + auth.css. No new aesthetic.
   ========================================================================= */

/* ====================================================================== *
   1) ORDER PAGE LAYOUT (shared chrome for korpa / porudzbina / potvrda)
 * ====================================================================== */

.order-page {
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  padding-top: calc(var(--nav-h-compact) + clamp(1.5rem, 1rem + 2vw, 3rem));
  min-height: calc(var(--vh, 1vh) * 100);
  background: var(--bg-tint);
}

.order-page__head {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.order-page__eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: var(--s-2);
}
.order-page__h {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink-900);
}
.order-page__sub {
  margin-top: var(--s-3);
  color: var(--ink-600);
  font-size: var(--fs-base);
  max-width: 60ch;
}

/* Two-column grid: main content + sticky summary panel */
.order-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--s-6);
  align-items: start;
}
@media (max-width: 1040px) {
  .order-grid { grid-template-columns: 1fr; }
}

.order-main {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
}
@media (max-width: 600px) { .order-main { padding: var(--s-4); } }

.order-aside {
  position: sticky;
  top: calc(var(--nav-h-compact) + var(--s-5));
}
@media (max-width: 1040px) {
  .order-aside { position: static; }
}

/* ====================================================================== *
   2) CART PAGE — line items table + stacked mobile cards
 * ====================================================================== */

.cart-table {
  width: 100%;
  border-collapse: collapse;
}
.cart-table thead th {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-700);
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.cart-table thead th:last-child { text-align: right; }
.cart-table thead th.col-qty,
.cart-table thead th.col-price,
.cart-table thead th.col-line { text-align: right; }

.cart-table tbody tr {
  border-bottom: 1px solid var(--line);
}
.cart-table tbody tr:last-child { border-bottom: 0; }

.cart-table td {
  padding: var(--s-4) var(--s-3);
  vertical-align: middle;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.cart-table td.col-qty,
.cart-table td.col-price,
.cart-table td.col-line { text-align: right; }
.cart-table td.col-remove { text-align: right; width: 36px; }

.cart-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}
.cart-item__media {
  flex-shrink: 0;
  width: 64px; height: 64px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; }

.cart-item__body { min-width: 0; }
.cart-item__name {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: block;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 38ch;
}
.cart-item__name:hover { color: var(--red-600); }
.cart-item__sku {
  display: block;
  margin-top: 4px;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  letter-spacing: 0.04em;
}

/* Cart qty stepper (shared with cart drawer) — compact */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  background: #fff;
}
.qty-stepper button {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-base);
  color: var(--ink-700);
  transition: background var(--t-fast) var(--ease-out);
}
.qty-stepper button:hover { background: var(--bg-tint); }
.qty-stepper input {
  width: 44px;
  height: 32px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: #fff;
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.unit-price,
.line-total {
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  color: var(--ink-900);
  white-space: nowrap;
}
.line-total { font-weight: 500; }
.price-ask {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--ink-600);
  text-transform: uppercase;
}

.cart-remove {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-full);
  color: var(--ink-400);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.cart-remove:hover { color: var(--red-600); background: var(--bg-tint); }
.cart-remove svg { width: 16px; height: 16px; }

/* Stacked mobile cards (the same data, restyled below 720px) */
@media (max-width: 720px) {
  .cart-table thead { display: none; }
  .cart-table tbody tr { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .cart-table td { display: block; padding: 0; text-align: left !important; }
  .cart-table td.col-product { margin-bottom: var(--s-3); }
  .cart-table td.col-qty,
  .cart-table td.col-price,
  .cart-table td.col-line,
  .cart-table td.col-remove {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2px 0;
  }
  .cart-table td.col-qty::before { content: "Količina"; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-600); }
  .cart-table td.col-price::before { content: "Cena"; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-600); }
  .cart-table td.col-line::before { content: "Ukupno"; font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-600); }
  .cart-item__name { max-width: none; white-space: normal; }
  .cart-item__media { width: 56px; height: 56px; }
  .col-remove { justify-content: flex-end !important; }
}

/* Footer of cart-main: secondary actions row */
.cart-actions {
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cart-actions__left {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.cart-actions__left a {
  color: var(--ink-700);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cart-actions__left a:hover { color: var(--ink-900); border-bottom-color: currentColor; }

/* Clear-cart inline confirm */
.cart-clear {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  transition: color var(--t-fast) var(--ease-out);
}
.cart-clear:hover { color: var(--red-600); }
.cart-clear[data-confirming="true"] {
  color: var(--red-600);
}
.cart-clear[data-confirming="true"]::after {
  content: " · siguran?";
  color: var(--red-600);
}

/* ====================================================================== *
   3) SUMMARY PANEL (cart-page + checkout)
 * ====================================================================== */

.summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.summary::before {
  /* signal-wave whisper across the top edge */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--signal);
  opacity: 0.85;
}

.summary__eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: var(--s-3);
}
.summary__h {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin-bottom: var(--s-5);
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.summary__row:first-of-type { padding-top: 0; }
.summary__row--ask { color: var(--ink-400); }
.summary__row .mono { font-family: var(--ff-mono); }
.summary__row--total {
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink-900);
  border-bottom: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--ink-900);
}
.summary__row--total span:last-child { font-family: var(--ff-mono); font-weight: 600; }

.summary__note {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-600);
  line-height: 1.55;
}

.summary__actions {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.summary__cont {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
}
.summary__cont a { color: var(--ink-700); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), color var(--t-fast); }
.summary__cont a:hover { color: var(--ink-900); border-bottom-color: currentColor; }

/* Compact line list inside checkout right-side review */
.summary__items {
  margin-bottom: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.summary__item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-3);
  align-items: center;
}
.summary__item-media {
  width: 32px; height: 32px;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.summary__item-media img { width: 100%; height: 100%; object-fit: contain; }
.summary__item-body { min-width: 0; }
.summary__item-name {
  font-size: var(--fs-xs);
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary__item-sub {
  margin-top: 2px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  text-transform: uppercase;
}
.summary__item-tot {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--ink-900);
  white-space: nowrap;
}

/* Empty-state for korpa.html (slightly larger than account empty-state) */
.cart-empty-page {
  text-align: center;
  padding: var(--s-9) var(--s-4);
}
.cart-empty-page__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--bg-tint);
  color: var(--blue-700);
  margin-bottom: var(--s-4);
  border: 1px solid var(--line);
}
.cart-empty-page__ic svg { width: 28px; height: 28px; }
.cart-empty-page__h {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--ink-900);
  margin-bottom: var(--s-2);
}
.cart-empty-page__sub {
  max-width: 44ch;
  margin: 0 auto var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-600);
}

/* ====================================================================== *
   4) CHECKOUT FORM (porudzbina.html)
 * ====================================================================== */

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.checkout-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.checkout-section__h {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.checkout-section__h::before {
  /* mono numbered marker */
  content: attr(data-step);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--ink-900);
  border-radius: var(--r-full);
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Greet banner for logged-in buyers */
.checkout-greet {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.checkout-greet .mono { color: var(--ink-900); }

/* ----- Segmented toggle (Fizičko / Pravno lice + Dostava / Lično) ----- */
.segmented {
  display: inline-flex;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px;
  position: relative;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  position: relative;
  z-index: 1;
  padding: 8px 18px;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
  cursor: pointer;
  border-radius: var(--r-full);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.segmented input:checked + label {
  background: var(--ink-900);
  color: #fff;
}
.segmented input:focus-visible + label {
  outline: 2px solid var(--red-500);
  outline-offset: 2px;
}

/* ----- Pickup info card (when user picks "Lično preuzimanje") ----- */
.pickup-card {
  display: none;
  padding: var(--s-4);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.6;
  border-left: 3px solid var(--blue-700);
}
.checkout-form[data-delivery="licno"] .pickup-card { display: block; }
.checkout-form[data-delivery="licno"] .delivery-fields { display: none; }
.pickup-card .mono { color: var(--ink-900); }
.pickup-card h4 {
  font-family: var(--ff-display);
  font-size: var(--fs-base);
  font-weight: 600;
  margin-bottom: var(--s-2);
  color: var(--ink-900);
}

/* Pravno-lice fields container — hidden by default, shown when toggle = pravno */
.business-fields { display: none; }
.checkout-form[data-buyer-type="pravno"] .business-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 600px) {
  .checkout-form[data-buyer-type="pravno"] .business-fields { grid-template-columns: 1fr; }
}

/* The terms-and-privacy row */
.terms-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.5;
}
.terms-row .field__error {
  font-size: var(--fs-xs);
  display: none;
  margin-top: 4px;
}
.terms-row[data-state="error"] .field__error { display: inline-flex; }

/* Submit button row */
.checkout-submit {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.checkout-submit .btn { min-width: 220px; }
.checkout-submit__hint {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ====================================================================== *
   5) CONFIRMATION PAGE (potvrda.html)
 * ====================================================================== */

.confirm {
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  padding-top: calc(var(--nav-h-compact) + clamp(1.5rem, 1rem + 2vw, 3rem));
  background: var(--bg-tint);
  min-height: calc(var(--vh, 1vh) * 100);
}
.confirm__panel {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
  isolation: isolate;
}
.confirm__hero {
  position: relative;
  padding: var(--s-7) var(--s-7) var(--s-6);
  text-align: center;
  background: linear-gradient(180deg, rgba(245,247,251,0.6), #fff 60%);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 600px) { .confirm__hero { padding: var(--s-6) var(--s-4); } }

.confirm__signal {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.5;
  pointer-events: none;
}
.confirm__signal path { fill: none; stroke-linecap: round; }

.confirm__check {
  width: 72px; height: 72px;
  border-radius: var(--r-full);
  background: var(--signal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-5);
  box-shadow: 0 8px 24px -10px rgba(62,64,149,0.45);
}
.confirm__check svg { width: 36px; height: 36px; }

.confirm__eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: var(--s-2);
}
.confirm__h {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink-900);
}
.confirm__number {
  display: inline-block;
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--ink-900);
  color: #fff;
  border-radius: var(--r-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.confirm__next {
  margin-top: var(--s-5);
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--fs-base);
  color: var(--ink-600);
  line-height: 1.55;
}
.confirm__next .mono { color: var(--ink-900); }

.confirm__body {
  padding: var(--s-7);
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) { .confirm__body { padding: var(--s-5) var(--s-4); } }

.confirm__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
@media (max-width: 720px) { .confirm__grid { grid-template-columns: 1fr; } }

.detail-block {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-4);
}
.detail-block h3 {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-700);
  margin-bottom: var(--s-3);
}
.detail-block dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px var(--s-3);
  font-size: var(--fs-sm);
}
.detail-block dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--ink-400);
  text-transform: uppercase;
  align-self: start;
  padding-top: 2px;
}
.detail-block dd { color: var(--ink-900); }
.detail-block dd.mono { font-family: var(--ff-mono); }

.confirm__items {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-5);
}
.confirm__items th {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-700);
  text-align: left;
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.confirm__items th.right { text-align: right; }
.confirm__items td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--ink-700);
}
.confirm__items td.right { text-align: right; font-family: var(--ff-mono); color: var(--ink-900); }
.confirm__items td.sku { font-family: var(--ff-mono); color: var(--ink-400); font-size: var(--fs-xs); white-space: nowrap; }

.confirm__totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  border-top: 1px solid var(--ink-900);
  padding-top: var(--s-4);
  margin-top: var(--s-3);
}
.confirm__total-row {
  display: flex;
  gap: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}
.confirm__total-row .mono { font-family: var(--ff-mono); color: var(--ink-900); }
.confirm__total-row--final {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--ink-900);
  margin-top: var(--s-2);
}

.confirm__foot {
  padding: var(--s-5) var(--s-7);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4);
  background: var(--bg-tint);
}
@media (max-width: 600px) { .confirm__foot { padding: var(--s-4); } }

.confirm__foot-actions { display: inline-flex; gap: var(--s-3); flex-wrap: wrap; }

.confirm__guest-note {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: rgba(127,158,209,0.08);
  border: 1px dashed var(--blue-400);
  border-radius: var(--r-2);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  line-height: 1.55;
}
.confirm__guest-note a {
  color: var(--blue-700);
  border-bottom: 1px solid currentColor;
}

/* Print-button icon */
.btn--print {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.btn--print svg { width: 16px; height: 16px; }

/* ====================================================================== *
   6) STATUS PILLS (used in confirmation + account orders list/detail)
 * ====================================================================== */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bg-tint);
  color: var(--ink-700);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  background: currentColor;
}
.status-pill[data-status="PRIMLJENO"]  { color: var(--blue-700);  background: rgba(62,64,149,0.06);   border-color: rgba(62,64,149,0.22); }
.status-pill[data-status="U_OBRADI"]   { color: #8a6b00;          background: rgba(255,191,0,0.10);   border-color: rgba(255,191,0,0.32); }
.status-pill[data-status="POTVRDJENO"] { color: #136a3a;          background: rgba(37,194,107,0.08);  border-color: rgba(37,194,107,0.28); }
.status-pill[data-status="ISPORUCENO"] { color: var(--ink-900);   background: var(--bg-tint);         border-color: var(--ink-400); }
.status-pill[data-status="OTKAZANO"]   { color: var(--red-600);   background: rgba(227,6,19,0.06);    border-color: rgba(227,6,19,0.22); }

/* ====================================================================== *
   7) ACCOUNT — orders list + in-panel detail view
 * ====================================================================== */

.orders-table { width: 100%; }
.orders-table td .mono { font-family: var(--ff-mono); }
.orders-table tbody tr {
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.orders-table tbody tr:hover { background: var(--bg-tint); }
.orders-table .col-num { font-family: var(--ff-mono); color: var(--ink-900); white-space: nowrap; }
.orders-table .col-date { font-family: var(--ff-mono); color: var(--ink-600); font-size: var(--fs-xs); white-space: nowrap; }
.orders-table .col-total { font-family: var(--ff-mono); text-align: right; color: var(--ink-900); white-space: nowrap; }
.orders-table .col-items { font-family: var(--ff-mono); color: var(--ink-600); white-space: nowrap; }
.orders-table .col-chev { width: 24px; text-align: right; color: var(--ink-400); }

/* Mobile-stack the orders table */
@media (max-width: 600px) {
  .orders-table thead { display: none; }
  .orders-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); margin-bottom: var(--s-3); }
  .orders-table tbody tr:hover { background: #fff; }
  .orders-table td { display: block; padding: 0; border: 0; }
  .orders-table .col-num { grid-column: 1; font-size: var(--fs-base); }
  .orders-table .col-chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .orders-table .col-date { grid-column: 1; }
  .orders-table .col-status { grid-column: 1; }
  .orders-table .col-items, .orders-table .col-total { grid-column: 1; text-align: left; }
}

/* Order detail (in-panel, slides in over the list) */
.order-detail {
  display: none;
  animation: tab-fade 240ms var(--ease-out);
}
.order-detail.is-active { display: block; }

.order-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin-bottom: var(--s-5);
  transition: color var(--t-fast) var(--ease-out);
}
.order-detail__back:hover { color: var(--ink-900); }
.order-detail__back svg { width: 14px; height: 14px; }

.order-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
}
.order-detail__num {
  font-family: var(--ff-mono);
  font-size: var(--fs-xl);
  color: var(--ink-900);
  letter-spacing: 0.06em;
}
.order-detail__date {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  letter-spacing: 0.08em;
  margin-top: 4px;
  text-transform: uppercase;
}
.order-detail__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

/* ====================================================================== *
   8) PRINT SHEET — strips chrome, lays out a clean B2B order
 * ====================================================================== */

@media print {
  /* Reset background + fonts */
  body { background: #fff !important; color: #000 !important; }
  body * { box-shadow: none !important; }

  /* Hide all chrome */
  .nav, .megamenu, .mobile-menu,
  .footer, .ai-launcher, .ai-panel, .to-top,
  .cart-drawer, .cart-backdrop,
  .crumbs, .skip-link,
  .confirm__foot, .order-detail__actions,
  .summary__cont, .summary__actions,
  [data-no-print], .btn { display: none !important; }

  .order-page, .confirm, .account {
    padding: 0 !important;
    background: #fff !important;
  }

  /* Print sheet container */
  .print-sheet {
    display: block !important;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  .print-sheet__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #000;
    margin-bottom: 1.5rem;
  }
  .print-sheet__logo img { height: 36px; filter: none; }
  .print-sheet__contact {
    font-size: 10pt;
    line-height: 1.5;
    color: #000;
    text-align: right;
    font-family: monospace;
  }
  .print-sheet__contact strong {
    font-family: "Space Grotesk", sans-serif;
    font-size: 11pt;
    display: block;
    margin-bottom: 4px;
  }

  .print-sheet__title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 22pt;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.25rem;
  }
  .print-sheet__meta {
    display: flex;
    gap: 2rem;
    font-family: monospace;
    font-size: 10pt;
    color: #000;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #000;
    padding-bottom: 0.75rem;
  }
  .print-sheet__meta div span { color: #666; text-transform: uppercase; letter-spacing: 0.1em; font-size: 8pt; display: block; }
  .print-sheet__meta div strong { font-weight: 500; font-size: 11pt; }

  .print-sheet__buyer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
    font-size: 10pt;
    color: #000;
  }
  .print-sheet__buyer dt {
    font-family: monospace;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
  }
  .print-sheet__buyer dd { font-size: 10pt; margin-bottom: 0.5rem; }

  .print-sheet__table { width: 100%; border-collapse: collapse; font-size: 10pt; margin-bottom: 1rem; }
  .print-sheet__table th, .print-sheet__table td {
    border: 1px solid #000;
    padding: 6px 8px;
    text-align: left;
    color: #000;
  }
  .print-sheet__table th {
    background: #f0f0f0;
    font-family: monospace;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .print-sheet__table td.right, .print-sheet__table th.right { text-align: right; }
  .print-sheet__table td.mono, .print-sheet__table th.mono { font-family: monospace; }

  .print-sheet__totals {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
  }
  .print-sheet__totals table { border-collapse: collapse; font-size: 11pt; }
  .print-sheet__totals td { padding: 4px 1rem; font-family: monospace; }
  .print-sheet__totals tr:last-child td {
    border-top: 2px solid #000;
    font-weight: 700;
    font-size: 12pt;
    padding-top: 8px;
  }

  .print-sheet__note {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    border-left: 3px solid #000;
    font-size: 10pt;
    color: #000;
    font-style: italic;
  }

  .print-sheet__foot {
    margin-top: 2rem;
    padding-top: 0.75rem;
    border-top: 1px solid #999;
    font-family: monospace;
    font-size: 8pt;
    color: #666;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* page setup */
  @page {
    size: A4;
    margin: 1.5cm;
  }
}

/* Hide print sheet on screen */
.print-sheet { display: none; }

/* ====================================================================== *
   9) MOTION — reduced-motion safe
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tab-panel,
  .order-detail { animation: none !important; }
  .confirm__check { box-shadow: none !important; }
}