/* =================================================================
   Fill a Red Bag (/fill, and its thank you, /fill/thank-you)

   Its own stylesheet: nothing here is added to the shared bundle, which
   donate.html's page weight budget counts. Every colour is one of the
   site's tokens (assets/css/styles.css :root); the type is the site's
   Playfair Display and Poppins.

   The ONE exception is the lined paper. NBCC's printed "Donation ideas"
   sheet is handwritten, so the list on the paper is too, and nothing
   else is. The hand is Caveat (SIL Open Font License; the licence is
   beside the file, assets/fonts/caveat-OFL.txt), kept with the site's
   own fonts and declared HERE, so only this page ever loads it. If it
   cannot load, the device's own handwriting faces stand in.
   --rb-hand is used only inside .rb-paper.

   Nothing scrolls inside a box: content wraps and the page grows.
   Motion is transform and opacity only, and is off for anyone who has
   asked for less (the last block).
   ================================================================= */

/* ---- the handwriting, for the paper only: Caveat, Latin subset, weights 400 to 700 in one file ---- */
@font-face{
  font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/caveat-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- staff preview strip: plain on purpose ---- */
.rb-preview{
  width:fit-content;max-width:100%;margin:0 auto clamp(20px,3vw,32px);padding:8px 18px;
  background:var(--slate);color:var(--cream);border-radius:8px;
  font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;
}

/* ---- the layout. The page's order is the phone's: the list, "Whenever the need comes", the bag
   with the total and Donate, then the real items note, one under another. On a desktop (the
   min-width block near the end) the bag is placed at the top of a right hand column, with the
   themes under it, beside the long paper. ---- */
.rb-layout{
  /* the paper's hand: for the paper and for the gift tag on a full bag */
  --rb-hand:"Caveat","Bradley Hand","Segoe Print","Noteworthy","Chalkboard SE","Ink Free","Comic Sans MS",cursive;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(32px,6vw,48px);align-items:start;
}

/* ---- the lined paper ---- */
.rb-paper{
  --rb-rule:color-mix(in srgb,var(--slate) 20%,transparent);
  position:relative;
  padding:clamp(34px,4vw,48px) clamp(16px,3vw,36px) clamp(24px,3vw,36px) clamp(26px,5vw,64px);
  background:var(--card);border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow);
}
/* the red margin line every ruled pad has: a hairline, drawn, not a border */
.rb-paper::before{
  content:"";position:absolute;top:0;bottom:0;left:clamp(14px,3.2vw,42px);width:1px;
  background:color-mix(in srgb,var(--crimson) 45%,transparent);
}
.rb-tape{
  position:absolute;top:-13px;left:50%;width:112px;height:30px;margin-left:-56px;
  background:color-mix(in srgb,var(--tan) 62%,transparent);
  box-shadow:var(--shadow-sm);transform:rotate(-2.5deg);
}
.rb-paper .rb-paper__title,
.rb-paper .rb-group__title,
.rb-paper .rb-item__name,
.rb-paper .rb-item__price,
.rb-paper .rb-also__words{font-family:var(--rb-hand)}

