/* tokens.css */

:root {
  --green-900: #14422a;
  --green-700: #009760;
  --green-500: #2d8550;
  --green-100: #e8f1ea;
  --olive-700: #827850;
  --olive-500: #a39872;
  --olive-100: #f0ede0;
  --bone: #faf8f3;
  --bone-200: #f0ece1;
  --bone-300: #e8e3d2;
  --ink: #1a1a1a;
  --ink-600: #5a5a55;
  --ink-400: #8a8a82;
  --line: #e5e0d3;
  --bloom: #c94a6b;
  --bloom-soft: #fbeaef;
  --warn: #b8770e;
  --warn-soft: #fbf1de;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font-sans: 'Campton', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Campton', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Campton — Holstein huisstijl font. Drop the woff2 files into
   /web/static/fonts/ to enable; otherwise the stack falls back to
   the platform's default geometric sans (San Francisco on macOS/iOS,
   Segoe UI on Windows, Roboto on Android) — no external font fetch. */
@font-face {
  font-family: 'Campton';
  src: url('../fonts/Campton-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('../fonts/Campton-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('../fonts/Campton-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Campton';
  src: url('../fonts/Campton-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* styles/base.css */
body {
  font-family: var(--font-sans);
  background: var(--bone);
  color: var(--ink);
  line-height: 1.5;
}

/* The webshop layout uses an inner-scroll model: the shared chrome
   (nav, crumbstrip, loadcarrier strip) is pinned, only `.content`
   scrolls. That requires the body to be viewport-tall with overflow
   locked so .page can flex into the remaining space. Scope it to
   .webshop-shell so dashboard pages — which mount under the same
   stylesheet but don't include this template's chrome — keep the
   browser's native document scroll. */
.webshop-shell, html:has(> .webshop-shell) { height: 100%; }
body.webshop-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Page layout — chrome rows size to content, .page fills the rest.
   Nav gets a stacking context at z-index 100 so its popovers (date-
   picker, minicart, userpop, submenu) paint above the crumbstrip and
   loadcarrier rows below. Without this the absolutely-positioned
   popovers are painted under later-in-flow siblings. */
.nav,
.crumbstrip,
.color-strip { flex-shrink: 0; }
.nav { z-index: 100; }

.page {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto 1fr;
}

.page .sidebar {
  height: 100%;
  overflow-y: auto;
}

.content {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
}

/* Pages without the left sidebar (cart, product-detail, …) use this
   wrapper instead of the grid-based .page — single full-bleed column. */
.page-no-sidebar {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page-no-sidebar > .content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 40px 48px;
  width: 100%;
}

/* ============ CART PAGE ============ */
.cart-head { margin-bottom: 20px; }
.cart-head h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 500; color: var(--green-900); margin-bottom: 8px; }

/* Delivery banner — green-tinted card spanning the full content width
   above the two-column layout. Mirrors the topbar date pill but with
   bigger, more confident type. */
.cart-banner {
  background: var(--green-100);
  border: 1px solid var(--green-500);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.cart-banner .icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: white;
  display: flex; align-items: center; justify-content: center;
  color: var(--green-700);
  flex-shrink: 0;
}
.cart-banner .body { flex: 1; min-width: 0; }
.cart-banner .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-600);
  font-weight: 500;
  margin-bottom: 2px;
}
.cart-banner .date {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--green-900);
  letter-spacing: -0.01em;
}
.cart-banner .countdown {
  font-size: 13px;
  color: var(--bloom);
  margin-top: 2px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-banner .countdown .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bloom);
}
.cart-banner .change {
  background: white;
  border: 1px solid var(--green-700);
  color: var(--green-700);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cart-banner .change:hover { background: var(--green-700); color: white; }

/* Two-column layout: products card + notes on the left, sticky
   summary/eta/cta stack on the right. Collapses to single column at
   the mobile breakpoint further down. */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}
.cart-main { min-width: 0; }

.cart-items-block {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cart-items-head {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cart-items-head h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--green-900);
}
.cart-items-head .count {
  font-size: 14px;
  color: var(--ink-600);
  font-family: ui-monospace, monospace;
}

/* Cart rows live in a real <table> so every column lines up across
   rows without each row maintaining its own grid track sizing. The
   browser's table layout picks one column width per cell across the
   whole tbody, which is exactly what the customer wanted. */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.cart-item { transition: background 0.12s; }
.cart-item:hover { background: var(--bone); }
.cart-item > td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.cart-item:last-child > td { border-bottom: none; }
.cart-item > td:first-child { padding-left: 24px; }
.cart-item > td:last-child { padding-right: 24px; }
.cart-cell-thumb { width: 88px; }
.cart-cell-qty { width: 1%; white-space: nowrap; }
.cart-cell-price { width: 1%; white-space: nowrap; text-align: right; }
.cart-cell-remove { width: 1%; }
.cart-item .thumb {
  width: 72px; height: 72px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--bone-200), var(--green-100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  text-decoration: none;
  overflow: hidden;
}
.cart-item .thumb img,
.mc-item .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cart-item .thumb.placeholder-img,
.mc-item .thumb.placeholder-img { opacity: 0.6; }
.cart-cell-info { min-width: 0; }
.cart-item .name {
  display: block;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--green-900);
  line-height: 1.2;
  margin-bottom: 4px;
  text-decoration: none;
}
.cart-item .name:hover { color: var(--green-700); }
.cart-item .meta {
  font-size: 13px;
  color: var(--ink-600);
  font-family: ui-monospace, monospace;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cart-item .meta .pack {
  background: var(--bone-200);
  color: var(--green-900);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-family: var(--font-sans);
}
.cart-item .meta .dot-wrap {
  display: inline-flex;
  align-items: center;
}
.cart-item .meta .color-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
}
.cart-item .meta .code { color: var(--ink-600); }

.cart-item .qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  margin: 0;
}
.cart-item .qty button[type="submit"] {
  width: 32px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-600);
  font-size: 14px;
  padding: 0;
}
.cart-item .qty button[type="submit"]:hover { background: var(--bone-200); color: var(--green-700); }
.cart-item .qty input {
  width: 44px;
  height: 36px;
  border: none;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  background: transparent;
  color: var(--ink);
  -moz-appearance: textfield;
}
.cart-item .qty input::-webkit-outer-spin-button,
.cart-item .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-item .qty .unit {
  padding: 0 10px;
  font-size: 12px;
  color: var(--ink-600);
  border-left: 1px solid var(--line);
  height: 36px;
  display: flex;
  align-items: center;
  font-family: ui-monospace, monospace;
}

.cart-cell-price .total {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--bloom);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cart-cell-price .unit-price {
  font-size: 12px;
  color: var(--ink-600);
  margin-top: 4px;
  font-family: ui-monospace, monospace;
}

.cart-item .remove {
  width: 32px; height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-400);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.cart-item .remove:hover { background: var(--bloom-soft); color: var(--bloom); }

.cart-notes {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-top: 16px;
}
.cart-notes-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-600);
  font-weight: 500;
  margin-bottom: 10px;
}
.cart-notes textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--bone);
  outline: none;
  resize: vertical;
  line-height: 1.5;
}
.cart-notes textarea:focus { border-color: var(--green-700); background: white; }
.cart-notes textarea::placeholder { color: var(--ink-400); }

.cart-sidebar {
  align-self: start;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.summary-block {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.summary-head {
  padding: 16px 20px 12px;
  background: linear-gradient(180deg, var(--bone), white);
  border-bottom: 1px solid var(--line);
}
.summary-head .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-600);
  font-weight: 500;
  margin-bottom: 4px;
}
.summary-head h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--green-900);
}
.summary-body { padding: 16px 20px; }
.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
}
.summary-row .key { color: var(--ink-600); }
.summary-row .val {
  font-family: ui-monospace, monospace;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.summary-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}
.summary-row.surcharge .val { color: var(--bloom); }
.summary-row.total {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.summary-row.total .key {
  font-size: 14px;
  font-weight: 500;
  color: var(--green-900);
}
.summary-row.total .val {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--green-900);
}

