/* ==========================================================================
   Admin — The Soul Solutions Business Manager.
   Part 1 is the back office's own stylesheet (backoffice/index.html, lines 17-312), copied
   verbatim so every screen looks exactly as it does there. Part 2 adds what the rebuild needs
   on top (server-rendered sign-in, lists, editors, photo galleries); it never restyles Part 1.
   ========================================================================== */

/* ---- Part 1: back office stylesheet (verbatim) ---- */
:root{color-scheme:light only;--or:#e07820;--orl:#f5a050;--ink:#1c1c1c;--inkm:#555;--inkl:#888;--cream:#faf9f6;--bd:#e2ddd6;--sb:#212121;--gn:#3d9a6e;--rd:#c0392b;--bl:#2c6fad;--sh:0 2px 16px rgba(0,0,0,.07);--shl:0 8px 40px rgba(0,0,0,.13);}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--cream);color:var(--ink);min-height:100vh;font-size:14px;}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:225px;background:var(--sb);display:flex;flex-direction:column;z-index:200;overflow-y:auto;}
.sb-logo{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.07);}
.sb-logo .brand{font-family:'Crimson Pro',serif;font-size:1.1rem;color:var(--orl);font-weight:700;}
.sb-logo .sub{font-size:.62rem;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.1em;margin-top:2px;}
.sb-sec{padding:14px 12px 4px;}
.sb-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.65);padding:0 8px;margin-bottom:4px;}
.nb{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;background:none;border:none;border-radius:7px;color:rgba(255,255,255,.55);font-size:.82rem;font-family:'DM Sans',sans-serif;cursor:pointer;text-align:left;transition:all .15s;margin-bottom:1px;}
.nb span{display:inline-block;width:20px;text-align:center;flex-shrink:0;font-size:.9rem;}
.nb:hover{background:rgba(255,255,255,.07);color:#fff;}.nb.active{background:var(--or);color:#fff;font-weight:600;}
.main{margin-left:225px;min-height:100vh;border-left:1px solid rgba(0,0,0,.07);scrollbar-gutter:stable;}
.topbar{background:#fff;border-bottom:1px solid var(--bd);padding:13px 30px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.topbar h2{font-family:'Crimson Pro',serif;font-size:1.3rem;font-weight:600;}.topbar h2 span{color:var(--or);}
.content{padding:24px 30px;}
.btn{padding:8px 16px;border-radius:7px;border:none;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:5px;}
.btn-p{background:none;border:1.5px solid var(--or);color:var(--or);}.btn-p:hover{background:#fff0e6;}
.btn-o{background:none;border:1.5px solid var(--bd);color:var(--inkm);}.btn-o:hover{border-color:var(--or);color:var(--or);}
.btn-d{background:var(--rd);color:#fff;}.btn-g{background:var(--gn);color:#fff;}.btn-b{background:var(--bl);color:#fff;}
.btn-sm{padding:5px 11px;font-size:.76rem;}
.page{display:none;}.page.active{display:block;}
.card{background:#fff;border-radius:12px;padding:20px;box-shadow:var(--sh);border:1px solid var(--bd);margin-bottom:18px;}
.card-title{font-family:'Crimson Pro',serif;font-size:1.05rem;font-weight:600;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat{background:#fff;border-radius:11px;padding:16px 18px;box-shadow:var(--sh);border:1px solid var(--bd);border-top:3px solid var(--or);}
.stat.gn{border-top-color:var(--gn);}.stat.rd{border-top-color:var(--rd);}.stat.bl{border-top-color:var(--bl);}
.stat-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--inkl);margin-bottom:5px;}
.stat-val{font-family:'Crimson Pro',serif;font-size:1.6rem;font-weight:700;}
.stat-sub{font-size:.7rem;color:var(--inkl);margin-top:2px;}
table{width:100%;border-collapse:collapse;}
/* Custom hover tooltip (delivery info etc.) */
#soul-tip{position:fixed;z-index:99999;background:#2c2a26;color:#fff;font-size:.76rem;line-height:1.5;padding:8px 13px;border-radius:9px;box-shadow:0 8px 22px rgba(0,0,0,.28);max-width:290px;pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:pre-line;font-family:'DM Sans',sans-serif;}
#soul-tip.show{opacity:1;}
#soul-tip:after{content:'';position:absolute;top:100%;left:var(--arrow-x,50%);transform:translateX(-50%);border:6px solid transparent;border-top-color:#2c2a26;}
#soul-tip.below:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#2c2a26;}
th{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--inkl);padding:8px 11px;text-align:left;border-bottom:1px solid var(--bd);background:#faf9f6;}
td{padding:10px 11px;font-size:.83rem;border-bottom:1px solid #f0ece4;vertical-align:middle;}
.row-no-bottom td{border-bottom:none;}
.row-no-top td{border-top:none;}
tr:last-child td{border-bottom:none;}tr:hover td{background:#fdfbf8;}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.68rem;font-weight:600;}
.b-paid{background:#1a7a49;color:#fff;font-weight:700;border-radius:5px;}.b-pend{background:#f0a500;color:#fff;font-weight:700;border-radius:5px;}
.b-conf{background:#1a6bb5;color:#fff;font-weight:700;border-radius:5px;}.b-draft{background:#f0f0f0;color:#666;}
.b-exp{background:#c0392b;color:#fff;font-weight:700;border-radius:5px;}.b-over{background:#c0392b;color:#fff;font-weight:700;border-radius:5px;}.b-canc{background:#c0392b;color:#fff;font-weight:700;border-radius:5px;}.b-part{background:#1a7a49;color:#fff;font-weight:700;border-radius:5px;}.b-deliv{background:#1a7a49;color:#fff;font-weight:700;border-radius:5px;}
.b-ret{background:#888;color:#fff;font-weight:700;border-radius:5px;}.b-ret{background:#c0392b;color:#fff;font-weight:700;border-radius:5px;}
.b-void{background:#6b2d2d;color:#fff;font-weight:700;border-radius:5px;letter-spacing:.04em;}
.pv-voided-row td{opacity:1;text-decoration:none;border-bottom:none;}
.pv-chain-end td{border-bottom:1px solid #f0ece4 !important;}
.pv-voided-row{background:none;}
.pv-replacement-row{background:none;}.pv-replacement-row td{padding-bottom:3px;}
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.fg label{font-size:.68rem;font-weight:600;color:var(--inkm);text-transform:uppercase;letter-spacing:.06em;}
.fg input,.fg select,.fg textarea{padding:8px 11px;border:1.5px solid var(--bd);border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.86rem;color:var(--ink);background:#fff;outline:none;transition:border .15s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--or);}
.page select{background:#fff;}
.fg textarea{resize:vertical;min-height:55px;}
.fr{display:grid;gap:12px;}.c2{grid-template-columns:1fr 1fr;}.c3{grid-template-columns:1fr 1fr 1fr;}.full{grid-column:1/-1;}
.overlay{position:fixed;inset:0;background:rgba(20,20,30,.55);display:none;align-items:center;justify-content:center;z-index:500;backdrop-filter:blur(3px);}
.overlay.open{display:flex;}
.modal{background:#fff;border-radius:14px;padding:26px 30px;width:92%;max-width:920px;max-height:94vh;overflow-y:auto;box-shadow:var(--shl);}
.modal-hd{font-family:'Crimson Pro',serif;font-size:1.25rem;font-weight:700;margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;}
.close-x{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--inkl);}
.item-tbl{width:100%;border-collapse:collapse;margin:8px 0;}
.item-tbl th{background:#f5f2ed;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--inkm);padding:7px 9px;text-align:left;}
.item-tbl td{padding:4px 5px;border-bottom:1px solid #ede9e2;}
.item-tbl input{border:1.5px solid transparent;background:transparent;padding:5px 7px;font-size:.84rem;width:100%;font-family:'DM Sans',sans-serif;border-radius:5px;transition:all .15s;color:var(--ink);}
.item-tbl input:focus{border-color:var(--or);background:#fff;}
.add-row{background:none;border:1.5px dashed var(--bd);border-radius:7px;width:100%;padding:7px;color:var(--inkl);font-size:.8rem;cursor:pointer;margin-top:5px;font-family:'DM Sans',sans-serif;transition:all .15s;}
.add-row:hover{border-color:var(--or);color:var(--or);}
.subnote-input{width:100%;font-size:.78rem;color:var(--inkm);border:1px dashed #ccc;border-radius:5px;padding:4px 8px;background:#faf9f6;font-family:'DM Sans',sans-serif;resize:vertical;min-height:32px;}
.item-tbl td input[type=number]{width:100%;min-width:75px;box-sizing:border-box;}
.item-tbl th:nth-child(4),.item-tbl td:nth-child(4){width:80px;}
.item-tbl th:nth-child(5),.item-tbl td:nth-child(5){width:110px;}
.item-tbl th:nth-child(6),.item-tbl td:nth-child(6){width:110px;}
.subnote-input:focus{border-color:var(--or);background:#fff;outline:none;}
.db-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.db-card{background:#fff;border-radius:11px;padding:16px;border:1.5px solid var(--bd);box-shadow:var(--sh);}
.db-card:hover{border-color:var(--or);}
.db-avatar{width:38px;height:38px;border-radius:50%;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Crimson Pro',serif;font-size:1rem;font-weight:700;margin-bottom:10px;}
.db-avatar.sup{background:var(--bl);}.db-avatar.int{background:#7c5cbf;}
.db-name{font-weight:700;margin-bottom:3px;font-size:.88rem;}
.db-code{font-size:.68rem;color:var(--inkl);margin-bottom:6px;}
.db-info{font-size:.76rem;color:var(--inkm);line-height:1.6;}
.doc-wrap{background:#fff;font-family:'Times New Roman',Times,serif;color:#1c1c1c;font-size:11px;line-height:1.6;max-width:800px;}
.doc-hdr-wrap{display:flex;justify-content:space-between;align-items:flex-start;padding:51px 36px 14px;min-height:331px;}
.doc-left-col{flex:1;min-height:266px;}
.doc-right-col{margin-right:10px;min-width:260px;text-align:right;display:flex;flex-direction:column;justify-content:space-between;min-height:266px;}
.doc-hdr{display:flex;justify-content:space-between;align-items:flex-start;padding:26px 36px 14px;}
.doc-cust-block{padding-top:35px;}
.doc-logo-block{text-align:right;margin-top:20px;}
.doc-meta-block{text-align:left;margin-top:1.5px;padding-bottom:0px;}
.doc-from .co-name{font-weight:700;font-size:13.5px;}
.doc-from .co-reg{font-size:9.5px;font-weight:400;color:#444;}
.doc-from .co-addr{font-size:11.5px;color:#222;margin-top:3px;line-height:1.75;}
.doc-right-col img{width:210px;display:block;margin-left:auto;object-fit:contain;margin-bottom:6px;}
.doc-right-block img{width:210px;display:block;margin-left:auto;object-fit:contain;margin-bottom:6px;}
.doc-type-title{margin-top:27px;font-size:21.5px;font-weight:700;color:#1c1c1c;text-align:left;padding-left:85px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:0px;}
.doc-body{padding:0 36px;display:flex;flex-direction:column;min-height:3.8px;}
.doc-body-inner{margin-top:0;flex:1;width:100%;}
.doc-items-spacer{min-height:15px;}
.doc-cust-name{font-weight:700;font-size:13.5px;margin-bottom:1px;}
.doc-cust-addr{font-size:11.5px;color:#222;margin-top:3px;line-height:1.75;margin-bottom:0;}
.doc-two-col{display:flex;gap:20px;border-bottom:1.5px solid #1c1c1c;padding-bottom:8px;margin-bottom:0;}
.doc-left{flex:1;}
.doc-right{min-width:250px;}
.doc-contact{font-size:11.5px;color:#222;line-height:1.75;}
.doc-contact>div{display:flex;margin-top:0;margin-bottom:0;line-height:1.75;}
.doc-contact span{font-weight:700;color:#1c1c1c;width:28px;flex-shrink:0;}
.doc-contact .colon{width:auto;flex-shrink:0;padding:0 6px 0 0;}
.doc-meta{margin-left:85px;text-align:left;}
.doc-meta td{border-bottom:none;padding:0.5px 0;font-size:11.5px;vertical-align:top;line-height:1.73;}
.doc-meta td:first-child{font-weight:700;width:80px;color:#1c1c1c;}
.doc-meta td:nth-child(2){width:14px;padding:1px 4px;color:#555;}
.doc-items{width:100%;border-collapse:collapse;margin:0;}
.doc-items{border-top:1px solid #1c1c1c;}
.doc-items thead tr{}
.doc-items th{color:#1c1c1c;padding:4px 9px;font-size:12px;text-align:left;background:#fff;border-bottom:1px solid #1c1c1c;vertical-align:middle;}
.doc-items th.r{text-align:right;padding-right:4px;}
.doc-items td{border-bottom:none;color:#1c1c1c;padding:3px 9px;font-size:12px;vertical-align:top;}
.doc-items td.r{text-align:right;padding-right:4px;}
.doc-items tr.last-item td{}
.doc-footer{padding:0 0 41px;}
.eoe-table{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 12px;}
.eoe-cell-words{padding:3px 9px;font-size:12px;line-height:1.5;border:none;border-top:1px solid #1c1c1c;vertical-align:middle;}
.eoe-label{font-weight:700;margin-right:6px;}
.eoe-cell-total{padding:3px 10px;border-left:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c;font-size:12px;font-weight:700;white-space:nowrap;width:60px;text-align:center;vertical-align:middle;}
.eoe-cell-total{padding:3px 10px;border-top:1px solid #1c1c1c;border-left:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c;border-right:none;font-size:12px;font-weight:700;white-space:nowrap;width:60px;text-align:center;vertical-align:middle;}
.eoe-cell-rm{padding:3px 8px;border-top:1px solid #1c1c1c;border-left:1px solid #1c1c1c;border-bottom:1px solid #1c1c1c;border-right:none;font-size:12px;font-weight:700;white-space:nowrap;width:28px;vertical-align:middle;}
.eoe-cell-amt{padding:3px 14px;border:1px solid #1c1c1c;font-size:12px;font-weight:700;white-space:nowrap;width:90px;text-align:right;vertical-align:middle;}
.doc-terms span{font-weight:700;width:82px;flex-shrink:0;}
.doc-terms .colon{width:14px;flex-shrink:0;}
.doc-note{font-size:11.5px;color:#444;margin-bottom:10px;}
.doc-note{font-size:11px;color:#444;margin-bottom:4px;}
.doc-bank{margin-top:4px;}
.doc-bank .bk-title{font-weight:700;font-size:12px;margin-bottom:0px;}
.doc-bank table td{padding:0;font-size:12px;border:none;}
.doc-bank table td{padding:0;font-size:12px;border:none;}
.doc-bank table td:nth-child(2){width:14px;padding:1px 4px;}
.doc-bank table td:last-child{font-weight:700;}
.doc-bank .bk-payable{font-size:11px;margin-top:0;color:#222;}
.doc-bank .bk-payable{font-size:11px;margin-top:0;color:#222;}
.doc-cancel{font-size:11.5px;color:#444;font-style:italic;margin-top:8px;}
.doc-cancel{font-size:11px;color:#444;font-style:italic;margin-top:0;}
.doc-sig{width:200px;}
.doc-sig-line{border-top:1px solid #1c1c1c;padding-top:5px;font-size:11.5px;font-weight:700;}
.pv-details{width:100%;border-collapse:collapse;margin:12px 0;}
.pv-details{border:1px solid #1c1c1c;border-collapse:collapse;width:100%;}.pv-details th{background:#1c1c1c;color:#fff;padding:7px 10px;font-size:12px;text-align:left;border:1px solid #1c1c1c;}
.pv-details td{padding:7px 10px;font-size:12px;border:1px solid #ccc;}
.pv-details td:last-child{text-align:right;font-weight:600;}
@media print{.sidebar,.topbar,.no-print{display:none!important;}body{background:#fff;}.main{margin:0;}.doc-wrap{max-width:100%;}.doc-ref-link{color:inherit!important;text-decoration:none!important;cursor:default!important;}}

/* ===== MOBILE RESPONSIVE (phone-width screens only — desktop above untouched) ===== */
.hamburger-btn{display:none;}
.sb-overlay{display:none;}
.d-lbl{display:none;}
@media (max-width:768px){
  body{font-size:9px;}
  .hamburger-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1.5px solid var(--bd);background:#fff;font-size:.9rem;cursor:pointer;margin-right:6px;flex-shrink:0;}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 24px rgba(0,0,0,.18);width:185px;}
  .sidebar.open{transform:translateX(0);}
  .sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;}
  .sb-overlay.open{display:block;}
  .main{margin-left:0;}
  .topbar{padding:7px 10px;}
  .topbar h2{font-size:1.25rem;}
  .topbar h2 span{font-size:1.25rem;}
  .content{padding:6px;}
  .stats{grid-template-columns:repeat(2,1fr)!important;gap:5px;}
  .db-grid{grid-template-columns:1fr!important;}
  .c2,.c3{grid-template-columns:1fr 1fr!important;gap:6px!important;}
  .fr{gap:6px!important;}
  .card{padding:6px!important;margin-bottom:7px!important;border-radius:8px!important;overflow-x:auto!important;}
  .card-title{font-size:.625rem!important;margin-bottom:6px!important;padding-bottom:5px!important;}
  .stat{padding:7px 8px!important;border-radius:8px!important;}
  .stat-lbl{font-size:.625rem!important;margin-bottom:2px!important;}
  .stat-val{font-size:.625rem!important;}
  .stat-sub{font-size:.625rem!important;}
  table{font-size:.5625rem;}
  table td{font-size:.5625rem!important;}
  table th,table td{padding:3px 4px!important;white-space:nowrap;}
  .btn{padding:5px 8px!important;font-size:.625rem!important;}
  .btn-sm{padding:4px 7px!important;font-size:.625rem!important;}
  input,select,textarea{font-size:.625rem!important;padding:5px 7px!important;}
  input[placeholder^="Search"]{flex:0 1 110px!important;min-width:90px!important;}
  table th{font-size:.46875rem!important;}

  /* Claims status tabs — the "(0)" count badge has its own inline font-size that
     was escaping the button's shrink rule, making it look bigger than the label text */
  #claims-tabs span{font-size:.625rem!important;}

  /* Credit Notes & Accounting notice banners are wrapped in an outer .card with the
     background color, but the actual text sits in a separate INNER div with its own
     font-size — so the earlier banner rule (which only matched the outer div) never
     reached this text. Targeting the inner div directly here. */
  .card[style*="background:#fff8e1"] > div,
  .card[style*="background:#f0f4ff"] > div{font-size:.625rem!important;line-height:1.35!important;}

  .d-lbl{display:flex;align-items:center;font-size:.625rem;color:var(--inkl);margin-right:-4px;}

  /* Filter bars (search / date-range / dropdowns / sort) — keep tight & wrapped together */
  div[style*="flex-wrap:wrap"]{gap:5px!important;margin-bottom:10px!important;}

  /* Prevent the page itself from ever needing horizontal scroll — only designated
     data-table containers (overflow-x:auto) should scroll sideways, nothing else */
  body{overflow-x:hidden;}
  .content{overflow-x:hidden;}

  /* ANY side-by-side two-column layout (Dashboard chart+snapshot, P&L summary+expenses,
     Bank details+balance, Balance Sheet assets/liabilities, etc.) stacks to one column.
     This catches every ratio used across the app (0.3fr/0.7fr, 1fr/1fr, 1.3fr/1fr, etc.)
     in one rule instead of chasing each page individually. .stats keeps its own 2-col rule below. */
  div[style*="grid-template-columns:"]:not(.stats){grid-template-columns:1fr!important;gap:8px!important;}
  .stats{grid-template-columns:repeat(2,1fr)!important;gap:5px!important;}
  #page-lalamove .stats,#page-pettycash .stats{grid-template-columns:repeat(3,1fr)!important;}

  /* Modals (Add Customer, Add Quotation, etc.) — never wider than the screen */
  .modal{max-width:100vw!important;width:100%!important;overflow-x:hidden!important;}

  /* Item table inside document forms (Quotation/Invoice/etc) — compact columns so it
     fits without forcing the whole modal to scroll sideways */
  .item-tbl{table-layout:fixed;width:100%;}
  .item-tbl th,.item-tbl td{padding:3px 2px!important;font-size:.625rem!important;}
  .item-tbl input,.item-tbl select{min-width:0!important;width:100%!important;padding:3px 2px!important;font-size:.625rem!important;}
  .item-tbl th:first-child,.item-tbl td:first-child{width:16px!important;}
  .item-tbl th:nth-child(2),.item-tbl td:nth-child(2){width:42px!important;}
  #th-unit{width:26px!important;}
  #th-price{width:42px!important;}
  #th-amt{width:46px!important;}
  .item-tbl th:last-child,.item-tbl td:last-child{width:34px!important;}

  /* P&L Monthly Summary card */
  #pl-summary-card{padding:8px 10px!important;}
  #pl-summary-card .card-title{font-size:.625rem!important;margin-bottom:5px!important;}
  #pl-summary-card td{padding:3px 0!important;font-size:.625rem!important;}
  #pl-summary-card tr:last-child td{font-size:.625rem!important;}

  /* Colored info/notice banners at top of pages (blue/green/yellow tip boxes) — still desktop-sized before this */
  div[style*="background:#f0f4ff"],
  div[style*="background:#e8f0ff"],
  div[style*="background:#e8f5ee"],
  div[style*="background:#fff8e8"],
  div[style*="background:#f5f2ed"]{font-size:.625rem!important;padding:6px 8px!important;line-height:1.35!important;}

  /* Item table headers were overflowing into the next column at tiny widths — let them wrap instead */
  .item-tbl th{white-space:normal!important;line-height:1.15!important;word-break:break-word;}


  #page-bank table td{font-size:.5625rem!important;padding:3px 0!important;}
  #page-bank .card-title{font-size:.625rem!important;}
  #bank-opening-display{font-size:.625rem!important;}
  #bank-closing{font-size:.625rem!important;}
  #page-bank span{font-size:.625rem!important;}
  #bank-total-in,#bank-total-out,#bank-computed{font-size:.625rem!important;}

  #acct-tab-journal,#acct-tab-bs{font-size:.625rem!important;padding:6px 10px!important;}

  /* Dashboard Company Letterhead — company name + logo (was still desktop-sized) */
  #dash-letterhead{padding:8px 10px!important;}
  #dash-co-name{font-size:.9375rem!important;}
  #dash-co-reg,#dash-co-addr,#dash-co-tel,#dash-co-email,#dash-co-website{font-size:.75rem!important;}
  #dash-logo{height:28px!important;}

  /* Settings page tiles */
  #page-settings .card{padding:8px 10px!important;}
  #page-settings span{font-size:.625rem!important;}

  /* Modals (Add Customer, Add Quotation, etc.) — less padding, tighter form fields */
  .modal{padding:14px 14px!important;border-radius:10px!important;}
  .modal-hd{font-size:.625rem!important;margin-bottom:10px!important;}
  .fg{gap:2px!important;margin-bottom:7px!important;}
  .fg label{font-size:.625rem!important;}

  .sb-logo{padding:10px 9px;}
  .sb-logo .brand{font-size:.875rem;}
  .sb-logo .sub{font-size:.625rem;}
  .sb-lbl{font-size:.625rem;}
  .nb{padding:5px 9px!important;font-size:.75rem!important;}
}


/* Scrollbar — slim & consistent across all scrollable areas */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.32);}
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent;}

@media print {
  .sidebar, .topbar, .overlay, .no-print, #pg-actions { display: none !important; }
  .main { margin: 0 !important; }
  .content { display: none !important; }
  #print-area { display: block !important; }
  body { background: #fff !important; }
}
#print-area { display: none; }

/* ---- Part 2: additions for the rebuild ---- */
a.nb { text-decoration: none; }
.sb-user { padding: 10px 14px 16px; border-top: 1px solid rgba(255,255,255,.06); margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-user-k { font-size: .62rem; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.sb-user-e { font-size: .72rem; color: rgba(255,255,255,.55); word-break: break-all; line-height: 1.3; }
.sb-user-r { font-size: .65rem; color: var(--or); font-weight: 600; margin-top: 2px; text-transform: capitalize; }
.sb-user-p { flex-shrink: 0; background: transparent; border: none; border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: all .15s; opacity: .7; text-decoration: none; }
.sb-user-p:hover { opacity: 1; }
.nb-out { color: rgba(255,100,100,.7); margin-top: 4px; }
.sb-sec form { margin: 0; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.btn-l { background: none; border: 1.5px solid transparent; color: var(--inkm); }
.btn-l:hover { color: var(--or); }
span.btn[aria-disabled] { opacity: .4; cursor: default; }
.fg .hint { font-size: .72rem; color: var(--inkl); }
.fg .err { font-size: .74rem; color: var(--rd); }

/* Messages */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: .84rem; }
.flash-ok { background: #e8f5ee; color: #1a7a49; border: 1px solid #bfe3cf; }
.flash-err { background: #fdecea; color: var(--rd); border: 1px solid #f5c6c0; }
.muted { color: var(--inkl); font-size: .78rem; }

/* Sign-in (as the back office's login screen) */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { background: #fff; border-radius: 16px; padding: 40px 36px; box-shadow: 0 4px 32px rgba(0,0,0,.10); width: 100%; max-width: 380px; }
.login-title { font-size: 1.35rem; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.login-sub { font-size: .82rem; color: #888; margin-bottom: 28px; }
.login-box label { font-size: .8rem; font-weight: 600; color: #444; display: block; margin-bottom: 5px; }
.login-box input { width: 100%; padding: 10px 13px; border: 1.5px solid #e0ddd8; border-radius: 8px; font-size: .9rem; margin-bottom: 14px; }
.login-box input:focus { outline: none; border-color: var(--or); }
.login-err { color: #e53e3e; font-size: .78rem; min-height: 18px; margin-bottom: 10px; }
.login-btn { width: 100%; padding: 11px; background: var(--or); color: #fff; border: none; border-radius: 8px; font-size: .92rem; font-weight: 600; cursor: pointer; }
.login-btn[disabled] { opacity: .6; cursor: wait; }
.login-dev { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--bd); font-size: .74rem; color: var(--inkl); }

/* Lists */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.toolbar input, .toolbar select { padding: 7px 11px; border: 1.5px solid var(--bd); border-radius: 7px; font: inherit; font-size: .84rem; background: #fff; }
.toolbar input[type=search] { flex: 1 1 240px; max-width: 360px; }
.toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--or); }
.card-flush { padding: 0; overflow-x: auto; }
.list td a { color: var(--ink); font-weight: 500; text-decoration: none; }
.list td a:hover { color: var(--or); }
.list td a.btn { font-weight: 500; }
.c-thumb { width: 60px; }
.c-thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bd); display: block; background: var(--cream); }
.c-act { text-align: right; white-space: nowrap; }
.c-act form { display: inline; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.upper { text-transform: uppercase; }
.nowrap { white-space: nowrap; }
.empty { text-align: center; padding: 30px; }
.list .badge { margin-left: 6px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pager > span:last-child { display: flex; align-items: center; gap: 10px; }

/* Editor: main column + side column */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.ed-side { position: sticky; top: 76px; }
.ed-side .card { padding: 16px; }
.ed-save { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ed-save .btn-p { background: var(--or); color: #fff; }
.ed-save .btn-p:hover { background: #c96a18; border-color: #c96a18; }
.card > .hint, p.hint { font-size: .74rem; color: var(--inkl); margin-bottom: 10px; }
.check { display: flex; align-items: center; gap: 8px; font-size: .84rem; padding: 3px 0; cursor: pointer; }
.check input { accent-color: var(--or); width: 15px; height: 15px; }
.check.sub { padding-left: 22px; }
.checks { max-height: 320px; overflow-y: auto; margin-bottom: 12px; padding-right: 4px; }
.card > .check { margin-bottom: 10px; }
.prefix { display: flex; align-items: stretch; border: 1.5px solid var(--bd); border-radius: 7px; overflow: hidden; }
.prefix:focus-within { border-color: var(--or); }
.prefix span { padding: 8px 0 8px 11px; color: var(--inkl); font-size: .86rem; background: var(--cream); }
.fg .prefix input { border: none; border-radius: 0; flex: 1; min-width: 0; padding-left: 2px; background: var(--cream); }
.err { font-size: .74rem; color: var(--rd); }

/* Photo galleries */
.gal-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; min-height: 8px; }
.gal-item { position: relative; width: 104px; height: 104px; border-radius: 8px; border: 1px solid var(--bd); background: var(--cream); overflow: hidden; }
.gal-item:first-child { outline: 2px solid var(--or); outline-offset: 1px; }
.gal-item:first-child::after { content: 'Main'; position: absolute; left: 4px; top: 4px; background: var(--or); color: #fff; font-size: .6rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.gal-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gal-tools { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; background: rgba(28,28,28,.72); opacity: 0; transition: opacity .15s; }
.gal-item:hover .gal-tools, .gal-item:focus-within .gal-tools { opacity: 1; }
.gal-tools button { flex: 1; background: none; border: none; color: #fff; font-size: 1rem; line-height: 1; padding: 5px 0; cursor: pointer; }
.gal-tools button:hover { background: var(--or); }
.gal-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gal-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gal-upload { position: relative; }
.gal-upload:focus-within { border-color: var(--or); color: var(--or); }
.gal-status { font-size: .76rem; color: var(--inkm); }

/* Repeatable rows */
.rows { margin-bottom: 10px; }
.opt { border: 1px solid var(--bd); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: #fdfcfa; }
.opt-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.opt .hint { font-size: .72rem; color: var(--inkl); margin-bottom: 8px; }
.row-tools { display: flex; gap: 2px; padding-top: 20px; }
.spec { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.spec .fg { margin-bottom: 8px; }
.spec .row-tools { padding-top: 4px; }
.swatch { display: flex; gap: 6px; }
.swatch input[type=color] { width: 38px; height: 36px; padding: 2px; border: 1.5px solid var(--bd); border-radius: 7px; background: #fff; cursor: pointer; flex: none; }
.swatch input[type=text], .swatch input:not([type]) { flex: 1; min-width: 0; }

/* Photo picker */
.picker { border: none; border-radius: 14px; padding: 18px; width: min(760px, calc(100vw - 32px)); box-shadow: var(--shl); margin: auto; }
.picker::backdrop { background: rgba(0,0,0,.4); }
.picker-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; font-size: .84rem; color: var(--inkl); }
.picker-item { aspect-ratio: 1; border: 2px solid var(--bd); border-radius: 8px; background: var(--cream); padding: 0; cursor: pointer; overflow: hidden; position: relative; }
.picker-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.picker-item:hover { border-color: var(--or); }
.picker-item.is-in { border-color: var(--gn); }
.picker-item.is-in::after { content: '✓'; position: absolute; right: 4px; top: 2px; color: var(--gn); font-weight: 700; }

@media (max-width: 1100px) {
    .ed { grid-template-columns: 1fr; }
    .ed-side { position: static; }
}
@media (max-width: 768px) {
    .opt-head, .spec { grid-template-columns: 1fr; }
    .row-tools { padding-top: 0; }
    .gal-tools { opacity: 1; }
    .sb-foot { display: none; }
}
.nb-soon { opacity: .35; cursor: not-allowed; }
.nb-soon:hover { background: none; color: rgba(255,255,255,.55); }

/* Save toast (the back office's _showSaveToast, as classes) */
.save-toast { position: fixed; bottom: 22px; right: 22px; background: #3d9a6e; color: #fff; padding: 9px 18px; border-radius: 8px; font-size: .8rem; font-family: "DM Sans", sans-serif; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,.18); display: flex; align-items: center; gap: 7px; transition: opacity .3s; }
.save-toast--error { background: #c0392b; }
.save-toast--sync { background: #2c6fad; }
.save-toast.is-leaving { opacity: 0; }

/* Searchable pickers (initFilterSearch) */
.pick { position: relative; }
.pick-box { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1.5px solid var(--bd); border-radius: 7px; max-height: 220px; overflow-y: auto; z-index: 600; box-shadow: var(--sh); }
.pick-row { padding: 8px 12px; font-size: .84rem; cursor: pointer; border-bottom: 1px solid #f0ece4; }
.pick-row:hover { background: #f5f2ed; }
.pick-row--all { color: var(--inkl); font-style: italic; }
.pick-empty { padding: 8px 12px; font-size: .84rem; color: var(--inkl); }

/* Sign-in pages added with the own sign-in (same look as the login box) */
.login-wide { max-width: 440px; }
.login-link { display: block; text-align: center; margin-top: 14px; font-size: .8rem; color: var(--inkm); }
.login-ok { color: var(--gn); background: rgba(61,154,110,.08); border-radius: 8px; padding: 9px 12px; font-size: .8rem; margin-bottom: 14px; }
.login-note { font-size: .76rem; color: var(--inkm); margin-top: 12px; line-height: 1.5; }
.login-code { font-size: 1.2rem !important; letter-spacing: .25em; text-align: center; }
.login-steps { font-size: .82rem; color: #444; padding-left: 18px; margin: 0 0 12px; line-height: 1.55; }
.login-steps li { margin-bottom: 10px; }
.login-qr { margin: 10px 0 4px; }
.login-qr svg { width: 180px; height: 180px; display: block; }
.login-key { display: inline-block; margin-top: 4px; font-size: .86rem; letter-spacing: .06em; background: var(--cream); padding: 3px 7px; border-radius: 6px; word-break: break-all; }
.login-codes { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.login-btn-a { display: block; text-align: center; text-decoration: none; margin-top: 18px; }

/* ---- Website section ---- */
.gal[data-single] .gal-item:first-child::after { content: none; }
.gal[data-single] .gal-item:first-child { outline: none; }
.gal[data-single] .gal-item { width: 180px; height: 110px; }
.gal[data-single].gal-sq .gal-item { width: 110px; }
.gal[data-single] [data-gal-move] { display: none; }
details.more { border-top: 1px solid var(--bd); margin-top: 12px; padding-top: 10px; }
details.more > summary { cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--inkm); list-style: none; }
details.more > summary::before { content: '▸ '; }
details.more[open] > summary::before { content: '▾ '; }
details.more[open] > summary { margin-bottom: 10px; }
.wlist { list-style: none; margin: 0; padding: 0; }
.wlist > li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f0ece4; }
.wlist > li:last-child { border-bottom: none; }
.wlist .w-thumb { width: 64px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid var(--bd); background: var(--cream); flex-shrink: 0; }
.wlist .w-main { flex: 1; min-width: 0; }
.wlist .w-main a, .wlist .w-main strong { font-weight: 600; color: var(--ink); text-decoration: none; }
.wlist .w-sub { font-size: .76rem; color: var(--inkl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlist .w-sub-li { padding-left: 34px; }
.wlist .w-act { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.wlist .w-act form { display: inline; }
.w-move { background: none; border: 1px solid var(--bd); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; color: var(--inkm); line-height: 1; }
.w-move:hover:not(:disabled) { border-color: var(--or); color: var(--or); }
.w-move:disabled { opacity: .3; cursor: default; }
.w-group { font-family: 'Crimson Pro', serif; font-size: 1.05rem; font-weight: 600; margin: 18px 0 8px; }
.w-group:first-child { margin-top: 0; }
.stage { position: relative; width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--bd); background: var(--cream) center / cover no-repeat; }
.stage img.stage-layer { position: absolute; display: block; height: auto; pointer-events: none; }
.file-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.file-box a { font-size: .84rem; word-break: break-all; }
.enq-items { width: 100%; border-collapse: collapse; font-size: .82rem; }
.enq-items th, .enq-items td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #f0ece4; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: .85rem; margin-bottom: 12px; }
.kv dt { color: var(--inkm); }
.kv dd { margin: 0; word-break: break-word; }

/* ---- Website section kit (public/js/web/cms.js): lists, drag handles, popups ---- */
.cms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.cms-head:not(:first-child) { margin-top: 26px; }
.cms-head h3 { font-family: 'Crimson Pro', serif; font-size: 1.12rem; font-weight: 600; }
.cms-head p { font-size: .76rem; color: var(--inkl); margin-top: 2px; }
.cms-list { background: #fff; border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--sh); overflow: hidden; }
.cms-item { display: flex; align-items: center; gap: 6px; padding: 8px 12px 8px 6px; border-bottom: 1px solid #f0ece4; background: #fff; }
.cms-item:last-child { border-bottom: none; }
.cms-item:hover { background: #fdfbf8; }
.cms-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 2px 4px; text-align: left; cursor: pointer; font: inherit; color: inherit; border-radius: 8px; }
.cms-item-main:focus-visible { outline: 2px solid var(--or); }
.cms-item-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cms-item-title { font-weight: 600; font-size: .88rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cms-item-main:hover .cms-item-title { color: var(--or); }
.cms-item-sub { font-size: .75rem; color: var(--inkl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-item-act { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.cms-thumb { width: 72px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bd); background: var(--cream); flex-shrink: 0; display: block; }
.cms-thumb.is-sq { width: 44px; object-fit: contain; }
.cms-thumb.is-none { background: repeating-linear-gradient(45deg, #f5f2ed, #f5f2ed 6px, #fbf9f5 6px, #fbf9f5 12px); }
.cms-empty { padding: 26px; text-align: center; color: var(--inkl); font-size: .84rem; }
.cms-grip { flex-shrink: 0; width: 26px; height: 34px; border: none; background: none; color: #b9b2a7; font-size: 1.1rem; cursor: grab; border-radius: 6px; touch-action: none; display: inline-flex; align-items: center; justify-content: center; }
.cms-grip:hover, .cms-grip:focus-visible { color: var(--or); background: #fff4ea; outline: none; }
.is-sorting, .is-sorting * { cursor: grabbing !important; user-select: none; }
.is-dragging { opacity: .55; background: #fff4ea !important; box-shadow: inset 3px 0 0 var(--or); }
.cms-sub { margin: 0 0 0 38px; border-left: 2px solid #f0ece4; }
.cms-sub .cms-item { padding-top: 6px; padding-bottom: 6px; }
.cms-sub .cms-item-title { font-weight: 500; }
.cms-sub-add { margin: 2px 0 8px 46px; }
.btn-add { background: none; border: none; color: var(--or); font-size: .78rem; font-weight: 600; cursor: pointer; padding: 4px 6px; font-family: inherit; }
.btn-add:hover { text-decoration: underline; }
.cms-group { border-bottom: 1px solid #ebe6de; }
.cms-group:last-child { border-bottom: none; }
.cms-group > .cms-item { border-bottom: none; }
.cms-btn-save { background: var(--or); color: #fff; border: 1.5px solid var(--or); }
.cms-btn-save:hover { background: #c96a18; border-color: #c96a18; }
.cms-btn-save:disabled { opacity: .6; cursor: wait; }
.cms-btn-del { background: none; color: var(--rd); border: 1.5px solid #e8b4b4; }
.cms-btn-del:hover { background: #fdecea; }
.cms-orderbar { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); background: #2c2a26; color: #fff; border-radius: 12px; padding: 10px 12px 10px 18px; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 450; transition: transform .2s ease; max-width: calc(100vw - 24px); }
.cms-orderbar.open { transform: translate(-50%, 0); }
.cms-orderbar-t { font-size: .82rem; }
.cms-orderbar .btn-o { color: #fff; border-color: rgba(255,255,255,.35); }
.cms-orderbar .btn-o:hover { color: #fff; border-color: #fff; }

/* Popups */
.cms-modal { padding: 0; display: flex; flex-direction: column; max-width: 620px; overflow: hidden; }
.cms-modal.cms-wide { max-width: 980px; height: 94vh; }
.cms-modal > .modal-hd { padding: 20px 26px 0; margin-bottom: 12px; }
.cms-top-note { padding: 0 26px; margin-top: -6px; }
.cms-tabs { display: flex; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--bd); overflow-x: auto; flex-shrink: 0; }
.cms-tab { background: none; border: none; border-bottom: 2.5px solid transparent; padding: 9px 12px; font: inherit; font-size: .84rem; color: var(--inkm); cursor: pointer; white-space: nowrap; }
.cms-tab:hover { color: var(--or); }
.cms-tab.is-on { color: var(--or); border-bottom-color: var(--or); font-weight: 600; }
.cms-body { padding: 16px 26px 8px; overflow-y: auto; flex: 1; min-height: 0; }
.cms-err { margin: 10px 26px 0; }
.cms-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 26px; border-top: 1px solid var(--bd); background: #fcfbf9; flex-shrink: 0; }
.cms-foot-r { display: flex; gap: 8px; margin-left: auto; }
.overlay.cms-ov .modal:not(.cms-modal) .cms-foot { margin: 16px -30px -26px; padding: 14px 30px; }
.cms-form { display: block; }
.cms-form.fr { display: grid; }
.cms-note { margin: -2px 0 12px; }
.cms-more { margin-bottom: 8px; }
.cms-f .err:empty { display: none; }
.cms-toggle { margin-bottom: 14px; }
.cms-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .86rem; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--ink) !important; }
.cms-sw-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cms-sw-ui { width: 36px; height: 20px; border-radius: 20px; background: #d9d3ca; position: relative; transition: background .15s; flex-shrink: 0; }
.cms-sw-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.cms-sw-in:checked + .cms-sw-ui { background: var(--gn); }
.cms-sw-in:checked + .cms-sw-ui::after { transform: translateX(16px); }
.cms-sw-in:focus-visible + .cms-sw-ui { outline: 2px solid var(--or); outline-offset: 2px; }
.cms-checks { max-height: 260px; overflow-y: auto; border: 1.5px solid var(--bd); border-radius: 8px; padding: 6px 10px; }
.cms-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cms-img-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cms-img { width: 240px; aspect-ratio: 2 / 1; border: 1.5px dashed var(--bd); border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cms-img.is-sq { width: 120px; aspect-ratio: 1; }
.cms-img.is-small { width: 90px; }
.cms-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cms-img-empty { font-size: .74rem; color: var(--inkl); padding: 8px; text-align: center; }
.cms-img.is-drop, .cms-gal.is-drop, .cms-filebox.is-drop { border-color: var(--or); background: #fff4ea; }
.cms-img-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cms-filebox { border: 1.5px dashed var(--bd); border-radius: 10px; padding: 10px 12px; }
.cms-pdf { font-size: 1.3rem; }
.cms-gal { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; margin: 0 0 10px; border: 1.5px dashed var(--bd); border-radius: 10px; min-height: 60px; }
.cms-gal-i { position: relative; width: 104px; height: 104px; border-radius: 8px; border: 1px solid var(--bd); background: var(--cream); overflow: hidden; }
.cms-gal-i img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.cms-gal:not(.no-main) .cms-gal-i:first-child { outline: 2px solid var(--or); outline-offset: 1px; }
.cms-gal:not(.no-main) .cms-gal-i:first-child::after { content: 'Main'; position: absolute; left: 4px; top: 4px; background: var(--or); color: #fff; font-size: .6rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; pointer-events: none; }
.cms-gal-grip { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: none !important; }
.cms-gal-grip:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; }
.cms-gal-x { position: absolute; right: 4px; top: 4px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(28,28,28,.7); color: #fff; cursor: pointer; font-size: .9rem; line-height: 1; }
.cms-gal-x:hover { background: var(--rd); }
.cms-gal-empty { font-size: .78rem; color: var(--inkl); padding: 10px; }
.cms-rows { display: flex; flex-direction: column; gap: 8px; }
.cms-row { display: flex; align-items: flex-start; gap: 6px; border: 1px solid var(--bd); border-radius: 10px; padding: 10px 8px 2px 4px; background: #fdfcfa; }
.cms-row-body { flex: 1; min-width: 0; }
.cms-row .fg { margin-bottom: 8px; }
.cms-row.is-compact { padding-top: 6px; }
.cms-row.is-compact .fg label { display: none; }
.cms-row-x { background: none; border: none; color: var(--inkl); font-size: 1.2rem; cursor: pointer; width: 28px; height: 30px; border-radius: 6px; flex-shrink: 0; }
.cms-row-x:hover { color: var(--rd); background: #fdecea; }
.cms-section { background: #fff; border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--sh); padding: 16px 18px; margin-bottom: 16px; }
.cms-section-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cms-section-hd h3 { font-family: 'Crimson Pro', serif; font-size: 1.08rem; font-weight: 600; }
.cms-section-hd p { font-size: .76rem; color: var(--inkl); margin-top: 2px; }
.cms-section .cms-list { box-shadow: none; }
.cms-kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: .84rem; }
.cms-kv dt { color: var(--inkl); }
.cms-kv dd { margin: 0; white-space: pre-line; word-break: break-word; }
.cms-kv .is-empty { color: #c0b8ad; font-style: italic; }
.cms-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.cms-pill { border: 1.5px solid var(--bd); background: #fff; border-radius: 20px; padding: 6px 14px; font: inherit; font-size: .82rem; cursor: pointer; color: var(--inkm); }
.cms-pill:hover { border-color: var(--or); color: var(--or); }
.cms-pill.is-on { background: var(--or); border-color: var(--or); color: #fff; font-weight: 600; }
@media (max-width: 768px) {
    .cms-modal, .cms-modal.cms-wide { height: 100vh; max-height: 100vh; border-radius: 0 !important; padding: 0 !important; }
    .cms-body { padding: 12px 14px; }
    .cms-foot { padding: 12px 14px; }
    .cms-modal > .modal-hd { padding: 14px 14px 0; font-size: 1.1rem !important; }
    .cms-item-act .btn { display: none; }
    .cms-sub { margin-left: 18px; }
    .cms-kv { grid-template-columns: 1fr; }
    .cms-orderbar { flex-wrap: wrap; }
}
.fg label.btn, .cms-f label.btn { text-transform: none; letter-spacing: 0; font-size: .76rem; font-weight: 500; color: var(--inkm); }
.cms-orderbar .btn { white-space: nowrap; }
@media (min-width: 769px) { .cms-orderbar { left: calc(50% + 112px); } }
.cms-banners .cms-thumb { width: 132px; height: 62px; }
.cms-stage { position: relative; width: 100%; overflow: hidden; border-radius: 10px; border: 1px solid var(--bd); background: var(--cream) center / cover no-repeat; touch-action: none; user-select: none; }
.cms-layer { position: absolute; cursor: move; outline: 1px dashed rgba(224,120,32,.0); }
.cms-layer:hover { outline-color: rgba(224,120,32,.6); }
.cms-layer.is-sel { outline: 2px solid var(--or); }
.cms-layer img { width: 100%; height: auto; display: block; pointer-events: none; }
.cms-layer-rs { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--or); cursor: nwse-resize; display: none; }
.cms-layer.is-sel .cms-layer-rs, .cms-layer:hover .cms-layer-rs { display: block; }
.cms-row.is-layer { align-items: center; padding: 6px 8px 6px 4px; }
.cms-row.is-layer .cms-thumb { cursor: pointer; }
.cms-row.is-sel { border-color: var(--or); background: #fff8f1; }
.cms-layer-opts { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cms-mini { font-size: .8rem; color: var(--inkm); display: inline-flex; gap: 6px; align-items: center; }
.cms-mini select { padding: 5px 8px; border: 1.5px solid var(--bd); border-radius: 7px; font: inherit; font-size: .8rem; background: #fff; }
.fg label.cms-mini { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .8rem; }
.cms-mini-stage { position: relative; overflow: hidden; background: var(--cream) center / cover no-repeat; }
.cms-mini-stage img { position: absolute; height: auto; display: block; }
.cms-pick-bar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.cms-search { flex: 1; padding: 8px 12px; border: 1.5px solid var(--bd); border-radius: 8px; font: inherit; font-size: .86rem; }
.cms-search:focus { outline: none; border-color: var(--or); }
.cms-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cms-pick-i { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 2px solid var(--bd); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font: inherit; }
.cms-pick-i:hover { border-color: var(--orl); }
.cms-pick-i.is-on { border-color: var(--gn); background: #f1faf5; }
.cms-pick-i.is-on::after { content: '✓'; position: absolute; right: 8px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--gn); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; }
.cms-pick-i img, .cms-pick-i .cms-thumb { width: 100%; height: 100px; object-fit: contain; background: var(--cream); border-radius: 6px; }
.cms-pick-n { font-size: .78rem; font-weight: 600; line-height: 1.3; }
.cms-pick-s { font-size: .7rem; color: var(--inkl); }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; }
.link-btn:hover { color: var(--or); }
.fg .cms-checks label.check { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .84rem; color: var(--ink); }
.fg .cms-checks label.check:not(.sub) { font-weight: 600; }
.cms-checks { columns: 3 200px; column-gap: 18px; max-height: 300px; }
.cms-checks .check { break-inside: avoid; }
/* Categories: a main category's sub-categories fold away. */
.cms-fold { display: inline-flex; align-items: center; gap: 6px; background: #f5f2ed; border: 1px solid var(--bd); border-radius: 20px; padding: 4px 10px 4px 12px; font: inherit; font-size: .76rem; color: var(--inkm); cursor: pointer; white-space: nowrap; }
.cms-fold:hover { border-color: var(--or); color: var(--or); }
.cms-fold-i { display: inline-block; transition: transform .15s; transform: rotate(-90deg); }
.cms-group.is-open .cms-fold { background: #fff4ea; border-color: var(--orl); color: var(--or); }
.cms-group.is-open .cms-fold-i { transform: none; }
.cms-subwrap { display: none; padding-bottom: 4px; }
.cms-group.is-open .cms-subwrap { display: block; }
@media (max-width: 768px) { .cms-item-act .cms-fold { display: inline-flex; } }
/* Colour picker */
.cms-color { display: flex; align-items: center; gap: 10px; }
.cms-color input[type=color] { width: 46px; height: 36px; padding: 2px; border: 1.5px solid var(--bd); border-radius: 8px; background: #fff; cursor: pointer; }
.cms-color-code { font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: var(--inkm); min-width: 150px; }
.cms-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); vertical-align: -4px; margin-right: 6px; }
/* Formatted text */
.cms-rt { border: 1.5px solid var(--bd); border-radius: 8px; background: #fff; overflow: hidden; }
.cms-rt:focus-within { border-color: var(--or); }
.cms-rt-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; background: #faf9f6; border-bottom: 1px solid var(--bd); }
.cms-rt-b { background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 9px; font: inherit; font-size: .78rem; color: var(--inkm); cursor: pointer; }
.cms-rt-b:hover { border-color: var(--bd); background: #fff; color: var(--or); }
.cms-rt-b.is-b { font-weight: 700; } .cms-rt-b.is-i { font-style: italic; } .cms-rt-b.is-u { text-decoration: underline; }
.cms-rt-area { min-height: 150px; max-height: 360px; overflow-y: auto; padding: 10px 12px; font-size: .88rem; line-height: 1.55; outline: none; }
.cms-rt-area ul, .cms-rt-area ol { padding-left: 22px; margin: 4px 0; }
.cms-rt-area p { margin: 0 0 8px; }
.cms-rt-area a { color: var(--bl); }
/* Google preview */
.cms-serp { border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; background: #fff; font-family: Arial, sans-serif; max-width: 600px; }
.cms-serp-u { font-size: 12px; color: #202124; margin-bottom: 3px; }
.cms-serp-t { font-size: 18px; color: #1a0dab; line-height: 1.3; margin-bottom: 3px; }
.cms-serp-d { font-size: 13px; color: #4d5156; line-height: 1.5; }
.cms-serp-w { font-size: .74rem; color: #b26a00; margin-top: 4px; }
.cms-serp-w:empty { display: none; }
/* Cropping */
.cms-crop-area { position: relative; display: inline-block; max-width: 100%; user-select: none; touch-action: none; background: #222; border-radius: 8px; overflow: hidden; }
.cms-crop-area > img { display: block; max-width: 100%; max-height: 60vh; }
.cms-crop-frame { position: absolute; box-shadow: 0 0 0 9999px rgba(0,0,0,.55); outline: 2px solid #fff; cursor: move; }
.cms-crop-h { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--or); border-radius: 50%; }
.cms-crop-h.is-nw { left: -8px; top: -8px; cursor: nwse-resize; } .cms-crop-h.is-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.cms-crop-h.is-ne { right: -8px; top: -8px; cursor: nesw-resize; } .cms-crop-h.is-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
/* Switches lists */
.cms-switches { display: flex; flex-direction: column; }
.cms-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #f0ece4; }
.cms-switch:last-child { border-bottom: none; }
.cms-switch-t { font-size: .86rem; font-weight: 500; }
.cms-switch-h { font-size: .74rem; color: var(--inkl); }

/* ---- Product Listings ---- */
.pl-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd); margin-bottom: 14px; overflow-x: auto; }
.pl-tab { background: none; border: none; border-bottom: 2.5px solid transparent; padding: 9px 14px; font: inherit; font-size: .84rem; color: var(--inkm); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.pl-tab:hover { color: var(--ink); }
.pl-tab.is-on { color: var(--ink); font-weight: 600; border-bottom-color: var(--or); }
.pl-tab-n { background: #f0ece4; color: var(--inkm); border-radius: 20px; padding: 1px 8px; font-size: .7rem; font-weight: 600; }
.pl-tab.is-on .pl-tab-n { background: #fff0e6; color: var(--or); }
.pl-tab.is-warn .pl-tab-n { background: #fdf3dc; color: #a66b00; }
.pl-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pl-search { flex: 1 1 260px; max-width: 380px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--bd); border-radius: 9px; padding: 0 12px; }
.pl-search:focus-within { border-color: var(--or); }
.pl-search span { color: var(--inkl); font-size: 1.05rem; }
.pl-search input { border: none; outline: none; padding: 9px 0; font: inherit; font-size: .86rem; width: 100%; background: none; }
.pl-bar select { padding: 8px 30px 8px 11px; border: 1.5px solid var(--bd); border-radius: 9px; font: inherit; font-size: .84rem; background: #fff; color: var(--ink); max-width: 210px; }
.pl-bar select:focus { outline: none; border-color: var(--or); }
.pl-count { margin-left: auto; font-size: .78rem; color: var(--inkl); }
.pl-card { background: #fff; border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--sh); overflow-x: auto; }
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table th { background: #faf9f6; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--inkl); padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bd); white-space: nowrap; }
.pl-table td { padding: 10px 12px; border-bottom: 1px solid #f2eee7; font-size: .84rem; vertical-align: middle; }
.pl-table tr:last-child td { border-bottom: none; }
.pl-table tbody tr { transition: background .1s; }
.pl-table tbody tr:hover td { background: #fdfbf8; }
.pl-table tbody tr.is-sel td { background: #fff7ef; }
.pl-table tbody tr.is-off .pl-name, .pl-table tbody tr.is-off .pl-img { opacity: .55; }
.pl-c-check { width: 38px; }
.pl-c-check input, .pl-table td input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--or); cursor: pointer; }
.pl-c-cat { width: 18%; }
.pl-c-price { width: 13%; white-space: nowrap; }
.pl-c-on { width: 110px; }
.pl-c-act { width: 1%; white-space: nowrap; text-align: right; }
.pl-prod { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.pl-img { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--bd); background: var(--cream); object-fit: contain; flex-shrink: 0; }
.pl-img.is-none { display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--inkl); text-align: center; line-height: 1.1; }
.pl-name { font-weight: 600; color: var(--ink); line-height: 1.3; }
.pl-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: .74rem; color: var(--inkl); }
.pl-sku { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; }
.pl-lbl { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; color: #fff; }
.pl-lbl.is-hot { background: #f94429; } .pl-lbl.is-new { background: #e0a800; }
.pl-warn { color: #a66b00; font-size: .72rem; }
.pl-muted { color: var(--inkl); }
.pl-act { display: inline-flex; gap: 6px; }
.pl-empty { text-align: center; padding: 40px 20px; color: var(--inkl); }
.pl-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 70px; font-size: .8rem; color: var(--inkm); }
.pl-pager[hidden] { display: none; }
.pl-bulk { position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 160%); background: #2c2a26; color: #fff; border-radius: 12px; padding: 8px 10px 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 440; transition: transform .2s ease; max-width: calc(100vw - 24px); }
.pl-bulk.open { transform: translate(-50%, 0); }
.pl-bulk-n { font-size: .82rem; font-weight: 600; margin-right: 6px; }
.pl-bulk .btn { color: #fff; border: 1.5px solid rgba(255,255,255,.28); background: none; white-space: nowrap; }
.pl-bulk .btn:hover { border-color: #fff; }
.pl-bulk .btn.is-danger:hover { background: var(--rd); border-color: var(--rd); }
@media (min-width: 769px) { .pl-bulk { left: calc(50% + 112px); } }
@media (max-width: 768px) {
    .pl-c-cat, .pl-table td.pl-c-cat { display: none; }
    .pl-prod { min-width: 0; }
    .pl-count { width: 100%; margin-left: 0; }
}
/* Chips picker */
.cms-chips-wrap { position: relative; border: 1.5px solid var(--bd); border-radius: 8px; background: #fff; padding: 6px; }
.cms-chips-wrap:focus-within { border-color: var(--or); }
.cms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cms-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff0e6; color: #a8530f; border: 1px solid #f5c9a3; border-radius: 20px; padding: 3px 4px 3px 10px; font-size: .78rem; font-weight: 500; }
.cms-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: .95rem; line-height: 1; width: 18px; height: 18px; border-radius: 50%; }
.cms-chip button:hover { background: #f5c9a3; }
.cms-chips-none { font-size: .76rem; color: var(--inkl); padding: 3px 2px; }
.fg .cms-chips-in { border: none !important; padding: 5px 4px !important; width: 100%; }
.cms-chips-list { position: absolute; left: -1.5px; right: -1.5px; top: 100%; margin-top: 4px; background: #fff; border: 1.5px solid var(--bd); border-radius: 8px; box-shadow: var(--shl); max-height: 240px; overflow-y: auto; z-index: 30; padding: 4px; }
.cms-chips-opt { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 7px 10px; font: inherit; font-size: .84rem; cursor: pointer; color: var(--ink); }
.cms-chips-opt:hover, .cms-chips-opt.is-first { background: #f5f2ed; }
.cms-chips-empty { padding: 8px 10px; font-size: .8rem; color: var(--inkl); }
/* Popup side panel */
.cms-body.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; align-items: start; }
.cms-aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.cms-aside-h { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--inkm); margin-bottom: 6px; }
.cms-check-list { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.cms-check-list li { display: flex; gap: 8px; padding: 4px 0; color: var(--inkm); }
.cms-check-list li::before { content: '○'; color: #c9a25c; font-weight: 700; width: 14px; flex-shrink: 0; }
.cms-check-list li.is-ok { color: var(--inkl); }
.cms-check-list li.is-ok::before { content: '✓'; color: var(--gn); }
/* Product card preview (as the website's card) */
.pv-card { background: #fff; border: 1px solid var(--bd); border-radius: 10px; padding: 12px; text-align: center; }
.pv-thumb { position: relative; aspect-ratio: 1; background: #f7f7f7; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pv-thumb .pv-none { font-size: .72rem; color: #aaa; }
.pv-badge { position: absolute; top: 0; left: 0; color: #fff; font: 700 11px/1 Roboto, sans-serif; padding: 6px 9px; text-transform: none; }
.pv-badge.is-hot { background: #f94429; } .pv-badge.is-new { background: #f9d329; }
.pv-sku { font: 700 15px/1.5 Roboto, 'DM Sans', sans-serif; margin-top: 10px; color: #000; }
.pv-name { font: 12px/1.5 Lato, 'DM Sans', sans-serif; color: #202020; margin-top: 2px; }
.pv-price { font: 14px/1.5 Roboto, 'DM Sans', sans-serif; color: #f69468; margin-top: 4px; }
.pv-hidden { font-size: .72rem; color: var(--rd); margin-top: 6px; }
.cms-erp { background: #faf9f6; border: 1px dashed var(--bd); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
@media (max-width: 900px) {
    .cms-body.has-aside { grid-template-columns: 1fr; }
    .cms-aside { position: static; order: -1; }
    .cms-aside .pv-card { display: none; }
}
.pl-bar [hidden] { display: none; }
.cms-erp-in { width: 100%; padding: 8px 11px; border: 1.5px solid var(--bd); border-radius: 7px; font: inherit; font-size: .86rem; background: #fff; }
.cms-erp-in:focus { outline: none; border-color: var(--or); }
@media (min-width: 900px) { .pl-bulk { flex-wrap: nowrap; } }
/* The Website section's message boxes (CMS.confirm / alert / prompt) */
.cms-dlg-ov { position: fixed; inset: 0; background: rgba(28,24,20,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 900; padding: 16px; animation: cmsFade .15s ease; }
.cms-dlg { position: relative; background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.04); width: 100%; max-width: 430px; padding: 30px 28px 24px; text-align: center; animation: cmsPop .18s cubic-bezier(.2,.9,.3,1.2); }
.cms-dlg-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: none; background: none; border-radius: 50%; color: var(--inkl); font-size: .95rem; cursor: pointer; }
.cms-dlg-x:hover { background: #f5f2ed; color: var(--ink); }
.cms-dlg-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(224,120,32,.07); background: #fff0e6; color: var(--or); }
.cms-dlg-icon svg { width: 26px; height: 26px; }
.cms-dlg-icon.is-danger { background: #fdecea; color: var(--rd); box-shadow: 0 0 0 8px rgba(192,57,43,.07); }
.cms-dlg-icon.is-info { background: #eaf2fb; color: var(--bl); box-shadow: 0 0 0 8px rgba(44,111,173,.07); }
.cms-dlg-t { font-family: 'Crimson Pro', serif; font-size: 1.3rem; font-weight: 700; color: var(--ink); line-height: 1.25; }
.cms-dlg-m { font-size: .87rem; color: var(--inkm); line-height: 1.55; white-space: pre-line; margin-top: 8px; }
.cms-dlg-in { width: 100%; margin-top: 16px; padding: 10px 13px; border: 1.5px solid var(--bd); border-radius: 10px; font: inherit; font-size: .9rem; text-align: left; }
.cms-dlg-in:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(224,120,32,.12); }
.cms-dlg-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.cms-dlg-foot.is-one { grid-template-columns: 1fr; }
.cms-dlg-foot .btn { padding: 10px 14px; font-size: .86rem; font-weight: 600; border-radius: 10px; }
.cms-dlg-foot .btn-o { color: var(--ink); }
.cms-btn-danger { background: var(--rd); color: #fff; border: 1.5px solid var(--rd); }
.cms-btn-danger:hover { background: #a93226; border-color: #a93226; }
@keyframes cmsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmsPop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
/* The scroll bar's space is always kept, so nothing shifts sideways when a page grows long enough
   to scroll, when a popup opens (the page behind stops scrolling) or when a popup's tab changes. */
html { scrollbar-gutter: stable; }
.modal, .cms-body, .cms-checks, .cms-chips-list, .cms-rt-area, .picker-grid { scrollbar-gutter: stable; }
/* Product specifications: fixed titles, values only */
.cms-specs { border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.cms-spec { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-bottom: 1px solid #f0ece4; }
.cms-spec:last-child { border-bottom: none; }
.cms-spec-l { background: #faf9f6; padding: 10px 14px; font-size: .82rem; font-weight: 600; color: var(--ink); border-right: 1px solid #f0ece4; display: flex; align-items: flex-start; }
.fg .cms-spec textarea { border: none; border-radius: 0; padding: 10px 14px; min-height: 44px; resize: vertical; font-size: .86rem; }
.fg .cms-spec textarea:focus { background: #fffaf5; }
@media (max-width: 600px) { .cms-spec { grid-template-columns: 1fr; } .cms-spec-l { border-right: none; padding-bottom: 2px; } }
/* One-click choices (categories, tags) and None/New/Hot */
.cms-pk-wrap { border: 1.5px solid var(--bd); border-radius: 10px; background: #fff; }
.cms-pk-top { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #f0ece4; background: #fcfbf9; border-radius: 10px 10px 0 0; flex-wrap: wrap; }
.cms-pk-sum { flex: 1; min-width: 200px; font-size: .8rem; color: var(--ink); line-height: 1.5; }
.cms-pk-n { color: var(--inkl); font-weight: 600; }
.cms-pk-none { color: var(--inkl); }
.cms-pk-sum .btn-add { margin-left: 6px; font-size: .74rem; }
.fg .cms-pk-q { width: 190px; padding: 6px 10px; border: 1.5px solid var(--bd); border-radius: 8px; font-size: .8rem; }
.cms-pk { padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; max-height: 290px; overflow-y: auto; }
.cms-pk.is-flat { display: flex; flex-wrap: wrap; gap: 8px; max-height: none; }
.cms-pk-g { border: 1px solid #f0ece4; border-radius: 9px; padding: 8px; background: #fdfcfa; }
.cms-pk-g[hidden] { display: none; }
.cms-pk-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.cms-pk-b { display: inline-flex; align-items: center; gap: 5px; border: 1.5px solid var(--bd); background: #fff; color: var(--inkm); border-radius: 20px; padding: 5px 12px; font: inherit; font-size: .8rem; cursor: pointer; transition: all .12s; }
.cms-pk-b:hover { border-color: var(--orl); color: var(--ink); }
.cms-pk-b.is-main { font-weight: 700; color: var(--ink); }
.cms-pk-tick { display: none; font-size: .72rem; }
.cms-pk-b.is-on { background: var(--or); border-color: var(--or); color: #fff; }
.cms-pk-b.is-on .cms-pk-tick { display: inline; }
.cms-seg { display: inline-flex; border: 1.5px solid var(--bd); border-radius: 10px; overflow: hidden; background: #fff; }
.cms-seg-b { border: none; background: none; padding: 8px 20px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--inkm); cursor: pointer; border-right: 1px solid var(--bd); }
.cms-seg-b:last-child { border-right: none; }
.cms-seg-b:hover { background: #faf7f2; }
.cms-seg-b.is-on { background: var(--ink); color: #fff; }
.cms-seg-b.is-new.is-on { background: #f9d329; color: #fff; }
.cms-seg-b.is-hot.is-on { background: #f94429; color: #fff; }
.cms-seg { align-self: flex-start; }
/* ---- Card-page popups (product editor) ---- */
.cms-modal.cms-wide.cms-product { max-width: 1180px; }
.cms-product .cms-body { background: #f6f4f0; }
.cms-body.cms-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; padding: 18px 22px; }
.cms-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cms-col-side { position: sticky; top: 0; }
.cms-card { background: #fff; border: 1px solid #e9e4dc; border-radius: 12px; padding: 16px 18px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cms-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cms-card-hd h4 { font-size: .9rem; font-weight: 700; color: var(--ink); font-family: 'DM Sans', sans-serif; }
.cms-card-hint { font-size: .76rem; color: var(--inkl); margin: -6px 0 12px; line-height: 1.45; }
.cms-card.is-fold { padding-bottom: 10px; }
.cms-card.is-fold > summary { list-style: none; cursor: pointer; margin-bottom: 0; }
.cms-card.is-fold > summary::-webkit-details-marker { display: none; }
.cms-card.is-fold[open] > summary { margin-bottom: 12px; }
.cms-card-more { font-size: .78rem; color: var(--or); font-weight: 600; }
.cms-card.is-fold[open] .cms-card-more { visibility: hidden; }
.cms-card .fg label { font-size: .7rem; }
.cms-card .cms-toggle { margin-bottom: 10px; }
.cms-col-side .cms-card { padding: 14px 16px 4px; }
.cms-col-side .fg input, .cms-col-side .fg select { width: 100%; }
.cms-col-side .cms-pk.is-flat { padding: 0; }
.cms-col-side .cms-pk-wrap { border: none; }
.cms-col-side .cms-pk-top { display: none; }
.cms-col-side .cms-seg { align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); }
.cms-col-side .cms-seg-b { padding: 7px 0; }
.cms-live { margin-bottom: 12px; }
.cms-pl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cms-pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cms-progress { height: 6px; background: #efebe4; border-radius: 6px; overflow: hidden; }
.cms-progress span { display: block; height: 100%; background: var(--gn); border-radius: 6px; transition: width .2s; }
.cms-progress-t { font-size: .74rem; color: var(--inkl); margin: 5px 0 6px; }
.pv-card.is-off { opacity: .6; }
.cms-modal-pick { max-width: 760px; }
.cms-modal-pick .cms-pk { max-height: 52vh; }
@media (max-width: 960px) {
    .cms-body.cms-layout { grid-template-columns: 1fr; }
    .cms-col-side { position: static; order: -1; }
}
.cms-col-side { position: static; }
.cms-col-side .pv-card { padding: 10px; }
.cms-col-side .pv-thumb { max-width: 150px; margin: 0 auto; }
.cms-product .cms-gal-i { width: 86px; height: 86px; }
.cms-product .cms-rows .cms-gal { padding: 8px; gap: 8px; }
.cms-product .cms-rows .cms-gal-i { width: 72px; height: 72px; }