/* ============================================================
   Teacher Reuse — shared stylesheet.

   Extracted from index.html so the catalogue could move to its own page without
   duplicating 500 lines of design tokens. index.html and shop.html both link
   this; a change to the palette or type scale now lands on both at once.

   Ordering matters here and has bitten before: the media queries live at the END
   of the file. Placed above the base rules they carry no extra specificity and
   silently never apply.
   ============================================================ */
/* ============================================================
   Teacher Reuse — v3.0
   Signature: the shelf tag whose price is struck to FREE, carried
   from hero tag -> catalogue card -> checkout receipt.
   Light lilac field so the store's own warmth can sit on top of it.
   ============================================================ */

:root{
  --porcelain: #F9F4FE;   /* base — lilac-tinted, not white     */
  --wash:      #EFE4FB;   /* hero + banded sections             */
  --lilac:     #E1D0F7;
  --lilac-2:   #C9AEEC;   /* borders, dots                      */
  /* Text colours are the WCAG-checked ones; the light --rose is decorative only.
     Ratios against the hero's mid-tone (#D6C0F3), which is the worst case. */
  --orchid:    #63389F;   /* primary interactive — 4.89 on hero */
  --orchid-dp: #4A2578;
  --plum:      #2F2350;   /* ink — 8.59                         */
  --plum-soft: #544674;   /* secondary text — 5.07              */
  --plum-deep: #241A3F;   /* the one dark ground                */
  --rose:      #E06A9B;   /* decorative fills and borders only  */
  --rose-ink:  #BE3A74;   /* pink as TEXT — 3.14, display sizes */
  --rose-btn:  #C03C77;   /* pink under white text — 5.06       */
  --rose-lo:   #FBDDE9;
  --butter:    #F8EFC9;   /* rare warm highlight                */
  --tag:       #F7EEDC;   /* manila                             */
  --tag-edge:  #E5D6BC;
  --tag-ink:   #4A4030;
  --strike:    #C63A64;   /* 5.01 on white                      */

  --display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --body:    "Source Serif 4", Georgia, serif;
  --label:   "Space Mono", ui-monospace, monospace;
  --hand:    "Caveat", cursive;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1180px;
  --rise: cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--porcelain); color:var(--plum);
  font-family:var(--body);
  font-size:clamp(1.02rem,.42vw + .95rem,1.15rem); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }

h1,h2,h3{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.02; margin:0; }
h1{ font-size:clamp(2.6rem,7vw,5rem); letter-spacing:-.03em; }
h2{ font-size:clamp(1.95rem,4.2vw,3.15rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.05em; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

.eyebrow{
  font-family:var(--label); font-size:.7rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--orchid); margin:0 0 1.1rem;
}
.eyebrow--onDark{ color:var(--lilac-2); }

/* the handwritten voice, borrowed from the banner in the photo below —
   used four times on the page and nowhere else */
.hand{ font-family:var(--hand); font-size:1.45em; line-height:1.15; color:var(--rose-ink); }

:focus-visible{ outline:3px solid var(--orchid); outline-offset:3px; border-radius:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--rose-btn); color:#fff; padding:.7rem 1.1rem;
  font-family:var(--label); font-size:.8rem; text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--display); font-weight:600; font-size:1rem;
  padding:.82rem 1.5rem; border-radius:999px; text-decoration:none;
  border:2px solid transparent; cursor:pointer; background:none;
  transition:transform .18s var(--rise), background-color .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn--fill{ background:var(--rose-btn); color:#fff; box-shadow:0 6px 18px rgba(224,106,155,.34); }
.btn--fill:hover{ background:#A82F66; box-shadow:0 10px 24px rgba(224,106,155,.4); }
.btn--ghost{ color:var(--plum); border-color:var(--lilac-2); }
.btn--ghost:hover{ border-color:var(--orchid); color:var(--orchid-dp); }
.btn--ghostLight{ color:#fff; border-color:rgba(255,255,255,.5); }
.btn--ghostLight:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(252,250,255,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lilac);
}
.nav__in{ display:flex; align-items:center; gap:1.4rem; height:70px; }
.mark{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--plum); }
/* the store's mark is deep green line art — a white badge keeps it its own thing
   instead of fighting the lilac */
.mark img{ width:44px; height:44px; background:#fff; border-radius:50%; padding:3px; flex:none; }
.mark span{ font-family:var(--display); font-weight:600; font-size:1.08rem; letter-spacing:-.02em; white-space:nowrap; }
.nav__links{ display:flex; gap:1.5rem; margin-left:auto; }
.nav__links a{
  font-family:var(--label); font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--plum-soft); text-decoration:none; transition:color .16s;
}
.nav__links a:hover{ color:var(--orchid); }
.nav__cta{ padding:.5rem 1.05rem; font-size:.92rem; }
/* Menu button. Hidden on desktop, where the links sit in the bar already. */
.nav__toggle{
  display:none; align-items:center; gap:.45rem; cursor:pointer;
  font-family:var(--label); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--plum-soft); background:#fff; border:1.5px solid var(--lilac-2);
  border-radius:999px; padding:.42rem .8rem;
}
.nav__toggle:hover{ border-color:var(--orchid); color:var(--orchid-dp); }
.nav__toggle b{ font-weight:400; font-size:.95rem; line-height:1; }