.eta-block {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
}
.eta-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-600);
  font-weight: 500;
  margin-bottom: 10px;
}
.eta-options {
  display: flex;
  gap: 6px;
  margin: 0;
}
.eta-btn {
  flex: 1;
  padding: 10px 12px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.eta-btn:hover { border-color: var(--green-700); }
.eta-btn.active {
  background: var(--green-100);
  border-color: var(--green-700);
  color: var(--green-900);
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart-cta {
  width: 100%;
  padding: 16px;
  background: var(--green-700);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
}
.cart-cta:hover { background: var(--green-900); }
.cart-secondary {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--ink-600);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s, color 0.15s;
}
.cart-secondary:hover { border-color: var(--green-700); color: var(--green-700); }

.cart-empty {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
}
.cart-empty p { font-size: 14px; color: var(--ink-600); margin-bottom: 16px; }

/* Mobile fold: stack the sidebar under the items and re-flow each
   row so qty + price land below the thumb/info/remove header. The
   table cells are reset to flex children so the order/wrap are
   tractable without juggling table layout on small screens. */
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-sidebar { position: static; top: auto; }
  .cart-table,
  .cart-table tbody,
  .cart-item { display: block; }
  .cart-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "thumb info remove"
      "qty   qty  price";
    gap: 12px 14px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
  }
  .cart-item:last-child { border-bottom: none; }
  .cart-item > td {
    padding: 0;
    border: none;
  }
  .cart-item > td:first-child,
  .cart-item > td:last-child { padding: 0; }
  .cart-cell-thumb { grid-area: thumb; width: auto; }
  .cart-cell-info { grid-area: info; }
  .cart-cell-qty { grid-area: qty; justify-self: start; width: auto; }
  .cart-cell-price { grid-area: price; justify-self: end; width: auto; }
  .cart-cell-remove { grid-area: remove; width: auto; justify-self: end; }
  .cart-item .thumb { width: 56px; height: 56px; font-size: 24px; }
  .cart-banner { flex-wrap: wrap; }
  .cart-banner .change { width: 100%; }
}

/* ============ CHECKOUT PAGE ============ */
.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
.co-form { display: flex; flex-direction: column; gap: 16px; }
.co-section {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.co-section h2 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 12px;
}
.co-options { display: flex; flex-direction: column; gap: 8px; }
.co-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: var(--bone);
}
.co-option:hover { border-color: var(--green-700); }
.co-option input[type="radio"] { margin-top: 3px; accent-color: var(--green-700); }
.co-option:has(input:checked) { border-color: var(--green-700); background: white; box-shadow: inset 0 0 0 1px var(--green-700); }
.co-option-body { flex: 1; min-width: 0; }
.co-option-label { font-size: 14px; font-weight: 500; color: var(--green-900); margin-bottom: 2px; }
.co-option-line { font-size: 13px; color: var(--ink-600); line-height: 1.45; }
.co-empty { font-size: 14px; color: var(--ink-600); }
.co-notes {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  background: var(--bone);
}
.co-notes:focus { outline: none; border-color: var(--green-700); background: white; }

.co-summary {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.co-summary h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--green-900);
}
.co-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.co-line { display: flex; gap: 10px; align-items: flex-start; }
.co-line-body { flex: 1; min-width: 0; }
.co-line-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.co-line-meta {
  font-size: 12px;
  color: var(--ink-400);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.co-line-price { font-size: 14px; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.co-totals { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.co-totals .row { display: flex; justify-content: space-between; font-size: 14px; }
.co-totals .row.total {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--green-900);
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.co-note { font-size: 13px; color: var(--ink-600); line-height: 1.5; }
.co-submit { width: 100%; }

/* ============ ORDER CONFIRMATION PAGE ============ */
.oc-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  background: var(--green-100);
  color: var(--green-900);
  border: 1px solid var(--line);
}
.oc-hero-pending { background: var(--warn-soft); color: var(--warn); }
.oc-hero-error { background: var(--bloom-soft); color: var(--bloom); }
.oc-check { color: currentColor; flex-shrink: 0; }
.oc-hero-body h1 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 4px;
}
.oc-id { font-size: 14px; color: var(--ink-600); }
.oc-id strong { font-family: ui-monospace, monospace; color: var(--green-900); }
.oc-meta { font-size: 13px; color: var(--ink-400); margin-top: 2px; }

.oc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.oc-panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}
.oc-panel h2 {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 10px;
}
.oc-side { display: flex; flex-direction: column; gap: 16px; }
.oc-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.oc-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.oc-item:last-child { border-bottom: none; padding-bottom: 0; }
.oc-item-body { flex: 1; min-width: 0; }
.oc-item-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.oc-item-meta {
  font-size: 12px;
  color: var(--ink-400);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.oc-item-price { font-size: 14px; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.oc-delivery {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-600);
  margin-bottom: 8px;
}
.oc-delivery .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
}
.oc-address { font-size: 14px; color: var(--ink-600); line-height: 1.5; }
.oc-address-label { font-weight: 500; color: var(--green-900); margin-bottom: 2px; }
.oc-payment { font-size: 14px; color: var(--ink); }

.oc-totals { display: flex; flex-direction: column; gap: 6px; }
.oc-total-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-600); }
.oc-total-row.oc-total-emphasize {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--green-900);
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.oc-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* ============ PRODUCT DETAIL PAGE ============ */
/* Cap the gallery column on the grid track itself rather than on
   `.pd-gallery`. Capping the inner element left dead space inside the
   1.3fr track when the viewport was wide; the buy zone sat to the
   right of that emptiness instead of right next to the photo. With the
   cap on the track, the buy zone collapses leftward as soon as the
   gallery hits its ceiling, so wide screens no longer get a column of
   bone-coloured gap. */
.pd-layout {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 56px;
  align-items: start;
}
@media (max-width: 900px) { .pd-layout { grid-template-columns: 1fr; gap: 24px; } }

.pd-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.pd-main-image {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--bone-200), var(--green-100));
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pd-main-image > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-main-image.placeholder-img { opacity: 0.85; }
.pd-main-image .pd-badges {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; flex-direction: column; gap: 6px;
  margin: 0;
  z-index: 2;
}
.pd-main-image .pack-badge {
  position: absolute;
  bottom: 16px; right: 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: var(--green-900);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  z-index: 2;
}
.pd-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pd-thumb {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--bone-200), var(--green-100));
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.15s, opacity 0.15s;
  opacity: 0.75;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { border-color: var(--green-700); opacity: 1; }
.pd-thumb.active { border-color: var(--green-700); border-width: 2px; opacity: 1; }

/* Buy zone */
.pd-buy { display: flex; flex-direction: column; gap: 20px; align-self: start; }

.pd-header { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.pd-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-500);
  font-weight: 500;
  margin-bottom: 8px;
}
.pd-name {
  font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--green-900);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.pd-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-600);
  font-family: ui-monospace, monospace;
}
.pd-meta .sep { color: var(--line); }
.pd-meta .code { color: var(--ink); font-weight: 500; }
.pd-meta .color-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
  vertical-align: middle;
}

/* Price block */
.pd-price-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pd-price {
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 500;
  color: var(--bloom);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pd-price small {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--green-500);
  margin-left: 6px;
}
.pd-price-was {
  font-size: 16px;
  color: var(--ink-400);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

/* Form sections */
.pd-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.pd-section { display: flex; flex-direction: column; gap: 10px; }
.pd-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-500);
  font-weight: 500;
}

/* Quantity */
.pd-qty-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
}
.pd-qty button {
  width: 44px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-600);
  font-size: 18px;
  transition: background 0.12s, color 0.12s;
}
.pd-qty button:hover { background: var(--bone); color: var(--green-700); }
.pd-qty input {
  width: 64px;
  height: 48px;
  border: none;
  text-align: center;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  outline: none;
  -moz-appearance: textfield;
  background: transparent;
}
.pd-qty input::-webkit-outer-spin-button,
.pd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-qty .unit {
  padding: 0 14px;
  font-size: 13px;
  color: var(--green-500);
  border-left: 1px solid var(--line);
  height: 48px;
  display: flex;
  align-items: center;
  font-family: ui-monospace, monospace;
}
.pd-quick-buttons { display: flex; gap: 6px; flex: 1; }
.pd-quick {
  flex: 1;
  min-width: 44px;
  height: 48px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-600);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pd-quick:hover { border-color: var(--green-700); color: var(--green-700); background: var(--bone); }

/* Sold-out: stepper + quick-picks are disabled and visibly inert */
.pd-qty button:disabled, .pd-qty input:disabled, .pd-quick:disabled { opacity: 0.5; cursor: not-allowed; }
.pd-qty button:disabled:hover { background: transparent; color: var(--ink-600); }
.pd-quick:disabled:hover { border-color: var(--line); color: var(--ink-600); background: white; }