.rb-paper .rb-paper__title{
  margin:0 0 6px;font-size:clamp(2.2rem,1.9rem + 1.3vw,2.8rem);font-weight:700;
  letter-spacing:0;line-height:1.1;color:var(--crimson);
}
.rb-group{margin-top:clamp(18px,2.4vw,28px)}
.rb-paper .rb-group__title{
  margin:0;padding-bottom:4px;font-size:1.9rem;font-weight:700;letter-spacing:.01em;line-height:1.15;
  color:var(--holly);border-bottom:1px solid var(--rb-rule);
}
.rb-items{list-style:none;margin:0;padding:0}
/* each row sits on its own ruled line, so a long name can wrap and the paper still reads as ruled */
.rb-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;column-gap:14px;
  min-height:60px;padding:7px 0;border-bottom:1px solid var(--rb-rule);
}
/* Caveat is narrow with a small x-height: at these sizes it reads as easily as the page's body text */
.rb-item__name{font-size:1.7rem;line-height:1.1;color:var(--slate);overflow-wrap:anywhere}
.rb-item__price{font-size:1.6rem;line-height:1.1;color:var(--maroon);font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-item.is-in .rb-item__name{color:var(--maroon);font-weight:700}
/* each item's painting beside its name (Jaimie, 5 November 2026) */
.rb-item:has(> .rb-item__pic){grid-template-columns:44px minmax(0,1fr) auto auto}
.rb-item__pic{display:block;width:44px;height:44px}

/* ---- the buttons (5 November 2026): the logo's bold maroon-brown outline, and a chunky "sticker"
   edge underneath that the button sinks onto when it is pressed. Same buttons, same states. ---- */
/* the paper's hand for the whole page, so the night look's Workshop sign and elf can write in it too */
:root{--rb-hand:"Caveat","Bradley Hand","Segoe Print","Noteworthy","Chalkboard SE","Ink Free","Comic Sans MS",cursive}
:root{--rb-ink:color-mix(in srgb,var(--maroon) 53%,var(--slate))}
.rb-stepper{display:inline-flex;align-items:center;gap:6px}
.rb-step{
  min-width:44px;min-height:44px;padding:0;display:inline-grid;place-items:center;
  border:2.6px solid var(--rb-ink);border-radius:50%;background:var(--card);color:var(--rb-ink);
  box-shadow:0 3px 0 var(--rb-ink);
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease,color .15s ease;
}
.rb-step[data-rb-plus]{background:var(--crimson);color:var(--white)}
.rb-step:hover{background:var(--maroon);color:var(--cream)}
.rb-step:active{transform:translateY(3px);box-shadow:0 0 0 var(--rb-ink)}
/* at 0 and at 99 a button SAYS it is off (aria-disabled) and stays focusable, so a keyboard user
   who has just pressed it is not dropped out of the list */
.rb-step[aria-disabled="true"]{opacity:.35;cursor:default;box-shadow:none}
.rb-step[aria-disabled="true"]:hover{background:var(--card);color:var(--rb-ink)}
.rb-step[data-rb-plus][aria-disabled="true"]:hover{background:var(--crimson);color:var(--white)}
.rb-step[aria-disabled="true"]:active{transform:none}
.rb-step svg{display:block}
.rb-qty{
  min-height:44px;width:50px;padding:0 4px;text-align:center;
  font-family:var(--font-body);font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--rb-ink);background:var(--white);
  border:2.6px solid var(--rb-ink);border-radius:12px;
}
.rb-item.is-in .rb-qty{border-color:var(--holly);background:var(--holly-soft);color:var(--holly)}

/* "Also in your bag": the examples tapped, and the round-up, each with its own way out */
.rb-also{margin-top:clamp(18px,2.4vw,28px)}
.rb-also__list .rb-item{grid-template-columns:minmax(0,1fr) auto}
/* the round-up's line has an amount of its own, as an item's row has a price */
.rb-also__list .rb-item--round{grid-template-columns:minmax(0,1fr) auto auto}
.rb-also__words{font-size:1.55rem;line-height:1.15;color:var(--slate);overflow-wrap:anywhere}
.rb-remove{
  min-height:44px;padding:0 16px;border:2.6px solid var(--rb-ink);border-radius:var(--radius-pill);
  background:transparent;color:var(--maroon);font-family:var(--font-body);font-size:.88rem;font-weight:600;
  cursor:pointer;transition:background-color .15s ease,color .15s ease;
}
.rb-remove:hover{background:var(--maroon);color:var(--cream)}

/* ---- the bag, the total and Donate ---- */
.rb-panel{
  padding:clamp(22px,3vw,34px);background:var(--tint);border-radius:var(--radius-lg);
}
.rb-bags{
  --rb-n:1;--rb-max:184px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px;
}
.rb-bags[data-count="2"]{--rb-n:2;--rb-max:140px}
.rb-bags[data-count="3"]{--rb-n:3;--rb-max:112px}
.rb-bags[data-count="4"]{--rb-n:4;--rb-max:94px}
.rb-bags[data-count="5"]{--rb-n:5;--rb-max:82px}
.rb-bag{
  display:block;height:auto;
  width:min(var(--rb-max),calc((100% - (var(--rb-n) - 1) * 10px) / var(--rb-n)));
}
.rb-bag.is-new{animation:rb-arrive .45s cubic-bezier(.22,1,.36,1)}
@keyframes rb-arrive{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}

/* the bag itself (painted, 5 November 2026): pale paper that the red rises inside. The red front is
   uncovered from the bottom up, to the front edge (15% down the painting), as --rb-fill rises; a full
   bag is red all over. */
