/* =====================================================================
   theme_coffee — "Coffee Zone" · design tokens + core components
   Source: Templates/NonLaPort - Coffee Zone/NonLa Port Redesign.dc.html
   Contract: resources/themes/theme_coffee/DESIGN.md  (read before editing)

   Load order in layouts/front-end/app.blade.php:
     …vendor css → theme.css → style.css → custom.css → coffee-fonts.css →
     coffee.css → coffee-layout.css → @stack('css_or_js') → @stack('css')
     (page css lives in either stack and wins over this file)
   ===================================================================== */

/* ---------- 1. Tokens ------------------------------------------------ */
:root {
  --cz-espresso: #241A14;
  --cz-espresso-2: #2F231B;
  --cz-lacquer: #9E2B25;
  --cz-lacquer-2: #7D1F1A;
  --cz-cream: #F7F1E6;
  --cz-paper: #EFE9DC;
  --cz-white: #FFFFFF;
  --cz-brass: #C9922E;
  --cz-brass-2: #D9BE86;
  --cz-sand: #E4DACA;
  --cz-sand-2: #D3C2A6;
  --cz-khaki: #CDBBA0;
  --cz-khaki-2: #C8B79C;
  --cz-sage: #BFC7B4;
  --cz-sage-2: #B9C4A8;
  --cz-ink: #241A14;
  --cz-ink-60: rgba(36, 26, 20, .6);
  --cz-ink-40: rgba(36, 26, 20, .4);
  --cz-ink-22: rgba(36, 26, 20, .22);
  --cz-ink-12: rgba(36, 26, 20, .12);
  --cz-ink-08: rgba(36, 26, 20, .08);
  --cz-cream-80: rgba(247, 241, 230, .8);
  --cz-cream-60: rgba(247, 241, 230, .6);
  --cz-cream-35: rgba(247, 241, 230, .35);
  --cz-cream-15: rgba(247, 241, 230, .15);
  --cz-ok: #3E6B48;
  --cz-ok-bg: rgba(62, 107, 72, .1);
  --cz-danger: #9E2B25;
  --cz-danger-bg: rgba(158, 43, 37, .08);
  --cz-brass-bg: rgba(201, 146, 46, .14);

  --cz-font-display: "Noto Serif Display", Georgia, "Times New Roman", serif;
  --cz-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cz-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cz-radius-sm: 3px;
  --cz-radius: 8px;
  --cz-radius-lg: 12px;
  --cz-shadow-sm: 0 1px 2px rgba(36, 26, 20, .06);
  --cz-shadow: 0 2px 10px rgba(36, 26, 20, .08);
  --cz-shadow-lg: 0 12px 32px rgba(36, 26, 20, .14);
  --cz-container: 1180px;
  --cz-topbar-h: 34px;
  --cz-header-h: 84px;
  --cz-page-bg: var(--cz-cream);

  /* Bridge: 6valley / Cartzilla / legacy B2B variables now resolve to the palette */
  --base: var(--cz-lacquer) !important;
  --base-2: var(--cz-espresso) !important;
  --web-primary: var(--cz-lacquer) !important;
  --web-primary-10: rgba(158, 43, 37, .10) !important;
  --web-primary-20: rgba(158, 43, 37, .20) !important;
  --web-primary-40: rgba(158, 43, 37, .40) !important;
  --web-secondary: var(--cz-espresso) !important;
  --primary: var(--cz-lacquer);
  --secondary: var(--cz-espresso);
  --b2b-orange: var(--cz-lacquer);
  --b2b-orange-hover: var(--cz-lacquer-2);
  --b2b-blue: var(--cz-espresso);
  --b2b-blue-light: rgba(36, 26, 20, .05);
  --b2b-border: var(--cz-ink-12);
  --b2b-bg-light: var(--cz-cream);
  --b2b-verified: var(--cz-ok);
}

