/* ==========================================================================
   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:var(--sbw,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;}
/* Section titles fold their section away; a small arrow shows which way. Searching shows every section. */
button.sb-lbl{display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;background:none;border:0;border-radius:4px;font-family:inherit;font-weight:inherit;text-align:left;cursor:pointer;line-height:1.6;}
button.sb-lbl:hover{color:#fff;}
button.sb-lbl:focus-visible{outline:2px solid var(--or);outline-offset:1px;}
button.sb-lbl::after{content:"";width:5px;height:5px;margin-right:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);opacity:.6;transition:transform .15s;}
.sb-sec.is-folded button.sb-lbl::after{transform:rotate(-45deg);}
.sb-sec.is-folded{padding-bottom:0;}
.sb-sec.is-folded .sb-items{display:none;}
.sidebar.is-searching .sb-sec.is-folded .sb-items{display:block;}
.sidebar.is-searching button.sb-lbl{cursor:default;}
.sidebar.is-searching button.sb-lbl::after{display:none;}
.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:background-color .15s,color .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:var(--sbw,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;}
  /* …except the search boxes with a magnifier: the text stays clear of it, and a list's search takes the full row. */
  .sb-search input{padding:0 30px 0 32px!important;}
  .fbar input.fb-q{padding:0 30px 0 34px!important;flex:1 1 100%!important;max-width:none!important;}
  .fb-reset{padding:5px 8px!important;font-size:.625rem!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-weight: 600; }   /* references and SKUs: the standard font, as document numbers */