.rb-bag__whole--red{opacity:0;transition:opacity .3s ease}
/* the night look's dark red front (assets/css/fill-night.css); by day it is not drawn */
.rb-bag__paper-night{display:none}
.rb-bag.is-full .rb-bag__whole--red{opacity:1}
.rb-bag__fill{
  clip-path:inset(calc(15% + (1 - var(--rb-fill,0)) * 85%) 0 0 0);
  transition:clip-path .6s cubic-bezier(.22,1,.36,1);
}
.rb-bag.is-full .rb-bag__fill{clip-path:inset(0)}
/* the handles: a crimson rope inside the logo's maroon-brown outline, with a fine twist */
.rb-bag__rope-edge{fill:none;stroke:var(--rb-ink);stroke-width:4.4;stroke-linecap:round}
.rb-bag__rope{fill:none;stroke:var(--crimson);stroke-width:2.4;stroke-linecap:round}
.rb-bag__twist{fill:none;stroke:color-mix(in srgb,var(--crimson) 70%,var(--white));stroke-width:.7;stroke-linecap:round;stroke-dasharray:1 2.4}
.rb-bag__eyelet{fill:var(--gold);stroke:var(--rb-ink);stroke-width:.9}
.rb-bag__tissue{
  opacity:0;transform:translateY(9px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.rb-bag.is-full .rb-bag__tissue{opacity:1;transform:none}

.rb-more{margin:10px 0 0;text-align:center;font-weight:600;color:var(--holly)}
.rb-status{
  margin:16px 0 0;text-align:center;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.12rem,1.05rem + .4vw,1.3rem);line-height:1.3;color:var(--maroon);text-wrap:balance;
}
.rb-total{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;
  margin:20px 0 0;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--maroon) 22%,transparent);
}
.rb-total__label{font-weight:600;color:var(--slate)}
.rb-total__sum{
  font-family:var(--font-head);font-weight:800;font-size:clamp(1.9rem,1.6rem + 1.2vw,2.4rem);
  line-height:1.1;color:var(--crimson);font-variant-numeric:tabular-nums;
}
.rb-total__per{font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--slate)}
.rb-nojs{margin:16px 0 0;font-size:.95rem}
.rb-give{margin-top:14px}
/* the round-up: one quiet button under the total, the amount it adds first */
.rb-round{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;
  width:100%;min-height:44px;margin:0 0 16px;padding:10px 15px;
  background:var(--card);color:var(--slate);border:2.6px solid var(--rb-ink);border-radius:14px;box-shadow:0 3px 0 var(--rb-ink);
  font-family:var(--font-body);font-size:.94rem;font-weight:600;line-height:1.35;text-align:center;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background-color .18s ease,color .18s ease;
}
.rb-round__amount{font-weight:700;color:var(--maroon);font-variant-numeric:tabular-nums;white-space:nowrap}
.rb-round:hover{background:var(--maroon);color:var(--cream)}
.rb-round:hover .rb-round__amount{color:var(--cream)}
.rb-round:active{transform:translateY(3px);box-shadow:0 0 0 var(--rb-ink)}
/* once or monthly: the donate page's two buttons (.give-toggle), in this page's own stylesheet */
.rb-often__label{margin:0 0 6px;font-size:.92rem;font-weight:600;line-height:1.3;color:var(--slate)}
.rb-toggle{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 14px;padding:5px;
  background:var(--card);border:2.6px solid var(--rb-ink);border-radius:var(--radius-pill);
}
.rb-mode{
  min-height:44px;padding:8px 10px;border:0;border-radius:var(--radius-pill);
  background:transparent;color:var(--rb-ink);
  font-family:var(--font-body);font-size:.95rem;font-weight:700;line-height:1.2;text-align:center;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.rb-mode:hover{background:var(--holly-soft)}
.rb-mode[aria-pressed="true"]{background:var(--holly);color:var(--cream);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--holly) 60%,var(--slate))}
/* chosen is never colour alone: a tick as well */
.rb-mode[aria-pressed="true"]::before{content:"\2713";margin-right:6px;font-weight:700}
.rb-donate{width:100%;justify-content:center;font-size:1.12rem;font-weight:700;padding:16px 22px;text-align:center;
  border:2.6px solid var(--rb-ink);box-shadow:0 5px 0 var(--rb-ink);transition:transform .12s ease,box-shadow .12s ease}