/* Subtotal preview */
.pd-subtotal {
  background: var(--bone);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pd-subtotal .calc {
  font-size: 14px;
  color: var(--ink-600);
  font-family: ui-monospace, monospace;
}
.pd-subtotal .total {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--bloom);
  font-variant-numeric: tabular-nums;
}

/* CTA */
.pd-cta {
  width: 100%;
  padding: 16px;
  background: var(--green-700);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pd-cta:hover:not(:disabled) { background: var(--green-900); }
.pd-cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* Delivery context strip */
.pd-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--green-100);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--green-900);
}
.pd-context .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); flex-shrink: 0; }

/* Specs list — single column of key/value rows whose underlines run
   edge-to-edge inside the bone-coloured block. The horizontal padding
   lives on each row, not on the wrapper, so the divider line spans
   the full width of the block instead of stopping short of the
   rounded corners. Single column is intentional: the previous 2-up
   grid broke the underlines into two short segments and made the gap
   between key and value vary with each label's width. */
.pd-specs-inline {
  background: var(--bone);
  border-radius: var(--radius-md);
  padding: 18px 0 4px;
}
.pd-specs-inline-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-500);
  font-weight: 500;
  margin: 0 20px 10px;
}
.pd-specs-inline-grid {
  display: flex;
  flex-direction: column;
}
.pd-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
}
.pd-spec:last-child { border-bottom: none; }
.pd-spec .key { color: var(--ink-600); white-space: nowrap; }
.pd-spec .val {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The description is its own bone-coloured card so the text reads
   as a labelled block instead of floating loose at the bottom of the
   buy zone. */
.pd-description-block {
  background: var(--bone);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.pd-description { font-size: 14px; color: var(--ink-600); line-height: 1.6; margin: 0; }

/* Reorder history block */
.pd-history-block {
  background: var(--green-100);
  border: 1px solid var(--green-500);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pd-history-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: white;
  color: var(--green-700);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pd-history-text { flex: 1; font-size: 14px; color: var(--green-900); }
.pd-history-text strong { font-weight: 500; }
.pd-history-link {
  font-size: 13px;
  color: var(--green-700);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.pd-history-link:hover { color: var(--green-900); }

/* Similar products */
.pd-similar-block { margin-bottom: 32px; }
.pd-section-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--green-900);
  margin: 0 0 20px 0;
}
.pd-similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.similar-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.similar-card:hover {
  border-color: var(--green-500);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -10px rgba(0, 150, 95, 0.2);
}
.similar-card .img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--bone-200), var(--green-100));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.similar-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.similar-card .img.placeholder-img { opacity: 0.85; }
.similar-card .body { padding: 12px 14px; }
.similar-card .name {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--green-900);
  margin-bottom: 4px;
  line-height: 1.2;
}
.similar-card .meta {
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.similar-card .meta .sep { color: var(--line); }
.similar-card .price {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--bloom);
  font-variant-numeric: tabular-nums;
}
.similar-card .price small {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--green-500);
  font-weight: 400;
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }

/* ============ TOAST ============ */
.toast-host {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 18px;
  background: var(--green-900);
  color: white;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  max-width: 360px;
  box-shadow: 0 12px 32px -12px rgba(20, 66, 42, 0.35);
  animation: toast-in 0.18s ease-out;
}
.toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s; }
.toast.toast-error { background: var(--bloom); }
.toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
}
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Shared button base */
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary { background: var(--green-700); color: white; }
.btn-primary:hover { background: var(--green-900); }
.btn-secondary { background: white; color: var(--green-700); border-color: var(--green-700); }
.btn-secondary:hover { background: var(--green-100); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--bone); border-color: var(--ink-400); }


/* styles/components/header.css */
/* ============ LOGO ============ */
.logo {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--green-700);
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo small {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-400);
  display: block;
  font-weight: 500;
  margin-top: 3px;
}

/* ============ <summary> RESET ============ */
/* The user/cart/date popovers use <details>/<summary> so they work
   without JS. Strip the default disclosure marker so the trigger
   renders identically to the old <button> version. */
.user-anchor > summary,
.cart-anchor > summary,
.date-picker > summary {
  list-style: none;
  cursor: pointer;
}
.user-anchor > summary::-webkit-details-marker,
.cart-anchor > summary::-webkit-details-marker,
.date-picker > summary::-webkit-details-marker {
  display: none;
}

/* ============ ICON BUTTON (header) ============ */
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  position: relative;
  transition: all 0.15s;
  flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--green-700); color: var(--green-700); }
.icon-btn .count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--bloom);
  color: white;
  font-size: 10px;
  font-weight: 500;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ============ DATE TRIGGER ============ */
.date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: white;
  color: var(--green-900);
  border: 1px solid var(--green-700);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.date-trigger:hover { background: var(--green-100); }
.date-trigger .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  flex-shrink: 0;
}
.date-trigger .label { color: var(--ink-400); font-weight: 400; }

/* ============ SESSION BANNERS ============ */
/* Stack of session-scoped notices above the topbar. Scroll with the
   page so the sticky nav remains clean. */
.session-banners { display: flex; flex-direction: column; }
.session-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 24px;
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.session-banner__text { font-weight: 500; }
.session-banner__action {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.session-banner__action:hover { opacity: 1; }
.session-banner,
.session-banner--info    { background: var(--green-100); color: var(--green-900); }
.session-banner--warning { background: var(--warn-soft);   color: var(--warn); }
.session-banner--success { background: var(--green-100); color: var(--green-700); }
.session-banner--danger  { background: var(--bloom-soft);  color: var(--bloom); }

/* ============ HEADER ============ */
.nav { background: white; position: relative; }
.nav .top-row {
  display: flex;
  align-items: center;
  padding: 18px 32px;
  gap: 24px;
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--bone);
}
.nav .logo-block { z-index: 2; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.nav .logo-icon { width: 40px; height: 40px; object-fit: contain; }
.nav .top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  margin-left: auto;
}
.nav .floral-bg {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 130px;
  opacity: 0.36;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1280px) {
  .nav .floral-bg { right: 260px; width: 380px; opacity: 0.28; }
}
@media (max-width: 1024px) {
  .nav .floral-bg { display: none; }
}

/* ============ NAV ROW ============ */
.nav .nav-row {
  display: flex;
  align-items: center;
  padding: 0 32px;
}
.nav .menu { display: flex; gap: 4px; flex: 1; }
.nav .menu-item { position: relative; }
.nav .menu a {
  display: block;
  padding: 16px 18px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}
.nav .menu a:hover { color: var(--green-700); }
.nav .menu a.active { color: var(--green-700); border-bottom-color: var(--green-700); }
.nav .menu-item.is-open a { color: var(--green-700); border-bottom-color: var(--green-700); background: white; }
.nav .nav-row .right { font-size: 13px; color: var(--ink-400); padding: 16px 0; }

/* ============ SUBMENU ============ */
.submenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: white;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 32px -16px rgba(20, 66, 42, 0.18);
  padding: 20px 32px;
  display: none;
  z-index: 20;
}
.nav.has-open-submenu .submenu.is-active { display: block; }

.submenu-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.submenu-head h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--green-900);
}
.submenu-head .meta { font-size: 12px; color: var(--ink-400); }

.submenu-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 1200px) { .submenu-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px)  { .submenu-grid { grid-template-columns: repeat(2, 1fr); } }

.submenu-tile {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s;
  cursor: pointer;
  min-height: 96px;
  position: relative;
}
.submenu-tile:hover {
  background: var(--green-100);
  border-color: var(--green-500);
  transform: translateY(-1px);
}
.submenu-tile .tile-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: auto;
}
.submenu-tile .color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.submenu-tile .name { font-size: 14px; font-weight: 500; line-height: 1.25; }
.submenu-tile .count { font-size: 12px; color: var(--ink-400); margin-top: 12px; }
.submenu-tile .count strong { color: var(--green-700); font-weight: 500; }
.submenu-tile.is-active {
  background: white;
  border-color: var(--green-700);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--green-700);
}
.submenu-tile.is-active::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
}
.submenu-tile.tile-all {
  background: var(--green-700);
  border-color: var(--green-700);
  color: white;
}
.submenu-tile.tile-all:hover { background: var(--green-900); }
.submenu-tile.tile-all .count { color: rgba(255,255,255,0.7); }
.submenu-tile.tile-all .count strong { color: white; }