/* ⚠ THIS BLOCK USED TO BE `.nav__links{ display:none }` AND NOTHING ELSE.
   Under 900px that removed every link in the bar — including **Sign in** — leaving a
   logo and "Register free" and no way to reach donors, volunteers, open hours or the
   login page. Reported by the board 2026-08-06 as "there is no place to actually sign
   in" and "not all of the pages let me get back to Donors or Volunteer info". A phone
   is the primary device for both teachers and donors here, so this was the main
   navigation for most real visitors.

   The links now COLLAPSE behind a button instead of vanishing. Note the default is
   *visible*: `display:none` applies only via `[data-open="0"]`, which nav.js sets once
   it has injected the button. If the script never runs, the menu stays open and
   stacked rather than trapping someone on the page. */
@media (max-width:900px){
  /* height:70px is a FIXED height on the desktop bar. Left in place, the wrapped menu
     renders outside it and lands on top of the hero instead of pushing it down — so
     the open menu is unreadable over the page behind it. It has to become a minimum. */
  .nav__in{ flex-wrap:wrap; height:auto; min-height:70px; padding-block:.55rem; }
  .nav__cta{ margin-left:auto; }
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    display:flex; flex-direction:column; align-items:stretch; width:100%; order:4;
    gap:0; margin-top:.55rem; padding-top:.35rem; border-top:1px solid var(--lilac);
  }
  .nav__links a{ padding:.68rem .15rem; font-size:.78rem; }
  .nav__links a + a{ border-top:1px solid var(--wash); }
  .nav__links[data-open="0"]{ display:none; }
}
@media (max-width:420px){ .mark span{ display:none; } }