/* ---------- 2. Base ------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  background: var(--cz-page-bg) !important;
  color: var(--cz-ink);
  font-family: var(--cz-font-body) !important;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--cz-ink); font-family: var(--cz-font-body); font-weight: 700; }
a { color: var(--cz-lacquer); }
a:hover, a:focus { color: var(--cz-lacquer-2); text-decoration: none; }
::selection { background: var(--cz-brass-2); color: var(--cz-ink); }
img { max-width: 100%; }
.text-primary, .web-text-primary, .text-base, .text-accent { color: var(--cz-lacquer) !important; }
.bg-primary, .web-bg-primary, .bg-base { background-color: var(--cz-lacquer) !important; }
.border-primary { border-color: var(--cz-lacquer) !important; }
.text-dark { color: var(--cz-ink) !important; }
.text-muted { color: var(--cz-ink-60) !important; }
.bg-light, .bg--light { background-color: var(--cz-cream) !important; }
.bg-white { background-color: var(--cz-white) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--cz-ink-12) !important; }
hr { border-top-color: var(--cz-ink-12); }

/* Cartzilla/Bootstrap re-skin */
.btn { font-family: var(--cz-font-body); font-weight: 700; border-radius: var(--cz-radius-sm); letter-spacing: .01em; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:focus { background-color: var(--cz-lacquer) !important; border-color: var(--cz-lacquer) !important; color: #fff !important; box-shadow: none !important; }
.btn-primary:hover { background-color: var(--cz-lacquer-2) !important; border-color: var(--cz-lacquer-2) !important; }
.btn-outline-primary { color: var(--cz-lacquer) !important; border-color: var(--cz-lacquer) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--cz-lacquer) !important; color: #fff !important; }
.btn-secondary, .btn-dark { background-color: var(--cz-espresso) !important; border-color: var(--cz-espresso) !important; color: var(--cz-cream) !important; }
.btn-secondary:hover, .btn-dark:hover { background-color: var(--cz-espresso-2) !important; border-color: var(--cz-espresso-2) !important; }
.btn-warning, .btn-info, .btn-success { background-color: var(--cz-lacquer) !important; border-color: var(--cz-lacquer) !important; color: #fff !important; }
.btn-light { background: var(--cz-white) !important; border-color: var(--cz-ink-12) !important; color: var(--cz-ink) !important; }
.btn-link { color: var(--cz-lacquer); font-weight: 700; }
.form-control, .custom-select, .form-select {
  border: 1px solid var(--cz-ink-22); border-radius: var(--cz-radius-sm); background-color: var(--cz-white); color: var(--cz-ink); font-family: var(--cz-font-body);
}
.form-control:focus, .custom-select:focus { border-color: var(--cz-lacquer); box-shadow: 0 0 0 3px rgba(158, 43, 37, .15); }
.form-control::placeholder { color: var(--cz-ink-40); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cz-lacquer); border-color: var(--cz-lacquer); }
.card { border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius); box-shadow: var(--cz-shadow-sm); background: var(--cz-white); }
.card-header { background: var(--cz-cream); border-bottom-color: var(--cz-ink-12); }
.badge { font-family: var(--cz-font-body); font-weight: 700; border-radius: var(--cz-radius-sm); letter-spacing: .02em; }
.badge-primary, .badge-info, .badge-success { background-color: var(--cz-lacquer) !important; color: #fff !important; }
.badge-warning { background-color: var(--cz-brass) !important; color: var(--cz-ink) !important; }
.badge-secondary, .badge-dark { background-color: var(--cz-espresso) !important; color: var(--cz-cream) !important; }
.badge-light { background-color: var(--cz-sand) !important; color: var(--cz-ink) !important; }
.breadcrumb { background: transparent; padding-inline-start: 0; font-size: 12.5px; }
.breadcrumb-item a { color: var(--cz-ink-60); }
.breadcrumb-item.active { color: var(--cz-ink); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cz-ink-40); }
.pagination .page-link { color: var(--cz-ink); border-color: var(--cz-ink-12); border-radius: var(--cz-radius-sm) !important; margin: 0 2px; font-weight: 600; background: var(--cz-white); }
.pagination .page-item.active .page-link { background: var(--cz-espresso); border-color: var(--cz-espresso); color: var(--cz-cream); }
.pagination .page-link:hover { background: var(--cz-cream); color: var(--cz-lacquer); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--cz-lacquer); border-bottom-color: var(--cz-lacquer); }
.nav-link { color: var(--cz-ink-60); }
.nav-link:hover { color: var(--cz-lacquer); }
.modal-content { border: none; border-radius: var(--cz-radius); box-shadow: var(--cz-shadow-lg); }
.modal-header { background: var(--cz-espresso); color: var(--cz-cream); border-bottom: none; border-radius: var(--cz-radius) var(--cz-radius) 0 0; }
.modal-header .modal-title, .modal-header .close { color: var(--cz-cream); text-shadow: none; opacity: 1; }
.modal-footer { border-top-color: var(--cz-ink-12); }
.dropdown-menu { border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius); box-shadow: var(--cz-shadow-lg); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cz-cream); color: var(--cz-lacquer); }
.dropdown-item.active, .dropdown-item:active { background: var(--cz-espresso); color: var(--cz-cream); }
.table { color: var(--cz-ink); }
.table thead th { border-bottom: 1px solid var(--cz-ink-22); font-family: var(--cz-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cz-ink-60); }
.table td, .table th { border-top-color: var(--cz-ink-12); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--cz-paper); }
.alert { border-radius: var(--cz-radius-sm); border: 1px solid transparent; }
.alert-success { background: var(--cz-ok-bg); color: var(--cz-ok); border-color: rgba(62, 107, 72, .3); }
.alert-danger { background: var(--cz-danger-bg); color: var(--cz-danger); border-color: rgba(158, 43, 37, .3); }
.alert-warning, .alert-info { background: var(--cz-brass-bg); color: var(--cz-ink); border-color: rgba(201, 146, 46, .4); }
.progress { background: var(--cz-sand); border-radius: var(--cz-radius-sm); }
.progress-bar { background: var(--cz-lacquer); }
.toast, #toast-container > div { border-radius: var(--cz-radius) !important; }
.owl-theme .owl-dots .owl-dot span { background: var(--cz-ink-22); }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: var(--cz-lacquer); }
.owl-theme .owl-nav [class*=owl-] { background: var(--cz-white); color: var(--cz-ink); border: 1px solid var(--cz-ink-12); border-radius: 50%; }
.owl-theme .owl-nav [class*=owl-]:hover { background: var(--cz-espresso); color: var(--cz-cream); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--cz-sand-2); border-radius: 6px; border: 2px solid var(--cz-cream); }
::-webkit-scrollbar-track { background: var(--cz-cream); }