.rb-donate:active{transform:translateY(5px);box-shadow:0 0 0 var(--rb-ink)}
.rb-nudge{
  margin:12px 0 0;padding:11px 15px;background:var(--tan-soft);border:1px solid var(--maroon);border-radius:12px;
  color:var(--maroon);font-size:.95rem;font-weight:600;line-height:1.45;
}
.rb-elves{margin:18px 0 0;font-size:.9rem;line-height:1.55;color:var(--slate)}

/* ---- whenever the need comes: three plain groups, one under another ---- */
.rb-need__head{max-width:62ch;margin-bottom:clamp(20px,3vw,28px)}
.rb-need__head h2{font-size:clamp(1.55rem,1.35rem + 1vw,1.9rem);line-height:1.2;text-wrap:balance}
.rb-need__head p{margin:10px 0 0}
.rb-themes{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,30px)}
.rb-theme h3{font-size:1.28rem;line-height:1.2}
.rb-theme__sub{margin:4px 0 12px;font-size:.92rem;line-height:1.45;color:var(--slate)}
.rb-examples{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rb-example{
  display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 14px;text-align:left;
  background:var(--card);color:var(--slate);
  border:2.6px solid var(--rb-ink);border-radius:16px;box-shadow:0 4px 0 var(--rb-ink);
  font-family:var(--font-body);font-size:.94rem;line-height:1.4;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background-color .18s ease,color .18s ease;
}
.rb-example:hover{background:var(--holly-soft)}
.rb-example:active{transform:translateY(4px);box-shadow:0 0 0 var(--rb-ink)}
.rb-example__amount{flex:0 0 auto;font-size:1.02rem;font-weight:700;color:var(--maroon);font-variant-numeric:tabular-nums}
.rb-example__words{flex:1 1 auto;min-width:0}
.rb-example[aria-pressed="true"]{background:var(--holly);color:var(--cream)}
.rb-example[aria-pressed="true"] .rb-example__amount{color:var(--cream)}
/* pressed is never colour alone: a tick as well */
.rb-example[aria-pressed="true"]::after{content:"\2713";flex:0 0 auto;font-weight:700}
.rb-real{max-width:68ch;margin:0;padding-top:20px;border-top:1px solid var(--line)}
.rb-real strong{color:var(--maroon)}

/* ---- the details step ---- */
.rb-details{scroll-margin-top:calc(var(--nav-h) + 1rem);max-width:720px;margin-inline:auto;padding:clamp(22px,4vw,42px)}
.rb-details__title{font-size:clamp(1.6rem,1.35rem + 1vw,2.1rem)}
.rb-details__sum{margin:10px 0 18px}
.rb-details__sum strong{color:var(--maroon)}
.rb-link{
  min-height:44px;padding:0 2px;border:0;background:none;color:var(--maroon);
  font-family:var(--font-body);font-size:1rem;font-weight:600;text-decoration:underline;cursor:pointer;
}
/* the shared stylesheet draws every form as a card; this one already sits in one */
.rb-form{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.rb-form .rb-ask{margin:0;padding:22px 0 8px;border-top:1px solid var(--line)}
.rb-form .form-error-summary + .rb-ask{border-top:0;padding-top:4px}
.rb-form .give-check{min-height:44px;margin:2px 0;padding:10px 0}
.rb-form .give-contact-legend{padding:0}
/* a tick's own error goes under it, full width, not squeezed beside its words */
.rb-form .give-check{flex-wrap:wrap}
.rb-form .give-check-text{flex:1 1 0;min-width:0}
.rb-form .give-check .validation-msg{flex:1 0 100%;margin:0}
.rb-declaration{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.rb-form .give-cta-row{margin-top:24px}

/* ---- the thank you: a page of its own (/fill/thank-you). A calm, centred column under the page's
   own heading: the tied bag, the few lines, then the picture to share. No card: it is a moment. ---- */
/* the heading takes the focus on arrival so a screen reader starts there; it is not a control */
.rb-thanks h1:focus{outline:none}
.rb-thanks h1{text-wrap:balance}
.rb-thanks__bag{width:clamp(132px,24vw,176px);margin:clamp(24px,4vw,36px) auto 0}
.rb-thanks__bag .rb-bag{width:100%;--rb-fill:1}
.rb-thanks .rb-thanks__lead{margin-top:clamp(18px,3vw,26px)}
.rb-thanks__lead strong{color:var(--maroon)}
.rb-thanks__line{max-width:56ch;margin:14px auto 0;text-wrap:balance}
.rb-thanks__line strong{color:var(--maroon)}
.rb-share{
  max-width:560px;margin-inline:auto;padding-top:clamp(24px,4vw,36px);
  border-top:1px solid var(--line);text-align:center;
}
.rb-share h2{font-size:clamp(1.35rem,1.2rem + .7vw,1.65rem)}
.rb-share p{margin:8px auto 0;max-width:46ch}
.rb-share__picture{
  display:block;width:min(100%,300px);height:auto;margin:18px auto 0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);
}
.rb-share__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
.rb-share .rb-share__status{min-height:1.5em;font-size:.92rem;color:var(--holly-dark)}
/* the way back to fill another: quieter than the share, which is the thing to do here */
.rb-again{margin:clamp(20px,3vw,28px) 0 0;text-align:center}

/* ---- the bottom bar, at every width: the total and a Donate button, in reach while the real ones
   are scrolled out of sight; the script hides it once they are on screen. The strip spans the
   screen, and its padding is the page's own gutter (growing beyond the page's widest), so what is
   in it sits in line with the page. Clear of the phone's home bar. ---- */
.rb-bar{
  display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
  align-items:center;justify-content:space-between;gap:12px;
  padding-block:9px calc(9px + env(safe-area-inset-bottom));
  padding-inline:max(var(--pad),calc((100% - var(--maxw)) / 2 + var(--pad)));
  background:var(--card);border-top:1px solid color-mix(in srgb,var(--maroon) 24%,transparent);
}
.rb-bar__total{margin:0;min-width:0;font-weight:600;line-height:1.2;color:var(--slate)}
.rb-bar__total strong{
  margin-left:4px;font-family:var(--font-head);font-weight:800;font-size:1.45rem;
  color:var(--crimson);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rb-bar__donate{flex:0 0 auto;min-height:44px;padding:10px 22px;box-shadow:none}
/* and when the browser scrolls to a control that takes the focus (a keyboard tabbing down the
   list), it stops short of the bar, so that control is never under it. This stylesheet is loaded
   by the Fill a Red Bag pages alone, so this touches no other page. */
html{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom))}
/* while it shows, the page is longer by its height, so it never rests on the end of the footer */
body.rb-bar-on{padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* ---- desktop: two columns. The paper, at a slight tilt, down the left; on the right the bag at
   the top and the themes under it. The second row takes what is left, so the themes start straight
   under the bag however long the paper is. Nothing sticks and nothing scrolls inside a box. ---- */
@media (min-width:861px){
  .rb-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:auto 1fr;gap:clamp(32px,4vw,44px) clamp(32px,5vw,72px)}
  .rb-paper{grid-column:1;grid-row:1 / span 2;transform:rotate(-.7deg)}
  .rb-panel{grid-column:2;grid-row:1}
  .rb-need{grid-column:2;grid-row:2}
  .rb-real{grid-column:1 / -1}
  .rb-themes{grid-template-columns:minmax(0,1fr);gap:24px}
  .rb-need__head{margin-bottom:20px}
  /* the bar's total sits beside its button, under the bag's column, not far across the page */
  .rb-bar{justify-content:flex-end;gap:20px}
  .rb-need__head h2{font-size:clamp(1.45rem,1.1rem + .9vw,1.75rem)}
}

/* ---- the narrowest two column widths: the right hand column is as slim as a small phone, so the
   bag's panel gets the same extra room and "Give once" and "Give monthly" stay on one line ---- */
@media (min-width:861px) and (max-width:1000px){
  .rb-panel{padding:20px 14px}
  .rb-mode{padding:8px 4px;font-size:.875rem}
  .rb-mode[aria-pressed="true"]::before{margin-right:4px}
}

@media (max-width:520px){
  /* the price drops under the name, so a long name has room beside the stepper */
  .rb-item{grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
  .rb-item__name{grid-column:1;grid-row:1;font-size:1.5rem}
  .rb-item__price{grid-column:1;grid-row:2;font-size:1.4rem}
  .rb-paper .rb-group__title{font-size:1.7rem}
  .rb-also__words{font-size:1.45rem}
  .rb-item .rb-stepper{grid-column:2;grid-row:1 / span 2}
  /* with its painting: the name keeps the whole width, and the picture sits beside the price under it */
  .rb-item:has(> .rb-item__pic){grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px}
  .rb-item:has(> .rb-item__pic) .rb-item__name{grid-column:1 / span 2;grid-row:1}
  .rb-item__pic{grid-column:1;grid-row:2;width:32px;height:32px}
  .rb-item:has(> .rb-item__pic) .rb-item__price{grid-column:2;grid-row:2}
  .rb-item:has(> .rb-item__pic) .rb-stepper{grid-column:3;grid-row:1 / span 2}
  .rb-stepper{gap:4px}
  .rb-qty{width:44px}
  .rb-also__list .rb-item,.rb-also__list .rb-item--round{grid-template-columns:minmax(0,1fr)}
  .rb-also__list .rb-remove{justify-self:start;margin-top:6px}
  .rb-share__actions .btn,.rb-again .btn{width:100%;justify-content:center}
}

/* ---- the narrowest phones: a little more room on the paper and a slightly smaller hand, so no
   item name ("Headphones") breaks mid word beside its stepper ---- */
@media (max-width:360px){
  .rb-paper{padding-left:24px;padding-right:10px}
  .rb-paper::before{left:12px}
  .rb-item{column-gap:6px}
  .rb-item__name{font-size:1.35rem}
  .rb-stepper{gap:3px}
  /* a little more room in the bag's panel, so "Give monthly" and its tick stay on one line */
  .rb-panel{padding:20px 14px}
  .rb-mode{padding:8px 4px;font-size:.875rem}
  .rb-mode[aria-pressed="true"]::before{margin-right:4px}
}

/* =================================================================
   The feel good layer (4 October 2026): a drawing of the item drops
   into the bag, things peek out of its top, an elf scribbles a note on
   the paper, the bag wobbles, a full bag is tied with a gold ribbon and
   a tag, and paper snow and gold stars fall across the whole screen at
   half a bag and (the big moment) at each full one. ALL of it is decoration: it is hidden from screen readers, takes
   no tap, shifts nothing, and changes no price, total or word. It moves
   with transform and opacity only, nothing loops, and none of it moves
   for anyone who has asked for less motion (the last block).
   ================================================================= */

/* ---- the pictures (assets/js/red-bag-catalogue.js, ART): paintings, each in its 40 by 40 picture ---- */
.rb-art{display:block;overflow:visible}

/* ---- the painting in each example's button: it keeps its size when the words wrap, and sits in the
   middle of them ---- */
.rb-example__icon{flex:0 0 auto;align-self:center;width:44px;height:44px;margin:-6px 0}
/* and the same small icon at the start of its line under "Also in your bag" */
.rb-also__icon{display:inline-block;width:26px;height:26px;margin-right:8px;vertical-align:-6px}

/* ---- where the drop flies: one layer over the builder that takes no tap and clips what leaves it,
   so nothing can ever make the page scroll sideways ---- */
.rb-builder{position:relative}
.rb-fx{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
/* four plain moves, one inside another: across, down (or up), a small hop, and the fade */
.rb-drop{position:absolute;z-index:1;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;animation:rb-drop-x .6s cubic-bezier(.33,.2,.55,1) both}
.rb-drop__y{display:block;animation:rb-drop-y .6s cubic-bezier(.5,0,.75,.75) both}
.rb-drop__hop{display:block;animation:rb-drop-hop .6s cubic-bezier(.3,0,.7,1) both}
.rb-drop .rb-art{width:100%;height:100%;animation:rb-drop-show .6s linear both}
@keyframes rb-drop-x{from{transform:none}to{transform:translateX(var(--rb-dx,0px))}}
@keyframes rb-drop-y{from{transform:none}to{transform:translateY(var(--rb-dy,0px))}}
@keyframes rb-drop-hop{0%{transform:none}40%{transform:translateY(-26px)}100%{transform:none}}
@keyframes rb-drop-show{0%{opacity:0;transform:scale(.6)}14%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.62)}}
/* into the bottom bar: its total gives a small nod as the drop lands */
.rb-bar__total strong{display:inline-block}
.rb-bar__total strong.is-bumped{animation:rb-bump .3s cubic-bezier(.22,1,.36,1) .42s}
@keyframes rb-bump{0%{transform:none}40%{transform:scale(1.12)}100%{transform:none}}
/* the gold twinkles (5 November 2026): the painted twinkle bursts out, turns and fades */
.rb-twinkle{position:absolute;z-index:2;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;background:url(/assets/img/red-bag/twinkle.webp) center/contain no-repeat;opacity:0;animation:rb-twinkle .7s cubic-bezier(.2,.8,.3,1) var(--rb-tw,0s) both}
@keyframes rb-twinkle{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0deg)}25%{opacity:1}100%{opacity:0;transform:translate(var(--rb-tx,0px),var(--rb-ty,0px)) scale(var(--rb-ts,1)) rotate(90deg)}}