/* styles/components/breadcrumb.css */
/* ============ BREADCRUMB STRIP ============ */
.crumbstrip {
  display: flex;
  align-items: center;
  padding: 9px 32px;
  background: var(--bone-200);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  gap: 8px;
}
.crumbstrip a {
  color: var(--ink-600);
  text-decoration: none;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.crumbstrip a:hover { color: var(--green-700); }
.crumbstrip a svg { opacity: 0.6; }
.crumbstrip .sep {
  color: var(--ink-400);
  font-size: 11px;
  user-select: none;
}
.crumbstrip .current {
  color: var(--bloom);
  font-weight: 500;
}
.crumbstrip .right {
  margin-left: auto;
  color: var(--ink-400);
  display: flex;
  align-items: center;
  gap: 6px;
}
.crumbstrip .right .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-500);
}

.color-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 32px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.cs-tiles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-tile,
.cs-tile:link,
.cs-tile:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bone);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.cs-tile:hover {
  border-color: var(--green-700);
  background: white;
}
.cs-tile.active,
.cs-tile.active:link,
.cs-tile.active:visited {
  background: var(--green-700);
  border-color: var(--green-700);
  color: white;
}
.cs-tile .cs-code {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--ink-400);
  background: white;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.cs-tile.active .cs-code {
  color: var(--green-900);
}
.cs-tile .cs-name { font-weight: 500; }
.cs-tile .cs-count {
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
}
.cs-tile.active .cs-count { color: rgba(255, 255, 255, 0.8); }


/* styles/components/topbar.css */
/* ============ TOP BAR ============ */
/* Sticky toolbar — filters button, result count, sort, view-switch.
   Sticks to the top of .content on desktop (which has overflow-y:auto)
   and to the viewport on mobile (where body scrolls instead). The
   translucent background + blur keep the labels readable as the
   product grid slides underneath.
   Z-index 20 so it paints above sticky children of the grid but below
   the header chrome (.nav at z-index 100) — scrolling past the nav
   would otherwise overlap the delivery popover / mini-cart. */
.topbar {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* ============ PILL SELECT ============ */
.pill-select { position: relative; }
.pill-select .trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}
.pill-select .trigger:hover { border-color: var(--green-700); }
.pill-select .trigger .label { color: var(--ink-400); font-weight: 400; }
.pill-select .trigger svg { opacity: 0.5; }
.pill-select .popover {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 32px -16px rgba(20, 66, 42, 0.25);
  z-index: 10;
}
.pill-select.is-open .popover { display: block; }
.pill-select .popover button,
.pill-select .popover a,
.pill-select .popover a:link,
.pill-select .popover a:visited {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  display: block;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pill-select .popover button:hover,
.pill-select .popover a:hover { background: var(--bone); }
.pill-select .popover button.active,
.pill-select .popover a.active,
.pill-select .popover a.active:link,
.pill-select .popover a.active:visited { background: var(--green-100); color: var(--green-900); font-weight: 500; }

.sort-select .popover { right: 0; left: auto; min-width: 220px; }

/* ============ RESULT COUNT ============ */
.result-count {
  font-size: 14px;
  color: var(--ink-600);
}
.result-count strong { color: var(--ink); font-weight: 500; }

/* ============ VIEW SWITCH ============ */
.view-switch {
  display: inline-flex;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
}
.view-switch button,
.view-switch a,
.view-switch a:link,
.view-switch a:visited {
  width: 34px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  text-decoration: none;
}
.view-switch button:hover,
.view-switch a:hover { color: var(--green-700); background: var(--bone); }
.view-switch button.active,
.view-switch a.active,
.view-switch a.active:link,
.view-switch a.active:visited {
  background: var(--green-700);
  color: white;
}

/* ============ ICON BUTTON PLAIN ============ */
.icon-btn-plain {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: white;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--ink-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.icon-btn-plain:hover { border-color: var(--green-700); color: var(--green-700); }


/* styles/components/sidebar.css */
/* ============ SIDEBAR ============ */
.sidebar {
  display: flex;
  border-right: 1px solid var(--line);
  flex-shrink: 0;
  background: white;
}

/* ============ RAIL ============ */
.rail {
  width: 72px;
  background: var(--bone);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 0 0 0;
  flex-shrink: 0;
}
.rail-btn {
  background: transparent;
  border: none;
  padding: 14px 6px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-600);
  border-left: 3px solid transparent;
  margin-left: -1px;
  transition: all 0.15s;
  position: relative;
}
.rail-btn:hover { color: var(--green-700); }
.rail-btn.active {
  color: var(--green-900);
  background: white;
  border-left-color: var(--green-700);
}
.rail-btn .icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-btn .label { font-size: 11px; font-weight: 500; line-height: 1.2; }
.rail-btn .badge-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--bloom);
  color: white;
  font-size: 10px;
  font-weight: 500;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ============ PANEL ============ */
.panel {
  width: 280px;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.22s ease, opacity 0.18s ease;
}

.sidebar.is-collapsed .panel {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.sidebar.is-collapsed .rail-btn.active {
  background: transparent;
  color: var(--ink-600);
  border-left-color: transparent;
}
.panel-content { display: none; }
.panel-content.active { display: block; }

/* ===== Editorial header per pane ===== */
.pane-head {
  padding: 20px 20px 14px;
  background: linear-gradient(180deg, var(--bone), white);
  border-bottom: 1px solid var(--line);
}
.pane-head .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-700);
  font-weight: 500;
  margin-bottom: 4px;
}
.pane-head h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--green-900);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.pane-head .sub { font-size: 13px; color: var(--ink-400); margin-top: 6px; }
.pane-head .reset,
.pane-head .reset:link,
.pane-head .reset:visited {
  margin-top: 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-400);
  cursor: pointer;
  text-decoration: underline;
  display: inline-block;
  padding: 0;
  text-align: left;
  padding: 0;
}
.pane-head .reset:hover { color: var(--bloom); }

.pane-body { padding: 16px 20px 24px; }

/* ===== TAB 1: Groepen ===== */
.group-list { display: flex; flex-direction: column; gap: 4px; }
.group-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bone);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.group-item:hover { background: var(--green-100); }
.group-item.active {
  background: white;
  border-color: var(--green-700);
  color: var(--green-900);
  font-weight: 500;
  box-shadow: 0 1px 0 var(--green-100);
}
.group-item .marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-400);
  flex-shrink: 0;
}
.group-item.active .marker { background: var(--green-500); }
.group-item .name { flex: 1; }
.group-item .count {
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
}
.group-item.active .count { color: var(--green-700); }

/* ===== TAB 2: Filters ===== */
.panel .search-input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='6' cy='6' r='4.5' stroke='%238a8a82' stroke-width='1.3'/%3E%3Cpath d='M9.5 9.5l3 3' stroke='%238a8a82' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  margin-bottom: 18px;
}
.panel .search-input:focus { border-color: var(--green-700); background-color: white; }

.filter-section { padding: 14px 0; border-top: 1px solid var(--line); }
.filter-section:first-of-type { border-top: none; padding-top: 0; }
.filter-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-700);
  margin-bottom: 12px;
}
.filter-section summary::-webkit-details-marker { display: none; }
.filter-section summary .chev { color: var(--ink-400); transition: transform 0.2s; }
.filter-section[open] summary .chev { transform: rotate(180deg); }

.check-list { display: flex; flex-direction: column; gap: 2px; }
.check-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-600);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.12s;
}
.check-list label:hover { background: var(--bone); }
.check-list label:has(input:checked) { color: var(--green-900); }
.check-list input[type='checkbox'] {
  width: 14px;
  height: 14px;
  accent-color: var(--green-700);
  cursor: pointer;
}
.check-list .name { flex: 1; min-width: 0; }
.check-list .swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.check-list .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
}

.range-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 2px;
}
.range-filter input[type="number"] {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bone);
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.range-filter input[type="number"]:focus {
  border-color: var(--green-700);
  background: white;
}
.range-filter .range-dash {
  color: var(--ink-400);
  font-size: 13px;
  flex-shrink: 0;
}
.range-filter .range-unit {
  font-size: 12px;
  color: var(--ink-400);
  flex-shrink: 0;
  padding-left: 2px;
}

.filter-empty {
  padding: 16px 8px;
  font-size: 13px;
  color: var(--ink-400);
  font-style: italic;
  text-align: center;
}