/* ---------- 3. Layout --------------------------------------------------- */
.cz-container { width: 100%; max-width: calc(var(--cz-container) + 48px); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 575.98px) { .cz-container { padding-inline: 16px; } }
.cz-section { padding-block: 44px 48px; background: var(--cz-cream); }
.cz-section--white { background: var(--cz-white); }
.cz-section--paper { background: var(--cz-paper); }
.cz-section--dark { background: var(--cz-espresso); color: var(--cz-cream); }
.cz-section--dark h1, .cz-section--dark h2, .cz-section--dark h3, .cz-section--dark h4, .cz-section--dark .cz-h1, .cz-section--dark .cz-h2, .cz-section--dark .cz-h3 { color: var(--cz-cream); }
.cz-section--dark a:not(.cz-btn) { color: var(--cz-brass-2); }
.cz-section--dark .cz-muted { color: var(--cz-cream-60); }
@media (max-width: 767.98px) { .cz-section { padding-block: 28px 32px; } }
.cz-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cz-section__title { margin: 0; font: 400 28px/1.15 var(--cz-font-display); letter-spacing: -.01em; color: inherit; }
@media (max-width: 767.98px) { .cz-section__title { font-size: 22px; } }
.cz-section__sub { margin: 6px 0 0; color: var(--cz-ink-60); font-size: 14px; max-width: 640px; }
.cz-section--dark .cz-section__sub { color: var(--cz-cream-60); }
.cz-section__more { font: 700 13px/1 var(--cz-font-body); color: var(--cz-lacquer); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cz-section--dark .cz-section__more { color: var(--cz-brass-2); }
.cz-divider { border: 0; border-top: 1px solid var(--cz-ink-12); margin-block: 24px; }
.cz-section--dark .cz-divider { border-top-color: var(--cz-cream-15); }

/* ---------- 4. Type ---------------------------------------------------- */
.cz-eyebrow { display: inline-block; font: 600 11px/1 var(--cz-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cz-brass); margin-bottom: 10px; }
.cz-h1 { font: 400 44px/1.05 var(--cz-font-display); letter-spacing: -.01em; color: var(--cz-ink); margin: 0 0 14px; text-wrap: balance; }
.cz-h2 { font: 400 32px/1.12 var(--cz-font-display); letter-spacing: -.01em; color: var(--cz-ink); margin: 0 0 12px; text-wrap: balance; }
.cz-h3 { font: 400 22px/1.2 var(--cz-font-display); color: var(--cz-ink); margin: 0 0 8px; }
.cz-h4 { font: 700 16px/1.3 var(--cz-font-body); color: var(--cz-ink); margin: 0 0 6px; }
@media (max-width: 767.98px) { .cz-h1 { font-size: 32px; } .cz-h2 { font-size: 26px; } .cz-h3 { font-size: 20px; } }
.cz-lead { font: 300 17px/1.6 var(--cz-font-body); color: var(--cz-ink-60); text-wrap: pretty; }
.cz-section--dark .cz-lead { color: var(--cz-cream-80); }
.cz-mono { font-family: var(--cz-font-mono) !important; }
.cz-num { font-family: var(--cz-font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.cz-muted { color: var(--cz-ink-60); }
.cz-text-brass { color: var(--cz-brass) !important; }
.cz-text-lacquer { color: var(--cz-lacquer) !important; }
.cz-text-ok { color: var(--cz-ok) !important; }
.cz-text-cream { color: var(--cz-cream) !important; }
.cz-fs-12 { font-size: 12px; } .cz-fs-13 { font-size: 13px; } .cz-fs-15 { font-size: 15px; } .cz-fw-700 { font-weight: 700; } .cz-fw-600 { font-weight: 600; }
.cz-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 5. Buttons ---------------------------------------------- */
.cz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border: 1px solid transparent; border-radius: var(--cz-radius-sm);
  font: 700 13.5px/1 var(--cz-font-body); letter-spacing: .01em; cursor: pointer; text-decoration: none !important;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; white-space: nowrap; background: transparent; color: var(--cz-ink);
}
.cz-btn:focus-visible { outline: 2px solid var(--cz-brass); outline-offset: 2px; }
.cz-btn:disabled, .cz-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
.cz-btn--primary { background: var(--cz-lacquer); color: #fff !important; border-color: var(--cz-lacquer); }
.cz-btn--primary:hover { background: var(--cz-lacquer-2); border-color: var(--cz-lacquer-2); color: #fff; }
.cz-btn--dark { background: var(--cz-espresso); color: var(--cz-cream) !important; border-color: var(--cz-espresso); }
.cz-btn--dark:hover { background: var(--cz-espresso-2); border-color: var(--cz-espresso-2); }
.cz-btn--brass { background: var(--cz-brass); color: var(--cz-ink) !important; border-color: var(--cz-brass); }
.cz-btn--brass:hover { background: var(--cz-brass-2); border-color: var(--cz-brass-2); }
.cz-btn--ghost { background: transparent; color: var(--cz-ink) !important; border-color: var(--cz-ink-22); }
.cz-btn--ghost:hover { border-color: var(--cz-ink); background: var(--cz-white); }
.cz-btn--ghost-light { background: transparent; color: var(--cz-cream) !important; border-color: var(--cz-cream-35); }
.cz-btn--ghost-light:hover { border-color: var(--cz-cream); background: var(--cz-cream-15); }
.cz-btn--light { background: var(--cz-cream); color: var(--cz-ink) !important; border-color: var(--cz-cream); }
.cz-btn--light:hover { background: var(--cz-white); }
.cz-btn--link { padding-inline: 0; color: var(--cz-lacquer) !important; border-color: transparent; }
.cz-btn--link:hover { color: var(--cz-lacquer-2) !important; text-decoration: underline !important; }
.cz-btn--sm { padding: 8px 12px; font-size: 12.5px; }
.cz-btn--lg { padding: 15px 24px; font-size: 15px; }
.cz-btn--block { width: 100%; }
.cz-btn--icon { padding: 0; width: 40px; height: 40px; border-radius: 50%; }
.cz-btn .fa, .cz-btn .czi { font-size: 1em; }

/* ---------- 6. Surfaces --------------------------------------------- */
.cz-card { background: var(--cz-white); border: 1px solid var(--cz-ink-12); border-radius: var(--cz-radius); box-shadow: var(--cz-shadow-sm); overflow: hidden; }
.cz-card--hover { transition: box-shadow .15s, transform .15s; }
.cz-card--hover:hover { box-shadow: var(--cz-shadow); transform: translateY(-1px); }
.cz-card--paper { background: var(--cz-cream); }
.cz-card--dark { background: var(--cz-espresso); color: var(--cz-cream); border-color: var(--cz-espresso); }
.cz-card--dark .cz-muted { color: var(--cz-cream-60); }
.cz-card--flat { box-shadow: none; }
.cz-card__body { padding: 18px 20px; }
.cz-card__head { padding: 14px 20px; border-bottom: 1px solid var(--cz-ink-12); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cz-card--dark .cz-card__head { border-bottom-color: var(--cz-cream-15); }
.cz-card__foot { padding: 12px 20px; border-top: 1px solid var(--cz-ink-12); background: var(--cz-cream); }
.cz-panel-dark { background: var(--cz-espresso); color: var(--cz-cream); border-radius: var(--cz-radius); padding: 22px 24px; }
.cz-panel-dark .cz-eyebrow { color: var(--cz-brass); }

/* ---------- 7. Forms ------------------------------------------------ */
.cz-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cz-label { font: 700 12px/1.2 var(--cz-font-body); letter-spacing: .02em; color: var(--cz-ink); }
.cz-label .cz-req { color: var(--cz-lacquer); }
.cz-label--eyebrow { font: 600 10.5px/1 var(--cz-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cz-ink-60); }
.cz-input, .cz-select, .cz-textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--cz-ink-22); border-radius: var(--cz-radius-sm);
  background: var(--cz-white); color: var(--cz-ink); font: 400 14px/1.4 var(--cz-font-body); transition: border-color .15s, box-shadow .15s; appearance: none;
}
.cz-textarea { min-height: 110px; resize: vertical; }
.cz-select { padding-inline-end: 36px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23241A14' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
[dir=rtl] .cz-select { background-position: left 12px center; }
.cz-input:focus, .cz-select:focus, .cz-textarea:focus { outline: none; border-color: var(--cz-lacquer); box-shadow: 0 0 0 3px rgba(158, 43, 37, .15); }
.cz-input::placeholder, .cz-textarea::placeholder { color: var(--cz-ink-40); }
.cz-input--dark, .cz-select--dark { background: var(--cz-espresso-2); border-color: var(--cz-cream-35); color: var(--cz-cream); }
.cz-input--dark::placeholder { color: var(--cz-cream-60); }
.cz-input-group { display: flex; align-items: stretch; }
.cz-input-group > .cz-input, .cz-input-group > .cz-select { flex: 1 1 auto; min-width: 0; }
.cz-input-group > :not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
.cz-input-group > :not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.cz-input-group > .cz-btn { border-radius: var(--cz-radius-sm); }
.cz-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.cz-check input { width: 16px; height: 16px; accent-color: var(--cz-lacquer); }
.cz-help { font-size: 12px; color: var(--cz-ink-60); }
.cz-error { font-size: 12.5px; color: var(--cz-danger); }
.cz-input.is-invalid, .cz-select.is-invalid, .cz-textarea.is-invalid { border-color: var(--cz-danger); }
.cz-dropzone { border: 1.5px dashed var(--cz-ink-22); border-radius: var(--cz-radius); padding: 20px; text-align: center; background: var(--cz-cream); color: var(--cz-ink-60); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.cz-dropzone:hover, .cz-dropzone.is-over { border-color: var(--cz-lacquer); background: var(--cz-white); }

/* ---------- 8. Chips / badges --------------------------------------- */
.cz-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--cz-ink-22); background: var(--cz-white); color: var(--cz-ink); font: 600 12.5px/1 var(--cz-font-body); cursor: pointer; white-space: nowrap; transition: all .15s; text-decoration: none !important;
}
.cz-chip:hover { border-color: var(--cz-ink); }
.cz-chip.is-active, .cz-chip[aria-pressed=true] { background: var(--cz-espresso); border-color: var(--cz-espresso); color: var(--cz-cream); }
.cz-chip--light { background: transparent; border-color: var(--cz-cream-35); color: var(--cz-cream); }
.cz-chip--light.is-active { background: var(--cz-cream); color: var(--cz-ink); border-color: var(--cz-cream); }
.cz-chip--sm { padding: 5px 10px; font-size: 11.5px; }
.cz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--cz-radius-sm); font: 700 10.5px/1.3 var(--cz-font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cz-badge--verified { background: var(--cz-ok-bg); color: var(--cz-ok); }
.cz-badge--brass { background: var(--cz-brass-bg); color: #8A6216; }
.cz-badge--sage { background: var(--cz-sage); color: var(--cz-ink); }
.cz-badge--lacquer { background: var(--cz-lacquer); color: #fff; }
.cz-badge--dark { background: var(--cz-espresso); color: var(--cz-cream); }
.cz-badge--outline { background: transparent; border: 1px solid var(--cz-ink-22); color: var(--cz-ink-60); }
.cz-badge--mono { font-family: var(--cz-font-mono); letter-spacing: .12em; }
.cz-tag { display: inline-block; padding: 4px 8px; border-radius: var(--cz-radius-sm); background: var(--cz-sand); color: var(--cz-ink); font: 600 11.5px/1.2 var(--cz-font-body); }
.cz-verified { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--cz-font-body); color: var(--cz-lacquer); }
.cz-verified::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--cz-lacquer); color: #fff; font-size: 10px; font-weight: 700; }
.cz-verified--dark { color: var(--cz-cream); }
.cz-verified--dark::before { background: var(--cz-cream); color: var(--cz-ink); }

/* ---------- 9. Data: tables / kv / stats ----------------------------- */
.cz-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.cz-table th { font: 600 10.5px/1.3 var(--cz-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cz-ink-60); text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--cz-ink-22); background: var(--cz-cream); }
.cz-table td { padding: 12px; border-bottom: 1px solid var(--cz-ink-12); vertical-align: top; }
.cz-table tbody tr:last-child td { border-bottom: none; }
.cz-table tbody tr:hover td { background: var(--cz-cream); }
.cz-table--compare th:first-child, .cz-table--compare td:first-child { position: sticky; inset-inline-start: 0; background: var(--cz-white); z-index: 1; font-weight: 700; min-width: 140px; }
.cz-table--compare td { text-align: center; font-family: var(--cz-font-body); }
.cz-table--compare td.is-best { background: var(--cz-brass-bg); font-weight: 700; color: var(--cz-ink); box-shadow: inset 0 0 0 1px rgba(201, 146, 46, .5); }
.cz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cz-kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 14px; font-size: 13.5px; }
.cz-kv__k { font: 600 10.5px/1.6 var(--cz-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cz-ink-60); }
.cz-kv__v { color: var(--cz-ink); }
.cz-kv--row { grid-template-columns: 1fr; gap: 2px; }
.cz-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.cz-stat { display: flex; flex-direction: column; gap: 2px; }
.cz-stat__v { font: 600 22px/1.1 var(--cz-font-mono); color: var(--cz-ink); font-variant-numeric: tabular-nums; }
.cz-stat__v--display { font: 400 30px/1.05 var(--cz-font-display); }
.cz-stat__l { font-size: 12px; color: var(--cz-ink-60); }
.cz-section--dark .cz-stat__v, .cz-card--dark .cz-stat__v, .cz-panel-dark .cz-stat__v { color: var(--cz-cream); }
.cz-section--dark .cz-stat__l, .cz-card--dark .cz-stat__l, .cz-panel-dark .cz-stat__l { color: var(--cz-cream-60); }
.cz-price { font: 600 18px/1.1 var(--cz-font-mono); color: var(--cz-ink); font-variant-numeric: tabular-nums; }
.cz-price--lg { font-size: 24px; }
.cz-price__unit { font: 400 12px/1 var(--cz-font-body); color: var(--cz-ink-60); margin-inline-start: 4px; }
.cz-price--old { text-decoration: line-through; color: var(--cz-ink-40); font-weight: 400; font-size: .8em; margin-inline-start: 6px; }

/* ---------- 10. Steps ------------------------------------------------ */
.cz-steps { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cz-step { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--cz-font-body); color: var(--cz-ink-40); }
.cz-step__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cz-ink-22); font: 600 11px/1 var(--cz-font-mono); color: var(--cz-ink-60); background: var(--cz-white); }
.cz-step.is-active { color: var(--cz-ink); }
.cz-step.is-active .cz-step__n { background: var(--cz-lacquer); border-color: var(--cz-lacquer); color: #fff; }
.cz-step.is-done .cz-step__n { background: var(--cz-espresso); border-color: var(--cz-espresso); color: var(--cz-cream); }
.cz-step + .cz-step::before { content: ""; width: 28px; height: 1px; background: var(--cz-ink-22); margin-inline-end: 2px; }
@media (max-width: 575.98px) { .cz-step + .cz-step::before { width: 12px; } .cz-step__label { display: none; } .cz-step.is-active .cz-step__label { display: inline; } }

/* ---------- 11. Misc ------------------------------------------------- */
.cz-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--cz-sand); flex: none; }
.cz-avatar--sq { border-radius: var(--cz-radius-sm); }
.cz-avatar--lg { width: 64px; height: 64px; }
.cz-logo-mark { width: 40px; height: 40px; flex: none; position: relative; overflow: hidden; border-radius: 4px; background: repeating-conic-gradient(from -90deg at 50% 108%, var(--cz-brass) 0deg 2.2deg, var(--cz-espresso) 2.2deg 11.25deg); }
.cz-logo-mark--sm { width: 28px; height: 28px; border-radius: 3px; }
.cz-logo-mark--lg { width: 64px; height: 64px; }
.cz-skeleton { background: linear-gradient(90deg, var(--cz-sand) 25%, var(--cz-paper) 50%, var(--cz-sand) 75%); background-size: 200% 100%; animation: cz-shimmer 1.2s infinite; border-radius: var(--cz-radius-sm); }
@keyframes cz-shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }
.cz-sticky { position: sticky; top: calc(var(--cz-header-h) + 16px); }
/* visibility helpers: only ever force display:none — never `initial`, which would flatten grid/flex containers */
.cz-show-mobile { display: none !important; }
@media (max-width: 991.98px) { .cz-hide-mobile { display: none !important; } .cz-show-mobile { display: revert !important; } }
.cz-empty { text-align: center; padding: 48px 20px; color: var(--cz-ink-60); }
.cz-empty .cz-h3 { color: var(--cz-ink); }
.cz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
/* The stock back-end custom.css paints its own radio/checkbox mark through
   `[type=radio] + span::after`. Inside a chip or a segmented control the label
   itself is the control, so that stray circle has to stay unpainted — it showed
   up as a bare radio next to every Incoterm on the RFQ form. */
