/* The small basket, the quote form and the reviews from buyers (work order 59). Colours are the brand's roles. */
.vl-bn{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--ba);color:#fff;font:700 12px var(--body)}
.vl-bn[hidden]{display:none}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The panel: under the header's basket link on a computer, a sheet from the bottom on a phone. */
.vlb{position:fixed;top:calc(var(--hd,64px) + 10px);right:max(16px,calc((100vw - var(--wrap,1200px))/2 + 16px));left:auto;margin:0;width:340px;max-width:calc(100vw - 32px);padding:20px;border:1px solid #E3EAF4;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 24px 50px -20px rgba(15,34,51,.35);z-index:80}
.admin-bar .vlb{top:calc(var(--hd,64px) + 42px)}
.vlb h2{font:800 18px/1.2 var(--disp);margin:0 0 12px}
.vlb-item{display:grid;gap:2px;padding:0 0 12px;border-bottom:1px solid #EEF2F7}
.vlb-n{font-weight:700}.vlb-c{font-size:13.5px;color:var(--mute)}.vlb-p{font-weight:700}
.vlb-t{display:flex;justify-content:space-between;margin:12px 0 16px;font-weight:700}.vlb-t b{font:800 18px var(--disp)}
.vlb-a{display:grid;gap:8px}.vlb-a .btn{width:100%;justify-content:center}
.vlb-k{min-height:44px;border:1.5px solid #DCE6F0;border-radius:14px;background:#fff;color:var(--ink);font:700 15px var(--body);cursor:pointer}
.vlb.vlb-sheet{top:auto;bottom:0;left:0;right:0;width:100%;max-width:100%;border-radius:22px 22px 0 0;padding:22px 16px calc(18px + env(safe-area-inset-bottom));animation:vlb-up .25s ease-out}
.vlb.vlb-sheet::backdrop{background:rgba(15,34,51,.45)}
@keyframes vlb-up{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.vlb.vlb-sheet{animation:none}}

/* The quote: a quiet link that opens a small form in place. */
.vlq{margin:12px 0 0}
.vlq>summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--deep);font-weight:700;font-size:14.5px;text-decoration:underline;list-style:none}
.vlq>summary::-webkit-details-marker{display:none}
.vlq-form{margin-top:8px;padding:16px;border:1px solid #E3EAF4;border-radius:16px;background:#fff;text-align:left}
.vlq-f{margin:0 0 12px}.vlq-f label{display:block;font-weight:700;font-size:14px;margin-bottom:5px;color:var(--ink)}
.vlq-f input,.vlq-f select{width:100%;min-height:46px;border:1.5px solid #DCE6F0;border-radius:12px;padding:10px 12px;font:16px var(--body);color:var(--ink);background:#fff}
.vlq-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.vlq-note{font-size:13px;color:var(--mute);margin:8px 0 0}
.vlq-msg:empty{display:none}.vlq-msg{font-weight:700;margin:10px 0 0;color:var(--ink)}
.vlq-done{padding:12px 14px;border-radius:12px;background:#EEFBFD;margin:8px 0}

/* Reviews from buyers. */
.rv h2{margin-bottom:6px}
.rv-sum{color:var(--mute);margin:0 0 18px}
.rv-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rv-item{padding:18px 20px;border:1px solid #E3EAF4;border-radius:18px;background:#fff}
.rv-stars{color:#B7791F;font-size:18px;letter-spacing:2px}.rv-off{color:#C9D6E4}
.rv-text{margin:8px 0;padding:0;border:0;font-size:16px}.rv-text p{margin:0 0 8px}
.rv-by{margin:0;font-size:14px;color:var(--mute)}.rv-v{display:inline-block;padding:2px 9px;border-radius:999px;background:#E6F6F9;color:var(--deep);font-weight:700;font-size:12px}
.rv-reply{margin:12px 0 0;padding:12px 14px;border-left:3px solid var(--ba);background:#F4F9FB;border-radius:0 12px 12px 0;font-size:14.5px}.rv-rl{font-weight:700;margin:0 0 4px}
/* Work order 125, A: the quote form's button keeps "Send me the quote" on one line at every width: as wide as its label
   (no wrapping), with narrower sides; inside a plan card, where the form is narrowest (about 151 px on a computer), the
   form's own padding and the label are a little smaller so that the label fits. On a phone it fills its row. */
.vlq-form .btn{width:auto;max-width:100%;white-space:nowrap;padding-left:12px;padding-right:12px}
.svc .card .vlq-form{padding:12px}
.svc .card .vlq-form .btn{width:auto;font-size:14px;padding-left:10px;padding-right:10px}
@media (max-width:599px){.vlq-form .btn,.svc .card .vlq-form .btn{width:100%}}