/* ===== FILTER FORM APPLY BAR ===== */
.filter-form { display: flex; flex-direction: column; }
.filter-apply-bar {
  position: sticky;
  bottom: 0;
  margin: 20px -20px -24px;
  padding: 14px 20px;
  background: white;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 12px -8px rgba(20, 66, 42, 0.15);
}
.filter-apply {
  width: 100%;
  padding: 12px 18px;
  font-size: 14px;
}

/* styles/components/card.css */
/* ============ BADGES ============ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
}
.badge-new { background: var(--green-100); color: var(--green-900); }
.badge-bloom { background: var(--bloom-soft); color: var(--bloom); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-ghost { background: var(--bone-200); color: var(--ink-600); }
.badge-stack {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  z-index: 2;
}
.badge-row {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
}

.color-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.placeholder-img {
  background: linear-gradient(135deg, var(--bone-200), var(--green-100));
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder-img,
a.placeholder-img,
a.placeholder-img:hover,
a.thumb,
a.thumb:hover,
.mc-item .thumb,
.cart-item .thumb {
  text-decoration: none;
}
.placeholder-img .initials,
.thumb .initials,
.mc-item .thumb .initials {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-500, #5a5a55);
  text-transform: uppercase;
  text-decoration: none;
}
.placeholder-img .initials { font-size: 48px; }
.thumb .initials,
.mc-item .thumb .initials { font-size: 18px; }
.cart-item .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bone-200), var(--green-100));
}

/* ============ HOME / LANDING ============ */
.home {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.home-hero {
  background: linear-gradient(135deg, var(--bone-200, #f0ebde), var(--green-100, #d8e8d6));
  border-radius: 16px;
  padding: 48px 56px;
  display: flex;
  align-items: center;
  position: relative;
}
.home-hero-body { max-width: 560px; }
.home-hero .eyebrow {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-900, #1a1a1a);
  margin-bottom: 12px;
}
.home-hero .eyebrow .brand-flowers { color: var(--green-700, #1f5e3a); }
.home-hero h1 {
  font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink-900, #1a1a1a);
  margin: 0 0 14px;
}
.home-lede {
  font-size: 16px;
  color: var(--ink-600, #5a5a55);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 48ch;
}
.home-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.home-stat {
  background: #fff;
  border: 1px solid var(--bone-300, #e5e1d6);
  border-radius: 10px;
  padding: 18px 20px;
}
.home-stat .label {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-500, #5a5a55);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.home-stat .value {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink-900, #1a1a1a);
  font-weight: 500;
  line-height: 1;
}
.home-stat .sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-500, #5a5a55);
}
.home-stat.alert {
  border-color: rgba(160, 40, 80, 0.4);
  background: linear-gradient(180deg, #fdf2f5 0%, #fff 100%);
}
.home-stat.alert .value { color: #a02850; }

.home-categories h2,
.home-links h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-900, #1a1a1a);
  margin: 0 0 16px;
}

.home-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.home-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--bone-300, #e5e1d6);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 18px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.home-category:hover {
  border-color: var(--green-700, #1f5e3a);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.home-category .count {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-500, #5a5a55);
  background: var(--bone-200, #f0ebde);
  border-radius: 999px;
  padding: 2px 10px;
}
.home-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.home-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--bone-300, #e5e1d6);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.home-link:hover {
  border-color: var(--green-500, #2d8550);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.home-link .icon { color: var(--green-700, #1f5e3a); display: flex; }
.home-link .name { flex: 1; font-size: 14px; }
.home-link .badge {
  font-size: 12px;
  background: var(--bone-200, #f0ebde);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--ink-600, #5a5a55);
}
.home-link .badge.new { background: #e7f1ea; color: #1f5e3a; }

@media (max-width: 768px) {
  .home-hero { padding: 32px 24px; }
  .home-hero h1 { font-size: 30px; }
}

/* ============ PAGINATION ============ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  flex-wrap: wrap;
}
.pg-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pg-step,
.pg-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  justify-content: center;
  transition: all 0.15s;
}
.pg-step:hover,
a.pg-page:hover {
  border-color: var(--green-700);
  color: var(--green-700);
}
.pg-page.is-active {
  background: var(--green-700);
  border-color: var(--green-700);
  color: white;
  cursor: default;
}
.pg-step.is-disabled {
  color: var(--ink-400);
  border-color: var(--line);
  background: var(--bone);
  cursor: not-allowed;
  pointer-events: none;
}
.pg-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--ink-400);
  font-size: 14px;
}

/* ============ CATALOG NOTICE ============
   Page-level interrupt rendered centered in the content area instead
   of the product grid (see .Notice in products.html). Fills the
   available height and centers a single card so the message sits in
   the middle of the catalog viewport. Two tones, switched by the
   backend-supplied level: .is-warning (amber) and .is-error (red). */
.catalog-notice {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}
.catalog-notice .cn-card {
  max-width: 460px;
  text-align: center;
  background: white;
  border: 1px solid var(--green-100);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: 0 1px 2px rgba(20, 66, 42, 0.04);
}
.catalog-notice .cn-icon {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.catalog-notice .cn-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--green-900);
}
.catalog-notice .cn-message {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-600);
}
.catalog-notice.is-warning .cn-card { border-color: var(--warn); }
.catalog-notice.is-warning .cn-icon { background: var(--warn-soft); color: var(--warn); }
.catalog-notice.is-error .cn-card { border-color: var(--bloom); }
.catalog-notice.is-error .cn-icon { background: var(--bloom-soft); color: var(--bloom); }

/* ============ PRODUCT GRID ============ */
.product-grid { padding: 20px 24px; }

/* ===== LAYOUT 1: DETAIL — large cards with full spec block =====
   auto-fill keeps each card ≥ 480px wide and wraps to 1/2/3/4… cols
   as the viewport grows; no manual breakpoints needed. The card
   image is enlarged here (see `.product-grid.view-detail .card .img`)
   so the photo reads first — the customer asked for the detail view
   to be photo-led. */
.product-grid.view-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 16px;
}
.product-grid.view-detail .card .img {
  width: 220px;
}
/* The pack-badge pill is redundant in detail view because the spec
   table already lists the loadcarrier. Promo badges stay on the image. */
.product-grid.view-detail .card .img .pack-badge {
  display: none;
}

/* ===== LAYOUT 2: CARDS — smaller cards, no spec table ===== */
.product-grid.view-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 1700px) { .product-grid.view-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .product-grid.view-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .product-grid.view-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product-grid.view-cards .card { flex-direction: column; }
.product-grid.view-cards .card .img {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.product-grid.view-cards .card .body { display: flex; flex-direction: column; gap: 4px; }
.product-grid.view-cards .card .top {
  padding: 10px 12px 0;
  border-bottom: none;
}
.product-grid.view-cards .card .name { font-size: 14px; margin-bottom: 0; }
.product-grid.view-cards .card .meta { font-size: 12px; padding: 0 12px; }
.product-grid.view-cards .card .specs { display: none; }
.product-grid.view-cards .card .footer {
  padding: 8px 12px 12px;
  background: transparent;
  border-top: none;
}
.product-grid.view-cards .card .price { font-size: 15px; }

/* ===== LAYOUT 3: LIST — horizontal rows with thumbnail ===== */
.product-grid.view-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 0;
  margin: 20px 24px;
}
.product-grid.view-list .card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s;
}
.product-grid.view-list .card:hover {
  background: var(--bone);
  box-shadow: none;
}
.product-grid.view-list .card:last-child { border-bottom: none; }
.product-grid.view-list .card .img {
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.product-grid.view-list .card .img .pack-badge,
.product-grid.view-list .card .img .badge-stack { display: none; }
.product-grid.view-list .card .badge-row { display: flex; margin-top: 4px; }
.product-grid.view-list .card .body { display: contents; }
.product-grid.view-list .card .top {
  padding: 0;
  border: none;
}
.product-grid.view-list .card .name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.product-grid.view-list .card .meta {
  font-size: 12px;
  margin-top: 2px;
}
.product-grid.view-list .card .specs { display: none; }
.product-grid.view-list .card .footer {
  display: contents;
}
.product-grid.view-list .card .price {
  font-size: 16px;
  white-space: nowrap;
}
.product-grid.view-list .card .price-was {
  font-size: 12px;
  display: block;
}

/* ===== LAYOUT 4: COMPACT — text-only rows, no images/specs ===== */
.product-grid.view-compact {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  margin: 20px 24px;
}
.product-grid.view-compact .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.12s;
}
.product-grid.view-compact .card:hover {
  background: var(--bone);
  box-shadow: none;
}
.product-grid.view-compact .card:last-child { border-bottom: none; }
.product-grid.view-compact .card .img { display: none; }
.product-grid.view-compact .card .badge-row { display: flex; }
.product-grid.view-compact .card .body { display: contents; }
.product-grid.view-compact .card .top {
  padding: 0;
  border: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.product-grid.view-compact .card .name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-grid.view-compact .card .meta {
  font-size: 12px;
  color: var(--ink-400);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-grid.view-compact .card .specs { display: none; }
.product-grid.view-compact .card .footer { display: contents; }
.product-grid.view-compact .card .price {
  font-size: 14px;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.product-grid.view-compact .card .price-was { display: none; }

/* ============ CARD E ============ */
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
  position: relative;
}
.card:hover {
  border-color: var(--green-500);
  box-shadow: 0 8px 28px -14px rgba(20, 66, 42, 0.22);
}
.card .img {
  width: 140px;
  flex-shrink: 0;
  aspect-ratio: 1;
  position: relative;
}
@media (max-width: 480px) { .card .img { width: 110px; } }

.card .body { flex: 1; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.card .top { padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.card .name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--green-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 41px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.card a.name, .card a.name:hover { text-decoration: none; }
.card .meta {
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.card .meta .sep { color: var(--line); }

/* Colli (pack contents) + available-stock, surfaced in every layout
   except detail — detail already lists both in its full spec table, so
   .keyspecs is hidden there to avoid duplication. Lives inside .top so
   it stays within a single grid cell in the list/compact layouts and
   can't disturb their column tracks. */
.card .keyspecs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 12px;
  color: var(--ink-400);
  margin-top: 4px;
  min-width: 0;
}
.card .keyspecs .ks { white-space: nowrap; }
.card .keyspecs .v { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.product-grid.view-detail .card .keyspecs { display: none; }
.product-grid.view-cards .card .keyspecs { padding: 0 12px; }
.product-grid.view-compact .card .keyspecs { margin-top: 0; }

.card .specs {
  padding: 12px 18px;
  font-size: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  align-content: center;
}
.card .specs .row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  justify-content: flex-start;
}
.card .specs dt { color: var(--ink-400); white-space: nowrap; font-weight: 400; }
.card .specs dd { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

.card .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bone);
  border-top: 1px solid var(--line);
  gap: 8px;
}
.card .price {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--bloom);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Pack badge on photo */
.card .img .pack-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  color: var(--green-900);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
  border: 0.5px solid var(--line);
}
.card .price small {
  font-size: 11px;
  color: var(--ink-400);
  font-family: var(--font-sans);
  font-weight: 400;
}
.card .price-was {
  font-size: 12px;
  color: var(--ink-400);
  text-decoration: line-through;
  font-family: var(--font-sans);
  display: block;
  line-height: 1;
}

/* ============ QUANTITY INPUT ============ */
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  flex-shrink: 0;
}
.qty button {
  width: 26px;
  height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink-600);
  font-size: 14px;
  flex-shrink: 0;
}
.qty button[data-qty-step]:hover { background: var(--bone-200); color: var(--green-700); }
.qty input {
  width: 32px;
  height: 30px;
  border: none;
  text-align: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  outline: none;
  -moz-appearance: textfield;
  flex-shrink: 0;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty .unit {
  padding: 0 8px;
  font-size: 11px;
  color: var(--ink-400);
  border-left: 1px solid var(--line);
  height: 30px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.qty .qty-add {
  width: 34px;
  height: 30px;
  padding: 0;
  border: none;
  border-left: 1px solid var(--green-700);
  background: var(--green-700);
  color: white;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  transition: background 0.15s;
}
.qty .qty-add svg { display: block; }
.qty .qty-add:hover { background: var(--green-900); color: white; }
.qty .qty-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============ CARD STATES ============ */
.card.is-out-of-stock { opacity: 0.55; cursor: not-allowed; }
.card.is-out-of-stock:hover { transform: none; box-shadow: none; border-color: var(--line); }
.card.is-out-of-stock .img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(250, 248, 243, 0.4);
}
.card.is-out-of-stock .qty { display: none; }
.card.is-out-of-stock .footer { justify-content: space-between; }
.card.is-out-of-stock .footer-label { font-size: 12px; color: var(--ink-400); font-style: italic; }

.card.is-in-cart { border-color: var(--green-500); }
.card.is-in-cart .footer { background: var(--green-100); }
.card.is-in-cart .qty { border-color: var(--green-500); }
.card.is-in-cart .price { color: var(--bloom); }

.card.is-on-sale .price-current { color: var(--bloom); }


/* styles/components/minicart.css */
/* ============ MINI CART ============ */
.cart-anchor { position: relative; }

.minicart {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -16px rgba(20, 66, 42, 0.22);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.cart-anchor[open] .minicart,
.cart-anchor.is-open .minicart,
.cart-anchor:hover .minicart,
.cart-anchor:focus-within .minicart {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.minicart::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: white;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}

.mc-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.mc-head h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--green-900);
}
.mc-head .meta { font-size: 12px; color: var(--ink-400); }

.mc-context {
  padding: 8px 20px;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-600);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mc-context .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-500);
}
.mc-context strong { color: var(--green-900); font-weight: 500; }

.mc-items {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px 0;
}
.mc-items::-webkit-scrollbar { width: 6px; }
.mc-items::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.mc-item {
  display: flex;
  gap: 12px;
  padding: 10px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s;
  cursor: pointer;
  position: relative;
}
.mc-item:hover { background: var(--bone); }
.mc-item::after {
  content: '\203A';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font-size: 18px;
  color: var(--green-700);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.mc-item:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.mc-item:hover .right { transform: translateX(-12px); }
.mc-item .right {
  text-align: right;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.mc-item .thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--bone-200), var(--green-100));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.mc-item .thumb.placeholder-img { opacity: 0.7; }
.mc-item .body { flex: 1; min-width: 0; }
.mc-item .name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mc-item .code {
  font-size: 11px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.mc-item .meta {
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.mc-item .meta .color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
}
.mc-item .pack {
  font-size: 11px;
  color: var(--ink-600);
  font-family: ui-monospace, monospace;
  margin-bottom: 2px;
  white-space: nowrap;
}
.mc-item .unit-price {
  font-size: 11px;
  color: var(--ink-400);
  white-space: nowrap;
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.mc-item .unit-price small { font-size: 10px; }
.mc-item .price {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--green-900);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.mc-summary {
  padding: 12px 20px;
  background: var(--bone);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
}
.mc-row .label { color: var(--ink-600); }
.mc-row .val {
  font-family: ui-monospace, monospace;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mc-row.total {
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}
.mc-row.total .label { color: var(--green-900); font-weight: 500; font-size: 14px; }
.mc-row.total .val {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--green-900);
  font-variant-numeric: tabular-nums;
}

.mc-actions {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px;
}
.mc-actions .btn { flex: 1; }


/* styles/components/userpop.css */
/* ============ USER POPOVER ============ */
.user-anchor { position: relative; }

.userpop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -16px rgba(20, 66, 42, 0.22);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  overflow: hidden;
}
.user-anchor[open] .userpop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.userpop::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: white;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
  z-index: 1;
}

/* User header block */
.up-head {
  padding: 20px 20px 16px;
  background: linear-gradient(180deg, var(--bone), white);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: center;
}
.up-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-700);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  flex-shrink: 0;
}
.up-info { min-width: 0; }
.up-info .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--green-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-info .meta {
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}
.up-info .email {
  font-size: 12px;
  color: var(--ink-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

/* Quick stats */
.up-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
}
.up-stat {
  padding: 12px 16px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.12s;
  cursor: pointer;
  position: relative;
}
.up-stat:hover { background: white; }
.up-stat + .up-stat { border-left: 1px solid var(--line); }
.up-stat .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  font-weight: 500;
  margin-bottom: 4px;
}
.up-stat .value {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--green-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.up-stat .sub { font-size: 11px; color: var(--ink-400); margin-top: 4px; }
.up-stat.alert .value { color: var(--bloom); }
.up-stat.alert .sub { color: var(--bloom); }

/* Menu list */
.up-menu { padding: 6px 0; }
.up-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14px;
  transition: background 0.12s;
  position: relative;
  cursor: pointer;
}
.up-menu a:hover { background: var(--bone); }
.up-menu a .icon {
  width: 18px;
  height: 18px;
  color: var(--ink-400);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.up-menu a:hover .icon { color: var(--green-700); }
.up-menu a .name { flex: 1; }
.up-menu a .badge {
  font-size: 11px;
  background: var(--bone-200);
  color: var(--ink-600);
  padding: 2px 7px;
  border-radius: 999px;
  font-family: ui-monospace, monospace;
}
.up-menu a .badge.new { background: var(--bloom); color: white; }

.up-divider { height: 1px; background: var(--line); margin: 4px 0; }

.up-languages {
  display: flex;
  gap: 6px;
  padding: 10px 20px;
  background: var(--bone);
  margin: 0;
}
.up-lang {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-600);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.up-lang:hover { border-color: var(--green-500); color: var(--green-700); }
.up-lang.active {
  border-color: var(--green-700);
  background: var(--green-50, #ecf5ef);
  color: var(--green-700);
  font-weight: 600;
}
.up-lang .flag { font-size: 16px; line-height: 1; }
.up-lang .code { text-transform: uppercase; letter-spacing: 0.05em; }

/* Footer */
.up-foot {
  padding: 10px 20px 14px;
  border-top: 1px solid var(--line);
  background: var(--bone);
}
.up-foot .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-400);
  margin-bottom: 8px;
}
.up-foot .row a { color: var(--ink-600); text-decoration: none; }
.up-foot .row a:hover { color: var(--green-700); }
.up-logout-form { margin: 0; }
.up-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--bloom);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.up-logout:hover { background: var(--bone); }
.up-logout svg { color: var(--bloom); flex-shrink: 0; }


/* styles/components/date-picker.css */
/* ============ DATE PICKER ============ */
.date-picker { position: relative; }

.date-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -16px rgba(20, 66, 42, 0.22);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s;
  overflow: hidden;
}
.date-picker[open] .date-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.date-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: white;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
  z-index: 1;
}