.cz-chip input + span::after, .cz-chip input + span::before { content: none !important; display: none !important; }
.cz-mobile-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; background: var(--cz-white); border-top: 1px solid var(--cz-ink-12); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: none; gap: 10px; box-shadow: 0 -4px 16px rgba(36, 26, 20, .08); }
@media (max-width: 991.98px) { .cz-mobile-bar { display: flex; } body.has-cz-mobile-bar { padding-bottom: 76px; } }

/* ---------- 12. Foundation appendix (layout pass) ---------------------- */
/* custom.css forces Plus Jakarta Sans on form controls with !important — bring them back to the body face. */
.theme-coffee input, .theme-coffee select, .theme-coffee textarea, .theme-coffee button { font-family: var(--cz-font-body) !important; }
.theme-coffee .cz-mono, .theme-coffee .cz-num, .theme-coffee .cz-price, .theme-coffee .cz-eyebrow { font-family: var(--cz-font-mono) !important; }
/* Header hooks for page owners: anything sticky under the header uses top: var(--cz-sticky-top) */
.cz-sticky-under-header { position: sticky; top: var(--cz-sticky-top, var(--cz-header-h)); }

/* ---------- 13. Bidirectional text (Arabic and any future RTL locale) ----
   Latin runs inside an Arabic paragraph get reordered by the bidi algorithm:
   "+1 (714) 442-2422" comes out with the plus sign on the wrong end, and an
   RFQ code or a price loses its digit grouping. Isolating these runs keeps each
   one laid out left-to-right and stops it from disturbing the Arabic around it. */
[dir=rtl] .theme-coffee a[href^="tel:"],
[dir=rtl] .theme-coffee .direction-ltr,
[dir=rtl] .theme-coffee .cz-mono,
[dir=rtl] .theme-coffee .cz-num,
[dir=rtl] .theme-coffee .cz-price { direction: ltr; unicode-bidi: isolate; }
/* ...but a mono block that is a whole cell should still sit on the correct side */
[dir=rtl] .theme-coffee td > .cz-mono,
[dir=rtl] .theme-coffee dd > .cz-mono { display: inline-block; text-align: start; }