/* ---- the bag reacts: a small wobble as something goes in, and the handles pull a touch tighter
   when it is nearly full. A paper gift bag, not a cartoon. ---- */
.rb-bags .rb-bag{overflow:visible;transform-origin:50% 100%}
.rb-bag.is-wobbling{animation:rb-wobble .38s cubic-bezier(.22,1,.36,1) var(--rb-wait,0s)}
@keyframes rb-wobble{0%{transform:none}28%{transform:rotate(-1.8deg) scale(1.03,.975)}62%{transform:rotate(1deg) scale(.995,1.01)}100%{transform:none}}
.rb-bags .rb-bag__cord{transform-box:fill-box;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rb-bag.is-heavy .rb-bag__cord{transform:scale(.95,1.09)}

/* ---- what peeks out of the top: drawn behind the bag's front, so it looks inside it ---- */
.rb-peek__in{transform-box:fill-box;transform-origin:50% 100%;animation:rb-peek .4s cubic-bezier(.22,1,.36,1) both}
@keyframes rb-peek{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- the peeks are the LATEST things added (5 October 2026), the newest in the front place. When
   a new one arrives it pops up there (above), the ones that stay slide along one place, and the
   oldest sinks back into the bag and is cleared away. A peek's place is a transform the script
   sets, so the slide is a transform and nothing else. ---- */
.rb-peek{transition:transform .26s cubic-bezier(.22,1,.36,1)}
/* The size and the place of each peek are the script's (PEEK_AT): the newest is the biggest and
   stands tallest. */
.rb-peek.is-leaving .rb-peek__in{animation:rb-peek-out .2s cubic-bezier(.5,0,.75,.4) both}
@keyframes rb-peek-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px)}}

