/* Dispensing: tabs, forms and the selling rows (organisation tool). */
.dp-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border,var(--border))}
.dp-tabs a{padding:8px 14px;border-radius:10px 10px 0 0;color:var(--text-secondary,#4a4a5a);text-decoration:none;font-weight:600}
.dp-tabs a.on{background:var(--primary,#0d9488);color:#fff}
.dp-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.dp-form label{display:block;font-size:.8rem;color:var(--text-muted,#6b7280)}
.dp-form label>:is(input:not([type=checkbox],[type=radio]),select,textarea){display:block;margin-top:2px}
.dp-form input,.dp-form select{padding:7px 9px;border:1px solid var(--border,var(--border));border-radius:9px;font:inherit;color:var(--text-primary,#111)}
.dp-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 0;border-bottom:1px dotted var(--border,var(--border))}
.dp-pick{position:relative;flex:1;min-width:220px}.dp-pick input{width:100%;padding:7px 9px;border:1px solid var(--border,var(--border));border-radius:9px}
.dp-line input{padding:7px 9px;border:1px solid var(--border,var(--border));border-radius:9px}
@media print{.dp-tabs{display:none}}

/* ---- dispensing v2: grouped navigation, page heads, filters, tables, modal forms ---- */
.dp-tabs{display:none}
.dp-nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 16px;padding:6px;border-radius:14px;background:var(--bg-white,#fff);border:1px solid var(--border,#e5e7eb);overflow-x:auto}
.dp-nav-g{display:flex;gap:2px}
.dp-nav-g+.dp-nav-g{padding-left:14px;border-left:1px solid var(--border,#e5e7eb)}
.dp-nav a{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;color:var(--text-secondary,#4a4a5a);text-decoration:none;font-weight:600;font-size:.88rem;white-space:nowrap;position:relative}
.dp-nav a i{color:var(--text-muted,#6b7280);font-size:.9em}
.dp-nav a:hover{background:color-mix(in srgb,var(--primary,#0d9488) 7%,transparent)}
.dp-nav a.on{background:var(--primary,#0d9488);color:var(--on-primary,#fff)}.dp-nav a.on i{color:inherit}
.dp-nav-cta:not(.on){color:var(--primary,#0d9488)!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--primary,#0d9488) 40%,transparent)}
.dp-count{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#dc2626;color:#fff;font-size:.72rem;display:inline-grid;place-items:center}
@media (max-width:760px){.dp-nav{flex-wrap:nowrap}.dp-nav a span{display:none}.dp-nav a.on span,.dp-nav-cta span{display:inline}}

.dp-head{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:flex-end;margin:0 0 14px}
.dp-head h1{font:700 1.35rem var(--font-primary,inherit);margin:2px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dp-head p{margin:2px 0 0}
.dp-back{font-size:.82rem;font-weight:600;color:var(--text-muted,#6b7280);text-decoration:none}
.dp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.dp-actions form{margin:0}
.dp-danger{color:#b91c1c!important}
.dp-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:0 0 12px}
.dp-search{flex:1;min-width:240px;max-width:520px;position:relative}
.dp-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted,#6b7280)}
.dp-search input{width:100%;padding:10px 12px 10px 36px;border-radius:12px;border:1px solid var(--border,#e5e7eb);background:var(--bg-white,#fff);font:inherit}
.dp-chips{display:flex;flex-wrap:wrap;gap:6px}
.dp-chips a{display:inline-flex;gap:6px;align-items:center;padding:7px 12px;border-radius:99px;border:1px solid var(--border,#e5e7eb);background:var(--bg-white,#fff);color:var(--text-secondary,#4a4a5a);text-decoration:none;font-size:.83rem;font-weight:600}
.dp-chips a.on{background:var(--primary,#0d9488);border-color:var(--primary,#0d9488);color:var(--on-primary,#fff)}
.dp-chips a b{background:rgba(0,0,0,.08);border-radius:99px;padding:0 7px;font-size:.75rem}.dp-chips a.on b{background:rgba(255,255,255,.25)}
.dp-setnav{margin:0 0 14px}
.dp-total{font-size:.88rem;color:var(--text-muted,#6b7280)}.dp-total b{color:var(--text-primary,#111)}
.dp-table-wrap{overflow-x:auto}
.dp-table td{vertical-align:middle}
.dp-name{font-weight:700;text-decoration:none}
.dp-sub{font-size:.78rem;color:var(--text-muted,#6b7280);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.dp-stock{display:inline-block;min-width:3.2em;padding:2px 9px;border-radius:99px;font-weight:700;font-size:.82rem;text-align:center;background:#ecfdf5;color:#047857}
.dp-st-low{background:#fffbeb;color:#b45309}.dp-st-out{background:#fef2f2;color:#b91c1c}.dp-st-off{background:#f3f4f6;color:#6b7280}
.dp-rowact{white-space:nowrap;text-align:right}
.dp-rowact a{display:inline-flex;gap:5px;align-items:center;padding:6px 9px;border-radius:9px;color:var(--text-secondary,#4a4a5a);text-decoration:none;font-size:.82rem}
.dp-rowact a:hover{background:color-mix(in srgb,var(--primary,#0d9488) 9%,transparent);color:var(--primary,#0d9488)}
tr.dp-done td{opacity:.55}
.neg{color:#b91c1c}.pos{color:#047857}
.dp-two{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.dp-two-eq{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media (max-width:1000px){.dp-two,.dp-two-eq{grid-template-columns:1fr}}
.dp-side{display:grid;gap:14px;position:sticky;top:76px}
.dp-dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0}.dp-dl dt{color:var(--text-muted,#6b7280)}.dp-dl dd{margin:0;text-align:right}
.dp-ret{padding:10px 0;border-top:1px solid var(--border,#e5e7eb)}.dp-ret:first-child{border-top:0;padding-top:0}
.dp-ret-h{display:flex;justify-content:space-between;font-size:.92rem}.dp-ret-h span{color:#b91c1c;font-weight:700}
.dp-ret ul{margin:6px 0;padding-left:18px;font-size:.88rem}
.dp-li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--border,#e5e7eb);font-size:.9rem}.dp-li:first-child{border-top:0}
.dp-cardfoot{padding:12px 20px;border-top:1px solid var(--border,#e5e7eb)}
.dp-alerts{display:grid;gap:8px;margin:0 0 14px}
.dp-alert{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a;color:#78350f;text-decoration:none}
.dp-alert span{flex:1}.dp-alert-danger{background:#fef2f2;border-color:#fecaca;color:#7f1d1d}
.dp-billstage{overflow-x:auto}

/* modal forms (also the same form on its own page) */
.dp-solo{max-width:760px;margin:0 auto;background:var(--bg-white,#fff);border:1px solid var(--border,#e5e7eb);border-radius:16px;padding:20px}
.dp-mform{display:grid;gap:14px}
.dp-mh{display:flex;gap:12px;align-items:center}.dp-mh h2{font:700 1.1rem var(--font-primary,inherit);margin:0}.dp-mh p{margin:2px 0 0;color:var(--text-muted,#6b7280);font-size:.85rem}
.dp-mh-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary,#0d9488) 12%,transparent);color:var(--primary,#0d9488);flex:none}
.dp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
/* labels stay one line: the required star and a short hint sit beside the text, so every input in a row lines up */
.dp-grid label,.dp-mform>label{display:block;font-size:.8rem;font-weight:600;color:var(--text-secondary,#4a4a5a)}
.dp-grid label>:is(input:not([type=checkbox],[type=radio]),select,textarea),.dp-mform>label>:is(input:not([type=checkbox],[type=radio]),select,textarea){display:block;margin-top:5px}
.dp-grid label .hint,.dp-mform>label .hint{margin-left:4px}
.dp-grid input,.dp-grid select,.dp-mform textarea,.dp-bd textarea{padding:9px 11px;border:1px solid var(--border,#e5e7eb);border-radius:10px;font:inherit;font-weight:400;color:var(--text-primary,#111);background:var(--bg-white,#fff);width:100%}
.dp-grid input[type=color]{padding:3px;height:40px}
.dp-span2{grid-column:span 2}@media (max-width:520px){.dp-span2{grid-column:auto}}
.req{color:#dc2626}.hint{font-weight:400;color:var(--text-muted,#6b7280);font-size:.78rem}
.dp-fs{border:1px dashed var(--border,#d1d5db);border-radius:12px;padding:10px 14px 14px;margin:0}
.dp-fs legend{font-size:.82rem;font-weight:700;padding:0 6px;color:var(--text-secondary,#4a4a5a)}
.dp-more{justify-self:start;background:none;border:0;color:var(--primary,#0d9488);font-weight:600;cursor:pointer;padding:0;font-size:.85rem}
.dp-mf{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border,#e5e7eb)}
.dp-now{margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--primary,#0d9488) 7%,transparent);font-size:.9rem}
.dp-rt{width:100%;border-collapse:collapse;font-size:.9rem}
.dp-rt th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted,#6b7280);text-align:left;padding:6px}
.dp-rt td{padding:8px 6px;border-top:1px solid var(--border,#e5e7eb);vertical-align:middle}.dp-rt td small{display:block;color:var(--text-muted,#6b7280)}
.dp-rt .r,.dp-table .r{text-align:right}
.dp-qty{width:5.5rem;padding:7px 9px;border:1px solid var(--border,#e5e7eb);border-radius:9px;text-align:right}
.dp-all{background:none;border:0;color:var(--primary,#0d9488);font-size:.78rem;font-weight:700;cursor:pointer}
.dp-refund{justify-self:end;font-size:1.1rem}.dp-refund b{font-size:1.4rem;color:#b91c1c;margin-left:6px}
.dp-check{flex-direction:row!important;align-items:center;gap:8px!important;grid-column:1/-1}.dp-check input{width:auto!important}
.dp-switch{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;font-size:.9rem}.dp-switch input{margin-top:4px}
.dp-settings{display:grid;gap:14px;max-width:860px}
.dp-savebar{display:flex;justify-content:flex-end;position:sticky;bottom:0;padding:12px 0;background:linear-gradient(transparent,var(--bg-body,#f5f6f8) 40%)}

/* bill designer */
.dp-bd{display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);gap:16px;align-items:start}
.dp-bd-controls{display:grid;gap:14px}
.dp-bd-preview{position:sticky;top:76px}.dp-bd-bar{font-size:.85rem;font-weight:600;margin:0 0 8px}
.dp-bd-preview .rx-stage{max-height:calc(100vh - 140px);overflow:auto}
@media (max-width:1000px){.dp-bd{grid-template-columns:1fr}.dp-bd-preview{position:static;order:-1}}
.dp-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.dp-preset{position:relative;display:grid;gap:4px;padding:10px;border-radius:12px;border:1.5px solid var(--border,#e5e7eb);cursor:pointer;font-size:.8rem}
.dp-preset input{position:absolute;opacity:0}
.dp-preset small{color:var(--text-muted,#6b7280);line-height:1.3}
.dp-preset:has(input:checked){border-color:var(--primary,#0d9488);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#0d9488) 18%,transparent)}
.dp-pv{display:grid;gap:3px;padding:7px;border-radius:6px;background:#fff;border:1px solid #e5e7eb;border-top:4px solid var(--a);height:46px}
.dp-pv i{display:block;height:4px;border-radius:2px;background:#cbd5e1}.dp-pv i:first-child{height:6px;width:65%;background:var(--a)}.dp-pv i:nth-child(3){width:45%}
.dp-pv-band,.dp-pv-royal{background:linear-gradient(135deg,var(--a),var(--b));border-top-color:#f59e0b}.dp-pv-band i,.dp-pv-royal i{background:rgba(255,255,255,.6)}.dp-pv-band i:first-child,.dp-pv-royal i:first-child{background:#fff}
.dp-pv-classic,.dp-pv-receipt{justify-items:center}
.dp-lbl{display:block;font-size:.8rem;font-weight:700;margin:14px 0 6px;color:var(--text-secondary,#4a4a5a)}
.dp-toggles{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.88rem}
.dp-logo{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.dp-logo img{max-height:44px;border-radius:8px;border:1px solid var(--border,#e5e7eb)}
@media print{.dp-nav,.dp-head,.dp-side{display:none!important}}

/* ---- counter (new bill) and receive stock ---- */
.pos-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
@media (max-width:1000px){.pos-grid{grid-template-columns:1fr}}
.pos-side{position:sticky;top:76px}
.pos-cust{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border,#e5e7eb)}
.pos-cust label{flex:1;min-width:180px;position:relative}.pos-cust i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted,#6b7280);font-size:.85rem}
.pos-cust input{width:100%;padding:9px 10px 9px 32px;border:1px solid var(--border,#e5e7eb);border-radius:10px;font:inherit}
.pos-need input{border-color:#f59e0b;background:#fffbeb}
.pos-lines{width:100%;border-collapse:collapse}
.pos-lines th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted,#6b7280);text-align:left;padding:8px 10px}
.pos-lines td{padding:6px 10px;border-top:1px solid var(--border,#e5e7eb);vertical-align:top}
.pos-lines .r{text-align:right}
.pos-no{color:var(--text-muted,#6b7280);width:28px;padding-top:15px!important}
.pos-pick{position:relative;min-width:220px}.pos-pick input{width:100%;padding:9px 10px;border:1px solid var(--border,#e5e7eb);border-radius:10px;font:inherit;font-weight:600}
.pos-av{display:block;font-size:.75rem;color:var(--text-muted,#6b7280);margin-top:3px}
.pos-sugg{min-width:100%}.pos-sugg button{display:flex;flex-direction:column;gap:2px;align-items:flex-start}.pos-sugg button span{font-size:.78rem;color:var(--text-muted,#6b7280)}
.pos-sugg button.on{background:color-mix(in srgb,var(--primary,#0d9488) 12%,transparent)}
.pos-sch{margin-left:6px;padding:0 6px;border-radius:99px;background:#fffbeb;color:#b45309}
.pos-qty{width:5rem;padding:9px;border:1px solid var(--border,#e5e7eb);border-radius:10px;text-align:right;font:inherit}
.pos-price{width:6.5rem;padding:9px;border:1px solid var(--border,#e5e7eb);border-radius:10px;text-align:right;font:inherit}
.pur-in{width:100%;min-width:7rem;padding:9px;border:1px solid var(--border,#e5e7eb);border-radius:10px;font:inherit}
.pos-amt{font-weight:700;padding-top:15px!important;white-space:nowrap}
tr.pos-over .pos-qty{border-color:#dc2626;background:#fef2f2;color:#b91c1c}
.pos-add{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:8px 14px;border-top:1px solid var(--border,#e5e7eb)}
.pos-sum{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:0 0 12px;align-items:center}.pos-sum dd{margin:0;text-align:right}
.pos-sum input{width:7rem;padding:7px 9px;border:1px solid var(--border,#e5e7eb);border-radius:9px;text-align:right}
.pos-total{font-size:1.35rem;font-weight:800;padding-top:8px;border-top:1px solid var(--border,#e5e7eb)}
.pos-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px;font-size:.8rem;color:var(--text-muted,#6b7280)}
.pos-quick button{padding:6px 10px;border-radius:9px;border:1px solid var(--border,#e5e7eb);background:var(--bg-white,#fff);font:inherit;font-weight:600;cursor:pointer}
.pos-quick button:hover{border-color:var(--primary,#0d9488);color:var(--primary,#0d9488)}
.pos-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pos-pay label,.pos-tender,.pos-note{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:600;color:var(--text-secondary,#4a4a5a)}
.pos-pay input,.pos-tender input,.pos-note input{padding:8px 9px;border:1px solid var(--border,#e5e7eb);border-radius:9px;font:inherit}
.pos-tender,.pos-note{margin-top:10px}
.pos-bal{margin:10px 0;font-size:.9rem}
.pos-go{width:100%;justify-content:center;margin-top:10px}
kbd{display:inline-block;padding:0 5px;border:1px solid var(--border,#d1d5db);border-bottom-width:2px;border-radius:4px;font-size:.72rem;margin:0 1px;background:var(--bg-white,#fff)}

/* ---- theme colours: every status colour comes from the theme (light and dark), nothing fixed ---- */
:root{--dp-ok:var(--success,#16a34a);--dp-warn:var(--warning,#f59e0b);--dp-bad:#dc2626;
  --dp-ok-ink:color-mix(in srgb,var(--dp-ok) 72%,var(--text-primary,#111));
  --dp-warn-ink:color-mix(in srgb,var(--dp-warn) 62%,var(--text-primary,#111));
  --dp-bad-ink:color-mix(in srgb,var(--dp-bad) 80%,var(--text-primary,#111))}
:root[data-mode="dark"]{--dp-bad:#f87171;--dp-ok-ink:var(--dp-ok);--dp-warn-ink:var(--dp-warn);--dp-bad-ink:var(--dp-bad)}
.dp-stock{background:color-mix(in srgb,var(--dp-ok) 14%,var(--bg-white,#fff));color:var(--dp-ok-ink)}
.dp-st-low{background:color-mix(in srgb,var(--dp-warn) 16%,var(--bg-white,#fff));color:var(--dp-warn-ink)}
.dp-st-out{background:color-mix(in srgb,var(--dp-bad) 13%,var(--bg-white,#fff));color:var(--dp-bad-ink)}
.dp-st-off{background:color-mix(in srgb,var(--text-muted,#6b7280) 14%,var(--bg-white,#fff));color:var(--text-muted,#6b7280)}
.neg,.dp-danger,.bl-ret{color:var(--dp-bad-ink)!important}.pos{color:var(--dp-ok-ink)}
.req{color:var(--dp-bad)}
.dp-count{background:var(--dp-bad);color:#fff}
.dp-ret-h span,.dp-refund b{color:var(--dp-bad-ink)}
.dp-alert{background:color-mix(in srgb,var(--dp-warn) 12%,var(--bg-white,#fff));border-color:color-mix(in srgb,var(--dp-warn) 40%,transparent);color:var(--dp-warn-ink)}
.dp-alert-danger{background:color-mix(in srgb,var(--dp-bad) 10%,var(--bg-white,#fff));border-color:color-mix(in srgb,var(--dp-bad) 35%,transparent);color:var(--dp-bad-ink)}
.pos-need input{border-color:var(--dp-warn);background:color-mix(in srgb,var(--dp-warn) 10%,var(--bg-white,#fff))}
tr.pos-over .pos-qty{border-color:var(--dp-bad);background:color-mix(in srgb,var(--dp-bad) 10%,var(--bg-white,#fff));color:var(--dp-bad-ink)}
.pos-sch{background:color-mix(in srgb,var(--dp-warn) 16%,var(--bg-white,#fff));color:var(--dp-warn-ink)}
.pos-cust input,.pos-pick input,.pos-qty,.pos-price,.pur-in,.pos-sum input,.pos-pay input,.pos-tender input,.pos-note input,.dp-qty,.dp-search input{background:var(--bg-white,#fff);color:var(--text-primary,#111);border-color:var(--border,#e5e7eb)}
.pos-quick button{color:var(--text-primary,#111)}
.dp-head h1,.pos-total{color:var(--text-primary,#111)}
.dp-nav-cta:not(.on){color:var(--primary-ink,var(--primary))!important}
.dp-chips a b{background:color-mix(in srgb,var(--text-primary,#111) 9%,transparent)}
.pos-sugg button span{color:var(--text-muted,#6b7280)}
/* the bill summary scrolls with the page so "Make bill" is always reachable, on any screen height */
.pos-side,.dp-side{position:static}
@media (min-height:900px) and (min-width:1001px){.pos-side{position:sticky;top:76px}}
.pos-sugg{background:var(--bg-white,#fff);border-color:var(--border,#e5e7eb);box-shadow:var(--shadow-md,0 8px 20px rgba(0,0,0,.12))}
.pos-sugg button{color:var(--text-primary,#111)}
.pos-sugg button:hover,.pos-sugg button.on{background:color-mix(in srgb,var(--primary) 12%,var(--bg-white,#fff))}
/* the "Make bill" button is the main action of the counter: always a full, filled theme button */
.pos-go,.pos-go.btn{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:12px;
  background:var(--primary)!important;color:var(--on-primary,#fff)!important;border:0!important;border-radius:12px;font:700 1rem var(--font-primary,inherit);cursor:pointer;
  box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 28%,transparent)}
.pos-go:hover{filter:brightness(1.06)}
.pos-pay input,.pos-tender input,.pos-note input,.pos-sum input{width:100%;min-width:0;box-sizing:border-box}
.pos-pay label{min-width:0}.pos-sum input{width:7rem}
.pos-form .dp-head p{color:var(--text-muted,#6b7280)}
.dp-layouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dp-lv{display:grid;gap:3px;padding:7px;border-radius:6px;background:var(--bg-white,#fff);border:1px solid var(--border,#e5e7eb);height:52px}
.dp-lv i{display:block;height:5px;border-radius:2px;background:color-mix(in srgb,var(--text-muted,#6b7280) 35%,transparent)}
.dp-lv i:first-child{background:var(--primary);width:55%}
.dp-lv-boxed i{border:1px solid color-mix(in srgb,var(--text-muted,#6b7280) 60%,transparent);height:7px;background:none;border-radius:0}.dp-lv-boxed i:first-child{background:var(--primary);border:0}
.dp-lv-modern i:first-child{width:100%;height:8px}.dp-lv-modern i:nth-child(odd):not(:first-child){background:color-mix(in srgb,var(--primary) 25%,transparent)}
.dp-lv-gst i:last-child{width:70%;justify-self:end;background:var(--primary);opacity:.6}