/* ==========================================================================
   Smoke Vibez store styles
   Colors and the font come from the Settings page (added to each page after
   this file), so there is nothing to edit here to change the look.
   Every size is in rem: the one font-size rule in section 2 scales the whole
   site to fit the screen, from a phone up to a 4K TV or an ultrawide monitor.
   ========================================================================== */

/* ---------- 1. Colors (defaults only; Settings overrides them) ---------- */
:root{--field:#141312;--thumb:#23201d;--bg:#121110;--panel:#1c1a18;--line:#2e2b27;--text:#f3efe6;--muted:#a09b91;--accent:#e0a53a;--accent-ink:#1a1408;--ok:#6fbf8b;--warn:#e0a53a;--bad:#e5786d;--scroll:#6c6a66}

/* ---------- 2. Fit to the screen ----------
   The base text size grows smoothly with the window:
     up to 1280 wide = 16px, 1920 = 19px, 2560 = 22px, 3840 (4K) = 29px, never above 40px.
   It also looks at the height of the window, so a very wide but short screen (a 49-inch ultrawide)
   is not given text so large that everything is pushed off the bottom.
   The four lines before the clamp() line are a stepped version for old browsers that do not know clamp(). */
html{font-size:100%}
@media (min-width:1920px){html{font-size:118%}}
@media (min-width:2560px){html{font-size:138%}}
@media (min-width:3840px){html{font-size:175%}}
html{font-size:clamp(100%,min(calc(60% + .5vw),1.78vh),250%)}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font-size:1rem;line-height:1.5;font-family:system-ui,sans-serif}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
/* Links inside sentences (and the trail above a page's heading) are underlined, so they can be told from the words
   around them without seeing colour. Buttons, tiles and menu buttons all have a class and are left alone. */