/* ---- a full bag: a painted gold bow on the front and a gift tag swings out on its string ---- */
.rb-bag__tie{opacity:0;transition:opacity .2s ease-out}
.rb-bag.is-full .rb-bag__tie{opacity:1}
.rb-bag__bow{transform-box:fill-box;transform-origin:50% 50%}
.rb-bag.is-full .rb-bag__bow{animation:rb-tie .45s cubic-bezier(.22,1,.36,1) both}
@keyframes rb-tie{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
/* the tag hangs from the bow, and swings about where its string meets the tag */
.rb-bag__tag{transform-origin:96px 63px;transform:rotate(4deg)}
.rb-bag.is-full .rb-bag__tag{animation:rb-swing .6s cubic-bezier(.22,1,.36,1) .12s both}
@keyframes rb-swing{from{opacity:0;transform:rotate(-38deg)}to{opacity:1;transform:rotate(4deg)}}
.rb-bag__string{fill:none;stroke:var(--gold-ink);stroke-width:1.1;stroke-linecap:round}
/* the words are on the newest full bag only, while the bags are big enough to read them */
.rb-bag__tag-words{font-family:var(--rb-hand);font-size:9.5px;font-weight:700;fill:var(--maroon);text-anchor:middle;opacity:0}
.rb-bag.is-latest .rb-bag__tag-words{opacity:1}

/* ---- the snow and stars (5 October 2026): a moment across the WHOLE screen. One layer, fixed to
   the screen, above the page, the site's header and the bottom bar (and under the payment window);
   it takes no tap and clips what leaves it, so it can never block Donate or make the page scroll.
   Paper snow and gold stars fall from the top of the screen to the bottom, each with its own
   place, size, drift, turn and wait (the script sets them from the catalogue's flurryPlan): about
   three seconds for a full bag, a lighter two for half a bag. Each piece is ONE animation of
   transform and opacity, easing out with no bounce, and the script takes the whole layer out of
   the page when it ends. ---- */
.rb-panel{position:relative}
.rb-flurry{position:fixed;inset:0;z-index:1050;overflow:hidden;pointer-events:none;contain:strict}
.rb-flake{position:absolute;top:-44px;left:var(--rb-x,50%);width:var(--rb-w,18px);height:var(--rb-w,18px);margin-left:calc(var(--rb-w,18px) / -2);pointer-events:none;will-change:transform;animation:rb-fall var(--rb-t,1.8s) cubic-bezier(.3,.3,.6,1) var(--rb-d,0s) both}
.rb-flake svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes rb-fall{0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}8%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translate3d(var(--rb-s,0px),calc(100vh + 60px),0) rotate(var(--rb-r,90deg))}}