.dp-head {
  padding: 18px 20px 14px;
  background: linear-gradient(180deg, var(--bone), white);
  border-bottom: 1px solid var(--line);
}
.dp-head .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-700);
  font-weight: 500;
  margin-bottom: 4px;
}
.dp-head h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--green-900);
}
.dp-head .sub {
  font-size: 13px;
  color: var(--ink-400);
  margin-top: 4px;
}

.dp-quick {
  padding: 10px 8px;
}
.dp-day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.12s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.dp-day:hover { background: var(--bone); }
.dp-day.active { background: var(--green-100); }
.dp-day.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dp-day.disabled:hover { background: transparent; }
.dp-day .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-400);
  flex-shrink: 0;
}
.dp-day.active .dot { background: var(--green-500); }
.dp-day .name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  flex: 1;
}
.dp-day.active .name { color: var(--green-900); }
.dp-day .date {
  font-size: 12px;
  color: var(--ink-400);
  font-family: ui-monospace, monospace;
}
.dp-day .countdown {
  display: block;
  font-size: 11px;
  color: var(--bloom);
  margin-top: 2px;
  font-weight: 500;
}

.dp-empty {
  padding: 32px 24px 28px;
  text-align: center;
}
.dp-empty .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-400);
}
.dp-empty-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--green-900);
  margin-bottom: 6px;
}
.dp-empty-sub {
  font-size: 13px;
  color: var(--ink-600);
  line-height: 1.5;
}