main a:not([class]),footer p a:not([class]),.gatecard a:not([class]){text-decoration:underline;text-underline-offset:.15em}
main a:not([class]),footer p a:not([class]),.gatecard a:not([class]){text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}
main a:not([class]):hover,footer p a:not([class]):hover,.gatecard a:not([class]):hover{text-decoration-color:currentColor}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.25rem}
h1{font-size:1.7rem;line-height:1.2;margin:.2em 0 .5em;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:1.4em 0 .6em;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
h2.bad{color:var(--bad)}

/* The page column. The shop and homepage use the full window (4% left free on each side).
   Pages that are mostly reading or forms get a narrower column so lines stay comfortable to read. */
main{flex:1 0 auto;width:100%;margin:0 auto;padding:1.25rem 4vw 3rem;padding:1.25rem max(1rem,4vw) 3rem}
main.mid{max-width:88rem;max-width:calc(80rem + 2*max(1rem,4vw))}
main.narrow{max-width:75rem;max-width:calc(67.5rem + 2*max(1rem,4vw))}

/* ---------- 3. Top bar ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.625rem .875rem;z-index:99;font-weight:700}.skip:focus{left:.5rem;top:.5rem}
.bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.625rem 1.625rem;min-height:5.75rem;padding:.875rem 4vw;padding:.875rem max(1rem,4vw);background:var(--bg);border-bottom:3px solid var(--accent)}
.brand{font-weight:800;font-size:1.6rem;color:var(--text);letter-spacing:.02em}
.brand{--logo-h:4.25rem}
.brand img{display:block;max-height:4.25rem;max-width:16.25rem}
/* The logo is the shop's lit sign: a soft glow in the brand green all the way around it. */
.brand img,.herologo,.gatecard .logoprev{filter:drop-shadow(0 0 .3rem color-mix(in srgb,var(--accent) 70%,transparent)) drop-shadow(0 0 .9rem color-mix(in srgb,var(--accent) 38%,transparent))}
/* The lit sign: on a dark theme the built-in logo is a photo of the real sign with its own green halo, so it
   gets no painted-on glow. The picture is larger than the sign by the width of that halo; the negative margins
   let the halo spill over its surroundings so the sign itself sits exactly where a plain logo would. */
.brand picture,.footbrand picture{display:block}
.brand img.lit{width:auto;height:calc(var(--logo-h)/.746);max-width:none;max-height:none;filter:none;margin:calc(var(--logo-h)*-.147) calc(var(--logo-h)*-.171) calc(var(--logo-h)*-.192) calc(var(--logo-h)*-.148)}

.mainnav{display:flex;align-items:center;gap:.25rem}
.mainnav>a,.drop>summary{display:inline-flex;align-items:center;min-height:2.75rem;padding:.625rem 1rem;border-radius:.625rem;font-size:1.08rem;font-weight:600;color:var(--text);cursor:pointer;list-style:none;white-space:nowrap}
.drop>summary::-webkit-details-marker{display:none}
.drop>summary::after{content:"\25BE";opacity:.7;margin-left:.375rem}
.mainnav>a:hover,.drop>summary:hover,.drop[open]>summary{background:var(--thumb);text-decoration:none}
.mainnav>a.here,.drop.here>summary{box-shadow:inset 0 -3px 0 var(--accent);border-radius:.625rem .625rem 0 0;color:var(--accent)}
.navsearch{display:flex;gap:.375rem;margin-left:auto;flex:1 1 10rem;max-width:18.75rem;min-width:0}
.navsearch input{padding:.5625rem .75rem}
.cartbtn{display:inline-flex;align-items:center;gap:.625rem;min-height:2.875rem;padding:.3125rem .875rem .3125rem .3125rem;border-radius:.75rem;background:var(--thumb);color:var(--text);font-weight:700;white-space:nowrap}
.cartbtn:hover{background:var(--line);background:color-mix(in srgb,var(--accent) 16%,var(--thumb));text-decoration:none}
.pill{background:var(--accent);color:var(--accent-ink);border-radius:6.1875rem;padding:1px .5rem;font-size:.8rem;font-weight:700}
.demo{background:#3a2c10;color:#f5d998;text-align:center;padding:.375rem .75rem;font-size:.85rem}
.nodb{background:#3b1f1c;color:#f6c9c3;text-align:center;padding:.5rem .75rem;font-size:.9rem;border-bottom:1px solid #6d332d}

/* The Categories panel that drops down from the top bar. */
.drop{position:static}
.droppanel{position:absolute;z-index:20;top:100%;left:4vw;left:max(1rem,4vw);right:4vw;right:max(1rem,4vw);max-width:80rem;margin-top:.375rem;padding:.75rem;max-height:calc(100vh - 7rem);max-height:calc(100dvh - 7rem);overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--line);border-radius:.875rem;box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.5)}
/* Phone-only pieces of the same button and panel: the three lines, the word "Menu", and the two page links. */
.burger,.dl-phone,.menulinks,.when-open{display:none}
.burger{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.drop[open] .when-open{display:inline}.drop[open] .when-shut{display:none}

/* ---------- 4. Category menu: main items with sub-items ----------
   One row style for every menu on the site (side menu, drop-down, phone menu).
   A main item is a link to its own page; the arrow next to it is a separate button that opens its sub-items. */
.mlist{display:grid;gap:.125rem}
.mrow{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:.5rem .75rem;border-radius:.5rem;color:var(--text);font-weight:600;line-height:1.25}
.mrow:hover{background:var(--thumb);text-decoration:none}
.mrow>span{flex:1;min-width:0;overflow-wrap:anywhere}
.mrow>em{flex:none;font-style:normal;font-weight:400;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mrow.on{background:var(--thumb);background:color-mix(in srgb,var(--accent) 20%,transparent);box-shadow:inset 3px 0 0 var(--accent);font-weight:700}
.mrow.within>span{color:var(--accent)}
.mrow.top{border-bottom:1px solid var(--line);border-radius:.5rem .5rem 0 0;margin-bottom:.375rem}
.mgroup{position:relative}
.mgroup>.mrow{padding-right:3.25rem}
.mgroup>details>summary{position:absolute;top:0;right:0;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:.5rem;color:var(--muted);cursor:pointer;list-style:none}
.mgroup>details>summary::after{content:"";position:absolute;left:0;top:28%;height:44%;width:1px;background:var(--line)}
.mgroup>details>summary::-webkit-details-marker{display:none}
.mgroup>details>summary::before{content:"";width:.5rem;height:.5rem;margin-left:-.2rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.mgroup>details[open]>summary::before{transform:rotate(45deg);margin:-.2rem 0 0}
.mgroup>details>summary:hover{background:var(--line);color:var(--text)}
.msub{display:grid;gap:.125rem;margin:.125rem 0 .5rem 1.25rem;padding-left:.5rem;border-left:2px solid var(--line)}
.msub .mrow{font-weight:400;min-height:2.5rem}
.msub .mrow.on{font-weight:700}
.mempty{margin:0;padding:.5rem .75rem}
@media (pointer:coarse){.msub .mrow{min-height:2.75rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.mgroup>details>summary::before{transition:none}}

/* ---------- 5. Forms and buttons ---------- */
input,select,textarea{width:100%;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:.5rem;padding:.6875rem .75rem;font:inherit}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pwbox{position:relative;display:block}label .pwbox{margin-top:.3125rem}.pwbox>input[type]{margin-top:0;padding-right:2.9rem}.qty .pwbox{display:inline-block;flex:none}.pweye{position:absolute;top:0;right:0;bottom:0;width:2.75rem;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:0 .5rem .5rem 0;color:var(--muted);cursor:pointer}.pweye:hover{color:var(--text)}.pweye:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.pweye svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
input.invalid{border-color:var(--bad)}.ferr{display:block;color:var(--bad);font-size:.85rem;margin-top:.25rem}
label{display:block;margin:0 0 .875rem;color:var(--muted);font-size:.9rem}label input,label select{margin-top:.3125rem}
.check{display:flex;gap:.625rem;align-items:flex-start;color:var(--text)}.check input{width:1.15rem;height:1.15rem;flex:none;margin-top:.2rem;accent-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:.5rem;padding:.6875rem 1.125rem;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.btn:hover{filter:brightness(1.08);text-decoration:none}.btn:disabled{opacity:.6;cursor:wait}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.sm{min-height:2.375rem;padding:.4375rem .75rem;font-size:.88rem}
.btn.wide{display:flex;width:100%;text-align:center;margin-top:.875rem}
.search{display:flex;gap:.5rem;max-width:28.75rem;margin:.375rem 0 1.125rem}

/* ---------- 6. Shared pieces ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;padding:1.125rem;margin-bottom:1rem}
.card h2:first-child,.card h1:first-child{margin-top:0}
.card.narrow{max-width:24rem;margin:2.5rem auto}
.line{display:flex;justify-content:space-between;gap:.875rem;align-items:center;padding:.625rem 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}.line.total{font-weight:700;font-size:1.1rem}.lname{flex:1}.lprice{min-width:4.5rem;text-align:right;font-weight:600}
.alert{background:#3b1f1c;border:1px solid #6d332d;color:#f6c9c3;border-radius:.5rem;padding:.625rem .75rem;margin:0 0 .875rem}
.alert.okmsg{background:#1c3325;border-color:#2f5a40;color:#c9efd6}
.notice{border:1px solid var(--accent);border-left-width:.25rem;border-radius:.5rem;padding:.625rem .75rem;margin:.875rem 0;font-size:.92rem}
.fine{color:var(--muted);font-size:.85rem}.center{text-align:center}.left{text-align:left}.empty{color:var(--muted);padding:.75rem 0}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.tag{font-size:.78rem;font-weight:600}.tag.bad{color:var(--bad)}
.pis{color:var(--accent);font-weight:600}.tag.pis{display:block;margin-bottom:.375rem}
.badge{display:inline-block;border-radius:.375rem;padding:2px .5rem;font-size:.74rem;font-weight:700;letter-spacing:.03em}
.badge.due{background:#5b2a12;color:#ffd9b8}.badge.paidb{background:#173d28;color:#c9efd6}
.back{display:inline-block;margin-bottom:.875rem}
.crumbs{color:var(--muted);font-size:.88rem;margin-bottom:.5rem}
.ahead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem .75rem}
.acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.acts.tight{margin:0}.acts.savebar{margin:0 0 1.25rem}
.code{font:800 2rem/1.1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:var(--accent);margin:.875rem 0 .375rem}.code.sm{font-size:1rem;letter-spacing:.08em;margin:0}
.stafflink{margin:.75rem 0 0;font-size:.82rem}.stafflink a{color:var(--muted);text-decoration:underline}.stafflink a:hover{color:var(--text)}
footer{border-top:1px solid var(--line);padding:1.375rem 4vw 2.5rem;padding:1.375rem max(1rem,4vw) 2.5rem;text-align:center;color:var(--muted);font-size:.9rem}footer p{margin:.25rem 0}
.nic{border:2px solid var(--text);color:var(--text);font-weight:700;display:inline-block;padding:.375rem .75rem;margin-top:.625rem!important}

/* Scroll bars: a slim handle in a dim shade of the text color that lights up in the accent color while it is
   pointed at or dragged; no arrows and no visible track. Chrome, Edge and Safari draw them from the
   ::-webkit-scrollbar parts. Firefox has no such parts and gets the same colors from the standard properties at
   the end; those are kept from Chrome, where they would switch the parts off. The menus' bars are slimmer and
   stop short of the rounded corners. */
::-webkit-scrollbar{width:.8rem;height:.8rem}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{min-height:2.5rem;min-width:2.5rem;border:.25rem solid transparent;border-radius:1rem;background:var(--scroll) padding-box}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{border-width:.2rem;background-color:var(--accent)}
.droppanel::-webkit-scrollbar,.sidemenu::-webkit-scrollbar,.gatebox::-webkit-scrollbar{width:.6rem}
.droppanel::-webkit-scrollbar-thumb,.sidemenu::-webkit-scrollbar-thumb,.gatebox::-webkit-scrollbar-thumb{border-width:.15rem}
.droppanel::-webkit-scrollbar-thumb:hover,.sidemenu::-webkit-scrollbar-thumb:hover,.gatebox::-webkit-scrollbar-thumb:hover,
.droppanel::-webkit-scrollbar-thumb:active,.sidemenu::-webkit-scrollbar-thumb:active,.gatebox::-webkit-scrollbar-thumb:active{border-width:.1rem}
.droppanel::-webkit-scrollbar-track,.sidemenu::-webkit-scrollbar-track,.gatebox::-webkit-scrollbar-track{margin:.6rem 0}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-color:var(--scroll) transparent}
  .droppanel,.sidemenu,.gatebox{scrollbar-width:thin}
}

/* ---------- 7. Homepage ---------- */
.hero{position:relative;border:1px solid var(--line);border-radius:1.125rem;overflow:hidden;min-height:20rem;min-height:clamp(20rem,46vh,34rem);display:flex;align-items:center;padding:2.5rem;margin:.25rem 0 .875rem;background:var(--panel);
  background:radial-gradient(56.25rem 26.25rem at 88% 10%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%),radial-gradient(37.5rem 18.75rem at 0% 100%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),var(--panel)}
.herotext{max-width:35rem}.hero h1{font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.08;margin:0 0 .75rem;letter-spacing:-.02em}
.hero p{font-size:1.08rem;margin:0 0 1.375rem;color:var(--muted)}
.herologo{display:block;width:min(23.75rem,82%);margin:0 0 1.375rem}
.herologo.lit{width:min(27rem,94%);height:auto;filter:none;margin:-1.5rem 0 .5rem -1.3rem}
.herobtns{display:flex;gap:.75rem;flex-wrap:wrap}.herobtns .btn{padding:.8125rem 1.5rem;font-size:1.02rem}
/* Photos of the real shop: the storefront large, the others beside it. On phones they become a row to swipe. */
/* A few words from the shop, between the top of the homepage and the store photos (Settings > Homepage text):
   the heading beside the words on wide screens, above them on phones. */
.welcome{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:.75rem 2.5rem;align-items:baseline;margin:0 0 .875rem;padding:1.75rem 2rem;background:var(--panel);border:1px solid var(--line);border-radius:1.125rem}
.welcome h2{margin:0;font-size:clamp(1.45rem,2.8vw,2rem);line-height:1.12;letter-spacing:-.015em;text-transform:none;color:var(--accent)}
.welcomebody p{margin:0 0 .75rem;max-width:62ch;font-size:1.05rem;line-height:1.6}.welcomebody p:last-child{margin-bottom:0}
.welcome>.welcomebody:only-child{grid-column:1/-1}
@media (max-width:760px){.welcome{grid-template-columns:1fr;padding:1.375rem 1.25rem}}
.shots{display:grid;gap:.75rem;margin:0 0 .875rem}
.shots img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:.75rem;border:1px solid var(--line);background:var(--thumb)}
.shots.n1 img{aspect-ratio:21/9}
.shots.n2{grid-template-columns:5fr 3fr;grid-template-rows:minmax(0,1fr);height:clamp(15rem,32vw,27rem)}
.shots.n3{grid-template-columns:5fr 3fr;grid-template-rows:repeat(2,minmax(0,1fr));height:clamp(17rem,36vw,30rem)}
.shots.n4{grid-template-columns:5fr 3fr;grid-template-rows:repeat(3,minmax(0,1fr));height:clamp(19rem,40vw,33rem)}
.shots.n3 img:first-child,.shots.n4 img:first-child{grid-row:1/-1}
/* Order page: the storefront beside the pickup details, so customers know what to look for */
.pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);column-gap:1.5rem;align-items:start}
.pick>h2{grid-column:1/-1}.pickrows{grid-column:1;grid-row:2;min-width:0}
.findus{grid-column:2;grid-row:2;margin:0}
.findus img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.625rem;border:1px solid var(--line);background:var(--thumb)}
.findus figcaption{margin-top:.4rem}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.375rem}
.strip div{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;padding:.75rem .875rem}.strip strong{display:block;color:var(--accent)}.strip span{color:var(--muted);font-size:.9rem}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:.625rem}
.steps3 div{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;padding:1rem}
.steps3 b{display:grid;place-items:center;width:2.125rem;height:2.125rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);margin-bottom:.625rem}
.steps3 strong{display:block;margin-bottom:.25rem}.steps3 span{color:var(--muted);font-size:.92rem}
:target{scroll-margin-top:7.5rem}