/* ---- the elf's note: a line in the paper's hand, written on the rule above the row just changed
   (below it for the first row under a heading), at a slight tilt. It lies over empty paper only,
   takes no tap and shifts nothing. A soft halo of paper keeps the rule from crossing the words. ---- */
.rb-paper .rb-item{position:relative}
.rb-paper .rb-note{
  position:absolute;right:164px;top:0;z-index:2;pointer-events:none;
  font-family:var(--rb-hand);font-size:1.3rem;font-weight:700;line-height:1.2;letter-spacing:.01em;
  color:var(--holly);white-space:nowrap;
  text-shadow:0 0 2px var(--card),0 0 2px var(--card),0 0 3px var(--card),0 0 5px var(--card);
  transform:translateY(calc(-100% + .27em + 2px)) rotate(-2deg);transform-origin:100% 100%;
  opacity:0;transition:opacity .28s ease-out;
}
.rb-paper .rb-item:first-child > .rb-note{top:100%}
.rb-paper .rb-note.is-on{opacity:1}
/* the note never lies over a name, a price or a control: the script measures where its words fall
   and tries these places in turn (the catalogue's notePlacements) until one is clear: across the
   rule above the row or the one below it, then smaller, then smallest and level */
.rb-paper .rb-note.rb-note--above{top:0}
.rb-paper .rb-note.rb-note--below{top:100%}
/* a line under "Also in your bag" is full of words, so there the note always lies across the rule */
.rb-paper .rb-also__list .rb-note{font-size:1.02rem;transform:translateY(calc(-100% + .27em + 4px)) rotate(-1deg)}
/* where the paper is narrow (and a long name may wrap) the note is smaller and lies across the rule,
   in the few pixels every row keeps clear above and below it */
