/* ============================================================
   Garrison Shades — styles.css
   Single shared stylesheet for all pages
   Colors: #111111 / #ffffff only
   Headings: Times New Roman | Body/UI: Inter (Google Fonts)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* --- Variables --- */
:root {
  --black: #111111;
  --white: #ffffff;
  --border: 1px solid #111111;
  --border-subtle: 1px solid #dddddd;
  --font-serif: 'Times New Roman', Times, serif;
  --font-sans: 'Inter', sans-serif;
  --section-pad: 64px;
  --container: 1280px;
  --nav-h: 64px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); color: var(--black); background: var(--white); line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
input, select, textarea, button { font-family: var(--font-sans); font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }

/* --- Container --- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; font-family: var(--font-sans); font-size: 0.8125rem;
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  transition: opacity 0.15s; white-space: nowrap;
}
.btn:hover { opacity: 0.8; }
.btn-primary { background: var(--black); color: var(--white); border: var(--border); }
.btn-secondary { background: var(--white); color: var(--black); border: var(--border); }
.btn-sm { padding: 8px 18px; font-size: 0.75rem; }
.btn-xs { padding: 5px 12px; font-size: 0.7rem; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h); background: var(--white);
  border-bottom: var(--border);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.nav-logo { font-family: var(--font-serif); font-weight: 400; font-size: 1.375rem; letter-spacing: 0.01em; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-links a:hover { text-decoration: underline; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-actions a { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; position: relative; }
.cart-count {
  position: absolute; top: -8px; right: -10px;
  background: var(--black); color: var(--white);
  font-size: 0.6rem; font-weight: 600; width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.nav-mobile-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-mobile-toggle span { display: block; width: 22px; height: 1px; background: var(--black); }
.nav-mobile-menu { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding: 64px 0 48px; }
.footer-tagline { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.6; margin-bottom: 16px; }
.footer-col h4 { font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 0.875rem; color: #555; }
.footer-col ul li a:hover { color: var(--black); }
.footer-bottom { border-top: var(--border-subtle); padding: 20px 0; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { font-size: 0.75rem; color: #888; }

/* ============================================================
   HOMEPAGE
   ============================================================ */
