/* the whole store is one long printed till roll on a green counter. the type is a receipt printer's because it IS a receipt */
:root{
  --tlr-counter:#2d5f32;--tlr-counter-deep:#234b28;--tlr-leaf:#6aa84f;
  --tlr-paper:#fcfcf6;--tlr-ink:#222;--tlr-dim:#626262;--tlr-rule:#bcbcbc;--tlr-glow:#ffe14d
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--tlr-counter);color:var(--tlr-ink);font:400 17px/1.5 "Courier Prime",ui-monospace,monospace;
  background-image:repeating-linear-gradient(45deg,#ffffff0a 0 12px,transparent 12px 24px)}
a{color:inherit}
:focus-visible{outline:3px solid var(--tlr-glow);outline-offset:3px}
img{max-width:100%}
.tlr-skip{position:absolute;left:-999px;top:0;background:var(--tlr-glow);padding:8px 12px}
.tlr-skip:focus{left:12px}

/* the counter top: brand in heavy sans, menu as bare links, basket as an item count */
.tlr-counter{max-width:1120px;margin:0 auto;padding:20px 24px;display:flex;align-items:center;gap:22px;color:#fff;
  font:500 15px/1.3 Rubik,system-ui,sans-serif}
.tlr-shopname{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;font-weight:800;font-size:27px;letter-spacing:-.5px}
.tlr-shopname img{width:44px;height:44px;border-radius:50%;background:#fff}
.tlr-menu{display:flex;gap:18px;flex-wrap:wrap}
.tlr-menu a,.tlr-call{text-decoration:none}
.tlr-menu a:hover,.tlr-call:hover{text-decoration:underline}
.tlr-menu a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.tlr-tab{background:var(--tlr-glow);color:var(--tlr-ink);padding:6px 14px;border-radius:30px;text-decoration:none;white-space:nowrap}

/* the slip: narrow, centered, torn at both ends, every section a block of the receipt */
.tlr-roll{display:block;max-width:560px;margin:14px auto 0;background:var(--tlr-paper);padding:40px 38px;position:relative;
  box-shadow:0 30px 50px #0005;transform:rotate(-.6deg)}
.tlr-roll--long{max-width:780px;transform:rotate(.25deg)}
.tlr-roll::before,.tlr-roll::after{content:"";position:absolute;left:0;right:0;height:14px;
  background:linear-gradient(-45deg,transparent 7px,var(--tlr-paper) 0) 0 0/14px 14px,linear-gradient(45deg,transparent 7px,var(--tlr-paper) 0) 0 0/14px 14px}
.tlr-roll::before{top:-14px;transform:rotate(180deg)}
.tlr-roll::after{bottom:-14px}
.tlr-mid{text-align:center}
.tlr-store{font:800 38px/1.05 Rubik,system-ui,sans-serif;margin:0;letter-spacing:-1px}
.tlr-faint{color:var(--tlr-dim);font-size:15px}
.tlr-mid .tlr-faint{margin:6px 0 0}
.tlr-cut{border:0;border-top:2px dashed var(--tlr-rule);margin:22px 0}
.tlr-loud{font:800 29px/1.15 Rubik,system-ui,sans-serif;margin:0}
.tlr-title{font:800 34px/1.1 Rubik,system-ui,sans-serif;margin:0 0 10px;letter-spacing:-.5px}
.tlr-h{font-weight:700;font-size:17px;letter-spacing:.04em;margin:18px 0 8px}
h2.tlr-h{font-family:"Courier Prime",monospace}

/* a receipt line: label, dotted leader, amount */
.tlr-ln{display:flex;align-items:flex-end;gap:6px;padding:3px 0}
.tlr-ln>span:first-child{min-width:0}
.tlr-ln>span:last-child{flex:none;white-space:nowrap}
.tlr-ln>i{flex:1;border-bottom:2px dotted var(--tlr-rule);margin-bottom:6px;min-width:14px}
.tlr-ln--big{font-weight:700;font-size:20px}
.tlr-ink{background:var(--tlr-glow);color:inherit;padding:0 4px}

/* the one bold thing: each box prints as its own boxed sub-receipt with a fat total */
.tlr-tray{border:2px solid var(--tlr-ink);padding:14px 16px;margin:14px 0}
.tlr-tray h3{font:800 21px/1.2 Rubik,system-ui,sans-serif;margin:0 0 6px}
.tlr-tray h3 small{font:400 14px "Courier Prime",monospace;color:var(--tlr-dim);margin-left:6px}
.tlr-sum{display:flex;justify-content:space-between;font:800 28px/1.2 Rubik,system-ui,sans-serif;margin:8px 0}

.tlr-key{background:var(--tlr-ink);color:#fff;border:0;padding:10px 14px;font:700 15px "Courier Prime",monospace;cursor:pointer;
  text-decoration:none;display:inline-block;min-height:44px}
.tlr-key:hover{background:var(--tlr-counter)}
.tlr-key--s{padding:7px 12px;font-size:14px;margin-top:6px;min-height:36px}
.tlr-key--go{background:var(--tlr-counter)}
.tlr-key--go:hover{background:var(--tlr-counter-deep)}
.tlr-key:disabled{background:#9a9a9a;cursor:not-allowed}
.tlr-key.is-added{background:var(--tlr-leaf)}

/* single bottles, one per printed line */
.tlr-item{padding:12px 0;border-bottom:1px solid #eee;display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center}
.tlr-item b{font-weight:700}
.tlr-item small{display:block;color:var(--tlr-dim)}
.tlr-item small.tlr-sub{color:var(--tlr-counter);font-style:italic}
.tlr-thumb{width:64px;height:64px;object-fit:cover;display:block}
p.tlr-sub{margin:-4px 0 8px;color:var(--tlr-counter);font-style:italic}

/* a product with no photograph prints as an item stub, the way a till prints a code */
.tlr-stub{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  border:2px dashed var(--tlr-ink);background:#fff;color:var(--tlr-ink);padding:4px;overflow:hidden}
.tlr-stub-n{font-weight:700;line-height:1.1;word-break:break-word}
.tlr-stub-c{color:var(--tlr-dim);margin-top:4px}
.tlr-thumb.tlr-stub{font-size:8px}
.tlr-big.tlr-stub{font-size:20px;padding:18px}
.tlr-big.tlr-stub .tlr-stub-c{font-size:14px}

.tlr-bars{height:60px;margin:22px auto 6px;max-width:300px;
  background:repeating-linear-gradient(90deg,var(--tlr-ink) 0 2px,transparent 2px 4px,var(--tlr-ink) 4px 7px,transparent 7px 9px,var(--tlr-ink) 9px 10px,transparent 10px 13px)}

/* products: each entry is a long line item with the label printed beside it */
.tlr-entry{display:grid;grid-template-columns:200px 1fr;gap:10px 26px;scroll-margin-top:20px}
.tlr-big{width:200px;height:200px;object-fit:cover;display:flex}
.tlr-entry h2{font:800 25px/1.15 Rubik,system-ui,sans-serif;margin:0 0 6px}
.tlr-entry-lbl{grid-column:1/-1}
.tlr-claims{margin:6px 0;padding-left:20px}
.tlr-facts{width:100%;border-collapse:collapse;border:2px solid var(--tlr-ink);font-size:15px;margin:8px 0}
.tlr-facts caption{text-align:left;font:800 20px Rubik,system-ui,sans-serif;padding:0 0 4px}
.tlr-facts td,.tlr-facts th{padding:4px 8px;border-top:1px solid var(--tlr-ink);text-align:left;vertical-align:top}
.tlr-facts td:last-child,.tlr-facts th:last-child{text-align:right;white-space:nowrap}
.tlr-facts-top td,.tlr-facts-top td:last-child{border-top:0;text-align:left;white-space:normal}
.tlr-facts-hd th{border-top:6px solid var(--tlr-ink);font-weight:700}
.tlr-sub-row td:first-child{padding-left:24px}

/* price list tables */
.tlr-scroll{overflow-x:auto}
.tlr-grid{width:100%;border-collapse:collapse;font-size:15px}
.tlr-grid th{text-align:left;border-bottom:2px solid var(--tlr-ink);padding:6px 8px}
.tlr-grid td{border-bottom:1px dotted var(--tlr-rule);padding:6px 8px;vertical-align:top}
.tlr-amt{text-align:right;white-space:nowrap}

/* basket */
.tlr-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px dotted var(--tlr-rule)}
.tlr-row small{display:block;color:var(--tlr-dim)}
.tlr-qty{display:flex;align-items:center;gap:4px}
.tlr-qty button{width:36px;height:36px;border:2px solid var(--tlr-ink);background:#fff;font:700 18px "Courier Prime",monospace;cursor:pointer}
.tlr-qty output{min-width:28px;text-align:center;font-weight:700}
.tlr-drop{background:none;border:0;text-decoration:underline;font:inherit;font-size:14px;color:var(--tlr-dim);cursor:pointer;padding:4px}
.tlr-tick{display:flex;gap:12px;align-items:flex-start;padding:12px;border:2px solid var(--tlr-ink);margin:12px 0;background:#fff;cursor:pointer}
.tlr-tick input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--tlr-counter)}
.tlr-tick--must{border-style:dashed}
.tlr-offer{border:2px dashed var(--tlr-counter);padding:12px 14px;margin:14px 0}
.tlr-offer p{margin:6px 0}
.tlr-form label{display:block;margin:8px 0}
.tlr-form label span{display:block;font-size:14px;color:var(--tlr-dim)}
.tlr-form input{width:100%;padding:10px;border:2px solid var(--tlr-ink);font:16px "Courier Prime",monospace;background:#fff}
.tlr-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.tlr-trio{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 12px}
.tlr-oops{background:#fde8e8;border:2px solid #a11;padding:10px;color:#700}

.tlr-legal h2{font:800 21px/1.2 Rubik,system-ui,sans-serif;margin:26px 0 8px}
.tlr-legal h3{font-size:17px;margin:18px 0 6px}
.tlr-legal{overflow-wrap:anywhere}
.tlr-opt{border:2px solid var(--tlr-ink);padding:6px 14px;margin:12px 0;background:#fff}
#tlr-opt-said{font-weight:700}

/* under the counter */
.tlr-under{max-width:1120px;margin:60px auto 0;padding:30px 24px 40px;color:#fff;font:500 15px/1.6 Rubik,system-ui,sans-serif;
  display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:26px}
.tlr-under-list{list-style:none;padding:0;margin:0;line-height:2}
.tlr-under a{text-decoration:none}
.tlr-under a:hover{text-decoration:underline}
.tlr-under-fda{grid-column:1/-1;margin:0;font:400 13px/1.5 "Courier Prime",monospace;color:#e3eee3;border-top:1px dashed #ffffff55;padding-top:16px}

@media (max-width:760px){
  .tlr-counter{flex-wrap:wrap;gap:8px 14px}
  .tlr-shopname{width:100%;font-size:23px}
  .tlr-roll,.tlr-roll--long{margin:14px 12px 0;padding:30px 18px;transform:none}
  .tlr-store{font-size:30px}
  .tlr-loud{font-size:24px}
  .tlr-entry{grid-template-columns:1fr}
  .tlr-big{width:160px;height:160px}
  .tlr-under{grid-template-columns:1fr}
  .tlr-pair,.tlr-trio{grid-template-columns:1fr}
  .tlr-row{grid-template-columns:1fr auto}
  .tlr-row>.tlr-cost{grid-column:2}
}