@media (max-width:700px),(min-width:861px) and (max-width:1200px){
  .rb-paper .rb-note{font-size:1.02rem;transform:translateY(calc(-100% + .27em + 4px)) rotate(-1deg)}
}
/* and on a phone, where the price sits under the name and the rows are taller, it runs to the
   paper's edge, in the gap between one row's buttons and the next */
@media (max-width:520px){
  .rb-paper .rb-note{right:2px}
}

/* the note's smaller sizes (see above), after the widths' own sizes so that they win */
.rb-paper .rb-note.rb-note--small{font-size:.94rem;transform:translateY(calc(-100% + .27em + 4px)) rotate(-1deg)}
.rb-paper .rb-note.rb-note--flat{font-size:.86rem;transform:translateY(calc(-100% + .3em + 3px))}

/* ---- less motion: nothing moves. What changes still changes, at once: the peeks, the ribbon and
   the tag appear, and the note is simply there. ---- */
@media (prefers-reduced-motion:reduce){
  .rb-bag.is-new,.rb-drop,.rb-drop__y,.rb-drop__hop,.rb-drop .rb-art,.rb-flake,.rb-bag.is-wobbling,.rb-peek__in,.rb-bag.is-full .rb-bag__bow,.rb-bag.is-full .rb-bag__tag,.rb-bar__total strong.is-bumped,.rb-twinkle{animation:none}
  .rb-bag__fill,.rb-bag__tissue,.rb-step,.rb-example,.rb-remove,.rb-round,.rb-mode,.rb-paper .rb-note,.rb-bags .rb-bag__cord,.rb-bags .rb-bag__twist,.rb-bag__tie{transition:none}
  /* the peeks change places at once, and no snow falls at all (the script makes none either) */
  .rb-peek{transition:none}
  .rb-peek.is-leaving{display:none}
  .rb-flurry{display:none}
}