/* MiSalon: quotes, invoices and the price list — 23 September 2026.
   Two parts, and they must stay apart:

   1. The document itself. Everything under ".doc" and ".t1" to ".t5" below is an UNCHANGED copy of the shared
      doc.css that comes with the five looks. It is shared with SilverLion OS
      (MiSalon Marketing\Design\2026-09-23-quote-invoice-templates\templates\doc.css). Do not edit it here:
      change it there and copy it back, or the two products drift apart. Every document is drawn inside its own
      shadow root, which loads this file, so the app's own styles never touch a quote and a quote never touches
      the app.
   2. The two app screens that use it, at the bottom of this file, all named dq-.

   The four fonts (Plus Jakarta Sans, IBM Plex Mono, Barlow Condensed, Cormorant Garamond) are asked for by the
   screen that loads this file. */

/* ---------- 1. an unchanged copy of the shared doc.css ---------- */
/* Quote and invoice templates: A4. Fonts: Plus Jakarta Sans, IBM Plex Mono, Barlow Condensed, Cormorant Garamond (see fonts.css). */
.doc{--ink:#15181E;--ink2:#474C56;--mut:#7A808A;--line:#E3E1DC;--paper:#fff;
  --bd:color-mix(in srgb,var(--b) 78%,#000);--bt:color-mix(in srgb,var(--b) 7%,#fff);--bt2:color-mix(in srgb,var(--b) 14%,#fff);--at:color-mix(in srgb,var(--a) 16%,#fff);
  position:relative;box-sizing:border-box;width:210mm;min-height:297mm;background:var(--paper);color:var(--ink);font:400 9.2pt/1.42 "Plus Jakarta Sans",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:hidden}
.doc *{box-sizing:border-box}
.doc p{margin:0}.doc h1{margin:0;font-weight:800}
.doc .k{color:var(--mut)}
.doc mark.ph{background:#FFF3D6;color:inherit;padding:0 2px;border-radius:2px}
.doc .lab{display:block;font:500 7pt/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--b);margin-bottom:2.2mm}
.doc .tag{font:500 7pt/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
/* logo: an uploaded image, or the built-in mark (icon or initials + name) */
.doc .logo{display:block;max-height:22mm;max-width:70mm;object-fit:contain}
.doc .mark{display:inline-flex;align-items:center;gap:3mm}
.doc .mark .mk{width:13mm;height:13mm;border-radius:3.5mm;background:var(--b);display:grid;place-items:center;color:#fff;flex:none}
.doc .mark .mk b{font:800 13pt/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em}
.doc .mark .mki{width:8mm;height:8mm;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.doc .mark .mn{font:800 15pt/1.05 "Plus Jakarta Sans",sans-serif;letter-spacing:-.03em;color:var(--ink);max-width:62mm}
.doc .ic{width:5.5mm;height:5.5mm;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* shared: meta, items, sums, pay, terms */
.doc dl{margin:0}
.doc .meta div{display:flex;gap:4mm;justify-content:space-between;padding:1.1mm 0}
.doc .meta dt{font:500 7pt/1.5 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.doc .meta dd{margin:0;font-weight:700;text-align:right}
.doc table.items{width:100%;border-collapse:collapse;margin-top:6mm}
.doc .items th{font:500 7pt/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:3mm 4mm}
.doc .items th.a,.doc .items td.a{text-align:right;white-space:nowrap}
.doc .items td{padding:2.2mm 4mm;border-bottom:1px solid var(--line);vertical-align:top}
.doc .items td.d{font-weight:600}
.doc .items td small{display:block;font-weight:400;color:var(--mut);font-size:8pt;margin-top:.6mm}
.doc .items td.n,.doc .items th.n{width:10mm;color:var(--mut);text-align:center;font-family:"IBM Plex Mono",monospace;font-size:8pt}
.doc .items td.a span{font-weight:700;font-variant-numeric:tabular-nums}
.doc .items tr{break-inside:avoid}
.doc .sums{margin-left:auto;width:78mm;margin-top:3mm}
.doc .sums .r{display:flex;justify-content:space-between;padding:1.6mm 4mm;color:var(--ink2)}
.doc .sums .r b{color:var(--ink);font-variant-numeric:tabular-nums}
.doc .dep{margin-bottom:3mm}
.doc .accept{display:grid;grid-template-columns:1.5fr 1fr;gap:6mm;margin-top:2mm}
.doc .accept span{font:500 7pt/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.doc .accept i{display:block;height:9mm;border-bottom:1px solid var(--ink2)}
.doc .bank div{display:flex;gap:3mm;padding:.7mm 0}
.doc .bank dt{width:26mm;color:var(--mut);flex:none}
.doc .bank dd{margin:0;font-weight:600}
.doc .pay{margin-top:3mm}
.doc .notes{margin-bottom:3mm;color:var(--ink2)}
.doc .terms{margin:0;padding-left:4mm;color:var(--mut);font-size:7.8pt;line-height:1.5}
.doc .terms li{margin-bottom:.8mm}
.doc .f{font:500 7pt/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-align:center}
.doc .f i{font-style:normal;margin:0 3mm;opacity:.5}
.doc .paidmark{position:absolute;right:22mm;top:92mm;transform:rotate(-10deg);border:1.2mm solid #1F7A4D;color:#1F7A4D;border-radius:3mm;padding:2mm 6mm;font:800 22pt/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.85}

/* ===== 1. Bold ===== */
.t1{padding:12mm 14mm 10mm}
.t1 .h{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm}
.t1 h1{font:800 54pt/.86 "Barlow Condensed",sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--b)}
.t1 h1.long{font-size:44pt}
.t1 .br{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2mm;padding-top:1mm}
.t1 .top{display:grid;grid-template-columns:1.3fr 1fr;gap:10mm;margin-top:7mm;padding-top:4mm;border-top:1.2mm solid var(--b)}
.t1 .top .meta{border-left:1px solid var(--line);padding-left:7mm}
.t1 .to{margin-top:5mm;border:.5mm solid var(--b);border-radius:3mm;padding:4mm 5mm;background:var(--bt)}
.t1 .items thead th{background:var(--bd);color:#fff}
.t1 .items thead th:first-child{border-radius:2mm 0 0 2mm}.t1 .items thead th:last-child{border-radius:0 2mm 2mm 0}
.t1 .items td.a span{display:inline-block;background:var(--bt2);color:var(--bd);padding:1mm 3mm;border-radius:99px}
.t1 .tot{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:4mm;background:var(--bd);color:#fff;border-radius:3mm;padding:5mm 7mm;overflow:hidden}
.t1 .tot::after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;background:var(--b);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.t1 .tot::before{content:"";position:absolute;right:36%;top:0;bottom:0;width:3mm;background:var(--a);transform:skewX(-13deg);z-index:1}
.t1 .tot span{position:relative;font:800 20pt/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.t1 .tot b{position:relative;z-index:2;font:800 25pt/1 "Barlow Condensed",sans-serif;letter-spacing:.01em}
.t1 .bot{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin-top:6mm}
.t1 .f{margin-top:7mm;padding-top:4mm;border-top:1px solid var(--line)}

/* ===== 2. Classic ===== */
.t2{padding:0 0 12mm}
.t2 .h{background:var(--b);color:#fff;text-align:center;padding:8mm 14mm 6mm;border-bottom:1.4mm solid var(--a)}
.t2 .h .mark{flex-direction:column;gap:2.5mm}
.t2 .h .mark .mk{background:var(--a);border-radius:50%;width:14mm;height:14mm}
.t2 .h .mark .mn{color:#fff;font:600 21pt/1 "Cormorant Garamond",serif;letter-spacing:.02em;text-transform:uppercase;max-width:none}
.t2 .h .logo{margin:0 auto;background:#fff;padding:3mm 5mm;border-radius:2mm}
.t2 .h .tag{color:color-mix(in srgb,#fff 70%,var(--b));margin-top:3mm}
.t2 .ttl{text-align:center;padding:6mm 14mm 0}
.t2 .no{display:inline-block;font:500 7.5pt/1 "IBM Plex Mono",monospace;letter-spacing:.14em;border:1px solid var(--b);color:var(--b);border-radius:99px;padding:1.6mm 4mm}
.t2 h1{font:600 34pt/1 "Cormorant Garamond",serif;letter-spacing:.01em;color:var(--b);margin-top:3mm}
.t2 h1::after{content:"";display:block;width:24mm;height:.4mm;background:var(--a);margin:3mm auto 0}
.t2 .meta.inl{display:flex;justify-content:center;gap:7mm;margin-top:3mm;flex-wrap:wrap}
.t2 .meta.inl div{gap:2mm}
.t2 .meta.inl dd{font-weight:600}
.t2 .parties{display:grid;grid-template-columns:1fr 1fr;gap:6mm;margin:6mm 14mm 0}
.t2 .parties>div{border-top:.6mm solid var(--a);background:var(--bt);padding:4mm 5mm}
.doc.t2 table.items{margin:5mm 14mm 0;width:calc(100% - 28mm)}
.t2 .items thead th{color:var(--b);border-bottom:.5mm solid var(--b);padding-left:0}
.t2 .items thead th.a{padding-right:0}
.t2 .items td{padding-left:0;font-family:"Cormorant Garamond",serif;font-size:12pt;line-height:1.2}
.t2 .items td.d{font-weight:600}
.t2 .items td small{font-family:"Plus Jakarta Sans",sans-serif}
.t2 .items td.a{padding-right:0}
.t2 .items td.a span{font:600 9.5pt/1.3 "IBM Plex Mono",monospace}
.t2 .tb{margin:3mm 14mm 0}
.t2 .sums .r{padding-right:0}
.t2 .tot{margin-top:4mm;text-align:center;background:var(--bt2);padding:5mm;position:relative}
.t2 .tot::before,.t2 .tot::after{content:"";position:absolute;left:6mm;right:6mm;height:.3mm;background:var(--b);opacity:.35}
.t2 .tot::before{top:2mm}.t2 .tot::after{bottom:2mm}
.t2 .tot span{display:block;font:500 8pt/1 "IBM Plex Mono",monospace;letter-spacing:.3em;text-transform:uppercase;color:var(--b)}
.t2 .tot b{display:block;font:700 30pt/1.05 "Cormorant Garamond",serif;color:var(--b);margin-top:2mm}
.t2 .bot{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin:6mm 14mm 0}
.t2 .f{margin:7mm 14mm 0;display:flex;align-items:center;gap:4mm;justify-content:center}
.t2 .f::before,.t2 .f::after{content:"";flex:1;height:1px;background:var(--line)}

/* ===== 3. Ticket ===== */
.t3{padding:10mm 14mm}
.t3 .h{text-align:center}
.t3 .h .mark{flex-direction:column;gap:2.5mm}
.t3 .h .mark .mk{width:17mm;height:17mm;border-radius:5mm}
.t3 .h .mark .mki{width:10mm;height:10mm}
.t3 .h .mark .mn{font-size:22pt;max-width:none}
.t3 .h .logo{margin:0 auto}
.t3 .h .tag{margin-top:2.5mm}
.t3 h1{margin-top:4mm}
.t3 h1 span{display:inline-block;background:var(--b);color:#fff;font:800 22pt/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:3mm 12mm;border-radius:99px}
.t3 .cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4mm;margin-top:6mm}
.t3 .cols>div{background:var(--bt);border-radius:2.5mm;overflow:hidden;padding:0 4mm 4mm}
.t3 .cols .lab{background:var(--b);color:#fff;margin:0 -4mm 3mm;padding:2.5mm 4mm;text-align:center}
.t3 .cols .meta div{padding:.6mm 0}
.t3 .items thead th{background:var(--bd);color:#fff}
.t3 .items tbody tr:nth-child(even) td{background:var(--bt)}
.t3 .end{display:grid;grid-template-columns:1fr 72mm;gap:8mm;margin-top:6mm;align-items:start}
.t3 .end .sums{margin:0;width:100%;border:1px solid var(--line);border-radius:2.5mm;padding:1.5mm 0}
.t3 .end .left>*+*{margin-top:4mm}
.t3 .ticket{position:relative;background:radial-gradient(circle at 0 50%,#fff 3.2mm,transparent 3.3mm),radial-gradient(circle at 100% 50%,#fff 3.2mm,transparent 3.3mm),var(--a);color:#fff;border-radius:4mm;padding:7mm 6mm;text-align:center}
.t3 .ticket::after{content:"";position:absolute;left:6mm;right:6mm;top:50%;border-top:.4mm dashed rgba(255,255,255,.55)}
.t3 .ticket span{display:block;font:500 7.5pt/1 "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;padding-bottom:5mm}
.t3 .ticket b{display:block;font:800 23pt/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-.02em;padding-top:5mm}
.t3 .ticket em{display:block;font:500 7pt/1 "IBM Plex Mono",monospace;letter-spacing:.14em;margin-top:2.5mm;font-style:normal;opacity:.85}
.t3 .bot{margin-top:7mm}
.t3 .f{margin-top:6mm;padding-top:4mm;border-top:1px solid var(--line)}

/* ===== 4. Sidebar ===== */
.t4{display:grid;grid-template-columns:62mm 1fr}
.t4 .side{background:var(--bd);color:#fff;padding:12mm 7mm 10mm;display:flex;flex-direction:column;gap:6mm}
.t4 .side .lg .logo{background:#fff;padding:3mm;border-radius:2mm;max-width:100%}
.t4 .side .mark{flex-direction:column;align-items:flex-start;gap:3mm}
.t4 .side .mark .mk{background:var(--a)}
.t4 .side .mark .mn{color:#fff;font:800 20pt/.95 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.01em;max-width:none}
.t4 .side .tag{color:var(--a);border-bottom:.4mm solid var(--a);padding-bottom:4mm}
.t4 .side .lab{color:var(--a)}
.t4 .side p{color:color-mix(in srgb,#fff 82%,var(--b))}
.t4 .side .k{color:color-mix(in srgb,#fff 55%,var(--b))}
.t4 .svc{list-style:none;margin:0;padding:5mm 0 0;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:4mm}
.t4 .svc li{display:flex;align-items:center;gap:3mm;font:500 7.5pt/1.3 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.t4 .svc .ic{width:8mm;height:8mm;color:var(--a);stroke-width:1.5}
.t4 .sfoot{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding-top:5mm;font-size:8.4pt}
.t4 .sfoot .bank dt{width:22mm;color:color-mix(in srgb,#fff 55%,var(--b))}
.t4 .sfoot .accept span{color:color-mix(in srgb,#fff 55%,var(--b))}
.t4 .sfoot .accept i{border-color:rgba(255,255,255,.5)}
.t4 .sfoot .accept{grid-template-columns:1fr;gap:3mm}
.t4 .main{padding:12mm 11mm 10mm}
.t4 h1{font:800 50pt/.86 "Barlow Condensed",sans-serif;text-transform:uppercase;color:var(--b);letter-spacing:-.005em}
.t4 .meta.row{display:grid;grid-template-columns:repeat(4,auto);gap:0;margin-top:6mm;background:var(--bt);border-radius:2mm;padding:3mm 0}
.t4 .meta.row div{display:block;padding:0 4mm;border-left:1px solid var(--line)}
.t4 .meta.row div:first-child{border-left:0}
.t4 .meta.row dd{text-align:left;margin-top:1mm}
.t4 .to{margin-top:5mm;background:var(--bt);border-radius:2mm;padding:4mm 5mm}
.t4 .items thead th{background:var(--b);color:#fff}
.t4 .items td{border-bottom-color:var(--line)}
.t4 .tot{display:flex;justify-content:space-between;align-items:center;margin-top:4mm;background:var(--b);color:#fff;border-radius:2mm;padding:5mm 6mm;border-left:0}
.t4 .tot span{font:800 16pt/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em}
.t4 .tot b{font:800 26pt/1 "Barlow Condensed",sans-serif}
.t4 .bot{margin-top:7mm}

/* ===== 5. Editorial ===== */
.t5{display:grid;grid-template-columns:1fr 34mm}
.t5 .main{padding:12mm 9mm 10mm 13mm}
.t5 .h{display:flex;justify-content:space-between;align-items:flex-start;gap:8mm}
.t5 .h .mark .mk{border-radius:50%;background:var(--bd)}
.t5 .h .mark .mn{font:600 19pt/1 "Cormorant Garamond",serif;text-transform:uppercase;letter-spacing:.04em}
.t5 .h .meta{border-left:.4mm solid var(--a);padding-left:5mm;min-width:58mm}
.t5 .tag{margin-top:4mm;color:var(--a)}
.t5 .parties{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:7mm}
.t5 .parties>div{background:var(--bt);padding:4mm 5mm}
.t5 .parties .lab{color:var(--a)}
.t5 .items thead th{background:var(--bd);color:#fff}
.t5 .items td{font-family:"Cormorant Garamond",serif;font-size:12pt;line-height:1.25}
.t5 .items td small{font-family:"Plus Jakarta Sans",sans-serif}
.t5 .items td.a span{font:600 9.4pt "IBM Plex Mono",monospace}
.t5 .end{display:grid;grid-template-columns:1fr 78mm;gap:6mm;margin-top:6mm;align-items:stretch}
.t5 .end .left{padding-top:2mm}
.t5 .dark{background:var(--bd);color:#fff;padding:5mm 6mm 6mm}
.t5 .dark .sums{width:100%;margin:0}
.t5 .dark .sums .r{padding:1.2mm 0;color:color-mix(in srgb,#fff 75%,var(--b))}
.t5 .dark .sums .r b{color:#fff}
.t5 .dark .tot{border-top:.3mm solid var(--a);margin-top:3mm;padding-top:4mm}
.t5 .dark .tot span{display:block;font:500 7.5pt/1 "IBM Plex Mono",monospace;letter-spacing:.26em;text-transform:uppercase;color:var(--a)}
.t5 .dark .tot b{display:block;font:700 30pt/1.05 "Cormorant Garamond",serif;color:var(--a);margin-top:2mm}
.t5 .dark .dep,.t5 .dark .pay{margin-top:3mm}
.t5 .dark .accept span,.t5 .dark .bank dt{color:color-mix(in srgb,#fff 60%,var(--b))}
.t5 .dark .accept i{border-color:rgba(255,255,255,.5)}
.t5 .dark .accept{grid-template-columns:1fr;gap:2mm}
.t5 .dark .bank dt{width:24mm}
.t5 .strip{position:relative;background:var(--bd);display:flex;flex-direction:column;border-left:1.2mm solid var(--a)}
.t5 .vt{writing-mode:vertical-rl;font:600 34pt/1 "Cormorant Garamond",serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;padding:12mm 0 8mm;margin:0 auto;white-space:nowrap}
.t5 .cover{flex:1;background-size:cover;background-position:center;min-height:60mm;margin:0 4mm;border-top:.3mm solid var(--a)}
.t5 .cover.none{background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2mm,transparent 2mm 5mm)}
.t5 .sl{writing-mode:vertical-rl;font:500 7pt/1 "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--a);margin:6mm auto 10mm}

@media print{@page{size:A4;margin:0}body{margin:0}.doc{box-shadow:none!important;margin:0!important}}
.doc.is-paid .tot,.doc.is-paid .ticket{--a:#1F7A4D}
.t3.is-paid .ticket{background:radial-gradient(circle at 0 50%,#fff 3.2mm,transparent 3.3mm),radial-gradient(circle at 100% 50%,#fff 3.2mm,transparent 3.3mm),#1F7A4D}

/* ===== Price lists (all five looks) ===== */
.doc .pl{display:grid;grid-template-columns:1fr 1fr;gap:6mm 10mm;margin-top:7mm;align-items:start}
.doc .grp{break-inside:avoid}
.doc .grp h3{margin:0 0 2.5mm;font:800 11pt/1.2 "Plus Jakarta Sans",sans-serif;color:var(--b)}
.doc .grp ul{list-style:none;margin:0;padding:0}
.doc .grp li{display:flex;align-items:baseline;gap:2mm;padding:1.7mm 0;border-bottom:1px solid var(--line)}
.doc .grp li:last-child{border-bottom:0}
.doc .grp .d{font-weight:600;min-width:0}
.doc .grp .d small{display:block;font-weight:400;color:var(--mut);font-size:7.8pt;margin-top:.3mm}
.doc .grp .ld{flex:1;min-width:4mm;border-bottom:.3mm dotted color-mix(in srgb,var(--b) 35%,#fff);transform:translateY(-1mm)}
.doc .grp b{white-space:nowrap;font-variant-numeric:tabular-nums}
.doc .grp b em{font-style:normal;font-weight:500;color:var(--mut);font-size:7.8pt}
.doc .plnote{margin-top:6mm;color:var(--mut);font-size:8pt}
.doc .eff{font:500 7.5pt/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:3mm}
/* 1 Bold */
.t1.is-pricelist .top .from p{color:var(--ink2)}
.t1.is-pricelist .grp h3{background:var(--bd);color:#fff;font:800 13pt/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;padding:2.4mm 3.5mm;border-radius:2mm;margin-bottom:1.5mm}
.t1.is-pricelist .grp li{padding-left:1mm;padding-right:1mm}
.t1.is-pricelist .grp b{background:var(--bt2);color:var(--bd);padding:.6mm 2.6mm;border-radius:99px}
.t1.is-pricelist .grp .ld{display:none}
.t1.is-pricelist .grp .d{flex:1}
.t1.is-pricelist .f{margin-top:7mm;padding-top:4mm;border-top:1px solid var(--line)}
/* 2 Classic */
.t2.is-pricelist .ttl{padding-top:7mm}
.t2.is-pricelist h1{font-size:40pt;margin-top:3mm}
.t2.is-pricelist .pl{margin:7mm 14mm 0;gap:7mm 12mm}
.t2.is-pricelist .grp h3{font:600 17pt/1.1 "Cormorant Garamond",serif;text-align:center;border-bottom:.4mm solid var(--a);padding-bottom:2mm;margin-bottom:1.5mm}
.t2.is-pricelist .grp li{border-bottom:0;padding:1.4mm 0}
.t2.is-pricelist .grp .d{font:600 12pt/1.2 "Cormorant Garamond",serif}
.t2.is-pricelist .grp .d small{font-family:"Plus Jakarta Sans",sans-serif}
.t2.is-pricelist .grp b{font:600 9.5pt "IBM Plex Mono",monospace;color:var(--b)}
.t2.is-pricelist .plnote{margin:6mm 14mm 0;text-align:center}
.t2.is-pricelist .f{margin:6mm 14mm 0}
/* 3 Ticket */
.t3.is-pricelist .pl{gap:5mm}
.t3.is-pricelist .grp{background:var(--bt);border-radius:2.5mm;overflow:hidden;padding:0 4mm 2mm}
.t3.is-pricelist .grp h3{background:var(--b);color:#fff;margin:0 -4mm 1.5mm;padding:2.6mm 4mm;font:500 7.5pt/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.t3.is-pricelist .grp li{border-bottom-color:color-mix(in srgb,var(--b) 12%,#fff)}
.t3.is-pricelist .grp b{color:var(--bd)}
.t3.is-pricelist .plnote{text-align:center}
.t3.is-pricelist .f{margin-top:6mm;padding-top:4mm;border-top:1px solid var(--line)}
/* 4 Sidebar */
.t4.is-pricelist .pl{grid-template-columns:1fr;gap:5mm;margin-top:5mm}
.t4.is-pricelist .grp h3{font:800 14pt/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--b);padding:2.2mm 3.5mm;border-radius:1.5mm;margin-bottom:1mm}
.t4.is-pricelist .grp li{padding-left:1mm;padding-right:1mm}
.t4.is-pricelist .sfoot .lab{color:var(--a)}
/* 5 Editorial */
.t5.is-pricelist .pl{gap:6mm 9mm}
.t5.is-pricelist .grp h3{font:600 16pt/1.1 "Cormorant Garamond",serif;color:var(--bd);border-bottom:.4mm solid var(--a);padding-bottom:1.5mm}
.t5.is-pricelist .grp .d{font:600 11.5pt/1.2 "Cormorant Garamond",serif}
.t5.is-pricelist .grp .d small{font-family:"Plus Jakarta Sans",sans-serif}
.t5.is-pricelist .grp b{font:600 9pt "IBM Plex Mono",monospace}
.t5.is-pricelist .grp li{border-bottom:0;padding:1.2mm 0}

/* ============================================================================
   The two MiSalon screens that use the documents above: the look chooser
   (More, then Quotes and invoices) and the quote and invoice editor.
   Everything else on these screens is app-2026.css: .card, .btn, .list, .it,
   .pill, .muted, .row, .two, .cols2, .chip, label and input. Only what those do
   not already give is below, and every class starts dq- so nothing here can
   reach another screen.
   ============================================================================ */

/* the five looks, as pickable cards */
.dq-tpl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-3)}
@media (min-width:700px){.dq-tpl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dq-tp{position:relative;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:8px 8px 10px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.dq-tp.on{border-color:var(--navy-900);box-shadow:0 0 0 3px var(--navy-100)}
.dq-tp .dq-th{position:relative;width:100%;aspect-ratio:210/297;overflow:hidden;border-radius:8px;background:#EEE;border:1px solid var(--line)}
.dq-tp b{display:block;margin-top:8px;font-size:var(--fs-15)}
.dq-tp span.dq-note{display:block;font-size:var(--fs-12);color:var(--ink-2);line-height:1.35;margin-top:2px}
.dq-tp .dq-ok{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;background:var(--navy-900);color:#fff;display:none;place-items:center;box-shadow:0 0 0 3px var(--surface)}
.dq-tp.on .dq-ok{display:grid}
.dq-host{position:absolute;left:0;top:0;width:794px;transform-origin:0 0}
.dq-tp .dq-host{pointer-events:none}

/* colours and the small picture */
.dq-sw{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.dq-sw button{width:38px;height:38px;min-height:38px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line-2);cursor:pointer;padding:0}
.dq-sw button.on{box-shadow:0 0 0 2px var(--navy-900)}
.dq-sw label{display:inline-flex;align-items:center;gap:8px;height:38px;margin:0;padding:0 12px;border:1px dashed var(--line-2);border-radius:var(--r-full);font-size:var(--fs-13);color:var(--ink-2);cursor:pointer}
.dq-sw input[type=color]{width:22px;height:22px;min-height:0;border:0;padding:0;background:none}
.dq-marks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dq-marks button{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;padding:0}
.dq-marks button.on{border-color:var(--navy-900);background:var(--navy-50)}
.dq-marks svg{width:22px;height:22px;fill:none;stroke:var(--navy-900);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dq-sub{font-weight:var(--fw-bold);font-size:var(--fs-15);margin-top:var(--s-4)}

/* the live preview */
.dq-prev{position:relative}
@media (min-width:1024px){.dq-prev{position:sticky;top:84px}}
.dq-pv{position:relative;width:100%;overflow:hidden;border-radius:10px;background:#E9E7E2;border:1px solid var(--line);margin-top:var(--s-3)}
.dq-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dq-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-full);padding:3px;background:var(--surface)}
.dq-seg button{border:0;background:none;height:34px;min-height:34px;padding:0 14px;border-radius:var(--r-full);font:inherit;font-weight:var(--fw-bold);font-size:var(--fs-13);color:var(--ink-2);cursor:pointer}
.dq-seg button.on{background:var(--navy-900);color:#fff}
.dq-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--s-3)}
.dq-acts .wide{grid-column:1/-1}
.dq-acts .btn{width:100%}

/* the editor */
.dq-three{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--s-3)}
@media (min-width:600px){.dq-three{grid-template-columns:1fr 1fr 1fr}}
.dq-two{display:grid;grid-template-columns:1fr;gap:10px;margin-top:var(--s-3)}
@media (min-width:600px){.dq-two{grid-template-columns:1fr 1fr}}
.dq-lines{display:grid;gap:10px;margin-top:var(--s-3)}
.dq-ln{display:grid;grid-template-columns:minmax(0,1fr) 64px 104px 34px;gap:8px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.dq-ln input{min-height:40px;font-size:var(--fs-15)}
.dq-ln .dq-note{grid-column:1/-1}
.dq-ln .dq-x{width:34px;min-height:40px;border:0;background:none;color:var(--ink-3);font-size:22px;line-height:1;cursor:pointer;border-radius:8px;padding:0}
.dq-ln .dq-x:hover{background:var(--navy-50);color:var(--bad)}
.dq-ln .dq-amt{grid-column:1/-1;display:flex;justify-content:space-between;font-size:var(--fs-13);color:var(--ink-2)}
.dq-ln .dq-amt b{color:var(--ink)}
.dq-picks{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:4px;scrollbar-width:none}
.dq-picks button{flex:none}
.dq-adds{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-3)}
.dq-tots{margin-top:var(--s-3);border-top:1px solid var(--line);padding-top:10px;display:grid;gap:6px}
.dq-tots div{display:flex;justify-content:space-between;font-size:var(--fs-15)}
.dq-tots .big{font-size:var(--fs-18);font-weight:var(--fw-heavy)}

/* the salon's details as registered: read-only on the document */
.dq-reg{margin:10px 0 0;display:grid;gap:4px;font-size:var(--fs-13)}
.dq-reg div{display:flex;gap:10px}
.dq-reg dt{width:140px;flex:none;color:var(--ink-2)}
.dq-reg dd{margin:0;font-weight:var(--fw-bold)}
@media (max-width:520px){.dq-reg div{flex-direction:column;gap:0}.dq-reg dt{width:auto}}
.dq-lock{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:var(--fw-bold);color:var(--ok);background:var(--ok-100);border-radius:var(--r-full);padding:4px 10px;margin-top:8px}

/* the price list: which services read "from" */
.dq-from{display:flex;align-items:center;gap:10px;margin:0;padding:8px 2px;border-bottom:1px solid var(--line);cursor:pointer;font-size:var(--fs-15);font-weight:var(--fw-regular);color:var(--ink)}
.dq-from input{width:20px;height:20px;min-height:0;flex:none;margin:0}
.dq-from span{flex:1}
.dq-from em{color:var(--ink-3);font-style:normal;font-size:var(--fs-13)}

/* the page the document is printed from: off screen until it is asked for */
.dq-printer{position:fixed;left:-10000px;top:0;width:794px;height:1123px;border:0}