/* ---------- 8. Shop: side menu + product grid ---------- */
.shop{display:grid;grid-template-columns:17.5rem minmax(0,1fr);gap:1.5rem;align-items:start}
/* The side menu stays in view while the products scroll. Seven sections with one of them open is short enough
   to show in full. Where it would not be (a short window, or the taller rows a touch screen gets) it scrolls
   with the page instead, so it is never cut off and never needs scrolling of its own. */
.side{position:sticky;top:9.5rem}
.sidemenu{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;padding:.625rem;max-height:calc(100vh - 11rem);max-height:calc(100dvh - 11rem);overflow-y:auto}
@media (max-height:47.5rem),(pointer:coarse){.side{position:static}.sidemenu{max-height:none;overflow:visible}}
/* The brand level under a vape shelf (Disposable vapes > Geek Bar). The shelf is a link with its own arrow, like a
   section; its brands sit one step further in. In the wide drop-down, a shelf's biggest brands are a line of links. */
.mshelf>.mrow{padding-right:3rem}
.msub .mshelf>details>summary{width:2.5rem;height:2.5rem}
.mbrands{margin:.1rem 0 .35rem .9rem;padding-left:.5rem}
.mbrands .mrow{min-height:2.25rem;padding-top:.3rem;padding-bottom:.3rem;font-size:.93rem}
.mbrands .mrow.mother>span{color:var(--muted)}
@media (pointer:coarse){.msub .mshelf>details>summary{width:2.75rem;height:2.75rem}.mbrands .mrow{min-height:2.75rem}}
.subchips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.subchips a{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.4rem .9rem;border:1px solid var(--line);border-radius:99rem;color:var(--text);white-space:nowrap}
.subchips a:hover{border-color:var(--accent);text-decoration:none}
.subchips a.on{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:700}.subchips a.on em{color:inherit;opacity:.7}
.subchips em{font-style:normal;color:var(--muted);font-size:.85rem}
/* Rows that scroll sideways on a phone (the shelf buttons, the store photos; public/js/sideways.js): an arrow at
   each edge with more beyond it, the shelf buttons fading out under it, and a mouse can drag the row. */
