/* ============================================================
   TURAB — the shop, in the palette language the home page speaks.
   White ground, one pale surface, ink type, big rounded shapes, and every
   piece of colour on the page coming from the bars themselves.

   Loaded after stretch.css, which still carries the drawer, the toast and
   the dialogs. Everything here is scoped to body.e, the same way the home
   page's own block is. When checkout and the account page follow, this
   foundation and the home page's copy of it should become one file.
   ============================================================ */
:root{
  --paper:#FFFFFF; --surface:#F5F5F3; --surface-2:#ECECE8; --ink:#121212; --ink-2:#55554F; --muted:#8A8A84;
  --line:rgba(18,18,18,.08); --brand:#AA9980;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --disp:var(--serif); --body:"Instrument Sans",system-ui,sans-serif; --mono:"Instrument Sans",system-ui,sans-serif;
  --r:20px; --r-sm:14px; --gut:clamp(18px,3vw,56px); --e:cubic-bezier(.2,.8,.2,1);
}
body.e{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:400;font-size:16px;line-height:1.55}
.e .w{width:calc(100% - 2*var(--gut));max-width:1440px;margin-inline:auto}
.e h1,.e h2,.e h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;text-transform:lowercase;line-height:1}
.e .mono{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.e .pill{font-family:var(--body);font-weight:500;font-size:14px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;letter-spacing:0}
.e .pill:hover{opacity:1;background:#2a2a2a}
.e .pill--ghost{background:var(--surface);color:var(--ink);border:0}
.e .pill--ghost:hover{background:var(--surface-2);color:var(--ink)}
.e .pill--sm{min-height:38px;padding:0 16px;font-size:13px}
.e :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* an author display rule beats the hidden attribute, which silently un-hides
   anything waiting on a switch — the footer's set links did exactly that */
[hidden]{display:none!important}
.e .ann{background:var(--surface);border-bottom:0;color:var(--ink-2);letter-spacing:.02em}
.e .preline{background:var(--ink);border-bottom:0}

/* ---------- header ---------- */
.e header{position:sticky;top:var(--preline-h,0px);z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:0}
.e header .w{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:64px;gap:16px}
.e nav{display:flex;gap:6px}
.e nav a{font-family:var(--serif);font-size:18px;font-weight:400;letter-spacing:.005em;min-height:40px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;color:var(--ink-2);transition:background .2s var(--e),color .2s var(--e)}
.e nav a:hover,.e nav a.on{background:var(--surface);color:var(--ink);opacity:1}
.e .logo{font-family:"Times New Roman",Times,serif;font-size:28px;letter-spacing:.16em;text-indent:.16em;color:var(--brand);justify-self:center;min-height:44px;display:inline-flex;align-items:center}
.e .util{justify-self:end;display:flex;gap:4px;align-items:center}
.e .util a,.e .util button{min-height:40px;min-width:40px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:17px;font-weight:400;color:var(--ink-2);transition:background .2s var(--e)}
.e .util a:hover,.e .util button:hover{background:var(--surface);color:var(--ink)}
.e .util svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.e #cartCount{font-family:var(--mono);font-weight:500;font-size:12px}
.menuBtn{display:none;width:44px;height:44px;place-items:center;border-radius:50%;margin-left:-8px}
.menuBtn i{position:relative;display:block;width:18px;height:1.5px;background:var(--ink)}
.menuBtn i::before,.menuBtn i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .25s var(--e),top .25s var(--e)}
.menuBtn i::before{top:-6px}.menuBtn i::after{top:6px}
.menuBtn[aria-expanded="true"] i{background:transparent}
.menuBtn[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.menuBtn[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
.util__ico{display:none}
@media(max-width:760px){
  .e header .w{grid-template-columns:1fr auto 1fr;gap:8px}
  .menuBtn{justify-self:start}
  .e header .util{justify-self:end}
  .menuBtn{display:grid}
  .e nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:2px;padding:8px var(--gut) 14px;border-bottom:1px solid var(--line)}
  .e nav.open{display:flex}
  .e nav a{display:flex!important;min-height:52px;font-size:24px}
  .e .util #acctLink{display:none}
  .util__ico{display:inline-flex}
  .e .logo{font-size:23px}
}

/* ---------- sections ---------- */
.sec{padding:clamp(34px,5vw,72px) 0}
section[id]{scroll-margin-top:76px}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 clamp(18px,2.4vw,28px)}
.sh h2{font-size:clamp(2.2rem,4vw,3.4rem);max-width:20ch}
.sh p{margin:0;color:var(--ink-2);max-width:44ch;font-size:15px}

/* ---------- the shop head: what this is, then how to narrow it ---------- */
.shead{padding:clamp(22px,3.4vw,44px) 0 clamp(14px,2vw,22px)}
.shead h1{font-size:clamp(2.6rem,5.4vw,4.4rem);margin:0}
.shead__lead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.shead p{margin:10px 0 0;color:var(--ink-2);max-width:56ch;font-size:15px}
/* the promise that is live right now, said once and said plainly */
.shead__pre{display:none}
.__unused{display:inline-flex;align-items:center;gap:10px;background:var(--brand);color:var(--ink);border-radius:999px;
  padding:9px 18px 9px 14px;font-size:14px;font-weight:500;max-width:100%}
.shead__pre b{font-weight:500}
.shead__pre i{width:8px;height:8px;border-radius:50%;background:var(--ink);flex:none;font-style:normal}

/* the kinds. Three of them and everything, each carrying its own count, so the
   shape of the shop is legible before a single thing is clicked. */
/* The kinds are a column down the left that stays with you as you scroll, so it
   is never a mystery that there are soaps below the shampoos. On a phone there
   is no room for a column, so it becomes the line of tabs it used to be. */
.shoplay{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(22px,3.2vw,52px);align-items:start;
  scroll-margin-top:calc(var(--preline-h,0px) + var(--head-h,66px) + 18px)}
.shopside{position:sticky;top:calc(var(--preline-h,0px) + var(--head-h,66px) + 22px)}
.kinds{display:grid;gap:2px}
.kind{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:100%;min-height:0;
  padding:9px 12px;border:0;border-radius:var(--r-sm,10px);background:none;text-align:left;white-space:nowrap;
  color:var(--ink-2);font-size:15px;font-weight:500;transition:background .2s var(--e),color .2s var(--e)}
.kind:hover{background:var(--surface);color:var(--ink)}
.kind span{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.kind.on{background:var(--ink);color:#fff}
.kind.on span{color:rgba(255,255,255,.6)}
@media(max-width:900px){
  /* minmax(0,1fr), not 1fr: a plain 1fr track will not shrink below the cards'
     own minimum width, so the grid grew to 624px inside a 339px phone and took
     the whole page with it. This is the line that made the shop look broken. */
  .shoplay{grid-template-columns:minmax(0,1fr);gap:16px}
  .shopside{position:sticky;top:calc(var(--preline-h,0px) + var(--head-h,60px));z-index:12;
    background:var(--paper);margin:0 calc(-1*var(--gut));padding:10px var(--gut) 10px}
  /* they wrap rather than scroll sideways: every kind is visible at once, so
     nothing is half-cut and there is nothing to guess about swiping */
  .kinds{display:flex;flex-wrap:wrap;gap:8px;overflow:visible}
  .kind{width:auto;flex:none;background:var(--surface);padding:9px 13px;border-radius:999px}
  .kind span{margin-left:2px}
  /* the chips and the two-or-one choice share one wrapping row, and the choice
     takes the right-hand end of whichever row it lands on rather than a row of
     its own -- four rows of chips became three */
  .shopside{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .shopside .kinds{display:contents}
  .gridtog{margin-left:auto}
}
/* two bars to a row, or one: the choice sits beside the kinds and is remembered */
.gridtog{display:none;flex:0 0 auto;gap:2px;padding:2px;background:var(--surface);border-radius:999px}
.gridtog button{display:grid;place-items:center;width:34px;height:34px;border:0;background:none;border-radius:999px;color:var(--muted);cursor:pointer}
.gridtog button.on{background:var(--ink);color:#fff}
.gridtog svg{width:15px;height:15px;fill:currentColor}
@media(max-width:560px){
  .gridtog{display:flex}
  /* the grid is the .pgrid inside #shopGrid, not #shopGrid itself */
  #shopGrid[data-cols="1"] .pgrid{grid-template-columns:minmax(0,1fr)}
  #shopGrid[data-cols="1"] .pcard__ph{aspect-ratio:1/1}
  #shopGrid[data-cols="1"] .pcard__n{font-size:1.3rem}
  #shopGrid[data-cols="1"] .pcard__w{font-size:13.5px;-webkit-line-clamp:2}
  #shopGrid[data-cols="1"] .pcard__cta,#shopGrid[data-cols="1"] .pcard__q{min-height:46px;font-size:14px}
}

/* ---------- a group of one kind ---------- */
.grp{display:flex;align-items:center;gap:14px;margin:clamp(26px,3.4vw,42px) 0 14px}
.grp:first-child,.col>.grp:first-child{margin-top:0}
.grp h2{font-size:clamp(1.5rem,2.4vw,2rem);flex:none}
.grp__dots{display:flex;gap:5px;flex:none}
.grp__dots i{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--c) 62%,#fff);border:1px solid rgba(18,18,18,.07)}
.grp__l{flex:1;height:1px;background:var(--line);min-width:20px}
.grp__n{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none}

/* ---------- the cards ----------
   The picture carries the card. No panel behind it, no tint, no border — the
   photograph sits on the page's own white and the type underneath stays small
   and quiet, so a row of them reads as a shelf rather than a set of boxes. */
/* the shop: as many cards across as fit at about 220px — five on a desk, four on a laptop, two on a phone.
   A card is a doorway, not the room: the product page shows everything. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:clamp(14px,2vw,26px)}
/* the shelves of "everything": a name, how many, and what the kind is for */
.shelf+.shelf{margin-top:clamp(30px,4vw,52px)}
.shelf__h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 clamp(14px,1.8vw,20px);padding-bottom:10px;border-bottom:1px solid var(--line, rgba(18,18,18,.1))}
.shelf__h h2{font-family:var(--serif, "Instrument Serif", serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1;margin:0;letter-spacing:-.005em}
.shelf__h span{font-size:13.5px;color:var(--muted, #8A8A84)}
.pcard{position:relative;display:flex;flex-direction:column;text-align:left;background:none;padding:0}
.pcard__ph{position:relative;aspect-ratio:4/5;border-radius:0;overflow:hidden;
  background:color-mix(in srgb,var(--c) 14%,var(--surface));margin:0 0 14px}
.pcard__ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--e)}
.pcard:hover .pcard__ph img{transform:scale(1.035)}
.pcard__link{position:absolute;inset:0;z-index:2}
/* a bar not yet photographed keeps the drawn disc, centred in the same frame */
.pcard__ph--swatch{display:grid;place-items:center}
.pcard .bar{width:min(62%,150px);margin:0}
.pcard:hover .bar{transform:translateY(-4px) rotate(-3deg)}
/* one word on the picture */
.pcard__tag{position:absolute;left:10px;top:10px;z-index:3;font-family:var(--mono);font-weight:500;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:0;padding:6px 10px}
/* what the thing is, said quietly above its name */
.pcard__k{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.pcard__n{font-family:var(--serif);font-size:1.18rem;line-height:1.1;margin:0}
.pcard__n a{color:inherit}
.pcard__w{font-size:13px;line-height:1.45;color:var(--ink-2);margin:5px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the price and the button sit on the floor of the card, so every button in a row is level */
.pcard__p{display:flex;align-items:baseline;gap:7px;margin:auto 0 0;padding-top:9px;font-family:var(--serif);font-size:1.05rem}
.pcard__p s{color:var(--muted);font-size:.88em;text-decoration-thickness:1px}   /* while the offer is on: what it costs, and what it costs now */
.pcard__p small{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.06em;color:var(--muted)}
/* the button stays quiet until it is wanted */
.pcard__cta{margin:12px 0 0;width:100%;min-height:42px;white-space:normal;border-radius:0;font-family:var(--body);
  font-weight:500;font-size:13.5px;color:var(--ink);background:transparent;
  border:1px solid rgba(18,18,18,.18);transition:background .2s var(--e),color .2s var(--e),border-color .2s var(--e)}
.pcard__cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* the card once the bar is in the bag: how many, and − + in the button's place */
.pcard__q{display:flex;align-items:center;justify-content:space-between;margin:12px 0 0;min-height:42px;border:1px solid var(--ink, #121212);background:var(--ink, #121212);color:#fff}
.pcard__q button{flex:0 0 44px;min-height:40px;font-size:18px;line-height:1;background:none;border:0;color:#fff;cursor:pointer}
.pcard__q button:hover{background:rgba(255,255,255,.14)}
.pcard__q span{flex:1;text-align:center;font-family:var(--mono, var(--b));font-size:13px;letter-spacing:.06em;font-variant-numeric:tabular-nums}

.pcard__cta.done{background:var(--ink);color:#fff;border-color:var(--ink)}
/* sold out: the picture quietens, nothing turns grey */
.pcard--out .pcard__ph img{opacity:.55}
.pcard--out .pcard__ph--swatch .bar{opacity:.5;outline:1.5px dashed rgba(18,18,18,.45);outline-offset:5px;border-radius:50%;filter:none}
.pcard--out .pcard__n,.pcard--out .pcard__w{color:var(--ink-2)}
@media(max-width:560px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  /* a shorter picture, so two bars and their buttons fit on a phone screen */
  .pcard__ph{aspect-ratio:1/1.15;margin-bottom:10px}
  .pcard__n{font-size:1.02rem}
  .pcard__w{font-size:12.5px;-webkit-line-clamp:3}
  .pcard__p{font-size:.98rem;padding-top:7px}
  .pcard__cta,.pcard__q{margin-top:9px;min-height:40px;font-size:13px}
  .pcard__q button{flex-basis:38px}
}
@media(max-width:420px){.pcard__n{font-size:1.15rem}.pcard__w{font-size:13px}}

/* ---------- two quiet bands: one that helps them choose, one that pays for itself ---------- */
.band{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--surface);border-radius:var(--r);padding:clamp(18px,2.6vw,30px)}
.band h3{font-size:clamp(1.3rem,2vw,1.7rem);margin:0}
.band p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px;max-width:52ch}
.band--brand{background:var(--brand)}
.band--brand p{color:rgba(18,18,18,.7)}
.band--brand .pill{background:var(--ink);color:#fff}
.bands{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media(max-width:900px){.bands{grid-template-columns:minmax(0,1fr)}}

/* ---------- promises + footer ---------- */
.prom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.prom div{background:var(--surface);border-radius:var(--r-sm);padding:16px 18px;font-size:14px;font-weight:500;display:flex;gap:12px;align-items:center}
.prom svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.5;flex:none;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.prom{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.prom{grid-template-columns:minmax(0,1fr)}}
.e footer{border-top:0;padding:clamp(28px,4vw,56px) 0 24px;color:var(--ink-2);font-size:14px}
.e footer .w{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(18px,3vw,44px)}
.e footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:500;margin:0 0 6px}
.e .fcol a{display:flex;align-items:center;min-height:36px;color:var(--ink-2)}
.e .fcol a:hover{color:var(--ink)}
.e .f__base{grid-column:1/-1;border-top:1px solid var(--line);margin-top:18px;padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:820px){.e footer .w{grid-template-columns:1fr 1fr}}

/* the drawer, on this page's terms */
.e .cart{border-left:0;box-shadow:-20px 0 60px -30px rgba(18,18,18,.35)}
.e .cart__top h3{text-transform:lowercase}
.e .ci__qty,.e .ci__qty button{border-radius:999px}

/* motion */
.js-motion .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--e),transform .8s var(--e);transition-delay:calc(var(--d,0)*80ms)}
.js-motion .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-motion .reveal{opacity:1;transform:none}}

/* ============================================================
   Checkout, account and order, brought onto the same ground.
   Those pages are built from shop-pages.css, which still speaks in the old
   names — --slate, --card-bg, hairline boxes, 2px corners. Pointing the old
   names at the new palette and softening the shapes is enough; the markup
   and everything it does are untouched.
   ============================================================ */
body.e{--slate:var(--ink-2);--card-bg:var(--paper);--white:var(--paper);--mist:var(--surface)}
.e .page{padding:clamp(22px,3.4vw,44px) 0 clamp(50px,7vw,100px)}
.e .page h1{font-size:clamp(2.4rem,4.6vw,3.4rem)}
.e .box{border:0;background:var(--surface);border-radius:var(--r);margin-bottom:12px}
.e .box__h{font-family:var(--serif);font-size:1.3rem;text-transform:lowercase;letter-spacing:-.01em}
.e .f span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink-2)}
.e .f input,.e .f textarea,.e .f select{border:1px solid transparent;background:var(--paper);border-radius:var(--r-sm);min-height:48px;padding:12px 16px}
.e .f input:focus,.e .f textarea:focus,.e .f select:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:transparent}
.e .code{border:1px solid transparent;background:var(--paper);border-radius:var(--r-sm);font-family:var(--serif);letter-spacing:.28em}
.e .opt{border-top-color:var(--line);border-radius:var(--r-sm)}
.e .muted,.e .opt small{color:var(--ink-2)}
.e .link{color:var(--ink)}
.e .err{color:#8E2F20}
.e .pill--big{min-height:52px;border-radius:999px}
.e .sum__it,.e .sum__row{border-bottom-color:var(--line)}
.e .sum__tot{border-top:1px solid var(--line)}
.e .sum__tot b{font-family:var(--serif);font-size:1.25rem;font-weight:400}
/* the step rail across the top of checkout */
.e .steps{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 clamp(20px,3vw,30px);padding:0;list-style:none;counter-reset:step}
.e .steps li{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border-radius:999px;
  background:var(--surface);color:var(--ink-2);font-size:13.5px;font-weight:500}
.e .steps li.on{background:var(--ink);color:#fff}
.e .steps li.done{background:var(--surface-2);color:var(--ink)}
.e .steps li b{font-family:var(--mono);font-size:11px;letter-spacing:.1em}

/* On a phone the footer was two columns, so Shop sat beside the brand block and
   its heading lined up with the wordmark instead of with Learn and Elsewhere.
   The brand takes the full width and the three columns line up under it. */
@media(max-width:820px){
  footer .w>div:first-child,.e footer .w>div:first-child{grid-column:1/-1}
  footer h4 a,.e footer h4 a{color:inherit;text-decoration:none}
  footer h4 a:hover,.e footer h4 a:hover{text-decoration:underline}
}

/* The wordmark and the bag are pinned to their columns. Without this, on any page
   whose menu is hidden the wordmark falls into the first column and the bag into
   the middle — which is what happened on the account, checkout and order pages. */
header .w>.logo,.e header .w>.logo{grid-column:2;justify-self:center}
header .w>.util,header .w>.bag,.e header .w>.util,.e header .w>.bag{grid-column:3;justify-self:end}
header .w>nav,header .w>.menuBtn,.e header .w>nav,.e header .w>.menuBtn{grid-column:1;justify-self:start}

/* the bag bar: it slides up when there is something to buy, and stays out of the way */
.bagbar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:55;
  display:flex;align-items:center;gap:18px;width:min(520px,calc(100% - 2*var(--gut)));
  justify-content:space-between;padding:13px 16px 13px 20px;border-radius:999px;
  background:var(--ink,#121212);color:#fff;text-decoration:none;font-size:14px;
  box-shadow:0 24px 44px -22px rgba(18,18,18,.7);transition:transform .38s var(--e,ease),opacity .3s var(--e,ease);opacity:0;pointer-events:none}
.bagbar.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.bagbar__n{font-variant-numeric:tabular-nums;opacity:.85}
.bagbar__go{display:inline-flex;align-items:center;gap:8px;font-weight:500;white-space:nowrap}
.bagbar__go i{font-style:normal;transition:transform .3s var(--e,ease)}.bagbar{border:0;font-family:inherit;cursor:pointer;text-align:left}
.bagbar:hover .bagbar__go i{transform:translateX(4px)}
.cart.on~.bagbar,.scrim.on~.bagbar{opacity:0;pointer-events:none}   /* the drawer is open: nothing behind it */
@media(prefers-reduced-motion:reduce){.bagbar{transition:opacity .2s}}
@media print{.bagbar{display:none}}

/* the toast rises above the bag bar rather than landing on top of it */
body:has(.bagbar.on) .toast{bottom:86px}