/* ============================================================
   HERO — light, so the store's own colour can arrive in the photo
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 76% 62% at 84% 2%, rgba(224,106,155,.18), transparent 58%),
    linear-gradient(168deg, var(--lilac) 0%, #D6C0F3 55%, var(--wash) 100%);
  padding-block:clamp(3.2rem,7vw,5.5rem) 0;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--lilac-2) 1.5px, transparent 1.6px);
  background-size:24px 24px; opacity:.5; pointer-events:none;
}
.hero__in{ position:relative; z-index:1; }
.hero h1 em{ font-style:normal; color:var(--rose-ink); }
.hero__lede{ max-width:46ch; margin:1.4rem 0 2rem; font-size:clamp(1.08rem,.5vw + 1rem,1.28rem); color:var(--plum-soft); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__fine{ font-family:var(--label); font-size:.73rem; letter-spacing:.05em; color:var(--plum-soft); margin:1.4rem 0 0; }

/* ---------- the shelf ---------- */
.shelf{ position:relative; z-index:1; margin-top:clamp(2.2rem,4.2vw,3.2rem); padding-bottom:clamp(2.4rem,4.5vw,3.4rem); }
.shelf__rail{
  display:flex; align-items:flex-end; gap:clamp(.85rem,1.8vw,1.6rem);
  padding:0 var(--gut); overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; scroll-snap-type:x proximity;
}
.shelf__rail::-webkit-scrollbar{ display:none; }
.shelf__board{
  height:9px; margin:0 var(--gut); border-radius:1px; position:relative;
  background:linear-gradient(180deg,#C8B393,#A08768);
  box-shadow:0 8px 20px rgba(47,35,80,.18);
}
.shelf__board::before,.shelf__board::after{
  content:""; position:absolute; top:9px; width:9px; height:18px;
  background:linear-gradient(180deg,#A08768,transparent);
}
.shelf__board::before{ left:6%; }
.shelf__board::after{ right:6%; }
.shelf__caption{ font-family:var(--label); font-size:.71rem; letter-spacing:.13em; text-transform:uppercase; color:var(--plum-soft); text-align:center; margin:1.2rem 0 0; }

.tag{
  flex:none; scroll-snap-align:center; width:clamp(158px,20vw,196px);
  background:var(--tag); color:var(--tag-ink); border:1px solid var(--tag-edge);
  padding:1.6rem 1.05rem 1.05rem; position:relative;
  clip-path:polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow:0 5px 14px rgba(47,35,80,.14); transform-origin:50% 0;
}
.tag::after{
  content:""; position:absolute; top:9px; left:9px; width:9px; height:9px;
  border-radius:50%; background:var(--lilac-2); box-shadow:inset 0 1px 2px rgba(47,35,80,.4);
}
.tag__item{ font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.14; margin:0 0 .3rem; }
.tag__meta{ font-family:var(--label); font-size:.66rem; letter-spacing:.06em; color:rgba(74,64,48,.68); margin:0 0 .8rem; line-height:1.4; }
.tag__price{ display:flex; align-items:baseline; gap:.5rem; border-top:1px dashed var(--tag-edge); padding-top:.6rem; margin:0; font-family:var(--label); }
.tag__was{ font-size:.82rem; color:var(--strike); text-decoration:line-through; text-decoration-thickness:2px; }
.tag__now{ font-size:.9rem; font-weight:700; letter-spacing:.09em; }

.tag:nth-child(1){ transform:rotate(-.8deg); }
.tag:nth-child(2){ transform:rotate(.5deg);  }
.tag:nth-child(3){ transform:rotate(-.3deg); }
.tag:nth-child(4){ transform:rotate(.9deg);  }
.tag:nth-child(5){ transform:rotate(-.6deg); }

@media (prefers-reduced-motion:no-preference){
  .tag{ animation:settle .72s var(--rise) backwards; }
  .tag:nth-child(1){ animation-delay:.14s; }
  .tag:nth-child(2){ animation-delay:.24s; }
  .tag:nth-child(3){ animation-delay:.34s; }
  .tag:nth-child(4){ animation-delay:.44s; }
  .tag:nth-child(5){ animation-delay:.54s; }
  @keyframes settle{ from{ opacity:0; transform:translateY(-24px) rotate(-4deg); } }
}

/* ============================================================
   THE BANNER — the store's own photograph, given room
   ============================================================ */
.banner{ background:var(--wash); padding-block:clamp(2.5rem,5vw,4rem); }
.banner__in{ display:grid; gap:clamp(1.4rem,3vw,2.6rem); grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; }
@media (max-width:860px){ .banner__in{ grid-template-columns:1fr; } }
.banner__shot{ border-radius:6px; overflow:hidden; box-shadow:0 16px 40px rgba(47,35,80,.18); }
.banner__shot img{ width:100%; height:auto; }
.banner__say .hand{ display:block; font-size:clamp(2rem,4.6vw,3.1rem); margin-bottom:.6rem; }
.banner__say p{ color:var(--plum-soft); margin:0; }
.banner__cap{ font-family:var(--label); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--plum-soft); margin:1rem 0 0; }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding-block:clamp(3.2rem,7vw,5.75rem); }
.sec--band{ background:var(--wash); }
.sec--deep{ background:var(--plum-deep); color:#fff; }
.sec--deep h2,.sec--deep h3{ color:#fff; }
.sec__head{ margin-bottom:clamp(1.9rem,4vw,2.9rem); }
.sec__head h2{ max-width:16ch; }
.sec__head p{ max-width:46ch; color:var(--plum-soft); margin:1rem 0 0; }
.sec--deep .sec__head p{ color:rgba(255,255,255,.76); }

/* ---------- ledger ---------- */
.ledger{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); border-top:2px solid var(--plum); }
.ledger__row{ padding:1.5rem 1.4rem 1.4rem; border-bottom:2px solid var(--plum); border-right:1px solid var(--lilac-2); }
.ledger__row:last-child{ border-right:0; }
.ledger__n{ font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,4vw,3.2rem); letter-spacing:-.03em; line-height:1; display:block; }
.ledger__l{ font-family:var(--label); font-size:.71rem; letter-spacing:.12em; text-transform:uppercase; color:var(--plum-soft); margin:.55rem 0 0; display:block; }
.ledger__note{ font-family:var(--label); font-size:.71rem; letter-spacing:.05em; color:var(--plum-soft); margin:1.1rem 0 0; }