.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.has-menu .cms-item-act > .cms-edit { 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: block; width: fit-content; margin: 0 auto; 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; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; border: 1.5px solid var(--bd); border-radius: 9px; padding: 0 12px 0 34px; }
.pl-search:focus-within { border-color: var(--or); }
.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-table td.pl-c-price { font-weight: 700; }   /* as the Amount columns */
.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-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; }
/* The search, filter and sort boxes above every list: one size and look everywhere, as on the Website screens (.pl-bar). */
.fbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.fbar :where(select, input[type=text], input[type=search], input[type=date], input[type=month]), .fb-reset { height: 39px; box-sizing: border-box; padding: 0 11px; border: 1.5px solid var(--bd); border-radius: 9px; font: inherit; font-size: .84rem; background-color: #fff; color: var(--ink); }
.fbar select { padding-right: 30px; max-width: 210px; }
.fbar :where(select, input):focus { outline: none; border-color: var(--or); }
.fbar input.fb-q { flex: 1 1 260px; min-width: 180px; max-width: 380px; padding-left: 34px; font-size: .86rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.fb-reset { cursor: pointer; color: var(--inkm); font-weight: 500; white-space: nowrap; }
.fb-reset:hover { border-color: var(--or); color: var(--or); }
/* Buttons sharing the row (Print, Report, + New …) stand as tall as the boxes beside them. */
.fbar .btn { height: 39px; box-sizing: border-box; padding: 0 14px; border-radius: 9px; font-size: .84rem; white-space: nowrap; }
.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:focus { outline: none; }
.cms-dlg .btn:focus { outline: none; }
.cms-dlg .btn:focus-visible { box-shadow: 0 0 0 3px rgba(224,120,32,.28); }
.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(--or); 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; }
/* Message boxes: the brand ghost instead of a plain icon */
.cms-dlg-icon { position: relative; width: 74px; height: 74px; margin-bottom: 12px; overflow: visible; }
.cms-dlg-ghost { width: 54px; height: 54px; object-fit: contain; animation: cmsFloat 2.4s ease-in-out infinite; }
.cms-dlg-badge { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--or); color: #fff; font: 700 13px/22px 'DM Sans', sans-serif; text-align: center; box-shadow: 0 0 0 3px #fff; animation: cmsBadge .35s .15s cubic-bezier(.2,.9,.3,1.4) both; }
.cms-dlg-icon.is-info .cms-dlg-badge { background: var(--bl); font-family: Georgia, serif; font-style: italic; }
.cms-dlg-icon.is-input .cms-dlg-badge { background: var(--or); font-size: 11px; }
/* A warning: the ghost turns pale, shakes, then hangs its head a little. */
.cms-dlg-icon.is-danger .cms-dlg-badge { background: var(--rd); }
.cms-dlg-icon.is-danger .cms-dlg-ghost { filter: grayscale(.35) saturate(.8); animation: cmsShake .6s ease both, cmsDroop 2.4s .6s ease-in-out infinite; }
@keyframes cmsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes cmsShake { 0% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 35% { transform: rotate(11deg); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(4deg); } 100% { transform: rotate(-4deg) translateY(1px); } }
@keyframes cmsDroop { 0%, 100% { transform: rotate(-4deg) translateY(1px); } 50% { transform: rotate(-6deg) translateY(3px); } }
@keyframes cmsBadge { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cms-dlg-ghost, .cms-dlg-badge { animation: none !important; } }
.cms-dlg-ghost { width: 60px; height: 60px; }
/* Website screens: nothing in the top bar's right corner; the save messages show there instead. */
.pl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--bd); margin-bottom: 14px; }
.pl-head .pl-tabs { border-bottom: none; margin-bottom: 0; }
.pl-head > .btn { margin-bottom: 8px; flex-shrink: 0; }
.cms-head-r { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.is-cms .save-toast { top: 12px; bottom: auto; right: 22px; z-index: 950; animation: cmsToastIn .25s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 10px 18px; border-radius: 10px; }
@keyframes cmsToastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) { .pl-head { flex-direction: column-reverse; align-items: stretch; } .pl-head > .btn { margin: 0 0 4px; } }
.pl-tabs { scrollbar-width: none; }
.pl-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .pl-tab { padding: 9px 10px; } }
/* The ghost illustrations (public/images/ghost) */
.cms-dlg-icon { width: 96px; height: 96px; background: #fff4ea; box-shadow: 0 0 0 8px rgba(224,120,32,.06); }
.cms-dlg-icon.is-danger { background: #fdeeec; box-shadow: 0 0 0 8px rgba(192,57,43,.06); }
.cms-dlg-icon.is-info { background: #eef5fb; box-shadow: 0 0 0 8px rgba(44,111,173,.06); }
.cms-dlg-ghost { width: 78px; height: 78px; margin-top: 6px; filter: none !important; }
.cms-dlg-icon.is-danger .cms-dlg-ghost { animation: cmsNo .7s ease both, cmsFloat 2.6s .7s ease-in-out infinite; }
.cms-dlg-icon.is-ask .cms-dlg-ghost, .cms-dlg-icon.is-input .cms-dlg-ghost { transform-origin: 50% 90%; animation: cmsThink 2.8s ease-in-out infinite; }
@keyframes cmsNo { 0% { transform: translateX(0); } 20% { transform: translateX(-6px) rotate(-4deg); } 40% { transform: translateX(5px) rotate(3deg); } 60% { transform: translateX(-3px) rotate(-2deg); } 80% { transform: translateX(2px); } 100% { transform: none; } }
@keyframes cmsThink { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg) translateY(-2px); } }
.cms-dlg-icon:has(img[src*="delete.svg"]) { width: 120px; border-radius: 60px; }
.cms-dlg-icon img[src*="delete.svg"] { width: 104px; }
.cms-pk-wrap.is-bare { border: none; background: none; }
.cms-pk-wrap.is-bare .cms-pk { padding: 0; }
.cms-pk-b.is-new.is-on { background: #e8b800; border-color: #e8b800; }
.cms-pk-b.is-hot.is-on { background: #f94429; border-color: #f94429; }
/* Product popup: tabs on the left, Card Preview and checklist pinned on the right */
.cms-modal.cms-wide.cms-product-tabs { max-width: 1120px; }
.cms-product-tabs .cms-body.has-aside { grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; }
.cms-product-tabs .cms-aside { position: sticky; top: 0; background: #faf8f5; border: 1px solid #ece7df; border-radius: 12px; padding: 14px; }
.cms-product-tabs .pv-thumb { max-width: 170px; margin: 0 auto; }
.cms-product-tabs .cms-gal-i { width: 86px; height: 86px; }
.cms-product-tabs .cms-rows .cms-gal-i { width: 72px; height: 72px; }
/* The delete picture animates itself (arm, present, lid): no shaking of the whole picture. */
.cms-dlg-icon .cms-dlg-ghost[src*="delete.svg"] { animation: none !important; }
/* The discard picture animates its own wrapping: the body itself stays still. */
.cms-dlg-icon .cms-dlg-ghost[src*="no.svg"] { animation: none !important; }
/* Categories field: chips with a star for the main one, and where the product shows */
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip { display: inline-flex; align-items: center; gap: 2px; background: #fff; border: 1.5px solid var(--bd); border-radius: 20px; padding: 2px 4px 2px 2px; font-size: .8rem; font-weight: 500; }
.cat-chip.is-main { background: #fff0e6; border-color: #f5c9a3; color: #a8530f; }
.cat-star, .cat-x { border: none; background: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; font-size: .95rem; line-height: 1; color: var(--inkl); }
.cat-star:hover { color: var(--or); background: #fff4ea; }
.cat-chip.is-main .cat-star { color: var(--or); }
.cat-x:hover { color: var(--rd); background: #fdecea; }
.cat-where { margin-top: 8px; font-size: .76rem; color: var(--inkm); line-height: 1.7; background: #faf8f5; border-radius: 8px; padding: 0 10px; }
.cat-where:not(:empty) { padding: 7px 10px; }
.cat-where b { color: var(--ink); font-weight: 600; }
.cat-where-tip { color: var(--inkl); }
/* Tags: equal buttons in a neat grid */
.cms-product-tabs [data-name="tags"] .cms-pk.is-flat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cms-product-tabs [data-name="tags"] .cms-pk-b { justify-content: center; }
@media (max-width: 700px) { .cms-product-tabs [data-name="tags"] .cms-pk.is-flat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Card Preview: the website's product card, as it looks there */
.pv-card { background: #fff; border: none; border-radius: 0; padding: 6px 6px 2px; text-align: center; }
.pv-thumb { position: relative; aspect-ratio: 1; background: #fff; border-radius: 0; overflow: hidden; }
.pv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pv-badge { position: absolute; top: 0; left: 0; width: 52px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; color: #fff; font: 700 12px/1 'Open Sans', sans-serif; border-radius: 0 0 17px 0; }
.pv-badge.is-hot { background: #f94429; } .pv-badge.is-new { background: #f9d329; }
.pv-sku { font: 700 16px/1.4 Roboto, sans-serif; color: #000; margin-top: 12px; }
.pv-name { font: 400 13px/1.5 Lato, sans-serif; color: #202020; margin-top: 4px; }
.pv-price { font: 400 15px/1.4 Roboto, sans-serif; color: #f69468; margin: 6px 0 8px; }
.cms-product-tabs .pv-thumb { max-width: none; }
.cms-product-tabs .cms-aside .pv-card { border: 1px solid #ece7df; border-radius: 10px; }
.cat-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.cat-page { background: #fff; border: 1px solid #e6e0d7; border-radius: 6px; padding: 0 7px; font-size: .74rem; }
/* Card Preview: the website card's look, a little shorter than full size */
.cms-product-tabs .cms-aside .pv-card { padding: 8px 10px 4px; }
.cms-product-tabs .pv-thumb { max-width: 185px; margin: 0 auto; }
.cms-product-tabs .pv-badge { width: 48px; height: 32px; font-size: 11px; border-radius: 0 0 16px 0; }
.cms-product-tabs .pv-sku { font-size: 15px; margin-top: 8px; }
.cms-product-tabs .pv-name { font-size: 12.5px; margin-top: 3px; }
.cms-product-tabs .pv-price { font-size: 14px; margin: 4px 0 6px; }
.cms-product-tabs .cms-check-list li { padding: 2px 0; }
/* The photo fills the card's width (no space on either side), as on the website */
.cms-product-tabs .cms-aside .pv-card { padding: 0 0 6px; overflow: hidden; }
.cms-product-tabs .pv-thumb { max-width: none; width: 100%; margin: 0; }
.cms-product-tabs .pv-sku, .cms-product-tabs .pv-name, .cms-product-tabs .pv-price { padding: 0 10px; }
/* The label keeps the website's proportions whatever the preview's size: on the site the photo is
   about 204px wide and the tab 60 × 40 with a 20px corner and 13px text (≈ 29% × 20% of the photo). */
.pv-thumb { container-type: inline-size; aspect-ratio: 1 / 1; }
.pv-badge, .cms-product-tabs .pv-badge { width: 29.4cqw; height: 19.6cqw; font-size: 6.4cqw; border-radius: 0 0 9.8cqw 0; }
/* The card sizes itself to the screen's height, so the preview and the whole checklist fit without
   scrolling (the photo still fills the card's width). */
.cms-product-tabs .cms-aside { padding: 12px 14px 10px; }
.cms-product-tabs .cms-aside-h { margin-bottom: 6px; }
.cms-product-tabs .cms-aside .cms-aside-h[style] { margin-top: 12px !important; }
.cms-product-tabs .cms-check-list li { padding: 1px 0; font-size: .78rem; }
.cms-product-tabs .cms-progress-t { margin: 4px 0 2px; }
/* Category picker: main categories as picture tiles, then that category's sub-categories */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px; border: 1.5px solid var(--bd); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; transition: all .12s; }
.cat-tile:hover { border-color: var(--orl); }
.cat-tile img, .cat-tile-none { width: 40px; height: 40px; object-fit: contain; }
.cat-tile-n { font-size: .74rem; font-weight: 600; color: var(--inkm); line-height: 1.2; text-align: center; }
.cat-tile.is-on { border-color: var(--or); background: #fff4ea; box-shadow: 0 0 0 3px rgba(224,120,32,.12); }
.cat-tile.is-on .cat-tile-n { color: var(--or); }
.fg label.cat-subs-h { margin-top: 12px; }
.cat-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* Main category tiles: text only, five across, the chosen one filled (as the buttons below) */
.cat-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cat-tile { flex-direction: row; justify-content: center; gap: 5px; padding: 8px 6px; border-radius: 8px; min-height: 36px; }
.cat-tile-n { font-size: .8rem; font-weight: 500; color: var(--ink); }
.cat-tile .cms-pk-tick { display: none; font-size: .72rem; }
.cat-tile.is-on { background: var(--or); border-color: var(--or); box-shadow: none; }
.cat-tile.is-on .cat-tile-n, .cat-tile.is-on .cms-pk-tick { color: #fff; }
.cat-tile.is-on .cms-pk-tick { display: inline; }
@media (max-width: 700px) { .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Product popup choices (category, sub-category, tags): one quiet, even style; the chosen ones
   tinted with an orange outline and text instead of a filled button with a tick. */
.cms-product-tabs .cat-tiles, .cms-product-tabs .cat-subs, .cms-product-tabs [data-name="tags"] .cms-pk.is-flat {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cms-product-tabs .cat-tile, .cms-product-tabs .cat-subs .cms-pk-b, .cms-product-tabs [data-name="tags"] .cms-pk-b {
    display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 8px; border: 1px solid #ddd6cc; border-radius: 8px;
    background: #fff; color: #3a3632; font: 500 .8rem/1.2 'DM Sans', sans-serif; text-align: center; box-shadow: none; transition: border-color .12s, background .12s, color .12s; }
.cms-product-tabs .cat-tile:hover, .cms-product-tabs .cat-subs .cms-pk-b:hover, .cms-product-tabs [data-name="tags"] .cms-pk-b:hover { border-color: #c4b9ab; background: #fbfaf8; }
.cms-product-tabs .cat-tile.is-on, .cms-product-tabs .cat-subs .cms-pk-b.is-on, .cms-product-tabs [data-name="tags"] .cms-pk-b.is-on {
    background: #fff5ec; border-color: var(--or); color: #b4580f; font-weight: 600; box-shadow: inset 0 0 0 1px var(--or); }
.cms-product-tabs .cat-tile .cat-tile-n { color: inherit; font: inherit; }
.cms-product-tabs .cat-tile.is-on .cat-tile-n { color: inherit; }
.cms-product-tabs .cms-pk-tick, .cms-product-tabs .cat-tile.is-on .cms-pk-tick { display: none; }
@media (max-width: 700px) { .cms-product-tabs .cat-tiles, .cms-product-tabs .cat-subs, .cms-product-tabs [data-name="tags"] .cms-pk.is-flat { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cms-product-tabs .cms-pk-b .cms-pk-tick, .cms-product-tabs .cms-pk-b.is-on .cms-pk-tick { display: none; }
.cms-product-tabs .cat-tile, .cms-product-tabs .cat-subs .cms-pk-b, .cms-product-tabs [data-name="tags"] .cms-pk-b {
    height: 34px; min-height: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 32px; }
/* Website popups: the field titles as on the back office's screens, in bold */
.cms-modal .cms-f > label, .cms-modal .fg.cat-field > label, .cms-modal label.cat-subs-h { font-weight: 700; }
.cms-product-tabs .cat-tile, .cms-product-tabs .cat-subs .cms-pk-b, .cms-product-tabs [data-name="tags"] .cms-pk-b { transition: none; }
/* Drag to reorder: a lifted copy follows the pointer; the item's place shows as a soft dashed slot */
.cms-drag-clone { box-shadow: 0 12px 28px rgba(0,0,0,.18); border-radius: 8px; opacity: .96; background: #fff; will-change: transform; }
.is-placeholder { opacity: 1 !important; background: #fbf6f0 !important; box-shadow: none !important; outline: 1.5px dashed #e3b98f; outline-offset: -1.5px; }
.is-placeholder > * { visibility: hidden; }
.cms-gal-i.is-placeholder { border-color: transparent; }
/* Photo grid: the add tile sits inside, after the photos; uploads show as tiles with a spinner */
.cms-gal-add, .cms-gal-up { width: 104px; height: 104px; list-style: none; }
.cms-product-tabs .cms-gal-add, .cms-product-tabs .cms-gal-up { width: 86px; height: 86px; }
.cms-product-tabs .cms-rows .cms-gal-add, .cms-product-tabs .cms-rows .cms-gal-up { width: 72px; height: 72px; }
.cms-gal-add.is-empty { width: 100%; height: 86px; }
.cms-gal-addbtn { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px dashed #d4cabd; border-radius: 8px; background: #fcfbf9; color: var(--inkm); font: 500 .72rem/1.2 'DM Sans', sans-serif; cursor: pointer; text-align: center; padding: 4px; text-transform: none; letter-spacing: 0; }
.cms-gal-addbtn:hover, .cms-gal.is-drop .cms-gal-addbtn { border-color: var(--or); color: var(--or); background: #fff7ef; }
.cms-gal-addbtn:focus-within { border-color: var(--or); }
.cms-gal-plus { font-size: 1.35rem; line-height: 1; font-weight: 300; }
.cms-gal-add.is-empty .cms-gal-addbtn { flex-direction: row; gap: 8px; font-size: .8rem; }
.cms-gal-up { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--bd); border-radius: 8px; background: #faf8f5; font-size: .68rem; color: var(--inkl); }
.cms-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #eadfd2; border-top-color: var(--or); animation: cmsSpin .7s linear infinite; }
@keyframes cmsSpin { to { transform: rotate(360deg); } }
.cms-gal-msg:empty { display: none; }
.cms-gal-msg { color: var(--rd); margin-top: 4px; font-size: .76rem; }
.cms-gal { border: 1px solid #ece7df; background: #fff; }
.fg label.cms-gal-addbtn { font-size: .72rem; font-weight: 500; color: var(--inkm); text-transform: none; letter-spacing: 0; display: flex; }
.fg label.cms-gal-addbtn:hover { color: var(--or); }
.cms-gal-add.is-empty .fg label.cms-gal-addbtn, .fg .cms-gal-add.is-empty label.cms-gal-addbtn { font-size: .8rem; }
/* ⓘ hints beside field titles: a small dark note that opens to the right of the icon */
.cms-tip { position: relative; display: inline-flex; vertical-align: 1px; margin-left: 6px; cursor: help; outline: none; }
.cms-tip-i { width: 14px; height: 14px; border-radius: 50%; border: 1.3px solid #b9b0a5; color: #9a9085; font: italic 700 9px/11px Georgia, serif; text-align: center; text-transform: none; letter-spacing: 0; }
.cms-tip:hover .cms-tip-i, .cms-tip:focus-visible .cms-tip-i { border-color: var(--or); color: var(--or); }
.cms-tip-b { position: absolute; left: calc(100% + 9px); top: 50%; transform: translateY(-50%); background: #2c2a26; color: #fff; font: 400 .74rem/1.4 'DM Sans', sans-serif; text-transform: none; letter-spacing: 0; padding: 7px 10px; border-radius: 8px; width: max-content; max-width: 380px; box-shadow: 0 6px 18px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 50; pointer-events: none; }
.cms-tip-b::after { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #2c2a26; }
.cms-tip:hover .cms-tip-b, .cms-tip:focus-visible .cms-tip-b { opacity: 1; visibility: visible; }
/* Folding rows (colour variants): one slim line each, opens to its fields on a click */
.cms-rows.is-fold { gap: 6px; }
.cms-row.is-fold { padding: 0 6px 0 4px; background: #fff; border-color: #d6cbbd; box-shadow: 0 1px 2px rgba(60,40,20,.05); transition: border-color .12s, box-shadow .12s; }
.cms-row.is-fold:hover { border-color: #bfb09d; }
.cms-row.is-fold > .cms-grip { margin-top: 9px; }
.cms-row.is-fold > .cms-row-x { margin-top: 11px; }
.cms-row.is-fold.is-open { border-color: #dba878; box-shadow: 0 2px 10px rgba(140,90,40,.07); }
.cms-row.is-fold.has-err { border-color: var(--rd); }
.cms-row-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 4px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.cms-row-head:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; border-radius: 6px; }
.cms-row-chev { margin-left: 4px; color: var(--inkl); font-size: .8rem; transition: transform .15s; }
.cms-row.is-open .cms-row-chev { transform: rotate(180deg); color: var(--or); }
.cms-row-more { display: none; border-top: 1px solid #f1ece5; padding: 12px 4px 4px; }
.cms-row.is-open .cms-row-more { display: block; }
.cl-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.28); box-shadow: inset 0 0 0 2px #fff; }
.cl-dot.is-none { background: repeating-linear-gradient(45deg, #eee 0 4px, #fff 4px 8px); }
.cl-name { font-size: .88rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-name.is-blank { color: var(--inkl); font-weight: 500; font-style: italic; }
.cl-thumbs { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cl-thumbs img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; border: 1px solid #ddd3c6; background: #fff; }
.cl-more { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 6px; background: #f6f1ea; color: var(--inkm); font-size: .74rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.cl-none { font-size: .76rem; color: var(--inkl); }
/* Category picker: one line; a panel with main categories left, sub-categories right */
.catp { position: relative; }
.catp-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; font-size: .88rem; color: var(--ink); }
.catp-btn:hover { border-color: #c9bdae; }
.catp.is-open .catp-btn, .catp-btn:focus-visible { border-color: var(--or); box-shadow: 0 0 0 3px rgba(224,120,32,.12); outline: none; }
.catp-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catp-v b { font-weight: 600; }
.catp-sub { color: var(--inkm); white-space: pre; }
.catp-ph { color: var(--inkl); }
.catp-chev { color: var(--inkl); font-size: .8rem; transition: transform .15s; }
.catp.is-open .catp-chev { transform: rotate(180deg); color: var(--or); }
.catp-panel { position: absolute; left: 0; right: 0; top: calc(100% - 2px); z-index: 40; margin-top: 6px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 12px 32px rgba(60,40,20,.14); overflow: hidden; }
.catp-panel[hidden] { display: none; }
.catp-top { padding: 10px; border-bottom: 1px solid #f1ece5; }
.catp-q { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 8px; font: inherit; font-size: .86rem; background: #fcfaf7; }
.catp-q:focus { outline: none; border-color: var(--or); background: #fff; }
.catp-cols { display: grid; grid-template-columns: 42% 58%; height: 264px; }
.catp-main { overflow-y: auto; border-right: 1px solid #f1ece5; padding: 6px; background: #fcfaf7; }
.catp-subs { overflow-y: auto; padding: 6px 8px; }
.catp-found { display: none; max-height: 264px; overflow-y: auto; padding: 6px; }
.catp-panel.is-search .catp-cols { display: none; }
.catp-panel.is-search .catp-found { display: block; }
.catp-m, .catp-s { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: none; border-radius: 7px; background: none; cursor: pointer; text-align: left; font: inherit; font-size: .86rem; color: var(--ink); }
.catp-m:hover, .catp-s:hover { background: #f6f1ea; }
.catp-m.is-on { background: #fff1e4; color: var(--or); font-weight: 600; }
.catp-n { margin-left: auto; font-size: .74rem; color: var(--inkl); font-weight: 500; }
.catp-m.is-on .catp-n { color: var(--or); }
.catp-h { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--inkl); padding: 8px 10px 4px; }
.catp-box { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid #cfc5b8; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff; }
.catp-s.is-on .catp-box { background: var(--or); border-color: var(--or); }
.catp-none { padding: 14px 10px; font-size: .8rem; color: var(--inkl); }
.catp-foot { display: flex; justify-content: flex-end; padding: 8px 10px; border-top: 1px solid #f1ece5; }
/* A tag's card label in the Tags list */
.badge.is-hot { background: #fde4df; color: #c8321b; }
.badge.is-new { background: #fff3c4; color: #8a6a00; }
.cms-modal:focus { outline: none; }
/* Specifications: no drag corners (the boxes grow by themselves); Color can be filled from the variants */
.fg .cms-spec textarea { resize: none; overflow: hidden; }
.fg .cms-spec textarea::placeholder { color: #bdb5aa; font-style: italic; }
.cms-spec-l { gap: 8px; }
.cms-spec-l .cms-spec-use { margin-left: auto; }
.cms-spec-use { border: 1px solid #e6c3a1; background: #fff7ef; color: var(--or); border-radius: 6px; padding: 3px 8px; font: 600 .7rem/1.2 'DM Sans', sans-serif; cursor: pointer; }
.cms-spec-use:hover { background: var(--or); border-color: var(--or); color: #fff; }
.cms-spec-use[hidden] { display: none; }
/* A message box with a list (e.g. "Please check before saving"): left-aligned, one line per item */
.cms-dlg.has-list { max-width: 470px; }
.cms-dlg-list { list-style: none; margin: 14px 0 0; padding: 10px 14px; text-align: left; background: #fcf8f3; border: 1px solid #f0e4d6; border-radius: 12px; }
.cms-dlg-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .85rem; color: var(--ink); min-width: 0; }
.cms-dlg-list li + li { border-top: 1px dashed #eadccb; }
.cms-dlg-list li::before { content: '!'; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--or); color: #fff; font: 700 .7rem/18px 'DM Sans', sans-serif; text-align: center; }
.cms-dlg-list li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A field with a fixed word inside (RM … /pc) */
.cms-affix { display: flex; align-items: stretch; max-width: 260px; border: 1.5px solid var(--bd); border-radius: 7px; background: #fff; overflow: hidden; }
.cms-affix:focus-within { border-color: var(--or); }
.fg .cms-affix input { border: none; border-radius: 0; flex: 1; min-width: 0; }
.cms-affix-a, .cms-affix-b { display: flex; align-items: center; padding: 0 11px; background: #faf7f2; color: var(--inkm); font-size: .82rem; font-weight: 600; }
.cms-affix-a { border-right: 1px solid var(--bd); }
.cms-affix-b { border-left: 1px solid var(--bd); }

/* A settings card (Pricing): rows of title + note on the left, control on the right */
.cms-setcard > .cms-form { display: block; background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 0 18px; }
.cms-setcard .cms-form > .fg { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "l c" "h c" "e e"; column-gap: 20px; align-items: center; margin: 0; padding: 16px 0; border-top: 1px solid #f0ebe4; }
.cms-setcard .cms-form > .fg:first-child { border-top: none; }
.cms-setcard .cms-form > .fg > label { grid-area: l; align-self: end; margin: 0; font-size: .84rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.cms-setcard .cms-form > .fg > .hint { grid-area: h; align-self: start; margin: 2px 0 0; font-size: .75rem; color: var(--inkl); }
.cms-setcard .cms-form > .fg > .err { grid-area: e; }
.cms-setcard:not(.is-stack) .cms-form > .fg:not(.cms-toggle) > :not(label):not(.hint):not(.err) { grid-area: c; justify-self: start; }
.cms-setcard .cms-form > .fg.cms-attach { grid-template-areas: ". c" ". e"; padding-top: 0; border-top: none; margin-top: -6px; }
.cms-setcard .cms-form > .fg.cms-attach > input { width: 100%; max-width: 380px; }
.cms-setcard .cms-affix { width: 220px; }
/* Show the price: the title and note on the left, the switch in the control column */
.cms-setcard:not(.is-stack) .cms-form > .fg.cms-toggle { grid-template-areas: "t s" "h s" "e e"; }
.cms-setcard:not(.is-stack) .cms-form > .fg.cms-toggle > .cms-sw { display: contents; }
.cms-setcard:not(.is-stack) .cms-form > .fg.cms-toggle .cms-sw-t { grid-area: t; align-self: end; font-size: .84rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.cms-setcard:not(.is-stack) .cms-form > .fg.cms-toggle .cms-sw-ui { grid-area: s; align-self: center; justify-self: start; cursor: pointer; }
.cms-setcard:not(.is-stack) .cms-form > .fg.cms-toggle > .hint { grid-area: h; }
/* The automatic line, as it will read */
.cms-price-auto { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: #fff7ef; border: 1px solid #f3dcc4; }
.cms-price-auto-k { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--inkl); }
.cms-price-auto-v { font-size: .88rem; font-weight: 600; color: var(--or); }
@media (max-width: 700px) {
    .cms-setcard .cms-form > .fg { grid-template-columns: 1fr; grid-template-areas: "l" "h" "c" "e"; row-gap: 8px; }
    .cms-setcard .cms-form > .fg.cms-attach { grid-template-areas: "c" "e"; }
}
/* Automatic ↔ Custom: the chip and the box are the same height, so the rows below stay put */
.cms-setcard .cms-form > .fg.cms-attach > input, .cms-setcard .cms-price-auto { height: 38px; box-sizing: border-box; }
.cms-setcard .cms-price-auto { padding-top: 0; padding-bottom: 0; }
.cms-setcard .cms-form > .fg.cms-attach { display: block; padding: 0 0 16px 230px; margin-top: -6px; }
@media (max-width: 700px) { .cms-setcard .cms-form > .fg.cms-attach { padding-left: 0; } }
.cms-setcard .cms-live-f > .cms-live { margin: 0; }
/* Settings card, stacked (SEO & Settings): sections with a title; each row's title above its box */
.cms-setcard.is-stack .cms-form > .fg { display: block; padding: 12px 0; border-top: none; }
.cms-setcard.is-stack .cms-form > .fg > label { display: flex; align-items: center; margin-bottom: 6px; }
.cms-setcard.is-stack .cms-form > .fg > input, .cms-setcard.is-stack .cms-form > .fg > textarea, .cms-setcard.is-stack .cms-affix { width: 100%; max-width: none; }
.cms-setcard.is-stack .cms-form > .cms-head { padding: 18px 0 2px; border-top: 1px solid #f0ebe4; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--or); }
.cms-setcard.is-stack .cms-form > .cms-head:first-child { border-top: none; padding-top: 16px; }
.cms-setcard.is-stack .cms-form > .fg:last-child { padding-bottom: 18px; }
.cms-setcard.is-stack .cms-row-grid > .fg, .cms-setcard.is-stack .cms-form > div:not(.fg) { margin: 0; }
.cms-setcard.is-stack .cms-serp { margin-top: 2px; }
.cms-setcard.is-stack .cms-affix-a { font-weight: 500; color: var(--inkl); }
/* The live character count at the end of a field's title */
.cms-count { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--inkl); text-transform: none; letter-spacing: 0; }
.cms-count.is-empty { font-weight: 500; font-style: italic; }
.cms-count.is-over { color: var(--or); }
.cms-setcard textarea { resize: none; }
/* SEO & Settings: no card around it; field titles as in the other tabs (small grey capitals) */
.cms-setcard.is-stack > .cms-form { background: none; border: none; border-radius: 0; padding: 0; }
.cms-setcard.is-stack .cms-form > .fg > label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--inkm); margin-bottom: 5px; }
.cms-setcard.is-stack .cms-form > .cms-head:first-child { padding-top: 0; }
.cms-setcard.is-stack .cms-form > .fg:last-child { padding-bottom: 4px; }
/* Pricing: titles in the same style as the other tabs (small grey capitals) */
.cms-setcard:not(.is-stack) .cms-form > .fg > label, .cms-setcard:not(.is-stack) .cms-form > .fg.cms-toggle .cms-sw-t {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--inkm); }
/* Settings → Sign-in Security */
.signin-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #f0ebe4; }
.signin-t { font-size: .86rem; font-weight: 700; }
.signin-h { font-size: .76rem; color: var(--inkl); margin-top: 2px; max-width: 420px; }
.signin-seg { display: inline-flex; border: 1.5px solid var(--bd); border-radius: 10px; overflow: hidden; flex: none; }
.signin-seg button { border: none; background: #fff; padding: 7px 14px; font: 600 .8rem 'DM Sans', sans-serif; color: var(--inkm); cursor: pointer; border-right: 1px solid var(--bd); }
.signin-seg button:last-child { border-right: none; }
.signin-seg button.is-on { background: var(--or); color: #fff; }
.signin-sw { position: relative; flex: none; width: 38px; height: 22px; cursor: pointer; }
.signin-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.signin-sw span { position: absolute; inset: 0; border-radius: 22px; background: #d9d3ca; transition: background .15s; }
.signin-sw span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.signin-sw input:checked + span { background: var(--gn); }
.signin-sw input:checked + span::after { transform: translateX(16px); }
.signin-sw input:focus-visible + span { outline: 2px solid var(--or); outline-offset: 2px; }
.login-remember { display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; font-size: .82rem; color: var(--inkm); cursor: pointer; }
.login-remember input { width: 16px; height: 16px; accent-color: var(--or); }
.signin-row.is-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.signin-row.is-stack .signin-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
.signin-row > div:first-child { min-width: 0; }
/* Categories: the product count as a quiet link; a hidden category's row is greyed */
.cms-count-link { display: inline-block; margin-top: 2px; font-size: .76rem; color: var(--inkl); text-decoration: none; }
.cms-count-link:hover { color: var(--or); text-decoration: underline; }
.cms-item.is-off .cms-item-main { opacity: .55; }
.cms-item-act .cms-sw { margin-left: 4px; }
.cms-head h3 .cms-tip { vertical-align: 2px; }
.cms-item-act .cms-count-link { margin: 0 6px 0 0; min-width: 78px; text-align: right; white-space: nowrap; }
/* Categories page: tabs (Categories | Tags) with that tab's buttons on the right */
.cat-bar { display: flex; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--bd); margin-bottom: 14px; }
.cat-bar .cat-tabs { border-bottom: none; margin-bottom: 0; flex: 1; }
.cat-bar-r { display: flex; gap: 8px; padding-bottom: 8px; }
.cat-bar-r[hidden], .cms-list[hidden] { display: none; }
/* Categories: a row is not a button (only Edit opens the popup); a main category with sub-categories opens on a click, with an arrow */
.cms-item-main.is-still { cursor: default; }
.cms-group:not(.has-kids) > .cms-item .cms-item-main { cursor: default; }
.cms-group.has-kids > .cms-item .cms-item-main::after { content: '▸'; margin-left: 8px; color: var(--inkl); font-size: .8rem; transition: transform .15s; }
.cms-group.has-kids.is-open > .cms-item .cms-item-main::after { transform: rotate(90deg); color: var(--or); }
.cms-group.has-kids > .cms-item:hover { background: #fcfaf7; }
.cms-item-main.is-still:hover .cms-item-title { color: inherit; }
/* Categories rows, right side: count | switch | Edit — spaced and separated so a click lands where meant */
#cat-list .cms-item-act, #tag-list .cms-item-act { gap: 0; }
.cat-count { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 4px; width: 104px; margin-right: 14px; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: .78rem; color: var(--inkl); cursor: pointer; white-space: nowrap; }
.cat-count b { font-weight: 700; color: var(--ink); font-size: .84rem; }
.cat-count:hover:not(:disabled) { border-color: #ecd6c0; background: #fff7ef; color: var(--or); }
.cat-count:hover:not(:disabled) b { color: var(--or); }
.cat-count:disabled { cursor: default; opacity: .6; }
.cat-count.is-all { cursor: default; }
.cat-sw { padding: 0 16px; border-left: 1px solid #ede7df; border-right: 1px solid #ede7df; height: 26px; display: inline-flex; align-items: center; margin: 0 14px 0 0; }
#tag-list .cat-count { margin-right: 14px; }
/* The products popup */
.cat-plist { max-height: 52vh; overflow-y: auto; border: 1px solid var(--bd); border-radius: 10px; }
.cat-plist-i { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #f1ece5; }
.cat-plist-i:last-child { border-bottom: none; }
.cat-plist-i img, .cat-plist-none { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; border: 1px solid var(--bd); background: var(--cream); flex: none; }
.cat-plist-n { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: .86rem; font-weight: 500; }
.cat-plist-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-plist-n small { font-size: .72rem; color: var(--inkl); }
.cat-plist-i.is-off { opacity: .6; }
.cat-plist-wait { padding: 16px; font-size: .82rem; color: var(--inkl); }
.cat-plist-go { margin-top: 12px; }
/* One picture, controlled inside its box: click to upload / replace, × to remove */
.cms-img { position: relative; cursor: pointer; transition: border-color .12s, background .12s; }
.cms-img:hover { border-color: var(--or); }
.cms-img.has-img { border-style: solid; }
.cms-img-view { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cms-img-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--inkm); }
.cms-img-empty b { font-size: 1.1rem; line-height: 1; color: var(--or); }
.cms-img-empty span { font-size: .74rem; font-weight: 600; }
.cms-img-empty small { font-size: .66rem; color: var(--inkl); }
.cms-img-ov { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(28,24,20,.45); color: #fff; font-size: .76rem; font-weight: 600; border-radius: 8px; }
.cms-img.has-img:hover .cms-img-ov { display: flex; }
.cms-img.is-busy .cms-img-ov { display: flex; }
.cms-img.is-busy .cms-img-ov::after { content: '…'; }
.cms-img-x { position: absolute; top: 5px; right: 5px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(28,28,28,.7); color: #fff; font-size: .9rem; line-height: 1; cursor: pointer; }
.cms-img-x:hover { background: var(--rd); }
.cms-img-x[hidden] { display: none; }
.cms-img .cms-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* A folded section (e.g. Search engines): its title as the section heading, opens on a click */
.cms-setcard.is-stack .cms-form > details.cms-more.is-section { margin: 6px 0 0; padding: 0; border: none; border-top: 1px solid #f0ebe4; background: none; }
.cms-setcard.is-stack details.cms-more.is-section > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 16px 0 8px; cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--or); }
.cms-setcard.is-stack details.cms-more.is-section > summary::-webkit-details-marker { display: none; }
.cms-setcard.is-stack details.cms-more.is-section > summary::after { content: '▸'; font-size: .8rem; transition: transform .15s; }
.cms-setcard.is-stack details.cms-more.is-section[open] > summary::after { transform: rotate(90deg); }
.cms-setcard.is-stack details.cms-more.is-section > summary::before { content: none; }
.cms-setcard.is-stack details.cms-more.is-section > .cms-form > .fg { padding: 10px 0; }
.cms-setcard.is-stack details.cms-more.is-section > .cms-form > .fg > label { display: flex; align-items: center; margin-bottom: 5px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--inkm); }
.cms-setcard.is-stack details.cms-more.is-section .fg > input, .cms-setcard.is-stack details.cms-more.is-section .fg > textarea { width: 100%; }
/* A setting as a small card: title and note on the left, the switch on the right */
.fg.cms-toggle-card { border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; background: #fff; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t s" "h s" "e e"; column-gap: 16px; align-items: center; }
.fg.cms-toggle-card > .cms-sw { display: contents; }
.fg.cms-toggle-card .cms-sw-t { grid-area: t; font-size: .86rem; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.fg.cms-toggle-card .cms-sw-ui { grid-area: s; cursor: pointer; }
.fg.cms-toggle-card > .hint { grid-area: h; margin: 2px 0 0; font-size: .75rem; color: var(--inkl); }
.fg.cms-toggle-card > .err { grid-area: e; }
.cms-setcard.is-stack .cms-form > .fg.cms-toggle-card, .cms-form > .fg.cms-toggle-card { display: grid; border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; margin: 8px 0 4px; }
.fg label.cms-img { text-transform: none; letter-spacing: 0; font-weight: 400; color: inherit; font-size: inherit; }
.cms-setcard .cms-form > .fg.cms-toggle-card, .cms-form > .fg.cms-toggle-card { grid-template-columns: 1fr auto; grid-template-areas: "t s" "h s" "e e"; column-gap: 16px; }
.cms-setcard .cms-form > .fg.cms-toggle-card .cms-sw-ui { justify-self: end; }
.cms-setcard details.cms-more.is-section .cms-serp { width: 100%; box-sizing: border-box; }
/* Inside a folded section: its own small headings */
.cms-setcard details.cms-more.is-section > .cms-form > .cms-head { padding: 4px 0 2px; border: none; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--inkl); }
.cms-setcard.is-stack details.cms-more.is-section > summary { color: var(--inkm); }
/* Card labels: the label as it looks (words on its colour) */
.lbl-chip { display: inline-flex; align-items: center; justify-content: center; font: 700 .72rem/1 'Open Sans', 'DM Sans', sans-serif; white-space: nowrap; }
.lbl-chip.is-row { min-width: 64px; height: 30px; padding: 0 12px; border-radius: 0 0 14px 0; font-size: .78rem; }
.lbl-chip.is-mini { margin-left: 8px; height: 18px; padding: 0 7px; border-radius: 4px; font-size: .6rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; vertical-align: 1px; }
.lbl-chip.is-corner { position: absolute; top: 0; left: 0; min-width: 60px; height: 40px; padding: 0 12px; border-radius: 0 0 20px 0; font-size: .8rem; }
.lbl-note { font-size: .76rem; color: var(--inkl); margin: 10px 2px 0; max-width: 640px; }
/* A product card with the label in its corner */
.lbl-prev { width: 170px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.lbl-prev-photo { position: relative; aspect-ratio: 1; background: repeating-linear-gradient(45deg, #f6f2ec 0 8px, #fbf8f4 8px 16px); display: flex; align-items: center; justify-content: center; }
.lbl-prev-ph { font-size: .7rem; color: var(--inkl); }
.lbl-prev-t { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px; font-size: .74rem; color: var(--inkm); }
.lbl-prev-t b { color: var(--ink); font-size: .78rem; }
.cms-live .lbl-prev { margin: 2px 0 6px; }
/* Colour: the usual ones, or any */
.lbl-pal { display: flex; flex-wrap: wrap; gap: 8px; }
.lbl-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bd); cursor: pointer; padding: 0; position: relative; }
.lbl-sw.is-on { box-shadow: 0 0 0 2px var(--or); }
.lbl-custom { display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(#f94429, #f9d329, #3d9a6e, #2c6fad, #8e44ad, #f94429); color: #fff; font-weight: 700; text-transform: none; letter-spacing: 0; }
.lbl-custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.lbl-modal .cms-aside { width: 210px; }
/* "Show on the website" and other setting switches in popups: a light row, not a box */
.cms-setcard.is-stack .cms-form > .fg.cms-toggle-card, .cms-setcard .cms-form > .fg.cms-toggle-card, .cms-form > .fg.cms-toggle-card {
    border: none; border-top: 1px solid #f0ebe4; border-radius: 0; background: none; padding: 14px 0 6px; margin: 6px 0 0; }
.fg.cms-toggle-card .cms-sw-t { font-size: .84rem; font-weight: 600; }
.cms-setcard .cms-form > .fg.cms-toggle-card > label.cms-sw, .cms-form > .fg.cms-toggle-card > label.cms-sw { display: contents; }
.cms-live .lbl-prev { width: 128px; }
.cms-live .lbl-prev .lbl-chip.is-corner { min-width: 48px; height: 32px; font-size: .72rem; border-radius: 0 0 16px 0; }
.cms-live .lbl-prev-t { padding: 6px; font-size: .68rem; }
/* The tag's card label picker: one line; a list of labels in their colours */
.lp-btn { min-height: 44px; }
.lbl-chip.is-pick { min-width: 52px; height: 28px; padding: 0 12px; border-radius: 0 0 14px 0; font-size: .76rem; }
.lp-panel { max-height: 300px; overflow-y: auto; }
.lp-list { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.lp-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 10px; border: none; border-radius: 8px; background: none; cursor: pointer; text-align: left; font: inherit; }
.lp-i:hover, .lp-i:focus-visible { background: #f6f1ea; outline: none; }
.lp-i.is-on { background: #fff1e4; }
.lp-none { font-size: .84rem; color: var(--inkm); min-width: 52px; }
.lp-u { flex: 1; min-width: 0; font-size: .74rem; color: var(--inkl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tick { color: var(--or); font-weight: 700; width: 14px; }
.lp-panel { position: fixed; z-index: 800; overflow-y: auto; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 12px 32px rgba(60,40,20,.16); }
.lp-panel[hidden] { display: none; }
/* The tag's card label: every label as its coloured tab, one click picks it */
.lc-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid var(--bd); border-radius: 10px; background: #fcfaf7; }
.lc-i { position: relative; display: inline-flex; padding: 3px; border: 2px solid transparent; border-radius: 8px; background: none; cursor: pointer; transition: border-color .12s, transform .12s; }
.lc-i:hover { transform: translateY(-1px); border-color: #e7d9c9; }
.lc-i.is-on { border-color: var(--or); background: #fff; }
.lc-i:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.lc-none { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border: 1.5px dashed #cdbfae; border-radius: 6px; font-size: .76rem; font-weight: 600; color: var(--inkm); background: #fff; }
.lc-tick { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--or); color: #fff; font-size: .62rem; font-weight: 700; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.lc-i.is-on .lc-tick { display: inline-flex; }
/* 3. The tag popup's label chips: a fixed size, scrolls if there are many */
.lc-grid { max-height: 112px; overflow-y: auto; align-content: flex-start; padding-top: 14px; }
/* 5. A button-link without underline */
a.cat-plist-go, a.cat-plist-go:hover { text-decoration: none; }
/* 6. Card Labels: the note above the list */
.lbl-note { margin: 0 2px 12px; }
/* 7. Product popup tags: chosen tags as chips in one box, type to add more (any number of tags) */
.cms-tagbox .cms-chips-wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; cursor: text; }
.cms-tagbox .cms-chips-wrap:focus-within { border-color: var(--or); box-shadow: 0 0 0 3px rgba(224,120,32,.12); }
.cms-tagbox .cms-chips { display: contents; }
.cms-tagbox .cms-chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 6px; background: #f6f1ea; border: 1px solid #ebe3d8; font-size: .8rem; font-weight: 500; color: var(--ink); }
.cms-tagbox .cms-chip button { width: 20px; height: 20px; border: none; border-radius: 4px; background: none; color: var(--inkl); cursor: pointer; font-size: .9rem; line-height: 1; }
.cms-tagbox .cms-chip button:hover { background: #fdecea; color: var(--rd); }
.fg.cms-tagbox input.cms-chips-in { flex: 1; min-width: 120px; border: none; padding: 4px; box-shadow: none; background: none; }
.fg.cms-tagbox input.cms-chips-in:focus { border: none; }
.cms-tagbox .cms-chips-list { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 30; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 12px 32px rgba(60,40,20,.14); padding: 6px; }
.cms-tagbox .cms-chips-opt { display: block; width: 100%; text-align: left; padding: 8px 10px; border: none; border-radius: 7px; background: none; font: inherit; font-size: .84rem; cursor: pointer; }
.cms-tagbox .cms-chips-opt:hover, .cms-tagbox .cms-chips-opt.is-first { background: #f6f1ea; }
.cms-tagbox .cms-chips-empty { padding: 8px 10px; font-size: .8rem; color: var(--inkl); }
/* 1. Card label popup: the preview fills its side, the colours sit on one line, no spare space */
.lbl-modal { max-width: 580px; }
.lbl-modal .cms-aside { width: 176px; padding: 0; background: none; border: none; }
.lbl-modal .cms-aside .lbl-prev { width: 100%; }
.lbl-modal .lbl-pal { gap: 7px; flex-wrap: nowrap; }
.lbl-modal .lbl-sw { width: 28px; height: 28px; flex: none; }
.cms-modal.lbl-modal { width: 600px; max-width: calc(100vw - 32px); }
.lbl-modal .cms-body.has-aside { grid-template-columns: minmax(0, 1fr) 160px; gap: 24px; }
.lbl-modal .cms-aside { width: auto; }
@media (max-width: 640px) { .lbl-modal .lbl-pal { flex-wrap: wrap; } }
.lc-grid { width: 100%; box-sizing: border-box; }
/* Card Labels: a quiet one-line note above the list */
.lbl-note { display: flex; align-items: center; gap: 10px; max-width: none; margin: 0 0 12px; padding: 9px 14px; border-radius: 8px; background: #fbf7f2; border: 1px solid #f0e6da; font-size: .8rem; color: var(--inkm); }
.lbl-note-i { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.3px solid #d8b48f; color: var(--or); font: italic 700 10px/15px Georgia, serif; text-align: center; background: #fff; }
/* Folded "More options": a clear toggle; what it opens sits in a soft panel; section names in normal case; field titles as everywhere else */
.cms-setcard.is-stack details.cms-more.is-section > summary { padding: 14px 0 10px; font-size: .84rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.cms-setcard.is-stack details.cms-more.is-section > summary::after { content: '▸'; color: var(--or); }
.cms-setcard.is-stack details.cms-more.is-section > summary:hover { color: var(--or); }
.cms-setcard.is-stack details.cms-more.is-section > .cms-form { padding: 6px 16px 10px; margin-bottom: 6px; border-radius: 10px; background: #fbf8f4; border: 1px solid #f0e8de; }
.cms-setcard details.cms-more.is-section > .cms-form > .cms-head { padding: 12px 0 0; border: none; font-size: .86rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
.cms-setcard details.cms-more.is-section > .cms-form > .cms-head + .fg { padding-top: 6px; }
.cms-setcard details.cms-more.is-section > .cms-form > .fg + .cms-head { margin-top: 8px; border-top: 1px solid #ece3d8; padding-top: 16px; }
/* Website Products: SKU in its own column (fixed-width font so codes line up); under the name only on a phone */
.pl-c-sku { width: 92px; white-space: nowrap; }
.pl-table td.pl-c-sku .pl-sku { font-size: .83rem; color: var(--ink); font-weight: 700; }   /* as document numbers in the other lists */
.pl-sku-m { display: none; }
@media (max-width: 768px) { .pl-c-sku, .pl-table td.pl-c-sku { display: none; } .pl-sku-m { display: inline; } }
/* The bulk bar is fully out of sight until products are ticked (it peeked up as a dark shape) */
.pl-bulk { transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
.pl-bulk.open { transform: translate(-50%, 0); visibility: visible; transition: transform .2s ease, visibility 0s; }
/* "Showing 1–50 of 281" at the top of the table, as in the back office */
.pl-showing { font-size: .78rem; color: var(--inkl); padding: 8px 14px 4px; }
/* With the SKU column the table still fits: the name wraps instead of pushing the width */
.pl-prod { min-width: 200px; }
.pl-c-sku { width: 84px; }
/* Pagination at the foot of the products table */
.pl-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid #f2eee7; margin: 0; }
.pl-pager[hidden] { display: none; }
.pl-per-l { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--inkl); }
.pl-per { height: 30px; padding: 0 8px; border: 1px solid var(--bd); border-radius: 7px; background: #fff; font: inherit; font-size: .8rem; color: var(--ink); }
.pl-pages { display: flex; align-items: center; gap: 4px; }
.pl-pg { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; font: inherit; font-size: .82rem; font-weight: 600; color: var(--inkm); cursor: pointer; }
.pl-pg:hover:not(:disabled):not(.is-on) { border-color: var(--or); color: var(--or); }
.pl-pg.is-on { background: var(--or); border-color: var(--or); color: #fff; cursor: default; }
.pl-pg:disabled { opacity: .4; cursor: default; }
.pl-gap { padding: 0 4px; color: var(--inkl); }
/* Section titles inside More options look like the product SEO tab's (small orange capitals) */
.cms-setcard details.cms-more.is-section > .cms-form > .cms-head { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--or); }
/* CMS popups scroll inside their body, so the popup itself keeps no empty scrollbar strip on the right */
.cms-modal { scrollbar-gutter: auto; overflow: hidden; }
/* A message box nudges when clicked outside (it only closes with its buttons or ×) */
@keyframes cmsNudge { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.02); } 70% { transform: scale(.995); } }
.cms-dlg.is-nudge { animation: cmsNudge .25s ease; }
@media (prefers-reduced-motion: reduce) { .cms-dlg.is-nudge { animation: none; } }
/* Banners */
.bn-head { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.bn-head h3 { margin: 0; }
.bn-head:first-child { margin-top: 0; }
.bn-link select, .bn-link input { width: 100%; }
.bn-link input { margin-top: 8px; }
.bn-link input[hidden] { display: none; }
.bn-prev { margin-bottom: 4px; }
.bn-prev-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bn-prev-tabs { display: inline-flex; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.bn-prev-tabs button { border: none; background: #fff; padding: 5px 12px; font: 600 .74rem 'DM Sans', sans-serif; color: var(--inkm); cursor: pointer; }
.bn-prev-tabs button.is-on { background: var(--or); color: #fff; }
.bn-prev-frame { border-radius: 10px; overflow: hidden; border: 1px solid var(--bd); background: #f6f2ec; }
.bn-prev-frame.is-phone { width: 240px; margin: 0 auto; border-radius: 18px; border: 6px solid #2c2a26; }
.bn-prev-stage { position: relative; width: 100%; background: #fbf8f4 center / cover no-repeat; overflow: hidden; }
.bn-prev-stage img { position: absolute; height: auto; }
.bn-prev-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--inkl); }
.cms-setcard.is-stack .cms-form > .fg.cms-live-f, .cms-setcard.is-stack .cms-form > .cms-live { padding-top: 0; }
/* Tooltips take no room while hidden (they made popups scroll sideways); they fade in on hover */
@keyframes cmsTipIn { from { opacity: 0; } to { opacity: 1; } }
.cms-tip-b { display: none; }
.cms-tip:hover .cms-tip-b, .cms-tip:focus-visible .cms-tip-b { display: block; opacity: 1; visibility: visible; animation: cmsTipIn .12s ease; }
/* Banner preview: a sensible size, centred */
.bn-prev-frame { max-width: 520px; margin: 0 auto; }
.bn-prev-frame.is-phone { width: 220px; }
/* "Shown" / "Hidden" beside a row's switch, so its meaning is plain */
.cat-sw { gap: 8px; min-width: 112px; }
.cat-sw-t { font-size: .74rem; font-weight: 600; color: var(--inkl); min-width: 42px; }
.cat-sw-t.is-on { color: var(--gn); }
/* Banners: bigger pictures with their play number */
.bn-thumb { position: relative; display: inline-flex; flex: none; }
.cms-banners .bn-thumb .cms-thumb { width: 168px; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; }
.cms-banners .bn-thumb .cms-mini-stage { width: 168px; border-radius: 8px; }
.bn-no { position: absolute; top: -6px; left: -6px; z-index: 5; width: 22px; height: 22px; border-radius: 50%; background: var(--or); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
/* Phone preview: the picture scaled down inside a phone */
.bn-prev-frame.is-phone { width: 230px; padding: 70px 0; background: #fff; }
/* Phone preview: a tall phone, a stand-in header, the slide, then stand-in page content */
.bn-prev-frame.is-phone { position: relative; width: 190px; height: 380px; padding: 52px 0 0; border-radius: 26px; border: 7px solid #2c2a26; background: #fff; box-sizing: border-box; }
.bn-prev-frame.is-phone::before { content: ''; position: absolute; left: 10px; right: 10px; top: 14px; height: 22px; border-radius: 6px; background: #f3ede6; }
.bn-prev-frame.is-phone::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 16px; height: 150px; border-radius: 8px;
    background: linear-gradient(#f3ede6, #f3ede6) 0 0 / 70% 12px no-repeat, linear-gradient(#f6f2ec, #f6f2ec) 0 24px / 100% 52px no-repeat, linear-gradient(#f6f2ec, #f6f2ec) 0 88px / 100% 52px no-repeat; }
/* Undo toast */
.save-toast.has-undo { gap: 10px; padding-right: 8px; }
.save-toast-undo { margin-left: 6px; border: 1px solid rgba(255,255,255,.5); background: none; color: #fff; border-radius: 6px; padding: 3px 10px; font: 700 .76rem 'DM Sans', sans-serif; cursor: pointer; }
.save-toast-undo:hover { background: rgba(255,255,255,.18); }
/* ⋯ menu on a row */
.cms-more-btn { width: 32px; height: 30px; margin-left: 6px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; color: var(--inkm); font-size: 1rem; line-height: 1; cursor: pointer; }
.cms-more-btn:hover, .cms-more-btn[aria-expanded="true"] { border-color: var(--or); color: var(--or); }
.cms-menu { position: fixed; z-index: 700; min-width: 170px; padding: 6px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 12px 32px rgba(60,40,20,.16); }
.cms-menu[hidden] { display: none; }
.cms-menu-i { display: block; width: 100%; padding: 8px 12px; border: none; border-radius: 7px; background: none; text-align: left; font: 500 .84rem 'DM Sans', sans-serif; color: var(--ink); cursor: pointer; text-decoration: none; box-sizing: border-box; }
.cms-menu-i:hover { background: #f6f1ea; }
.cms-menu-i.is-danger { color: var(--rd); }
.cms-menu-i.is-danger:hover { background: #fdecea; }
/* Column titles over a list */
.cms-lh { display: flex; align-items: center; gap: 0; padding: 0 12px 6px 46px; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--inkl); }
.cms-lh-c:first-child { flex: 1; }
.cms-lh-c.is-count { width: 118px; text-align: right; padding-right: 10px; box-sizing: border-box; }
.cms-lh-c.is-status { width: 160px; padding-left: 16px; box-sizing: border-box; }
.cms-lh-c.is-act { width: 96px; }
/* Friendly empty list */
.cms-empty.is-friendly { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; }
.cms-empty-art { width: 70px; height: 70px; }
.cms-list > .cms-lh { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid #f2eee7; }
/* The switch alone under its "On website" column title */
.cat-sw { min-width: 0; }
.cms-lh-c.is-status { width: 92px; padding-left: 12px; }
/* Row controls, tidy: the switch alone in a fixed column (title centred over it), then Edit and ⋯ together */
.cat-sw { border: none !important; padding: 0 !important; margin: 0 !important; height: auto; width: 96px; justify-content: center; }
#cat-list .cms-item-act, #tag-list .cms-item-act, .cms-banners .cms-item-act { gap: 0; }
.cms-item-act > .btn { margin-left: 8px; }
.cms-lh-c.is-status { width: 96px; padding: 0; text-align: center; }
.cms-lh-c.is-act { width: 94px; }
.cms-lh-c.is-count { width: 104px; padding-right: 10px; }
.cms-lh-c.is-count { padding-right: 24px; width: 118px; }
.cms-note.bn-made-of { margin: 4px 0 2px; padding: 9px 14px; border-radius: 8px; background: #fbf7f2; border: 1px solid #f0e6da; font-size: .8rem; color: var(--inkm); }
/* Banner popup: fields on the left, the preview in a side panel that stays in view */
.cms-modal.bn-modal { max-width: 1040px; width: calc(100vw - 48px); }
.bn-modal .cms-body.has-aside { grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; }
.bn-modal .cms-aside { background: #fbf8f4; border: 1px solid #f0e8de; border-radius: 12px; padding: 14px; }
.bn-modal .bn-prev-frame { max-width: none; }
.bn-modal .bn-prev-frame.is-phone { margin: 4px auto 0; }
.bn-prev-note { margin: 8px 0 0; font-size: .74rem; color: var(--inkl); text-align: center; }
@media (max-width: 900px) { .bn-modal .cms-body.has-aside { grid-template-columns: 1fr; } }
/* Banner popup: the slide on top is also the picture box; Name and Link below */
.cms-modal.bn-modal { max-width: 820px; width: calc(100vw - 48px); }
.bn-slide-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bn-slide-hd label { margin: 0 !important; }
.bn-frame { border-radius: 12px; overflow: hidden; border: 1px solid var(--bd); background: #f6f2ec; }
.bn-stage { position: relative; display: block; width: 100%; background: #fbf8f4 center / cover no-repeat; overflow: hidden; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
.bn-stage img { position: absolute; height: auto; pointer-events: none; }
.bn-stage.is-empty { border: 2px dashed #d8cbbb; border-radius: 12px; }
.bn-frame:has(.bn-stage.is-empty) { border: none; }
.bn-stage-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--inkm); }
.bn-stage-empty b { font-size: 1.4rem; color: var(--or); line-height: 1; }
.bn-stage-empty span { font-size: .86rem; font-weight: 600; }
.bn-stage-empty small { font-size: .74rem; color: var(--inkl); }
.bn-stage-ov { position: absolute; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(28,24,20,.42); color: #fff; font-size: .86rem; font-weight: 600; opacity: 0; transition: opacity .15s; }
.bn-stage:hover .bn-stage-ov, .bn-stage.is-drop .bn-stage-ov { opacity: 1; }
.bn-stage.is-drop { outline: 3px solid var(--or); outline-offset: -3px; }
.bn-stage-x { z-index: 95; top: 8px; right: 8px; width: 26px; height: 26px; }
/* Phone view: the slide inside a phone, near the top */
.bn-frame.is-phone { position: relative; width: 200px; height: 400px; margin: 0 auto; padding: 54px 0 0; border-radius: 28px; border: 7px solid #2c2a26; background: #fff; box-sizing: border-box; }
.bn-frame.is-phone::before { content: ''; position: absolute; left: 10px; right: 10px; top: 14px; height: 24px; border-radius: 6px; background: #f3ede6; }
.bn-frame.is-phone::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 16px; height: 160px; border-radius: 8px;
    background: linear-gradient(#f3ede6, #f3ede6) 0 0 / 70% 12px no-repeat, linear-gradient(#f6f2ec, #f6f2ec) 0 24px / 100% 56px no-repeat, linear-gradient(#f6f2ec, #f6f2ec) 0 92px / 100% 56px no-repeat; }
.bn-frame.is-phone .bn-stage-ov { display: none; }
.cms-setcard.is-stack .cms-form > .fg.bn-slide { padding-top: 4px; }
.bn-frame.is-phone .bn-stage-x { display: none; }
/* Reset changes: a quiet button, active only after a change */
.cms-btn-reset { margin-right: 4px; color: var(--inkm); }
.cms-btn-reset:disabled { opacity: .4; cursor: default; }
.cms-btn-reset:not(:disabled):hover { color: var(--or); }
/* Animation editor */
.ly-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ly-hd-t { display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inkm); }
.ly-play { padding: 5px 12px; }
.ly-stage .cms-layer.is-sel { outline: 2px dashed var(--or); outline-offset: 2px; }
.ly-rot { position: absolute; left: 50%; top: -30px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--or); cursor: grab; }
.ly-rot::after { content: ''; position: absolute; left: 50%; top: 14px; width: 2px; height: 14px; margin-left: -1px; background: var(--or); }
.ly-rot:active { cursor: grabbing; }
/* the strip of moving pictures (right = in front) */
.ly-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ly-chip { position: relative; width: 58px; height: 58px; padding: 4px; border: 1.5px solid var(--bd); border-radius: 10px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ly-chip img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.ly-chip:hover { border-color: #d3c3b0; }
.ly-chip.is-on { border-color: var(--or); box-shadow: 0 0 0 3px rgba(224,120,32,.15); }
.ly-chip-link { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--or); color: #fff; font-size: .62rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.ly-add { flex-direction: column; gap: 0; border-style: dashed; color: var(--inkm); font-size: .7rem; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; }
.ly-add b { font-size: 1rem; color: var(--or); line-height: 1; }
.ly-add:hover { border-color: var(--or); color: var(--or); }
/* the picked picture's settings */
.ly-panel { border: 1px solid var(--bd); border-radius: 10px; background: #fff; padding: 12px 14px; }
.ly-none { margin: 0; font-size: .8rem; color: var(--inkl); }
.ly-panel-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ly-panel-hd img { width: 30px; height: 30px; object-fit: contain; border: 1px solid var(--bd); border-radius: 6px; padding: 2px; background: #fff; }
.ly-panel-hd b { font-size: .84rem; }
.ly-del { margin-left: auto; color: var(--rd); }
.ly-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 10px; }
.ly-f { display: flex; flex-direction: column; gap: 4px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--inkm); }
.ly-f select, .ly-f input { height: 34px; padding: 0 8px; border: 1px solid var(--bd); border-radius: 7px; font: 400 .84rem 'DM Sans', sans-serif; text-transform: none; letter-spacing: 0; color: var(--ink); background: #fff; width: 100%; box-sizing: border-box; }
.ly-num { position: relative; display: block; }
.ly-num i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 500; color: var(--inkl); font-size: .76rem; }
.ly-num input { padding-right: 22px; }
.ly-link { margin-top: 12px; }
@media (max-width: 640px) { .ly-grid { grid-template-columns: 1fr 1fr; } }
/* ▶ Play: the entrance animations, as on the website */
@keyframes lyFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lyUp { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: none; } }
@keyframes lyGrow { from { opacity: 0; transform: scale(var(--s0, .9)); } to { opacity: 1; transform: none; } }
@keyframes lyUpGrow { from { opacity: 0; transform: translateY(8%) scale(var(--s0, .9)); } to { opacity: 1; transform: none; } }
.cms-layer.ly-anim { animation: lyFade var(--dur, 600ms) ease both; animation-delay: var(--d, 0ms); }
.cms-layer.ly-anim[data-anim="fade-up"] { animation-name: lyUp; }
.cms-layer.ly-anim[data-anim="fade-scale"] { animation-name: lyGrow; }
.cms-layer.ly-anim[data-anim="fade-up-scaled"] { animation-name: lyUpGrow; }
.ly-stage { overflow: visible; margin-top: 30px; }
/* Tooltips float over the page (placed by script): never stretch a popup; open left when there is no room */
.cms-tip-b { position: fixed; transform: translateY(-50%); z-index: 1000; }
.cms-tip-b.is-left::after { right: auto; left: 100%; border-right-color: transparent; border-left-color: #2c2a26; }
/* The slide area keeps one height when switching Computer / Phone (the phone's height) */
.bn-view { height: 410px; display: flex; align-items: center; justify-content: center; }
.bn-view > .bn-frame:not(.is-phone) { width: 100%; max-height: 410px; }
.bn-view > .bn-frame:not(.is-phone) .bn-stage { max-height: 410px; }
/* No lone word on a last line: the browser rebalances short texts (tooltips, hints, notes, message boxes) */
.cms-tip-b, .hint, .cms-note, .lbl-note, .cms-dlg-m, .cms-dlg-list, .cms-empty, .catp-none, .ly-none, .bn-prev-note, .cms-switch-h, .login-note { text-wrap: pretty; }
/* The back office's own date picker */
.dp-btn { width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--bd); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font: inherit; font-size: .86rem; color: var(--ink); box-sizing: border-box; }
.dp-btn:hover { border-color: #c9bdae; }
.dp-btn[aria-expanded="true"], .dp-btn:focus-visible { border-color: var(--or); box-shadow: 0 0 0 3px rgba(224,120,32,.12); outline: none; }
.dp-v { flex: 1; }
.dp-v.is-empty { color: var(--inkl); }
.dp-ico { width: 16px; height: 16px; border: 1.6px solid var(--inkl); border-radius: 3px; position: relative; flex: none; }
.dp-ico::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 1.6px solid var(--inkl); }
.dp-panel { position: fixed; z-index: 800; width: 290px; padding: 12px; background: #fff; border: 1px solid var(--bd); border-radius: 12px; box-shadow: 0 14px 36px rgba(60,40,20,.18); font-family: 'DM Sans', sans-serif; }
.dp-panel[hidden] { display: none; }
.dp-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-hd b { font-size: .9rem; font-weight: 700; color: var(--ink); }
.dp-nav { width: 30px; height: 30px; border: none; border-radius: 8px; background: none; font-size: 1.2rem; color: var(--inkm); cursor: pointer; }
.dp-nav:hover { background: #f6f1ea; color: var(--or); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { text-align: center; font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: var(--inkl); padding: 4px 0; text-transform: uppercase; }
.dp-d { height: 34px; border: none; border-radius: 8px; background: none; font: 500 .84rem 'DM Sans', sans-serif; color: var(--ink); cursor: pointer; }
.dp-d:hover { background: #f6f1ea; }
.dp-d.is-today { box-shadow: inset 0 0 0 1.5px var(--or); color: var(--or); font-weight: 700; }
.dp-d.is-on { background: var(--or); color: #fff; box-shadow: none; font-weight: 700; }
.dp-time { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0ebe4; }
.dp-tl { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--inkm); margin-right: auto; }
.dp-time select { height: 32px; padding: 0 6px; border: 1px solid var(--bd); border-radius: 7px; background: #fff; font: inherit; font-size: .84rem; }
.dp-time b { color: var(--inkl); }
.dp-ap { display: inline-flex; border: 1px solid var(--bd); border-radius: 7px; overflow: hidden; margin-left: 4px; }
.dp-ap button { border: none; background: #fff; padding: 6px 9px; font: 600 .74rem 'DM Sans', sans-serif; color: var(--inkm); cursor: pointer; }
.dp-ap button.is-on { background: var(--or); color: #fff; }
.dp-ft { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.dp-ft .btn { margin-left: auto; }
.dp-link { border: none; background: none; padding: 6px 8px; border-radius: 6px; font: 600 .78rem 'DM Sans', sans-serif; color: var(--inkm); cursor: pointer; }
.dp-link:hover { color: var(--or); background: #f6f1ea; }
/* "More options": a clear bar (title, what is inside, a chevron); the opened content joins it as one panel */
.cms-setcard.is-stack .cms-form > details.cms-more.is-section { margin-top: 14px; border-top: none; }
.cms-setcard.is-stack details.cms-more.is-section > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 10px; background: #fff; font-size: .86rem; font-weight: 600; color: var(--ink); transition: border-color .12s, background .12s; }
.cms-setcard.is-stack details.cms-more.is-section > summary:hover { border-color: #d3c3b0; background: #fdfbf8; color: var(--ink); }
.cms-setcard.is-stack details.cms-more.is-section > summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--inkl); border-bottom: 2px solid var(--inkl); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.cms-setcard.is-stack details.cms-more.is-section[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--or); }
.cms-more-sum { font-size: .76rem; font-weight: 500; color: var(--inkl); }
.cms-setcard.is-stack details.cms-more.is-section[open] > summary { border-radius: 10px 10px 0 0; border-bottom-color: #f0e8de; background: #fdfbf8; }
.cms-setcard.is-stack details.cms-more.is-section[open] > .cms-form { border-radius: 0 0 10px 10px; border: 1px solid var(--bd); border-top: none; margin-top: 0; }
/* Animation editor: pictures stay inside the slide; the turn knob sits just inside the picture's top edge */
.ly-stage { overflow: hidden; margin-top: 0; }
.ly-rot { top: 6px; }
.ly-rot::after { display: none; }
/* "More options": a small rounded button with a gear; what it opens sits below on white, after a thin line */
.cms-setcard.is-stack .cms-form > details.cms-more.is-section { margin-top: 10px; border: none; }
.cms-setcard.is-stack details.cms-more.is-section > summary { display: inline-flex; align-items: center; gap: 7px; width: auto; padding: 7px 14px; border: 1px solid var(--bd); border-radius: 999px; background: #fff; font-size: .8rem; font-weight: 600; color: var(--inkm); cursor: pointer; transition: border-color .12s, color .12s; }
.cms-setcard.is-stack details.cms-more.is-section > summary:hover { border-color: var(--or); color: var(--or); background: #fff; }
.cms-setcard.is-stack details.cms-more.is-section > summary::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.cms-setcard.is-stack details.cms-more.is-section > summary::after { content: ''; margin: 0 0 0 2px; width: 6px; height: 6px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); }
.cms-setcard.is-stack details.cms-more.is-section[open] > summary { border-color: #e6c3a1; color: var(--or); background: #fff7ef; border-radius: 999px; border-bottom-color: #e6c3a1; }
.cms-setcard.is-stack details.cms-more.is-section[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.cms-setcard.is-stack details.cms-more.is-section > .cms-form, .cms-setcard.is-stack details.cms-more.is-section[open] > .cms-form { margin-top: 14px; padding: 6px 0 0; border: none; border-top: 1px solid #f0ebe4; border-radius: 0; background: none; }

/* Side menu search. */
.sb-search{position:sticky;top:0;z-index:2;background:var(--sb);padding:12px 12px 4px;}
.sb-search input{width:100%;box-sizing:border-box;height:34px;padding:0 30px 0 32px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;color:#fff;font:400 .8rem 'DM Sans',sans-serif;outline:none;transition:border-color .15s,background-color .15s;}
.sb-search input::placeholder{color:rgba(255,255,255,.4);}
.sb-search input:focus{border-color:var(--or);background-color:rgba(255,255,255,.09);}
.sb-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center;}
.sb-search kbd{position:absolute;right:20px;top:50%;margin-top:4px;transform:translateY(-50%);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.15);border-radius:4px;font:500 .66rem 'DM Sans',sans-serif;color:rgba(255,255,255,.45);pointer-events:none;}
.sb-search input:focus ~ kbd,.sidebar.is-searching .sb-search kbd{display:none;}
.sb-none{padding:14px 20px;font-size:.78rem;color:rgba(255,255,255,.45);}
.sidebar.is-searching .sb-sec form{display:none;}
.nb[hidden],.sb-sec[hidden]{display:none!important;}
.nb.is-hit:not(.active){background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 2px 0 0 var(--or);}
/* The menu keeps its scrollbar's room while searching, so the box does not change width as it shortens. */
.sidebar{scrollbar-gutter:stable;}
.sb-search input{-webkit-appearance:none;appearance:none;}
.sb-search input{padding-right:10px;}
.sb-search input::-webkit-search-cancel-button{margin-right:0;}

/* Website → Pages: the page list on the left, the chosen page on the right. */
.pg-wrap{display:grid;grid-template-columns:196px minmax(0,1fr);gap:22px;align-items:start;}
.pg-nav{position:sticky;top:78px;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh);padding:8px;display:flex;flex-direction:column;gap:1px;}
.pg-nav-g{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--inkl);padding:10px 10px 4px;}
.pg-nav-g:first-child{padding-top:6px;}
.pg-nav-i{position:relative;display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:7px;background:none;font:inherit;font-size:.84rem;color:var(--inkm);cursor:pointer;transition:background-color .12s,color .12s;}
.pg-nav-i:hover{background:#f7f3ee;color:var(--ink);}
.pg-nav-i.is-on{background:#fff4ea;color:var(--or);font-weight:600;}
.pg-nav-i.is-on::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:var(--or);}
.pg-nav-i:focus-visible{outline:2px solid var(--or);outline-offset:-2px;}
.pg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 10px;}
.pg-head-t{display:flex;align-items:center;gap:6px;}
.pg-head h3{font-family:'Crimson Pro',serif;font-size:1.35rem;font-weight:600;}
.pg-view{text-decoration:none;flex-shrink:0;}
.pg-else{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 16px;font-size:.78rem;}
.pg-else-k{color:var(--inkl);margin-right:2px;}
.pg-else-a{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--bd);border-radius:999px;background:#fff;color:var(--inkm);text-decoration:none;transition:border-color .12s,color .12s;}
.pg-else-a b{font-weight:600;color:var(--ink);}
.pg-else-a:hover{border-color:#e6c3a1;}
.pg-else-a:hover b{color:var(--or);}
.pg-sec-t{display:flex;align-items:center;gap:6px;min-height:30px;}
.pg-ren{width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer;color:var(--inkl);display:inline-flex;align-items:center;justify-content:center;}
.pg-ren::before{content:'';width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center/contain no-repeat;}
.pg-ren:hover{background:#f4efe8;color:var(--or);}
.pg-ren:focus-visible{outline:2px solid var(--or);outline-offset:1px;}
.pg-random{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;padding:18px 14px;font-size:.84rem;color:var(--inkm);text-align:center;}
.cms-switch-l{display:flex;align-items:center;gap:6px;}
@media (max-width:900px){
  .pg-wrap{grid-template-columns:1fr;gap:14px;}
  .pg-nav{position:static;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:6px;scrollbar-width:none;}
  .pg-nav::-webkit-scrollbar{display:none;}
  .pg-nav-g{display:none;}
  .pg-nav-i{width:auto;flex:0 0 auto;white-space:nowrap;}
  .pg-nav-i.is-on::before{display:none;}
}
.pg-main .cms-kv{grid-template-columns:minmax(150px,210px) 1fr;gap:7px 18px;}
@media (max-width:620px){.pg-main .cms-kv{grid-template-columns:1fr;}}
.cms-item.pg-para .cms-item-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:400;color:var(--inkm);line-height:1.45;}
/* Group headings read as labels, not as pages: smaller, lighter, a line between groups. */
.pg-nav-g{font-size:.6rem;font-weight:600;letter-spacing:.12em;color:#b4aba1;padding:12px 10px 5px;}
.pg-nav-g:not(:first-child){margin-top:6px;border-top:1px solid #f1ece5;padding-top:14px;}
.pg-nav-i{color:var(--ink);}
.pg-nav-i:not(.is-on){font-weight:400;}
/* Link field: pick a page, or type another address. */
.cms-link select,.cms-link input{width:100%;}
.cms-link input{margin-top:8px;}
.cms-link input[hidden]{display:none;}
/* A group heading inside a card (Catalogue PDFs by group). */
.pg-group{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--or);margin:14px 2px 8px;}
.cms-section-hd + .pg-group{margin-top:2px;}
/* Menu search: a part of a screen ("FAQ — Page Content"). */
.nb-alias .nb-alias-t{display:flex;flex-direction:column;width:auto;text-align:left;font-size:inherit;line-height:1.25;}
.nb-alias .nb-alias-t small{font-size:.66rem;color:rgba(255,255,255,.4);margin-top:1px;}
.nb-alias:hover .nb-alias-t small,.nb-alias.is-hit .nb-alias-t small{color:rgba(255,255,255,.6);}

/* Site Details. */
.pg-kv dd{min-width:0;}
.pg-kv dd.sd-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sd-img{display:block;max-height:52px;max-width:220px;padding:6px 8px;border:1px solid #f0ebe4;border-radius:8px;background:#fff;}
.sd-copy{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:-4px 0 4px;}
.sd-orig{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;background:#f3efe9;color:var(--inkl);font-size:.66rem;font-weight:600;}
.cms-section .sd-switch{padding:10px 0;margin-bottom:6px;border-bottom:1px solid #f0ece4;}
.cms-section .sd-switch:last-child{border-bottom:0;margin-bottom:0;padding-bottom:2px;border-top:1px solid #f0ece4;margin-top:8px;}
.pg-nav-i{transition:none;}
.cms-section-hd > .btn{white-space:nowrap;flex-shrink:0;}
.cms-section-hd p{text-wrap:pretty;}
/* More room between a card's title (and its line) and what is inside. */
.pg-main .cms-section-hd{margin-bottom:18px;}

/* Page lists (Page Content, Site Details): a line icon per item; the chosen one on a soft orange pill. */
.pg-nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;}
.pg-nav-i::before{content:'';position:static;flex:0 0 16px;width:16px;height:16px;border-radius:0;background:currentColor;opacity:.55;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;}
.pg-nav-i:hover::before{opacity:.8;}
.pg-nav-i.is-on{background:#fff1e6;color:var(--or);font-weight:600;}
.pg-nav-i.is-on::before{display:block;position:static;top:auto;bottom:auto;left:auto;width:16px;border-radius:0;background:currentColor;opacity:1;}
.pg-nav-i:focus{outline:none;}
.pg-nav-i:focus-visible{outline:none;box-shadow:inset 0 0 0 2px rgba(224,120,32,.35);}
.pg-nav-i[data-key="business"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="whatsapp"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="social"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="look"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="colors"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='1' fill='%23000'/%3E%3Ccircle cx='17.5' cy='10.5' r='1' fill='%23000'/%3E%3Ccircle cx='8.5' cy='7.5' r='1' fill='%23000'/%3E%3Ccircle cx='6.5' cy='12.5' r='1' fill='%23000'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.6-.7 1.6-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.7-.4-1.1a1.6 1.6 0 0 1 1.6-1.7h2c3 0 5.6-2.5 5.6-5.6C22 6 17.5 2 12 2Z'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="seo"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="shop"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="header"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="footer"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 15h18'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="home"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="product"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 4.3 9 5.2'/%3E%3Cpath d='M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7Z'/%3E%3Cpath d='M3.3 7 12 12l8.7-5M12 22V12'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="customize-gifts"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7'/%3E%3Cpath d='M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="faq"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="catalogue"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="contact-us"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="privacy-notice"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="enquiry"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E");}
.pg-nav-i[data-key="notfound"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");}
@media (max-width:900px){.pg-nav-i::before{display:none;}}

/* Enquiries list: the Website Products look with links (server pages). */
a.pl-tab{text-decoration:none;}
a.pl-pg{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
span.pl-pg{display:inline-flex;align-items:center;justify-content:center;opacity:.4;cursor:default;}
.enq-from{font-weight:600;color:var(--ink);}
.pl-table td .pl-muted{font-size:.76rem;margin-top:1px;}
.pl-table a.btn,.ed a.btn,.topbar-actions a.btn{text-decoration:none;}
/* Enquiry page. */
.enq-kv dd{margin:0;word-break:break-word;}
.enq-link{color:var(--inkm);text-decoration:none;}
.enq-link:hover{color:var(--or);}
.enq-msg-t{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--inkl);margin:4px 0 6px;}
.enq-msg{white-space:pre-wrap;font-size:.88rem;line-height:1.6;background:#faf8f4;border:1px solid #f0ebe4;border-radius:8px;padding:10px 12px;margin:0;}
.enq-reply{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #f0ebe4;}
.enq-reply a.btn{text-decoration:none;}
.enq-wa{background:#25d366;border-color:#25d366;color:#fff;}
.enq-wa:hover{background:#1fb957;border-color:#1fb957;color:#fff;}
.enq-status{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.enq-st{height:34px;border:1.5px solid var(--bd);border-radius:8px;background:#fff;font:inherit;font-size:.82rem;font-weight:500;color:var(--inkm);cursor:pointer;}
.enq-st:hover:not(.is-on){border-color:var(--or);color:var(--or);}
.enq-st.is-on{background:var(--or);border-color:var(--or);color:#fff;font-weight:600;cursor:default;opacity:1;}

/* ---- Enquiries: list rows, status pills, initials, the enquiry page ---- */
.enq-av{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;letter-spacing:.02em;}
.enq-av.is-lg{flex-basis:52px;width:52px;height:52px;font-size:1rem;}
.enq-av-0{background:#fde9dc;color:#c25e1c;}.enq-av-1{background:#e3eefa;color:#2c6fad;}.enq-av-2{background:#e2f3ea;color:#2f7d58;}
.enq-av-3{background:#f1e6f8;color:#7b4aa0;}.enq-av-4{background:#fdf1d6;color:#9a6b00;}.enq-av-5{background:#e6eef0;color:#3f6670;}
.enq-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap;vertical-align:middle;}
.enq-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.enq-pill-new{background:#fff1e6;color:#d0661a;}.enq-pill-contacted{background:#e8f1fb;color:#2c6fad;}
.enq-pill-quoted{background:#e6f4ec;color:#2f7d58;}.enq-pill-closed{background:#f1efeb;color:#857d74;}

.enq-list{border-top:1px solid #f2eee7;}
.enq-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid #f2eee7;color:inherit;text-decoration:none;transition:background-color .1s;}
.enq-row:last-child{border-bottom:0;}
.enq-row:hover{background:#fdfbf8;}
.enq-row:focus-visible{outline:2px solid var(--or);outline-offset:-2px;}
.enq-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.enq-row-top{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:.88rem;}
.enq-row-top b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.enq-co{color:var(--inkl);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.enq-co::before{content:'· ';}
.enq-row-sub{font-size:.8rem;color:var(--inkm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.enq-row-sub i{font-style:normal;color:var(--inkl);}
.enq-row.is-new .enq-row-top b{font-weight:700;}
.enq-row-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.enq-row-meta{font-size:.74rem;color:var(--inkl);white-space:nowrap;}
.enq-row-go{flex:0 0 auto;color:#cbc3b9;font-size:1.3rem;line-height:1;}
.enq-row:hover .enq-row-go{color:var(--or);}
@media (max-width:640px){.enq-row-meta .mono{display:none;}.enq-row-go{display:none;}}

.enq-hero{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:var(--sh);padding:18px 20px;margin-bottom:18px;}
.enq-hero-who{flex:1;min-width:220px;}
.enq-hero-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:'Crimson Pro',serif;font-size:1.4rem;font-weight:600;line-height:1.2;}
.enq-hero-name .enq-pill{font-family:'DM Sans',sans-serif;}
.enq-hero-meta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:4px;font-size:.82rem;color:var(--inkm);}
.enq-hero-meta span+span::before{content:'·';margin:0 8px;color:#cbc3b9;}
.enq-hero-act{display:flex;gap:8px;flex-wrap:wrap;}
.enq-hero-act a.btn{text-decoration:none;}
.enq-card{padding:16px 18px;}
.enq-card-t{display:flex;align-items:center;gap:8px;font-family:'Crimson Pro',serif;font-size:1.05rem;font-weight:600;margin-bottom:12px;}
.enq-count{font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:600;background:#f0ece4;color:var(--inkm);border-radius:999px;padding:1px 8px;}
.enq-msg{white-space:pre-wrap;font-size:.9rem;line-height:1.65;color:var(--ink);background:#faf8f4;border:1px solid #f0ebe4;border-radius:8px;padding:12px 14px;margin:0;}
.enq-none{font-size:.84rem;color:var(--inkl);margin:0;}
.enq-items{width:100%;border-collapse:collapse;font-size:.84rem;}
.enq-items th{font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--inkl);text-align:left;padding:8px 10px;background:#faf9f6;border-bottom:1px solid var(--bd);white-space:nowrap;}
.enq-items td{padding:10px;border-bottom:1px solid #f2eee7;vertical-align:top;}
.enq-items tbody tr:last-child td{border-bottom:0;}
.enq-items .r{text-align:right;}
.enq-items .enq-p{font-weight:600;}
.enq-items tfoot td{border-top:1px solid var(--bd);border-bottom:0;font-weight:600;color:var(--inkm);}
.enq-q{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:.9rem;font-weight:600;}
.enq-q span:last-child{font-size:.76rem;font-weight:400;color:var(--inkl);}
.enq-note{font-size:.8rem;color:var(--inkm);line-height:1.5;margin:0 0 12px;text-wrap:pretty;}
.enq-note a{color:var(--or);}
.enq-quote{display:block;width:100%;text-align:center;text-decoration:none;}
.enq-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:.82rem;margin:0;}
.enq-dl dt{color:var(--inkl);}
.enq-dl dd{margin:0;text-align:right;word-break:break-word;}
.enq-hero-sub{margin-top:3px;font-size:.76rem;color:var(--inkl);}
/* Enquiry page: notes, history, quotation chip. */
.enq-sub{font-family:'DM Sans',sans-serif;font-size:.74rem;font-weight:400;color:var(--inkl);}
.enq-card-t .enq-sub{margin-left:2px;}
.enq-note-new{border:1.5px solid var(--bd);border-radius:10px;background:#fff;transition:border-color .12s;}
.enq-note-new:focus-within{border-color:var(--or);}
.enq-note-in{display:block;width:100%;box-sizing:border-box;border:0;outline:none;resize:vertical;min-height:52px;padding:10px 12px 4px;font:inherit;font-size:.86rem;background:none;}
.enq-note-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 8px 12px;}
.enq-notes{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.enq-ni{display:flex;gap:10px;}
.enq-av.enq-av-sm{flex-basis:30px;width:30px;height:30px;font-size:.68rem;background:#f0ece4;color:var(--inkm);}
.enq-note-b{flex:1;min-width:0;}
.enq-note-h{display:flex;align-items:baseline;gap:8px;font-size:.78rem;color:var(--inkl);}
.enq-note-h b{font-weight:600;color:var(--ink);font-size:.82rem;}
.enq-note-x{margin-left:auto;width:22px;height:22px;border:0;border-radius:6px;background:none;color:var(--inkl);font-size:1rem;line-height:1;cursor:pointer;opacity:0;}
.enq-ni:hover .enq-note-x,.enq-note-x:focus-visible{opacity:1;}
.enq-note-x:hover{background:#fbeaea;color:var(--rd);}
.enq-note-t{margin:3px 0 0;font-size:.86rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;}
.enq-tl{list-style:none;margin:0;padding:0 0 0 16px;position:relative;}
.enq-tl::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:1.5px;background:#ece6dd;}
.enq-tl li{position:relative;padding:0 0 12px;}
.enq-tl li:last-child{padding-bottom:0;}
.enq-tl li::before{content:'';position:absolute;left:-16px;top:5px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid #cfc6bb;}
.enq-tl li:first-child::before{border-color:var(--or);background:var(--or);}
.enq-tl-quoted::before{border-color:#3d9a6e!important;}
.enq-tl-t{display:block;font-size:.83rem;color:var(--ink);}
.enq-tl-m{display:block;font-size:.72rem;color:var(--inkl);margin-top:1px;}
.enq-chip{display:inline-block;padding:2px 9px;border-radius:6px;background:#f3efe9;font-size:.82rem;}
.enq-card p.enq-note a{text-decoration:none;font-weight:600;}
.enq-card p.enq-note a:hover{text-decoration:underline;}
/* Enquiries: date headings, the New dot, moving through the list. */
.enq-group{padding:14px 16px 6px;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--inkl);background:#fcfbf9;border-bottom:1px solid #f2eee7;}
.enq-row{position:relative;padding-left:22px;}
.enq-dot{position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;}
.enq-row.is-new .enq-dot{background:var(--or);box-shadow:0 0 0 3px #fff1e6;}
.enq-back{text-decoration:none;}
.enq-step{display:inline-flex;align-items:center;gap:4px;margin-left:6px;}
.enq-step-n{font-size:.78rem;color:var(--inkl);margin-right:6px;white-space:nowrap;}
.enq-step-b{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bd);border-radius:8px;background:#fff;color:var(--inkm);font-size:1.05rem;text-decoration:none;}
a.enq-step-b:hover{border-color:var(--or);color:var(--or);}
span.enq-step-b{opacity:.4;cursor:default;}
@media (max-width:640px){.enq-step-n{display:none;}}
/* Enquiry page: History shows 5; "Show all" scrolls the rest inside the card. New lines slide in, removed ones fade out. */
.enq-hist .enq-tl li.is-more{display:none;}
.enq-hist.is-open .enq-tl li.is-more{display:block;}
.enq-hist.is-open .enq-tl{max-height:300px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;}
.enq-hist.is-open .enq-tl::before{bottom:auto;height:calc(100% - 12px);}
.enq-tl-btn{display:block;margin-top:10px;padding:0;border:0;background:none;font:inherit;font-size:.76rem;font-weight:600;color:var(--or);cursor:pointer;}
.enq-tl-btn:hover{text-decoration:underline;}
.enq-tl-btn:focus{outline:none;}
.enq-tl-btn:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:4px;}
.enq-tl li.is-in,.enq-ni.is-in{animation:enq-in .35s ease-out;}
.enq-ni.is-out{opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s;}
@keyframes enq-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.enq-notes[hidden],.enq-none[hidden]{display:none;}
.sync-warn{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.sync-warn .btn{flex-shrink:0;}

/* ================================================================ Phones: the Website screens */
@media (max-width: 640px) {
  /* Website Products: each product a two-line card — picture, name and code; then price, switch, Edit. */
  .pl-table thead { display: none; }
  .pl-table, .pl-table tbody { display: block; }
  .pl-table tbody tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-template-areas: "chk main main main" ". price on act"; align-items: center; column-gap: 10px; row-gap: 8px; padding: 12px 12px; border-bottom: 1px solid #f2eee7; }
  .pl-table tbody tr:last-child { border-bottom: 0; }
  .pl-table td { display: block; padding: 0; border: 0 !important; }
  .pl-table td.pl-c-check { grid-area: chk; align-self: start; padding-top: 14px; }
  .pl-table td:not([class]) { grid-area: main; }
  .pl-table td.pl-c-price { grid-area: price; font-weight: 700; }
  .pl-table td.pl-c-on { grid-area: on; }
  .pl-table td.pl-c-act { grid-area: act; }
  .pl-table td.pl-c-sku, .pl-table td.pl-c-cat { display: none; }
  .pl-table tbody tr:hover td { background: none; }
  .pl-table td.pl-empty { grid-column: 1 / -1; }
  .pl-bar { gap: 8px; }
  .pl-bar select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .pl-search { flex-basis: 100%; max-width: none; }
  .fbar input.fb-q { flex-basis: 100%; max-width: none; }
  .fbar select { flex: 1 1 calc(50% - 4px); min-width: 0; max-width: none; }
  .pl-pager { justify-content: center; }
}
@media (max-width: 640px) {
  .pl-table td.pl-c-on { justify-self: end; text-align: right; }
  .pl-table tbody tr { grid-template-columns: 26px minmax(0, 1fr) auto auto; }
}
@media (max-width: 640px) {
  /* List rows: the name gets the room; it wraps instead of running under the buttons. */
  .cms-item { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .cms-item-main { min-width: 0; }
  .cms-item-title { overflow-wrap: anywhere; }
  .cms-item-act { gap: 6px; }
  /* Categories & Tags: tabs on their own line, buttons under them; the count shows its number only. */
  .cat-bar { flex-wrap: wrap; align-items: stretch; }
  .cat-bar .cat-tabs { flex-basis: 100%; }
  .cat-bar-r { margin-left: auto; padding: 8px 0; }
  .cat-count { width: auto; margin-right: 0; padding: 4px 8px; }
  .cat-count .cat-count-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #tag-list .cat-count { margin-right: 0; }
}
@media (max-width: 640px) {
  .cms-item-title { overflow-wrap: break-word; word-break: normal; }
  .cms-item .cms-thumb.is-sq { width: 36px; height: 36px; flex-basis: 36px; }
  .cms-item-main { gap: 10px; }
}

/* Edit inside the ⋯ menu: phones only (elsewhere the row has its own Edit button). */
.cms-menu-i.is-phone { display: none; }
@media (max-width: 768px) { .cms-menu-i.is-phone { display: block; font-weight: 600; } }
@media (max-width: 640px) {
  /* Banners: the picture across the row, its name under it; the switch and ⋯ beside the name. */
  .cms-banners .cms-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "grip pic pic" "grip text act"; align-items: center; row-gap: 8px; }
  .cms-banners .cms-item > .cms-grip { grid-area: grip; align-self: center; }
  .cms-banners .cms-item-main { display: contents; }
  .cms-banners .bn-thumb { grid-area: pic; width: 100%; max-width: none; }
  .cms-banners .bn-thumb .cms-thumb { width: 100% !important; max-width: none; }
  .cms-banners .cms-item-text { grid-area: text; min-width: 0; }
  .cms-banners .cms-item-act { grid-area: act; }
}
@media (max-width: 640px) {
  /* Popups: fields side by side stack; the slide preview keeps one (smaller) height for Computer and Phone. */
  .cms-modal .fr.c2, .cms-modal .fr.c3 { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bn-view { height: 260px; }
  .bn-view > .bn-frame:not(.is-phone), .bn-view > .bn-frame:not(.is-phone) .bn-stage { max-height: 260px; }
  .bn-frame.is-phone { width: 130px; height: 260px; padding-top: 34px; border-radius: 20px; border-width: 5px; }
  .bn-frame.is-phone::before { top: 9px; height: 16px; }
  .bn-frame.is-phone::after { bottom: 10px; height: 100px; }
}
@media (max-width: 900px) {
  .pg-wrap { grid-template-columns: minmax(0, 1fr); }
  .pg-main { min-width: 0; }
}
@media (max-width: 640px) {
  .pg-head { flex-wrap: wrap; }
  .pg-else { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .pg-else::-webkit-scrollbar { display: none; }
  .pg-else-a { flex: 0 0 auto; }
  .cms-section { padding: 14px 12px; }
  .pg-random { justify-content: flex-start; text-align: left; }
}
.pg-else-k { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 900px) { .pg-nav-i::before, .pg-nav-i.is-on::before { display: none; } }
@media (max-width: 640px) {
  /* Enquiry page: a short "←" back, the details one per line, the products table scrolls sideways if needed. */
  .enq-back .enq-back-t { display: none; }
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed-main, .ed-side { min-width: 0; }
  .enq-step { margin-left: 4px; }
  .enq-hero { padding: 14px; gap: 12px; }
  .enq-hero-name { font-size: 1.2rem; }
  .enq-hero-meta { flex-direction: column; gap: 2px; }
  .enq-hero-meta span + span::before { content: none; }
  .enq-hero-act { width: 100%; }
  .enq-hero-act .btn { flex: 1; text-align: center; }
  .enq-card { padding: 14px 12px; overflow-x: auto; }
  .enq-items { font-size: .78rem; min-width: 460px; }
}
@media (max-width: 900px) {
  /* Popups with a side panel (product, card label): the panel goes under the form. */
  .cms-product-tabs .cms-body.has-aside, .lbl-modal .cms-body.has-aside { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cms-product-tabs .cms-aside, .lbl-modal .cms-aside { position: static; order: 2; }
}
@media (max-width: 900px) {
  .cms-product-tabs .cms-aside .pv-card { display: block; max-width: 240px; }
}
/* Menu search: our own clear button; the browser's own and its autofill colour are hidden. */
.sb-search { position: sticky; margin: 0; }
.sb-search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.sb-search input { padding-right: 32px; }
.sb-search input:-webkit-autofill, .sb-search input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #2c2c2c inset; caret-color: #fff; }
.sb-clear { position: absolute; right: 20px; top: 50%; margin-top: 4px; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: rgba(255,255,255,.6); font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sb-clear:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-clear[hidden] { display: none; }
.sidebar.is-searching .sb-search kbd { display: none; }
/* A password box's own little form (see admin.js): no box of its own, the layout stays as it was. */
.pw-iso { display: contents; }

/* ---- Settings → Roles & Permissions ---- */
.rp-modal{max-width:1040px;width:calc(100% - 32px);display:flex;flex-direction:column;height:min(780px,calc(100vh - 48px));padding:0;overflow:hidden;}
.rp-modal .modal-hd{margin:0;padding:16px 22px;border-bottom:1px solid var(--bd);}
.rp-modal .modal-hd>span{display:inline-flex;gap:8px;align-items:center;}
.rp-modal fieldset{border:none;margin:0;padding:0;min-width:0;}
.rp-body{display:grid;grid-template-columns:200px 1fr;min-height:0;flex:1;overflow:hidden;}
.rp-roles{border-right:1px solid var(--bd);padding:14px 12px;overflow-y:auto;background:#fbfaf7;display:flex;flex-direction:column;gap:2px;}
.rp-roles-lbl{font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--inkl);padding:4px 10px 6px;}
.rp-role{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;padding:8px 10px;border:none;border-radius:7px;background:none;font:inherit;font-size:.85rem;color:var(--inkm);cursor:pointer;text-align:left;transition:background .12s,color .12s;}
.rp-role:hover{background:#f1ede6;color:var(--ink);}
.rp-role.is-on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08),inset 3px 0 0 var(--or);}
.rp-role.is-drag{opacity:.45;}
.rp-role.is-over{box-shadow:inset 0 2px 0 var(--or);}
.rp-grip{color:var(--inkl);font-size:.85rem;cursor:grab;opacity:0;transition:opacity .12s;}
.rp-role:hover .rp-grip{opacity:1;}
.rp-add{display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;border:1px dashed var(--bd);border-radius:7px;background:none;font:inherit;font-size:.82rem;color:var(--inkm);cursor:pointer;}
.rp-add:hover{border-color:var(--or);color:var(--or);}
.rp-add-ic{font-size:1rem;line-height:1;}
.rp-add-box{margin-top:6px;padding:10px;border:1px solid var(--bd);border-radius:8px;background:#fff;}
.rp-add-box input{width:100%;padding:7px 9px;border:1.5px solid var(--bd);border-radius:6px;font:inherit;font-size:.84rem;outline:none;}
.rp-add-box input:focus{border-color:var(--or);}
.rp-add-btns{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;}
.rp-add-err{font-size:.72rem;color:var(--rd);margin-top:6px;}
.rp-add-err:empty{display:none;}
.rp-roles-tip{font-size:.72rem;color:var(--inkl);line-height:1.5;padding:12px 10px 4px;margin-top:auto;}
.rp-main{overflow-y:auto;padding:20px 24px 24px;background:#fff;}
.rp-empty{color:var(--inkl);font-size:.86rem;padding:40px 0;text-align:center;}
.rp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.rp-head-l{min-width:0;flex:1;}
.rp-title{font-family:'Crimson Pro',serif;font-size:1.4rem;font-weight:600;line-height:1.2;}
.rp-sub{font-size:.78rem;color:var(--inkl);margin-top:3px;}
.rp-rename-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.rp-rename{font-family:'Crimson Pro',serif;font-size:1.2rem;font-weight:600;padding:3px 9px;border:1.5px solid var(--or);border-radius:6px;outline:none;max-width:260px;}
.rp-menu{position:relative;}
.rp-menu-btn{width:34px;height:34px;border:1px solid var(--bd);border-radius:8px;background:#fff;font-size:1.1rem;line-height:1;color:var(--inkm);cursor:pointer;}
.rp-menu-btn:hover,.rp-menu.is-open .rp-menu-btn{border-color:var(--or);color:var(--or);}
.rp-menu-list{display:none;position:absolute;right:0;top:40px;z-index:6;min-width:200px;max-height:360px;overflow-y:auto;background:#fff;border:1px solid var(--bd);border-radius:9px;box-shadow:var(--shl);padding:6px;}
.rp-menu.is-open .rp-menu-list{display:block;}
.rp-menu-list button{display:block;width:100%;text-align:left;padding:7px 10px;border:none;border-radius:6px;background:none;font:inherit;font-size:.82rem;color:var(--ink);cursor:pointer;}
.rp-menu-list button:hover{background:#f6f3ee;}
.rp-menu-list button.is-danger{color:var(--rd);}
.rp-menu-lbl{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--inkl);padding:6px 10px 3px;}
.rp-preview{height:34px;white-space:nowrap;}
.rp-menu-note{font-size:.8rem;color:var(--inkl);padding:6px 10px;}
.rp-menu-sep{height:1px;background:var(--bd);margin:6px 4px;}
.rp-menu-sep:last-child{display:none;}
.rp-lock{background:#faf9f6;border:1px solid var(--bd);border-radius:9px;padding:10px 14px;font-size:.8rem;color:var(--inkm);margin-bottom:14px;}
.rp-rules{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.rp-rule{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border:1px solid var(--bd);border-radius:9px;cursor:pointer;background:#fff;}
.rp-rule:has(input:checked){border-color:#f0c49b;background:#fffaf5;}
.rp-rule input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--or);cursor:pointer;flex-shrink:0;}
.rp-rule b{display:block;font-size:.84rem;font-weight:600;color:var(--ink);}
.rp-rule span{font-size:.75rem;color:var(--inkm);}
.rp-tbl-wrap{border:1px solid var(--bd);border-radius:10px;overflow:clip;}   /* clip, not auto: the header then sticks to the scrolling panel */
.rp-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.84rem;}
.rp-tbl th,.rp-tbl td{padding:8px 10px;border-bottom:1px solid #f1ede6;background:#fff;vertical-align:middle;text-align:left;text-transform:none;letter-spacing:0;}
.rp-tbl thead th{position:sticky;top:-20px;z-index:2;background:#faf8f4;box-shadow:0 1px 0 var(--bd);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--inkm);border-bottom:1px solid var(--bd);}
.rp-tbl .rp-c{width:74px;text-align:center;}
.rp-tbl .rp-c-name{min-width:200px;}
.rp-tbl .rp-c-more{min-width:200px;}
.rp-tbl .rp-sec-row th,.rp-tbl .rp-sec-row td{background:#f3eee6;border-top:1px solid #e6dfd4;border-bottom:1px solid #e6dfd4;padding-top:10px;padding-bottom:10px;}
.rp-tbl tbody:first-of-type .rp-sec-row th,.rp-tbl tbody:first-of-type .rp-sec-row td{border-top:none;}
.rp-tbl .rp-sec-row th{font-family:'Crimson Pro',serif;font-size:1.02rem;font-weight:700;color:var(--ink);box-shadow:inset 3px 0 0 var(--or);padding-left:14px;}
.rp-tbl tbody tr:not(.rp-sec-row):hover td{background:#fdfbf8;}
.rp-tbl input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--or);cursor:pointer;vertical-align:middle;}
.rp-tbl input[type=checkbox]:disabled{cursor:default;opacity:.4;}
.rp-name{display:block;color:var(--ink);}
.rp-note{display:block;font-size:.7rem;color:var(--inkl);margin-top:1px;}
.rp-tbl tr.is-off .rp-name{color:var(--inkm);}
.rp-tbl tr.is-shared td{background:#fffcf8;}
.rp-tbl tr.is-shared .rp-name{font-style:italic;}
.rp-na{color:#d4cec5;}
.rp-cap{display:block;font-size:.64rem;color:var(--inkl);margin-top:3px;line-height:1.2;}
.rp-more{display:inline-flex;align-items:center;gap:6px;margin:2px 10px 2px 0;font-size:.78rem;color:var(--inkm);cursor:pointer;white-space:nowrap;}
.rp-more.is-on{color:var(--ink);}
fieldset.is-locked .rp-rule,fieldset.is-locked .rp-more{cursor:default;}
.rp-foot{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--bd);background:#fff;}
.rp-foot-note{margin-right:auto;font-size:.76rem;color:var(--inkl);}
.rp-foot-note.is-dirty{color:var(--or);font-weight:500;}
.rp-foot .btn-p{background:var(--or);color:#fff;}
.rp-foot .btn-p:hover{background:#c96a18;border-color:#c96a18;}
.rp-foot .btn-p:disabled{background:#e8e2d9;border-color:#e8e2d9;color:#fff;cursor:default;}
@media (max-width:768px){
  .rp-modal{padding:0!important;height:calc(100vh - 24px);}
  .rp-modal .modal-hd{padding:12px 14px;}
  .rp-body{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .rp-roles{position:relative;flex-direction:row;align-items:center;gap:6px;border-right:none;border-bottom:1px solid var(--bd);overflow-x:auto;padding:10px 12px;scrollbar-width:none;}
  .rp-roles::-webkit-scrollbar{display:none;}
  .rp-roles-lbl,.rp-roles-tip,.rp-grip{display:none;}
  .rp-role{width:auto;white-space:nowrap;border:1px solid var(--bd);border-radius:20px;padding:6px 12px;background:#fff;}
  .rp-role.is-on{box-shadow:none;border-color:var(--or);color:var(--or);}
  .rp-add{margin-top:0;white-space:nowrap;border-radius:20px;padding:6px 12px;}
  .rp-add-box{margin-top:0;min-width:220px;padding:6px;}
  .rp-add-btns{margin-top:6px;}
  .rp-main{padding:14px;}
  .rp-rules{grid-template-columns:1fr;}
  .rp-modal input[type=checkbox]{padding:0!important;}
  .rp-modal .rp-add-box input{font-size:.84rem!important;padding:7px 9px!important;}
  .rp-modal .rp-rename{font-size:1.1rem!important;padding:3px 9px!important;}
  .rp-tbl th,.rp-tbl td{font-size:.8rem!important;}
  .rp-tbl thead th{font-size:.64rem!important;}
  .rp-tbl .rp-sec-row th{font-size:.95rem!important;}
  .rp-tbl .rp-note,.rp-tbl .rp-cap{font-size:.66rem!important;}
  .rp-tbl .rp-more{font-size:.76rem!important;}
  .rp-tbl .rp-c{width:52px;padding:8px 4px;}
  .rp-tbl-wrap{overflow:auto;max-height:calc(100vh - 230px);}   /* phones scroll the table both ways, header and names pinned */
  .rp-tbl thead th{top:0;}
  .rp-tbl .rp-c-name{min-width:140px;position:sticky;left:0;z-index:1;box-shadow:1px 0 0 #f1ede6;}
  .rp-tbl thead .rp-c-name{z-index:3;}
  .rp-tbl .rp-c-more{min-width:170px;}
  .rp-foot{padding:10px 14px;}
  .rp-foot-note:not(.is-dirty){display:none;}
}

/* Website screens: a switch this person may not change (Settings → Roles & Permissions) only shows its state. */
.cms-sw.is-locked { cursor: default; }
.cms-sw.is-locked .cms-sw-ui { opacity: .55; cursor: default; }

/* ===== The animated ghost (public/images/ghost/anim/v1–v4.svg; it moves by itself, so no CSS animation on the picture) ===== */
/* Sign-in screens: the floating ghost (v1) peeks over the top of the card. */
.login-box:has(> .login-ghost) { margin-top: 46px; }
.login-ghost { display: block; width: 69px; height: 84px; margin: -86px auto 12px; }
/* Sidebar: the shop's name on the left, a small ghost on the right, centred against the two lines
   (white with dark lines; a soft shadow lifts it off the dark bar). A long name wraps, never clipped. */
.sidebar .sb-logo { flex-shrink: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding-right: 16px; }
.sb-logo-t { flex: 1 1 auto; min-width: 0; }
.sb-logo .brand { font-size: 1.05rem; line-height: 1.15; white-space: normal; overflow-wrap: break-word; }
.sb-ghost { flex: 0 0 auto; display: block; width: 33px; height: 40px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
/* Smoother menu scrolling: the menu is drawn on its own (its layout and painting never touch the page's),
   and the always-moving ghost on its own layer, so its frames do not redraw the menu as it scrolls. */
.sidebar { contain: layout paint; }
.sb-ghost { will-change: transform; }
@media (max-width: 768px) { .sidebar .sb-logo { gap: 6px; padding-right: 9px; } .sb-logo .brand { font-size: .875rem; } .sb-ghost { width: 25px; height: 30px; } }
/* The Dashboard's logo: the wordmark (800×230 canvas) with the animated ghost where the drawn one was (x 617–784). */
.dash-logo { position: relative; display: block; width: 223px; height: 64px; flex-shrink: 0; }
.dash-logo-word { display: block; width: 100%; height: 100%; }
.dash-logo .dash-ghost { position: absolute; left: 77.1%; top: -1%; width: 20.9%; height: auto; aspect-ratio: 105 / 128; }
@media (max-width: 768px) { .dash-logo { width: 160px; height: 46px; } }
.dash-ghost { position: relative; display: inline-block; flex-shrink: 0; width: 48px; height: 58px; }
.dash-ghost img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 768px) { .dash-ghost { width: 36px; height: 44px; } }
/* ERP.ghost(): the small card with the ghost and a message (delivered, cancelled). */
.ghost-toast { position: fixed; right: 22px; bottom: 22px; z-index: 9999; display: flex; align-items: center; gap: 10px; max-width: 340px; padding: 8px 18px 8px 10px; background: #fff; border: 1px solid var(--bd); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.16); font: 600 .84rem 'DM Sans', sans-serif; color: var(--ink); cursor: pointer; transition: opacity .3s, transform .3s; animation: ghostCardIn .3s cubic-bezier(.2,.9,.3,1.2); }
.ghost-toast-art { display: block; flex-shrink: 0; width: auto; height: 64px; }
.ghost-toast-m { min-width: 0; line-height: 1.35; }
.ghost-toast.is-leaving { opacity: 0; transform: translateY(8px); }
/* A success in the middle of the screen: a quotation made, a sales order / invoice linked. */
.ghost-toast.is-center { inset: 0; margin: auto; width: max-content; height: max-content; max-width: min(380px, calc(100vw - 32px)); flex-direction: column; gap: 10px; padding: 22px 28px 20px; text-align: center; font-size: .95rem; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.ghost-toast.is-center .ghost-toast-art { height: 120px; }
.ghost-toast.is-center { max-width: calc(100vw - 32px); }
.ghost-toast.is-center .ghost-toast-m { white-space: nowrap; }          /* the message on one line */
@media (max-width: 480px) { .ghost-toast.is-center .ghost-toast-m { white-space: normal; } }
.ghost-toast.is-center.is-leaving { transform: scale(.96); }
/* ERP.api(): "Saving…" with the ghost packing its gift (v3), only while a slow save is under way. Never in the way of a click. */
.ghost-busy { position: fixed; right: 22px; bottom: 22px; z-index: 9998; display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 8px; background: #fff; border: 1px solid var(--bd); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.14); font: 500 .8rem 'DM Sans', sans-serif; color: var(--inkm); pointer-events: none; animation: ghostCardIn .25s ease; }
.ghost-busy-art { display: block; flex-shrink: 0; width: 33px; height: 40px; }
@keyframes ghostCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
  .ghost-toast, .ghost-busy { left: 0; right: 0; bottom: 14px; margin: 0 auto; width: max-content; max-width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) { .ghost-toast, .ghost-busy { animation: none; transition: none; } }
/* Password prompt of a delete / void / cancel: the ghost unpacking its gift (v4) instead of the lock. */
.pw-ghost { margin: 0 auto 8px; width: 53px; height: 64px; }
.pw-ghost-art { display: block; width: 53px; height: 64px; }
/* Message boxes of a real delete (art 'anim/v4'), and empty lists that may use it. */
.cms-dlg-icon .cms-dlg-ghost[src*="/anim/"] { animation: none !important; }
.cms-empty-art { object-fit: contain; }
/* ERP.noResults(): the search / filters hide everything. */
.ghost-none { display: flex; flex-direction: column; align-items: center; gap: 8px; white-space: normal; }
.ghost-none-art { display: block; width: 57px; height: 70px; }
@media (max-width: 768px) { .ghost-none-art { width: 44px; height: 54px; } }

/* ---- the × in every search box (admin.js) ---- */
.clr-wrap { position: relative; display: inline-flex; align-items: center; vertical-align: middle; min-width: 0; }
.clr-wrap > input { flex: 1 1 auto; }
.clr-wrap > input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.clr-x { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--inkm); font-size: 1.05rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.clr-x:hover { background: #f1ede6; color: var(--ink); }
.clr-x[hidden] { display: none; }

/* ---- Categories & Tags: a tag's popup with its card label (preview beside, one tidy panel) ---- */
.cms-modal.tag-modal { width: 660px; }
.tag-modal .cms-body.has-aside { grid-template-columns: minmax(0, 1fr) 170px; gap: 28px; }
.tag-modal .cms-aside { width: auto; padding-top: 2px; }
.tag-lbl { border: 1px solid var(--bd); border-radius: 12px; background: #fff; overflow: hidden; transition: border-color .2s; }
.tag-lbl.is-on { border-color: #e9dccd; }
.tag-lbl > .cms-toggle { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t s" "h s"; column-gap: 16px; align-items: center; }
.tag-lbl > .cms-toggle > .cms-sw { display: contents; }
.tag-lbl > .cms-toggle .cms-sw-t { grid-area: t; font-size: .86rem; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.tag-lbl > .cms-toggle .cms-sw-ui { grid-area: s; cursor: pointer; }
.tag-lbl > .cms-toggle > .hint { grid-area: h; margin: 2px 0 0; font-size: .75rem; color: var(--inkl); }
/* The settings slide open (rows 0fr → 1fr) instead of popping in. */
.tag-lbl-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.tag-lbl.is-on .tag-lbl-body { grid-template-rows: 1fr; }
.tag-lbl-inner { min-height: 0; overflow: hidden; }
.tag-lbl-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; padding: 14px 16px 16px; border-top: 1px solid #f1ebe2; background: #fcfaf7; opacity: 0; transition: opacity .2s; }
.tag-lbl.is-on .tag-lbl-grid { opacity: 1; }
.tag-lbl-grid > .cms-f { margin: 0; }
.tag-lbl-grid > .cms-f > label { display: flex; align-items: center; gap: 4px; }   /* the counter at the right edge, as elsewhere */
.tag-lbl-grid > .cms-f:last-child { grid-column: 1 / -1; }
.tag-lbl-grid .lbl-pal { flex-wrap: nowrap; gap: 8px; }
.tag-lbl-grid .lbl-sw { width: 28px; height: 28px; flex: none; }
@media (prefers-reduced-motion: reduce) { .tag-lbl-body, .tag-lbl-grid { transition: none; } }
@media (max-width: 768px) { .tag-lbl-grid { grid-template-columns: 1fr; } .tag-lbl-grid .lbl-pal { flex-wrap: wrap; } }

/* Card preview with several labels: small tags side by side, as the website's cards (not the corner tab). */
.pv-badges { position: absolute; top: 4%; left: 4%; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; max-width: 92%; }
.pv-badges .pv-badge, .cms-product-tabs .pv-badges .pv-badge { position: static; width: auto; height: auto; padding: 4px 7px; font: 600 10px/1 'Open Sans', sans-serif; letter-spacing: .01em; text-transform: uppercase; border-radius: 3px; }


/* ---- the number of new website enquiries beside "Enquiries" in the menu ---- */
.nb-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5484d; color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; line-height: 20px; text-align: center; }
.nb.active .nb-count { background: #fff; color: var(--or); }

/* ---- Settings: which update is running (the old "App version" line) ---- */
.app-version { text-align: right; font-size: .72rem; color: var(--inkl); margin: 2px 2px 6px; }
.app-version strong { color: var(--or); }

/* ---- a card label as the website shows it now: a small tag near the photo's corner (one or several) ---- */
.lbl-prev-tags { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.lbl-chip.is-tag { height: 22px; padding: 0 8px; border-radius: 4px; font-size: .66rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; }

/* ---- The side menu collapses to a slim bar of icons ("Collapse" at the bottom of the menu); hovering an icon names it.
   Wide screens only — on a phone the menu already slides away. ---- */
.sb-bottom { margin-top: auto; }
.sb-collapse, .sb-tip { display: none; }
@media (min-width: 769px) {
  :root { --sbw: 225px; }
  html.sb-mini { --sbw: 64px; }
  .sb-bottom { position: sticky; bottom: 0; z-index: 1; background: var(--sb); }
  .sidebar { scroll-padding-bottom: 120px; }
  .sb-collapse { display: block; padding: 8px 12px 4px; border-top: 1px solid rgba(255,255,255,.06); }
  .sb-collapse .nb span svg { display: block; margin: 0 auto; }
  .sb-collapse .sb-tg-open, html.sb-mini .sb-collapse .sb-tg-close { display: none; }
  html.sb-mini .sb-collapse .sb-tg-open { display: inline; }
  .sb-tip { display: block; position: fixed; z-index: 300; padding: 5px 10px; border-radius: 6px; background: #1c1c1c; color: #fff; font-size: .76rem; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.25); transform: translateY(-50%); }
  .sb-tip[hidden] { display: none; }

  /* Collapsing slides the width only: every icon keeps its place, the words fade, nothing jumps. */
  .sidebar { overflow-x: hidden; transition: width .2s ease; }
  .main { transition: margin-left .2s ease; }
  .nb .nb-t { display: inline; width: auto; flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: inherit; text-align: left; transition: opacity .15s; }
  .sb-logo-t, .sb-user-who { transition: opacity .15s; }
  html.sb-mini :is(.sb-ghost, .sb-user-p) { margin-left: auto; }
  button.sb-lbl { position: relative; transition: color .15s; }
  /* Folded, and while sliding, nothing wraps (squeezed, words would break letter by letter and the menu would jump). */
  html:is(.sb-mini, .sb-anim) :is(.nb, button.sb-lbl) { white-space: nowrap; overflow: hidden; }
  button.sb-lbl::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 1px; background: rgba(255,255,255,.12); opacity: 0; transition: opacity .15s; }
  html.sb-mini .sidebar { scrollbar-gutter: auto; scrollbar-width: none; }
  html.sb-mini .sidebar::-webkit-scrollbar { display: none; }
  html.sb-mini .sidebar .sb-logo { gap: 0; padding-left: 0; }
  html.sb-mini .sb-logo-t, html.sb-mini .sb-user-who { flex: 0 0 0; opacity: 0; overflow: hidden; }
  /* Folded, and while sliding: the name and the email stay on one line (squeezed, they would wrap letter by letter and the menu would jump). */
  html:is(.sb-mini, .sb-anim) :is(.sb-logo-t, .sb-user-who) { overflow: hidden; }
  html:is(.sb-mini, .sb-anim) :is(.sb-logo-t, .sb-user-who) * { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
  html.sb-mini .sb-user { gap: 0; padding-left: 0; }
  html.sb-mini .sb-search input { padding: 0; color: transparent; cursor: pointer; background-position: center; }
  html.sb-mini .sb-search input::placeholder { color: transparent; }
  html.sb-mini .sb-search kbd, html.sb-mini .sb-clear { display: none; }
  html.sb-mini button.sb-lbl { color: transparent; pointer-events: none; }
  html.sb-mini button.sb-lbl::before { opacity: 1; }
  html.sb-mini button.sb-lbl::after { opacity: 0; }
  html.sb-mini .sb-sec.is-folded .sb-items { display: block; }
  html.sb-mini .nb { position: relative; }
  html.sb-mini .nb .nb-t { opacity: 0; }
  html.sb-mini .nb-count { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; font-size: .6rem; }
}

/* Staff Claims: the line under Claim Date / Receipt Date saying what the Claim Date decides. */
.claim-cdate-note { font-size: .72rem; color: var(--inkl); margin: -4px 0 8px; }

/* Purchase Orders (owner's 7 Oct 2026 copy): the "📎 Inv Doc" chip, the "n new items" badge, the Pull new items pop-up. */
.file-chip { display: inline-block; border-radius: 6px; padding: 2px 7px; font-size: .7rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.file-chip.is-ok { background: #e3f4ea; color: #1e6b42; border: 1px solid #b9e0c8; }
.file-chip.is-no { background: #fde8e8; color: #b03030; border: 1px solid #f2c4c4; }
.file-chip:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.po-new-badge { display: inline-block; background: #fdf0e4; color: #c0661a; border: 1px solid #f0c9a4; border-radius: 10px; padding: 1px 7px; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.po-pull-btn { margin-left: 6px; border-color: var(--or); color: var(--or); }
.po-pull-btn[hidden] { display: none; }
.po-pull-note { font-size: .8rem; color: var(--inkm); margin-bottom: 8px; }
.po-pull-list { max-height: 55vh; overflow-y: auto; }
.po-pull-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bd); }
.po-pull-row input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--or); }
.po-pull-row label { flex: 1; font-size: .85rem; cursor: pointer; }
.po-pull-row input[type=number] { width: 65px; padding: 3px 6px; border: 1.5px solid var(--bd); border-radius: 5px; }
.po-pull-q { font-size: .76rem; color: var(--inkl); white-space: nowrap; }
.po-pull-none { padding: 14px 4px; font-size: .88rem; color: var(--gn); }
/* Files from the linked PO / PV (view only). */
.att-linked-hd { font-size: .74rem; font-weight: 700; color: var(--inkm); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .3px; }
.att-linked-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bd); border-radius: 7px; background: #f4f8fc; margin-bottom: 4px; }
.att-linked-info { flex: 1; min-width: 0; }
.att-linked-info a { font-size: .84rem; color: var(--bl); text-decoration: underline; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-linked-src { font-size: .7rem; color: var(--inkl); }
/* The "Saving…" note without a ghost: a small spinner. */
.ghost-busy.is-plain { padding: 8px 16px 8px 12px; }
.busy-spin { flex-shrink: 0; width: 16px; height: 16px; border: 2px solid var(--bd); border-top-color: var(--or); border-radius: 50%; animation: busySpin .8s linear infinite; }
@keyframes busySpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .busy-spin { animation-duration: 2s; } }

/* Import Backup — replace ALL data? (owner's 7 Oct 2026 copy) */
.imp-lead { font-size: .84rem; color: var(--inkm); margin-bottom: 10px; }
.imp-made { font-size: .86rem; margin-bottom: 8px; }
.imp-old { color: var(--rd); font-weight: 700; }
.imp-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: 8px; }
.imp-table th { color: var(--inkm); text-align: right; padding: 3px 8px; font-weight: 600; }
.imp-table td { padding: 3px 8px; text-align: right; }
.imp-table th:first-child, .imp-table td:first-child { text-align: left; }
.imp-table .imp-b, .imp-table .imp-d { font-weight: 700; }
.imp-d { color: var(--inkl); } .imp-d.is-lost { color: var(--rd); } .imp-d.is-gain { color: var(--gn); }
.imp-lost { background: #fde8e8; border: 1.5px solid #f2c4c4; color: #b03030; border-radius: 8px; padding: 8px 10px; font-size: .82rem; font-weight: 700; margin-bottom: 8px; }
.imp-err { font-size: .8rem; color: var(--rd); min-height: 1.1em; margin-bottom: 8px; }
.imp-err.is-note { color: var(--inkm); }
.imp-note { font-size: .76rem; color: var(--inkl); margin-bottom: 12px; }

/* Lalamove: a usage split across several bills, each bill's share under the references (owner's 9 Oct 2026 copy). */
.lala-split { margin-top: 3px; }
.lala-split > div { font-size: .72rem; color: var(--inkm); line-height: 1.5; }
.lala-split-amt { color: var(--rd); font-weight: 600; }

/* "👁 View as" role preview (Owner only, docs/backoffice/01 §7.8) */
.vas-banner{position:fixed;bottom:0;left:0;right:0;z-index:800;background:var(--or);color:#fff;text-align:center;padding:8px 12px;font-size:.82rem;font-weight:600;box-shadow:0 -2px 10px rgba(0,0,0,.15);}
.vas-exit{background:#fff;color:var(--or);border:none;border-radius:6px;padding:4px 12px;font-weight:700;cursor:pointer;font-size:.78rem;margin-left:10px;}
body:has(.vas-banner) .content{padding-bottom:56px;}
/* Back from a preview: the Roles pop-up is open from the first paint; its box shows once filled (no empty frame). */
.overlay.is-back:not(.is-ready) .rp-modal{visibility:hidden;}
html.rp-wait body{visibility:hidden;}

/* File viewer (the back office's receipt lightbox): dark background, white box, name · Download · ✕ above the picture. */
.overlay.att-lb{background:rgba(0,0,0,.82);}
.att-lb-box{background:#fff;border-radius:10px;max-width:min(820px,94vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shl);}
.att-lb-hd{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bd);}
.att-lb-name{flex:1;min-width:0;font-size:.85rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.att-lb-dl{color:var(--or);font-size:.82rem;font-weight:600;text-decoration:none;white-space:nowrap;}
.att-lb-img{display:block;max-width:100%;max-height:calc(90vh - 52px);object-fit:contain;margin:0 auto;background:#fff;}

/* Import of an OLD back-office file: its notes, and the old backup key picker. */
.imp-old-box{border:1px solid #f0dcc6;background:#fffaf4;border-radius:8px;padding:10px 12px;margin:10px 0;font-size:.8rem;color:var(--inkm);line-height:1.5;}
.imp-old-box b{display:block;color:var(--ink);margin-bottom:4px;}
.imp-old-box ul{margin:0;padding-left:18px;max-height:140px;overflow-y:auto;}
.bkpw-key{text-align:left;border:1px dashed var(--bd);border-radius:8px;padding:10px 12px;margin-bottom:10px;}
.bkpw-key-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.bkpw-key-name{font-size:.8rem;color:var(--gn);margin-top:6px;}
.bkpw-key-hint{font-size:.74rem;color:var(--inkl);margin-top:6px;line-height:1.45;}
/* Import / Reset: the confirm button looks unavailable until IMPORT / RESET and the password are in. */
:is(#import-confirm-modal, #reset-data-modal) .btn:disabled{opacity:.45;cursor:not-allowed;}