.sideways{position:relative}
.sidebtn{position:absolute;z-index:2;top:50%;display:grid;place-items:center;width:2.5rem;height:2.5rem;margin-top:-1.25rem;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--text);box-shadow:0 .25rem .75rem rgba(0,0,0,.35);cursor:pointer}
.sidebtn[hidden]{display:none}
.sidebtn:hover{border-color:var(--accent);color:var(--accent)}
.sidebtn.prev{left:calc(-1*max(1rem,4vw) + .375rem)}.sidebtn.next{right:calc(-1*max(1rem,4vw) + .375rem)}
.sideways.more-r>.subchips{-webkit-mask-image:linear-gradient(to left,transparent,#000 4rem);mask-image:linear-gradient(to left,transparent,#000 4rem)}
.sideways.more-l>.subchips{-webkit-mask-image:linear-gradient(to right,transparent,#000 4rem);mask-image:linear-gradient(to right,transparent,#000 4rem)}
.sideways.more-l.more-r>.subchips{-webkit-mask-image:linear-gradient(to right,transparent,#000 4rem,#000 calc(100% - 4rem),transparent);mask-image:linear-gradient(to right,transparent,#000 4rem,#000 calc(100% - 4rem),transparent)}
.shots:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dragging{cursor:grabbing;scroll-snap-type:none!important;scroll-behavior:auto;-webkit-user-select:none;user-select:none}.dragging a,.dragging img{pointer-events:none}
/* The grid adds columns by itself as the screen gets wider: 2 on a phone, about 4 on a laptop, 8 or more on a 4K TV. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:.875rem}
.grid.rel{grid-template-columns:repeat(6,1fr)}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;overflow:hidden;min-width:0;color:var(--text);display:flex;flex-direction:column}
.tile:hover{border-color:var(--accent);text-decoration:none}
/* sold out: the picture greyed and the name and price quieter; the "Out of stock" note stays easy to read */
.tile.out .thumb>*{opacity:.45;filter:grayscale(1)}.tile.out .tname,.tile.out .price,.tile.out .tag.pis{color:var(--muted)}
.thumb{aspect-ratio:1;aspect-ratio:var(--pic,3/4);background:var(--thumb);display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;overflow:hidden} /* one cell the size of the box, so a taller picture is cut evenly, not only at the bottom */
.thumb img{width:100%;height:100%;object-fit:cover}.thumb span{font-size:3rem;font-weight:800;color:var(--muted);opacity:.45}
.thumb.sm{width:4rem;flex:none;align-self:flex-start;border-radius:.5rem}.thumb.sm span{font-size:1.6rem}.thumb.big{border-radius:.875rem}
/* An item with two photos: small ones under the big one choose which is shown. */
.gal{min-width:0}.shotrow{display:flex;justify-content:center;gap:.5rem;margin-top:.625rem}
.shot{display:block;width:4.25rem;aspect-ratio:1;aspect-ratio:var(--pic,3/4);border:2px solid var(--line);border-radius:.5rem;overflow:hidden;background:var(--thumb)}
.shot img{display:block;width:100%;height:100%;object-fit:cover}.shot:hover{border-color:var(--muted)}.shot.on{border-color:var(--accent)}
.tinfo{padding:.75rem;display:flex;flex-direction:column;flex:1}.tname{font-weight:600;margin-bottom:.375rem;overflow-wrap:anywhere}
.tsub{margin:-.2rem 0 .45rem;color:var(--muted);font-size:.86rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.tfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.125rem .5rem;margin-top:auto}
.psub{margin:-.35rem 0 .75rem;color:var(--muted);font-size:1.02rem;font-weight:600}
.price{font-weight:700}.price.lg{font-size:1.5rem;margin-bottom:.625rem}.price.lg .fine{font-size:.85rem;font-weight:400;margin-left:.375rem}
.pager{display:flex;justify-content:center;align-items:center;gap:.875rem;margin:1.375rem 0}

/* ---------- 9. Product page ---------- */
/* The picture column is also limited by the height of the window, so a tall picture is seen whole without scrolling. */
.pdp{display:grid;grid-template-columns:minmax(0,26.25rem) minmax(0,1fr);grid-template-columns:minmax(0,min(30rem,44%,max(15rem,calc((100vh - 11rem)*var(--pic,3/4))))) minmax(0,1fr);gap:1.75rem;align-items:start}
/* with the small pictures under it, the big one gives up their height, so both are still seen without scrolling */
.pdp.two{grid-template-columns:minmax(0,min(30rem,44%,max(15rem,calc((100vh - 18.5rem)*var(--pic,3/4))))) minmax(0,1fr)}.desc{color:var(--text);white-space:pre-line}
.addform{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-top:.875rem}.addform label{margin:0}.addform select{width:5.25rem}
.pickupbox{border:1px solid var(--line);border-radius:.75rem;padding:.875rem;margin-top:1.125rem;display:grid;gap:.5rem;background:var(--panel)}
.stickybuy{display:none}

/* ---------- 10. Cart, checkout, order page ---------- */
.qty{display:flex;gap:.375rem}.qty input{width:4.25rem;padding:.4375rem}
.cols{display:grid;grid-template-columns:1.4fr 1fr;gap:1.125rem;align-items:start}
/* The card payment box. It is light whatever the site's colors are: the four fields are Clover's own frames
   (white, dark text), and the card companies' logos are made to sit on white. A frame is only as tall as the
   line of text in it plus a little room below (--cf-in and --cf-room, set by checkout.js), placed so the text
   sits in the middle of its white box. */
.paybox{--cf-in:1.5625rem;--cf-room:.3125rem;margin:.75rem 0 .625rem;background:#fff;color:#16181a;border:1px solid #d5d9dd;border-radius:.75rem;overflow:hidden;color-scheme:light}
.payhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.875rem 1rem 0}
.payhead strong{font-size:1rem;font-weight:700;color:#16181a}
.accepts{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .5rem;margin:0;padding:0;list-style:none}
.accepts img{display:block;height:1.75rem;width:auto;max-width:5.5rem;object-fit:contain}
.accepts .name{padding:.3rem .5rem;border:1px solid #c3c8cd;border-radius:.3rem;font-size:.78rem;font-weight:600;line-height:1.2;color:#33383d;white-space:nowrap}
.cardfields{padding:.75rem 1rem .25rem}
.cfield{min-width:0}
.clabel{display:block;margin:0 0 .3rem;font-size:.82rem;font-weight:600;color:#33383d}
.cardfields .field{display:flex;align-items:center;height:2.875rem;margin:0 0 .75rem;padding:0 .75rem;background:#fff;border:1px solid #8d9399;border-radius:.5rem;overflow:hidden;cursor:text}
.cardfields .field.focus{border-color:#16181a;box-shadow:0 0 0 1px #16181a}
.cardfields .field.invalid{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
.cardfields iframe{display:block;flex:1 1 auto;min-width:0;width:100%!important;height:var(--cf-in)!important;margin-top:var(--cf-room);border:0}
.frow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 .625rem}
.paybox .ferr{margin:-.25rem 0 .75rem;color:#b3261e}
/* the line under the fields: Clover's own (its script writes it, with Clover's lock and mark), or the plain one */
.payfoot,.paybox .clover-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem 1rem;margin:0;padding:.7rem 1rem!important;background:#f4f5f5;border-top:1px solid #e3e6e9;border-radius:0!important;font-size:.85rem;line-height:1.3;color:#565c63;text-align:center}
.payfoot{gap:.4rem;font-weight:600}
.payfoot svg{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paybox .clover-secure-payments{font:inherit!important;font-weight:600!important;color:#565c63!important}
.paybox .clover-privacy-link{font:inherit!important;font-weight:600!important;color:#33383d!important;text-decoration:underline}
.paybox .clover-footer img[src*="lock"]{max-width:.75rem!important}.paybox .clover-footer img[src*="clover-symbol"]{max-width:1.25rem!important}
.secure{margin:.875rem 0 0;font-size:.88rem;color:var(--muted);text-align:center}.secure+.btn.wide{margin-top:.5rem}
.progress{list-style:none;display:flex;gap:.375rem;padding:0;margin:0 0 1rem;flex-wrap:wrap}
.progress li{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.9rem;padding-right:.875rem}
.progress li+li::before{content:"";width:1.75rem;height:2px;background:var(--line);margin-right:.5rem}
.progress b{display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;border:2px solid var(--line);font-size:.8rem}
.progress li.done b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.progress li.now{color:var(--text);font-weight:700}
.steps{list-style:none;display:flex;justify-content:center;gap:.5rem;padding:0;margin:1.125rem 0 0;flex-wrap:wrap}
.steps li{border:1px solid var(--line);border-radius:6.1875rem;padding:.25rem .875rem;color:var(--muted);font-size:.85rem}.steps li.on{background:var(--ok);border-color:var(--ok);color:var(--bg);font-weight:700}

/* ---------- 11. Terms, privacy and the entry gate ---------- */
.terms{max-width:62rem;margin-left:auto;margin-right:auto}
.terms h2{color:var(--text);text-transform:none;letter-spacing:0;font-size:1.05rem}.terms p{color:var(--text)}
.gate{min-height:100vh;display:grid;justify-items:center;align-items:start;padding:1.5rem 1rem;padding:max(1.5rem,6vh) 1rem 1.5rem}
.gatecard{width:100%;max-width:35rem;text-align:center}.gatecard form{display:block;margin:1rem 0}
.gatecard .check{margin:1rem 0;font-size:.95rem}.gatebtns{display:flex;gap:.625rem;justify-content:center}
.gatebox{text-align:left;border:1px solid var(--line);border-radius:.625rem;padding:.25rem 1rem .5rem;margin:.875rem 0;max-height:46vh;overflow-y:auto;font-size:.92rem}
.gatebox h2{margin:.875rem 0 .375rem;font-size:.85rem}.gatebox ol,.gatebox ul{margin:0 0 .5rem;padding-left:1.25rem}.gatebox li{margin-bottom:.375rem}
.logoprev{max-height:3.75rem;max-width:13.75rem;display:block;margin:.375rem 0 .625rem}
.gatecard .logoprev{margin:0 auto .875rem}.gatecard .logoprev.lit{width:min(22rem,100%);height:auto;max-width:none;max-height:none;filter:none;margin:-1rem auto -.25rem}
.photoslot{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;align-items:start;padding:.875rem 0;border-top:1px solid var(--line)}
.photoslot>img,.nophoto{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.5rem;border:1px solid var(--line);background:var(--thumb)}
.nophoto{display:grid;place-items:center;color:var(--muted);font-size:.85rem}.photoslot label{margin-top:0}.photoslot .fine{margin:.375rem 0 0}
/* a card company's logo in Settings: shown whole on white, the way it appears at checkout */
.photoslot.logo>img,.photoslot.logo .nophoto{aspect-ratio:2/1;object-fit:contain;padding:.6rem;background:#fff;border-color:#d5d9dd}
.photoslot.logo .nophoto{padding:.25rem;color:#33383d;font-size:.8rem;font-weight:600;line-height:1.2;text-align:center}
.linklist{margin:.25rem 0 .75rem;padding-left:1.1rem}.linklist li{margin:.2rem 0}
/* Add many photos at once: how to name the files, and what happened to each one */
.namelist{margin:.25rem 0 .75rem;padding-left:1.1rem}.namelist li{margin:.5rem 0}.namelist code,.card code{padding:.1rem .35rem;border:1px solid var(--line);border-radius:.3rem;font-size:.9em;overflow-wrap:anywhere}
.batchlist{list-style:none;margin:0 0 1rem;padding:0}.batchlist li{padding:.45rem 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.batchlist li:last-child{border-bottom:0}
#batchout h3{margin:.75rem 0 .25rem;font-size:1rem}#batch .btn{margin-top:.25rem}
.nophoto.gone,.photoslot.logo .nophoto.gone{padding:.4rem;color:var(--warn);font-size:.78rem;font-weight:400;line-height:1.25;text-align:center}

/* ---------- 12. Staff pages ---------- */
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:.875rem}
.ocard{margin:0}.ohead{display:flex;justify-content:space-between;gap:.625rem;margin-bottom:.5rem}.ocard ul{margin:.5rem 0;padding-left:1.125rem}.ocard .badge{margin-bottom:.5rem}
.attest{flex-basis:100%;border-top:1px solid var(--line);padding-top:.625rem}.attest .check{font-size:.86rem;margin-bottom:.5rem}
.prow{display:flex;gap:.875rem}.pmain{flex:1;min-width:0}.pmain textarea{margin:.5rem 0}
.pacts{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.pacts .check{margin:0}.pacts input[type=file]{width:auto;flex:1;min-width:11.25rem;padding:.375rem}
.pthumbs{display:flex;flex-direction:column;gap:.375rem;flex:none}
.pshots{flex:1 1 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.25rem}
.pshot{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .75rem;min-width:0}.psave{margin-left:auto}
.pfile{display:flex;align-items:center;gap:.5rem;flex:1 1 13rem;min-width:0;margin:0}.pfile>span{flex:none;font-weight:600;color:var(--text)}.pfile input[type=file]{margin-top:0}
.pgroup{background:var(--panel);border:1px solid var(--line);border-radius:.75rem;margin-bottom:.625rem}
.pgroup>summary{padding:.875rem 1rem;cursor:pointer}.pgroup[open]>summary{border-bottom:1px solid var(--line)}
.pgroup .prow{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;background:transparent}.pgroup .prow:last-child{border-bottom:0}
.bulk{display:flex;gap:.625rem;align-items:center;flex-wrap:wrap}.bulk select{width:auto;flex:1;min-width:11.25rem}.bulk p{flex-basis:100%;margin:0}
.syncbox{border-left:.25rem solid var(--ok)}.syncbox.running{border-left-color:var(--accent)}.syncbox.failed{border-left-color:var(--bad)}.syncbox .fine{margin-top:.375rem}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.125rem}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.swatches input[type=color]{height:2.875rem;padding:.25rem;cursor:pointer}.presets{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.log{width:100%;border-collapse:collapse;font-size:.86rem}.log th,.log td{text-align:left;padding:.4375rem .625rem;border-bottom:1px solid var(--line);vertical-align:top}.log th{color:var(--muted)}
.srow{flex-wrap:wrap}
.mcol{flex:0 0 46%}.ordrow input{width:5rem;text-align:center}.menuprev{max-width:20rem}
.fold{border-top:1px solid var(--line)}.fold>summary{padding:.875rem 0;cursor:pointer;font-weight:600}.fold[open]>summary{border-bottom:1px solid var(--line)}
.catrow{align-items:flex-start}.catrow .mcol{flex:0 0 38%}.shelfpick{display:inline-flex;align-items:center;gap:.5rem;margin:0;min-width:0;max-width:100%}.shelfpick select{width:auto;min-width:0;max-width:15rem}
.brandpick{display:inline-flex;align-items:center;gap:.5rem;margin:0;min-width:0;max-width:100%}.brandpick input{width:12rem;min-width:0;margin-top:0}
.designpick{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}.designpick .check{margin:0;padding:.875rem;border:1px solid var(--line);border-radius:.625rem}
/* Bulk pricing (views/admin/pricing.ejs, pricing-batch.ejs). Which Clover the site is on sits at the top in a bar
   whose edge says it at a glance: amber for the test store, red for the real one with changes on. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lede{max-width:46rem;margin:0 0 1rem}
.envbar{background:var(--panel);border:1px solid var(--line);border-left:.25rem solid var(--muted);border-radius:.5rem;padding:.625rem .875rem;margin:0 0 1rem;font-size:.92rem}
.envbar p{margin:0}.envbar.test{border-left-color:var(--warn)}.envbar.real{border-left-color:var(--bad)}
.envbar .access{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-top:.625rem;padding-top:.625rem;border-top:1px solid var(--line)}
.pfgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:0 .875rem}
.prgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.5fr);gap:0 .875rem}
.prgrid label,.pfgrid label{margin-bottom:.625rem}
.unitin{position:relative;display:block;margin-top:.3125rem}.unitin input{margin-top:0;padding-left:1.75rem}
.unitin .unit{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.unitin.pct input{padding-left:.75rem;padding-right:1.875rem}.unitin.pct .unit{left:auto;right:.75rem}
.dim{opacity:.55}
.prule p.fine{margin:.25rem 0 0;max-width:52rem}
.pscope{border:0;border-top:1px solid var(--line);margin:.875rem 0 0;padding:.75rem 0 0;min-width:0}
.pscope legend{float:left;width:100%;margin:0 0 .375rem;padding:0;color:var(--muted);font-size:.9rem}
.pscope .check{clear:left;margin:.375rem 0}.pscope p{margin:.375rem 0 0}
.phead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;margin:1.25rem 0 .5rem}.phead p{margin:0}.tickall{margin:0}
.plist{list-style:none;padding:0;overflow:hidden}
.pitem label{display:grid;grid-template-columns:auto 2.75rem minmax(0,1fr) auto;align-items:center;gap:.75rem;margin:0;padding:.5rem 1.125rem;border-bottom:1px solid var(--line);color:var(--text);font-size:.95rem;cursor:pointer}
.pitem:last-child label{border-bottom:0}.pitem label:hover{background:var(--field)}
.pitem input{width:1.15rem;height:1.15rem;margin:0;accent-color:var(--accent)}
.pitem input:checked~.pname .pn{font-weight:700}.pitem label:has(input:checked){box-shadow:inset .1875rem 0 0 var(--accent)}
.pitem.off label{cursor:default;color:var(--muted)}.pitem.off label:hover{background:transparent}
.thumb.xs{width:2.75rem;flex:none;border-radius:.375rem}.thumb.xs span{font-size:1.1rem}
.pname{display:grid;gap:.125rem;min-width:0}.pn{overflow-wrap:anywhere}.pname .badge{justify-self:start;margin-top:.125rem}
.pprice{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.pgo{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:0 0 1.5rem;padding:.75rem 1.125rem;background:var(--panel);border:1px solid var(--line);border-radius:.75rem;box-shadow:0 -.5rem 1.5rem rgba(0,0,0,.4)}
.pgo p{margin:0}.pgo .warn{color:var(--warn)}
.plog{list-style:none;padding:0 1.125rem}.plog li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.125rem 1rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.plog li:last-child{border-bottom:0}.plog .fine{flex-basis:100%}
.pst{font-size:.85rem;font-weight:700;white-space:nowrap}.pst.big{font-size:.95rem;padding:.25rem .625rem;border:1px solid currentColor;border-radius:.375rem}
.prulel{font-size:1.15rem;font-weight:700;margin:0 0 .25rem}
.pstate h2{margin:0 0 .5rem;font-size:1.2rem;text-transform:none;letter-spacing:0;color:var(--text)}.pstate p{margin:.5rem 0;max-width:52rem}
.pstate.running{border-left:.25rem solid var(--warn)}.pstate.stopped{border-left:.25rem solid var(--bad)}.pstate.done{border-left:.25rem solid var(--ok)}
.pstate progress{display:block;width:100%;height:.75rem;margin:.75rem 0;border:0;border-radius:99rem;background:var(--field);overflow:hidden;-webkit-appearance:none;appearance:none}
.pstate progress::-webkit-progress-bar{background:var(--field)}.pstate progress::-webkit-progress-value{background:var(--accent)}.pstate progress::-moz-progress-bar{background:var(--accent)}
.ptcard{padding:0;overflow:hidden}.ptwrap{overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;font-size:.9rem}
.ptable th,.ptable td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable th{color:var(--muted);font-size:.82rem;font-weight:600}.ptable tbody tr:last-child td{border-bottom:0}
.ptable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.ptable .was{color:var(--muted)}
.ptable .it{display:flex;align-items:center;gap:.625rem;min-width:14rem}.ptable .it>span:last-child{min-width:0;overflow-wrap:anywhere}
.pres{min-width:9rem}.pres.ok{color:var(--ok)}.pres.warn{color:var(--warn)}.pres.bad{color:var(--bad)}
.dmonth{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}.dmonth label{flex:1 1 14rem;margin:0}.dmonth .btn{flex:0 0 auto}
.deptable td{vertical-align:middle}.deptable input{width:100%;margin:0}.deptable .unitin{margin-top:0;min-width:7.5rem}.deptable td:last-child{min-width:14rem}
.dsave{margin-top:1rem}
.pfold{padding:0}.pfold>summary{padding:.875rem 1.125rem;cursor:pointer;font-weight:600}.pfold[open]>summary{border-bottom:1px solid var(--line)}
.pfold-body{padding:.875rem 1.125rem}.pfold-body>p:first-child{margin-top:0}.pfold-body .btn{margin-top:.25rem}
.rmonth>h2{margin-top:1.75rem}.rmonth .card h3{font-size:1rem;margin:0 0 .5rem}.copies a{font-weight:600}
@media (max-width:760px){
  .pfgrid{grid-template-columns:1fr 1fr}.pfgrid>label:nth-child(-n+2){grid-column:1/-1}
  .prgrid{grid-template-columns:1fr}
  .pitem label{grid-template-columns:auto 2.5rem minmax(0,1fr) auto;gap:.625rem;padding:.625rem .875rem}.thumb.xs{width:2.5rem}
  .pgo{margin-left:-.25rem;margin-right:-.25rem;padding:.625rem .875rem}.pgo .btn{flex:1 1 100%}
  .ptable thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%}
  .ptable tr{padding:.75rem .875rem;border-bottom:1px solid var(--line)}.ptable tbody tr:last-child{border-bottom:0}
  .ptable td{border:0;padding:.125rem 0;text-align:left}.ptable .num{text-align:left}.ptable .it{min-width:0;margin-bottom:.25rem}
  .ptable td[data-label]::before{content:attr(data-label) ": ";content:attr(data-label) ": " / "";color:var(--muted);font-size:.85rem}
  .ptable td:empty{display:none}
}

/* ---------- 13. Smaller screens ---------- */
/* Tablets and narrow windows: the Categories menu is a compact fold-out list, not the wide columns */
@media (max-width:1100px){.grid.rel{grid-template-columns:repeat(3,1fr)}.droppanel{right:auto;width:26rem;max-width:calc(100vw - 2rem)}}
/* ---------- Tablets: 761 to 1100 wide ----------
   A layout of their own, between the phone's and the computer's.
   Top bar, one row: the logo, a Menu button, a search box that takes the room in the middle, the cart. Home and
   How it works are inside the menu, as on a phone, because three links and a usable search box do not fit.
   Shop pages: no side menu (the Menu button and the row of shelf buttons do that job), so the products get the
   full width: three to a row with the tablet upright, four with it on its side. */
@media (min-width:761px) and (max-width:1100px){
  .bar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:.75rem 1rem;min-height:0;padding-top:.75rem;padding-bottom:.75rem}
  .brand{--logo-h:3.5rem}.brand img{max-height:3.5rem;max-width:11.5rem}
  .mainnav{display:block}.mainnav>a{display:none}
  .drop>summary{gap:.5rem;padding:.5rem .875rem .5rem .75rem;border:1px solid var(--line);font-size:1rem;font-weight:700}
  .drop>summary::after{display:none}
  .drop.here>summary{box-shadow:none;border-radius:.625rem;color:var(--text)}
  .burger{display:block;width:1.375rem;height:1.375rem}
  .dl-wide{display:none}.dl-phone{display:block}
  .navsearch{max-width:none;margin-left:0}
  .droppanel{max-height:calc(100vh - 6.5rem);max-height:calc(100dvh - 6.5rem)}
  /* the two page links stay in view at the bottom of the menu while the categories scroll above them */
  .menulinks{position:sticky;bottom:-.75rem;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:.375rem;margin:.375rem 0 -.75rem;padding:.375rem 0 .75rem;border-top:1px solid var(--line);background:var(--panel)}
  .menulinks .mrow{justify-content:center;text-align:center;border:1px solid var(--line)}.menulinks .mrow>span{flex:none}
  .shop{display:block}.side{display:none}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
  /* the staff links on one line where they fit */
}
@media (min-width:900px) and (max-width:1100px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* on its side a tablet is short, so a section's own search box sits beside the section's name, not under it */
  .shop>section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);column-gap:1.25rem;align-items:center}
  .shop>section>*{grid-column:1/-1;min-width:0}
  .shop>section>h1{grid-column:1;margin:.1em 0 .35em}
  .shop>section>.search{grid-column:2;max-width:none;margin:0 0 .5rem}
}
/* A tablet on its side is short: the two page links then come after the categories and scroll with them. */
@media (min-width:761px) and (max-width:1100px) and (max-height:560px){.menulinks{position:static;margin-bottom:0;padding-bottom:0}}
@media (max-width:760px){.navsearch{order:5;flex:1 1 100%;max-width:none;margin-left:0}.cartbtn{margin-left:auto}.droppanel{max-height:calc(100vh - 11.5rem);max-height:calc(100dvh - 11.5rem)}}
@media (max-height:520px){.bar{position:relative}}
@media (max-width:760px){
  /* top bar: a Menu button, the logo in the middle, the cart; search under them.
     Home and How it works are inside the menu, under the categories. */
  .bar{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:0;padding-top:.625rem;padding-bottom:.625rem;gap:.5rem .625rem}
  .brand{grid-area:1/2;justify-self:center;--logo-h:2.9rem}.brand img{max-height:3rem;max-width:9.375rem}
  .mainnav{grid-area:1/1;justify-self:start;display:block}
  .cartbtn{grid-area:1/3;justify-self:end;margin-left:0}
  .navsearch{grid-area:2/1/auto/-1}
  .mainnav>a{display:none}
  .drop>summary{flex-direction:column;justify-content:center;gap:.125rem;min-width:3.25rem;min-height:3rem;padding:.25rem .5rem;border:1px solid var(--line);font-size:.72rem;font-weight:700;line-height:1}
  .drop>summary::after{display:none}
  .drop.here>summary{box-shadow:none;border-radius:.625rem;color:var(--text)}
  .burger{display:block;width:1.5rem;height:1.5rem}
  .dl-wide{display:none}.dl-phone{display:block}
  .droppanel{top:100%;right:4vw;right:max(1rem,4vw);width:auto;max-width:none;max-height:70vh;max-height:calc(100dvh - 8.5rem);padding:.5rem}
  /* the two page links stay in view at the bottom of the menu while the categories scroll above them */
  .menulinks{position:sticky;bottom:-.5rem;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:.375rem;margin:.375rem 0 -.5rem;padding:.375rem 0 .5rem;border-top:1px solid var(--line);background:var(--panel)}
  .menulinks .mrow{justify-content:center;text-align:center;border:1px solid var(--line)}.menulinks .mrow>span{flex:none}
  /* shop: the side menu is replaced by the Categories menu in the top bar and the row of category buttons */
  .shop{display:block}.side{display:none}
  .subchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-4vw;margin-right:-4vw;margin-left:calc(-1*max(1rem,4vw));margin-right:calc(-1*max(1rem,4vw));padding:0 4vw .25rem;padding:0 max(1rem,4vw) .25rem}
  .subchips::-webkit-scrollbar{display:none}
  .grid,.grid.rel{grid-template-columns:repeat(2,1fr);gap:.625rem}
  .hero{min-height:0;padding:1.625rem 1.25rem}.strip,.steps3{grid-template-columns:1fr}
  .shots,.shots.n2,.shots.n3,.shots.n4{display:flex;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-left:-4vw;margin-right:-4vw;margin-left:calc(-1*max(1rem,4vw));margin-right:calc(-1*max(1rem,4vw));padding:0 4vw;padding:0 max(1rem,4vw)}
  .shots::-webkit-scrollbar{display:none}
  .shots img{flex:0 0 86%;height:auto;aspect-ratio:3/2;scroll-snap-align:center}.shots.n1 img{flex-basis:100%}
  .pick{display:block}.findus{margin:0 0 .875rem}
  .photoslot{grid-template-columns:5.5rem minmax(0,1fr);gap:.75rem}
  .pdp,.pdp.two,.cols{grid-template-columns:1fr}
  /* a tall product picture is kept to about six tenths of the screen, so the name and price still show under it */
  .pdp>.gal{width:min(100%,calc(62vh*var(--pic,3/4)));margin:0 auto}
  .pdp.two>.gal{width:min(100%,calc(46vh*var(--pic,3/4)))}.shot{width:3.25rem}.shotrow{margin-top:.5rem}
  .pshots{grid-template-columns:1fr}.pfile{flex-wrap:wrap}.pfile input[type=file]{flex:1 1 100%;min-width:0}
  .frow{grid-template-columns:repeat(2,minmax(0,1fr))}.frow>:last-child{grid-column:1/-1}
  .line{flex-wrap:wrap}
  .btn{white-space:normal}.qty{flex-wrap:wrap}
  .sgrid,.designpick{grid-template-columns:1fr}.swatches{grid-template-columns:1fr 1fr}
  .progress li+li::before{width:.75rem}
  .mcol,.catrow .mcol{flex-basis:100%}.shelfpick{display:flex;flex:1 1 100%}.shelfpick select{flex:1 1 0;width:0;max-width:none}.brandpick{display:flex;flex:1 1 100%}.brandpick input{flex:1 1 0;width:0}
  /* product page: a buy bar that stays at the bottom of the screen */
  .stickybuy{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;gap:.75rem;align-items:center;justify-content:space-between;padding:.625rem .875rem;background:var(--panel);border-top:1px solid var(--line)}
  .stickybuy div{min-width:0;display:grid}.stickybuy .fine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stickybuy~footer,body:has(.stickybuy) footer{padding-bottom:5.625rem}
}
/* A phone held sideways is too short to keep Home and How it works pinned in the open menu: there they come
   after the categories and scroll with them, so the list has the whole menu to itself. */
@media (max-width:760px) and (max-height:480px){.menulinks{position:static;margin-bottom:0;padding-bottom:0}}
/* The bar along the bottom of phone screens (views/partials/tabbar.ejs): Home, Menu, Search and Cart stay in reach
   while the page scrolls. The page keeps room for it at the bottom, an item's buy bar sits on top of it, and it
   steps aside while something is being typed (the keyboard needs the room). Settings > Look turns it off. */
.tabbar,.scrim{display:none}
@media (max-width:760px){
  /* the room kept for it: at the end of the page, and when the browser scrolls something into view */
  html.tabs{--tabh:3.75rem;scroll-padding-bottom:4.75rem;scroll-padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + 1rem)}
  html.tabs body{padding-bottom:3.75rem;padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:28;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 .25rem;padding:0 .25rem env(safe-area-inset-bottom,0px);background:var(--bg);border-top:1px solid var(--line)}
  .tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;height:3.75rem;height:var(--tabh);min-width:0;color:var(--muted);font-size:.75rem;font-weight:700;line-height:1;-webkit-tap-highlight-color:transparent}
  .tab,.tab:hover{text-decoration:none}
  .tab.on,.tab[aria-expanded=true]{color:var(--text)}
  .tab.on .tabico,.tab[aria-expanded=true] .tabico{color:var(--accent)}
  .tab.on::before,.tab[aria-expanded=true]::before{content:"";position:absolute;top:-1px;left:50%;width:2.25rem;height:3px;margin-left:-1.125rem;border-radius:0 0 3px 3px;background:var(--accent)}
  .tab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:.625rem}
  .tabico{display:block;width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tab[aria-expanded=true] .when-open{display:inline}.tab[aria-expanded=true] .when-shut{display:none}
  .tabcount{position:absolute;top:.375rem;left:calc(50% + .375rem);min-width:1.125rem;height:1.125rem;padding:0 .3125rem;border-radius:99rem;background:var(--accent);color:var(--accent-ink);font-size:.6875rem;font-weight:800;line-height:1.125rem;text-align:center}
  .tabs .stickybuy{bottom:3.75rem;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px))}
  .typing .tabbar{display:none}.typing.tabs .stickybuy{bottom:0}
  /* The categories menu opened from the bar comes up just above it, over a dimmed page. */
  .menu-sheet .bar{z-index:auto}
  .drop.sheet .droppanel{position:fixed;z-index:26;top:auto;bottom:4.25rem;bottom:calc(var(--tabh) + env(safe-area-inset-bottom,0px) + .5rem);left:4vw;left:max(1rem,4vw);right:4vw;right:max(1rem,4vw);width:auto;max-width:none;margin:0;max-height:calc(100vh - 8.75rem);max-height:calc(100dvh - var(--tabh) - env(safe-area-inset-bottom,0px) - 5rem);animation:sheetup .16s ease-out}
  .droppanel:focus{outline:none}
  .scrim{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:24;background:rgba(0,0,0,.6);touch-action:none}
}
/* Only where there is a pointer to rest on it: a tapped button would otherwise stay lit as if it were the page. */
@media (max-width:760px) and (hover:hover){.tab:hover{color:var(--text)}}
/* A phone on its side is short: the bar is slimmer there, each picture beside its word. */
@media (max-width:760px) and (max-height:480px){
  html.tabs{--tabh:2.75rem}
  .tab{flex-direction:row;gap:.5rem;height:2.75rem;height:var(--tabh)}.tabico{width:1.375rem;height:1.375rem}
  .tabcount{position:static;margin-left:-.25rem}
}
@keyframes sheetup{from{opacity:0;transform:translateY(.75rem)}}
@media (prefers-reduced-motion:reduce){.drop.sheet .droppanel{animation:none}}
/* The narrowest phones: a smaller logo, so the Menu button, the logo and a cart with a number in it share one row. */
@media (max-width:380px){.brand{--logo-h:2.4rem}.brand img{max-height:2.5rem;max-width:7.25rem}}
/* Fingers, on anything wider than a phone (tablets, touch-screen laptops): whatever gets tapped is at least 44px
   tall. Phones have their own sizes above; a computer with a mouse is not touched by this. */
@media (pointer:coarse) and (min-width:761px){
  .btn.sm{min-height:2.75rem;padding:.5rem .875rem}
  .subchips a{min-height:2.75rem}
  .check{min-height:2.75rem;padding:.625rem 0;margin-bottom:.25rem}.check input{width:1.375rem;height:1.375rem;margin-top:0}
  .back{display:inline-flex;align-items:center;min-height:2.75rem;margin-bottom:.25rem}
  .lname>a{display:inline-block;padding:.625rem 0}
  .pacts input[type=file]{min-height:2.75rem}
}

/* ---------- 14. The shop menu: sections in the top bar, till-style buttons ---------- */
/* Computers: the sections in a row of their own under the top bar (views/partials/secbar.ejs), in place of the
   Menu button. Each is a plain link to its section's page, where the side menu (sidetree.ejs) lists that section's
   shelves and brands. The rows of section, shelf and brand buttons above the products would repeat the side menu
   beside them, so on computers they are left out. Phones and tablets keep the Menu button and those rows. */
.secbar{display:none}
@media (min-width:1101px){
  .bar{padding-top:.625rem;row-gap:.5rem}
  .bar .drop{display:none}
  .secbar{order:9;flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:stretch;gap:0 .125rem;margin:0 0 -.875rem;padding-top:.25rem;border-top:1px solid var(--line)}
  .secbar>a{display:flex;align-items:center;min-height:2.75rem;padding:.25rem .875rem;border-radius:.5rem .5rem 0 0;font-size:1rem;font-weight:600;color:var(--text);white-space:nowrap}
  .secbar>a:hover{background:var(--thumb);text-decoration:none}
  .secbar>a.on{box-shadow:inset 0 -3px 0 var(--accent);color:var(--accent)}
  .subchips{display:none}
}
@media (min-width:1101px) and (max-width:1279px){.secbar>a{padding-left:.6rem;padding-right:.6rem;font-size:.95rem}}

/* Till-style buttons: the side menu on computers (sidetree.ejs) and the Menu on phones and tablets (posmenu.ejs).
   Big buttons with the shelf's pictogram and how many items it has. The page you are on is filled in, and so is the
   shelf a brand page belongs to (.within), so the shelf stays lit while its brands are browsed. */
.pos{display:grid;gap:.3125rem}
.posbtn{display:flex;align-items:center;gap:.75rem;min-height:3.25rem;padding:.4375rem .625rem .4375rem .4375rem;border-radius:.75rem;background:var(--thumb);color:var(--text);font-weight:600;line-height:1.2;transition:background-color .12s,transform .12s}
.posbtn:hover{background:var(--line);background:color-mix(in srgb,var(--accent) 16%,var(--thumb));text-decoration:none}
.posbtn:active{transform:scale(.985)}
.posico{flex:none;display:grid;place-items:center;width:2.375rem;height:2.375rem;border-radius:.5625rem;background:var(--bg);color:var(--accent)}
.posico .ico{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.posname{flex:1;min-width:0;overflow-wrap:anywhere}
.posn{flex:none;min-width:2.25rem;padding:.125rem .5rem;border-radius:99px;background:var(--bg);color:var(--muted);font-size:.8rem;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.posgo{flex:none;width:.55rem;height:.55rem;margin:0 .25rem 0 -.125rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
.posbtn.on,.posbtn.within{background:var(--accent);color:var(--accent-ink)}
.posbtn.on .posico,.posbtn.on .posn,.posbtn.within .posico,.posbtn.within .posn{background:rgba(0,0,0,.16);color:var(--accent-ink)}
.posbtn.on .posgo,.posbtn.within .posgo{border-color:var(--accent-ink)}
.postitle{display:flex;align-items:center;gap:.75rem;padding:.375rem .25rem .75rem;margin-bottom:.25rem;border-bottom:1px solid var(--line)}
.postitle .posico{width:2.75rem;height:2.75rem;border-radius:.75rem;background:var(--thumb);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.postitle .posico .ico{width:1.625rem;height:1.625rem}
.postitle strong{display:block;font-size:1.125rem;line-height:1.2}
.postitle small{display:block;margin-top:.125rem;color:var(--muted);font-size:.85rem}
.poschips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3125rem;margin:.125rem 0 .375rem}
.poschips a{display:flex;align-items:center;justify-content:space-between;gap:.375rem;min-height:2.375rem;padding:.25rem .625rem;border:1px solid var(--line);border-radius:.625rem;color:var(--text);font-size:.88rem;font-weight:500}
.poschips a span{min-width:0;overflow-wrap:break-word;line-height:1.2} /* a long maker's name (Factory Throwouts) takes two lines rather than being cut off */
.poschips a em{flex:none;font-style:normal;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.poschips a:hover{border-color:var(--accent);text-decoration:none}
.poschips a.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.poschips a.on em{color:var(--accent-ink)}
.poschips a.other{grid-column:1/-1;color:var(--muted)}
.posback{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;margin:0 0 .25rem;padding:.25rem .5rem;border:0;border-radius:.625rem;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer}
.posback::before{content:"";width:.55rem;height:.55rem;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.posback:hover{background:var(--thumb)}
.posmenu{padding:.125rem}
.posmenu .pospage[hidden]{display:none}
.posmenu .postitle{padding-top:.125rem}
@media (pointer:coarse){.poschips a{min-height:2.75rem}}
@media (prefers-reduced-motion:reduce){.posbtn{transition:none}.posbtn:active{transform:none}}

/* ---------- 15. Accessibility: the site's own panel and what its choices do ---------- */
/* The round button beside Cart on computers and tablets (and on the entry page); on phones the panel is opened
   from the Menu. views/partials/a11y.ejs, public/js/a11y.js. */
.a11ybtn{display:inline-grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:1px solid var(--line);border-radius:.625rem;background:none;color:var(--text);cursor:pointer}
.a11ybtn svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.a11ybtn svg .dot{fill:currentColor;stroke:none}
.a11ybtn:hover,.a11ybtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.navsearch+.a11ybtn{margin-left:-.75rem}
.gatecard{position:relative}
.gatea11y{position:absolute;top:0;right:0}
.gatebox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.a11ypanel{position:fixed;z-index:40;right:4vw;right:max(1rem,4vw);width:23rem;max-width:calc(100vw - 2rem);max-height:calc(100vh - 7rem);max-height:calc(100dvh - 7rem);overflow-y:auto;overscroll-behavior:contain;padding:1rem;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:1rem;box-shadow:0 1.25rem 3rem rgba(0,0,0,.55);text-align:left}
.a11ypanel[hidden]{display:none}
.a11ypanel.sheet{top:auto;bottom:1rem;bottom:calc(var(--tabh,0px) + env(safe-area-inset-bottom,0px) + .75rem);left:max(1rem,4vw);right:max(1rem,4vw);width:auto;margin:0 auto;max-width:30rem}
.a11yhead{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.a11yhead h2{margin:0;font-size:1.25rem;letter-spacing:0;text-transform:none;color:var(--text)}
.a11yclose{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:-.5rem -.5rem -.5rem 0;border:0;border-radius:.625rem;background:none;color:var(--text);cursor:pointer}
.a11yclose svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.a11yclose:hover{background:var(--thumb)}
.a11ypanel>.fine{margin:.25rem 0 1rem}
.a11yrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding:.5rem 0 .875rem;border-bottom:1px solid var(--line);font-weight:600}
.a11yseg{display:flex;gap:.25rem;padding:.25rem;border-radius:.75rem;background:var(--thumb)}
.a11yseg button{min-width:3rem;min-height:2.75rem;padding:0 .5rem;border:0;border-radius:.5rem;background:none;color:var(--text);font:inherit;font-weight:700;font-size:1rem;cursor:pointer}
.a11yseg button.s1{font-size:1.2rem}.a11yseg button.s2{font-size:1.45rem}
.a11yseg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.a11ytog{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:3.5rem;padding:.625rem 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.a11ytog strong{display:block;font-weight:600}
.a11ytog small{display:block;margin-top:.125rem;color:var(--muted);font-size:.85rem}
.a11ytog .sw{position:relative;flex:none;width:3rem;height:1.75rem;border-radius:99px;background:var(--thumb);border:1px solid var(--muted);transition:background-color .15s}
.a11ytog .sw::after{content:"";position:absolute;top:.1875rem;left:.1875rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--muted);transition:transform .15s}
.a11ytog[aria-pressed="true"] .sw{background:var(--accent);border-color:var(--accent)}
.a11ytog[aria-pressed="true"] .sw::after{background:var(--accent-ink);transform:translateX(1.25rem)}
.a11yfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;margin-top:1rem}
.menulinks button.mrow{justify-content:center;border:1px solid var(--line);background:none;font:inherit;font-weight:600;cursor:pointer}
@media (max-width:1100px){.menulinks{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:761px) and (max-width:1100px){.bar{grid-template-columns:auto auto minmax(0,1fr) auto auto}.navsearch+.a11ybtn{margin-left:0}}
/* phones, and tablets held upright (up to 860 wide): the search box needs the room, and Accessibility is in the Menu */
@media (max-width:860px){.bar .a11ybtn{display:none}}
@media (min-width:761px) and (max-width:860px){.bar{grid-template-columns:auto auto minmax(0,1fr) auto}}
@media (prefers-reduced-motion:reduce){.a11ytog .sw,.a11ytog .sw::after{transition:none}}

/* What the choices do. Larger text: everything is sized in rem, so the whole site grows with it; on computers the
   top bar then scrolls away instead of staying in view, since it gets tall. */
html.a11y-t1{font-size:115%}
html.a11y-t2{font-size:130%}
@media (min-width:1920px){html.a11y-t1{font-size:136%}html.a11y-t2{font-size:153%}}
@media (min-width:2560px){html.a11y-t1{font-size:159%}html.a11y-t2{font-size:179%}}
@media (min-width:3840px){html.a11y-t1{font-size:201%}html.a11y-t2{font-size:228%}}
@media (min-width:1101px){html.a11y-t1 .bar,html.a11y-t2 .bar{position:relative}html.a11y-t1 .side,html.a11y-t2 .side{top:1rem}}
/* Phones and tablets with larger text: the logo keeps its usual size and the cart shows the bag and the count only,
   so the top bar still fits in one row and the search box keeps its room (the total is read out with the cart's
   name, and is on the cart page) */
@media (max-width:1100px){html.a11y-t1 .cartbtn.has .ctot,html.a11y-t2 .cartbtn.has .ctot{display:none}html.a11y-t1 .cartbtn.has,html.a11y-t2 .cartbtn.has{padding-right:.3125rem}}
@media (min-width:761px) and (max-width:1100px){html.a11y-t1 .bar .brand,html.a11y-t2 .bar .brand{--logo-h:56px}html.a11y-t1 .bar .brand img:not(.lit),html.a11y-t2 .bar .brand img:not(.lit){max-height:56px;max-width:184px}}
@media (max-width:760px){html.a11y-t1 .bar .brand,html.a11y-t2 .bar .brand{--logo-h:46px}html.a11y-t1 .bar .brand img:not(.lit),html.a11y-t2 .bar .brand img:not(.lit){max-height:48px;max-width:150px}}
@media (max-width:380px){html.a11y-t1 .bar .brand,html.a11y-t2 .bar .brand{--logo-h:38px}html.a11y-t1 .bar .brand img:not(.lit),html.a11y-t2 .bar .brand img:not(.lit){max-height:40px;max-width:116px}}
/* High contrast: pure black and white, the brand color kept for buttons and the page you are on */
html.a11y-c{--bg:#000;--panel:#000;--field:#000;--thumb:#141414;--text:#fff;--muted:#fff;--line:#c8c8c8}
html.a11y-c[data-tone="light"]{--bg:#fff;--panel:#fff;--field:#fff;--thumb:#ececec;--text:#000;--muted:#000;--line:#4a4a4a}
html.a11y-u a:not(.btn):not(.brand):not(.cartbtn):not(.posbtn):not(.mrow){text-decoration:underline;text-underline-offset:.18em}
html.a11y-u .poschips a span,html.a11y-u .secbar>a,html.a11y-u .subchips a{text-decoration:underline;text-underline-offset:.18em}
html.a11y-f body{font-family:"Atkinson Hyperlegible",Verdana,Tahoma,"Segoe UI",Arial,sans-serif;letter-spacing:.02em;word-spacing:.06em;line-height:1.65}
html.a11y-f h1,html.a11y-f h2,html.a11y-f h3,html.a11y-f .btn,html.a11y-f button,html.a11y-f input,html.a11y-f select,html.a11y-f textarea{font-family:inherit}
html.a11y-m *,html.a11y-m *::before,html.a11y-m *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* The cart button (views/partials/top.ejs): a dark tile with the bag while the cart is empty; lime once something is
   in it, with how many items (on the bag) and their subtotal before tax, like a till's charge button. */
.cartbtn .cico{position:relative;display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:.5625rem;background:var(--bg);color:var(--accent)}
.cartbtn .ico{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cartbtn .pill{position:absolute;top:-.4rem;right:-.45rem;display:grid;place-items:center;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:99px;background:var(--accent-ink);color:var(--accent);font-size:.72rem;font-weight:800;line-height:1}
.cartbtn.has{padding-right:1rem;background:var(--accent);color:var(--accent-ink);font-weight:800}
.cartbtn.has:hover{background:var(--accent);box-shadow:0 0 0 3px var(--thumb),0 0 0 4px var(--accent)}
.cartbtn.has .cico{background:rgba(0,0,0,.18);color:var(--accent-ink)}
.cartbtn .ctot{padding-left:.625rem;border-left:1.5px solid rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
/* phones and tablets: with something in the cart, the bag, the count and the subtotal, which leaves the search box its room */
@media (max-width:1100px){.cartbtn.has .cartword{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cartbtn .ctot{padding-left:0;border-left:0}}
/* phones: a little tighter, so a total in the thousands still fits beside the logo; under 360 wide there is room for
   the bag and the count only (the total is still read out with the button's name, and is on the cart page) */
@media (max-width:760px){.cartbtn{gap:.375rem}.cartbtn.has{padding-right:.625rem}}
@media (max-width:359px){.cartbtn.has .ctot{display:none}.cartbtn.has{padding-right:.3125rem}}

/* The staff buttons on the shop's pages (views/partials/top.ejs), in the till style of the staff area. */
.staffpos{padding:.5rem max(1rem,4vw);background:var(--panel);border-bottom:1px solid var(--line)}
.sp-btns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,5.9rem);gap:.375rem}
.staffpos .si{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.spb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-width:0;min-height:3.9rem;padding:.4rem .25rem;box-sizing:border-box;border-radius:.75rem;background:var(--thumb);color:var(--text);font-size:.74rem;font-weight:650;line-height:1.15;text-align:center;text-decoration:none}
.spb .si{color:var(--accent)}
.spb:hover{background:color-mix(in srgb,var(--accent) 18%,var(--thumb));text-decoration:none}
.spb .badge{position:absolute;top:.25rem;right:.35rem;display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;box-sizing:border-box;border-radius:99px;background:var(--bad);color:#140a08;font-size:.7rem;font-weight:800;line-height:1}
.sp-fold{display:none}
@media (max-width:760px){
  .staffpos{padding:.5rem 1rem}
  .sp-btns{display:grid;grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr))}
  .spb{min-height:4.25rem;font-size:.72rem}
  .staffpos.fold .sp-btns{display:none;margin-top:.5rem}
  .staffpos.fold.open .sp-btns{display:grid}
  .staffpos.fold .sp-fold{display:flex;align-items:center;gap:.6rem;width:100%;min-height:2.875rem;padding:.4rem .875rem;border:0;border-radius:.75rem;background:var(--thumb);color:var(--text);font:inherit;font-weight:700;cursor:pointer}
  .sp-fold .si{color:var(--accent)}.sp-fold .chev{margin-left:auto;color:var(--muted);transition:transform .15s}
  .staffpos.open .sp-fold .chev{transform:rotate(180deg)}
  .sp-n{padding:.1rem .55rem;border-radius:99px;background:var(--bad);color:#140a08;font-size:.78rem;font-weight:800}
}

/* The language buttons under the staff login form (views/admin/login.ejs): the login page shows in that language. */
.langpick{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:25rem;margin:-1.25rem auto 2.5rem;padding:0 1rem}.langpick form{margin:0}
/* Arabic letters join up: spacing letters apart breaks the words, so text in Arabic never gets any. */
[lang="ar"],[lang="ar"] *{letter-spacing:0!important}