.counter{ margin-top:clamp(2.2rem,4.5vw,3.2rem); display:grid; gap:1.6rem; align-items:start; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
.counter__big{ font-family:var(--display); font-weight:600; font-size:clamp(1.45rem,2.6vw,2.05rem); line-height:1.16; margin:0; }
.counter__big s{ color:var(--strike); text-decoration-thickness:3px; }
.counter p{ color:var(--plum-soft); margin:0; }
@media (max-width:760px){ .counter{ grid-template-columns:1fr; } }

/* ---------- steps ---------- */
.steps{ display:grid; gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:4px; overflow:hidden; }
.step{ background:var(--plum-deep); padding:clamp(1.6rem,3vw,2.3rem); }
.step__n{ font-family:var(--label); font-size:.73rem; font-weight:700; letter-spacing:.16em; color:#F79CC0; display:block; margin-bottom:.9rem; }
.step h3{ margin-bottom:.55rem; }
.step p{ color:rgba(255,255,255,.76); margin:0; font-size:.97rem; }
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   THE CATALOGUE
   ============================================================ */
.shopBar{ position:sticky; top:70px; z-index:30; background:var(--porcelain); border-bottom:1px solid var(--lilac); padding-block:.85rem; margin-bottom:clamp(1.4rem,3vw,2rem); }
.shopBar__in{ display:flex; flex-direction:column; gap:.7rem; }
.search{ position:relative; display:flex; }
.search input{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--plum);
  background:#fff; border:2px solid var(--lilac-2); border-radius:999px; padding:.68rem 2.6rem .68rem 1.1rem;
}
.search input::placeholder{ color:var(--plum-soft); opacity:.8; }
.search input:focus{ border-color:var(--orchid); outline:none; }
.search__clear{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%); border:0; background:none; cursor:pointer; padding:.5rem; line-height:1; font-family:var(--label); font-size:1rem; color:var(--plum-soft); }
.chips{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.15rem; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; cursor:pointer; border:1.5px solid var(--lilac-2); background:#fff; color:var(--plum-soft);
  border-radius:999px; padding:.4rem .85rem; font-family:var(--label); font-size:.71rem;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:background-color .15s, color .15s, border-color .15s;
}
.chip:hover{ border-color:var(--orchid); color:var(--orchid); }
.chip[aria-pressed="true"]{ background:var(--orchid); border-color:var(--orchid); color:#fff; }

.shopCount{ font-family:var(--label); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--plum-soft); margin:0 0 1rem; }

.grid{ display:grid; gap:clamp(.7rem,1.4vw,1.05rem); grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); }
@media (min-width:700px){ .grid{ grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); } }

