:root{
  --bg:#f7f1e6;
  --card:#ffffff;
  --ink:#3b2b1d;
  --muted:#7a6856;
  --line:#d8c8b3;
  --accent:#d48a36;
  --accent-dark:#a85e15;
  --soft:#efe2d1;
  --danger:#a23c2a;
  --ok:#2f6b3f;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fbf7f0 0%,#f3eadc 100%)}
a{text-decoration:none;color:inherit}
header{padding:20px 24px;border-bottom:1px solid var(--line);background:#fffaf3;position:sticky;top:0;z-index:20}
.topbar{max-width:1300px;margin:0 auto;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.brand h1{margin:0;font-size:24px;letter-spacing:.3px}.brand p{margin:4px 0 0;color:var(--muted);font-size:14px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{min-width:280px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
button,.btn{border:none;border-radius:12px;padding:11px 14px;font-weight:700;cursor:pointer;transition:.15s ease}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark)}
.btn-soft{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:#fff2ef;color:var(--danger);border:1px solid #efc7be}
main{max-width:1300px;margin:0 auto;padding:24px}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}.status{color:var(--muted);font-size:14px}.small{font-size:12px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(60,40,20,.06);display:flex;flex-direction:column}
.thumb{aspect-ratio:3/4;background:#f2ebe1;display:grid;place-items:center;position:relative;overflow:hidden;cursor:pointer}.thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#f2ebe1}.thumb .placeholder{color:#8b7a67;font-weight:700;font-size:14px;text-align:center;padding:24px}.badge{position:absolute;top:10px;left:10px;background:rgba(59,43,29,.86);color:#fff;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700}.card-body{padding:14px;display:flex;flex-direction:column;flex:1}.sku-name{font-size:18px;margin:0 0 6px}.meta{color:var(--muted);font-size:13px;margin-bottom:10px}.meta-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:4px 0;color:var(--muted)}.card-actions{display:flex;gap:8px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
dialog{width:min(1080px,calc(100vw - 24px));border:none;border-radius:18px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(35,25,15,.45)}.modal{background:#fffaf6}.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:center}.modal-title{margin:0;font-size:22px}.modal-sub{margin:4px 0 0;color:var(--muted);font-size:14px}.modal-body{padding:20px}.detail-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}.gallery{display:grid;gap:12px}.gallery-main{aspect-ratio:1.15/1;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#f3eadf}.gallery-main img{width:100%;height:100%;object-fit:contain;display:block;background:#f3eadf}.gallery-main .placeholder{width:100%;height:100%;display:grid;place-items:center;color:#8b7a67;font-weight:700}.thumb-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.thumb-slot{border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:1/1;cursor:pointer;background:#f3eadf;position:relative}.thumb-slot img{width:100%;height:100%;object-fit:cover}.thumb-slot.empty{display:grid;place-items:center;color:#a08f7d;font-size:12px;font-weight:700}.thumb-strip.single{grid-template-columns:1fr}.thumb-strip.single .thumb-slot{aspect-ratio:3/1.2}
.panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}.panel h3{margin:0 0 10px;font-size:18px}.pill{display:inline-block;padding:7px 10px;border-radius:999px;background:#f5eadc;border:1px solid var(--line);font-size:12px;font-weight:700;margin:0 8px 8px 0}.piece-table{width:100%;border-collapse:collapse;font-size:14px}.piece-table th,.piece-table td{border-bottom:1px solid #eee2d4;padding:10px 8px;text-align:left;vertical-align:top}.piece-table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}.stack{display:grid;gap:16px}.hint{color:var(--muted);font-size:13px;line-height:1.4}.raise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.tier{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px;text-align:left;cursor:pointer}.tier.active{border-color:var(--accent);background:#fff3e6;box-shadow:0 0 0 2px rgba(212,138,54,.15) inset}.tier strong{display:block;margin-bottom:4px}.tier span{font-size:13px;color:var(--muted)}
.admin-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}.uploads{display:grid;gap:10px;margin-top:12px}.upload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.upload-slot{position:relative;border:2px dashed #d6c4af;border-radius:14px;background:#fff;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;padding:8px;text-align:center;color:#8b7a67;font-size:12px;font-weight:700}.upload-slot.single-fill{grid-column:1/-1;aspect-ratio:3/1.15}.upload-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.upload-slot input{position:absolute;inset:0;opacity:0;cursor:pointer}.delete-btn{position:absolute;right:8px;top:8px;z-index:1;background:rgba(255,255,255,.95);color:var(--danger);border:1px solid #efc7be;padding:6px 8px;border-radius:10px;font-size:12px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}.field{display:grid;gap:6px}.field label{font-size:13px;color:var(--muted);font-weight:700}.field input,.field textarea,.field select{width:100%;padding:10px 11px;border-radius:12px;border:1px solid var(--line);font:inherit;color:var(--ink);background:#fff}.piece-editor{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fffdfa}.piece-editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.note{background:#fff6eb;border:1px solid #f0d5b4;color:#7c5324;border-radius:14px;padding:12px;font-size:13px;line-height:1.45}.success{color:var(--ok);font-weight:700;margin-top:8px;font-size:14px}
.builder-layout{display:grid;grid-template-columns:1fr 370px;gap:20px}.builder-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 6px 20px rgba(60,40,20,.06)}.builder-header{display:flex;justify-content:space-between;align-items:start;gap:12px;flex-wrap:wrap}.builder-items{margin-top:16px}.builder-row{display:grid;grid-template-columns:1.3fr 1fr 100px 110px 110px;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #eee2d4}.builder-row.head{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--muted)}.qty{width:100%;padding:10px;border:1px solid var(--line);border-radius:12px}.summary-box{display:grid;gap:12px}.sum-line{display:flex;justify-content:space-between;gap:12px}.cta-stack{display:grid;gap:10px;margin-top:16px}.nav-links{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:980px){.detail-layout,.builder-layout{grid-template-columns:1fr}.raise-grid{grid-template-columns:repeat(2,1fr)}.upload-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.builder-row{grid-template-columns:1.3fr 1fr 90px 100px 100px}}
@media (max-width:640px){main{padding:16px}.thumb-strip{grid-template-columns:repeat(2,1fr)}.raise-grid{grid-template-columns:1fr}.upload-grid{grid-template-columns:1fr}.builder-row,.builder-row.head{grid-template-columns:1fr;gap:6px}.builder-row.head{display:none}}


.nav{position:sticky;top:0}
.sku-tab{position:absolute;top:10px;right:10px;z-index:2;background:rgba(212,138,54,.95);color:#fff;border:1px solid rgba(255,255,255,.4);padding:7px 10px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer}
.sku-tab:hover{background:var(--accent-dark)}
.sku-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.mini-tab{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:#f7efe5;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink)}
.mini-tab-ready{background:#edf7ef;border-color:#b9dcc2;color:#225b32}
.quick-modal{max-width:640px}
.notice{display:none;margin-top:12px;padding:10px 12px;border-radius:12px;background:#edf7ef;border:1px solid #b9dcc2;color:#225b32;font-size:13px;font-weight:700}
.notice.show{display:block}


/* Build 18 combined additions */
.status-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.status-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#f5eadc;border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink)}
.status-pill.ready{background:#edf7ef;border-color:#b8d9c0;color:#21522e}
.status-pill.near{background:#fff6e6;border-color:#eed09b;color:#7b5418}
.status-pill.ondeck{background:#efe9ff;border-color:#c8b8f5;color:#4a2c8b}
.status-pill.low{background:#f6f0e8;border-color:#ddcfbf;color:#6c5a47}
.progress-shell{height:10px;background:#efe3d2;border-radius:999px;overflow:hidden;margin-top:6px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-dark));border-radius:999px}
.thumb-count{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.92);padding:6px 8px;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink)}
.sku-tab{position:absolute;right:10px;top:10px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;color:var(--ink)}
.sku-status-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-top:10px}
.admin-demand-wrap{margin-top:28px;background:#fffaf3;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 6px 20px rgba(60,40,20,.05)}
.admin-demand-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.admin-demand-head h2{margin:6px 0 4px;font-size:28px}
.admin-demand-head p{margin:0;color:var(--muted)}
.admin-demand-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.admin-stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.admin-stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.admin-stat-value{font-size:28px;font-weight:700;margin-top:4px}
.admin-demand-table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px}
.admin-demand-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-demand-table th,.admin-demand-table td{padding:12px 10px;border-bottom:1px solid #eee2d4;text-align:left;vertical-align:top}
.admin-demand-table th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;background:#fffcf8}
.admin-demand-table tr:last-child td{border-bottom:none}
.mini-progress{min-width:120px}
.mini-progress .small{display:block;margin-top:5px}
@media (max-width:700px){
  .admin-demand-head h2{font-size:22px}
  .admin-demand-wrap{padding:14px}
}


/* Build 19 structural style fixes */
nav{position:sticky;top:0;z-index:100;background:#17120f;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{max-width:1300px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.nav-brand{display:flex;flex-direction:column;gap:2px}
.nav-brand strong{white-space:nowrap;font-size:18px;line-height:1.1;color:#f4eee4}
.nav-brand span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#b89f82}
.nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav-links a{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:10px;background:#dcc8a6;color:#2b221c;border:1px solid rgba(0,0,0,.08);font-size:13px;font-weight:700}
.nav-links a.active{background:#b86a2d;color:#fff}
.nav-links a.cta{background:#cf9f2a;color:#18120e}
.wrap{max-width:1300px;margin:0 auto;padding:24px}
.hero{margin-bottom:20px}
.hero-top{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start;background:#fffaf3;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 6px 20px rgba(60,40,20,.05)}
.hero h1{margin:10px 0 10px;font-size:clamp(32px,5vw,56px);line-height:.98}
.hero p{margin:0;color:#5f4f40;line-height:1.7}
.notice{margin-top:12px;padding:12px 14px;border-radius:12px;background:#fff6eb;border:1px solid #f0d5b4;color:#7c5324;font-size:13px;display:none}
.notice.show{display:block}
.filter-list{display:flex;gap:10px;flex-wrap:wrap}
.filter-list button{background:#efe2d1;border:1px solid var(--line);color:var(--ink);padding:10px 14px;border-radius:999px;font-weight:700}
.filter-list button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.quick-modal{max-width:560px}
.hint{color:var(--muted);font-size:13px;line-height:1.45}
@media (max-width:900px){
  .hero-top{grid-template-columns:1fr}
}

/* Build 20 order builder safe-flow additions */
.profile-box{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.cta-stack{display:grid;gap:10px}
.builder-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.summary-box .builder-card{position:sticky;top:92px}
.builder-row{grid-template-columns:minmax(160px,1.4fr) minmax(100px,.8fr) 90px 120px 120px}
.qty{width:100%;padding:10px 11px;border-radius:12px;border:1px solid var(--line);font:inherit}

/* Build 21 order tier clarity */
.total-line{padding-top:8px;margin-top:8px;border-top:1px solid #eee2d4}
.tier-note-box{margin-top:14px;padding:14px;border-radius:16px;background:#fff8ee;border:1px solid #ecd0aa}
.tier-note-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;font-weight:700}
.builder-items .head{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.05em}
.builder-row{display:grid;grid-template-columns:minmax(150px,1.5fr) 100px 90px 100px 120px 120px;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eee2d4}
.builder-row.head{font-weight:700;padding-top:0}
.line-cube{font-weight:700}
.summary-box .builder-card .sum-line{display:flex;justify-content:space-between;gap:12px;margin:10px 0}
.summary-box .builder-card .sum-line span{color:var(--muted)}
@media (max-width: 980px){
  .builder-row{grid-template-columns:1.5fr 1fr 90px 1fr 1fr 1fr}
}
@media (max-width: 760px){
  .builder-row{grid-template-columns:1fr 1fr}
  .builder-row.head{display:none}
}

.nav-brand{display:flex;align-items:center;gap:12px}.nav-brand .brand-text{display:flex;flex-direction:column}.nav-logo{height:63px;width:auto;display:block;flex:0 0 auto}.doc-logo{height:68px;width:auto;display:block}.program-box{margin-top:16px}.invoice-shell{max-width:1100px;margin:0 auto;padding:28px 20px 42px}.invoice-card{background:#fff;border:1px solid #ddcfbf;border-radius:22px;box-shadow:0 18px 40px rgba(45,27,13,.08);padding:28px}.invoice-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}.invoice-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}.invoice-table{width:100%;border-collapse:collapse;margin-top:18px}.invoice-table th,.invoice-table td{border-bottom:1px solid #eee2d4;padding:10px 8px;text-align:left}.invoice-table th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#7a6856}.summary-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:24px}.summary-card{background:#fffaf5;border:1px solid #ddcfbf;border-radius:18px;padding:18px}.brand-inline{display:flex;align-items:center;gap:12px}.brand-inline .doc-logo{height:58px}.print-note{margin-top:18px;color:#6d5e50;font-size:13px;line-height:1.6}@media(max-width:900px){.summary-grid{grid-template-columns:1fr}.invoice-head{flex-direction:column}}

.sku-tab{position:absolute;top:10px;right:10px;width:42px;height:42px;border-radius:999px;border:1px solid #d6c2ae;background:rgba(255,250,245,.9);color:#8d7762;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}.sku-tab.raised{background:#8c5a2b;color:#fff;border-color:#8c5a2b}.admin-demand-wrap{display:none!important}

/* ============================================================
   PATCH: Hand raise button + demand progress bar
   ============================================================ */

/* Hand raise button — upper right of card thumb
   Opaque/ghost when not raised, solid amber when raised,
   shows tier initial (S/Q/H/F) when raised */
.sku-tab{
  position:absolute;top:10px;right:10px;
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(200,175,145,.5);
  background:rgba(255,250,245,.55);
  color:rgba(100,75,55,.45);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;
  cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,opacity .18s,transform .15s;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:3;
  user-select:none;
}
.sku-tab:hover{
  background:rgba(212,138,54,.18);
  color:rgba(140,90,43,.9);
  border-color:rgba(212,138,54,.5);
  transform:scale(1.08);
}
/* Raised state — solid, branded color, shows tier initial */
.sku-tab.raised{
  background:#8c5a2b;
  color:#fff;
  border-color:#8c5a2b;
  font-size:15px;
  letter-spacing:.02em;
  opacity:1;
  box-shadow:0 2px 8px rgba(140,90,43,.35);
}
.sku-tab.raised:hover{
  background:#a06830;
  border-color:#a06830;
  transform:scale(1.06);
}

/* Demand bar — sits below meta rows, above card actions */
.demand-bar-wrap{
  margin:10px 0 4px;
}
.demand-label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:#8b7260;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:5px;
}
.demand-label.ready{
  color:#4a7a3a;
}
.demand-label.muted{
  color:#b0a090;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}
.demand-bar-track{
  position:relative;
  height:8px;
  background:#ede3d6;
  border-radius:999px;
  overflow:hidden;
  display:flex;
}
/* Each colored tier segment fills the bar left-to-right */
.demand-seg{
  height:100%;
  border-radius:0;
  transition:width .3s ease;
  flex-shrink:0;
}
/* Tiny end cap to finish the bar shape */
.demand-bar-cap{
  position:absolute;right:0;top:0;bottom:0;
  width:2px;background:rgba(0,0,0,.06);
}

/* When demand is at or over target — glow the bar */
.demand-bar-track.full{
  box-shadow:0 0 0 2px rgba(74,122,58,.25);
}

/* Tier button active border picks up the tier color via CSS var */
.tier.active{
  border-color:var(--tier-color, #c47c3a);
  background:#fff8f2;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--tier-color, #c47c3a) 18%, transparent);
}

/* Card action row update — raise hand button as primary */
.card-actions .btn-primary[data-quick-raise]{
  flex:1;
}

/* ============================================================
   PATCH: Tier reference table (inside raise-hand modals)
   ============================================================ */

.tier-ref-wrap{
  margin:14px 0 16px;
  border:1px solid #e8d9c5;
  border-radius:14px;
  overflow:hidden;
  background:#fffcf8;
}
.tier-ref-title{
  padding:10px 14px 8px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#8b7260;
  border-bottom:1px solid #ede3d4;
}
.tier-ref-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.tier-ref-table th{
  padding:8px 12px;
  text-align:left;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#a08878;
  background:#fdf8f2;
  border-bottom:1px solid #ede3d4;
}
.tier-ref-table td{
  padding:10px 12px;
  border-bottom:1px solid #f0e8dc;
  vertical-align:middle;
}
.tier-ref-table tr:last-child td{
  border-bottom:none;
}
.tier-ref-table tr:hover td{
  background:#fdf5ec;
}
/* Highlight the currently selected tier row */
.tier-ref-row.selected td{
  background:#fff6ec;
  font-weight:700;
}
.tier-ref-dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:50%;
  margin-right:8px;
  vertical-align:middle;
  flex-shrink:0;
}
.tier-ref-num{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:#5a4535;
}
.tier-ref-note{
  padding:8px 14px 10px;
  font-size:11px;
  color:#a08878;
  line-height:1.5;
  border-top:1px solid #ede3d4;
  background:#fdf8f2;
}

/* ============================================================
   PATCH: Hand raise button — definitive override
   ============================================================ */
.sku-tab{
  position:absolute !important;
  top:10px !important; right:10px !important;
  width:46px !important; height:46px !important;
  border-radius:999px !important;
  border:1.5px solid rgba(200,175,145,.45) !important;
  background:rgba(255,250,245,.52) !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
  color:rgba(90,65,45,.4) !important;
  display:flex !important;
  align-items:center !important; justify-content:center !important;
  font-size:20px !important; font-weight:400 !important;
  cursor:pointer !important; z-index:3 !important;
  transition:background .18s, color .18s, border-color .18s, transform .15s !important;
  padding:0 !important; line-height:1 !important;
  box-shadow:none !important;
}
.sku-tab:hover:not(.raised){
  background:rgba(212,138,54,.2) !important;
  color:rgba(140,90,43,.85) !important;
  border-color:rgba(212,138,54,.5) !important;
  transform:scale(1.08) !important;
}
.sku-tab.raised{
  background:#8c5a2b !important;
  color:#fff !important;
  border-color:#8c5a2b !important;
  font-size:20px !important; font-weight:400 !important;
  opacity:1 !important;
  box-shadow:0 2px 10px rgba(140,90,43,.4) !important;
}
.sku-tab.raised:hover{
  background:#a06830 !important;
  border-color:#a06830 !important;
  transform:scale(1.06) !important;
}

/* ============================================================
   PATCH: 3-stage pipeline bar
   ============================================================ */
.demand-bar-wrap{ display:none !important; }
.pipeline-bar{
  display:flex; align-items:stretch;
  margin:12px 0 6px; gap:0; width:100%;
}
.pipe-seg{
  position:relative; flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:8px 4px 7px; border-radius:10px;
  background:#f0e8de; border:1px solid #e0d0be;
  overflow:hidden; min-width:0;
  transition:background .2s, border-color .2s;
}
.pipe-seg.active{ background:#fff6ec; border-color:#c47c3a; }
.pipe-seg.done{   background:#eef6ef; border-color:#b8d9c0; }
.pipe-seg.active:last-child,
.pipe-seg.done:last-child{ background:#e4f2e7; border-color:#4a7a3a; }
.pipe-inner-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:rgba(196,124,58,.15);
  border-radius:10px 0 0 10px;
  transition:width .4s ease; z-index:0;
}
.pipe-icon{
  position:relative; z-index:1;
  font-size:14px; line-height:1; margin-bottom:3px;
}
.pipe-label{
  position:relative; z-index:1;
  font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em;
  color:#8b7260; text-align:center; line-height:1.2;
}
.pipe-seg.active .pipe-label{ color:#7a4820; }
.pipe-seg.done .pipe-label{ color:#3a6a48; }
.pipe-seg.active:last-child .pipe-label,
.pipe-seg.done:last-child .pipe-label{ color:#2f6a3a; }
.pipe-sub{
  position:relative; z-index:1;
  font-size:9px; color:#c47c3a; font-weight:700;
  margin-top:2px; font-variant-numeric:tabular-nums;
}
.pipe-connector{
  width:10px; flex-shrink:0; height:2px;
  align-self:center; background:#e0d0be; margin:0 1px;
}
.pipe-connector.done{ background:#b8d9c0; }

/* ============================================================
   PATCH: Tier reference table
   ============================================================ */
.tier-ref-wrap{
  margin:14px 0 16px; border:1px solid #e8d9c5;
  border-radius:14px; overflow:hidden; background:#fffcf8;
}
.tier-ref-title{
  padding:10px 14px 8px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em;
  color:#8b7260; border-bottom:1px solid #ede3d4;
}
.tier-ref-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tier-ref-table th{
  padding:8px 12px; text-align:left; font-size:11px;
  font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:#a08878; background:#fdf8f2; border-bottom:1px solid #ede3d4;
}
.tier-ref-table td{
  padding:10px 12px; border-bottom:1px solid #f0e8dc; vertical-align:middle;
}
.tier-ref-table tr:last-child td{ border-bottom:none; }
.tier-ref-table tr:hover td{ background:#fdf5ec; }
.tier-ref-dot{
  display:inline-block; width:10px; height:10px;
  border-radius:50%; margin-right:8px; vertical-align:middle;
}
.tier-ref-num{ font-variant-numeric:tabular-nums; white-space:nowrap; color:#5a4535; }
.tier-ref-note{
  padding:8px 14px 10px; font-size:11px; color:#a08878;
  line-height:1.5; border-top:1px solid #ede3d4; background:#fdf8f2;
}

/* ============================================================
   PATCH: Hand raise button
   ============================================================ */
.sku-tab{
  position:absolute !important; top:10px !important; right:10px !important;
  width:46px !important; height:46px !important; border-radius:999px !important;
  border:1.5px solid rgba(200,175,145,.45) !important;
  background:rgba(255,250,245,.52) !important;
  backdrop-filter:blur(4px) !important; -webkit-backdrop-filter:blur(4px) !important;
  color:rgba(90,65,45,.4) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:20px !important; font-weight:400 !important;
  cursor:pointer !important; z-index:3 !important;
  transition:background .18s,color .18s,border-color .18s,transform .15s !important;
  padding:0 !important; line-height:1 !important; box-shadow:none !important;
}
.sku-tab:hover:not(.raised){
  background:rgba(212,138,54,.2) !important; color:rgba(140,90,43,.85) !important;
  border-color:rgba(212,138,54,.5) !important; transform:scale(1.08) !important;
}
.sku-tab.raised{
  background:#8c5a2b !important; color:#fff !important;
  border-color:#8c5a2b !important; font-size:20px !important; font-weight:400 !important;
  opacity:1 !important; box-shadow:0 2px 10px rgba(140,90,43,.4) !important;
}
.sku-tab.raised:hover{
  background:#a06830 !important; border-color:#a06830 !important;
  transform:scale(1.06) !important;
}

/* ============================================================
   PATCH: 3-stage pipeline bar
   ============================================================ */
.demand-bar-wrap{ display:none !important; }
.pipeline-bar{
  display:flex; align-items:stretch; margin:12px 0 6px; gap:0; width:100%;
}
.pipe-seg{
  position:relative; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:8px 4px 7px; border-radius:10px;
  background:#f0e8de; border:1px solid #e0d0be;
  overflow:hidden; min-width:0; transition:background .2s,border-color .2s;
}
.pipe-seg.active{ background:#fff6ec; border-color:#c47c3a; }
.pipe-seg.done{   background:#eef6ef; border-color:#b8d9c0; }
.pipe-seg.active:last-child,.pipe-seg.done:last-child{ background:#e4f2e7; border-color:#4a7a3a; }
.pipe-inner-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:rgba(196,124,58,.15); border-radius:10px 0 0 10px;
  transition:width .4s ease; z-index:0;
}
.pipe-icon{ position:relative; z-index:1; font-size:14px; line-height:1; margin-bottom:3px; }
.pipe-label{
  position:relative; z-index:1; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:#8b7260;
  text-align:center; line-height:1.2;
}
.pipe-seg.active .pipe-label{ color:#7a4820; }
.pipe-seg.done .pipe-label{ color:#3a6a48; }
.pipe-seg.active:last-child .pipe-label,.pipe-seg.done:last-child .pipe-label{ color:#2f6a3a; }
.pipe-sub{
  position:relative; z-index:1; font-size:9px; color:#c47c3a;
  font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums;
}
.pipe-connector{ width:10px; flex-shrink:0; height:2px; align-self:center; background:#e0d0be; margin:0 1px; }
.pipe-connector.done{ background:#b8d9c0; }

/* ============================================================
   PATCH: Tier reference table
   ============================================================ */
.tier-ref-wrap{ margin:14px 0 16px; border:1px solid #e8d9c5; border-radius:14px; overflow:hidden; background:#fffcf8; }
.tier-ref-title{ padding:10px 14px 8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#8b7260; border-bottom:1px solid #ede3d4; }
.tier-ref-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tier-ref-table th{ padding:8px 12px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#a08878; background:#fdf8f2; border-bottom:1px solid #ede3d4; }
.tier-ref-table td{ padding:10px 12px; border-bottom:1px solid #f0e8dc; vertical-align:middle; }
.tier-ref-table tr:last-child td{ border-bottom:none; }
.tier-ref-table tr:hover td{ background:#fdf5ec; }
.tier-ref-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.tier-ref-num{ font-variant-numeric:tabular-nums; white-space:nowrap; color:#5a4535; }
.tier-ref-note{ padding:8px 14px 10px; font-size:11px; color:#a08878; line-height:1.5; border-top:1px solid #ede3d4; background:#fdf8f2; }

/* ============================================================
   PATCH: Pipeline bar — clearer color scheme
   All segments same neutral base. Active = solid amber.
   Building Demand = amber fill grows as demand increases.
   Done = solid green check. Inactive future = pale gray.
   ============================================================ */

/* Reset and override all pipe-seg styles */
.pipe-seg{
  background:#f0ece6 !important;
  border:2px solid #ddd0be !important;
  color:#8b7260 !important;
}
.pipe-seg .pipe-label{ color:#a09080 !important; font-weight:700 !important; }
.pipe-seg .pipe-icon{ opacity:.4 !important; }

/* ACTIVE stage — the one the item is currently in */
.pipe-seg.active{
  background:#fff8ee !important;
  border:2px solid #c47c3a !important;
  box-shadow:0 0 0 3px rgba(196,124,58,.12) !important;
}
.pipe-seg.active .pipe-label{ color:#7a4010 !important; font-weight:900 !important; }
.pipe-seg.active .pipe-icon{ opacity:1 !important; }

/* DONE stage — completed, clear green */
.pipe-seg.done{
  background:#edf7ef !important;
  border:2px solid #5a9a6a !important;
}
.pipe-seg.done .pipe-label{ color:#2a6a38 !important; font-weight:700 !important; }
.pipe-seg.done .pipe-icon{ opacity:1 !important; }

/* Live Review! active — green not amber */
.pipe-seg.active:last-child{
  background:#edf7ef !important;
  border:2px solid #4a8a5a !important;
  box-shadow:0 0 0 3px rgba(74,138,90,.14) !important;
}
.pipe-seg.active:last-child .pipe-label{ color:#1e5a2e !important; }

/* Inner fill — amber sweep across Building Demand */
.pipe-inner-fill{
  background:linear-gradient(90deg, rgba(196,124,58,.22), rgba(196,124,58,.12)) !important;
}

/* Connector lines */
.pipe-connector{ background:#ddd0be !important; }
.pipe-connector.done{ background:#5a9a6a !important; }

/* Tier ref discount column */
.tier-ref-discount{
  font-size:12px;
  font-weight:800;
  color:#7a4010;
  white-space:nowrap;
}
.tier-ref-discount a{
  color:#7a4010;
  text-decoration:underline;
  font-weight:700;
}

/* ============================================================
   PATCH B45: Pipeline bar — definitive clear color scheme
   ONE neutral gray base for all segments.
   Active = amber border + glow. Done = green. Future = gray.
   Building Demand inner fill sweeps amber with demand progress.
   ============================================================ */

/* Base reset — all segments identical neutral start */
.pipeline-bar .pipe-seg,
.pipeline-bar .pipe-seg.active,
.pipeline-bar .pipe-seg.done {
  background:#f4f0eb !important;
  border:2px solid #d8cfc4 !important;
  box-shadow:none !important;
}
.pipeline-bar .pipe-seg .pipe-label { color:#b0a090 !important; font-weight:600 !important; }
.pipeline-bar .pipe-seg .pipe-icon  { filter:grayscale(1); opacity:.35 !important; }

/* ── ACTIVE stage: amber glow, dark label ── */
.pipeline-bar .pipe-seg.active {
  background:#fffaf3 !important;
  border:2px solid #c47c3a !important;
  box-shadow:0 0 0 3px rgba(196,124,58,.15), inset 0 0 0 1px rgba(196,124,58,.1) !important;
}
.pipeline-bar .pipe-seg.active .pipe-label { color:#7a3a0a !important; font-weight:900 !important; }
.pipeline-bar .pipe-seg.active .pipe-icon  { filter:none; opacity:1 !important; }
.pipeline-bar .pipe-seg.active .pipe-sub   { color:#b05a18 !important; font-weight:800 !important; }

/* ── DONE stage: clear green ── */
.pipeline-bar .pipe-seg.done {
  background:#f0f9f2 !important;
  border:2px solid #5c9a6a !important;
  box-shadow:none !important;
}
.pipeline-bar .pipe-seg.done .pipe-label { color:#2a5e38 !important; font-weight:700 !important; }
.pipeline-bar .pipe-seg.done .pipe-icon  { filter:none; opacity:1 !important; }

/* ── Live Review! active — green not amber ── */
.pipeline-bar .pipe-seg.active:last-of-type,
.pipeline-bar .pipe-seg.done:last-of-type {
  background:#e8f5eb !important;
  border:2px solid #3a8a50 !important;
  box-shadow:0 0 0 3px rgba(58,138,80,.14) !important;
}
.pipeline-bar .pipe-seg.active:last-of-type .pipe-label,
.pipeline-bar .pipe-seg.done:last-of-type .pipe-label { color:#1a5228 !important; font-weight:900 !important; }

/* ── Inner fill: amber sweep on Building Demand ── */
.pipeline-bar .pipe-inner-fill {
  background:linear-gradient(90deg,rgba(196,124,58,.28) 0%,rgba(196,124,58,.10) 100%) !important;
  border-right:2px solid rgba(196,124,58,.4) !important;
}

/* ── Connectors ── */
.pipeline-bar .pipe-connector       { background:#d0c8be !important; width:8px !important; }
.pipeline-bar .pipe-connector.done  { background:#5c9a6a !important; }

/* ── Tier ref discount column ── */
.tier-ref-discount { font-size:12px; font-weight:800; color:#7a3a0a; white-space:nowrap; }
.tier-ref-discount a { color:#7a3a0a; text-decoration:underline; }

/* ── Hamburger mobile nav (shared) ── */
.nav-hamburger{display:none;background:none;border:2px solid rgba(255,255,255,.22);border-radius:9px;padding:0;cursor:pointer;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0}
.nav-hamburger span{display:block;width:18px;height:2px;background:#dcc8b1;border-radius:2px;transition:all .25s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav-hamburger{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(23,18,15,.98);padding:12px 16px 16px;flex-direction:column;gap:6px;border-bottom:1px solid rgba(255,255,255,.07);z-index:200}
  .nav-links.nav-open{display:flex}
  .nav-links a{width:100%;border-radius:10px}
  nav{position:fixed;left:0;right:0;top:0}
  .nav-inner{flex-wrap:nowrap}
  body{padding-top:62px}
}

/* ============================================================
   PATCH B46 (2026-04-15): Mobile nav layout fix
   - nav is full-width fixed black bar on all screen sizes
   - brand text on left, hamburger on right (single row)
   - body content gets padding-top so hero doesn't ride under header
   ============================================================ */
nav{
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:150 !important;
  background:#17120f !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  width:100%;
}
.nav-inner{
  max-width:1300px; margin:0 auto;
  padding:14px 20px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap;
  width:100%;
  min-height:64px;
}
/* Override earlier flex-direction:column on .nav-brand */
.nav-brand{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 1 auto;
  min-width:0;
}
.nav-brand .brand-text{
  display:flex !important;
  flex-direction:column !important;
  min-width:0;
  flex:1 1 auto;
}
.nav-brand .brand-text strong{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;
  color:#f4eee4;
  line-height:1.3;
  padding-top:2px;
}
.nav-brand .brand-text span{
  margin-top:2px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#b89f82;
  line-height:1.2;
}
/* Push wrap content below fixed nav */
.wrap{ padding-top:84px !important; }
.invoice-shell{ padding-top:96px !important; }

@media(min-width:901px){
  /* On desktop hamburger stays hidden; nav-links sit to the right of brand */
  .nav-hamburger{display:none !important}
  .nav-links{display:flex !important;position:static;background:none;padding:0;flex-direction:row;border-bottom:none;z-index:auto}
}

@media(max-width:900px){
  .nav-inner{ padding:10px 14px !important; flex-wrap:nowrap !important; }
  .nav-brand{ gap:10px !important; }
  .nav-brand .brand-text strong{ font-size:15px; line-height:1.15; white-space:normal; overflow:visible; text-overflow:clip; }
  .nav-brand .brand-text span{ font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-hamburger{ display:flex !important; margin-left:auto; flex-shrink:0; width:40px; height:40px; }
  .nav-links{
    display:none !important;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(23,18,15,.98);
    padding:12px 16px 16px;
    flex-direction:column !important;
    gap:6px;
    border-bottom:1px solid rgba(255,255,255,.07);
    z-index:200;
  }
  .nav-links.nav-open{ display:flex !important; }
  .nav-links a{ width:100%; border-radius:10px; }
  .wrap{ padding-top:70px !important; padding-left:14px !important; padding-right:14px !important; }
}

/* ============================================================
   PATCH B47 (2026-04-15): Catalog hierarchy
   - Header "Catalog" dropdown
   - Living Room sidebar tree + mobile accordion
   - Breadcrumb
   ============================================================ */

/* Header dropdown */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown > a[data-catalog-dd-toggle]{cursor:pointer;user-select:none}
.nav-dd-menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  background:#fffaf3;
  border:1px solid #e5d9c7;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(45,27,13,.18);
  padding:8px;
  z-index:260;
}
.nav-dropdown.open .nav-dd-menu{display:block}
.nav-dd-menu a,
.nav-dd-menu .nav-dd-soon{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:14px;
  font-weight:700;
  color:#2d241d !important;
  background:transparent !important;
  border:none !important;
  width:auto !important;
  text-align:left;
}
.nav-dd-menu a:hover{background:#f5ebd7 !important;color:#7a3a0a !important}
.nav-dd-menu a.dd-active{background:#fff3e6 !important;color:#7a3a0a !important}
.nav-dd-menu .nav-dd-soon{color:#a09080 !important;cursor:not-allowed}
.nav-dd-menu .nav-dd-soon em{
  font-style:normal;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:#ece5d7;
  color:#7a6856;
  padding:3px 8px;
  border-radius:999px;
  font-weight:800;
}

@media(max-width:900px){
  .nav-dropdown{width:100%}
  .nav-dd-menu{
    position:static;
    width:100%;
    box-shadow:none;
    border:none;
    background:rgba(255,255,255,.06);
    padding:6px;
    margin-top:4px;
  }
  .nav-dd-menu a,
  .nav-dd-menu .nav-dd-soon{color:#f4eee4 !important;padding:10px 14px}
  .nav-dd-menu a:hover{background:rgba(255,255,255,.08) !important;color:#f0c760 !important}
  .nav-dd-menu a.dd-active{background:rgba(207,159,42,.25) !important;color:#f0c760 !important}
  .nav-dd-menu .nav-dd-soon{color:rgba(244,238,228,.55) !important}
  .nav-dd-menu .nav-dd-soon em{background:rgba(255,255,255,.1);color:rgba(244,238,228,.75)}
}

/* Breadcrumb */
.breadcrumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;color:#7a6856;
  margin:4px 0 16px;
}
.breadcrumbs a{color:#7a3a0a;font-weight:700;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs .crumb-sep{color:#b0a090}
.breadcrumbs .crumb-current{color:#2d241d;font-weight:700}

/* ── Living Room compact hero override ── */
.lr-hero{
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding:24px 28px !important;background:#fffaf3;border:1px solid #e5d9c7;border-radius:18px;
  box-shadow:0 6px 20px rgba(60,40,20,.05);margin-bottom:20px;
}
.lr-hero h1{margin:8px 0 8px;font-size:clamp(28px,4vw,46px);line-height:1.02}
.lr-hero p{margin:0;color:#5f4f40;line-height:1.7;font-size:14px;max-width:620px}
.lr-hero .badge{position:static;display:inline-block;background:rgba(59,43,29,.08);color:#7a3a0a;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ── Layout: sidebar + content ── */
.cat-lr-wrap{max-width:1300px;margin:0 auto;padding:32px 24px 60px;padding-top:96px}
.lr-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.lr-toolbar .search{flex:1;min-width:220px}
.lr-layout{
  display:grid;
  grid-template-columns:264px 1fr;
  gap:22px;
  align-items:flex-start;
}
.lr-status-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.lr-status-row .status{color:#7a6856;font-size:14px;font-weight:600}
.lr-status-row .small{font-size:12px;color:#a08878}

/* Sidebar */
.lr-sidebar{
  position:sticky;
  top:96px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  background:#fffaf3;
  border:1px solid #e5d9c7;
  border-radius:18px;
  padding:14px 12px;
  box-shadow:0 6px 20px rgba(60,40,20,.05);
}
.lr-sidebar-inner{display:flex;flex-direction:column;gap:4px}
.lr-filter-toggle{display:none}
.lr-node{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:10px 12px;
  background:transparent;border:none;border-radius:10px;
  font-size:13px;font-weight:600;color:#4d4034;text-align:left;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lr-node:hover{background:#f5ebd7;color:#7a3a0a}
.lr-node.active{background:#fff3e6;color:#7a3a0a;font-weight:800;box-shadow:inset 3px 0 0 #c47c3a}
.lr-node-root{font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#2d241d}
.lr-node-root.active{box-shadow:inset 3px 0 0 #c47c3a}
.lr-node-count{
  flex-shrink:0;font-size:11px;font-weight:800;
  color:#a08878;background:#f5efe5;border-radius:999px;padding:2px 9px;min-width:24px;text-align:center;
}
.lr-node.active .lr-node-count{background:#c47c3a;color:#fff}

.lr-branch{margin-top:4px;border-top:1px solid #f0e8dc;padding-top:6px}
.lr-branch:first-of-type{margin-top:8px}
.lr-branch-head{font-weight:800;color:#2d241d}
.lr-branch-head .lr-chev{
  display:inline-block;transition:transform .2s ease;font-size:12px;color:#a08878;
  width:14px;flex-shrink:0;
}
.lr-branch.collapsed .lr-chev{transform:rotate(-90deg)}
.lr-children{display:flex;flex-direction:column;gap:2px;padding-left:6px;margin-top:2px}
.lr-branch.collapsed .lr-children{display:none}
.lr-leaf{padding-left:30px;font-size:13px;color:#5b4b3b;font-weight:600}
.lr-leaf:before{
  content:"";position:absolute;
}
.lr-leaf{position:relative}
.lr-leaf:after{
  content:"";position:absolute;left:18px;top:50%;width:6px;height:1px;background:#d0c4b0;
}

/* Mobile: collapse sidebar into accordion */
@media(max-width:860px){
  .lr-layout{grid-template-columns:1fr}
  .lr-sidebar{
    position:static;max-height:0;overflow:hidden;padding:0 12px;
    border:none;border-radius:0;background:transparent;box-shadow:none;
    transition:max-height .25s ease, padding .25s ease;
  }
  .lr-sidebar.open{
    max-height:700px;overflow-y:auto;padding:12px;background:#fffaf3;
    border:1px solid #e5d9c7;border-radius:14px;margin-bottom:14px;
  }
  .lr-filter-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;padding:12px 16px;
    background:#fff;border:1px solid #e5d9c7;border-radius:12px;
    font-size:13px;font-weight:800;color:#2d241d;cursor:pointer;
  }
  .lr-filter-toggle[aria-expanded="true"]{background:#fff3e6;border-color:#c47c3a}
  .lr-filter-summary{font-weight:600;color:#7a3a0a;text-transform:none;letter-spacing:0}
  .lr-toolbar{flex-direction:column;align-items:stretch}
  .lr-toolbar .search{width:100%}
  .cat-lr-wrap{padding:80px 16px 40px}
  .lr-hero{padding:18px 20px !important}
  .lr-hero h1{font-size:26px}
}


/* ── Redesigned SKU card (buyer-focused) ── */
.card .thumb{position:relative}
.sku-savings-badge{position:absolute;top:12px;right:12px;background:#2a7a3e;color:#fff;font-size:12px;font-weight:800;padding:6px 11px;border-radius:999px;letter-spacing:.02em}
.sku-price-row{display:flex;align-items:baseline;gap:10px;margin:8px 0 2px}
.sku-price{font-size:26px;font-weight:700;color:#2d241d;line-height:1.1}
.sku-price-unit{font-size:13px;font-weight:500;color:#8f7a63}
.sku-retail{font-size:14px;color:#8f7a63;text-decoration:line-through}
.sku-fob{font-size:12px;color:#8f7a63;margin:4px 0 2px}
.sku-tier-note{font-size:12px;color:#7a5a10;font-weight:700;background:#f9efd4;border-radius:7px;padding:5px 9px;display:inline-block;margin:8px 0 12px}
.sku-factory{font-size:12px;color:#8f7a63;margin-top:12px;padding-top:10px;border-top:1px solid #f0e7d7}
.sku-factory a{color:#7a3a0a;text-decoration:underline;text-underline-offset:2px}

/* ============================================================================
   AUTHORITATIVE FINAL BLOCK — 2026-06-03  (Doug fix: tier table + mobile modal)
   This block is the single source of truth for these rules. It is placed last
   on purpose so it wins the cascade over the older stacked PATCH blocks above.
   DO NOT add new PATCH blocks below; edit THIS block instead.
   Fixes:
   (1) Tier reference table must be readable on mobile (was clipping columns).
   (2) Detail/Quick-raise modal must fit the viewport and scroll on mobile
       (was showing a short ~360px panel that didn't fit the full page).
   ============================================================================ */

/* --- Tier table: horizontal-scroll wrapper so wide table never clips --- */
.tier-ref-wrap{ overflow:visible; }            /* allow inner scroller, was clipping */
.tier-ref-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- MOBILE: collapse the 5-column tier table into stacked labeled cards --- */
@media (max-width:640px){
  .tier-ref-scroll{ overflow-x:visible; }
  .tier-ref-table thead{ display:none; }                 /* header row not needed when stacked */
  .tier-ref-table, .tier-ref-table tbody{ display:block; width:100%; }
  .tier-ref-table tr{
    display:block;
    border:1px solid #ecdfcd; border-radius:12px;
    margin:0 10px 10px; padding:4px 0; background:#fffdfa;
  }
  .tier-ref-table tr:hover td{ background:transparent; } /* no hover shading on touch */
  .tier-ref-table td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:8px 14px; border-bottom:1px solid #f4ece0; white-space:normal;
    text-align:right;
  }
  .tier-ref-table tr td:last-child{ border-bottom:none; }
  .tier-ref-table td::before{
    content:attr(data-label);
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
    color:#a08878; text-align:left; flex:0 0 auto;
  }
  .tier-ref-table td[data-label="Tier"]{ justify-content:flex-start; background:#fbf4ea; }
  .tier-ref-table td[data-label="Tier"]::before{ display:none; }
  .tier-ref-table td[data-label="Tier"] strong{ font-size:15px; }
  .tier-ref-num{ white-space:normal; }
}

/* --- Detail + quick-raise modal: fit viewport & scroll on mobile --- */
@media (max-width:640px){
  dialog{
    position:fixed; inset:0; margin:auto;
    width:calc(100vw - 16px); max-width:calc(100vw - 16px);
    height:auto; max-height:92dvh;                        /* dvh handles mobile URL bar */
    display:flex; flex-direction:column; overflow:hidden;
  }
  @supports not (height:1dvh){ dialog{ max-height:88vh; } }
  .modal{ display:flex; flex-direction:column; min-height:0; max-height:92dvh; overflow:hidden; }
  .modal-head{ flex:0 0 auto; }
  .modal-body{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  #quickRaiseDialog .modal-body, #detailDialog .modal-body{ max-height:none; }

/* ==========================================================================
   SIGN-IN GATE  (B50 — complete rewrite, 2026-06-04)
   Uses a plain div overlay instead of <dialog> to avoid all iOS Safari
   top-layer / z-index / backdrop issues with <dialog showModal()>.
   ========================================================================== */

/* Scroll lock: just hide overflow on html; NO position:fixed on body
   (position:fixed body causes scroll-jump and doesn't work reliably on iOS) */
html.fsd-modal-open{ overflow:hidden !important; }

#signInGate{
  display:none;
  position:fixed;
  inset:0;
  z-index:9000;           /* above nav (150) and everything else */
  align-items:center;
  justify-content:center;
  padding:16px;
  box-sizing:border-box;
  /* semi-transparent backdrop */
  background:rgba(23,18,15,.55);
  -webkit-overflow-scrolling:touch;
}
#signInGate.open{
  display:flex;
}
#signInGateBox{
  background:#fffaf6;
  border-radius:20px;
  padding:28px 28px 24px;
  max-width:420px;
  width:100%;
  box-shadow:0 24px 60px rgba(23,18,15,.28);
  position:relative;
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* B51: mobile rules for div-based overlays (replaces dialog rules) */
@media (max-width:640px){
  #detailDialog > .modal{
    display:flex; flex-direction:column;
    max-height:calc(100dvh - 32px); overflow:hidden;
    width:100%;
  }
  #detailDialog > .modal .modal-body{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  #quickRaiseDialog > .modal{
    display:flex; flex-direction:column;
    max-height:calc(100dvh - 32px); overflow:hidden;
    width:100%;
  }
  #quickRaiseDialog > .modal .modal-body{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
}

/* B52: detail overlay mobile fix — single column, no horizontal overflow */
#detailDialog {
  padding: 8px !important;
}
#detailDialog > .modal {
  max-height: calc(100dvh - 16px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  max-width: min(1080px, 100%) !important;
}
#detailDialog .detail-layout {
  grid-template-columns: 1fr !important;
}
#detailDialog .modal-head {
  position: sticky;
  top: 0;
  background: #fffaf6;
  z-index: 2;
}

/* B53: prevent all horizontal overflow in detail overlay on any screen width */
#detailDialog, #detailDialog * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#detailDialog .detail-layout {
  grid-template-columns: 1fr !important;
  width: 100% !important;
}
#detailDialog .gallery-main {
  aspect-ratio: 4/3 !important;
}

/* B53 final: clip tier-ref-wrap overflow so table can never push modal wider */
.tier-ref-wrap{ overflow:hidden !important; }
.tier-ref-scroll{ max-width:100%; }
@media (max-width:640px){
  .tier-ref-table tr{ margin:0 0 10px !important; }
}

/* B54: remove min-width from search input on mobile so it never causes page overflow */
@media (max-width:640px){
  .search { min-width