.hero {
  height: calc(100vh - var(--nav-h));
  border-bottom: var(--border);
  display: grid; grid-template-columns: 1fr 1fr;
}
.hero-content { display: flex; flex-direction: column; justify-content: center; padding: 80px; border-right: var(--border); }
.hero-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 24px; color: #888; }
.hero-title { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 24px; }
.hero-sub { font-size: 1rem; color: #555; max-width: 400px; margin-bottom: 40px; line-height: 1.8; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-image { background: #f0f0f0; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: #aaa; letter-spacing: 0.1em; text-transform: uppercase; }

.trust-bar { border-bottom: var(--border); }
.trust-bar .container { display: flex; }
.trust-item { flex: 1; padding: 18px 24px; display: flex; align-items: center; gap: 12px; border-right: var(--border-subtle); font-size: 0.8rem; font-weight: 500; }
.trust-item:last-child { border-right: none; }
.trust-icon { font-size: 1.1rem; }

.section-header { text-align: center; padding: var(--section-pad) 0 40px; }
.section-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; color: #888; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--black); border: var(--border); margin-bottom: 0; }
.product-card { background: var(--white); display: flex; flex-direction: column; }
.product-card-img { aspect-ratio: 4/3; overflow: hidden; background: #f0f0f0; position: relative; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-card-img img { transform: scale(1.04); }
.product-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: #bbb; text-transform: uppercase; letter-spacing: 0.1em; }
.product-card-body { padding: 24px; border-top: var(--border); flex: 1; display: flex; flex-direction: column; }
.product-card-type { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.product-card-name { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 6px; }
.product-card-price { font-size: 0.875rem; color: #555; margin-bottom: 16px; }
.product-card-swatches { display: flex; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; }
.swatch-dot { width: 16px; height: 16px; border: var(--border-subtle); flex-shrink: 0; }
.swatch-dot:hover { border-color: var(--black); outline: 1px solid var(--black); }
.product-card-footer { margin-top: auto; padding-top: 16px; border-top: var(--border-subtle); }

.features-section { padding: var(--section-pad) 0; border-top: var(--border); border-bottom: var(--border); }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature-item { padding: 40px 32px; border-right: var(--border-subtle); }
.feature-item:last-child { border-right: none; }
.feature-number { font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; margin-bottom: 16px; color: #ccc; }
.feature-title { font-family: var(--font-serif); font-size: 1.125rem; margin-bottom: 10px; }
.feature-text { font-size: 0.875rem; color: #555; line-height: 1.8; }

.cta-banner { padding: var(--section-pad) 0; border-bottom: var(--border); text-align: center; }
.cta-banner h2 { margin-bottom: 12px; }
.cta-banner p { font-size: 1rem; color: #555; max-width: 480px; margin: 0 auto 32px; line-height: 1.8; }

/* ============================================================
   ORDER PAGE — full-width centered, no sidebar
   ============================================================ */

/* Product Section */
.product-section { border: var(--border); margin-bottom: 20px; }
.product-section.hidden { display: none; }

.product-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; user-select: none;
  transition: background 0.1s;
}
.product-section-header:hover { background: #fafafa; }
.ps-left { display: flex; align-items: center; gap: 16px; }
.ps-thumb { width: 52px; height: 52px; object-fit: cover; border: var(--border-subtle); flex-shrink: 0; background: #f0f0f0; }
.ps-name { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 2px; }
.ps-meta { font-size: 0.78rem; color: #888; }
.ps-right { display: flex; align-items: center; gap: 20px; }
.ps-from { font-size: 0.875rem; }
.ps-toggle { font-size: 1rem; color: #888; transition: transform 0.2s; }
.product-section.open .ps-toggle { transform: rotate(180deg); }

.product-body { display: none; border-top: var(--border); }
.product-section.open .product-body { display: block; }

/* Tabs */
.tab-bar { display: flex; border-bottom: var(--border); background: #fafafa; }
.tab-btn {
  padding: 13px 22px; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-right: var(--border-subtle); color: #888;
  transition: background 0.1s, color 0.1s;
}
.tab-btn:last-child { border-right: none; }
.tab-btn:hover { background: #f0f0f0; color: var(--black); }
.tab-btn.active { background: var(--white); color: var(--black); border-bottom: 2px solid var(--black); margin-bottom: -1px; }
.tab-panel { display: none; padding: 24px; }
.tab-panel.active { display: block; }

/* Line Items */
.li-instructions { font-size: 0.8rem; color: #888; margin-bottom: 14px; line-height: 1.6; }
.line-items-wrap { overflow-x: auto; margin-bottom: 0; }
.line-items-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.line-items-table thead th {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #888; padding: 7px 10px;
  text-align: left; border-bottom: var(--border); white-space: nowrap;
  background: #fafafa;
}
.line-items-table tbody tr { border-bottom: var(--border-subtle); }
.line-items-table tbody tr:last-child { border-bottom: none; }
.line-items-table tbody td { padding: 8px 10px; vertical-align: middle; }

.line-num { font-size: 0.72rem; color: #bbb; font-weight: 600; min-width: 20px; }

.color-cell { display: flex; align-items: center; gap: 6px; }
.color-preview { width: 18px; height: 18px; border: var(--border-subtle); flex-shrink: 0; }
.opt-select {
  padding: 6px 8px; border: var(--border-subtle); background: var(--white);
  font-size: 0.8rem; min-width: 90px; max-width: 150px;
}
.opt-select:focus { outline: none; border-color: var(--black); }

.dim-group { display: flex; align-items: center; gap: 3px; }
.dim-whole { width: 72px; padding: 6px 6px; border: var(--border-subtle); font-size: 0.8125rem; text-align: center; }
.dim-whole:focus { outline: none; border-color: var(--black); }
.dim-frac { padding: 6px 4px; border: var(--border-subtle); background: var(--white); font-size: 0.75rem; width: 52px; }
.dim-frac:focus { outline: none; border-color: var(--black); }
.dim-sep { font-size: 0.75rem; color: #aaa; padding: 0 2px; }

.qty-stepper { display: flex; align-items: center; border: var(--border-subtle); }
.qty-btn { width: 26px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.qty-btn:hover { background: #f5f5f5; }
.qty-val { width: 30px; height: 28px; text-align: center; font-size: 0.8125rem; border-left: var(--border-subtle); border-right: var(--border-subtle); display: flex; align-items: center; justify-content: center; }

.line-price { font-size: 0.875rem; font-weight: 600; white-space: nowrap; min-width: 56px; }

.line-actions-cell { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.line-add-btn { white-space: nowrap; font-size: 0.7rem; padding: 5px 10px; background: var(--black); color: var(--white); border: var(--border); letter-spacing: 0.04em; }
.line-add-btn:hover { opacity: 0.8; }
.line-remove-btn { color: #ccc; font-size: 1rem; padding: 3px 6px; line-height: 1; }
.line-remove-btn:hover { color: var(--black); }

.li-footer {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 14px 0 0; border-top: var(--border-subtle); margin-top: 10px;
}
.li-footer-left { display: flex; gap: 10px; align-items: center; }
.section-total-area { display: flex; align-items: center; gap: 14px; }
.section-qty-label { font-size: 0.8rem; color: #666; padding-right: 4px; border-right: 1px solid #ddd; }
.section-qty-val { font-family: var(--font-serif); font-size: 1.1rem; color: #111; font-weight: 600; }
.section-subtotal-label { font-size: 0.8rem; color: #666; }
.section-subtotal-val { font-family: var(--font-serif); font-size: 1.1rem; }
.add-all-btn { font-size: 0.75rem; }

/* Product Details Tab */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pd-desc { font-size: 0.9rem; color: #333; line-height: 1.85; margin-bottom: 20px; }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.spec-table tr { border-bottom: var(--border-subtle); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td { padding: 9px 0; font-size: 0.875rem; vertical-align: top; }
.spec-table td:first-child { color: #888; width: 46%; padding-right: 12px; }
.pdf-links-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pdf-link-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: var(--border-subtle); font-size: 0.8125rem;
  transition: border-color 0.1s;
}
.pdf-link-item:hover { border-color: var(--black); }
.pdf-icon { font-size: 1rem; }
.pdf-label { flex: 1; }
.pdf-arrow { color: #aaa; font-size: 0.8rem; }

/* Install Tab */
.install-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; }
.install-pdf-area { background: #f5f5f5; border: var(--border-subtle); min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.install-pdf-area p { font-size: 0.78rem; color: #aaa; text-align: center; }
.install-notes h4 { font-family: var(--font-serif); font-size: 1rem; margin-bottom: 12px; }
.install-notes p, .install-notes li { font-size: 0.875rem; color: #444; line-height: 1.8; }
.install-notes ul { padding-left: 18px; list-style: disc; margin-bottom: 16px; }
.install-dl-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* Reviews Tab */
.reviews-top { display: flex; gap: 32px; padding-bottom: 24px; border-bottom: var(--border-subtle); margin-bottom: 20px; align-items: flex-start; }
.reviews-score-box { text-align: center; min-width: 80px; }
.score-big { font-family: var(--font-serif); font-size: 3rem; line-height: 1; }
.score-sub { font-size: 0.72rem; color: #888; margin-top: 4px; }
.rating-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rbar-row { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #888; }
.rbar-track { flex: 1; height: 4px; background: #eee; }
.rbar-fill { height: 100%; background: var(--black); }
.write-review-btn-wrap { margin-bottom: 20px; }
.review-form-box { border: var(--border-subtle); padding: 22px; margin-bottom: 24px; display: none; }
.review-form-box.open { display: block; }
.review-form-box h4 { font-family: var(--font-serif); font-size: 1rem; margin-bottom: 16px; }
.star-picker { display: flex; gap: 4px; margin-bottom: 4px; }
.star-pick-btn { font-size: 1.4rem; color: #ddd; line-height: 1; padding: 0; }
.star-pick-btn.lit { color: var(--black); }
.form-row { margin-bottom: 14px; }
.form-label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 5px; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 9px 12px; border: var(--border-subtle); background: var(--white); font-size: 0.875rem; }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--black); }
.form-textarea { min-height: 90px; resize: vertical; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.upload-zone { border: var(--border-subtle); padding: 20px; text-align: center; cursor: pointer; border-style: dashed; }
.upload-zone:hover { border-color: var(--black); }
.upload-zone p { font-size: 0.78rem; color: #aaa; margin: 0; }
.upload-zone input { display: none; }
.upload-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.upload-preview-item { position: relative; }
.upload-preview-item img { width: 60px; height: 60px; object-fit: cover; border: var(--border-subtle); }
.review-feed { display: flex; flex-direction: column; gap: 0; }
.review-card { padding: 20px 0; border-bottom: var(--border-subtle); }
.review-card:last-child { border-bottom: none; }
.review-hd { display: flex; justify-content: space-between; margin-bottom: 6px; }
.review-author { font-size: 0.875rem; font-weight: 600; }
.review-date { font-size: 0.75rem; color: #aaa; }
.review-stars { font-size: 0.875rem; margin-bottom: 4px; }
.review-title-text { font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; }
.review-body-text { font-size: 0.875rem; color: #444; line-height: 1.75; margin-bottom: 10px; }
.review-media-row { display: flex; gap: 8px; flex-wrap: wrap; }
.review-thumb { width: 72px; height: 72px; object-fit: cover; border: var(--border-subtle); cursor: pointer; }
.no-reviews { font-size: 0.875rem; color: #aaa; padding: 20px 0; }

/* Swatches inside product section */
.swatch-grid-panel { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.swatch-chip-sq { width: 44px; height: 44px; border: var(--border-subtle); }
.swatch-chip.selected .swatch-chip-sq { border: 2px solid var(--black); outline: 1px solid var(--black); }
.swatch-chip-lbl { font-size: 0.65rem; text-align: center; max-width: 52px; line-height: 1.3; color: #666; }

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-page { padding: var(--section-pad) 0; min-height: calc(100vh - var(--nav-h)); }
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.cart-hd { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; border-bottom: var(--border); margin-bottom: 20px; }
.cart-hd h1 { font-size: 1.75rem; }
.cart-item-count { font-size: 0.875rem; color: #888; }

/* Cart column heads hidden — layout replaced by 3-row flex */
.cart-col-heads { display: none; }

/* ── Cart row: image + content side by side ─────────────────── */
.cart-row {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: var(--border-subtle);
  align-items: flex-start;
}
.cart-item-img { width: 80px; height: 80px; object-fit: cover; border: var(--border-subtle); flex-shrink: 0; background: #f0f0f0; }

/* Content column fills remaining space */
.cart-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;       /* anchor for absolute-positioned actions */
  padding-right: 160px;     /* reserve space so text doesn't slide under buttons */
}
.cart-item-name { font-family: var(--font-serif); font-size: 1rem; }

/* Action buttons — fixed top-right of content area */
.cart-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

/* Row 1 — Room · Color · W×H · Mount */
.cart-item-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  font-size: 0.8125rem;
  color: #555;
}
.ci-field { white-space: nowrap; }
.ci-lbl { font-weight: 600; color: #333; margin-right: 2px; }
.ci-dot { margin: 0 6px; color: #bbb; }

/* Row 2 — spec pills */
.item-spec-pills { display: flex; flex-wrap: wrap; gap: 5px; }

/* Row 3 — qty stepper · unit price · total — all on one line, same baseline */
.cart-item-row3 {
  display: flex;
  align-items: center;   /* vertically centers every child to the same midline */
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: nowrap;     /* stay on one line */
  margin-top: 6px;
  height: 32px;          /* fixed track height — keeps stepper + prices level */
}
/* Unit price: "ea" label inline, same size rhythm as total */
.ci-price-unit {
  font-size: 0.875rem;
  font-weight: 500;
  color: #444;
  white-space: nowrap;
  line-height: 1;
}
.ci-price-lbl {
  font-size: 0.72rem;
  color: #aaa;
  margin-left: 2px;
}
/* Total: "Total" label inline before the amount */
.ci-price-total-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.ci-total-lbl {
  font-size: 0.72rem;
  color: #aaa;
  white-space: nowrap;
}
.ci-price-total {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
}

/* Dim rows where qty has been zeroed out */
.cart-row.qty-zero { opacity: 0.5; }

/* Keep these for any legacy HTML still using them */
.cart-item-info { display: flex; gap: 14px; }
.cart-item-specs { font-size: 0.75rem; color: #888; line-height: 1.65; }
.cart-item-unit { font-size: 0.875rem; }
.cart-item-line { font-size: 0.9375rem; font-weight: 600; }
.cart-sendback-btn {
  font-size: 0.7rem;
  font-weight: 600;
  color: #8b6f47;
  background: #fdf6ee;
  border: 1px solid #d9c4a8;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.3;
}
.cart-sendback-btn:hover {
  background: #f5e8d4;
  border-color: #b89870;
  color: #5a3e22;
}
.cart-remove-btn { color: #ccc; font-size: 1.1rem; padding: 4px; line-height: 1; }
.cart-remove-btn:hover { color: var(--black); }

/* Flash highlight when a row is restored via Send Back */
@keyframes sendbackFlash {
  0%   { background: #fdf0d8; }
  60%  { background: #fdf0d8; }
  100% { background: transparent; }
}
.sendback-highlight { animation: sendbackFlash 2s ease forwards; }
.empty-cart { text-align: center; padding: 80px 0; }
.empty-cart h2 { font-size: 1.5rem; margin-bottom: 12px; }
.empty-cart p { color: #888; margin-bottom: 28px; }

.order-summary-card { border: var(--border); padding: 24px; position: sticky; top: calc(var(--nav-h) + 20px); }
.order-summary-card h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 20px; padding-bottom: 14px; border-bottom: var(--border-subtle); }
.summary-line { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: var(--border-subtle); font-size: 0.875rem; }
.summary-line:last-of-type { border-bottom: none; }
.summary-total-line { display: flex; justify-content: space-between; padding: 14px 0 0; border-top: var(--border); font-family: var(--font-serif); font-size: 1.1rem; margin-top: 8px; }
.summary-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.summary-note { font-size: 0.72rem; color: #aaa; text-align: center; margin-top: 10px; line-height: 1.6; }

/* ============================================================
   SAMPLES PAGE
   ============================================================ */
.samples-page { padding: var(--section-pad) 0; }
.samples-layout { display: grid; grid-template-columns: 1fr 380px; gap: 64px; align-items: start; }
.samples-intro h1 { margin-bottom: 16px; }
.samples-intro p { font-size: 0.9375rem; color: #555; line-height: 1.85; margin-bottom: 16px; }
.samples-bullets { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.samples-bullet { display: flex; align-items: flex-start; gap: 12px; font-size: 0.875rem; color: #444; }
.samples-bullet-icon { font-size: 1rem; margin-top: 2px; flex-shrink: 0; }

.samples-form-card { border: var(--border); padding: 28px; }
.samples-form-card h3 { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 6px; }
.samples-form-card .form-sub { font-size: 0.8rem; color: #888; margin-bottom: 22px; padding-bottom: 16px; border-bottom: var(--border-subtle); }

.swatch-pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.sample-swatch { cursor: pointer; border: var(--border-subtle); padding: 6px; text-align: center; transition: border-color 0.1s; }
.sample-swatch.selected { border: 2px solid var(--black); }
.sample-swatch.disabled { opacity: 0.4; cursor: not-allowed; }
.sample-swatch-sq { width: 100%; aspect-ratio: 1; background: #eee; margin-bottom: 4px; }
.sample-swatch-name { font-size: 0.62rem; color: #666; line-height: 1.3; }
.swatch-counter { font-size: 0.78rem; color: #888; margin-bottom: 18px; }
.swatch-counter strong { color: var(--black); }

/* ============================================================
   ACCOUNT / LOGIN PAGE
   ============================================================ */
.account-page { padding: var(--section-pad) 0; min-height: calc(100vh - var(--nav-h)); }
.auth-wrap { max-width: 400px; margin: 0 auto; }
.auth-wrap h1 { margin-bottom: 6px; }
.auth-sub { font-size: 0.875rem; color: #888; margin-bottom: 28px; }
.auth-card { border: var(--border); padding: 28px; }
.form-error { font-size: 0.8rem; color: #b00; padding: 10px 12px; border: 1px solid #fcc; background: #fff5f5; margin-bottom: 14px; display: none; }
.form-error.show { display: block; }
.auth-footer-text { font-size: 0.8125rem; text-align: center; margin-top: 18px; color: #666; }
.auth-footer-text a { text-decoration: underline; }

.acct-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.acct-sidebar { border-right: var(--border-subtle); padding-right: 28px; }
.acct-user-name { font-family: var(--font-serif); font-size: 1.25rem; margin-bottom: 2px; }
.acct-user-email { font-size: 0.8rem; color: #888; margin-bottom: 20px; }
.acct-nav { display: flex; flex-direction: column; }
.acct-nav a { padding: 11px 0; font-size: 0.875rem; border-bottom: var(--border-subtle); }
.acct-nav a:hover, .acct-nav a.active { font-weight: 600; }
.acct-nav a.logout-link { color: #888; margin-top: 8px; }

.acct-content h2 { font-size: 1.5rem; margin-bottom: 20px; }
.orders-empty { font-size: 0.875rem; color: #888; padding: 32px 0; }

.orders-list-table { width: 100%; border-collapse: collapse; }
.orders-list-table thead th { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; padding: 8px 14px; text-align: left; border-bottom: var(--border); }
.orders-list-table tbody tr { border-bottom: var(--border-subtle); cursor: pointer; }
.orders-list-table tbody tr:hover { background: #fafafa; }
.orders-list-table tbody td { padding: 14px; font-size: 0.875rem; }
.orders-list-table tbody td a { text-decoration: underline; }

.order-expand-panel { border: var(--border-subtle); margin-bottom: 12px; display: none; }
.order-expand-panel.open { display: block; }
.oep-head { padding: 12px 16px; background: #fafafa; border-bottom: var(--border-subtle); display: flex; justify-content: space-between; font-size: 0.8125rem; }
.oep-lines { padding: 16px; }
.oep-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: var(--border-subtle); font-size: 0.8125rem; }
.oep-line:last-child { border-bottom: none; }
.oep-line-specs { font-size: 0.75rem; color: #888; margin-top: 2px; }

/* Status badges */
.badge { display: inline-block; padding: 3px 9px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.badge-new { background: var(--black); color: var(--white); }
.badge-progress { border: var(--border-subtle); color: var(--black); }
.badge-shipped { border: var(--border-subtle); color: #555; }
.badge-complete { border: var(--border-subtle); color: #999; }
.badge-issue { border: 1px solid #f5a0a0; background: #fff5f5; color: #c00; }

/* ============================================================
   ADMIN — SHARED
   ============================================================ */
.admin-page { min-height: 100vh; background: #f7f7f7; }
.admin-topbar {
  background: var(--black); color: var(--white);
  height: 52px; display: flex; align-items: center; padding: 0 24px;
  position: sticky; top: 0; z-index: 100;
}
.admin-logo-txt { font-family: var(--font-serif); font-size: 1.1rem; }
.admin-tag { font-size: 0.65rem; color: #666; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 10px; }
.admin-topbar nav { display: flex; margin-left: auto; }
.admin-topbar nav a {
  color: #999; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0 16px; height: 52px;
  display: flex; align-items: center; border-left: 1px solid #222;
}
.admin-topbar nav a:hover, .admin-topbar nav a.active { color: var(--white); background: #1e1e1e; }
.admin-topbar .admin-user-info { font-size: 0.75rem; color: #666; padding-left: 16px; border-left: 1px solid #222; margin-left: 0; }
.admin-topbar .admin-logout { color: #666; font-size: 0.75rem; padding-left: 12px; text-decoration: underline; }
.admin-topbar .admin-logout:hover { color: var(--white); }

.admin-main { max-width: 1440px; margin: 0 auto; padding: 28px 24px; }
.admin-page-hd { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-start; }
.admin-page-hd-left h1 { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 2px; }
.admin-page-hd-left p { font-size: 0.8rem; color: #888; }

/* Stats */
.admin-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.admin-stat { background: var(--white); border: var(--border-subtle); padding: 18px 20px; }
.admin-stat-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.admin-stat-val { font-family: var(--font-serif); font-size: 2rem; line-height: 1; }
.admin-stat-sub { font-size: 0.72rem; color: #aaa; margin-top: 4px; }

/* Admin toolbar & tables */
.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-search { padding: 8px 12px; border: var(--border-subtle); background: var(--white); font-size: 0.875rem; width: 280px; }
.admin-search:focus { outline: none; border-color: var(--black); }
.admin-filter { padding: 8px 12px; border: var(--border-subtle); background: var(--white); font-size: 0.8125rem; }
.admin-filter:focus { outline: none; border-color: var(--black); }

.admin-table-card { background: var(--white); border: var(--border-subtle); overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table thead th { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; padding: 11px 16px; text-align: left; border-bottom: var(--border-subtle); background: #fafafa; white-space: nowrap; }
.admin-table tbody tr { border-bottom: var(--border-subtle); transition: background 0.08s; }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: #fafafa; }
.admin-table tbody td { padding: 13px 16px; font-size: 0.8125rem; }
.admin-table tbody tr.clickable { cursor: pointer; }
.tbl-action { font-size: 0.72rem; padding: 4px 10px; border: var(--border-subtle); background: var(--white); cursor: pointer; margin-right: 5px; display: inline-block; }
.tbl-action:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: var(--border-subtle); font-size: 0.8rem; color: #888; background: var(--white); }

/* Admin Cards */
.admin-card { background: var(--white); border: var(--border-subtle); margin-bottom: 18px; }
.admin-card-hd { padding: 13px 18px; border-bottom: var(--border-subtle); display: flex; justify-content: space-between; align-items: center; }
.admin-card-hd h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; }
.admin-card-body { padding: 18px; }
.admin-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-field label { display: block; font-size: 0.67rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #aaa; margin-bottom: 3px; }
.admin-field .field-val { font-size: 0.875rem; }
.admin-field input, .admin-field select, .admin-field textarea { width: 100%; padding: 7px 10px; border: var(--border-subtle); font-size: 0.8125rem; background: var(--white); }
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { outline: none; border-color: var(--black); }
.admin-field textarea { min-height: 72px; resize: vertical; }

/* Admin Order Layout */
.admin-order-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }

.li-admin-table { width: 100%; border-collapse: collapse; }
.li-admin-table thead th { font-size: 0.67rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #888; padding: 8px 12px; text-align: left; border-bottom: var(--border-subtle); background: #fafafa; white-space: nowrap; }
.li-admin-table tbody tr { border-bottom: var(--border-subtle); }
.li-admin-table tbody tr:last-child { border-bottom: none; }
.li-admin-table tbody td { padding: 11px 12px; font-size: 0.8125rem; }
.li-product-name { font-weight: 600; }
.li-specs-text { font-size: 0.75rem; color: #888; margin-top: 2px; }
.pricing-rows { }
.pricing-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: var(--border-subtle); font-size: 0.875rem; }
.pricing-row:last-child { border-bottom: none; }
.pricing-row.total-row { font-family: var(--font-serif); font-size: 1rem; padding-top: 12px; border-top: var(--border); border-bottom: none; }

/* Status controls */
.status-control { display: flex; align-items: center; gap: 8px; }
.status-control label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #888; }
.status-control select { padding: 7px 10px; border: var(--border-subtle); background: var(--white); font-size: 0.8125rem; }

/* Products Admin */
.products-admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.prod-admin-card { background: var(--white); border: var(--border-subtle); }
.prod-admin-hd { padding: 13px 18px; border-bottom: var(--border-subtle); display: flex; justify-content: space-between; align-items: center; }
.prod-admin-hd h3 { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 400; }
.prod-admin-body { padding: 18px; }
.prod-section-lbl { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #aaa; margin: 14px 0 8px; }
.prod-section-lbl:first-child { margin-top: 0; }
.pdf-slot-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: var(--border-subtle); margin-bottom: 6px; }
.pdf-slot-type { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #888; min-width: 100px; }
.pdf-slot-file { font-size: 0.8rem; color: #555; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-slot-replace { font-size: 0.7rem; padding: 3px 10px; border: var(--border-subtle); background: var(--white); cursor: pointer; white-space: nowrap; }
.pdf-slot-replace:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* Pricing Grid Admin */
.pricing-selector-bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--white); border: var(--border-subtle); margin-bottom: 18px; flex-wrap: wrap; }
.pricing-selector-bar label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; }
.pricing-selector-bar select { padding: 7px 12px; border: var(--border-subtle); background: var(--white); font-size: 0.875rem; min-width: 220px; }
.pricing-selector-bar select:focus { outline: none; border-color: var(--black); }
.pricing-note { font-size: 0.78rem; color: #888; margin-left: auto; }

.pricing-grid-card { background: var(--white); border: var(--border-subtle); }
.pricing-grid-card-hd { padding: 13px 18px; border-bottom: var(--border-subtle); display: flex; justify-content: space-between; align-items: center; }
.pricing-grid-card-hd h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; }
.pricing-grid-scroll { overflow: auto; max-height: 560px; }
.pricing-grid-tbl { border-collapse: collapse; }
.pricing-grid-tbl thead th {
  background: var(--black); color: var(--white);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 9px 10px; text-align: center; white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.pricing-grid-tbl thead th:first-child { position: sticky; left: 0; z-index: 3; min-width: 90px; text-align: left; }
.pricing-grid-tbl tbody th {
  background: #f5f5f5; font-size: 0.72rem; font-weight: 600;
  padding: 7px 12px; white-space: nowrap; position: sticky; left: 0; z-index: 1;
  text-align: left; border-right: var(--border-subtle); border-bottom: var(--border-subtle);
}
.pricing-grid-tbl tbody td { border: var(--border-subtle); padding: 2px; }
.price-cell-input {
  width: 68px; padding: 6px 6px; border: none; text-align: center;
  font-size: 0.8rem; font-family: var(--font-sans); background: transparent;
  display: block;
}
.price-cell-input:focus { outline: 2px solid var(--black); background: #fffef0; z-index: 1; position: relative; }
.price-cell-input::-webkit-outer-spin-button,
.price-cell-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pricing-actions-bar { padding: 14px 18px; border-top: var(--border-subtle); display: flex; align-items: center; gap: 12px; }
.save-confirm { font-size: 0.8rem; color: #666; display: none; }
.save-confirm.show { display: block; }

/* Admin Login */
.admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--black); }
.admin-login-card { background: var(--white); padding: 44px; width: 360px; }
.admin-login-card h1 { font-family: var(--font-serif); font-size: 1.5rem; text-align: center; margin-bottom: 4px; }
.admin-login-sub { font-size: 0.78rem; color: #888; text-align: center; margin-bottom: 28px; }

/* Recent orders widget */
.admin-recent { background: var(--white); border: var(--border-subtle); }
.admin-recent-hd { padding: 13px 18px; border-bottom: var(--border-subtle); display: flex; justify-content: space-between; align-items: center; }
.admin-recent-hd h3 { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; }
.admin-recent-hd a { font-size: 0.78rem; text-decoration: underline; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .pd-grid { grid-template-columns: 1fr; }
  .install-layout { grid-template-columns: 1fr; }
  .admin-order-grid { grid-template-columns: 1fr; }
  .admin-stats-row { grid-template-columns: repeat(2, 1fr); }
  .products-admin-grid { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .samples-layout { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 48px; }
  .container { padding: 0 18px; }
  .nav-links { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-mobile-menu.open { display: flex; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--white); border-bottom: var(--border); z-index: 99; }
  .nav-mobile-menu a { padding: 13px 20px; font-size: 0.9rem; border-bottom: var(--border-subtle); font-weight: 500; }
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero-content { padding: 48px 20px; border-right: none; border-bottom: var(--border); }
  .hero-image { height: 280px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .acct-layout { grid-template-columns: 1fr; }
  .acct-sidebar { border-right: none; border-bottom: var(--border-subtle); padding-right: 0; padding-bottom: 20px; margin-bottom: 20px; }
  .admin-stats-row { grid-template-columns: 1fr 1fr; }
  .cart-row { gap: 12px; }
  .cart-item-img { width: 64px; height: 64px; }
  .cart-item-content { padding-right: 130px; }
  .swatch-pick-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .trust-bar .container { flex-direction: column; }
  .trust-item { border-right: none; border-bottom: var(--border-subtle); }
  .admin-stats-row { grid-template-columns: 1fr; }
  .swatch-pick-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-topbar nav a span { display: none; }
}

/* ============================================================
   NAV BADGE — admin unread counts
   ============================================================ */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e33; color: #fff; font-size: 0.58rem; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 50%; padding: 0 3px;
  margin-left: 4px; vertical-align: middle; line-height: 1;
}

/* ============================================================
   BRACKET TAG MANAGER — pricing expansion 1
   ============================================================ */
.bracket-mgr { padding: 18px; border: var(--border-subtle); background: var(--white); margin-bottom: 18px; }
.bracket-mgr-hd { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 14px; }
.bracket-axis-row { display: flex; gap: 32px; flex-wrap: wrap; }
.bracket-axis { flex: 1; min-width: 260px; }
.bracket-axis-lbl { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #555; margin-bottom: 8px; }
.bracket-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; min-height: 28px; }
.bracket-tag { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border: var(--border-subtle); background: #f5f5f5; font-size: 0.78rem; }
.bracket-tag-x { color: #aaa; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; background: none; border: none; }
.bracket-tag-x:hover { color: #c00; }
.bracket-add-row { display: flex; gap: 6px; align-items: center; }
.bracket-add-input { width: 72px; padding: 5px 8px; border: var(--border-subtle); font-size: 0.8125rem; text-align: center; background: var(--white); }
.bracket-add-input:focus { outline: none; border-color: var(--black); }

/* Dimension limits panel */
.dim-limits-panel { padding: 18px; border: var(--border-subtle); background: var(--white); margin-bottom: 18px; }
.dim-limits-panel-hd { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 14px; }
.dim-limits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dim-error-msg { font-size: 0.7rem; color: #c00; display: block; white-space: nowrap; }

/* ============================================================
   DEAL BADGE + SALE PRICE — expansion 2
   ============================================================ */
.deal-badge {
  display: inline-block; padding: 2px 8px; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--black); color: var(--white); margin-left: 10px; vertical-align: middle;
}
.deal-price-wrap { display: flex; align-items: baseline; gap: 8px; }
.deal-orig-price { text-decoration: line-through; color: #aaa; font-size: 0.8rem; }
.deal-sale-price { color: var(--black); font-weight: 600; }

/* Deals section inside product admin card */
.deal-section { margin-top: 14px; border-top: 1px solid #eee; padding-top: 14px; }
.deal-section-toggle { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #888; cursor: pointer; display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; }
.deal-section-body { display: none; margin-top: 12px; }
.deal-section-body.open { display: block; }
.deal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

/* ============================================================
   PRODUCT MODAL — Add/Edit product overlay
   ============================================================ */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1000; overflow-y: auto; }
.modal-overlay.open { display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; }
.modal { background: var(--white); width: 100%; max-width: 640px; }
.modal-hd { padding: 20px 24px; border-bottom: var(--border-subtle); display: flex; justify-content: space-between; align-items: center; }
.modal-hd h2 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; }
.modal-close { font-size: 1.5rem; color: #aaa; padding: 4px 8px; line-height: 1; background: none; border: none; cursor: pointer; }
.modal-close:hover { color: var(--black); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: var(--border-subtle); display: flex; justify-content: flex-end; gap: 10px; }
.modal-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Product card CRUD actions */
.prod-action-bar { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.prod-archived-badge { font-size: 0.62rem; padding: 2px 7px; background: #f0f0f0; color: #888; border: var(--border-subtle); letter-spacing: 0.05em; text-transform: uppercase; }

/* ============================================================
   PAGINATION BAR + ROWS PER PAGE — expansion 3
   ============================================================ */
.table-controls-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: var(--border-subtle); background: #fafafa; flex-wrap: wrap; gap: 8px;
}
.rows-per-page-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #888; }
.rows-per-page-select { padding: 5px 8px; border: var(--border-subtle); background: var(--white); font-size: 0.78rem; }
.rows-per-page-select:focus { outline: none; border-color: var(--black); }
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-top: var(--border-subtle);
  background: var(--white); font-size: 0.8rem; color: #888; flex-wrap: wrap; gap: 8px;
}
.pagination-btn { padding: 5px 12px; border: var(--border-subtle); background: var(--white); font-size: 0.78rem; cursor: pointer; }
.pagination-btn:hover:not([disabled]) { background: var(--black); color: var(--white); border-color: var(--black); }
.pagination-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   CUSTOMERS PAGE — expansion 4a
   ============================================================ */
.customer-detail-panel { padding: 16px; background: #fafafa; border-top: var(--border-subtle); }
.customer-orders-mini { width: 100%; border-collapse: collapse; margin-top: 10px; }
.customer-orders-mini td { padding: 7px 10px; font-size: 0.8rem; border-bottom: 1px solid #eee; }
.customer-orders-mini tr:last-child td { border-bottom: none; }

/* ============================================================
   EMAIL INBOX — expansion 4b
   ============================================================ */
.email-layout { display: grid; grid-template-columns: 340px 1fr; border: var(--border-subtle); background: var(--white); min-height: 580px; }
.email-thread-list { border-right: var(--border-subtle); overflow-y: auto; }
.email-thread-row { padding: 13px 14px; border-bottom: var(--border-subtle); cursor: pointer; transition: background 0.08s; border-left: 3px solid transparent; }
.email-thread-row:hover { background: #fafafa; }
.email-thread-row.et-active { background: #f0f0f0; }
.email-thread-row.unread { border-left: 3px solid var(--black); }
.et-header { display: flex; justify-content: space-between; margin-bottom: 3px; }
.et-name { font-size: 0.875rem; font-weight: 600; }
.et-date { font-size: 0.72rem; color: #aaa; }
.et-subject { font-size: 0.8rem; color: #333; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-preview { font-size: 0.75rem; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-status-badge { font-size: 0.62rem; padding: 1px 6px; border: var(--border-subtle); text-transform: uppercase; letter-spacing: 0.05em; display: inline-block; margin-top: 4px; }
.et-status-badge.new { background: var(--black); color: var(--white); border-color: var(--black); }
.et-status-badge.replied { color: #555; }
.et-status-badge.closed { color: #aaa; }

.email-detail { display: flex; flex-direction: column; }
.email-detail-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: #aaa; font-size: 0.875rem; padding: 60px; }
.email-detail-hd { padding: 16px 20px; border-bottom: var(--border-subtle); display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.email-detail-subject { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 3px; }
.email-detail-meta { font-size: 0.78rem; color: #888; }
.email-detail-actions { display: flex; gap: 6px; flex-shrink: 0; }
.email-messages { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.email-msg-hd { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.75rem; color: #888; }
.email-msg-body { font-size: 0.875rem; line-height: 1.8; padding: 12px 16px; border: var(--border-subtle); background: #fafafa; }
.email-reply-area { padding: 16px 20px; border-top: var(--border-subtle); background: var(--white); }
.email-reply-area textarea { width: 100%; min-height: 80px; padding: 9px 12px; border: var(--border-subtle); font-size: 0.875rem; resize: vertical; font-family: var(--font-sans); }
.email-reply-area textarea:focus { outline: none; border-color: var(--black); }
.email-reply-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; flex-wrap: wrap; gap: 8px; }
.link-customer-wrap { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #888; }
.link-customer-select { padding: 5px 8px; border: var(--border-subtle); font-size: 0.78rem; background: var(--white); }

@media (max-width: 900px) { .email-layout { grid-template-columns: 1fr; } }

/* ============================================================
   STAFF MESSAGES — expansion 4c
   ============================================================ */
.msg-layout { display: grid; grid-template-columns: 220px 1fr; border: var(--border-subtle); background: var(--white); min-height: 560px; }
.msg-staff-list { border-right: var(--border-subtle); }
.msg-staff-hd { padding: 13px 16px; border-bottom: var(--border-subtle); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #888; }
.msg-staff-item { padding: 12px 14px; border-bottom: var(--border-subtle); cursor: pointer; display: flex; align-items: center; gap: 10px; transition: background 0.08s; }
.msg-staff-item:hover { background: #fafafa; }
.msg-staff-item.active { background: #f0f0f0; }
.msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
.msg-staff-name { font-size: 0.85rem; font-weight: 500; }
.msg-staff-role { font-size: 0.7rem; color: #888; }
.msg-chat-panel { display: flex; flex-direction: column; }
.msg-chat-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: #aaa; font-size: 0.875rem; padding: 60px; }
.msg-chat-hd { padding: 13px 18px; border-bottom: var(--border-subtle); display: flex; align-items: center; gap: 10px; }
.msg-chat-name { font-size: 0.9rem; font-weight: 600; }
.msg-chat-role { font-size: 0.75rem; color: #888; }
.msg-bubbles { flex: 1; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; max-height: 440px; }
.msg-bubble { max-width: 72%; }
.msg-bubble.mine { align-self: flex-end; }
.msg-bubble.theirs { align-self: flex-start; }
.msg-bubble-body { padding: 10px 14px; font-size: 0.875rem; line-height: 1.65; }
.msg-bubble.mine .msg-bubble-body { background: var(--black); color: var(--white); }
.msg-bubble.theirs .msg-bubble-body { background: #f0f0f0; color: var(--black); }
.msg-bubble-meta { font-size: 0.68rem; color: #aaa; margin-top: 3px; }
.msg-bubble.mine .msg-bubble-meta { text-align: right; }
.msg-input-row { display: flex; border-top: var(--border-subtle); }
.msg-input { flex: 1; padding: 12px 16px; border: none; font-size: 0.875rem; font-family: var(--font-sans); resize: none; min-height: 50px; }
.msg-input:focus { outline: none; }
.msg-send-btn { padding: 12px 20px; background: var(--black); color: var(--white); border: none; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; }
.msg-send-btn:hover { opacity: 0.8; }

@media (max-width: 768px) { .msg-layout { grid-template-columns: 1fr; } .msg-staff-list { border-right: none; border-bottom: var(--border-subtle); } }

/* ============================================================
   CREATE ORDER PAGE — redesigned layout
   ============================================================ */

/* Section spacing */
.co-section { margin-bottom: 20px; }

/* Customer row — flex row of fields */
.co-customer-row { display: flex; gap: 16px; flex-wrap: wrap; }
.co-customer-row .form-row { margin-bottom: 0; }
.co-found-badge { font-size: 0.8rem; color: #2e7d32; font-weight: 600; margin-top: 6px; padding: 4px 0; }

/* Line items table */
.co-lines-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 820px; }
.co-lines-table thead th { background: #f7f7f5; border-bottom: 2px solid #e5e3df; padding: 8px 10px; text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #888; white-space: nowrap; }
.co-lines-table tbody td { padding: 7px 8px; border-bottom: 1px solid #f0ede9; vertical-align: middle; }
.co-lines-table tbody tr:last-child td { border-bottom: none; }
.col-num { width: 34px; text-align: center; }
.col-room { width: 120px; }
.col-prod { width: 160px; }
.col-color { width: 130px; }
.col-dim { width: 80px; }
.col-opts { min-width: 140px; }
.col-qty { width: 80px; text-align: center; }
.col-price { width: 80px; text-align: right; white-space: nowrap; }
.col-del { width: 32px; text-align: center; }

/* Room input inside table */
.co-room-input { width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 5px 7px; font-size: 0.82rem; background: #fff; }
.co-room-input:focus { outline: none; border-color: #999; }

/* Subtotal / total bar below line items table */
.co-line-total-row { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid #eee; background: #fafafa; }
.co-total-label { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.06em; }
.co-total-val { font-family: var(--font-serif); font-size: 1.2rem; color: #222; }

/* Address section — two columns */
.co-addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-bottom: 20px; }
@media (max-width: 900px) { .co-addr-grid { grid-template-columns: 1fr; } }

/* Address validation badges */
.addr-badge-ok { display: inline-flex; align-items: center; gap: 5px; background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; border-radius: 4px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; }
.addr-badge-warn { display: inline-flex; align-items: center; gap: 5px; background: #fffbee; color: #7a5500; border: 1px solid #e8cc6c; border-radius: 4px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; cursor: help; }

/* Payment info rows */
.payment-notice { background: #fffbee; border: 1px solid #e8cc6c; padding: 12px 16px; font-size: 0.8rem; color: #6b4c00; line-height: 1.7; margin-bottom: 16px; border-radius: 4px; }
.payment-notice strong { display: block; margin-bottom: 4px; color: #4a3400; }
.co-payment-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-start; }
.co-payment-row .form-row { margin-bottom: 0; }
.co-card-divider { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; border-top: 1px solid #eee; padding-top: 14px; margin: 4px 0 14px; }
.co-card-addr-radios { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.co-radio-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.co-radio-label input[type="radio"] { width: 14px; height: 14px; cursor: pointer; }

/* Save/cancel actions bar */
.co-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 20px; margin-top: 4px; border-top: 1px solid #eee; margin-bottom: 40px; }

/* Legacy — kept for backward compat */
.create-order-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 960px) { .create-order-grid { grid-template-columns: 1fr; } }
.co-order-total-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 0; border-top: var(--border); font-family: var(--font-serif); font-size: 1.1rem; margin-top: 8px; }
.co-line-product-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: var(--border-subtle); background: #fafafa; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   PRODUCTS V2 — combined products + pricing two-panel layout
   ============================================================ */
.products-layout { display: flex; gap: 0; border: 1px solid #e5e3df; background: #fff; min-height: calc(100vh - 180px); }
.prod-sidebar { width: 260px; flex-shrink: 0; border-right: 1px solid #e5e3df; background: #fafaf8; display: flex; flex-direction: column; }
.prod-sidebar-top { padding: 12px 14px; border-bottom: 1px solid #e5e3df; display: flex; align-items: center; justify-content: space-between; }
.prod-sidebar-top span { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #888; }
.prod-sidebar-body { flex: 1; overflow-y: auto; }
.prod-cat-group { border-bottom: 1px solid #e5e3df; }
.prod-cat-hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: #333; user-select: none; }
.prod-cat-hd:hover { background: #f0ede9; }
.prod-cat-arrow { font-size: 0.65rem; color: #bbb; transition: transform 0.15s; }
.prod-cat-group.open .prod-cat-arrow { transform: rotate(90deg); }
.prod-cat-list { display: none; }
.prod-cat-group.open .prod-cat-list { display: block; background: #fff; }
.prod-cat-item { padding: 7px 14px 7px 24px; font-size: 0.8rem; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.prod-cat-item:hover { background: #f5f3f0; }
.prod-cat-item.active { background: #1a1a1a; color: #fff; font-weight: 600; }
.prod-cat-item-archived { opacity: 0.5; font-style: italic; }
.prod-cat-add-link { padding: 7px 14px 10px 24px; font-size: 0.75rem; color: #aaa; cursor: pointer; display: block; }
.prod-cat-add-link:hover { color: #333; }
.prod-archived-hd { padding: 9px 14px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; cursor: pointer; display: flex; align-items: center; gap: 6px; border-top: 2px solid #e5e3df; }
.prod-detail-panel { flex: 1; overflow-y: auto; background: #fff; min-width: 0; }
.prod-detail-empty { display: flex; align-items: center; justify-content: center; height: 300px; color: #ccc; font-size: 0.9rem; }
.prod-detail-hd-bar { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid #e5e3df; flex-wrap: wrap; background: #fff; position: sticky; top: 0; z-index: 10; }
.prod-detail-hd-bar h2 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0; flex: 1; min-width: 0; }
.prod-detail-body { padding: 0 22px 40px; }
.prod-detail-section { border-bottom: 1px solid #f0ede9; }
.pds-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; cursor: pointer; user-select: none; }
.pds-hd h4 { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #888; margin: 0; }
.pds-hd-arrow { font-size: 0.65rem; color: #ccc; }
.pds-body { padding-bottom: 18px; }
.pds-body.collapsed { display: none; }

/* Status badges */
.status-active  { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; padding: 2px 8px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.status-inactive{ background: #fff3e0; color: #7a4000; border: 1px solid #ffcc80; padding: 2px 8px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* Price grid v2 — cost + sell */
.price-grid-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  align-items: start;
  padding: 10px 0 14px;
}
.price-grid-controls .form-row { margin-bottom: 0; }
.price-grid-controls .form-input { width: 100%; }
.pgc-full { grid-column: 1 / -1; }
.pgv2-preview-text { font-size: 0.75rem; color: #888; padding-top: 2px; }

/* Pricing mode radio toggle */
.pricing-mode-grp {
  display: flex;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}
.pricing-mode-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  background: #fff;
  transition: background 0.12s, color 0.12s;
  user-select: none;
  white-space: nowrap;
}
.pricing-mode-opt + .pricing-mode-opt { border-left: 1px solid #ddd; }
.pricing-mode-opt input[type="radio"] { margin: 0; accent-color: #333; }
.pricing-mode-opt.active,
.pricing-mode-opt:has(input:checked) {
  background: #111;
  color: #fff;
}
.pricing-mode-opt:has(input:checked) input[type="radio"] { accent-color: #fff; }

/* msrp-chain sits in its own grid cell (col 3, row 2) */
.msrp-chain-cell { display: flex; align-items: flex-end; padding-bottom: 4px; font-size: 0.72rem; color: #555; }

/* Cost sub-label inside MSRP grid cells */
.pgv2-cost-lbl {
  display: block;
  font-size: 0.65rem;
  color: #888;
  text-align: right;
  line-height: 1.3;
}
.price-grid-v2-wrap { overflow-x: auto; margin-bottom: 4px; }
table.price-grid-v2 { border-collapse: collapse; font-size: 0.78rem; white-space: nowrap; }
table.price-grid-v2 th { background: #f7f7f5; border: 1px solid #e5e3df; padding: 5px 8px; font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.05em; color: #888; }
table.price-grid-v2 td { border: 1px solid #eee; padding: 4px 6px; vertical-align: middle; min-width: 120px; }
.pgv2-th-inner { display: flex; align-items: center; gap: 4px; }
.pgv2-hdr-input { width: 46px; border: 1px solid #ddd; padding: 2px 4px; font-size: 0.72rem; text-align: center; background: #fff; }
.pgv2-del-btn { background: none; border: none; color: #c00; cursor: pointer; font-size: 0.72rem; padding: 0 2px; line-height: 1; }
/* Horizontal cell layout */
.pgv2-cell-row { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.pgv2-cost-input { width: 58px; flex-shrink: 0; border: 1px solid #ddd; padding: 3px 5px; font-size: 0.78rem; text-align: right; background: #fff; }
.pgv2-cost-input:focus { outline: none; border-color: #999; }
.pgv2-sell-label { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.pgv2-arr { font-size: 0.65rem; color: #bbb; }
.pgv2-sell-val { font-size: 0.72rem; color: #2e7d32; font-weight: 600; }
.pgv2-sell-strike { font-size: 0.65rem; color: #bbb; text-decoration: line-through; }
.pgv2-sell-final { font-size: 0.72rem; color: #2e7d32; }
.pgv2-profit { font-size: 0.65rem; color: #888; margin-left: 2px; }
.pgv2-add-btn { background: #f5f5f3; border: 1px dashed #ccc; padding: 5px 12px; font-size: 0.75rem; color: #666; cursor: pointer; }
.pgv2-add-btn:hover { background: #eee; color: #222; }

/* Order detail field blocks */
.field-blocks-list { display: flex; flex-direction: column; gap: 8px; }
.field-block { border: 1px solid #e5e3df; background: #fafaf8; }
.fb-hd { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; cursor: pointer; background: #f5f3f0; }
.fb-hd:hover { background: #ede9e4; }
.fb-hd-label { font-size: 0.8rem; font-weight: 600; color: #333; }
.fb-hd-meta { font-size: 0.68rem; font-weight: normal; color: #aaa; margin-left: 6px; }
.fb-hd-controls { display: flex; gap: 4px; align-items: center; }
.fb-hd-controls button { background: none; border: none; cursor: pointer; color: #aaa; font-size: 0.8rem; padding: 1px 4px; }
.fb-hd-controls button:hover { color: #333; }
.fb-body { padding: 12px; display: none; }
.field-block.open .fb-body { display: block; }
.fb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; }

/* Color swatch editor */
.swatch-editor-list { display: flex; flex-direction: column; gap: 6px; }
.swatch-editor-row { display: flex; align-items: center; gap: 8px; }
.swatch-dot { width: 22px; height: 22px; border: 1px solid #ddd; flex-shrink: 0; }
.swatch-name-input { flex: 1; border: 1px solid #ddd; padding: 4px 8px; font-size: 0.8rem; }
.swatch-hex-input { width: 82px; border: 1px solid #ddd; padding: 4px 8px; font-size: 0.8rem; font-family: monospace; }
.swatch-del-btn { background: none; border: none; color: #c00; cursor: pointer; font-size: 1rem; padding: 0 4px; }

/* Customer instruction popup */
.instr-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 900; display: flex; align-items: center; justify-content: center; }
.instr-popup-box { background: #fff; border: 1px solid #ddd; max-width: 460px; width: 92%; padding: 22px; position: relative; }
.instr-popup-box h4 { font-family: var(--font-serif); font-size: 1rem; margin: 0 0 10px; }
.instr-popup-box p { font-size: 0.875rem; color: #444; line-height: 1.65; margin-bottom: 12px; }
.instr-popup-box img { max-width: 100%; margin-bottom: 10px; display: block; }
.instr-popup-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #888; }

/* Messages V2 — three-panel */
.msg-layout-v2 { display: grid; grid-template-columns: 230px 1fr 200px; border: 1px solid #e5e3df; background: #fff; min-height: 540px; }
.msg-thread-panel { border-right: 1px solid #e5e3df; display: flex; flex-direction: column; background: #fafaf8; }
.msg-thread-top { padding: 11px 14px; border-bottom: 1px solid #e5e3df; display: flex; align-items: center; justify-content: space-between; }
.msg-thread-top h4 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin: 0; }
.msg-thread-list-el { flex: 1; overflow-y: auto; }
.msg-thread-row { padding: 10px 12px; border-bottom: 1px solid #f0ede9; cursor: pointer; }
.msg-thread-row:hover { background: #f5f3f0; }
.msg-thread-row.mt-active { background: #1a1a1a; color: #fff; }
.msg-thread-row.mt-active .mt-preview,
.msg-thread-row.mt-active .mt-meta { color: #999; }
.mt-name { font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.mt-unread { background: #fff; color: #111; font-size: 0.6rem; border-radius: 10px; padding: 1px 5px; margin-left: 4px; }
.msg-thread-row.mt-active .mt-unread { background: #aaa; color: #111; }
.mt-preview { font-size: 0.72rem; color: #888; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-meta { font-size: 0.65rem; color: #bbb; margin-top: 2px; }
.msg-chat-v2 { display: flex; flex-direction: column; background: #fff; }
.msg-chat-hd-v2 { padding: 11px 16px; border-bottom: 1px solid #e5e3df; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.msg-bubbles-wrap { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; min-height: 280px; max-height: 380px; }
.msg-bub-row { display: flex; }
.msg-bub-row.sent { justify-content: flex-end; }
.msg-bub-row.recv { justify-content: flex-start; }
.msg-bub { max-width: 72%; padding: 8px 12px; font-size: 0.82rem; line-height: 1.5; }
.msg-bub.sent-bub { background: #1a1a1a; color: #fff; }
.msg-bub.recv-bub { background: #f0ede9; color: #333; }
.msg-bub-meta { font-size: 0.63rem; color: #aaa; margin-top: 3px; }
.msg-bub-row.sent .msg-bub-meta { text-align: right; }
.msg-footer-v2 { padding: 10px 14px; border-top: 1px solid #e5e3df; display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.msg-footer-v2 textarea { flex: 1; border: 1px solid #ddd; padding: 7px 10px; font-size: 0.82rem; resize: none; height: 50px; font-family: var(--font-sans); }
.msg-footer-v2 textarea:focus { outline: none; border-color: #999; }
.msg-chat-empty-v2 { display: flex; align-items: center; justify-content: center; flex: 1; color: #bbb; font-size: 0.875rem; padding: 60px 0; }
.msg-attach-bar-v2 { padding: 7px 14px; border-bottom: 1px solid #eee; display: flex; gap: 8px; background: #fafafa; flex-shrink: 0; }
.msg-ctx-panel { border-left: 1px solid #e5e3df; background: #fafaf8; display: flex; flex-direction: column; }
.msg-ctx-top { padding: 11px 12px; border-bottom: 1px solid #e5e3df; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; }
.msg-ctx-body { padding: 12px; flex: 1; overflow-y: auto; }
.msg-ctx-card { border: 1px solid #e5e3df; padding: 10px; background: #fff; font-size: 0.78rem; margin-bottom: 8px; line-height: 1.6; }
.msg-ctx-card h5 { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: #aaa; margin: 0 0 6px; }
.msg-ctx-empty { font-size: 0.75rem; color: #ccc; text-align: center; padding-top: 24px; }
@media (max-width: 900px) { .msg-layout-v2 { grid-template-columns: 1fr; } .msg-ctx-panel { border-left: none; border-top: 1px solid #e5e3df; } }

/* Email customer link banners */
.email-cust-banner { display: flex; align-items: center; gap: 10px; background: #fffbee; border: 1px solid #e8cc6c; padding: 7px 14px; font-size: 0.8rem; color: #6b4c00; margin-bottom: 10px; }
.email-cust-banner a { color: #4a3400; font-weight: 600; text-decoration: underline; }
.email-no-cust-banner { display: flex; align-items: center; gap: 10px; background: #f7f7f5; border: 1px solid #ddd; padding: 7px 14px; font-size: 0.8rem; color: #888; margin-bottom: 10px; }
.email-history-section { margin-top: 14px; border-top: 1px solid #eee; padding-top: 12px; }
.email-history-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0ede9; font-size: 0.8rem; cursor: pointer; }
.email-history-row:hover { color: #000; }
.email-history-row .eh-subject { flex: 1; }
.email-history-row .eh-date { font-size: 0.72rem; color: #aaa; }

/* Deal badge + price display */
.deal-badge { display: inline-block; background: #111; color: #fff; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 0; }
.price-original { color: #bbb; text-decoration: line-through; font-size: 0.85em; margin-right: 5px; }
.badge-phone-order { display: inline-block; border: 1px solid #555; color: #555; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; }

/* Dimension validation */
.dim-input-error { border-color: #d32f2f !important; background: #fff8f8 !important; }
.dim-err-msg { font-size: 0.7rem; color: #d32f2f; margin-top: 3px; display: block; }
.dim-warn-msg { font-size: 0.7rem; color: #7a5500; margin-top: 3px; display: block; }

/* Prod status badge on list */
.prod-archived-badge { background: #eee; color: #888; font-size: 0.62rem; padding: 2px 7px; text-transform: uppercase; letter-spacing: 0.06em; }

@media (max-width: 860px) { .products-layout { flex-direction: column; } .prod-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e5e3df; } }

/* ---- Dropdown options editor (field blocks) ---- */
.fb-dropdown-opts { border-top: 1px solid #e8e5e0; margin-top: 12px; padding-top: 12px; }
.fb-dropdown-opts-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 0.78rem; font-weight: 600; color: #444; }
.fb-dropdown-opts-list { display: flex; flex-direction: column; gap: 6px; }
.fb-dropdown-empty { font-size: 0.75rem; color: #bbb; padding: 8px 0; }
.fb-opt-row { display: flex; align-items: center; gap: 8px; }
.fb-opt-grip { color: #ccc; font-size: 0.9rem; cursor: grab; flex-shrink: 0; }
.fb-opt-input { flex: 1; }
.fb-opt-cost { width: 80px; flex-shrink: 0; }
.fb-opt-del { background: none; border: none; color: #c00; font-size: 1.1rem; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
.fb-opt-del:hover { color: #900; }

/* ---- Customer account messaging ---- */
.acct-msg-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.acct-msg-hd h2 { margin: 0; }
.acct-back-btn { background: none; border: none; color: #666; font-size: 0.82rem; cursor: pointer; padding: 0; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 4px; }
.acct-back-btn:hover { color: #000; }

/* Thread list */
.acct-thread-item { border: 1px solid #e5e3df; padding: 12px 16px; background: #fff; cursor: pointer; margin-bottom: 6px; display: flex; align-items: center; gap: 14px; }
.acct-thread-item:hover { background: #f9f7f4; }
.acct-thread-item.unread { border-left: 3px solid #111; background: #fffefa; }
.acct-thread-dot { width: 8px; height: 8px; background: #111; border-radius: 50%; flex-shrink: 0; }
.acct-thread-dot.read { background: transparent; }
.acct-thread-info { flex: 1; min-width: 0; }
.acct-thread-subject { font-family: 'Times New Roman', serif; font-size: 0.9rem; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-thread-preview { font-size: 0.75rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.acct-thread-date { font-size: 0.72rem; color: #aaa; flex-shrink: 0; }
.acct-thread-empty { font-size: 0.82rem; color: #aaa; padding: 24px 0; text-align: center; }

/* Thread message view */
.acct-thread-msgs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; max-height: 420px; overflow-y: auto; border: 1px solid #e5e3df; padding: 14px; background: #faf9f7; }
.acct-msg-bubble { max-width: 85%; }
.acct-msg-bubble.from-customer { align-self: flex-end; }
.acct-msg-bubble.from-admin { align-self: flex-start; }
.acct-msg-bubble-inner { padding: 10px 14px; font-size: 0.84rem; line-height: 1.6; border: 1px solid #e5e3df; background: #fff; }
.acct-msg-bubble.from-customer .acct-msg-bubble-inner { background: #111; color: #fff; border-color: #111; }
.acct-msg-bubble-meta { font-size: 0.68rem; color: #aaa; margin-top: 4px; }
.acct-msg-bubble.from-customer .acct-msg-bubble-meta { text-align: right; }
.acct-msg-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acct-msg-attach-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid #ddd; cursor: pointer; }
.acct-msg-attach-file { font-size: 0.72rem; background: rgba(255,255,255,0.15); padding: 4px 8px; border: 1px solid rgba(255,255,255,0.3); color: inherit; text-decoration: none; }

/* Composer / reply area */
.acct-reply-wrap { border: 1px solid #e5e3df; background: #fff; }
.acct-rte-toolbar { padding: 8px 12px; border-bottom: 1px solid #e8e5e0; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #aaa; }
.acct-rte-editor { min-height: 120px; }
.acct-rte-editor .ql-editor { font-family: inherit; font-size: 0.875rem; }
.acct-rte-editor .ql-toolbar { border: none; border-bottom: 1px solid #e8e5e0; }
.acct-rte-editor .ql-container { border: none; }
.acct-attach-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 8px 12px; border-top: 1px solid #e8e5e0; background: #faf9f7; }
.acct-attach-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: #555; cursor: pointer; border: 1px solid #ccc; padding: 4px 10px; background: #fff; }
.acct-attach-btn:hover { background: #f5f5f5; }
.acct-attach-hint { font-size: 0.7rem; color: #aaa; }
.acct-attach-preview-row { display: flex; flex-wrap: wrap; gap: 6px; }
.acct-attach-thumb { position: relative; width: 52px; height: 52px; border: 1px solid #ddd; overflow: hidden; }
.acct-attach-thumb img, .acct-attach-thumb video { width: 100%; height: 100%; object-fit: cover; }
.acct-attach-thumb-remove { position: absolute; top: 1px; right: 2px; background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 0.65rem; cursor: pointer; padding: 0 3px; line-height: 1.5; }
.acct-attach-video-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; pointer-events: none; }
.acct-attach-file-icon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.1rem; pointer-events: none; gap: 2px; background: #f5f5f5; padding: 4px; }
.acct-attach-file-label { font-size: 0.48rem; color: #555; text-align: center; word-break: break-all; line-height: 1.2; max-height: 24px; overflow: hidden; }

/* Admin messages panel — customer thread badge */
.msg-cust-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: #111; color: #fff; padding: 2px 5px; margin-left: 5px; vertical-align: middle; }

/* ============================================================
   COLOR EDITOR V2 — admin
   ============================================================ */
.color-editor-list { display: flex; flex-direction: column; gap: 8px; }
.color-editor-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0ede9; }
.color-thumb-admin { width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 0; flex-shrink: 0; object-fit: cover; }
.color-thumb-placeholder { width: 40px; height: 40px; background: #ccc; border: 1px solid #ddd; flex-shrink: 0; }
.cer-upload-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #555; cursor: pointer; border: 1px solid #ccc; padding: 4px 8px; background: #fff; white-space: nowrap; }
.cer-upload-btn:hover { background: #f5f5f5; }
.cer-name-input { flex: 1; min-width: 0; }
.cer-avail-sel { width: 130px; flex-shrink: 0; font-size: 0.78rem; }
.cer-pos-btn { background: none; border: 1px solid #ddd; color: #555; font-size: 0.8rem; cursor: pointer; padding: 3px 7px; }
.cer-pos-btn:hover { background: #f5f5f5; }
.cer-save-btn { background: #111; color: #fff; border: none; font-size: 0.72rem; padding: 5px 10px; cursor: pointer; }
.cer-save-btn:hover { background: #333; }
.cer-del-btn { background: none; border: 1px solid #ddd; color: #c00; font-size: 0.72rem; padding: 5px 8px; cursor: pointer; }
.cer-del-btn:hover { background: #fff0f0; }

/* ============================================================
   SPEC EDITOR V2 — admin
   ============================================================ */
.spec-editor-list { display: flex; flex-direction: column; gap: 6px; }
.spec-editor-hdr { display: flex; gap: 8px; padding: 0 0 4px; border-bottom: 1px solid #e5e3df; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #aaa; }
.spec-editor-row { display: flex; gap: 8px; align-items: center; }
.spec-editor-row .form-input { flex: 1; }

/* ============================================================
   DOWNLOADS EDITOR V2 — admin
   ============================================================ */
.dl-cat-section { border: 1px solid #e5e3df; padding: 10px 12px; margin-bottom: 10px; background: #fafaf8; }
.dl-cat-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.dl-show-label { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: #666; cursor: pointer; }
.dl-file-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid #f0ede9; font-size: 0.78rem; }
.dl-file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-file-date { font-size: 0.7rem; color: #aaa; flex-shrink: 0; }
.dl-file-list { padding-top: 4px; }

/* ============================================================
   ADMIN REVIEWS V2
   ============================================================ */
.admin-review-card { border: 1px solid #e5e3df; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.arc-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.arc-stars { color: #f4a700; letter-spacing: 1px; }
.arc-source-tag { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; background: #eee; color: #777; padding: 2px 6px; }
.arc-title { font-weight: 600; font-size: 0.82rem; margin-bottom: 3px; }
.arc-body { font-size: 0.8rem; color: #555; line-height: 1.6; margin-bottom: 8px; }
.arc-media { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.arc-media-thumb { width: 56px; height: 56px; object-fit: cover; border: 1px solid #ddd; cursor: pointer; }
.arc-media-video { width: 56px; height: 56px; background: #222; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; border: 1px solid #ddd; }
.arc-actions { display: flex; gap: 8px; }

/* ============================================================
   ORDER TAB — room location + mount + color thumbnail
   ============================================================ */
.color-cell { display: flex; align-items: center; gap: 6px; }
.color-thumb-sq { width: 36px; height: 36px; border: 1px solid #ddd; flex-shrink: 0; background: #ccc; }
.room-input { width: 96px; font-size: 0.78rem; }
.mount-select { font-size: 0.78rem; min-width: 110px; }

/* ============================================================
   SWATCHES TAB — customer-facing
   ============================================================ */
.swatches-tab-wrap { padding: 20px 0; }
.swatches-note { font-size: 0.82rem; color: #666; margin-bottom: 20px; line-height: 1.7; max-width: 520px; }
.swatch-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch-card { width: 100px; cursor: pointer; text-align: center; }
.swatch-card-oos { cursor: default; opacity: 0.6; }
.swatch-card-img { position: relative; width: 100px; height: 100px; border: 1px solid #ddd; background: #e0e0e0; }
.swatch-card:not(.swatch-card-oos):hover .swatch-card-img { border-color: #111; outline: 2px solid #111; outline-offset: 1px; }
.swatch-oos-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; }
.swatch-oos-overlay span { color: #fff; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; padding: 2px 4px; }
.swatch-card-name { font-size: 0.72rem; margin-top: 5px; color: #333; line-height: 1.3; }
.swatch-add-btn { margin-top: 5px; font-size: 0.68rem; background: #111; color: #fff; border: none; padding: 4px 8px; cursor: pointer; width: 100%; }
.swatch-add-btn:hover { background: #333; }

/* ============================================================
   REVIEWS — media + video thumb
   ============================================================ */
.review-media-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.review-media-thumb { width: 64px; height: 64px; object-fit: cover; border: 1px solid #ddd; cursor: pointer; }
.review-media-note { font-size: 0.68rem; color: #999; align-self: flex-end; }
.review-video-thumb { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; background: #111; color: #fff; padding: 4px 10px; cursor: pointer; border: none; }
.review-video-thumb:hover { background: #333; }

/* Downloads V2 — multi-file dropdown */
.pdf-link-dropdown { display: flex; align-items: center; gap: 8px; }
.pdf-link-na { pointer-events: auto; }

/* ============================================================
   PRODUCT PHOTOS TAB — frontend
   ============================================================ */
.prod-photos-tab-wrap { padding: 24px 0; }
.prod-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.prod-photo-card { position: relative; border: 1px solid #e0e0e0; overflow: hidden; background: #fafafa; }
.prod-photo-card.prod-photo-featured { border-color: #111; outline: 2px solid #111; outline-offset: 1px; }
.prod-photo-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.prod-photo-badge { position: absolute; top: 8px; left: 8px; background: #111; color: #fff; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 7px; }

/* ============================================================
   ADMIN PRODUCT PHOTOS EDITOR
   ============================================================ */
.photo-editor-list { display: flex; flex-direction: column; gap: 10px; }
.photo-editor-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #e8e8e8; background: #fafafa; }
.photo-editor-thumb { width: 72px; height: 54px; object-fit: cover; border: 1px solid #ddd; flex-shrink: 0; }
.photo-editor-meta { flex: 1; min-width: 0; }
.photo-editor-name { font-size: 0.78rem; color: #333; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-featured-label { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: #555; cursor: pointer; }
.photo-featured-cb { width: 14px; height: 14px; cursor: pointer; accent-color: #111; }
.photo-editor-del { background: none; border: none; color: #c00; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; flex-shrink: 0; }
.photo-editor-del:hover { background: #fff0f0; }

/* ============================================================
   ORDER PAGE — Category grouping headers
   ============================================================ */
.order-cat-header { margin: 36px 0 12px; padding-bottom: 10px; border-bottom: 2px solid #111; }
.order-cat-header:first-child { margin-top: 0; }
.order-cat-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 400; letter-spacing: 0.01em; margin: 0; }

/* ============================================================
   ACCOUNT — Auth tabs (Sign In / Create Account)
   ============================================================ */
.auth-tabs { display: flex; border-bottom: 2px solid #e0e0e0; margin-bottom: 0; }
.auth-tab { flex: 1; background: none; border: none; padding: 12px 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer; color: #aaa; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; }
.auth-tab.active { color: #111; border-bottom-color: #111; }
.auth-tab:hover:not(.active) { color: #555; }
.auth-card { padding: 28px 0 0; }

.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3col { display: grid; grid-template-columns: 1fr 80px 100px; gap: 12px; }
.form-optional { font-weight: 400; color: #aaa; font-size: 0.75em; }

.pass-wrap { position: relative; display: flex; align-items: center; }
.pass-wrap .form-input { flex: 1; padding-right: 52px; }
.pass-toggle { position: absolute; right: 10px; background: none; border: none; font-size: 0.72rem; font-weight: 600; color: #666; cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase; }
.pass-toggle:hover { color: #111; }

.form-success { font-size: 0.8rem; color: #2e7d32; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 8px 12px; border-radius: 3px; margin-bottom: 12px; display: none; }
.form-success.show { display: block; }

/* ============================================================
   ACCOUNT — Sidebar identity
   ============================================================ */
.acct-avatar { width: 52px; height: 52px; border-radius: 50%; background: #111; color: #fff; font-family: var(--font-serif); font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.acct-user-email { font-size: 0.75rem; color: #888; margin-bottom: 20px; word-break: break-all; }

/* ============================================================
   ACCOUNT — Profile cards
   ============================================================ */
.profile-card { background: #fff; border: 1px solid #e8e8e8; padding: 24px; }
.profile-card-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 400; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #eee; }

/* ============================================================
   ACCOUNT — Address cards
   ============================================================ */
.addr-card { border: 1px solid #e0e0e0; padding: 18px 20px; margin-bottom: 12px; background: #fff; }
.addr-card-default { border-color: #111; }
.addr-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.addr-label-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #555; background: #f0f0f0; padding: 2px 8px; }
.addr-default-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #fff; background: #111; padding: 2px 8px; }
.addr-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; }
.addr-lines { font-size: 0.82rem; color: #555; line-height: 1.6; margin-bottom: 12px; }
.addr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.addr-action-btn { background: none; border: 1px solid #ddd; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; cursor: pointer; color: #333; }
.addr-action-btn:hover { border-color: #111; color: #111; }
.addr-del-btn { color: #c00; border-color: #f5c6c6; }
.addr-del-btn:hover { border-color: #c00; background: #fff5f5; }

/* ============================================================
   QUOTES — Cart context banner
   ============================================================ */
.quote-context-banner { background: #f5f0e8; border: 1px solid #d4b96e; padding: 10px 16px; margin-bottom: 16px; }
.qcb-inner { display: flex; align-items: center; gap: 10px; }
.qcb-icon { font-size: 1.1rem; flex-shrink: 0; }
.qcb-text { flex: 1; font-size: 0.8rem; color: #555; }
.qcb-text strong { color: #111; display: block; font-size: 0.85rem; }
.qcb-clear { background: none; border: 1px solid #c4a95e; color: #7a6030; font-size: 0.7rem; font-weight: 600; padding: 3px 8px; cursor: pointer; white-space: nowrap; }
.qcb-clear:hover { background: #ede0c4; }

/* ============================================================
   QUOTES — Cart Save Quote section
   ============================================================ */
.save-quote-divider { border-top: 1px solid #e8e8e8; margin: 16px 0 14px; }
.save-quote-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.save-quote-icon { font-size: 1rem; }
.save-quote-hd span { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #333; }
.save-quote-sub { font-size: 0.78rem; color: #888; margin-bottom: 10px; line-height: 1.5; }
.save-quote-success { font-size: 0.78rem; color: #2e7d32; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 8px 10px; margin-top: 8px; line-height: 1.5; }
.save-quote-success a { color: #2e7d32; }

/* ============================================================
   QUOTES — Account quotes panel
   ============================================================ */
.quote-card { border: 1px solid #e0e0e0; padding: 16px 20px; margin-bottom: 12px; background: #fff; }
.quote-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.quote-card-meta { flex: 1; min-width: 0; }
.quote-card-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 400; margin-bottom: 4px; }
.quote-card-info { font-size: 0.78rem; color: #888; }
.quote-card-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* Quote detail view */
.quote-detail-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #111; }
.quote-detail-hd h3 { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; margin: 0; }

/* Revision blocks */
.qrev-block { border: 1px solid #e0e0e0; margin-bottom: 14px; }
.qrev-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fafafa; border-bottom: 1px solid #e8e8e8; flex-wrap: wrap; }
.qrev-hd-left { display: flex; align-items: center; gap: 10px; }
.qrev-hd-right { display: flex; align-items: center; gap: 12px; }
.qrev-badge { background: #111; color: #fff; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; }
.qrev-note { font-size: 0.75rem; color: #888; }
.qrev-date { font-size: 0.75rem; color: #888; }
.qrev-lines { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.qrev-line { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 0.82rem; }
.qrev-line-name { font-weight: 600; grid-column: 1; }
.qrev-line-spec { color: #666; grid-column: 1; }
.qrev-line-price { grid-row: 1 / 3; grid-column: 2; align-self: center; font-weight: 600; white-space: nowrap; }
.qrev-total { padding: 10px 16px; border-top: 1px solid #eee; background: #fafafa; font-size: 0.82rem; color: #555; text-align: right; }

/* Input shake animation for empty title */
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }
.input-shake { animation: shake 0.4s ease; border-color: #c00 !important; }
.qrev-badge-original { background: #4a7c59; }

/* Registration form section labels */
.reg-section-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #888; padding-bottom: 8px; border-bottom: 1px solid #eee; margin-bottom: 12px; }

/* ============================================================
   ADMIN FRONT PAGE EDITOR
   ============================================================ */
.fp-editor-card { background: #fff; border: 1px solid #ddd; margin-bottom: 28px; }
.fp-editor-card-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.fp-editor-card-title { font-family: 'Times New Roman', serif; font-size: 1.1rem; font-weight: 700; margin: 0 0 3px; }
.fp-editor-card-sub { font-size: 0.8rem; color: #888; margin: 0; }
.fp-editor-card-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.fp-saved-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 600; color: #4a7c59; background: #edf7f0; border: 1px solid #b8dfc5; padding: 4px 10px; }
.fp-editor-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.fp-field-group { display: flex; flex-direction: column; gap: 5px; }
.fp-field-group-inline { max-width: 120px; }
.fp-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #333; }
.fp-label-sub { font-size: 0.75rem; color: #888; margin: 0; }
.fp-textarea { resize: vertical; min-height: 72px; line-height: 1.5; }
.fp-num-input { font-family: 'Times New Roman', serif; font-size: 1rem; text-align: center; }
.fp-img-preview-wrap { margin-bottom: 10px; }
.fp-img-preview-wrap img { max-width: 100%; max-height: 220px; border: 1px solid #ddd; display: block; }
.fp-img-placeholder { font-size: 0.8rem; color: #888; background: #f8f8f8; border: 1px dashed #ddd; padding: 14px 16px; }
.fp-upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-upload-btn { cursor: pointer; }

/* Products reorder list */
.fp-products-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.fp-prod-section-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #999; padding: 10px 0 4px; border-bottom: 1px solid #eee; margin-bottom: 2px; }
.fp-prod-section-label-avail { margin-top: 10px; }
.fp-prod-row { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #e2e8e2; padding: 12px 14px; transition: border-color 0.15s; }
.fp-prod-row-available { background: #fafafa; border-color: #eee; opacity: 0.8; }
.fp-prod-row-available:hover { opacity: 1; }
.fp-prod-position { width: 22px; height: 22px; background: #111; color: #fff; font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 3px; }
.fp-prod-thumb { width: 64px; height: 56px; object-fit: cover; border: 1px solid #eee; flex-shrink: 0; background: #f4f4f4; }
.fp-prod-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fp-prod-cat-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #999; }
.fp-prod-name { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.fp-prod-price-row { display: flex; align-items: center; gap: 6px; }
.fp-prod-price-dim { font-size: 0.72rem; color: #aaa; font-style: italic; }
.fp-prod-price-val { font-size: 0.82rem; font-weight: 700; color: #222; }
.fp-prod-swatches { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; align-items: center; }
.fp-color-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); flex-shrink: 0; }
.fp-swatch-more { font-size: 0.68rem; color: #888; }
.fp-prod-controls { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.fp-prod-btn { background: none; border: 1px solid #ddd; width: 28px; height: 28px; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #444; transition: background 0.15s; }
.fp-prod-btn:hover:not([disabled]) { background: #f0f0f0; }
.fp-prod-btn[disabled] { opacity: 0.3; cursor: default; }
.fp-prod-remove-btn { border-color: #f5c0c0; color: #c00; font-size: 1rem; font-weight: 700; }
.fp-prod-remove-btn:hover { background: #fff0f0; }
.fp-prod-add-btn { background: #111; color: #fff; border: none; width: 32px; height: 32px; font-size: 1.3rem; font-weight: 300; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; transition: background 0.15s; line-height: 1; }
.fp-prod-add-btn:hover { background: #333; }

/* Why Garrison Shades feature blocks */
.fp-feature-block { background: #fafafa; border: 1px solid #e8e8e8; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.fp-feature-block-hd { display: flex; align-items: center; gap: 12px; }
.fp-feature-num-badge { font-family: 'Times New Roman', serif; font-size: 1.4rem; font-weight: 700; color: #111; min-width: 36px; line-height: 1; }
.fp-feature-block-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #999; }
.fp-feature-fields { display: flex; flex-direction: column; gap: 12px; }

/* ══════════════════════════════════════════════════════
   DASHBOARD V2 — Period Stats
   ══════════════════════════════════════════════════════ */
.dash-stat-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dash-stat-period-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #888; }
.dash-stat-period-tabs { display: flex; gap: 0; border: 1px solid #ddd; }
.dash-period-tab { background: #fff; border: none; border-right: 1px solid #ddd; padding: 5px 14px; font-size: 0.78rem; cursor: pointer; color: #666; transition: background 0.15s, color 0.15s; }
.dash-period-tab:last-child { border-right: none; }
.dash-period-tab.active { background: #111; color: #fff; font-weight: 600; }
.dash-period-tab:hover:not(.active) { background: #f5f5f5; }

/* 7-column stats row */
.dash-stats-v2 { grid-template-columns: repeat(6, 1fr) 1.4fr !important; }
@media (max-width: 1200px) { .dash-stats-v2 { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 900px)  { .dash-stats-v2 { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px)  { .dash-stats-v2 { grid-template-columns: repeat(2, 1fr) !important; } }

.admin-stat-revenue-box { display: flex; flex-direction: column; }
.dash-rev-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.dash-rev-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-rev-label { font-size: 0.72rem; color: #888; font-weight: 500; }
.dash-rev-val { font-size: 0.95rem; font-weight: 600; color: #111; display: flex; align-items: center; gap: 1px; }
.dash-rev-row-net .dash-rev-label { color: #111; font-weight: 700; }
.dash-rev-row-net .dash-rev-val { font-size: 1.05rem; }
.dash-rev-input { width: 80px; border: 1px solid #ddd; padding: 2px 6px; font-size: 0.88rem; font-family: inherit; color: #111; background: #fff; -moz-appearance: textfield; }
.dash-rev-input::-webkit-inner-spin-button, .dash-rev-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* Customer found badge flex layout */
.co-found-badge { padding: 7px 12px; font-size: 0.82rem; font-weight: 500; background: #f0f7f0; border: 1px solid #b8e0b8; color: #1a6b1a; margin-top: 8px; }

/* ══════════════════════════════════════════════════════
   SORTABLE TABLE HEADERS
   ══════════════════════════════════════════════════════ */
.orders-th-sort, .customers-th-sort {
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background 0.12s;
}
.orders-th-sort:hover, .customers-th-sort:hover { background: rgba(255,255,255,0.15); }
.orders-th-sort.sort-active, .customers-th-sort.sort-active { background: rgba(255,255,255,0.2); }
.sort-arrow { font-size: 0.72rem; opacity: 0.7; display: inline-block; margin-left: 2px; }

/* ══════════════════════════════════════════════════════
   SETTINGS NAV ICON
   ══════════════════════════════════════════════════════ */
.nav-settings-icon { font-size: 1.05rem !important; padding: 0 8px !important; opacity: 0.75; }
.nav-settings-icon:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════
   CALL LOG / NOTES
   ══════════════════════════════════════════════════════ */
.call-log-entry { border: 1px solid #eee; padding: 10px 12px; margin-bottom: 8px; background: #fafafa; }
.call-log-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 0.72rem; flex-wrap: wrap; }
.call-log-ts { color: #888; font-weight: 500; }
.call-log-edited { color: #bbb; font-style: italic; }
.call-log-actions { margin-left: auto; display: flex; gap: 6px; }
.cla-btn { background: none; border: 1px solid #ddd; padding: 2px 8px; font-size: 0.7rem; cursor: pointer; color: #555; transition: background 0.12s; }
.cla-btn:hover { background: #f0f0f0; }
.cla-del { color: #c00; border-color: #fcc; }
.cla-del:hover { background: #fff0f0; }
.call-log-text { font-size: 0.875rem; color: #222; line-height: 1.6; }

/* ══════════════════════════════════════════════════════
   ORDER DETAIL — ADMIN COST COLUMN
   ══════════════════════════════════════════════════════ */
.od-cost-col { background: #fffbe6; color: #7a5800; font-weight: 600; }
.od-cost-badge { font-size: 0.62rem; background: #fffbe6; color: #7a5800; padding: 2px 8px; border: 1px solid #e8d070; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════
   DASHBOARD — EXPORT BAR
   ══════════════════════════════════════════════════════ */
.admin-export-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background: #fff; border: var(--border-subtle); padding: 14px 18px; margin-bottom: 24px; }
.admin-export-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #666; white-space: nowrap; }
.admin-export-fields { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.admin-export-field-lbl { display: block; font-size: 0.65rem; color: #aaa; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.admin-export-date { padding: 6px 10px; border: 1px solid #ddd; font-size: 0.82rem; background: #fff; }

/* ══════════════════════════════════════════════════════
   CUSTOMERS — ADMIN ACCOUNT MODAL
   ══════════════════════════════════════════════════════ */
.aam-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9000; display: flex; align-items: center; justify-content: center; }
.aam-dialog { background: #fff; width: 480px; max-width: 94vw; box-shadow: 0 8px 40px rgba(0,0,0,0.18); }
.aam-hd { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; }
.aam-hd h3 { margin: 0; font-size: 1rem; }
.aam-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #888; line-height: 1; padding: 0 4px; }
.aam-close:hover { color: #111; }
.aam-body { padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.aam-footer { padding: 14px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 10px; }

/* ══════════════════════════════════════════════════════
   PRINT STYLES — hide admin chrome, show order only
   ══════════════════════════════════════════════════════ */
@media print {
  .admin-topbar, .admin-page-hd, .admin-card .admin-card-hd button,
  .quick-actions-card, .od-cost-col, .od-cost-badge,
  #od-save-msg, .btn { display: none !important; }
  .admin-order-grid { display: block !important; }
  .admin-card { box-shadow: none !important; border: 1px solid #ccc !important; margin-bottom: 12px !important; }
}

/* ══════════════════════════════════════════════════════
   DIMENSION GRID — product size range display
   ══════════════════════════════════════════════════════ */
.dim-grid-section { margin: 0 0 18px; }
.dim-grid-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #aaa; margin: 0 0 8px; }
.dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dim-grid-cell { background: #f8f7f5; border: 1px solid #e8e5e0; border-radius: 4px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.dim-grid-lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #999; }
.dim-grid-val { font-size: 1.05rem; font-weight: 500; color: #111; font-family: 'Times New Roman', serif; }

/* Size Range (Product Details tab) — labels plain, only value boxes styled */
.dim-range-wrap { display: flex; flex-direction: column; gap: 6px; }
.dim-range-col-hdrs,
.dim-range-row   { display: flex; align-items: center; gap: 10px; }
.dim-range-spacer { width: 64px; flex-shrink: 0; }
.dim-range-col-lbl {
  width: 72px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #999;
}
.dim-range-row-lbl {
  width: 64px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}
.dim-range-val {
  width: 72px;
  text-align: center;
  padding: 6px 10px;
  background: #f8f7f5;
  border: 1px solid #e8e5e0;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #111;
}

/* ══════════════════════════════════════════════════════
   DOWNLOAD CATEGORY GROUPS — frontend multi-file display
   ══════════════════════════════════════════════════════ */
.dl-cat-group { margin-bottom: 14px; }
.dl-cat-group-lbl { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #bbb; margin: 0 0 5px; }

/* ══════════════════════════════════════════════════════
   PHOTO TITLE — caption below product photos
   ══════════════════════════════════════════════════════ */
.prod-photo-title { font-size: 0.78rem; color: #555; text-align: center; padding: 6px 8px 4px; line-height: 1.4; }

/* ══════════════════════════════════════════════════════
   COLLAPSIBLE DOWNLOAD CATEGORIES
   ══════════════════════════════════════════════════════ */
.dl-collapsible { border: 1px solid #e8e5e0; border-radius: 4px; margin-bottom: 7px; overflow: hidden; }
.dl-collapsible-hd { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #faf9f7; border: none; cursor: pointer; font-size: 0.84rem; font-weight: 500; color: #111; text-align: left; transition: background 0.15s; }
.dl-collapsible-hd:hover { background: #f0ede8; }
.dl-collapsible-lbl { flex: 1; }
.dl-collapsible-count { font-size: 0.7rem; color: #aaa; }
.dl-collapsible-icon { font-size: 1rem; font-weight: 400; color: #888; min-width: 16px; text-align: center; }
.dl-collapsible-body { border-top: 1px solid #e8e5e0; padding: 6px 0; }
.dl-sub-item { padding: 8px 14px !important; border-bottom: 1px solid #f0ede8; font-size: 0.82rem; }
.dl-sub-item:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════
   SPEC VISIBILITY CHECKBOX — admin products editor
   ══════════════════════════════════════════════════════ */
.spec-vis-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: #555;
  white-space: nowrap;
  cursor: pointer;
  padding: 0 4px;
  user-select: none;
}
.spec-vis-label input[type="checkbox"] {
  cursor: pointer;
  width: 13px;
  height: 13px;
  accent-color: #111;
}
.spec-vis-label span {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════
   PS-CENTER + OPTIONS STRIP — visible specs in product header
   ══════════════════════════════════════════════════════ */
.ps-center {
  flex: 1;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}
.ps-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.ps-options-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #999;
  margin-right: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ps-option-tag {
  font-size: 0.75rem;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 10px;
  white-space: nowrap;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.ps-option-tag strong {
  color: #111;
  font-weight: 600;
}

@media (max-width: 640px) {
  .ps-center { display: none; }
}

/* ══════════════════════════════════════════════════════
   DETAILS REFERENCE IMAGE — product details tab
   ══════════════════════════════════════════════════════ */
.details-ref-img-wrap {
  margin-top: 16px;
  margin-bottom: 18px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e8e5e0;
  background: #fafaf8;
}
.details-ref-img {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  padding: 12px;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════
   VIDEOS TAB — dedicated player + selection list
   ══════════════════════════════════════════════════════ */
.videos-tab-wrap {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Large player area — 16:9 aspect ratio */
.vid-player-area {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #222;
}
.vid-player-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #555;
  user-select: none;
}
.vid-play-icon {
  font-size: 2.5rem;
  color: #333;
  line-height: 1;
}
.vid-player-placeholder p {
  font-size: 0.82rem;
  color: #555;
  margin: 0;
  letter-spacing: 0.03em;
}

/* Video selection list */
.vid-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vid-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid #e8e5e0;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.vid-list-item:hover {
  background: #faf9f7;
  border-color: #c8c4be;
}
.vid-list-item.active {
  background: #f5f3ef;
  border-color: #111;
}
.vid-list-num {
  font-size: 0.68rem;
  color: #bbb;
  font-weight: 600;
  min-width: 16px;
  text-align: right;
}
.vid-list-icon {
  font-size: 1rem;
  flex-shrink: 0;
}
.vid-list-title {
  flex: 1;
  font-size: 0.85rem;
  color: #222;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vid-list-arrow {
  font-size: 0.72rem;
  color: #888;
  flex-shrink: 0;
}
.vid-list-item.active .vid-list-arrow {
  color: #111;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════
   ORDER PAGE TOOLBAR — search, category filter, sort
   ══════════════════════════════════════════════════════ */
.order-toolbar-wrap {
  background: #fafaf8;
  border-bottom: 1px solid #e8e5e0;
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 40;
}
.order-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Search box */
.order-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
}
.order-search-icon {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  color: #aaa;
  pointer-events: none;
  flex-shrink: 0;
}
.order-search-input {
  width: 100%;
  padding: 8px 32px 8px 32px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.85rem;
  background: #fff;
  color: #111;
  outline: none;
  transition: border-color 0.15s;
}
.order-search-input:focus { border-color: #111; }
.order-search-input::placeholder { color: #bbb; }
.order-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  font-size: 1rem;
  color: #aaa;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.order-search-clear:hover { color: #111; }

/* Category select */
.order-cat-select {
  padding: 8px 28px 8px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.82rem;
  background: #fff;
  color: #111;
  cursor: pointer;
  outline: none;
  appearance: auto;
  min-width: 150px;
}
.order-cat-select:focus { border-color: #111; }

/* Sort buttons */
.order-sort-group {
  display: flex;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.order-sort-btn {
  padding: 8px 14px;
  background: #fff;
  border: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #888;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.order-sort-btn + .order-sort-btn {
  border-left: 1px solid #ddd;
}
.order-sort-btn:hover { background: #f5f3ef; color: #111; }
.order-sort-btn.active { background: #111; color: #fff; }

/* Expand / Collapse all buttons */
.order-expand-group {
  display: flex;
  gap: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
.order-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #fff;
  border: none;
  color: #666;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.order-expand-btn + .order-expand-btn {
  border-left: 1px solid #ddd;
}
.order-expand-btn:hover {
  background: #f5f3ef;
  color: #111;
}
/* Tooltip via ::after so it doesn't shift layout */
.order-expand-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  font-size: 0.7rem;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 200;
}

@media (max-width: 560px) {
  .order-toolbar { gap: 8px; }
  .order-search-wrap { min-width: 100%; }
  .order-cat-select { flex: 1; min-width: 120px; }
}

/* ── Cart spec pills (visible specs carried from product to cart) ── */
.cart-spec-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.cart-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f5f3ef;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 0.75rem;
  color: #333;
  line-height: 1.4;
}
.cart-spec-pill-lbl {
  font-weight: 600;
  color: #111;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD V2 — FULL ANALYTICS STYLES
══════════════════════════════════════════════════════════════ */

/* Period hint label */
.dash-period-hint {
  font-size: 0.78rem;
  color: #999;
  margin-left: 10px;
  font-style: italic;
}

/* ── KPI Row ──────────────────────────────────────────────── */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.dash-kpi-card {
  background: #fff;
  border: 1px solid #e8e5e0;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 2px;
}
.dash-kpi-icon { font-size: 1.4rem; line-height: 1; padding-top: 2px; flex-shrink: 0; }
.dash-kpi-body { min-width: 0; }
.dash-kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-bottom: 4px; }
.dash-kpi-val { font-family: 'Times New Roman', serif; font-size: 1.45rem; font-weight: 700; color: #111; line-height: 1.1; }
.dash-delta { display: block; font-size: 0.68rem; margin-top: 4px; font-weight: 600; }
.dash-delta-up { color: #2c9; }
.dash-delta-dn { color: #e55; }

/* ── Section headers ─────────────────────────────────────── */
.dash-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #111;
  padding-bottom: 8px;
  margin: 28px 0 14px;
  gap: 12px;
}
.dash-section-hd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-section-icon { font-size: 1.1rem; }
.dash-section-hd h2 {
  font-family: 'Times New Roman', serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #111;
}
.dash-section-sub { font-size: 0.75rem; color: #888; }
.dash-section-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.dash-mini-select {
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 2px;
  font-size: 0.75rem;
  background: #fff;
  color: #333;
  cursor: pointer;
  outline: none;
}
.dash-mini-select:focus { border-color: #111; }

/* ── Panel grid ──────────────────────────────────────────── */
.dash-panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  gap: 14px;
  margin-bottom: 4px;
  align-items: start;
}
.dash-panel {
  background: #fff;
  border: 1px solid #e8e5e0;
  padding: 18px 20px;
  border-radius: 2px;
}
.dash-panel-sm  { /* default 1-col */ }
.dash-panel-md  { /* default 1-col */ }
.dash-panel-lg  { grid-column: span 1; } /* In 4-col grid: spans last col naturally */

.dash-panel-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.dash-panel-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #555;
  font-weight: 600;
}
.dash-panel-hint { font-size: 0.65rem; color: #bbb; font-style: italic; }

/* ── Revenue vs Target ───────────────────────────────────── */
.dash-rev-vs-target { }
.dash-rvt-numbers {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dash-rvt-lbl { display: block; font-size: 0.65rem; text-transform: uppercase; color: #aaa; letter-spacing: 0.05em; }
.dash-rvt-num { display: block; font-size: 1.05rem; font-weight: 700; color: #111; }

/* Progress bar */
.dash-progress-track {
  height: 10px;
  background: #f0ede9;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.dash-progress-fill {
  height: 100%;
  background: #111;
  border-radius: 5px;
  transition: width 0.5s ease;
}
.dash-pf-green { background: #2c9; }
.dash-pf-blue  { background: #2962ff; }
.dash-progress-pct {
  position: absolute;
  right: 6px;
  top: -1px;
  font-size: 0.62rem;
  color: #888;
  line-height: 12px;
}

/* MRR */
.dash-mrr-area { margin-top: 6px; }
.dash-mrr-val { font-family: 'Times New Roman', serif; font-size: 1.8rem; font-weight: 700; color: #111; }
.dash-mrr-sub { font-size: 0.72rem; color: #999; margin-top: 2px; }

/* ── Pipeline ────────────────────────────────────────────── */
.dash-pipeline { display: flex; flex-direction: column; gap: 8px; }
.dash-pipeline-row { display: flex; align-items: center; gap: 8px; }
.dash-pipeline-lbl { font-size: 0.72rem; color: #555; width: 80px; flex-shrink: 0; }
.dash-pipeline-bar-wrap { flex: 1; height: 14px; background: #f0ede9; border-radius: 3px; overflow: hidden; }
.dash-pipeline-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; min-width: 2px; }
.dash-pipeline-stats { display: flex; flex-direction: column; align-items: flex-end; min-width: 80px; }
.dash-pipeline-cnt { font-size: 0.75rem; font-weight: 700; color: #111; }
.dash-pipeline-rev { font-size: 0.65rem; color: #888; }

/* ── Win-rate gauge ──────────────────────────────────────── */
.dash-winrate-row { display: flex; align-items: center; gap: 14px; }
.dash-gauge-svg { display: block; }
.dash-winrate-gauge { position: relative; display: inline-block; }
.dash-gauge-center { display: flex; justify-content: center; position: relative; }
.dash-gauge-label {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  font-weight: 700;
  color: #111;
}
.dash-winrate-legend { display: flex; flex-direction: column; gap: 5px; font-size: 0.72rem; color: #555; }
.dash-winrate-legend div { display: flex; align-items: center; gap: 6px; }
.dash-wl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ── Bar chart ───────────────────────────────────────────── */
.dash-bar-chart { width: 100%; overflow: hidden; }
.dbc-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
  padding-bottom: 24px;
}
.dbc-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}
.dbc-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.dbc-bar {
  width: 100%;
  background: #111;
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  position: relative;
  transition: height 0.5s ease;
}
.dbc-bar:hover { background: #333; }
.dbc-bar-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 0.6rem;
  padding: 2px 5px;
  border-radius: 2px;
  white-space: nowrap;
  z-index: 10;
}
.dbc-bar:hover .dbc-bar-tip { display: block; }
.dbc-lbl {
  font-size: 0.58rem;
  color: #999;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Financial panels ────────────────────────────────────── */
.dash-fin-big {
  font-family: 'Times New Roman', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}
.dash-fin-cash { color: #2c9; }
.dash-fin-sub { font-size: 0.72rem; color: #888; }
.dash-fin-inputs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dash-fin-inp-lbl { font-size: 0.68rem; color: #666; display: flex; flex-direction: column; gap: 3px; }
.dash-target-input-wrap { display: flex; align-items: center; gap: 6px; }
.dash-target-lbl { font-size: 0.68rem; color: #888; }
.dash-target-input {
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 5px 8px;
  font-size: 0.78rem;
  color: #111;
  background: #faf9f7;
  outline: none;
  width: 100%;
}
.dash-target-input:focus { border-color: #111; background: #fff; }

/* ── Customer metrics ────────────────────────────────────── */
.dash-csat-wrap { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dash-csat-stars { display: flex; gap: 4px; }
.dash-star {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #ddd;
  transition: color 0.15s;
  padding: 0;
  line-height: 1;
}
.dash-star.active,
.dash-star:hover { color: #f5a623; }
.dash-csat-score { font-size: 0.75rem; color: #555; }

/* ── Mini tables ─────────────────────────────────────────── */
.dash-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.dash-mini-table th {
  text-align: left;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding: 6px 8px 6px 0;
}
.dash-mini-table td {
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid #f5f3ef;
  color: #333;
  vertical-align: top;
}
.dash-mini-table tr:last-child td { border-bottom: none; }
.dash-empty-row { color: #bbb; font-style: italic; text-align: center; padding: 16px 0 !important; }
.dash-tbl-sub { font-size: 0.65rem; color: #aaa; }

/* % bar inside table */
.dash-pct-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: #666;
}
.dash-pct-bar-fill {
  height: 6px;
  background: #111;
  border-radius: 3px;
  flex-shrink: 0;
  transition: width 0.4s ease;
}

/* ── Operational gauge ───────────────────────────────────── */
.dash-gauge-center { display: flex; flex-direction: column; align-items: center; position: relative; }

/* Inventory list */
.dash-inventory-list { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.dash-inv-row { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: #444; }
.dash-inv-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-inv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Campaign table ──────────────────────────────────────── */
.dash-campaign-add {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.dash-campaign-add .dash-target-input { width: auto; flex: 1; min-width: 80px; }
.dash-del-btn {
  background: none;
  border: none;
  color: #e55;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 2px 4px;
  line-height: 1;
}
.dash-del-btn:hover { color: #a00; }

/* ── Quick links ─────────────────────────────────────────── */
.dash-quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.dash-quick-card {
  display: block;
  border: 1px solid #ddd;
  padding: 20px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  border-radius: 2px;
}
.dash-quick-card:hover { border-color: #111; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.dash-quick-icon { font-size: 1.5rem; margin-bottom: 8px; }
.dash-quick-title { font-family: 'Times New Roman', serif; font-size: 1rem; margin-bottom: 4px; color: #111; }
.dash-quick-sub { font-size: 0.78rem; color: #888; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1200px) {
  .dash-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .dash-panels-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .dash-panels-row { grid-template-columns: 1fr; }
  .dash-quick-links { grid-template-columns: repeat(2, 1fr); }
  .dash-section-hd { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .dash-kpi-row { grid-template-columns: 1fr 1fr; }
  .dash-quick-links { grid-template-columns: 1fr 1fr; }
}

/* Admin header — View Shop link */
.admin-shop-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #5a3a1a;
  background: #e8c9b0;
  border: 1px solid #d4a882;
  border-radius: 3px;
  padding: 5px 12px;
  text-decoration: none;
  margin-right: 10px;
  transition: background 0.15s;
  white-space: nowrap;
}
.admin-shop-link:hover { background: #d9b49a; color: #5a3a1a; }

/* ══════════════════════════════════════════════════════════════
   TAX SYSTEM STYLES
══════════════════════════════════════════════════════════════ */

/* Cart ZIP entry */
.cart-zip-wrap {
  margin: 12px 0 6px;
  padding: 12px 14px;
  background: #faf9f7;
  border: 1px solid #e8e5e0;
  border-radius: 3px;
}
.cart-zip-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cart-zip-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cart-zip-input {
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 7px 10px;
  font-size: 0.85rem;
  width: 120px;
  outline: none;
  background: #fff;
}
.cart-zip-input:focus { border-color: #111; }
.cart-zip-manual-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cart-zip-manual-inp {
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 7px 8px;
  font-size: 0.82rem;
  width: 70px;
  outline: none;
  background: #fff;
}
.cart-zip-result {
  font-size: 0.72rem;
  color: #2a7a2a;
  margin-top: 5px;
  min-height: 14px;
  font-weight: 500;
}
.cart-zip-manual-btn {
  background: none;
  border: none;
  font-size: 0.68rem;
  color: #aaa;
  cursor: pointer;
  padding: 4px 0 0;
  text-decoration: underline;
  display: block;
  margin-top: 4px;
}
.cart-zip-manual-btn:hover { color: #555; }

/* Tax line in order summary */
.summary-tax-line {
  border-top: 1px dashed #eee;
  padding-top: 8px;
  margin-top: 4px;
  font-size: 0.82rem;
  color: #555;
}

/* Settings — tax rate grid */
.tax-rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 14px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}
.tax-rate-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid #f5f3ef;
}
.tax-rate-state-code {
  font-size: 0.72rem;
  font-weight: 700;
  color: #111;
  width: 28px;
  flex-shrink: 0;
}
.tax-rate-state-name {
  font-size: 0.72rem;
  color: #555;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tax-rate-inp-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.tax-rate-inp {
  width: 58px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 4px 6px;
  font-size: 0.75rem;
  text-align: right;
  outline: none;
  background: #faf9f7;
}
.tax-rate-inp:focus { border-color: #111; background: #fff; }
.tax-rate-pct { font-size: 0.72rem; color: #888; }

/* State dropdown — matches form-input width naturally */
select.state-select {
  appearance: auto;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   COPY LINES DROPDOWN
══════════════════════════════════════════════════════════════ */
.copy-lines-btn {
  border-style: dashed !important;
  color: #666 !important;
}
.copy-lines-btn:hover {
  border-color: #111 !important;
  color: #111 !important;
}
.copy-lines-dropdown {
  position: absolute;
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  min-width: 240px;
  overflow: hidden;
}
.cld-header {
  padding: 10px 14px 8px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #888;
  font-weight: 600;
  border-bottom: 1px solid #f0ede9;
}
.cld-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid #f5f3ef;
  cursor: pointer;
  text-align: left;
  gap: 12px;
  transition: background 0.1s;
}
.cld-option:hover { background: #faf9f7; }
.cld-name {
  font-size: 0.82rem;
  color: #111;
  font-weight: 500;
}
.cld-count {
  font-size: 0.72rem;
  color: #888;
  background: #f0ede9;
  border-radius: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.cld-cancel {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  font-size: 0.75rem;
  color: #aaa;
  cursor: pointer;
  text-align: center;
  transition: color 0.12s;
}
.cld-cancel:hover { color: #555; }
.copy-lines-empty-msg {
  font-size: 0.75rem;
  color: #e55;
  margin-left: 10px;
  font-style: italic;
  display: inline-block;
  animation: fadeOut 3s forwards;
}
@keyframes fadeOut {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Bulk Import: Checkbox column ──────────────────────────── */
.li-check-th,
.li-check-cell {
  width: 32px;
  min-width: 32px;
  padding: 0 4px !important;
  text-align: center;
  vertical-align: middle;
}
.li-check-th { background: transparent; }
.li-checkbox,
.li-select-all {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: #8b6f47;
  margin: 0;
}

/* Import Sizes button */
.import-sizes-btn {
  margin-left: 6px;
}

/* ── Bulk Import: Modal overlay ────────────────────────────── */
.import-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: imoFadeIn 0.15s ease;
}
@keyframes imoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.import-modal {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  animation: imoSlideUp 0.18s ease;
  overflow: hidden;
}
@keyframes imoSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.import-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #ececec;
  flex-shrink: 0;
}
.import-modal-hd h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #222;
}
.import-modal-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.import-modal-close:hover { background: #f0f0f0; color: #333; }

.import-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}

.import-modal-ft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #ececec;
  flex-shrink: 0;
  background: #fafafa;
}

/* Steps */
.import-step {
  margin-bottom: 22px;
}
.import-step:last-child { margin-bottom: 0; }

.import-step-hd {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b6f47;
  margin-bottom: 8px;
}

/* Upload drop zone */
.import-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px;
  border: 2px dashed #d0bfa8;
  border-radius: 8px;
  cursor: pointer;
  background: #fdf9f5;
  transition: background 0.12s, border-color 0.12s;
  text-align: center;
}
.import-upload-label:hover {
  background: #f8f0e8;
  border-color: #b8955a;
}
.import-upload-icon {
  font-size: 2rem;
  line-height: 1;
}
.import-upload-text {
  font-size: 0.9rem;
  color: #555;
  font-weight: 600;
}
.import-upload-sub {
  font-size: 0.75rem;
  color: #999;
}
.import-file-input { display: none; }

/* Template download link */
.import-template-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: #8b6f47;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-top: 4px;
}
.import-template-link:hover { color: #5a3e22; }

/* Preview table */
.import-preview-wrap {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
  margin-top: 6px;
}
.import-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.import-preview-table th {
  background: #f5f0ea;
  color: #6b4f2e;
  font-weight: 700;
  padding: 7px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #e0d5c8;
}
.import-preview-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #333;
  white-space: nowrap;
}
.import-preview-table tr:last-child td { border-bottom: none; }
.import-preview-table tr:hover td { background: #fdf8f3; }

.import-preview-count {
  font-size: 0.77rem;
  color: #888;
  margin-top: 6px;
}

/* Error message */
.import-error {
  background: #fff3f3;
  border: 1px solid #f5b8b8;
  border-radius: 6px;
  color: #c0392b;
  font-size: 0.82rem;
  padding: 10px 14px;
  margin-top: 8px;
  display: none;
}
.import-error.visible { display: block; }

/* Info note */
.import-info-note {
  font-size: 0.77rem;
  color: #888;
  margin-top: 10px;
  line-height: 1.5;
}

/* ── Bulk Import: modal header titles ──────────────────────── */
.import-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: #222;
  line-height: 1.2;
}
.import-modal-sub {
  font-size: 0.78rem;
  color: #888;
  margin-top: 2px;
}

/* ── Bulk Import: modal footer ─────────────────────────────── */
.import-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #ececec;
  flex-shrink: 0;
  background: #fafafa;
}

/* ── Bulk Import: numbered step rows ───────────────────────── */
.import-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #f0ece8;
}
.import-step:last-of-type { border-bottom: none; }

.import-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #8b6f47;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.import-step-content { flex: 1; min-width: 0; }

.import-step-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 4px;
}
.import-step-desc {
  font-size: 0.78rem;
  color: #777;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ── Bulk Import: upload area ──────────────────────────────── */
.import-upload-label input[type="file"] { display: none; }

.import-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #8b6f47;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.import-upload-label:hover .import-upload-btn { background: #6d5338; }

.import-file-name {
  font-size: 0.75rem;
  color: #999;
  margin-top: 4px;
}

/* ── Bulk Import: template row selector ────────────────────── */
.import-template-sel {
  font-size: 0.82rem;
  padding: 6px 10px;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #fff;
  color: #333;
  max-width: 100%;
}
.import-template-sel:focus {
  outline: none;
  border-color: #8b6f47;
  box-shadow: 0 0 0 2px rgba(139,111,71,0.15);
}

/* ── Bulk Import: preview section ──────────────────────────── */
.import-preview-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #333;
}
.import-preview-count {
  font-size: 0.75rem;
  color: #888;
  font-weight: 400;
}
.import-preview-scroll {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid #e8e8e8;
}
.import-preview-more td {
  text-align: center;
  color: #aaa;
  font-style: italic;
  font-size: 0.75rem;
  padding: 6px;
}

/* ── Bulk Import: mode (append/replace) ─────────────────────── */
.import-mode-wrap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 14px;
  background: #fdf9f5;
  border: 1px solid #e8ddd0;
  border-radius: 6px;
}
.import-mode-opt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #444;
  cursor: pointer;
}
.import-mode-opt input[type="radio"] {
  accent-color: #8b6f47;
  cursor: pointer;
}

/* ── Cart Edit Modal ──────────────────────────────────────── */
.cart-edit-btn {
  font-size: 0.7rem;
  font-weight: 600;
  color: #555;
  background: #f4f4f2;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.3;
}
.cart-edit-btn:hover {
  background: #e8e8e5;
  border-color: #bbb;
  color: #222;
}

.cart-edit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: imoFadeIn 0.15s ease;
}
.cart-edit-modal {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  animation: imoSlideUp 0.18s ease;
  overflow: hidden;
}
.cart-edit-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #ececec;
  flex-shrink: 0;
}
.cart-edit-title {
  font-size: 1rem;
  font-weight: 700;
  color: #222;
}
.cart-edit-sub {
  font-size: 0.78rem;
  color: #999;
  margin-top: 2px;
}
.cart-edit-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #999;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s;
}
.cart-edit-close:hover { background: #f0f0f0; color: #333; }

.cart-edit-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cart-edit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cart-edit-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
}
.cart-edit-input,
.cart-edit-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #222;
  background: #fff;
  box-sizing: border-box;
}
.cart-edit-input:focus,
.cart-edit-select:focus {
  outline: none;
  border-color: #8b6f47;
  box-shadow: 0 0 0 2px rgba(139,111,71,0.12);
}
.cart-edit-dim-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cart-edit-dim-input {
  width: 80px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: center;
}
.cart-edit-dim-input:focus {
  outline: none;
  border-color: #8b6f47;
  box-shadow: 0 0 0 2px rgba(139,111,71,0.12);
}
.cart-edit-dim-frac {
  padding: 8px 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.82rem;
  background: #fff;
}
.cart-edit-dim-frac:focus { outline: none; border-color: #8b6f47; }
.cart-edit-dim-sep {
  font-size: 0.9rem;
  color: #888;
}

.cart-edit-ft {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #ececec;
  background: #fafafa;
  flex-shrink: 0;
}