/* Billing (storefront) page layout */

.billing-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 22px;
  align-items: start;
  padding: 22px 0 40px;
}

/* ---- Toolbar: search + filter -------------------------------------------*/
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-soft);
  pointer-events: none;
}
.search-box input { padding-left: 38px; }
.filter-select { max-width: 220px; }

/* ---- Product grid ---------------------------------------------------------*/
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  position: relative;
}
.product-card:hover { box-shadow: var(--shadow-md); border-color: #d3ddd7; transform: translateY(-2px); }
.product-card.out-of-stock { opacity: 0.72; }

.product-thumb {
  height: 84px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-primary-light), #f1f6f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--color-primary);
  font-weight: 800;
  overflow: hidden;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-soft);
}
.product-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;
}
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.product-price { font-size: 16.5px; font-weight: 800; color: var(--color-primary-dark); }
.product-unit { font-size: 12px; color: var(--color-text-soft); }

.product-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qty-stepper button {
  width: 30px; height: 32px;
  border: none;
  background: var(--color-bg);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.qty-stepper button:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.qty-stepper input {
  width: 38px;
  border: none;
  text-align: center;
  padding: 0;
  font-weight: 700;
  height: 32px;
}
.qty-stepper input:focus { box-shadow: none; }

/* ---- Cart panel ------------------------------------------------------------*/
.cart-panel {
  position: sticky;
  top: calc(var(--header-height) + 16px);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--header-height) - 32px);
}
.cart-header {
  padding: 18px 18px 4px;
}
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 18px;
}
.cart-footer {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--color-border);
}

.cart-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item-name { font-weight: 600; font-size: 14px; }
.cart-item-sub { font-size: 12.5px; color: var(--color-text-soft); margin-top: 2px; }
.cart-item-remove {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-soft); font-size: 13px;
}
.cart-item-remove:hover { color: var(--color-danger); }

.cart-fab {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 60;
  border-radius: 999px;
  padding: 14px 22px;
  box-shadow: var(--shadow-lg);
}

/* ---- Responsive -----------------------------------------------------------*/
@media (max-width: 1024px) {
  .billing-layout { grid-template-columns: 1fr; }
  .cart-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    max-height: 85vh;
    border-radius: 20px 20px 0 0;
    z-index: 100;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 -12px 30px rgba(0,0,0,0.18);
    visibility: hidden;
  }
  .cart-panel.expanded { transform: translateY(0); visibility: visible; }
  .cart-drag-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 2px;
    cursor: pointer;
  }
  .cart-drag-handle span { width: 40px; height: 4px; border-radius: 3px; background: var(--color-border); }
  .cart-fab { display: inline-flex; }
}

@media (max-width: 640px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .toolbar { flex-direction: column; }
  .filter-select { max-width: none; }
}


/* Billing workspace enhancements */
.products-panel { min-width: 0; }
.workflow-rail { display:flex; align-items:center; gap:10px; width:100%; margin-top:2px; color:var(--color-text-soft); font-size:12px; }
.workflow-status { display:inline-flex; align-items:center; gap:7px; margin-right:auto; font-weight:600; }
.status-pulse { width:7px; height:7px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 4px var(--color-success-bg); }
.shortcut-chip { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
kbd { border:1px solid var(--color-border); border-bottom-width:2px; border-radius:5px; background:var(--color-surface); padding:1px 5px; font:600 10px/1.5 var(--font-sans); color:var(--color-text-muted); }
.product-card { padding:14px; gap:9px; }
.product-card::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:inset 0 0 0 2px var(--color-primary-light); transition:opacity var(--transition); }
.product-card:hover::after { opacity:1; }
.product-thumb { height:96px; background:oklch(94% .035 151); }
.product-card .badge { align-self:flex-start; }
.cart-panel { box-shadow:var(--shadow-md); }
.cart-header { background:linear-gradient(180deg, oklch(97% .02 151), transparent); border-radius:inherit; }
.cart-item { transition:background var(--transition); }
.cart-item:hover { background:oklch(97% .012 151); }
@media (max-width:640px) {
  .workflow-rail { flex-wrap:wrap; }
  .workflow-status { width:100%; }
  .shortcut-chip { display:none; }
  .product-thumb { height:76px; }
}


/* Color refresh: warm citrus accents with botanical green, not another flat SaaS screen. */
:root {
  --color-primary: oklch(48% .13 154);
  --color-primary-dark: oklch(35% .105 154);
  --color-primary-light: oklch(93% .055 154);
  --color-accent: oklch(69% .16 74);
  --color-accent-light: oklch(95% .055 82);
  --color-bg: oklch(96% .018 88);
  --color-surface: oklch(99% .008 90);
  --color-border: oklch(87% .035 100);
  --color-text: oklch(24% .035 150);
  --color-text-muted: oklch(46% .04 150);
  --color-text-soft: oklch(60% .035 100);
}
body { background: radial-gradient(circle at 12% 0%, oklch(98% .035 80), transparent 28rem), var(--color-bg); }
.topbar { background: oklch(99% .01 90 / .92); border-bottom-color: oklch(83% .05 100); }
.brand-mark { background: linear-gradient(135deg, oklch(58% .17 74), oklch(45% .13 154)); box-shadow: 0 6px 14px oklch(48% .13 154 / .18); }
.nav-links a:hover, .nav-links a.active { background: var(--color-accent-light); color: oklch(39% .10 72); }
.btn-primary { background: linear-gradient(135deg, oklch(53% .15 154), oklch(43% .12 154)); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, oklch(58% .16 154), oklch(48% .13 154)); }
.btn-outline:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { background: var(--color-accent-light); }

.billing-layout { gap: 28px; }
.toolbar { padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: oklch(99% .012 90 / .82); box-shadow: var(--shadow-sm); }
.product-card { background: linear-gradient(160deg, oklch(99% .01 90), oklch(97% .025 145)); border-color: oklch(86% .04 130); }
.product-thumb { background: linear-gradient(135deg, oklch(92% .07 78), oklch(92% .065 154)); color: oklch(40% .12 154); }
.product-card:nth-child(3n+2) .product-thumb { background: linear-gradient(135deg, oklch(93% .06 20), oklch(93% .05 75)); color: oklch(48% .13 30); }
.product-card:nth-child(3n) .product-thumb { background: linear-gradient(135deg, oklch(92% .055 200), oklch(93% .07 154)); color: oklch(39% .12 190); }
.cart-panel { border-color: oklch(76% .07 145); background: oklch(99% .01 90); }
.cart-footer { background: linear-gradient(180deg, transparent, oklch(96% .035 82)); }


/* Sale origin is required and deliberately prominent at checkout. */
.sales-channel-field { margin: 0 0 14px; }
.sales-channel-field select { font-weight: 700; border-color: oklch(73% .08 154); background: oklch(98% .02 95); }
.field-help { margin-top: 5px; color: var(--color-text-soft); font-size: 11px; }