/* styles/components/search.css */
/* ============ SEARCH TYPEAHEAD ============ */
.search-wrap { position: relative; }

.search-toggle {
  width: 280px;
  height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: white;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--ink);
  transition: border-color 0.15s;
}
.search-toggle:focus-within { border-color: var(--green-700); }
.search-toggle svg { color: var(--ink-400); flex-shrink: 0; }

.search-wrap .search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 0;
}

/* ============ MOBILE AFFORDANCES ============
   Hidden on desktop; activated by the mobile media query below. */
.mobile-filters-btn { display: none; }
.sidebar-backdrop { display: none; }
.sidebar-close { display: none; }

/* ============================================================
   MOBILE (≤768px) — reflow the whole shop for touch viewports.
   Everything on this page exists at desktop AND mobile; this
   block just re-stacks it to fit a narrow screen.
   ============================================================ */
@media (max-width: 768px) {
  /* Body drops the fixed-chrome + inner-scroll pattern; the whole
     document scrolls normally on mobile, which is what users expect
     and what lets pull-to-refresh / address-bar hide work right. */
  body { overflow: auto; display: block; height: auto; min-height: 100%; }

  /* Header top-row wraps: logo on row 1, actions row 2. */
  .nav .top-row { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .nav .logo-block { flex: 0 0 auto; }
  .nav .logo-icon { width: 32px; height: 32px; }
  .logo { font-size: 17px; }
  .logo small { font-size: 11px; }
  .nav .floral-bg { display: none; }

  .nav .top-actions {
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Date trigger shrinks but keeps value visible. */
  .date-trigger { padding: 8px 10px; font-size: 13px; }
  .date-trigger .label { display: none; }

  /* Search owns its own row so the typing target is finger-sized. */
  .search-wrap { flex: 1 1 100%; order: 2; }
  .search-toggle { width: 100%; }

  /* Popovers never exceed the viewport (otherwise they clip or force
     horizontal scroll). Anchored to the icon's right edge, they
     extend leftward into the available width. */
  .minicart, .userpop, .date-popover {
    width: min(360px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
  .mc-items { max-height: 50vh; }

  /* Category nav becomes a horizontal swipe list. */
  .nav .nav-row { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav .nav-row::-webkit-scrollbar { display: none; }
  .nav .menu { flex-wrap: nowrap; padding: 0 12px; }
  .nav .menu a { padding: 12px 12px; font-size: 14px; white-space: nowrap; }
  .nav .nav-row .right { display: none; }

  /* Submenu: vertical-ish 2-column tile grid. */
  .submenu { padding: 14px 16px; }
  .submenu-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Breadcrumb + packaging strips reflow. */
  .crumbstrip { padding: 8px 16px; flex-wrap: wrap; font-size: 12px; }
  .crumbstrip .right { margin-left: 0; width: 100%; order: 2; }
  .color-strip {
    padding: 10px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cs-tiles {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .cs-tiles::-webkit-scrollbar { display: none; }
  .cs-tile { flex-shrink: 0; }

  /* Products page: sidebar becomes an off-canvas drawer.
     Desktop's collapse behavior is irrelevant here — on mobile the
     panel is always shown when the drawer is open. */
  .page { display: block; }
  .page .content { height: auto; overflow: visible; }

  .page .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    background: white;
    box-shadow: 6px 0 24px -8px rgba(20, 66, 42, 0.28);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    max-width: 90vw;
  }
  .page .sidebar.is-open { transform: translateX(0); }
  /* Inside the drawer, ignore the desktop collapse state and let the
     panel flex to fill whatever width the drawer has. */
  .page .sidebar.is-collapsed .panel,
  .page .sidebar .panel {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    opacity: 1;
    pointer-events: auto;
    overflow-y: auto;
    max-height: 100vh;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 66, 42, 0.35);
    z-index: 299;
  }
  .sidebar.is-open + .sidebar-backdrop { display: block; }

  .sidebar-close {
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    background: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--ink-600);
    cursor: pointer;
    z-index: 2;
  }

  .mobile-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
  }
  .mobile-filters-btn:hover { border-color: var(--green-700); color: var(--green-700); }

  /* Topbar controls wrap and shrink. */
  .topbar { padding: 10px 16px; gap: 8px; flex-wrap: wrap; }
  .topbar-right { gap: 8px; }
  .view-switch button,
  .view-switch a { width: 30px; height: 28px; }
  .pill-select .trigger { padding: 7px 10px; }
  .pill-select .trigger .label { display: none; }

  /* Product grid paddings + card density. */
  .product-grid { padding: 12px 12px; }
  .product-grid.view-cards {
    padding: 12px 12px;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* On mobile the detail grid collapses to one column; the 480px
     minmax floor would otherwise force a single column wider than
     the viewport and cause horizontal scroll. */
  .product-grid.view-detail {
    padding: 12px;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
  }
  /* And the detail card image shrinks on mobile so text doesn't get
     squeezed below ~140px wide. */
  .product-grid.view-detail .card .img { width: 140px; }
  .product-grid.view-list,
  .product-grid.view-compact { margin: 12px; }

  /* list/compact rows re-flow to a stacked layout so the price +
     add-to-cart footer lives on its own row instead of squeezing
     into a 4-column grid that overflows. */
  .product-grid.view-list .card {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 10px;
    padding: 10px 12px;
  }
  .product-grid.view-list .card .img { width: 56px; height: 56px; }
  .product-grid.view-list .card .body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .product-grid.view-list .card .footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 6px;
  }
  .product-grid.view-compact .card {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    padding: 10px 12px;
  }
  .product-grid.view-compact .card .body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .product-grid.view-compact .card .footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 4px;
  }

  /* Card E tightens. */
  .card .img { width: 110px; }
  .card .top { padding: 12px 14px 8px; }
  .card .name { font-size: 15px; min-height: 0; }
  .card .specs { padding: 10px 14px; grid-template-columns: 1fr 1fr; }
  .card .footer { padding: 10px 14px; flex-wrap: wrap; }

  /* Cart table → stacked cards (no data-label trickery needed; the
     existing td text is human-readable on its own). */
  .page-no-sidebar > .content { padding: 20px 16px 32px; }
  .cart-head h1 { font-size: 22px; }
  /* Stack the cart sidebar below the products on narrow screens — the
     summary card stops being sticky so the customer can scroll past
     it normally. */
  .cart-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .cart-summary { position: static; }

  .cart-table,
  .cart-table thead,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td {
    display: block;
    width: 100%;
  }
  .cart-table thead { display: none; }
  .cart-table { border-radius: var(--radius-md); }
  .cart-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }
  .cart-table tr:last-child { border-bottom: none; }
  .cart-table td { padding: 3px 0; border: none; font-size: 14px; }
  .cart-table td .name { font-weight: 500; color: var(--green-900); }
  .cart-table td .btn { margin-top: 8px; }
  .cart-summary { max-width: none; }

  /* Product detail stacks — already does at 900px, just tighten. */
  .pd-grid { gap: 20px; }
  .pd-body h1 { font-size: 22px; }

  /* Checkout + order pages: collapse 2-col summary layouts to 1 col.
     The summary sticks-to-top only helps on desktop — on mobile it
     flows after the form/items, which is the expected read order. */
  .co-grid, .oc-grid { grid-template-columns: 1fr; gap: 16px; }
  .co-summary { position: static; }
  .oc-hero { padding: 18px 20px; flex-wrap: wrap; }
  .oc-hero-body h1 { font-size: 20px; }

  /* Toast: anchor to bottom edge, go full-width minus gutters. */
  .toast-host { left: 12px; right: 12px; bottom: 12px; }
  .toast { width: 100%; }
}

/* Narrow phones (≤420px): one column even for the cards view. */
@media (max-width: 420px) {
  .product-grid.view-cards { grid-template-columns: 1fr; }
  .submenu-grid { grid-template-columns: 1fr; }
}

/* Tiny phones (≤360px — iPhone SE 1st gen, small Androids). The
   customer has a very small phone; the goal here is "no horizontal
   scroll, readable font sizes, thumb-sized targets" — we trade
   visual density for legibility.
   Rules here are overrides *on top of* the ≤768px block above. */
@media (max-width: 360px) {
  /* Horizontal gutter halves so cards + table get every pixel. */
  body { font-size: 14px; }
  .product-grid { padding: 8px 8px; }
  .product-grid.view-detail { padding: 8px; gap: 8px; }
  .product-grid.view-list,
  .product-grid.view-compact { margin: 8px; }

  /* Detail card: photo shrinks again + specs compresses to 1 col so
     a 2-spec row with long values can't push the card past 100vw. */
  .product-grid.view-detail .card .img { width: 96px; }
  .card .specs { grid-template-columns: 1fr; gap: 4px; padding: 8px 12px; }
  .card .top { padding: 10px 12px 6px; }
  .card .footer { padding: 8px 12px; gap: 6px; }
  .card .name { font-size: 14px; }
  .card .price { font-size: 18px; }

  /* Cart: smaller row padding + slightly smaller font so the price
     cell doesn't get elided. */
  .cart-table tr { padding: 10px 10px; }
  .cart-head h1 { font-size: 20px; }
  .cart-summary { padding: 14px 16px; }

  /* Header chrome: logo gets a touch more room so the actions wrap
     cleanly below. */
  .nav .top-row { padding: 10px 12px; gap: 8px; }
  .logo { font-size: 15px; }
  .logo small { font-size: 10px; }

  /* Page-no-sidebar pages (cart, checkout, product detail) use an
     even tighter gutter so the content reaches the viewport edge
     rather than leaving an awkward frame. */
  .page-no-sidebar > .content { padding: 16px 12px 28px; }
}


/* styles/components/customer-switch.css */
/* ============ CUSTOMER CONTEXT SWITCHER (topbar) ============
   "Bestellen voor: <klant>" — lets a main customer switch the
   active ordering context between their own account and any of
   their sub customers. Built as a native <details> disclosure so
   it toggles without JS, matching the date-picker pattern in the
   header. Styled as a prominent green-bordered pill (same weight
   as the delivery-date trigger) because it's an active workflow
   control the user touches on every ordering session. */

.cust-switch {
  position: relative;
}

/* Trigger pill — mirrors .date-trigger so the two read as a pair. */
.cust-switch > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px 0 10px;
  background: white;
  color: var(--green-900);
  border: 1px solid var(--green-700);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: all 0.15s;
}
.cust-switch > summary::-webkit-details-marker { display: none; }
.cust-switch > summary:hover { background: var(--green-100); }