.card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--lilac); border-radius:6px; overflow:hidden; transition:border-color .18s, box-shadow .18s, transform .18s var(--rise); }
.card:hover{ border-color:var(--lilac-2); box-shadow:0 10px 24px rgba(47,35,80,.1); transform:translateY(-2px); }
.card[data-in="1"]{ border-color:var(--rose); box-shadow:0 0 0 1.5px var(--rose); }
.card__shot{ aspect-ratio:1/1; background:#fff; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:7%; }
/* contain, not cover. Only 5 of 214 item photos are square — the median is a 3:1
   or worse crop, and for a supply catalogue the shape of the thing IS how a teacher
   recognises it. Cover turned "Wall Decor" (a wooden arrow) into a teal plank and
   cut the ends off every ruler, tape roll and streamer.
   The per-image max-* caps come from the catalogue's native dimensions: 83 of 214
   photos are smaller than the box, and blowing an 80px crop up to 340 device px is
   what actually reads as "blurry". Capped at 1.5x native — small and sharp beats
   big and mushy. The 34 worst are listed in photos_to_reshoot.csv. */
.card__shot img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.card__none{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; text-align:center; background:var(--tag); clip-path:polygon(0 12px, 12px 0, 100% 0, 100% 100%, 0 100%); }
.card__none span{ font-family:var(--label); font-size:.65rem; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:rgba(74,64,48,.6); }
.card__body{ padding:.75rem .8rem .8rem; display:flex; flex-direction:column; flex:1; gap:.45rem; }
.card__name{ font-family:var(--display); font-weight:500; font-size:.98rem; line-height:1.2; margin:0; }
.card__price{ font-family:var(--label); font-size:.75rem; display:flex; align-items:baseline; gap:.4rem; margin:0; }
.card__was{ color:var(--strike); text-decoration:line-through; text-decoration-thickness:1.5px; }
.card__now{ font-weight:700; letter-spacing:.08em; }
.card__code{ font-family:var(--label); font-size:.65rem; letter-spacing:.1em; color:var(--plum-soft); margin:0; }
.card__act{ margin-top:auto; }

.add{ width:100%; cursor:pointer; border:1.5px solid var(--lilac-2); background:#fff; color:var(--plum); border-radius:999px; padding:.48rem; font-family:var(--display); font-weight:600; font-size:.9rem; transition:background-color .15s, color .15s, border-color .15s; }
.add:hover{ background:var(--rose-btn); border-color:var(--rose-btn); color:#fff; }
.stepper{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; border:1.5px solid var(--rose); border-radius:999px; background:var(--rose-lo); }
.stepper button{ cursor:pointer; border:0; background:none; padding:.42rem .75rem; font-family:var(--display); font-weight:600; font-size:1.05rem; line-height:1; }
.stepper button:hover{ color:var(--orchid-dp); }
.stepper span{ font-family:var(--label); font-size:.78rem; font-weight:700; }

.empty{ padding:2.5rem 0; color:var(--plum-soft); font-family:var(--label); font-size:.85rem; letter-spacing:.06em; }

/* ---------- floating list bar ---------- */
.listBar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--plum-deep); color:#fff; border-top:2px solid var(--rose);
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:1rem;
  transform:translateY(110%); transition:transform .28s var(--rise);
  box-shadow:0 -8px 30px rgba(47,35,80,.28);
}
.listBar[data-show="1"]{ transform:none; }
.listBar__n{ font-family:var(--label); font-size:.76rem; line-height:1.45; letter-spacing:.04em; margin:0; }
.listBar__n b{ font-family:var(--display); font-weight:600; font-size:1.02rem; }
.listBar .btn{ margin-left:auto; padding:.58rem 1.1rem; font-size:.93rem; white-space:nowrap; }

/* ---------- receipt sheet ---------- */
.sheet{ position:fixed; inset:0; z-index:80; display:none; }
.sheet[data-open="1"]{ display:block; }
.sheet__scrim{ position:absolute; inset:0; background:rgba(36,26,63,.6); backdrop-filter:blur(3px); }
.sheet__panel{
  position:absolute; inset:auto 0 0 0; max-height:92vh; overflow-y:auto;
  background:var(--porcelain); border-top-left-radius:14px; border-top-right-radius:14px;
  padding:1.3rem var(--gut) calc(2rem + env(safe-area-inset-bottom)); animation:up .3s var(--rise);
}
@media (min-width:760px){
  .sheet__panel{ inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(560px,92vw); max-height:88vh; border-radius:14px; animation:pop .25s var(--rise); }
}
@keyframes up{ from{ transform:translateY(100%); } }
@keyframes pop{ from{ opacity:0; transform:translate(-50%,-46%); } }
@media (prefers-reduced-motion:reduce){ .sheet__panel{ animation:none; } }

.sheet__top{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.sheet__top h2{ font-size:clamp(1.55rem,4vw,2rem); }
.sheet__close{ margin-left:auto; cursor:pointer; border:1.5px solid var(--lilac-2); background:#fff; border-radius:50%; width:36px; height:36px; flex:none; font-size:1.1rem; line-height:1; }
.sheet__close:hover{ background:var(--rose-btn); border-color:var(--rose-btn); color:#fff; }

.hint{ font-family:var(--label); font-size:.71rem; line-height:1.6; letter-spacing:.03em; color:var(--plum-soft); background:var(--wash); border-left:3px solid var(--rose); border-radius:0 4px 4px 0; padding:.7rem .85rem; margin:0 0 1.1rem; }

.receipt{ background:#fff; border:1px solid var(--lilac); border-radius:6px; padding:1.1rem 1rem; }
.receipt__hd{ font-family:var(--label); font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; color:var(--plum-soft); text-align:center; border-bottom:1px dashed var(--lilac-2); padding-bottom:.8rem; margin-bottom:.5rem; }
.line{ border-bottom:1px dashed var(--lilac-2); padding:.9rem 0; }
.line__top{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem; }
.line__name{ font-family:var(--display); font-weight:600; font-size:1rem; }
.line__qty{ font-family:var(--label); font-size:.73rem; color:var(--plum-soft); }
.line__price{ margin-left:auto; font-family:var(--label); font-size:.77rem; white-space:nowrap; }
.line__price s{ color:var(--strike); text-decoration-thickness:1.5px; }
.line__drop{ cursor:pointer; border:0; background:none; padding:0 .1rem; color:var(--plum-soft); font-family:var(--label); font-size:.9rem; }
.line__drop:hover{ color:var(--strike); }
.bc{ cursor:zoom-in; display:block; width:100%; border:0; background:none; padding:0; }
.bc svg{ width:100%; max-width:270px; height:auto; margin-inline:auto; }

.total{ padding-top:1rem; display:grid; gap:.35rem; }
.total__row{ display:flex; font-family:var(--label); font-size:.79rem; }
.total__row span:last-child{ margin-left:auto; }
.total__row--big{ font-family:var(--display); font-weight:600; font-size:1.25rem; align-items:baseline; }
.total__row--big s{ color:var(--strike); text-decoration-thickness:2.5px; font-size:1rem; }
.total__free{ color:var(--orchid-dp); }

.sheet__acts{ display:flex; gap:.6rem; margin-top:1.1rem; }
.sheet__acts .btn{ flex:1; }

.zoom{ position:fixed; inset:0; z-index:90; display:none; background:#fff; }
.zoom[data-open="1"]{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; padding:1.5rem; }
.zoom svg{ width:min(94vw,520px); height:auto; }
.zoom__name{ font-family:var(--display); font-weight:600; font-size:1.3rem; color:#000; text-align:center; margin:0; }
.zoom__hint{ font-family:var(--label); font-size:.71rem; letter-spacing:.1em; text-transform:uppercase; color:#666; margin:0; }

/* ============================================================
   CALENDAR
   ============================================================ */
.calGrid{ display:grid; gap:clamp(1.4rem,3vw,2.6rem); grid-template-columns:minmax(0,1fr) minmax(0,.8fr); align-items:start; }
@media (max-width:860px){ .calGrid{ grid-template-columns:1fr; } }

.sampleFlag{
  display:block;   /* not flex — <b> and the text must stay one run of prose */
  background:var(--butter); border:1.5px solid #E4D28C; border-radius:6px;
  padding:.8rem .95rem; margin:0 0 1.3rem;
  font-family:var(--label); font-size:.72rem; line-height:1.6; color:#5A4A16;
}
.sampleFlag b{ font-weight:700; }

.cal{ background:#fff; border:1px solid var(--lilac); border-radius:8px; padding:1rem; }
.cal__top{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.cal__month{ font-family:var(--display); font-weight:600; font-size:1.15rem; margin:0; }
.cal__nav{ margin-left:auto; display:flex; gap:.35rem; }
.cal__nav button{ cursor:pointer; width:32px; height:32px; border:1.5px solid var(--lilac-2); background:#fff; border-radius:50%; line-height:1; }
.cal__nav button:hover{ border-color:var(--orchid); color:var(--orchid); }
.cal__dow, .cal__days{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal__dow span{ text-align:center; font-family:var(--label); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--plum-soft); padding-bottom:.35rem; }
.day{ aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:6px; font-family:var(--label); font-size:.8rem; color:var(--plum-soft); background:var(--porcelain); }
.day--pad{ background:none; }
.day--today{ outline:2px solid var(--lilac-2); }
.day--open{ background:var(--rose-lo); color:var(--plum); font-weight:700; }
.day--open small{ font-size:.52rem; letter-spacing:.02em; color:var(--rose-ink); margin-top:1px; }
.cal__key{ display:flex; align-items:center; gap:.45rem; margin:.9rem 0 0; font-family:var(--label); font-size:.68rem; color:var(--plum-soft); }
.cal__key i{ width:13px; height:13px; border-radius:4px; background:var(--rose-lo); display:inline-block; }

/* day-type legend + booking */
.legend{ display:flex; flex-wrap:wrap; gap:.4rem .95rem; margin:.9rem 0 0; font-family:var(--label); font-size:.66rem; color:var(--plum-soft); }
.legend span{ display:flex; align-items:center; gap:.35rem; }
.legend i{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.i-shop{ background:var(--rose-lo); box-shadow:inset 0 0 0 1.5px var(--rose-ink); }
.i-don{ background:var(--lilac); }
.i-appt{ background:var(--butter); box-shadow:inset 0 0 0 1.5px #C9A227; }
.i-closed{ background:repeating-linear-gradient(45deg,#E8E2F0,#E8E2F0 3px,#F9F4FE 3px,#F9F4FE 6px); }

.day{ cursor:default; }
.day--shopping{ background:var(--rose-lo); color:var(--plum); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--rose-ink); cursor:pointer; }
.day--donations{ background:var(--lilac); color:var(--plum); }
.day--appointment{ background:var(--butter); color:#5A4A16; font-weight:700; box-shadow:inset 0 0 0 1.5px #C9A227; cursor:pointer; }
.day--closed{ background:repeating-linear-gradient(45deg,#E8E2F0,#E8E2F0 3px,#F9F4FE 3px,#F9F4FE 6px); color:var(--plum-soft); }
.day--sel{ outline:3px solid var(--orchid); outline-offset:1px; }
.day small{ font-size:.5rem; letter-spacing:.01em; margin-top:1px; }

.dayPanel{ margin-top:1rem; border:1px solid var(--lilac); border-radius:8px; background:#fff; padding:1rem; }
.dayPanel__hd{ display:flex; align-items:baseline; gap:.6rem; margin-bottom:.2rem; }
.dayPanel__hd h4{ font-family:var(--display); font-weight:600; font-size:1.05rem; margin:0; }
.pill{ font-family:var(--label); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:.2rem .5rem; border-radius:999px; }
.pill--shop{ background:var(--rose-lo); color:var(--rose-ink); }
.pill--don{ background:var(--lilac); color:var(--orchid-dp); }
.pill--appt{ background:var(--butter); color:#5A4A16; }
/* the store closed this day itself, from /settings (2026-08-10) */
.pill--closed{ background:#FDECEF; color:#8C1F45; }
.dayPanel p{ font-family:var(--label); font-size:.73rem; line-height:1.6; color:var(--plum-soft); margin:.5rem 0 0; }
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:.35rem; margin-top:.8rem; }
.slot{ cursor:pointer; border:1.5px solid var(--lilac-2); background:#fff; border-radius:6px; padding:.42rem .2rem; font-family:var(--label); font-size:.72rem; }
.slot:hover{ border-color:var(--orchid); color:var(--orchid-dp); }
.slot[aria-pressed="true"]{ background:var(--orchid); border-color:var(--orchid); color:#fff; }
.slot:disabled{ cursor:not-allowed; opacity:.42; text-decoration:line-through; }
.slot small{ display:block; font-size:.6rem; letter-spacing:.04em; color:var(--plum-soft);
             margin-top:.22rem; text-transform:uppercase; }
.slot[aria-pressed="true"] small{ color:rgba(255,255,255,.85); }
/* booking form inside the day panel */
.bkForm{ margin-top:.9rem; border-top:1px dashed var(--lilac-2); padding-top:.9rem; display:grid; gap:.6rem; }
.bkForm label{ font-family:var(--label); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--plum-soft); display:block; margin-bottom:.25rem; }
.bkForm input[type=text],.bkForm input[type=tel]{ width:100%; font-family:var(--body); font-size:1rem; padding:.6rem .8rem; border:2px solid var(--lilac-2); border-radius:8px; background:#fff; color:var(--plum); }
.bkForm input:focus{ outline:none; border-color:var(--orchid); }
/* consent copy must read as prose — the .bkForm label rule above would otherwise
   render it as all-caps mono, which is exactly the wrong treatment for a permission */
.bkForm label.bkCheck{ display:flex; gap:.6rem; align-items:flex-start;
  font-family:var(--body); font-size:.9rem; line-height:1.5; letter-spacing:normal;
  text-transform:none; color:var(--plum-soft); margin-bottom:0; }
.bkCheck input{ width:20px; height:20px; flex:none; margin-top:1px; }
.bkErr{ font-family:var(--label); font-size:.72rem; color:#8C1F45; background:#FDECEF; border:1.5px solid var(--rose); border-radius:8px; padding:.55rem .7rem; }
.bkOk{ background:var(--rose-lo); border:1.5px solid var(--rose); border-radius:10px; padding:1rem; }
.bkOk__l{ font-family:var(--label); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rose-ink); margin:0 0 .2rem; }
.bkOk__code{ font-family:var(--display); font-weight:600; font-size:1.6rem; margin:0 0 .4rem; letter-spacing:.02em; }
.bkOk p{ font-family:var(--label); font-size:.73rem; line-height:1.6; color:var(--plum-soft); margin:0; }

.booked{ margin-top:.9rem; border-top:1px dashed var(--lilac-2); padding-top:.9rem; }
.booked__l{ font-family:var(--label); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orchid); margin:0 0 .2rem; }
.booked__v{ font-family:var(--display); font-weight:600; font-size:1.05rem; margin:0 0 .7rem; }
.booked__acts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.booked__acts .btn{ padding:.55rem 1rem; font-size:.88rem; }

.next__lead{ font-family:var(--label); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orchid); margin:0 0 .5rem; }
.next__day{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3vw,2rem); line-height:1.1; margin:0 0 .3rem; }
.next__time{ font-family:var(--label); font-size:.9rem; color:var(--plum-soft); margin:0 0 1.2rem; }
.upcoming{ list-style:none; padding:0; margin:0 0 1.3rem; border-top:1px solid var(--lilac); }
.upcoming li{ display:flex; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--lilac); font-family:var(--label); font-size:.79rem; }
.upcoming li span:last-child{ margin-left:auto; color:var(--plum-soft); }

/* ---------- aisles / quote / doors / visit ---------- */
.shelves{ display:grid; gap:clamp(.85rem,1.7vw,1.3rem); grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.cat{ background:#fff; border:1px solid var(--lilac); border-left:4px solid var(--orchid); border-radius:0 6px 6px 0; padding:1.4rem; transition:transform .2s var(--rise), border-left-color .2s, box-shadow .2s; }
.cat:hover{ transform:translateY(-3px); border-left-color:var(--rose); box-shadow:0 12px 26px rgba(47,35,80,.09); }
.cat__k{ font-family:var(--label); font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; color:var(--plum-soft); display:block; margin-bottom:.65rem; }
.cat h3{ margin-bottom:.4rem; }
.cat p{ margin:0; font-size:.94rem; color:var(--plum-soft); }

.quote blockquote{ margin:0; font-family:var(--display); font-weight:500; font-size:clamp(1.45rem,3.2vw,2.35rem); line-height:1.2; }
.quote figcaption{ font-family:var(--label); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--orchid); margin-top:1.4rem; }
.quoteGrid{ display:grid; gap:clamp(1.8rem,4vw,3.5rem); grid-template-columns:minmax(0,1fr) minmax(0,.85fr); align-items:center; }
.quoteGrid > p{ color:var(--plum-soft); margin:0; }
@media (max-width:820px){ .quoteGrid{ grid-template-columns:1fr; } }

.doors{ display:grid; gap:clamp(1rem,2vw,1.4rem); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.door{ background:#fff; border:1px solid var(--lilac); border-radius:8px; padding:clamp(1.5rem,3vw,2.1rem); display:flex; flex-direction:column; box-shadow:0 6px 20px rgba(47,35,80,.06); }
.door h3{ margin-bottom:.6rem; }
.door p{ color:var(--plum-soft); font-size:.96rem; flex:1; }
.door .btn{ align-self:flex-start; }

.visitGrid{ display:grid; gap:clamp(1.8rem,4vw,3.2rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:820px){ .visitGrid{ grid-template-columns:1fr; } }
.addr{ font-style:normal; font-size:1.1rem; line-height:1.55; }
.addr strong{ font-family:var(--display); font-weight:600; }
.dl{ margin:1.8rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.4rem; align-items:baseline; }
.dl dt{ font-family:var(--label); font-size:.69rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.dl dd{ margin:0; }
.dl a:hover{ color:var(--rose); }
.notice{ border:1px solid rgba(255,255,255,.22); border-left:4px solid var(--rose); border-radius:0 6px 6px 0; padding:1.3rem 1.4rem; background:rgba(255,255,255,.05); }
.notice h3{ margin-bottom:.6rem; }
.notice p{ color:rgba(255,255,255,.8); font-size:.97rem; }
.notice p:last-child{ margin-bottom:0; }
.steps-lite{ margin:0 0 1rem; padding-left:1.2rem; color:rgba(255,255,255,.82); font-size:.95rem; }
.steps-lite li{ margin-bottom:.55rem; line-height:1.55; }
.steps-lite strong{ color:#fff; }
.steps-lite a{ color:#fff; text-underline-offset:3px; }
.notice__fine{ font-family:var(--label); font-size:.68rem; line-height:1.7; letter-spacing:.02em;
  color:rgba(255,255,255,.62) !important; border-top:1px solid rgba(255,255,255,.18);
  padding-top:.8rem; }
.notice .btn{ margin:.35rem .4rem 0 0; }

.foot{ background:var(--plum-deep); color:rgba(255,255,255,.68); padding-block:2.8rem 2.2rem; font-size:.91rem; }
.foot__top{ display:flex; flex-wrap:wrap; gap:1.4rem 2.5rem; align-items:center; justify-content:space-between; }
.foot .mark{ color:#fff; }
.social{ display:flex; gap:1.25rem; list-style:none; padding:0; margin:0; }
.social a{ font-family:var(--label); font-size:.73rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.68); text-decoration:none; }
.social a:hover{ color:#F79CC0; }
.foot__rule{ border:0; border-top:1px solid rgba(255,255,255,.16); margin:2rem 0 1.4rem; }
.disclaimer{ font-family:var(--label); font-size:.71rem; line-height:1.7; letter-spacing:.02em; color:rgba(255,255,255,.5); margin:0; }
.disclaimer a{ color:rgba(255,255,255,.72); }

body[data-listopen="1"]{ padding-bottom:82px; }

@media (prefers-reduced-motion:no-preference){
  .rev{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--rise), transform .6s var(--rise); }
  .rev.in{ opacity:1; transform:none; }
}

/* ── demo day ──────────────────────────────────────────────────────────────
   A day the store is NOT open, seeded so someone can be walked through booking.
   The DASHED edge is what marks it: butter alone would not do, since the legend
   already uses that colour for "by appointment". Nothing else in the grid is
   dashed, and dashed reads as provisional without needing a key. */
.day--demo{
  background:var(--butter) !important; border:2px dashed #C9A227 !important;
  color:#5A4A16 !important;
}
.day--demo small{ color:#5A4A16 !important; font-weight:700; letter-spacing:.04em; }
.demoNote{
  background:var(--butter); border:1.5px solid #E4D28C; color:#5A4A16;
  border-radius:11px; padding:.7rem .85rem; margin:.7rem 0 0;
  font-family:var(--label); font-size:.7rem; line-height:1.65;
}

/* ============================================================
   Anchor landing offset.

   The nav is position:sticky, so an in-page link scrolls its target to y=0 —
   underneath the nav — and what the reader actually sees is whatever follows.
   Reported on "For volunteers": clicking it put the volunteer card behind the bar
   and left the Tanger address and the teachers-only "Bring with you" box filling
   the screen, so volunteers were reading teacher instructions.

   Applied to every id rather than just #volunteer, because every in-page link on
   the site has the same defect. Nothing else in this file sets scroll-margin.
   ============================================================ */
[id]{ scroll-margin-top: 5.5rem; }