.cs-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--green-700);
  flex-shrink: 0;
}

.cs-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.cs-text .cs-label {
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--olive-700);
}
.cs-text .cs-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--green-900);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-chev {
  color: var(--green-700);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.cust-switch[open] > summary .cs-chev { transform: rotate(180deg); }

/* ---- Popover ---- */
.cust-switch-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px -16px rgba(0, 61, 39, 0.28);
  z-index: 50;
  overflow: hidden;
}
.cust-switch-pop::before {
  content: '';
  position: absolute;
  top: -6px;
  right: 16px;
  width: 12px;
  height: 12px;
  background: white;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}

.cs-pop-head {
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, var(--bone), white);
  border-bottom: 1px solid var(--line);
}
.cs-pop-head .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--olive-700);
  font-weight: 500;
  margin-bottom: 8px;
}
.cs-search {
  position: relative;
}
.cs-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: white;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a82' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 14px 14px;
}
.cs-search input::placeholder { color: var(--ink-400); }
.cs-search input:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px var(--green-100);
}

/* ---- Option list ---- */
.cs-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.cs-group-label {
  padding: 8px 10px 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  font-weight: 600;
}

.cs-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
}
.cs-option:hover { background: var(--bone); }
.cs-option.is-active { background: var(--green-100); }

.cs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bone-200);
  color: var(--green-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}
.cs-option.is-active .cs-avatar { background: var(--green-700); color: white; }

.cs-opt-main { flex: 1; min-width: 0; }
.cs-opt-name {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--green-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-opt-meta {
  display: block;
  font-size: 11px;
  color: var(--ink-600);
  margin-top: 1px;
}

/* Markup badge shown on sub-customer rows */
.cs-markup {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--olive-700);
  background: var(--olive-100);
  padding: 2px 7px;
  border-radius: 999px;
}

.cs-check {
  flex-shrink: 0;
  width: 18px;
  color: var(--green-700);
  display: none;
}
.cs-option.is-active .cs-check { display: inline-flex; }

/* ---- Footer ---- */
.cs-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--bone);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cs-foot .hint { font-size: 11px; color: var(--ink-400); }
.cs-foot a {
  font-size: 12px;
  font-weight: 500;
  color: var(--green-700);
  text-decoration: none;
}
.cs-foot a:hover { color: var(--green-900); text-decoration: underline; }

@media (max-width: 1100px) {
  .cust-switch > summary .cs-text { display: none; }
  .cust-switch > summary { padding: 0 10px; }
  .cust-switch-pop { width: 300px; }
}
.date-popover {
  left: 0;
}

.date-popover::before {
  left: 20px;
  right: auto;
}

.badge {
  font-size: 12px;
  font-weight: bold;
  padding: 8px 16px;
}