/* Standalone page ground. Without the theme wrapper, body must paint its own
   background or Tailwind's base layer shows through behind the design. */
body.rb-page{margin:0;background:#FBF6F0}
body.rb-page .rb{min-height:100vh}

/*
 * Roch Sweets — Phase 0 rebuild.
 *
 * Scoped under .rb so it can run alongside the live theme without touching it.
 * Display face is Fraunces (loaded only on this template); body is Poppins,
 * which header.php already loads.
 */

/*
 * Tokens live on :root, not on .rb, because not every component the rebuild
 * styles renders inside the .rb wrapper - the side cart is printed on wp_footer,
 * after footer.php has closed that div, so tokens scoped to .rb resolved to
 * nothing there and every colour silently fell back to transparent.
 */
:root{
  --cream:#FBF6F0; --band:#FDF9F5; --card:#FFFFFF; --line:#EDE4DA;
  --ink:#241A1F; --ink-2:#5C5057; --ink-3:#8B7F86;
  --hot:#B4145A; --hot-2:#8E0F47; --hot-soft:#FCEBF2;
  --dark:#2A1119; --footer:#1C0B12;
  --green:#DCE8DC; --pink:#F9D9DE; --sand:#F1E3D2;
  --star:#1F7A4D;
  --r:10px;
  /* Elevation. The palette is cream-on-cream, so surfaces need real shadows to
     separate rather than relying on 1px borders alone. */
  --sh-1:0 1px 2px rgba(58,38,28,.05), 0 2px 8px -2px rgba(58,38,28,.08);
  --sh-2:0 2px 4px rgba(58,38,28,.06), 0 14px 30px -12px rgba(58,38,28,.22);
  --sh-3:0 4px 10px rgba(58,38,28,.08), 0 28px 60px -20px rgba(58,38,28,.34);
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Poppins','Open Sans',system-ui,sans-serif;
}

.rb{
  background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
}
.rb *,.rb *::before,.rb *::after{box-sizing:border-box}
.rb img{max-width:100%;height:auto;display:block}
/* Scoped, not blanket. This stylesheet is now site-wide, and a blanket
   `.rb a{color:inherit;text-decoration:none}` stripped link styling from every
   content page (about, FAQ, terms). Only the rebuild's own components opt in. */
.rb-nav a,.rb-util a,.rb-logo,.rb-tile,.rb-o,.rb-p a,.rb-chip,.rb-hub,.rb-guide,
.rb-more,.rb-btn,.rb-foot a,.rb-crumbs a,.rb-feat__i,.rb-soc a{color:inherit;text-decoration:none}
.rb p{margin:0}
.rb h1,.rb h2,.rb h3,.rb h4{margin:0;font-family:var(--disp);font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.rb :focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:4px}
.rb-wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.rb-stack{display:flex;flex-direction:column}

/* ---------- utility strip ---------- */
/* Utility strip.
   This must stay on ONE line. It previously used flex-wrap:wrap, so once the
   combined width of both groups exceeded the container the right-hand group
   dropped to a second row and the bar rendered double height. It now never
   wraps; instead the least important items are dropped at narrower widths. */
.rb-util{background:var(--dark);border-bottom:0;font-size:12px;color:rgba(255,255,255,.72)}
.rb-util__in{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;padding:9px 0;min-width:0}
.rb-util span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rb-util .rb-right{margin-left:auto;display:flex;gap:18px;flex-wrap:nowrap;flex:none}
.rb-util svg{width:14px;height:14px;color:#F0A8C4;flex:none}
.rb-util a{color:inherit}
.rb-util a:hover{color:#fff}
/* Progressive drop-off, most expendable first. Everything hidden here is
   repeated in the trust bar directly beneath, so nothing is actually lost. */
/* Utility strip: drop items lowest-priority-first.

   These rules used to key off :nth-of-type(), so inserting a claim shifted
   every index and nothing got hidden - the strip pushed the document to 1780px
   in a 1440px viewport. Priority is now declared in the markup, and the strip
   clips as a hard backstop so a future addition can widen the row but never the
   page. */
.rb-util__in{overflow:hidden;gap:20px}
.rb-util__i{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  color:inherit;text-decoration:none;min-width:0}
.rb-util__i svg{width:14px;height:14px;flex:none;opacity:.85}
.rb-util a.rb-util__i:hover{text-decoration:underline;text-underline-offset:3px}
/*
 * These thresholds were keyed to the VIEWPORT, and the constraint is not the
 * viewport - the strip is a .rb-wrap, so its content box is 1,180px at 1280,
 * 1440, 1560 and every width above. Items were therefore being dropped as the
 * window narrowed even though the space available to them had not changed by a
 * pixel, which is why the row appeared to have different contents on different
 * screens and read as "the menu keeps changing".
 *
 * The wrap only starts shrinking below 1224px (1180 + 44 of padding), so that
 * is where the first item can go. Above it, the set is fixed.
 */
.rb-util__i{flex:none}          /* never squash below the text width */
/* Scoped through .rb-util deliberately. `.rb-util span{display:inline-flex}`
   above is (0,1,1) and beats a bare `.rb-util__i--p4` at (0,1,0), so the hide
   rules silently did nothing and items overflowed the clipped strip instead. */
@media (max-width:1100px){ .rb-util .rb-util__i--p4{display:none} }
@media (max-width:760px){  .rb-util .rb-util__i--p3{display:none} }
@media (max-width:460px){  .rb-util .rb-util__i--p2{display:none} }
.rb-stars{color:var(--star);letter-spacing:1px;font-size:11px}
/* Reference uses pink stars on product cards and green only in the reviews block. */
.rb-p__r .rb-stars{color:var(--hot)}
.rb-util .rb-stars{color:#F5C451}

/* ---------- header ---------- */
.rb-head{background:var(--card);border-bottom:1px solid var(--line);position:relative;z-index:20;
  box-shadow:0 1px 0 rgba(58,38,28,.04),0 6px 18px -12px rgba(58,38,28,.25)}
.rb-head__in{display:flex;align-items:center;gap:20px;padding:14px 0;min-height:78px}
/* Reference logo: dark 'Roch' above pink 'Sweets', with a small bow beneath.
   Mine had the two colours the wrong way round. */
/* Client's wrapper mark. It carries a strapline and a URL that are unreadable
   below ~40px tall, so it gets real height and clear space rather than being
   squeezed into a conventional header lockup. */
.rb-logo{flex:none;display:block;line-height:0}
.rb-logo img{width:auto;height:52px;display:block}
/* The eight nav links need 951px, the logo 119 and the account/basket icons
   156. With the old 34px and 30px gaps that came to 1294px inside an 1180px
   wrap, so the row overflowed by 114px at EVERY desktop width and pushed the
   basket icon 72px off the right of a 1280 screen - off-screen, unclickable.
   Tighter gaps make it fit; min-width:0 with overflow-x lets the nav scroll
   inside itself if it ever grows again, instead of shoving the icons out. */
.rb-nav{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;white-space:nowrap;
  min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.rb-nav::-webkit-scrollbar{display:none}
.rb-nav a{display:flex;flex-direction:column;gap:2px;font-size:14px;font-weight:600;line-height:1.25}
.rb-nav small{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.rb-nav a:hover{color:var(--hot)}
.rb-head__act{margin-left:auto;display:flex;gap:18px;align-items:center;color:var(--ink-2);flex:none;padding-right:2px}
.rb-head__act svg{width:21px;height:21px}
.rb-bag{position:relative}
/* right:-8px hung the count bubble outside the header row. Now that the row
   ends flush with the wrap, that 8px was the last of the page's horizontal
   overflow. Tucked back inside its own icon instead. */
.rb-bag i{position:absolute;top:-6px;right:-2px;background:var(--hot);color:#fff;font-style:normal;
  font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:grid;place-items:center}

/* ---------- trust bar ---------- */
.rb-trust{background:var(--band);border-bottom:1px solid var(--line)}
.rb-trust__in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 0;flex-wrap:wrap}
.rb-trust__i{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.rb-trust__i svg{width:19px;height:19px;color:var(--hot);flex:none}
.rb-trust__sep{width:1px;height:22px;background:var(--line)}

/* ---------- hero ---------- */
.rb-hero{position:relative;overflow:hidden;
  background:linear-gradient(112deg,#FBF4EC 0%,#F6EADE 46%,#F0DFCF 100%)}
/* Soft light behind the pouch so the photograph sits in the scene rather than
   on top of a flat panel. */
.rb-hero::before{content:"";position:absolute;top:-18%;right:-6%;width:52%;height:150%;
  background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0));
  pointer-events:none}
.rb-hero::after{content:"";position:absolute;left:-8%;bottom:-40%;width:42%;height:120%;
  background:radial-gradient(closest-side,rgba(180,20,90,.07),rgba(180,20,90,0));
  pointer-events:none}
.rb-hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.04fr;gap:52px;
  align-items:center;min-height:520px}
.rb-hero__copy{padding:72px 0;display:flex;flex-direction:column;gap:22px;max-width:520px}
.rb-hero h1{font-size:clamp(40px,5vw,64px);letter-spacing:-.028em}
/* Fraunces' ampersand is a decorative swash form that reads as a mistake at
   headline size. Set it in the body face, slightly smaller and lighter. */
.rb-amp{font-family:var(--body);font-weight:500;font-size:.72em;
  vertical-align:.06em;letter-spacing:0;padding:0 .04em}
.rb-hero p{font-size:16.5px;color:var(--ink-2);max-width:40ch}
.rb-cta{display:flex;gap:12px;flex-wrap:wrap}
.rb-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);
  font-weight:600;font-size:15px;padding:13px 26px;border-radius:7px;border:2px solid var(--hot);
  background:var(--hot);color:#fff;cursor:pointer;transition:background .15s,color .15s}
.rb-btn{box-shadow:0 1px 2px rgba(140,15,70,.2),0 8px 18px -8px rgba(140,15,70,.45)}
.rb-btn--out{box-shadow:none}
.rb-btn:hover{background:var(--hot-2);border-color:var(--hot-2);
  box-shadow:0 2px 4px rgba(140,15,70,.24),0 12px 24px -8px rgba(140,15,70,.5)}
.rb-btn--out{background:transparent;color:var(--hot)}
.rb-btn--out:hover{background:var(--hot);color:#fff}
.rb-tp{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.rb-tp b{font-weight:700}
.rb-tp__box{display:flex;gap:2px}
.rb-tp__box i{width:19px;height:19px;background:var(--star);display:grid;place-items:center;font-style:normal;color:#fff;font-size:11px}
.rb-hero__art{position:relative;align-self:stretch;margin:34px 0;min-height:400px;
  border-radius:16px;overflow:hidden;box-shadow:var(--sh-3)}
.rb-hero__art picture{position:absolute;inset:0;display:block}
/* Keep the pouch and hand in frame when the container crops. */
.rb-hero__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%}
/* .rb-hero__seal removed — the "Packed fresh same day" stamp is part of the
   hero photograph, so an overlaid CSS seal duplicated it. */

/* ---------- usp row ---------- */
.rb-usp{background:var(--card);border-bottom:1px solid var(--line)}
.rb-usp__in{display:flex;justify-content:space-between;gap:14px;padding:18px 0;flex-wrap:wrap}
.rb-usp__i{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--ink-2);line-height:1.35;max-width:200px}
.rb-usp__i svg{width:22px;height:22px;color:var(--hot);flex:none}
.rb-usp__i b{display:block;color:var(--ink);font-size:12.5px;font-weight:600}

/* ---------- section furniture ---------- */
.rb-sec{padding:44px 0}
.rb-eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--hot)}
.rb-sh{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.rb-sh h2{font-size:clamp(22px,2.8vw,30px)}
.rb-more{font-size:13px;font-weight:600;color:var(--ink-2)}
.rb-more:hover{color:var(--hot)}

/* ---------- three tiles ---------- */
.rb-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rb-tile{border-radius:var(--r);overflow:hidden;position:relative;min-height:200px;display:flex;
  box-shadow:var(--sh-1);transition:box-shadow .18s,transform .18s}
.rb-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.rb-tile--a{background:var(--green)} .rb-tile--b{background:var(--pink)} .rb-tile--c{background:var(--sand)}
.rb-tile__t{position:relative;z-index:2;padding:24px 18px 24px 24px;display:flex;flex-direction:column;gap:7px;
  max-width:52%;min-width:0}
.rb-tile__t h3{font-size:21px}
.rb-tile__t p{font-size:13px;color:var(--ink-2)}
.rb-tile__t span{margin-top:auto;font-size:13px;font-weight:600;color:var(--hot)}
.rb-tile__img{position:absolute;right:0;top:0;bottom:0;width:48%}
.rb-tile__img img{width:100%;height:100%;object-fit:cover}

/* ---------- product cards ---------- */
.rb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.rb-p{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:box-shadow .18s,transform .18s,border-color .18s}
.rb-p:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#E2D5C6}
.rb-p__img{aspect-ratio:1;background:var(--band)}
.rb-p__img img{width:100%;height:100%;object-fit:cover}
.rb-p__b{padding:11px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1;min-height:0}
.rb-p__n{font-size:12.5px;font-weight:500;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:2.7em;flex:none}
.rb-p__pr{font-family:var(--disp);font-weight:700;font-size:17px}
.rb-p__u{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rb-p__r{display:flex;align-items:center;gap:5px;padding-top:2px;height:16px;flex:none}
.rb-p__r .rb-stars{font-size:10px}
.rb-p__r em{font-style:normal;font-size:10.5px;color:var(--ink-3)}

/* buy controls on every card — the pattern only Monmore and SoSweet run,
   and the one that stops a repeat buyer ever opening a product page */
/* At six columns a card is ~178px wide, which left ~70px for the button and
   wrapped "Add to bag" onto two lines. Stacked instead, with the stepper kept
   compact so the quantity never floats in the middle of an empty bar. */
.rb-buy{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;align-items:stretch;gap:7px}
.rb-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:var(--card);flex:none;width:86px;align-self:center}
.rb-qty button{flex:none;width:24px;height:34px;border:0;background:transparent;cursor:pointer;
  font-size:15px;line-height:1;color:var(--ink-2)}
.rb-qty button:hover{background:var(--band);color:var(--hot)}
.rb-qty input{flex:1;width:100%;min-width:0;height:34px;border:0;text-align:center;background:transparent;
  font-family:var(--body);font-size:13px;color:var(--ink);-moz-appearance:textfield}
.rb-qty input::-webkit-outer-spin-button,.rb-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rb-atc{width:100%;height:34px;padding:0 6px;white-space:nowrap;border:0;border-radius:6px;background:var(--hot);color:#fff;
  font-family:var(--body);font-weight:600;font-size:12.5px;cursor:pointer;transition:background .15s}
.rb-atc{box-shadow:0 1px 2px rgba(140,15,70,.18)}
.rb-atc:hover{background:var(--hot-2);box-shadow:0 3px 8px -2px rgba(140,15,70,.4)}
.rb-atc[disabled]{opacity:.65;cursor:default}
.rb-atc.is-done{background:var(--star)}

/* toast confirmation */
.rb-toast{position:fixed;right:18px;bottom:18px;z-index:9999;background:var(--dark);color:#fff;
  border-radius:9px;padding:13px 17px;font-size:13.5px;box-shadow:0 12px 34px -12px rgba(0,0,0,.55);
  display:flex;align-items:center;gap:10px;transform:translateY(14px);opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none}
.rb-toast.is-open{opacity:1;transform:translateY(0)}
.rb-toast a{color:#F0A8C4;font-weight:600;text-decoration:underline}

/* ---------- pick & mix band ---------- */
.rb-band{background:var(--dark);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;
  align-items:stretch;box-shadow:var(--sh-3)}
.rb-band__b{padding:48px 46px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.rb-band__b h2{color:#fff;font-size:clamp(24px,3vw,32px)}
.rb-band__b > p{color:rgba(255,255,255,.72);font-size:14px;max-width:44ch}
.rb-band .rb-eyebrow{color:#F0A8C4}
.rb-steps{display:flex;gap:26px;flex-wrap:wrap;margin:2px 0 4px}
.rb-step{display:flex;gap:9px;align-items:flex-start;color:rgba(255,255,255,.85);font-size:12px;line-height:1.3;max-width:120px}
.rb-step i{font-style:normal;font-size:11px;font-weight:700;color:#fff;border:1px solid rgba(255,255,255,.4);
  border-radius:5px;width:22px;height:22px;display:grid;place-items:center;flex:none}
.rb-band__art{position:relative;min-height:290px}
.rb-band__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- occasions ---------- */
.rb-occ{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.rb-o{border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;min-height:168px;position:relative;box-shadow:var(--sh-1);
  transition:box-shadow .18s,transform .18s}
.rb-o__t{padding:15px 12px 14px 14px;display:flex;flex-direction:column;gap:3px;position:relative;z-index:2;
  max-width:54%;min-width:0;overflow-wrap:break-word}
.rb-o__t h3{font-size:13.5px;line-height:1.25}
.rb-o__t p{font-size:11px;color:var(--ink-2);line-height:1.35}
.rb-o__t span{font-size:11.5px;font-weight:600;color:var(--hot);margin-top:6px}
/* Text column and image must not add up to more than 100%. At 54% + 52% they
   overlapped by 13px on every card in the row, and the headings - which
   overflowed their own box on top of that - ran across the photographs. */
.rb-o__img{position:absolute;right:0;top:0;bottom:0;width:42%}
.rb-o__img img{width:100%;height:100%;object-fit:cover}

/* ---------- chips ---------- */
.rb-chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.rb-chip{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:8px 14px;
  font-size:12.5px;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s}
.rb-chip:hover{border-color:var(--hot);color:var(--hot)}
.rb-chip em{font-style:normal;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rb-chip--all{color:var(--hot);font-weight:600;border-color:var(--hot)}

/* ---------- reviews ---------- */
.rb-revs{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.rb-rev{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--sh-1)}
.rb-rev p{font-size:12.5px;color:var(--ink-2);line-height:1.5;flex:1}
.rb-rev__w{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)}
.rb-rev__w b{color:var(--ink);font-weight:600}
.rb-rev__v{display:inline-flex;align-items:center;gap:3px;color:var(--star);font-size:10.5px}
.rb-rev__v svg{width:11px;height:11px}

/* ---------- feature band ---------- */
.rb-feat{background:var(--band);border-top:1px solid var(--line)}
.rb-feat__in{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:20px 0}
.rb-feat__i{display:flex;align-items:center;gap:12px}
.rb-feat__i img{width:82px;height:64px;object-fit:cover;border-radius:8px;flex:none}
.rb-feat__i b{display:block;font-size:13.5px;font-weight:600}
.rb-feat__i span{font-size:11.5px;color:var(--ink-3);line-height:1.35}

/* ---------- footer ---------- */
.rb-foot{background:var(--footer);color:rgba(255,255,255,.72);padding:40px 0 0;font-size:13px}
.rb-foot__g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.5fr;gap:26px;padding-bottom:30px}
.rb-foot h4{color:#fff;font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:12px}
.rb-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.rb-foot a:hover{color:#fff}
/* The mark has a white ground, so on the dark footer it sits on a white chip
   rather than showing as a hard rectangle. */
.rb-foot__brand{display:inline-block;background:#fff;border-radius:9px;padding:10px 12px;line-height:0}
.rb-foot__brand img{width:auto;height:38px;display:block}
.rb-soc{display:flex;gap:10px;margin-top:14px}
.rb-soc a{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center}
.rb-soc svg{width:13px;height:13px}
.rb-sub{display:flex;border-radius:7px;overflow:hidden;margin-top:11px;background:rgba(255,255,255,.08)}
.rb-sub input{flex:1;border:0;background:transparent;padding:10px 13px;color:#fff;font-family:var(--body);font-size:12.5px}
.rb-sub input::placeholder{color:rgba(255,255,255,.45)}
.rb-sub button{border:0;background:var(--hot);color:#fff;padding:0 15px;cursor:pointer}
.rb-foot__bar{border-top:1px solid rgba(255,255,255,.1);padding:15px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11.5px;color:rgba(255,255,255,.5)}
.rb-pay{display:flex;gap:6px;align-items:center}
.rb-pay span{background:#fff;color:#1C0B12;border-radius:4px;padding:4px 7px;font-size:9px;font-weight:800;
  letter-spacing:.02em;min-width:34px;text-align:center;line-height:1.1;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .rb-grid{grid-template-columns:repeat(3,1fr)}
  .rb-occ{grid-template-columns:repeat(3,1fr)}
  .rb-revs{grid-template-columns:repeat(2,1fr)}
  .rb-feat__in{grid-template-columns:repeat(2,1fr);gap:16px}
  .rb-foot__g{grid-template-columns:1fr 1fr 1fr}
  /* .rb-nav{display:none} removed. This hid the primary navigation on
     EVERY screen under 1180px - all tablets and all phones - leaving the
     header with a logo, a search icon and a basket and no way to reach
     Pick & Mix, Vegan, Retro or Hampers at all. The nav now degrades
     through the steps further down instead of disappearing. */
}
@media (max-width:860px){
  .rb-hero__in{grid-template-columns:1fr}
  .rb-hero__copy{padding:38px 0 8px}
  .rb-hero__art{min-height:280px}
  .rb-band{grid-template-columns:1fr}
  .rb-band__art{order:-1;min-height:190px}
  .rb-tiles{grid-template-columns:1fr}
  .rb-tile{min-height:160px}
}
@media (max-width:620px){
  .rb-grid{grid-template-columns:repeat(2,1fr)}
  .rb-occ{grid-template-columns:repeat(2,1fr)}
  .rb-revs{grid-template-columns:1fr}
  .rb-foot__g{grid-template-columns:1fr 1fr}
  .rb-trust__sep{display:none}
}
@media (prefers-reduced-motion:reduce){.rb *{transition:none!important;animation:none!important}}


/* A tile with no photograph gives its text the full width rather than leaving
   an empty half — better than borrowing another category's image. */
.rb-tile__t.is-wide,.rb-o__t.is-wide{max-width:100%}
/* Payment marks read as marks, not text pills. */
.rb-pay span{font-family:var(--body);letter-spacing:.02em;line-height:1.5}


/* Footer legal links sit beside the copyright, as in the reference. */
.rb-foot__legal{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rb-foot__legal a:hover{color:#fff}
.rb-foot__legal i{font-style:normal;opacity:.4}


/* Alternating grounds. Everything sat on one cream tone and blended together;
   the product rails now sit on white so the cards read as objects on a surface. */
.rb-sec--white{background:var(--card);border-block:1px solid var(--line)}
.rb-sec--sunk{background:#F6EEE4}


/* Sections were butting up against each other, so the dark band read as if it
   had no top margin. Give each band real separation. */
.rb-sec--band{padding:56px 0 60px}
.rb-sec--white{padding:52px 0}


/* Logo scales down before the nav collapses, so the header never crowds. */
@media (max-width:1180px){ .rb-logo img{height:44px} }
@media (max-width:620px){  .rb-logo img{height:38px} }


/* ---------- transparency block: the dietary positioning ---------- */
.rb-sec--dark{background:var(--dark);color:#fff}
.rb-trans{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.rb-trans h2{color:#fff;font-size:clamp(26px,3.2vw,38px);margin-top:8px}
.rb-trans p{color:rgba(255,255,255,.72);font-size:15px;max-width:44ch;margin-top:12px}
.rb-trans__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rb-hub{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:10px;
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:3px;transition:background .16s,border-color .16s}
.rb-hub:hover{background:rgba(255,255,255,.11);border-color:rgba(240,168,196,.5)}
.rb-hub b{font-family:var(--disp);font-size:18px;font-weight:700;color:#fff}
.rb-hub span{font-size:12.5px;color:rgba(255,255,255,.6)}
.rb-hub em{font-style:normal;font-size:12.5px;font-weight:600;color:#F0A8C4;margin-top:8px}

/* ---------- guides ---------- */
.rb-guides{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rb-guide{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;gap:7px;box-shadow:var(--sh-1);
  transition:box-shadow .18s,transform .18s}
.rb-guide:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.rb-guide__meta{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rb-guide h3{font-size:19px}
.rb-guide p{font-size:14px;color:var(--ink-2);flex:1}
.rb-guide em{font-style:normal;font-size:13px;font-weight:600;color:var(--hot);margin-top:6px}

@media (max-width:900px){
  .rb-trans{grid-template-columns:1fr;gap:28px}
  .rb-guides{grid-template-columns:1fr}
}


/* =========================================================================
   Category / hub pages
   Previously an H1 over a grid with no copy, no FAQ and no breadcrumbs.
   ========================================================================= */
.rb-sec--tight{padding:18px 0 0}
.rb-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-3)}
.rb-crumbs a{color:var(--ink-2)}
.rb-crumbs a:hover{color:var(--hot)}
.rb-crumbs i{font-style:normal;opacity:.45}
.rb-crumbs span[aria-current]{color:var(--ink)}

.rb-hub-head{padding:34px 0}
.rb-hub-head__in{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
.rb-hub-head h1{font-size:clamp(32px,4vw,50px);letter-spacing:-.025em}
.rb-hub-head__count{margin-top:10px;font-size:13px;color:var(--ink-3)}
.rb-hub-head__trust{display:flex;flex-direction:column;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-1)}
.rb-hub-head__trust span{display:flex;flex-direction:column;font-size:12.5px;color:var(--ink-3)}
.rb-hub-head__trust b{font-size:13.5px;color:var(--ink);font-weight:600}

/* Body copy. The single biggest on-page gap: these pages carried none. */
.rb-prose{max-width:74ch;color:var(--ink-2);font-size:15.5px;line-height:1.72}
.rb-prose--lead{margin-top:16px;font-size:16.5px;color:var(--ink-2)}
.rb-prose p{margin:0 0 15px}
.rb-prose h2{font-family:var(--disp);font-size:24px;color:var(--ink);margin:30px 0 12px}
.rb-prose h3{font-family:var(--disp);font-size:19px;color:var(--ink);margin:24px 0 10px}
.rb-prose ul,.rb-prose ol{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.rb-prose a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}
.rb-prose strong{color:var(--ink)}

/* FAQ, matched by FAQPage schema in the head */
.rb-faq{display:flex;flex-direction:column;gap:10px;max-width:840px}
.rb-faq__i{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);overflow:hidden}
.rb-faq__i summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:15px;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center}
.rb-faq__i summary::-webkit-details-marker{display:none}
/* Was `content:"+"` and, for the open state, what was meant to be a minus sign
   but had been mangled into a C1 control byte followed by a literal "2". The
   later FAQ block replaces both with a drawn chevron - but `[open]` here is
   (0,3,1) against that block's (0,2,1), so the broken glyph outlived it and
   rendered as a pink mark in the corner of every open question. Removed; the
   chevron further down is the marker. */
/* This targeted `> div`, but three of the four FAQ blocks in the theme emit a
   bare <p> as the answer - only the category template wraps it. So on the
   product page and both hub-copy blocks the answer got no padding at all: it
   sat flush against the card edge, 20px to the left of the question above it,
   with nothing between the last line and the bottom of the card, at full --ink
   16px instead of the muted 14.5px the closed cards were designed around.
   Matching on "anything that is not the summary" makes all four identical. */
.rb-faq__i > :not(summary){padding:2px 20px 18px;margin:0;
  font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:70ch}
.rb-faq__i > :not(summary) + :not(summary){padding-top:0}
/* The card is white on white, so the open state needs a hairline to separate
   the answer from the question rather than relying on weight alone. */
.rb-faq__i[open] > summary{border-bottom:1px solid var(--line)}
.rb-faq__i[open] > summary + :not(summary){padding-top:14px}

/* Pagination */
.rb-pag{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:30px}
.rb-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 12px;border:1px solid var(--line);border-radius:7px;background:var(--card);
  font-size:14px;font-weight:600;color:var(--ink-2)}
.rb-pag .page-numbers:hover{border-color:var(--hot);color:var(--hot)}
.rb-pag .page-numbers.current{background:var(--hot);border-color:var(--hot);color:#fff}
.rb-pag .dots{border:0;background:transparent}

@media (max-width:900px){
  .rb-hub-head__in{grid-template-columns:1fr;gap:24px}
}


/* =========================================================================
   Site-wide defaults.
   The rebuild chrome is now the theme header/footer, so every legacy template
   renders inside .rb. These rules give those pages the same typography,
   spacing and surfaces without each one being rewritten.
   ========================================================================= */
body.rb-page{background:var(--cream,#FBF6F0)}

/* Legacy templates use Tailwind container classes; give their main region the
   same rhythm as the rebuilt pages. */
.rb main#primary,.rb .site-main{display:block}
.rb main > .container,.rb main > .woocommerce-content{max-width:1180px;margin:0 auto;padding:0 22px}

/* Content pages: about, FAQ, delivery, terms, privacy, refunds, 404, search. */
.rb .entry-content,.rb .page-content,.rb .woocommerce-page main p{
  color:var(--ink-2);font-size:16px;line-height:1.7}
.rb .entry-content a,.rb .page-content a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}
.rb main h1{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.025em;margin-bottom:14px}
/* This and `.rb-h2` were two definitions of the same thing one pixel apart,
   and this one wins on specificity (0,1,2 against 0,1,0) - so every section
   heading rendered at 30px while the token said 29. Same value now. */
.rb main h2{font-size:clamp(21px,2.5vw,29px);margin:28px 0 12px}
.rb main h3{font-size:19px;margin:22px 0 10px}

/* WooCommerce furniture inherits the palette rather than the old purple.

   The colours for the three notice types live in the NOTICES block near the end
   of this file. This rule used to set them too, at (0,2,0), which silently beat
   that block and made a success, an error and an info message look identical.
   Shared geometry only now. */
.rb .woocommerce-notice{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--hot);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh-1);color:var(--ink-2)}
.rb .button,.rb button.button,.rb input[type="submit"],
.rb .woocommerce a.button,.rb .woocommerce button.button,.rb .woocommerce input.button{
  background:var(--hot);color:#fff;border:0;border-radius:7px;padding:12px 22px;
  font-family:var(--body);font-weight:600;font-size:14.5px;cursor:pointer;
  box-shadow:0 1px 2px rgba(140,15,70,.2)}
.rb .button:hover,.rb .woocommerce a.button:hover,.rb .woocommerce button.button:hover{background:var(--hot-2);color:#fff}
.rb .woocommerce table.shop_table,.rb .woocommerce-cart table.cart{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);border-collapse:separate;
  border-spacing:0;overflow:hidden;box-shadow:var(--sh-1)}
.rb .woocommerce table.shop_table th{background:var(--band);color:var(--ink);font-weight:600}
.rb .woocommerce table.shop_table td,.rb .woocommerce table.shop_table th{border-bottom:1px solid var(--line);padding:14px}
.rb .woocommerce form .form-row input.input-text,.rb .woocommerce form .form-row textarea,
.rb .woocommerce form .form-row select,.rb .select2-container .select2-selection{
  border:1px solid var(--line);border-radius:7px;padding:11px 13px;background:var(--card);
  font-family:var(--body);font-size:14.5px;color:var(--ink)}
.rb .woocommerce form .form-row label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.rb .woocommerce .woocommerce-ordering select,.rb .woocommerce-result-count{font-size:14px;color:var(--ink-2)}

/* Shop archive falls back to Woo's own loop; make its cards match ours. */
.rb ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0}
.rb ul.products li.product{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);padding:0 0 14px;margin:0;width:auto;float:none}
.rb ul.products li.product a img{margin:0 0 10px}
.rb ul.products li.product .woocommerce-loop-product__title{font-family:var(--body);font-size:13.5px;
  font-weight:500;padding:0 12px;line-height:1.35}
.rb ul.products li.product .price{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink);padding:0 12px;display:block}
.rb ul.products li.product .button{margin:10px 12px 0;display:block;text-align:center}
@media (max-width:1000px){ .rb ul.products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){  .rb ul.products{grid-template-columns:repeat(2,1fr)} }

/* =========================================================================
   PRODUCT PAGE
   Replaces the purple-gradient "magical" PDP. Shares the tokens above so the
   product page, category page and homepage are one design.
   ====================================================================== */

.rb-h2{font-size:clamp(21px,2.5vw,29px);color:var(--ink)}
.rb-lead{max-width:66ch;margin:10px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.65}
/* -------------------------------------------------------------------------
   .rb-wrap--narrow was max-width:840px on a wrapper that also carries
   `margin:0 auto`, so it centred itself inside a page whose every other section
   is a 1180px wrap. On the product page that put the FAQ and the reviews 170px
   to the right of "About", "Buy in bulk", "More from" and "Goes well with" -
   five different left edges on one page, which is what reads as the text being
   slightly off. The wrapper now keeps the page gutter and the *content* keeps
   the narrow measure, so every section starts on the same line.
   ---------------------------------------------------------------------- */
.rb-wrap--narrow{max-width:1180px}
.rb-wrap--narrow > *{max-width:840px}

.rb-pdp__top{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,1fr);
  gap:clamp(24px,4vw,58px);align-items:start;padding:22px 0 8px}

/* ---- gallery ---- */
.rb-pdp__media{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:clamp(14px,2vw,26px);box-shadow:var(--sh-1)}
.rb-pdp__media .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important}
.rb-pdp__media .woocommerce-product-gallery__image img{width:100%;height:auto;display:block;border-radius:8px}
.rb-pdp__media .woocommerce-product-gallery__trigger{display:none}
.rb-pdp__media .flex-control-thumbs{display:flex;gap:9px;margin:14px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.rb-pdp__media .flex-control-thumbs li{width:66px;margin:0}
.rb-pdp__media .flex-control-thumbs img{width:100%;height:auto;border:1px solid var(--line);
  border-radius:6px;cursor:pointer;opacity:.62;transition:opacity .16s,border-color .16s}
.rb-pdp__media .flex-control-thumbs img.flex-active,
.rb-pdp__media .flex-control-thumbs img:hover{opacity:1;border-color:var(--hot)}

/* ---- buy column ---- */
.rb-pdp__buy{min-width:0}
.rb-pdp__eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--hot);text-decoration:none;margin-bottom:9px}
.rb-pdp__eyebrow:hover{text-decoration:underline;text-underline-offset:3px}
.rb-pdp__h1{font-size:clamp(26px,3.4vw,40px);color:var(--ink)}

.rb-pdp__flags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.rb-flag{font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:100px;
  background:#F3EEE8;color:var(--ink-2);border:1px solid var(--line)}
.rb-flag--w{background:var(--hot-soft);color:var(--hot-2);border-color:#F6D7E4}

.rb-pdp__sum{margin:15px 0 0;color:var(--ink-2);font-size:15.5px;line-height:1.62;max-width:56ch}

.rb-pdp__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:20px 0 0;
  padding-top:19px;border-top:1px solid var(--line)}
.rb-pdp__pr{font-family:var(--disp);font-weight:700;font-size:31px;color:var(--ink);line-height:1}
.rb-pdp__pr del{font-size:20px;color:var(--ink-3);font-weight:400;margin-right:6px}
.rb-pdp__pr ins{text-decoration:none;color:var(--hot)}
.rb-pdp__u{font-size:13px;font-weight:600;color:var(--ink-3)}

/* ---- weight ladder: the internal link into the hidden variants ---- */
.rb-ladder{margin-top:21px}
.rb-ladder__lab{display:flex;align-items:baseline;gap:9px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.rb-ladder__lab em{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;
  font-size:12.5px;color:var(--ink-3)}
.rb-ladder__row{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.rb-rung{position:relative;display:flex;flex-direction:column;gap:2px;min-width:82px;
  padding:10px 13px 9px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);
  text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .15s}
.rb-rung:hover{border-color:var(--hot);box-shadow:var(--sh-1);transform:translateY(-1px)}
.rb-rung b{font-size:14.5px;font-weight:700;line-height:1}
.rb-rung i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.rb-rung.is-on{border-color:var(--hot);background:var(--hot-soft)}
.rb-rung.is-on i{color:var(--hot-2)}
.rb-rung.is-out{opacity:.45}
.rb-rung u{position:absolute;top:-9px;right:-6px;text-decoration:none;background:var(--star);
  color:#fff;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 6px;border-radius:100px;white-space:nowrap}
.rb-ladder__note{margin:9px 0 0;font-size:12px;color:var(--ink-3)}

/* ---- add to cart ---- */
.rb-pdp__cart{margin-top:22px}
.rb-pdp__cart form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin:0}
.rb-pdp__cart .quantity{display:flex;align-items:center;border:1.5px solid var(--line);
  border-radius:9px;background:var(--card);overflow:hidden}
.rb-pdp__cart .quantity label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rb-pdp__cart .quantity input.qty{width:74px;border:0;background:transparent;text-align:center;
  font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);padding:13px 6px}
.rb-pdp__cart button.single_add_to_cart_button{flex:1;min-width:210px;border:0;cursor:pointer;
  background:var(--hot);color:#fff;font-family:var(--body);font-size:15px;font-weight:700;
  letter-spacing:.01em;padding:14px 26px;border-radius:9px;box-shadow:var(--sh-2);
  transition:background .15s,transform .15s}
.rb-pdp__cart button.single_add_to_cart_button:hover{background:var(--hot-2);transform:translateY(-1px)}
.rb-pdp__cart .stock.out-of-stock{color:var(--hot-2);font-weight:600;font-size:14px}

.rb-pdp__ship{list-style:none;margin:22px 0 0;padding:17px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:11px}
.rb-pdp__ship li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.rb-pdp__ship svg{width:19px;height:19px;flex:none;color:var(--hot);margin-top:1px}
.rb-pdp__ship b{color:var(--ink);font-weight:700}

/* ---- ingredients + nutrition ---- */
.rb-pdp__facts{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,30px);align-items:start}
.rb-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh-1)}
.rb-panel h2{font-size:20px;color:var(--ink);display:flex;align-items:baseline;gap:9px}
.rb-panel h2 em{font-style:normal;font-family:var(--body);font-size:12.5px;font-weight:600;
  color:var(--ink-3);letter-spacing:.02em}

.rb-alg__lead{margin:16px 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.rb-alg{display:flex;flex-wrap:wrap;gap:7px}
.rb-alg__i{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:6px;
  background:#FFF4E6;border:1px solid #F2DFC4;color:#7A4A12}

.rb-ing{margin:16px 0 0;font-size:14px;line-height:1.72;color:var(--ink-2)}
.rb-ing strong{color:var(--ink);font-weight:700}
.rb-note{margin:15px 0 0;padding:12px 14px;background:var(--band);border:1px solid var(--line);
  border-radius:8px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.rb-note strong{color:var(--ink-2)}

.rb-nut{width:100%;border-collapse:collapse;margin-top:15px}
.rb-nut th,.rb-nut td{padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px;text-align:left}
.rb-nut th{font-weight:600;color:var(--ink-2)}
.rb-nut td{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.rb-nut tr.is-sub th{padding-left:16px;font-weight:400;color:var(--ink-3);font-size:13px}
.rb-nut tr.is-sub td{font-weight:500;color:var(--ink-2);font-size:13px}
.rb-nut tr:last-child th,.rb-nut tr:last-child td{border-bottom:0}

.rb-qf{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--line);font-size:13px}
.rb-qf dt{color:var(--ink-3)}
.rb-qf dd{margin:0;text-align:right;font-weight:600;color:var(--ink)}

/* ---- bulk sizes ---- */
.rb-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:13px;margin-top:22px}
.rb-size{display:flex;flex-direction:column;gap:5px;padding:17px 18px;background:var(--card);
  border:1.5px solid var(--line);border-radius:11px;text-decoration:none;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.rb-size:hover{border-color:var(--hot);box-shadow:var(--sh-2);transform:translateY(-2px)}
.rb-size.is-on{border-color:var(--hot);background:var(--hot-soft)}
.rb-size b{font-size:14.5px;font-weight:700;line-height:1.35}
.rb-size__p{font-family:var(--disp);font-size:21px;font-weight:700;color:var(--ink)}
.rb-size__u{font-size:12.5px;color:var(--ink-3)}
.rb-size__cta{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--hot)}

.rb-pdp__more{margin:22px 0 0}
.rb-hubs{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.rb-hubs__lab{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.rb-hubs .rb-chips a{background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:border-color .15s,color .15s}
.rb-hubs .rb-chips a:hover{border-color:var(--hot);color:var(--hot)}

/* ---- reviews (real WooCommerce reviews only) ---- */
.rb-reviews{font-size:14.5px;color:var(--ink-2)}
.rb-reviews h2,.rb-reviews h3{color:var(--ink);margin-bottom:12px}
.rb-reviews .comment-form textarea,.rb-reviews .comment-form input[type=text],
.rb-reviews .comment-form input[type=email]{width:100%;border:1.5px solid var(--line);border-radius:8px;
  padding:11px 13px;font-family:var(--body);font-size:14px;background:var(--card);color:var(--ink)}
.rb-reviews .comment-form p{margin:0 0 13px}
.rb-reviews .comment-form .submit{border:0;background:var(--hot);color:#fff;font-family:var(--body);
  font-weight:700;font-size:14px;padding:12px 26px;border-radius:9px;cursor:pointer}
.rb-reviews .comment-form .submit:hover{background:var(--hot-2)}
.rb-reviews .woocommerce-noreviews{padding:14px 16px;background:var(--band);
  border:1px solid var(--line);border-radius:8px}

@media(max-width:900px){
  .rb-pdp__top{grid-template-columns:1fr;gap:26px}
  .rb-pdp__facts{grid-template-columns:1fr}
}
@media(max-width:560px){
  .rb-pdp__cart form.cart{flex-direction:column}
  .rb-pdp__cart .quantity{align-self:flex-start}
  .rb-pdp__cart button.single_add_to_cart_button{width:100%;min-width:0}
  .rb-rung{flex:1 1 calc(50% - 4px);min-width:0}
  .rb-qf dd{text-align:left}
}

/* ---- overrides for the theme's own WooCommerce sheet -------------------- */

/*
 * woocommerce.css lays out ".woocommerce div.product" as a two-column grid at
 * >=1024px. That was correct for the old template, whose direct children were
 * the gallery and the summary. This template's children are full-width sections,
 * so the grid split every section down the middle and rendered the whole page at
 * 608px inside a 1280px viewport - gallery included, at 225px wide.
 * Specificity (0,3,1) to clear their (0,2,1).
 */
.rb div.rb-pdp.product{display:block;max-width:none;gap:0;margin-bottom:0}

/*
 * ".woocommerce div.product form.cart .button" is (0,4,2), so a single-class
 * rule could not hold the brand colour and the buy button rendered in the
 * theme's red (#CF0A2C) instead of the raspberry.
 */
.rb .rb-pdp .rb-pdp__cart form.cart button.single_add_to_cart_button{
  background:var(--hot);color:#fff;border:0;border-radius:9px;
  padding:14px 26px;font-family:var(--body);font-size:15px;font-weight:700;
  letter-spacing:.01em;box-shadow:var(--sh-2);cursor:pointer;
  transition:background .15s,transform .15s;text-transform:none}
.rb .rb-pdp .rb-pdp__cart form.cart button.single_add_to_cart_button:hover{
  background:var(--hot-2);transform:translateY(-1px)}

/* Woo's gallery wrapper carries its own float/width from woocommerce-layout.css. */
.rb .rb-pdp div.woocommerce-product-gallery{width:100%;float:none;margin:0}
.rb .rb-pdp .woocommerce-product-gallery__wrapper{margin:0}

/* =========================================================================
   SIDE CART DRAWER
   The one live component still on the old palette. It is rendered on every
   page by inc/side-cart.php but sits off-screen behind translate-x-full, so
   the site-wide design sweep did not catch it - it only becomes visible once
   a shopper adds something to their bag, which is exactly the wrong moment to
   show them a different website.
   Restyled here rather than by rewriting the partial's ~380 Tailwind classes,
   so the drawer's markup and cart JS are untouched.
   ====================================================================== */

/* The drawer is position:fixed and translated 450px past the right edge, which
   still extends the document's scrollable width and put a horizontal scrollbar
   on every page. overflow-x:clip contains it without creating a scroll
   container, so position:sticky keeps working. */
html{overflow-x:clip}

#side-cart{font-family:var(--body);color:var(--ink)}
#side-cart .cart-header,
#side-cart .bg-gradient-to-r.from-candy-purple{background:var(--dark)!important;color:#fff}
#side-cart .cart-header h2{font-family:var(--disp);letter-spacing:-.01em}

/* Backgrounds */
#side-cart .bg-candy-purple,
#side-cart .bg-bubblegum-pink,
#side-cart .bg-grape-violet{background-color:var(--hot)!important;color:#fff}
#side-cart .bg-lollipop-yellow\/10{background-color:var(--hot-soft)!important}
#side-cart .border-lollipop-yellow\/30{border-color:#F6D7E4!important}

/* Text and gradient-clipped text (prices, totals) */
#side-cart .text-candy-purple,
#side-cart .text-grape-violet,
#side-cart .text-bubblegum-pink{color:var(--hot)!important}
#side-cart .bg-clip-text.text-transparent{
  background:none!important;-webkit-text-fill-color:var(--ink);color:var(--ink)!important;
  font-family:var(--disp);font-weight:700}

/* Buttons: pill -> the rebuild's radius, raspberry primary, dark checkout */
#side-cart a.rounded-full,
#side-cart button.rounded-full,
#side-cart .add_to_cart_button{border-radius:9px!important}
#side-cart a[href*="checkout"]{background-color:var(--dark)!important}
#side-cart a[href*="checkout"]:hover{background-color:var(--footer)!important}
#side-cart a[href*="cart"]:not([href*="checkout"]){background-color:var(--hot)!important}
#side-cart a[href*="cart"]:not([href*="checkout"]):hover{background-color:var(--hot-2)!important}
#side-cart .hover\:scale-105:hover{transform:translateY(-1px)!important}

/* Free-delivery progress bar */
#side-cart .free-shipping-notice{border-radius:8px}
#side-cart .free-shipping-notice .bg-gradient-to-r{background:var(--star)!important}

#side-cart-overlay{backdrop-filter:blur(3px)}

/* The drawer's checkout link is a WooCommerce cart fragment (.button.checkout),
   not one of the partial's Tailwind pills, so it needs naming separately to
   pick up the rebuild's 9px radius instead of style.css's 9999px. */
#side-cart .button,#side-cart a.button{border-radius:9px!important}

/* =========================================================================
   HEADER STABILITY
   Two separate causes of the header changing shape between pages:

   1. Pages with a vertical scrollbar are 15px narrower than pages without, so
      every width-based rule resolved differently depending on how long the page
      happened to be. scrollbar-gutter reserves the space on every page, so the
      layout width is now identical everywhere.

   2. The header needs 1051px for logo + nav + actions but had no responsive
      steps between 1180px and mobile, so anything under ~1100px overflowed and
      clipped the nav and the trust bar. It now degrades in stages.
   ====================================================================== */

html{scrollbar-gutter:stable}

@media (max-width:1180px){
  .rb-head__in{gap:16px}
  .rb-nav{gap:12px}
}
/* Sublabels ("SHOP NOW", "CURATED") go first - they are decoration, the links are not. */
@media (max-width:1090px){
  .rb-nav small{display:none}
  .rb-nav a{font-size:13.5px}
  .rb-nav{gap:17px}
  .rb-head__in{min-height:68px}
}
@media (max-width:950px){
  .rb-logo img{height:42px}
  .rb-nav{gap:13px}
  .rb-nav a{font-size:12.5px}
  .rb-head__in{gap:16px}
}
/* Below this the nav cannot fit on the logo's row at any size, so it drops to
   its own full-width row and scrolls horizontally rather than being clipped. */
@media (max-width:860px){
  .rb-head__in{flex-wrap:wrap;min-height:0;padding:12px 0;gap:10px 16px}
  .rb-head__act{margin-left:auto}
  .rb-nav{order:3;width:100%;gap:20px;overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none;-ms-overflow-style:none}
  .rb-nav::-webkit-scrollbar{display:none}
  .rb-nav a{font-size:13px}
}

/* Trust bar: five nowrap items cannot share a narrow row, and the last one was
   being cut off by the viewport edge. Drop from the right, least critical first.
   Children alternate item/separator, hence the nth-child steps. */
@media (max-width:1120px){ .rb-trust__in > :nth-child(n+8){display:none} }
@media (max-width:940px){  .rb-trust__in > :nth-child(n+6){display:none} }
@media (max-width:760px){  .rb-trust__in > :nth-child(n+4){display:none} }
@media (max-width:560px){  .rb-trust__in > :nth-child(n+2){display:none} }

/* =========================================================================
   PRODUCT PAGE - round two
   Addresses the screenshot audit: dead space, hierarchy, sticky buy bar,
   %RI table, may-contain split, cross-sell, review honesty.
   ====================================================================== */

/* Screen-reader-only text used in the nutrition table header. */
.rb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- breadcrumbs: were too small and too pale for a primary nav element -- */
.rb-crumbs{font-size:13px;color:var(--ink-2);padding:14px 0 2px}
.rb-crumbs a{color:var(--ink-2);text-decoration:none}
.rb-crumbs a:hover{color:var(--hot);text-decoration:underline;text-underline-offset:2px}
.rb-crumbs i{font-style:normal;color:var(--ink-3);padding:0 8px}
.rb-crumbs [aria-current]{color:var(--ink);font-weight:600}

/*
 * The buy column used to end ~150px above the gallery, leaving a dead band
 * before the next section. Making the media column sticky keeps the product in
 * view while the buy column scrolls, and align-items:start stops the shorter
 * column stretching.
 */
@media (min-width:901px){
  .rb-pdp__media{position:sticky;top:18px}
}
.rb-pdp__media.is-single .woocommerce-product-gallery__trigger{display:none}
.rb-pdp__scale{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.rb-pdp__scale strong{color:var(--ink-2)}

/* ---- stock pill next to the price ---- */
.rb-stock{margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:5px 11px;border-radius:100px;background:#E7F3EC;color:var(--star);white-space:nowrap}
.rb-stock.is-out{background:#FBEAEA;color:#A32020}

/* ---- single-size note, so the missing ladder reads as intentional ---- */
.rb-onesize{display:flex;align-items:flex-start;gap:9px;margin:20px 0 0;padding:11px 13px;
  background:var(--band);border:1px solid var(--line);border-radius:8px;
  font-size:13px;color:var(--ink-2);line-height:1.5}
.rb-onesize svg{width:17px;height:17px;flex:none;color:var(--ink-3);margin-top:1px}

/* ---- narrower quantity box; it was wider than it needed to be ---- */
.rb-pdp__cart .quantity input.qty{width:58px}

/* ---- dispatch countdown ---- */
.rb-eta{margin:14px 0 0;padding:10px 13px;border-radius:8px;background:var(--hot-soft);
  border:1px solid #F6D7E4;font-size:13.5px;color:var(--hot-2)}
.rb-eta b{font-weight:700}

.rb-notify{margin:14px 0 0;padding:11px 13px;border-radius:8px;background:var(--band);
  border:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.55}
.rb-notify a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}

.rb-pdp__ship a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}

/* ---- payment marks by the button, not only in the footer ---- */
.rb-pay{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  padding-top:15px;border-top:1px solid var(--line)}
.rb-pay__lab{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.rb-pay__marks{display:flex;gap:6px;flex-wrap:wrap}
.rb-pay__marks i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line);
  border-radius:4px;padding:4px 7px}

/* ---- description leads, with an at-a-glance rail ---- */
.rb-pdp__about{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:start}
.rb-pdp__about .rb-prose{margin-top:14px}
.rb-atglance{background:var(--band);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px}
.rb-atglance h3{font-family:var(--disp);font-size:17px;color:var(--ink);margin-bottom:4px}
.rb-atglance .rb-qf{border-top:0;padding-top:10px;margin-top:6px}
.rb-soldby{margin:16px 0 0;padding-top:15px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.rb-soldby strong{color:var(--ink-2)}
.rb-soldby a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}

/* ---- may-contain, kept visually distinct from Contains ---- */
.rb-alg__lead--may{color:#7A4A12}
.rb-adv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rb-adv li{font-size:12.5px;line-height:1.5;color:var(--ink-2);padding:8px 11px;
  background:#FFFBF4;border:1px dashed #EAD9BE;border-radius:6px}

/* ---- nutrition table with per-bag and %RI columns ---- */
.rb-nutwrap{overflow-x:auto;margin-top:15px}
.rb-nut thead th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rb-nut thead th:first-child{text-align:left}
.rb-nut td{white-space:nowrap}
.rb-ri{color:var(--ink-3);font-weight:600}
.rb-nut tbody tr:first-child th{font-weight:700}

/* ---- cross-sell ---- */
.rb-xsell{margin-top:44px;padding-top:34px;border-top:1px solid var(--line)}

/* ---- product cards: consistent title truncation ---- */
.rb-p__n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em}

/* ---- reviews: an honest prompt instead of a dead end ---- */
.rb-rev-empty{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;margin-bottom:22px}
.rb-rev-empty h2{font-size:20px;color:var(--ink);margin-bottom:9px}
.rb-rev-empty p{font-size:14px;line-height:1.65;color:var(--ink-2);max-width:60ch}

/* ---- FAQ: the open marker rendered as a stray glyph ---- */
.rb-faq__i summary{list-style:none;cursor:pointer;position:relative;padding-right:34px}
.rb-faq__i summary::-webkit-details-marker{display:none}
.rb-faq__i summary::marker{content:''}
.rb-faq__i summary::after{content:'';position:absolute;right:10px;top:50%;width:11px;height:11px;
  margin-top:-6px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s}
.rb-faq__i[open] summary::after{transform:rotate(-135deg)}

/* ---- sticky buy bar ---- */
.rb-sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px -12px rgba(58,38,28,.4)}
.rb-sticky[hidden]{display:none}
.rb-sticky__in{display:flex;align-items:center;gap:16px;padding:11px 22px}
.rb-sticky__n{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.rb-sticky__p{display:flex;align-items:baseline;gap:8px;flex:none;
  font-family:var(--disp);font-size:19px;font-weight:700;color:var(--ink)}
.rb-sticky__p i{font-family:var(--body);font-style:normal;font-size:12px;font-weight:600;color:var(--ink-3)}
.rb-sticky__b{flex:none;border:0;cursor:pointer;background:var(--hot);color:#fff;
  font-family:var(--body);font-size:14px;font-weight:700;padding:12px 26px;border-radius:9px}
.rb-sticky__b:hover{background:var(--hot-2)}

@media(max-width:900px){
  .rb-pdp__about{grid-template-columns:1fr}
}
@media(max-width:560px){
  .rb-sticky__n{display:none}
  .rb-sticky__in{padding:9px 16px;gap:12px}
  .rb-sticky__b{flex:1}
  .rb-stock{margin-left:0}
}

/* =========================================================================
   CONTAINER FIX + MOBILE
   ====================================================================== */

/*
 * THE reason the header looked different on product pages.
 *
 * style.css carries:
 *     .single-product, .single-product :not(img):not(svg):not(iframe)
 *         { max-width: none !important; }
 *
 * which strips the 1180px container from EVERY element on a product page,
 * including the utility strip, the header and the trust bar. So those bars ran
 * edge to edge at 1970px on a product page and sat at 1180px everywhere else -
 * the menu visibly changing shape from page to page.
 *
 * Two classes beats their one class plus three :not() type selectors, and the
 * !important is matched, so the rebuild's container wins back its width without
 * touching the legacy rule that other templates may still rely on.
 */
body.single-product .rb-wrap{max-width:1180px!important}
body.single-product .rb-wrap--narrow{max-width:1180px!important}
body.single-product .rb-wrap--narrow > *{max-width:840px!important}

/* ---------------------------------------------------------------------------
   MOBILE
   The buy box, ladder, tables and cross-sell rows were all built desktop-first.
   ------------------------------------------------------------------------ */

@media (max-width:760px){
  .rb-wrap{padding:0 16px}

  /* Breadcrumbs: keep the trail on one scrollable line rather than wrapping
     into three rows above the fold. */
  .rb-crumbs{white-space:nowrap;overflow-x:auto;scrollbar-width:none;padding:12px 0 2px;font-size:12.5px}
  .rb-crumbs::-webkit-scrollbar{display:none}

  .rb-pdp__top{padding:14px 0 4px;gap:20px}
  .rb-pdp__media{padding:12px;border-radius:10px}
  .rb-pdp__h1{font-size:clamp(23px,7vw,30px)}
  .rb-pdp__sum{font-size:14.5px}

  /* Price row: stock pill must not push the unit price onto its own line. */
  .rb-pdp__price{gap:8px 10px;margin-top:16px;padding-top:15px}
  .rb-pdp__pr{font-size:27px}
  .rb-stock{margin-left:0;order:3;flex-basis:100%}

  /* Size ladder: a 2-across grid reads far better than wrapped flex pills. */
  .rb-ladder__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
  .rb-rung{min-width:0;padding:9px 10px}
  .rb-rung b{font-size:14px}
  .rb-rung u{top:-8px;right:-4px;font-size:8.5px;padding:2px 5px}

  /* Buy controls: full-width button, quantity beside it, both thumb-sized. */
  .rb-pdp__cart form.cart{flex-direction:row;flex-wrap:wrap;gap:9px}
  .rb-pdp__cart .quantity{flex:0 0 auto}
  .rb-pdp__cart .quantity input.qty{width:64px;padding:15px 6px;font-size:16px}
  .rb-pdp__cart button.single_add_to_cart_button,
  .rb .rb-pdp .rb-pdp__cart form.cart button.single_add_to_cart_button{
    flex:1 1 auto;min-width:0;padding:15px 18px;font-size:15px}

  .rb-pdp__ship{gap:9px;padding-top:15px}
  .rb-pdp__ship li{font-size:13px}
  .rb-pay{gap:8px}
  .rb-pay__marks i{font-size:10px;padding:3px 6px}

  /* Description + at-a-glance stack; the rail goes first-class, not squeezed. */
  .rb-pdp__about{gap:22px}
  .rb-atglance{padding:17px 18px}
  .rb-qf{grid-template-columns:1fr auto;gap:7px 12px}
  .rb-qf dd{text-align:right}

  .rb-panel{padding:17px 18px;border-radius:10px}
  .rb-panel h2{font-size:18px}
  .rb-ing{font-size:13.5px;line-height:1.7}

  /* Nutrition: 3 columns will not fit 360px, so the per-bag column is dropped
     on the narrowest screens - per 100g and %RI are the legally meaningful
     pair, and the per-bag figure is repeated in the FAQ. */
  .rb-nut th,.rb-nut td{font-size:13px;padding:9px 2px}
  .rb-nutwrap{margin-left:-2px;margin-right:-2px}

  .rb-sizes{grid-template-columns:1fr;gap:10px}
  .rb-size{padding:14px 15px}

  .rb-faq__i summary{font-size:14.5px;padding-right:30px}

  /* Product RAILS - "best sellers", cross-sell, the block inside a guide -
     scroll sideways on a phone, because a one-across column buries the rest of
     the page.

     This used to apply to every `.rb-grid`, which turned the shop, the category
     hubs, the tag archives and the AJAX filter results into horizontal swipe
     carousels on mobile: twelve products in a sideways strip showing about 1.6
     at a time, with pagination underneath. The main catalogue is a grid that
     wraps; only an explicit rail scrolls. */
  .rb-grid--rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(156px,60%);
    grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:11px;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px;
    scrollbar-width:none}
  .rb-grid--rail::-webkit-scrollbar{display:none}
  .rb-grid--rail > *{scroll-snap-align:start}

  /* Catalogue grids stay two-up and wrap. */
  .rb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}

  .rb-xsell{margin-top:32px;padding-top:26px}
  .rb-hubs{margin-top:26px;padding-top:20px}
  .rb-rev-empty{padding:17px 18px}
  .rb-rev-empty h2{font-size:18px}

  /* The sticky bar overlaps the last section, so give the page a floor. */
  .rb-pdp{padding-bottom:74px}
}

@media (max-width:420px){
  /* Three data columns genuinely will not fit; drop the per-bag one. */
  .rb-nut thead th:nth-child(3),
  .rb-nut tbody td:nth-child(2){display:none}
  .rb-rung{padding:8px 8px}
  .rb-pdp__cart .quantity input.qty{width:56px}
}

/* Cookie sheet on mobile: full width, above the sticky buy bar. */
@media (max-width:760px){
  .cookie-consent-overlay{padding:0}
  .cookie-consent-container{width:100%;max-width:none;border-radius:12px 12px 0 0}
}

/* =========================================================================
   MOBILE - round two
   ====================================================================== */

/* The nav had to explicitly re-assert display here, because the rule that used
   to hide it below 1180px sat in an earlier media block and there was no mobile
   menu to fall back on.

   There is one now. Below 900px the nav belongs in the drawer, so this window
   is 861-900px only - wide enough that the inline nav still fits, narrow enough
   that it does not fight the drawer rule. Left as !important because the
   original offender is still in that earlier block. */
@media (min-width:861px) and (max-width:900px){
  .rb-nav{display:flex!important}
}

/* Size pills were clipping their unit price at 375px: three 120px columns could
   not hold "200g" plus "£1.10/100g" on one line each. Two columns, and the unit
   price is allowed to shrink. */
@media (max-width:520px){
  .rb-ladder__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb-rung{padding:9px 9px;overflow:visible}
  .rb-rung b{font-size:13.5px}
  .rb-rung i{font-size:10.5px;white-space:nowrap}
}

/*
 * Cookie sheet: it was rendering 755px tall on an 812px screen, so removing the
 * scroll lock alone still left the page effectively covered. Capped to 45% of
 * the viewport with the detail scrolling inside it, and the 3px horizontal
 * overflow (its own padding pushing past 375px) removed with border-box.
 */
.cookie-consent-overlay,
.cookie-consent-overlay *{box-sizing:border-box}
.cookie-consent-container{max-width:min(680px,100%)}

@media (max-width:760px){
  .cookie-consent-overlay{padding:0;max-width:100vw}
  .cookie-consent-container{
    width:100%;max-width:100%;border-radius:12px 12px 0 0;
    max-height:45vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    box-shadow:0 -8px 30px -10px rgba(0,0,0,.35)}
  .cookie-consent-container h2,
  .cookie-consent-container h3{font-size:16px}
  .cookie-consent-container p{font-size:13px;line-height:1.5}
  /* Buttons stack full width so they are reachable with a thumb. */
  .cookie-consent-container button{min-height:44px}
}

/* Sticky buy bar must clear the cookie sheet while that is still on screen. */
@media (max-width:760px){
  body:has(#cookie-consent-banner:not(.hidden)) .rb-sticky{display:none}
}

/* Tap targets: 44px minimum on the controls a shopper actually uses. */
@media (max-width:760px){
  .rb-rung,.rb-size,.rb-faq__i summary,.rb-crumbs a,.rb-hubs .rb-chips a{min-height:44px}
  .rb-faq__i summary{display:flex;align-items:center}
  .rb-rung{justify-content:center}
  .rb-head__act svg{width:24px;height:24px}
  .rb-atc,.rb-qty button{min-height:40px;min-width:40px}
}

/* Keep the best-value badge inside the pill on narrow screens; overhanging it
   added ~6px of phantom width to the size grid. */
@media (max-width:520px){
  .rb-rung u{top:-7px;right:2px}
}

/* =========================================================================
   LEGACY PALETTE REMAP
   Several templates were never converted and still carry the old Tailwind
   utility classes: page-pick-mix.php (725 lines of working builder),
   page-bulk-buy.php, archive-product.php and the shop hero. Rewriting them
   risks breaking the pick & mix logic for no design gain, so the old colour
   utilities are remapped onto the rebuild's tokens instead. Everything sits
   inside .rb, so this reaches every legacy template at once and touches
   nothing the new design uses.
   ====================================================================== */

/* Text */
.rb .text-candy-purple,
.rb .text-grape-violet,
.rb .text-midnight-black{color:var(--ink)}
.rb .text-bubblegum-pink{color:var(--hot)}
.rb .text-sugar-white{color:#fff}
.rb .text-lollipop-yellow{color:var(--sand)}

/* Solid backgrounds */
.rb .bg-candy-purple,
.rb .bg-grape-violet,
.rb .bg-bubblegum-pink{background-color:var(--hot)!important;color:#fff}
.rb .bg-lollipop-yellow{background-color:var(--hot-soft)!important;color:var(--ink)}
.rb .bg-sugar-white{background-color:var(--card)!important}
.rb .bg-midnight-black{background-color:var(--dark)!important;color:#fff}

/* Tinted backgrounds (the /5 /10 /20 opacity variants) */
.rb [class*="bg-candy-purple/"],
.rb [class*="bg-bubblegum-pink/"],
.rb [class*="bg-grape-violet/"]{background-color:var(--hot-soft)!important}
.rb [class*="bg-lollipop-yellow/"]{background-color:var(--band)!important}

/* Gradients - flatten to a solid, they were the most dated element */
.rb [class*="bg-gradient-to"][class*="from-candy-purple"],
.rb [class*="bg-gradient-to"][class*="from-bubblegum-pink"],
.rb [class*="bg-gradient-to"][class*="from-grape-violet"]{
  background-image:none!important;background-color:var(--dark)!important;color:#fff}
.rb [class*="bg-gradient-to"][class*="from-sugar-white"]{
  background-image:none!important;background-color:var(--cream)!important}
/* gradient-clipped text reads as a smear once the gradient is gone */
.rb .bg-clip-text.text-transparent{
  background-image:none!important;-webkit-text-fill-color:var(--ink);color:var(--ink)!important}

/* Borders */
.rb [class*="border-candy-purple"],
.rb [class*="border-bubblegum-pink"],
.rb [class*="border-grape-violet"],
.rb [class*="border-lollipop-yellow"]{border-color:var(--line)!important}

/* Type */
.rb .font-heading{font-family:var(--disp)!important;letter-spacing:-.015em}
.rb .font-body{font-family:var(--body)!important}

/* Pills back to the rebuild's radius */
/* This was every `.rounded-full` on the two pages, which squared off the 64px
   circular step badges along with the pill buttons it was aimed at. Controls
   only; decorative circles stay circular. */
.rb .pick-and-mix-page a.rounded-full,
.rb .pick-and-mix-page button.rounded-full,
.rb .bulk-buy-page a.rounded-full,
.rb .bulk-buy-page button.rounded-full{border-radius:var(--r-ctl)!important}

/* Kill the decorative bounce/pulse the old templates used on emoji and badges */
.rb .animate-bounce,
.rb .animate-pulse{animation:none!important}

/* Copy block rendered from post_content on the hub pages */
.rb-hubcopy{max-width:74ch}
.rb-hubcopy h2{font-family:var(--disp);font-size:clamp(20px,2.6vw,26px);color:var(--ink);
  margin:30px 0 12px;letter-spacing:-.02em}
.rb-hubcopy h3{font-family:var(--disp);font-size:18px;color:var(--ink);margin:24px 0 9px}
.rb-hubcopy p{margin:0 0 15px}
.rb-hubcopy ul,.rb-hubcopy ol{margin:0 0 16px;padding-left:20px;display:flex;
  flex-direction:column;gap:7px}
.rb-hubcopy a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}
.rb-hubcopy strong{color:var(--ink)}

/* Footer shop-by-type strip: a site-wide link to every category hub. */
.rb-foot__cats{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
.rb-foot__cats h4{margin-bottom:13px}
.rb-foot__catlist{display:flex;flex-wrap:wrap;gap:8px 9px}
.rb-foot__catlist a{display:inline-block;font-size:12.5px;line-height:1;padding:7px 12px;
  border-radius:6px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);
  text-decoration:none;transition:background .15s,color .15s}
.rb-foot__catlist a:hover{background:var(--hot);color:#fff}

/* Default page / guide layout */
.rb-doc__h1{font-family:var(--disp);font-size:clamp(28px,4vw,44px);color:var(--ink);
  letter-spacing:-.025em;max-width:22ch}
.rb-doc__lede{margin-top:14px;font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.rb-guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px;margin-top:20px}
.rb-guide{display:flex;flex-direction:column;gap:7px;padding:20px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;text-decoration:none;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.rb-guide:hover{border-color:var(--hot);box-shadow:var(--sh-2);transform:translateY(-2px)}
.rb-guide b{font-family:var(--disp);font-size:16px;line-height:1.3}
.rb-guide span{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.rb-guide em{font-style:normal;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--hot)}

/* ---- E-E-A-T: byline, sources ---- */
.rb-byline{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);font-family:var(--body)}
.rb-byline__who strong{color:var(--ink-2);font-weight:600}
.rb-byline__sep{color:var(--line)}
.rb-sources{max-width:840px;margin:0 auto;padding:22px 24px;background:var(--band);
  border:1px solid var(--line);border-radius:12px}
.rb-wrap > .rb-sources{margin-top:0}
.rb-sources h2{font-family:var(--disp);font-size:19px;color:var(--ink);margin-bottom:10px}
.rb-sources p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.rb-sources ul{margin:0 0 12px;padding-left:19px;display:flex;flex-direction:column;gap:7px;
  font-size:14px;color:var(--ink-2);line-height:1.5}
.rb-sources a{color:var(--hot);text-decoration:underline;text-underline-offset:2px}
.rb-sources__caveat{font-size:12.5px;color:var(--ink-3);margin:0;padding-top:11px;
  border-top:1px solid var(--line)}

/* =========================================================================
   LEGACY PALETTE REMAP — CORRECTIONS
   The blanket "any gradient from-candy-purple -> --dark" rule above was far too
   broad. Tailwind writes opacity variants as from-candy-purple/10, and that
   matched too, so a 10% tint became near-black (#2A1119) with white text forced
   on top. On /pick-mix/ that hit three things at once: the image well behind
   every product photo, every "+ Add" button, and the How It Works panel.
   These come after it and are matched more narrowly, so they win.
   ====================================================================== */

/* 1. Opacity-suffixed stops are washes, not bars. The trailing slash in the
      attribute match is what separates from-candy-purple/10 from the solid. */
.rb [class*="bg-gradient-to"][class*="from-candy-purple/"],
.rb [class*="bg-gradient-to"][class*="from-bubblegum-pink/"],
.rb [class*="bg-gradient-to"][class*="from-grape-violet/"],
.rb [class*="bg-gradient-to"][class*="from-lollipop-yellow/"],
.rb [class*="bg-gradient-to"][class*="from-sugar-white"]{
  background-image:none!important;
  background-color:var(--band)!important;
  color:var(--ink)!important;
  border:1px solid var(--line);
}
.rb [class*="bg-gradient-to"][class*="from-candy-purple/"] *,
.rb [class*="bg-gradient-to"][class*="from-bubblegum-pink/"] *,
.rb [class*="bg-gradient-to"][class*="from-grape-violet/"] *{color:var(--ink)}

/* 2. Image wells sit behind a photograph — a neutral, not a colour. */
.rb [class*="aspect-"][class*="bg-gradient"],
.rb .sweet-card [class*="bg-gradient"]:has(img),
.rb .sweet-card .aspect-square{
  background-image:none!important;background-color:var(--rule-2)!important;border:0}

/* 3. Anything that acts as a button is the accent, never the dark. */
.rb .add-to-mix-btn,
.rb button[class*="bg-gradient"],
.rb a[class*="bg-gradient"][class*="rounded"]{
  background-image:none!important;
  background-color:var(--hot)!important;
  color:#fff!important;border:0}
.rb .add-to-mix-btn:hover,
.rb button[class*="bg-gradient"]:hover{background-color:var(--hot-2)!important}

/* 4. The mix summary panel reads as a card, not a void. */
.rb #mix-summary,
.rb [id*="mix-summary"]{background-color:var(--card)!important;color:var(--ink)!important;
  border:1px solid var(--line)}
.rb #mix-summary *{color:var(--ink)}
.rb #mix-summary button,
.rb #mix-summary a[class*="rounded"]{color:#fff!important}

/* Legacy purple defined in custom CSS classes rather than Tailwind utilities,
   so the attribute-selector remap above never reached it. #7C3AED on prices,
   the active bag-size button, .btn-primary and the floating cookie button. */
.rb .price,
.rb .bag-size-btn .price{color:var(--hot)!important}
.rb .bag-size-btn.active{
  background-image:none!important;background-color:var(--hot-soft)!important;
  border-color:var(--hot)!important}
.rb .bag-size-btn svg,
.rb .bag-size-btn .bag-icon{color:var(--hot)!important;fill:currentColor!important}
.rb .btn-primary{
  background-image:none!important;background-color:var(--hot)!important;
  color:#fff!important;border:0}
.rb .btn-primary:hover{background-color:var(--hot-2)!important}
#cookie-settings-btn,
.cookie-settings-floating{
  background-image:none!important;background-color:var(--dark)!important;
  color:#fff!important;border:1px solid rgba(255,255,255,.15)}

/* The blanket gradient remap is [class*=][class*=] on .rb — specificity (0,3,0)
   — so a plain .rb .add-to-mix-btn (0,2,0) lost to it and every "+ Add" button
   stayed near-black. Adding the element type takes these to (0,3,1). */
.rb button[class*="bg-gradient-to"][class*="from-"],
.rb button.add-to-mix-btn[class*="bg-gradient-to"],
.rb a[class*="bg-gradient-to"][class*="rounded-full"]{
  background-image:none!important;
  background-color:var(--hot)!important;
  color:#fff!important;border:0}
.rb button[class*="bg-gradient-to"][class*="from-"]:hover,
.rb button.add-to-mix-btn[class*="bg-gradient-to"]:hover{
  background-color:var(--hot-2)!important;transform:translateY(-1px)}

/* The sweet search sat in the same flex row as the category chips and collapsed
   to 58px, leaving the placeholder clipped to "S" with the icon on top of it. */
.rb #sweet-search{min-width:190px;border-color:var(--line)!important;border-radius:8px;
  font-family:var(--body);font-size:13.5px;background:var(--card);color:var(--ink)}
.rb #sweet-search::placeholder{color:var(--ink-3)}
.rb #sweet-search:focus{outline:2px solid var(--hot);outline-offset:1px;border-color:var(--hot)!important}
.rb div.relative:has(#sweet-search){flex:0 0 auto;min-width:200px;margin-left:auto}

/* =========================================================================
   PICK & MIX — layout density pass
   Restructured against a reference build. Every hook the builder JS relies on
   (#sweets-grid, .sweet-card, .add-to-mix-btn, #mix-summary, #mix-items,
   #progress-bar, .bag-size-btn) is untouched — this is presentation only, so
   the builder logic is unaffected. No content is removed.
   ====================================================================== */

/* ---- product grid: 3 across was showing 6 sweets per screen out of 24 ---- */
.rb #sweets-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;
  gap:12px!important;
}
.rb .sweet-card{
  background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:11px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.rb .sweet-card:hover{border-color:var(--hot);box-shadow:var(--sh-1);transform:translateY(-2px)}
.rb .sweet-card .aspect-square{
  aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--rule-2)!important;margin:0}
.rb .sweet-card .aspect-square img{width:100%;height:100%;object-fit:cover;display:block}
.rb .sweet-card h3{
  font-family:var(--body);font-size:13.5px;font-weight:600;line-height:1.35;
  color:var(--ink);margin:0;min-height:2.7em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Weight and price sat at 11px - the two numbers a picker exists to compare. */
.rb .sweet-card > div.text-xs{font-family:var(--mono,var(--body));font-size:12px;color:var(--ink-3);margin:0}
.rb .sweet-card .add-to-mix-btn{
  width:100%;padding:9px 10px;border-radius:8px;font-size:12.5px;font-weight:700;
  font-family:var(--body);margin-top:auto}
.rb .sweet-card .add-to-mix-btn:disabled{
  background-color:var(--rule)!important;color:var(--ink-3)!important;cursor:not-allowed;transform:none!important}
/* "in mix" state stays green — it is a status, not the accent */
.rb .sweet-card .add-to-mix-btn[class*="bg-green"]{
  background-color:var(--star)!important;color:#fff!important;cursor:default}

/* ---- capacity bar ---- */
.rb #weight-bar{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:12px}
.rb #progress-bar{background-image:none!important;background-color:var(--hot)!important;border-radius:99px}
.rb #percent-full{font-family:var(--disp);color:var(--ink)!important}
.rb #weight-bar .h-full,
.rb #weight-bar [class*="rounded-full"]{border-radius:99px}

/* ---- bag size cards ---- */
.rb #weight-selector{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:12px}
.rb .bag-size-btn{
  background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:16px 12px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.rb .bag-size-btn:hover{border-color:var(--hot);transform:translateY(-2px);box-shadow:var(--sh-1)}

/* ---- category chips ---- */
.rb #category-tabs{gap:7px!important}
.rb #category-tabs button{
  font-family:var(--body);font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:7px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);
  transition:border-color .15s,color .15s}
.rb #category-tabs button:hover{border-color:var(--hot);color:var(--hot)}
.rb #category-tabs button.active,
.rb #category-tabs button[class*="bg-candy"],
.rb #category-tabs button[class*="bg-gradient"]{
  background:var(--hot)!important;border-color:var(--hot)!important;color:#fff!important}

/* ---- the Your Mix panel ---- */
.rb #mix-summary{border-radius:12px;padding:20px!important;box-shadow:var(--sh-2)!important}
.rb #mix-summary h2,.rb #mix-summary h3{font-family:var(--disp);color:var(--ink)}
.rb #summary-price,.rb #summary-price-mobile{font-family:var(--disp);color:var(--ink)!important}
.rb #summary-size,.rb #summary-weight,.rb #summary-items{color:var(--ink)!important;font-family:var(--body);font-weight:600}
.rb #mix-items{display:flex;flex-direction:column;gap:8px}
.rb .mix-item{
  background:var(--band)!important;border:1px solid var(--line)!important;border-radius:9px;padding:9px!important}
.rb .mix-item__thumb{
  width:42px;height:42px;flex:none;border-radius:7px;overflow:hidden;background:var(--rule-2);margin-right:10px}
.rb .mix-item__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rb .mix-item h4{font-size:12.5px;line-height:1.3;color:var(--ink)}
.rb .mix-item p{font-size:11px;color:var(--ink-3)}
.rb #checkout-btn{border-radius:9px!important;font-family:var(--body);font-weight:700}
.rb #clear-mix-btn{border-radius:9px!important;background:var(--rule-2)!important;color:var(--ink-2)!important}

/* ---- the two info panels at the foot: keep the content, restyle the box ---- */
.rb .pick-and-mix-page .grid.md\:grid-cols-2 > div[class*="bg-gradient"]{
  background-image:none!important;background-color:var(--card)!important;
  border:1px solid var(--line)!important;border-radius:12px}
.rb .pick-and-mix-page h3[class*="text-candy-purple"]{color:var(--ink)!important;font-family:var(--disp)}

@media (max-width:900px){
  .rb #sweets-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important}
}
@media (max-width:560px){
  .rb #sweets-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .rb .sweet-card{padding:8px}
  .rb .sweet-card h3{font-size:12.5px}
}

/* The capacity bar carries a 90% "nearly full" marker — a red line plus a
   pulsing red dot. It is a genuine affordance, not a bug, but at 0% it reads as
   a stray artefact. Toned to a quiet tick in the warning colour, no pulse. */
.rb #weight-bar [class*="bg-red-500"]{
  background-color:var(--warn,#B07A00)!important;opacity:.45;animation:none!important}
.rb #weight-bar [class*="bg-red-500"][class*="rounded-full"]{
  width:7px!important;height:7px!important;opacity:.6}
.rb #weight-bar [class*="-top-1"]{top:-3px!important}

/* =========================================================================
   TYPOGRAPHY & SPACING PASS
   Measured rather than eyeballed. Three classes of problem were found on the
   product page and repeat site-wide.
   ====================================================================== */

/*
 * 1. CONTRAST. --ink-3 (#8B7680) failed WCAG AA on every one of the four
 *    background tones the design uses — 3.65 on the sunk panel, 4.20 at best on
 *    white, against a 4.5 requirement. It carries the unit price, the Quick
 *    Facts labels, the allergen note and the sold-by line, so the small print
 *    that matters most was the hardest to read. #736068 is the lightest value
 *    that clears 4.5 on all four grounds (worst case 5.07).
 */
:root{ --ink-3:#736068; }

/*
 * 2. MEASURE. Running text was 86–147 characters per line; comfortable reading
 *    is 45–75. The worst was .rb-lead at 147cpl across 1136px. Caps are in ch so
 *    they track the font size rather than a fixed pixel guess.
 */
.rb-lead{max-width:64ch}
.rb-prose,
.rb-hubcopy{max-width:68ch}
.rb-pdp__about-copy .rb-prose{max-width:66ch}
.rb-pdp__about-copy .rb-prose p{max-width:66ch}
.rb-note{max-width:70ch}
.rb-faq__i p{max-width:72ch}
.rb-rev-empty p{max-width:66ch}
.rb-sources p,.rb-sources li{max-width:72ch}
.rb-doc__lede{max-width:58ch}
.rb-pdp__sum{max-width:52ch}
/* the bulk-size intro sat full width under a narrow heading */
.rb-sizes + *,.rb-sec--white > .rb-wrap > .rb-lead{max-width:64ch}

/*
 * 3. MINIMUM SIZES. 9px payment marks and 11px footer headings are below the
 *    point where they read comfortably on a normal screen.
 */
.rb-pay__marks i{font-size:10.5px;padding:4px 8px}
.rb-foot h4{font-size:12px;letter-spacing:.1em}
.rb-util{font-size:12.5px}
.rb-foot__legal{font-size:12px}
.rb-ladder__note{font-size:12.5px}
.rb-alg__lead{font-size:12px}

/* 4. The size pill clipped its own "Best value" badge. */
.rb-rung{overflow:visible;padding-top:12px}
.rb-ladder__row{padding-top:9px}

/* 5. Vertical rhythm: headings were sitting equidistant from the text above and
      below them, so sections read as one undifferentiated column. */
.rb-prose h2,.rb-hubcopy h2{margin-top:34px;margin-bottom:10px}
.rb-prose h3,.rb-hubcopy h3{margin-top:26px;margin-bottom:8px}
.rb-prose > :first-child,.rb-hubcopy > :first-child{margin-top:0}
.rb-prose p + ul,.rb-hubcopy p + ul{margin-top:-4px}
.rb-h2 + .rb-lead{margin-top:12px}

/* -------------------------------------------------------------------------
   style.css carries:
       .single-product, .single-product :not(img):not(svg):not(iframe)
           { max-width: none !important; }
   — specificity (0,1,3) with !important, so it strips max-width from EVERY
   element on a product page. It is what forced the 1180px container open
   earlier, and it is why the reading-measure caps below had no effect there.
   style.css is a Tailwind build output, so editing it would be lost on the next
   `npm run build`; the caps are restored here instead, scoped through body to
   clear the specificity.
   ---------------------------------------------------------------------- */
body.single-product .rb-lead{max-width:64ch!important}
body.single-product .rb-prose,
body.single-product .rb-hubcopy{max-width:68ch!important}
body.single-product .rb-pdp__about-copy .rb-prose,
body.single-product .rb-pdp__about-copy .rb-prose p{max-width:66ch!important}
body.single-product .rb-note{max-width:70ch!important}
body.single-product .rb-faq__i p{max-width:72ch!important}
body.single-product .rb-rev-empty p{max-width:66ch!important}
body.single-product .rb-pdp__sum{max-width:52ch!important}
body.single-product .rb-ing{max-width:76ch!important}
body.single-product .rb-sources p,
body.single-product .rb-sources li{max-width:72ch!important}

/* =========================================================================
   TYPOGRAPHY, SPACING & LAYOUT PASS - ROUND TWO
   Every page type measured at 375px and 1440px. Findings and fixes below;
   the comment on each block is the measurement that justified it.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. THE SHOP PAGE SCROLLED SIDEWAYS ON A PHONE.
   WooCommerce renders pagination as `ul.page-numbers{display:inline-flex}`
   with no wrap rule. With 630 products there are enough page links to make
   that list 519px wide, so at 375px the whole document measured 537px and
   every page of the shop could be dragged sideways. This is the single worst
   mobile defect found: it affects the highest-traffic template on the site.
   ---------------------------------------------------------------------- */
.rb .woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers{
  display:flex!important;flex-wrap:wrap!important;justify-content:center;
  gap:8px;max-width:100%;padding:0;margin:0}
.woocommerce-pagination ul.page-numbers li{margin:0;border:0}
.woocommerce-pagination .page-numbers{min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 12px}
/* Past a certain count the numbers are noise on a phone - keep first, last,
   current and the prev/next arrows, which is how you actually page on mobile. */
@media (max-width:560px){
  .woocommerce-pagination ul.page-numbers li:has(.page-numbers.dots){display:none}
}

/* -------------------------------------------------------------------------
   2. THE "ADD TO CART" BUTTON WAS CLIPPED OFF EVERY PRODUCT CARD.
   content-product.php puts the price and the button in one row:
       .product-actions{display:flex;justify-content:space-between}
       .add-to-cart-wrapper{flex-shrink:0}
   The card is overflow:hidden. At 375px the grid is two columns, so a card is
   140px wide while the button is 216px - it hung 76px outside the card and was
   simply cut off. Measured on /about/, /contact/ and every guide page: the
   primary conversion control was invisible on a phone.
   Stacking the button under the price also gives it a full-width, 48px-tall
   tap target, which is what the reference sites do.
   ---------------------------------------------------------------------- */
.product-card .product-actions{flex-wrap:wrap;gap:10px}
.product-card .add-to-cart-wrapper{flex:1 1 100%;min-width:0;flex-shrink:1}
.product-card .add-to-cart-wrapper > a.button,
.product-card .add-to-cart-wrapper > a.add_to_cart_button{
  display:block;width:100%;box-sizing:border-box;text-align:center;
  white-space:normal;padding:12px 10px;min-height:46px;line-height:1.3}
.product-card .product-price{flex:1 1 100%;min-width:0}
/* 24px of padding inside a 140px card leaves 92px for the content. */
@media (max-width:767px){
  .product-card .product-info{padding:14px}
  .product-card .product-actions{gap:8px}
}

/* -------------------------------------------------------------------------
   3. MOBILE NAVIGATION WAS A 16px-TALL SCROLL STRIP WITH NO AFFORDANCE.
   Below 860px the primary nav drops to its own full-width row and scrolls
   horizontally. That is the right pattern, but the links were bare text 16px
   tall - half the 44px minimum - and four of the seven sat off-screen with
   nothing to indicate the row moved. They are now pills with a real hit area,
   scroll-snap, and a fade at the right edge while more remains.
   ---------------------------------------------------------------------- */
@media (max-width:860px){
  .rb-nav{position:relative;gap:8px;padding:2px 0 6px;
    scroll-snap-type:x proximity;scroll-padding-left:16px;
    -webkit-overflow-scrolling:touch}
  .rb-nav a{scroll-snap-align:start;min-height:40px;padding:9px 14px;
    border-radius:100px;background:var(--band);border:1px solid var(--line);
    justify-content:center;font-size:13.5px;line-height:1.2}
  .rb-nav a:first-child{background:var(--hot-soft);border-color:#F3D3E1;color:var(--hot-2)}
  /* the row bleeds to the viewport edges so the cut-off pill reads as "more" */
  .rb-head__in > .rb-nav{width:calc(100% + 32px);margin-left:-16px;
    padding-left:16px;padding-right:16px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
}

/* -------------------------------------------------------------------------
   4. MINIMUM TYPE SIZES.
   Eight distinct rules were rendering body text below 12px, which is under the
   point where it reads comfortably on a phone held at arm's length. The nav
   sublabels were the worst at 9.5px. Nothing is hidden - everything is simply
   set to a size that can be read.
   ---------------------------------------------------------------------- */
.rb-nav small{font-size:11px;letter-spacing:.08em}
.rb-eyebrow{font-size:12px;letter-spacing:.11em}
.rb-rev__w{font-size:12.5px}
.rb-foot__bar{font-size:12.5px}
.rb-foot .rb-pay span{font-size:10.5px;padding:5px 8px}
.rb-pay__lab{font-size:11.5px}
.rb-pay__marks i,.rb-pay__marks span{font-size:11px}
/* homepage tile captions were 11px */
.rb-tile p,.rb-tile__sub,.rb-o p{font-size:12.5px;line-height:1.5}
.rb-hub span,.rb-tile span{font-size:12.5px}

/* -------------------------------------------------------------------------
   5. CONTRAST FAILURES OUTSIDE THE REBUILT PAGES.
   The legacy Tailwind palette carries three colours that miss WCAG AA on the
   text sizes they are used at. Measured ratios are in the comments.
   ---------------------------------------------------------------------- */
/* bag-size picker sublabel, #6B7280 on white = 4.21 */
.bag-size-btn .desc,.bag-size-btn span.desc{color:#4B5563}
/* email and phone links, #DB2777 on white = 4.28 */
.text-pink-600,a.text-pink-600{color:#BE185D}
/* "Out of stock" flag, 3.95 at 12px */
.product-card p.font-body.text-xs,.stock.out-of-stock{color:#B3261E}

/* -------------------------------------------------------------------------
   6. READING MEASURE ON THE PAGES THAT ARE STILL LEGACY MARKUP.
   /guides/, /pick-mix/ and /shop/ carry intro paragraphs at 85-90 characters
   per line against a comfortable 45-75. The rebuilt pages were capped last
   round; these were not, because they do not use .rb-lead.
   ---------------------------------------------------------------------- */
.page-hero p,.hero-section p,
p.font-body.text-xl,p.font-body.text-lg{max-width:66ch;margin-left:auto;margin-right:auto}
.guides-intro p,.pick-mix-intro p{max-width:68ch}

/* -------------------------------------------------------------------------
   7. HEADINGS THAT WERE CUTTING THEIR OWN TEXT OFF.
   /bulk-buy/ sets product names at 24px with line-clamp:2 inside a fixed-height
   card, so five of the first eight names lost their tail - "balls BLACK EXTREME
   SOUR SWEETS (V)" is not a product anyone can search for. 24px is also too
   large for a name in a list card on a phone. Smaller type plus a third line
   fits the full name in the same space.
   ---------------------------------------------------------------------- */
.rb-bulk__name{font-size:19px;line-height:1.3;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(2 * 1.3em)}
@media (max-width:767px){ .rb-bulk__name{font-size:17px} }

/* pick & mix picker: names were 12.5px clamped to two lines, so 17 of the
   visible sweets lost the end of their name - including the weight, which is
   the one thing a picker needs to show. */
/* .rb .sweet-card h3 above already carries this at (0,2,1); the class exists so
   the intent is readable in the markup. */
.sweet-card__name{-webkit-line-clamp:3}

/* -------------------------------------------------------------------------
   8. /bulk-buy/ FILTER BAR PUSHED THE PAGE 19px WIDE ON MOBILE.
   A <select> inside a flex label has an intrinsic minimum width that ignores
   the container. Selects now stop at the container edge and the labels stack.
   ---------------------------------------------------------------------- */
.rb select,select.px-4,.bulk-filters select{max-width:100%;min-width:0}
@media (max-width:640px){
  .bulk-filters,.bulk-filters > div{flex-wrap:wrap}
  .bulk-filters label,label.flex.items-center{flex:1 1 100%;min-width:0}
  .bulk-filters label select,label.flex.items-center > select{flex:1 1 auto;width:100%}
}

/* -------------------------------------------------------------------------
   9. TAP TARGETS UNDER 40px ON TOUCH DEVICES.
   "See all best sellers" and friends were 21px tall; the mini-cart's remove
   control and the upsell buttons were 23-28px. Padding only - nothing moves.
   ---------------------------------------------------------------------- */
@media (hover:none){
  .rb-more{display:inline-flex;align-items:center;min-height:40px;padding:6px 0}
  .rb-foot a{display:inline-block;padding:4px 0}
  #side-cart .add_to_cart_button,#side-cart a.button{min-height:40px;
    display:inline-flex;align-items:center;justify-content:center}
  .woocommerce-mini-cart a.remove{width:26px;height:26px;line-height:26px;
    font-size:18px;text-align:center}
  .restore-item,a.restore-item{display:inline-block;padding:9px 0}
}

/* -------------------------------------------------------------------------
   10. THE LOGGED-OUT ACCOUNT PAGE HAD NO H1 (measured h1 count: 0).
   form-login.php now carries one; this is its styling.
   ---------------------------------------------------------------------- */
.rb-acc__h1{font-family:var(--head,inherit);font-size:clamp(26px,4vw,36px);
  font-weight:800;line-height:1.15;margin:0 0 8px;color:var(--ink,#241A1F)}
.rb-acc__lede{max-width:56ch;margin:0 0 26px;font-size:15.5px;line-height:1.6;
  color:var(--ink-2,#5A4A52)}

/* -------------------------------------------------------------------------
   11. SECTION RHYTHM ON A PHONE.
   Several rebuilt sections carried desktop padding straight down to 375px,
   which left blocks touching. A consistent step keeps the page breathing
   without changing anything about the desktop layout.
   ---------------------------------------------------------------------- */
@media (max-width:620px){
  .rb-sec{padding-top:38px;padding-bottom:38px}
  .rb-sec--tight{padding-top:26px;padding-bottom:26px}
  .rb-h2{margin-bottom:6px}
  .rb-h2 + .rb-lead{margin-top:8px;margin-bottom:20px}
  .rb-wrap{padding-left:16px;padding-right:16px}
}

/* =========================================================================
   ROUND THREE - the items the second measured pass turned up.
   ====================================================================== */

/* The footer payment chips are styled by `.rb-pay span{font-size:9px}` (0,2,0).
   The product page reuses .rb-pay for its own "SECURE CHECKOUT" block, whose
   label is a <span class="rb-pay__lab"> - (0,1,0), so the footer rule won for
   it and the label rendered at 9px. Scoping the footer rule to the footer. */
.rb-foot .rb-pay span{font-size:10.5px}
.rb-pay .rb-pay__lab{font-size:11.5px}
.rb-pay .rb-pay__marks{font-size:11px}
.rb-pay .rb-pay__marks i{font-size:11px;padding:4px 8px}

/* Side-cart upsell names: replaces the `truncate` utility (see side-cart.php). */
.rb-upsell__name{font-size:12.5px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Category head count line ran to 655px of a single sentence. */
.rb-hub-head__count{max-width:60ch}

/* WooCommerce notices ("There are some issues with the items in your cart")
   ran the full 1120px container. */
.woocommerce-error li,.woocommerce-message,.woocommerce-info,
.woocommerce-notices-wrapper p,div.woocommerce > p{max-width:74ch}

/* -------------------------------------------------------------------------
   THE LOGIN FORM WAS 1110px WIDE.
   Account registration is off (matching production), so form-login.php skips
   its two-column grid and the single login panel stretched the full 1152px
   container - a password field over a metre wide on a large monitor, with the
   label, the field and the button strung out across empty space. Capped to a
   normal form measure and centred. Nothing is hidden or moved.
   ---------------------------------------------------------------------- */
.woocommerce-login-wrapper:not(:has(#customer_login)){max-width:560px}
.woocommerce-login-wrapper .form-group input[type=text],
.woocommerce-login-wrapper .form-group input[type=email],
.woocommerce-login-wrapper .form-group input[type=password]{max-width:100%}
.rb-acc__h1,.rb-acc__lede{text-align:left}

/* Last two below the 12px floor / above the measure ceiling. */
.rb-feat__i span{font-size:12.5px}
p.woocommerce-verification-required,.woocommerce-verification-required{max-width:72ch}

/* -------------------------------------------------------------------------
   MEASURE ON THE REMAINING LEGACY TEMPLATES.
   The legal pages run body copy at 108 characters per line across 864px, over
   22 paragraphs - the longest measure anywhere on the site, on the pages a
   reader is least willing to work at. /bulk-buy/ intro copy is the same problem
   at 85. Both are capped in ch so the cap tracks the font size.
   ---------------------------------------------------------------------- */
.legal-content p,.legal-content li,
.prose p,.prose li,
p.text-gray-700,p.text-gray-600{max-width:72ch}
.bulk-intro p,p.text-lg.text-center{max-width:66ch;margin-left:auto;margin-right:auto}

/* -------------------------------------------------------------------------
   THE 404 PAGE PACKED FOUR PRODUCT CARDS INTO A 592px COLUMN.
   404.php renders "Popular products" inside `.error-404.max-w-2xl`, but the
   loop grid keeps its `lg:grid-cols-4`, so each card came out 136px wide with
   24px of padding - 88px of usable width, which is narrower than most product
   names. Titles broke out of the card and were clipped. This matters more than
   a 404 page usually would: the SEO migration points 5,090 retired URLs at
   this template. Two columns, less padding, and names that wrap.
   ---------------------------------------------------------------------- */
.error-404 ul.products.grid,
.error-404 .products.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px}
.error-404 .product-card .product-info{padding:16px}
.product-card .product-title,
.product-card .product-title a{overflow-wrap:anywhere;word-break:break-word}

/* Callout paragraphs on the policy pages ran the full 1008px container. */
.bg-blue-50 p,.bg-green-50 p,.bg-yellow-50 p,.bg-amber-50 p{max-width:76ch}
/* Lead paragraphs at 20px want a shorter measure than 16px body copy. */
p.text-xl.text-gray-600,p.text-xl.text-gray-700{max-width:62ch;margin-left:auto;margin-right:auto}

/* =========================================================================
   ENFORCED DESIGN SCALE
   Auditing the rendered pages rather than the stylesheet showed how far the
   design had drifted. Measured across the live templates:

     border radius   7, 8, 9, 10, 11, 12 and 16px - six values, several of
                     them 1px apart, which is why adjacent cards read as
                     subtly mismatched rather than obviously wrong
     section h2      20, 24, 26, 29, 30 and 48px across the site
     section padding 0, 18, 26/34, 44, 48, 52, 56/60 and 80px
     fonts           Fraunces + Poppins everywhere, plus Fredoka on /shop/

   Three radii, three heading steps, one section rhythm, two fonts. Everything
   below is a mapping onto that scale - no component changes shape or moves.
   ====================================================================== */

:root{
  --r-ctl:8px;    /* buttons, inputs, quantity, small pills, thumbnails      */
  --r:12px;       /* cards, panels, notes, accordion rows, product tiles     */
  --r-lg:16px;    /* media wells and the large panels that frame them        */
}

/* ---- controls: everything that measured 7px or 9px ---------------------- */
.rb .rb-btn,.rb .rb-btn--out,.rb .rb-sub,.rb .rb-pill,.rb .rb-mix__thumb,
.rb .rb-rung,.rb .rb-atc,.rb .rb-foot__brand,
.rb .quantity,.rb .quantity input.qty,
.rb button.single_add_to_cart_button,
.rb input[type=text],.rb input[type=email],.rb input[type=search],
.rb input[type=number],.rb input[type=password],.rb select,.rb textarea,
#side-cart .button,#side-cart a.button,#side-cart .add_to_cart_button,
.rb #checkout-btn,.rb #clear-mix-btn{border-radius:var(--r-ctl)!important}

/* ---- cards: everything that measured 10px or 11px ----------------------- */
.rb .rb-faq__i,.rb .rb-p,.rb .rb-hub,.rb .rb-guide,.rb .rb-panel,.rb .rb-o,
.rb .rb-tile,.rb .rb-note,.rb .rb-eta,.rb .rb-onesize,.rb .rb-size,
.rb .rb-atglance,.rb .rb-rev-empty,.rb .sweet-card,.rb .bag-size-btn,
.rb .product-card,.rb .woocommerce-noreviews{border-radius:var(--r)}
@media (max-width:900px){
  .rb .rb-panel{border-radius:var(--r)}
}

/* ---- media: the gallery image was 16px inside a 12px well, so its corners
        sat proud of the frame that was meant to contain them -------------- */
.rb .rb-pdp__media{border-radius:var(--r-lg);overflow:hidden}
.rb .rb-pdp__media img.wp-post-image,
.rb .rb-pdp__media .woocommerce-product-gallery__image,
.rb .rb-pdp__media .woocommerce-product-gallery__image img{
  border-radius:calc(var(--r-lg) - 4px)}

/* ---- section rhythm: one value, top and bottom -------------------------- */
.rb .rb-sec,
.rb .rb-sec--white,.rb .rb-sec--band,
.rb .rb-sec--sunk,.rb .rb-sec--dark{padding-top:52px;padding-bottom:52px}
.rb .rb-sec--tight{padding-top:18px;padding-bottom:0}
@media (max-width:620px){
  .rb .rb-sec,.rb .rb-sec--white,.rb .rb-sec--band,
  .rb .rb-sec--sunk,.rb .rb-sec--dark{padding-top:38px;padding-bottom:38px}
  .rb .rb-sec--tight{padding-top:26px;padding-bottom:0}
}

/* ---- headings: three steps, and nothing between them -------------------
   1. Page section  - `.rb-h2`, clamp(21 - 29px)
   2. Article section - headings inside a prose block, one clear step down
   3. Panel title   - headings inside a bordered card

   The drift was: WooCommerce's own reviews title rendering at 48px, larger
   than the section heading above it; hub-copy headings at 26px and pick & mix
   step headings at 24px, both close enough to the 29px section scale to read
   as a mistake rather than a level; and two on the homepage hard-coded to 30px
   where the token gives 29. */
.rb h2.woocommerce-Reviews-title{font-family:var(--disp);
  font-size:clamp(21px,2.5vw,29px);color:var(--ink);line-height:1.15;
  letter-spacing:-.01em;margin:0 0 14px}
.rb .rb-hubcopy h2,.rb .rb-prose h2,
.rb h2.font-heading.text-2xl{font-family:var(--disp);font-size:23px;
  color:var(--ink);line-height:1.2;letter-spacing:-.005em}
.rb .rb-panel > h2,.rb .rb-panel > h3,
.rb .rb-atglance h2,.rb .rb-atglance h3{font-size:20px}

/* The shop's result count is a <p> now (see archive-product.php). */
.rb .rb-resultcount,.rb .woocommerce-result-count{font-family:var(--body);
  font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:0;margin:0}

/* ---- fonts: /shop/ was pulling Fredoka in, for prices only -------------- */
.rb .woocommerce-Price-amount,
.rb .woocommerce-Price-amount bdi,
.rb .woocommerce-Price-currencySymbol,
.rb .price,.rb .price bdi,.rb .price span{font-family:var(--disp)}

/* /shop/ is still legacy markup, so it does not carry .rb-sec. Its content
   band was 48px where the rest of the site is 52. */
.rb section.shop-content{padding-top:52px;padding-bottom:52px}
@media (max-width:620px){ .rb section.shop-content{padding-top:38px;padding-bottom:38px} }

/* The three legacy templates (about, contact, FAQ) now sit in a .rb-wrap and a
   <main>; this is the vertical rhythm they lost with `py-12`. */
.rb .rb-legacy{padding-top:52px;padding-bottom:52px}
@media (max-width:620px){ .rb .rb-legacy{padding-top:38px;padding-bottom:38px} }

/* -------------------------------------------------------------------------
   The three legacy templates build their cards from Tailwind's `rounded-lg`
   (8px), so every card on /about-us/, /contact-us/ and /faqs/ had a different
   corner from every card on the rest of the site. Panels onto the card token;
   controls stay on the control token.
   ---------------------------------------------------------------------- */
.rb .rb-legacy [class*="rounded-lg"],
.rb .rb-legacy [class*="rounded-xl"],
.rb .rb-legacy [class*="rounded-2xl"]{border-radius:var(--r)}
.rb .rb-legacy a[class*="rounded"],
.rb .rb-legacy button[class*="rounded"],
.rb .rb-legacy input[class*="rounded"],
.rb .rb-legacy select[class*="rounded"],
.rb .rb-legacy textarea[class*="rounded"]{border-radius:var(--r-ctl)}
.rb .rb-legacy [class*="rounded-full"]{border-radius:100px}

/* `.rb main h3` flattens every h3 to 19px, which is right for a card title but
   turns the stat figures on /about-us/ ("2000+", "12", "5000+") into the same
   size as the label underneath them. They are the point of that row. */
.rb .rb-legacy .stat-figure,
.rb .rb-legacy [class*="grid"] > div > h3[class*="text-2xl"]{font-size:34px;line-height:1.1}

/* =========================================================================
   SHOP ARCHIVE
   The sidebar + grid layout for the rebuilt /shop/. Every hook the filter JS
   binds to is unchanged; this is presentation only.
   ====================================================================== */

.rb-shop{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
.rb-shop__side{display:flex;flex-direction:column;gap:14px;position:sticky;top:18px}
.rb-shop__main{min-width:0}

/* ---- one filter panel ---- */
.rb-fset{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 16px 16px;box-shadow:var(--sh-1)}
.rb-fset__h{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 11px}
.rb-fset__quick,.rb-fset__presets{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.rb-fbtn{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--ink);
  background:var(--band);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:9px 10px;cursor:pointer;text-align:center;line-height:1.25;
  transition:background .15s,border-color .15s,color .15s}
.rb-fbtn:hover{background:var(--hot-soft);border-color:#F3D3E1;color:var(--hot-2)}
.rb-fbtn.active{background:var(--hot);border-color:var(--hot);color:#fff}

/* ---- checkbox rows ---- */
.rb-fset__list{display:flex;flex-direction:column;gap:1px}
.rb-fset__list--scroll{max-height:236px;overflow-y:auto;margin-right:-6px;padding-right:6px}
.rb-fopt{display:flex;align-items:center;gap:9px;padding:7px 8px;margin:0 -8px;
  border-radius:var(--r-ctl);cursor:pointer;min-height:36px}
.rb-fopt:hover{background:var(--band)}
.rb-fopt input{width:15px;height:15px;flex:none;accent-color:var(--hot);margin:0;cursor:pointer}
.rb-fopt__n{flex:1;min-width:0;font-size:13px;color:var(--ink);line-height:1.3}
.rb-fopt__c{font-style:normal;font-size:11.5px;color:var(--ink-3);flex:none;
  font-variant-numeric:tabular-nums}
.rb-fset__empty{font-size:13px;color:var(--ink-3);margin:0}

/* ---- price inputs ---- */
.rb-fset__price{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rb-fset__price input{width:100%;min-width:0;font-family:var(--body);font-size:13px;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--card);color:var(--ink)}
.rb-fset__price input:focus{outline:2px solid var(--hot);outline-offset:-1px;border-color:var(--hot)}
.rb-fset__price span{font-size:12.5px;color:var(--ink-3);flex:none}
.rb-fset__clear{width:100%;justify-content:center;text-align:center}

/* ---- the bar above the grid ---- */
.rb-shopbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.rb-shopbar__ctl{display:flex;align-items:center;gap:10px}
.rb-shopbar .woocommerce-ordering{margin:0}
.rb-shopbar select,.rb-shopbar .orderby{font-family:var(--body);font-size:13px;
  padding:9px 30px 9px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--card);color:var(--ink);min-height:38px}
.rb-viewtog{display:flex;gap:4px}
.rb-viewtog .view-btn{width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);
  color:var(--ink-3);cursor:pointer;padding:0}
.rb-viewtog .view-btn svg{width:16px;height:16px}
.rb-viewtog .view-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.rb-viewtog .view-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- list view, which the toggle switches the grid into ---- */
.rb-shop__main .rb-grid.list-view{grid-template-columns:1fr}
.rb-shop__main .rb-grid.list-view .rb-p{flex-direction:row;align-items:stretch}
.rb-shop__main .rb-grid.list-view .rb-p__img{width:150px;flex:none}

/* ---- mobile: the sidebar collapses behind a toggle ---- */
.rb-shop__toggle{display:none}
@media (max-width:900px){
  .rb-shop{grid-template-columns:1fr;gap:0}
  .rb-shop__toggle{display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:46px;padding:11px 15px;margin-bottom:14px;
    font-family:var(--body);font-size:14px;font-weight:700;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-ctl);
    box-shadow:var(--sh-1);cursor:pointer}
  .rb-shop__toggle svg{width:18px;height:18px;color:var(--ink-3);transition:transform .18s}
  .rb-shop__toggle.is-open svg{transform:rotate(180deg)}
  .rb-shop__side{display:none;position:static;margin-bottom:18px}
  .rb-shop__side.is-open{display:flex}
  .rb-shopbar{flex-direction:column;align-items:flex-start;gap:12px}
  .rb-shopbar__ctl{width:100%}
  .rb-shopbar select,.rb-shopbar .orderby{flex:1;min-width:0}
}

/* ---- out of stock, on the shared card ---- */
.rb-buy--out{display:flex;align-items:center;gap:10px;justify-content:space-between}
.rb-p__oos{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 9px;
  border-radius:100px;background:#FBEAEA;color:#A32020;white-space:nowrap}
.rb-atc--ghost{background:transparent!important;color:var(--ink-2)!important;
  border:1px solid var(--line)!important;text-decoration:none;display:inline-flex;
  align-items:center;justify-content:center}
.rb-atc--ghost:hover{border-color:var(--ink-3)!important;color:var(--ink)!important}

/* Empty state for the shop filters, and the AJAX pagination wrapper. */
.rb-empty{text-align:center;padding:56px 20px}
.rb-empty .rb-h2{margin:0 0 8px}
.rb-empty .rb-sub{margin:0 0 20px;color:var(--ink-2)}
.rb-pag__wrap{margin-top:34px;display:flex;justify-content:center}

/* =========================================================================
   GUIDES HUB - topic clusters
   The hub was a flat 4x3 grid of identical cards. These are the bands that
   replace it: a hero with a contents list, then one section per cluster with
   its guides and the categories it sells against.
   ====================================================================== */

.rb-guidehero{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start}
.rb-guidehero__copy{min-width:0}
.rb-guidehero .rb-doc__h1{margin:0 0 10px}
.rb-guidehero .rb-doc__lede{margin:0}
.rb-guidehero__toc{display:flex;flex-direction:column;gap:2px;padding:16px 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1)}
.rb-guidehero__toc b{font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.rb-guidehero__toc a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;margin:0 -10px;border-radius:var(--r-ctl);font-size:13.5px;
  font-weight:600;color:var(--ink);text-decoration:none;min-height:36px}
.rb-guidehero__toc a:hover{background:var(--band);color:var(--hot-2)}
.rb-guidehero__toc em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ink-3);
  background:var(--band);border-radius:100px;padding:2px 8px;flex:none}
.rb-guidehero__toc a:hover em{background:var(--card)}

/* ---- one cluster band ---- */
.rb-cluster__head{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start;
  margin-bottom:24px}
.rb-cluster__head > div:first-child{min-width:0}
.rb-cluster__head .rb-h2{margin:6px 0 8px}
.rb-cluster__head .rb-lead{margin:0;max-width:56ch}
.rb-cluster__shop{padding-top:4px}
.rb-cluster__shop b{display:block;font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.rb-cluster__shop .rb-chips{gap:7px}

@media (max-width:1000px){
  .rb-guidehero,.rb-cluster__head{grid-template-columns:1fr;gap:22px}
  .rb-guidehero__toc{order:2}
}
@media (max-width:620px){
  .rb-guidehero{gap:18px}
  .rb-cluster__head{margin-bottom:18px}
}

/* Guides hub + section pillars, additions for the section structure. */
.rb-guidehero__count{margin:10px 0 0;font-size:13px;font-weight:600;color:var(--ink-3);
  letter-spacing:.02em}
.rb-cluster__head .rb-h2 a{color:inherit;text-decoration:none}
.rb-cluster__head .rb-h2 a:hover{color:var(--hot-2);text-decoration:underline;text-underline-offset:3px}
.rb-cluster__head .rb-btn{margin-top:16px}
.rb-cluster__more{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:18px}
.rb-cluster__more .rb-h2{margin:0}
@media (max-width:620px){
  .rb-cluster__more{gap:6px}
}

/* =========================================================================
   HEADER - primary nav + category shortcut row
   Replaces the trust bar that sat under the header and largely repeated the
   utility strip above it. The shortcut row is deliberately darker than the
   reference: on a cream site a near-white band under a white header reads as
   an accident, so this one is a genuinely recessed shelf.
   ====================================================================== */

/* ---- primary nav, now single-line labels ---- */
.rb-nav a{flex-direction:row;align-items:center;gap:0;font-size:15px;font-weight:600;
  padding:9px 2px;border-radius:var(--r-ctl);white-space:nowrap}
.rb-nav__cta{gap:8px!important;padding:9px 15px!important;background:var(--hot-soft);
  color:var(--hot-2);border:1px solid #F6DAE6}
.rb-nav__cta svg{width:17px;height:17px;flex:none}
.rb-nav__cta:hover{background:var(--hot);border-color:var(--hot);color:#fff}
.rb-nav__quiet{color:var(--ink-2);text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:5px;text-decoration-color:var(--line)}
.rb-nav__quiet:hover{color:var(--hot);text-decoration-color:currentColor}

/* ---- the shaded shelf ---- */
.rb-shortcuts{
  background:linear-gradient(180deg, var(--sand) 0%, #EADBC7 100%);
  border-top:1px solid rgba(120,86,54,.14);
  border-bottom:1px solid rgba(120,86,54,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(60,35,20,.06)}
/* The scroll guard belongs on the BASE rule, not only under 1180px. Above
   that the wrap is capped at 1180 while the viewport keeps growing, so the
   eight shortcuts still overflowed it - at 1280 the last one sat 87px off
   the right of the screen and dragged the whole page into a horizontal
   scroll. With content wider than the container there is no free space to
   distribute, so space-between degrades to flex-start and it simply scrolls. */
.rb-shortcuts__in{display:flex;align-items:center;justify-content:space-between;
  gap:2px;padding:0;min-width:0;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.rb-shortcuts__in::-webkit-scrollbar{display:none}
.rb-shortcuts__sep{width:1px;height:20px;background:rgba(120,86,54,.2);flex:none}
.rb-shortcut{display:flex;align-items:center;gap:9px;padding:12px 14px;flex:none;
  font-size:13.5px;font-weight:600;color:#4A3524;text-decoration:none;
  white-space:nowrap;border-radius:var(--r-ctl);min-height:44px;
  transition:background .15s,color .15s}
.rb-shortcut svg{width:19px;height:19px;flex:none;color:var(--hot);opacity:.9}
.rb-shortcut:hover{background:rgba(255,255,255,.62);color:var(--hot-2)}
.rb-shortcut:hover svg{opacity:1}

/* ---- responsive: the shelf scrolls rather than dropping links ---- */
@media (max-width:1180px){
  .rb-shortcut{padding:12px 10px;font-size:13px;gap:7px}
  .rb-shortcut svg{width:17px;height:17px}
}
/* Raised from 1000px: the eight shortcuts stop fitting at about 1100, and at
   1050 the last one hung 5px outside the viewport. */
@media (max-width:1180px){
  .rb-shortcuts__in{justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x proximity;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    width:calc(100% + 32px);margin-left:-16px;padding-left:16px;padding-right:16px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .rb-shortcuts__in::-webkit-scrollbar{display:none}
  .rb-shortcut{scroll-snap-align:start;flex:none}
}
@media (max-width:620px){
  .rb-shortcut{padding:11px 12px;font-size:13px}
  .rb-shortcuts__sep{height:18px}
}

/* Simplifying the nav to single-line 15px labels made the header row wider than
   it used to be, so the point at which it can no longer share a line with the
   logo and the actions moved up: at 900px the action icons hung 23px outside
   the viewport. The nav now drops to its own row at 1000px instead of 860px,
   and tightens between 1000 and 1180 rather than waiting to break. */
@media (max-width:1180px){
  .rb-nav{gap:16px}
  .rb-nav a{font-size:14px}
  .rb-nav__cta{padding:8px 12px!important}
}
@media (max-width:1000px){
  .rb-head__in{flex-wrap:wrap;min-height:0;padding:12px 0;gap:10px 16px}
  .rb-head__act{margin-left:auto}
  .rb-nav{order:3;width:100%;gap:8px;overflow-x:auto;padding:2px 0 6px;
    scrollbar-width:none;-ms-overflow-style:none}
  .rb-nav::-webkit-scrollbar{display:none}
}

/* ---- header action controls (were bare, unclickable SVGs) ---- */
.rb-act{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-ctl);border:0;background:none;
  color:var(--ink-2);cursor:pointer;padding:0;text-decoration:none;
  transition:background .15s,color .15s}
.rb-act:hover{background:var(--band);color:var(--hot)}
.rb-act svg{width:21px;height:21px}
.rb-act:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

/* ---- the search panel the magnifier opens ---- */
.rb-search{background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(60,35,20,.07)}
.rb-search[hidden]{display:none}
.rb-search__form{display:flex;align-items:center;gap:10px;padding:14px 0;position:relative}
.rb-search__form > svg{width:20px;height:20px;color:var(--ink-3);flex:none}
.rb-search__form input[type=search]{flex:1;min-width:0;font-family:var(--body);
  font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--band);color:var(--ink);min-height:46px}
.rb-search__form input[type=search]:focus{outline:2px solid var(--hot);outline-offset:-1px;
  background:var(--card)}
.rb-search__form .rb-btn{flex:none;min-height:46px}
.rb-search__close{flex:none;width:40px;height:40px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;border-radius:var(--r-ctl)}
.rb-search__close:hover{background:var(--band);color:var(--ink)}
@media (max-width:620px){
  .rb-search__form .rb-btn{display:none}
  .rb-search__form > svg{display:none}
}

/* =========================================================================
   PRODUCT PAGE - container rhythm
   Measured at 1440: every section wrapper is 1180px wide except the FAQ and
   the reviews block, which are 840. So the page narrows by 340px twice on the
   way down and then widens again, which is what reads as "content, void,
   content, void" rather than one continuous page. The section padding is
   already 52px and is not the problem; the emptiness inside full-width
   containers is.
   ====================================================================== */

/* 1. One width down the whole page.
      .rb-wrap--narrow caps its children at 840px, which is right for a guide -
      that is a reading measure - and wrong for a product page, where the FAQ
      and the review panel are UI rather than prose. The text inside the FAQ
      keeps its own 72ch cap, so the answers stay readable while the cards fill
      the column. */
body.single-product .rb-wrap--narrow > *{max-width:none}

/* 2. Even 50/50 splits. About/At a glance was 1.55fr/1fr (664px + 429px of a
      1180px container) and Ingredients/Nutrition was 1.32fr/1fr (629 + 477),
      so both pairs left a ragged gap at the right-hand edge and neither card
      filled its half. */
/* Desktop only. Appended after the existing max-width media queries, an
   unscoped rule here overrides them and the 50/50 split follows the page down
   to 375px - which squashed both columns to 153px and pushed the document
   314px wider than the viewport. */
@media (min-width:901px){
  .rb-pdp__about,
  .rb-pdp__facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* 3. Related products were 179px across six columns - small cards in a wide
      field, which is most of the "floating" feeling. Four across at ~275px
      gives them the presence they should have. */
body.single-product .rb-grid--rail{grid-template-columns:repeat(4,minmax(0,1fr))}

/* 4. The two merchandising rails sit in one section already; this stops the
      divider between them reading as a section break. */
.rb-xsell{margin-top:34px;padding-top:28px}

/* 5. About and At a glance belong together, so the gap between that block and
      the ingredients block tightens rather than resetting. */
.rb-sec + .rb-sec .rb-pdp__facts{margin-top:0}
body.single-product .rb-sec{padding-top:46px;padding-bottom:46px}

@media (max-width:1100px){
  body.single-product .rb-grid--rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  /* below here the rail rule takes over again and it scrolls sideways */
  body.single-product .rb-grid--rail{grid-template-columns:none}
}

/* ---- ladder: the saving each larger bag represents ---- */
.rb-rung s{display:block;text-decoration:none;font-size:11px;font-weight:700;
  letter-spacing:.02em;color:var(--star,#2E7D4F);margin-top:3px}
.rb-rung.is-on s{color:var(--hot-2)}

/* ---- merchandising: the two rails side by side, as in the render ----
   Stacked, these were the tallest thing on the page at 1,548px. Side by side
   they are half that, and the section stops reading as two separate visits. */
@media (min-width:1001px){
  .rb-merch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px,3vw,44px);align-items:start}
  .rb-merch .rb-xsell{margin-top:0;padding-top:0;border-top:0}
  body.single-product .rb-merch .rb-grid--rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb-merch .rb-pdp__more{margin-top:16px}
}

/* ---- FAQ in two columns on the product page, as in the render ----
   Six questions in a single 1,180px column is a lot of vertical travel for
   what are mostly one-line answers. */
@media (min-width:1001px){
  body.single-product .rb-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px 18px;align-items:start;max-width:none!important}
  /* the wrapper caps its children at 840px, which is a reading measure and
     wrong for a two-column FAQ grid */
  body.single-product .rb-wrap--narrow > *{max-width:none!important}
}

@media (max-width:1000px) and (min-width:761px){
  body.single-product .rb-merch .rb-grid--rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =========================================================================
   GUIDES HUB - section rows
   Each section is an identity column on the left (icon, label, title, route in)
   and its guides on the right, rather than a heading with a grid underneath.
   Halves the vertical travel and makes the topic boundaries visible.
   ====================================================================== */

.rb-gsec + .rb-gsec{border-top:1px solid var(--line)}
.rb-gsec__in{display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start}

.rb-gsec__id{min-width:0}
.rb-gsec__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--hot-soft);color:var(--hot);margin-bottom:14px}
.rb-gsec__icon svg{width:22px;height:22px}
.rb-gsec__id .rb-h2{margin:6px 0 10px;font-size:clamp(21px,2.2vw,26px)}
.rb-gsec__id .rb-h2 a{color:inherit;text-decoration:none}
.rb-gsec__id .rb-h2 a:hover{color:var(--hot-2)}
.rb-gsec__id > p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:38ch}

.rb-gsec__body{min-width:0}
.rb-gsec__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.rb-chips--sm .rb-chip{padding:6px 12px;font-size:12.5px;min-height:32px}

/* ---- the guide cards ---- */
.rb-gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.rb-gcard{display:flex;flex-direction:column;gap:8px;padding:17px 18px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;box-shadow:var(--sh-1);
  transition:border-color .16s,box-shadow .16s,transform .16s}
.rb-gcard:hover{border-color:var(--hot);box-shadow:var(--sh-2);transform:translateY(-2px)}
.rb-gcard b{font-family:var(--disp,var(--body));font-size:15px;font-weight:700;line-height:1.3;
  color:var(--ink)}
.rb-gcard span{font-size:13px;line-height:1.55;color:var(--ink-2);flex:1}
.rb-gcard em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--hot);margin-top:2px}

/* ---- the closing help prompt ---- */
.rb-gcta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:22px 26px;border-radius:var(--r);background:var(--hot-soft);
  border:1px solid #F6DAE6}
.rb-gcta__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--card);color:var(--hot);flex:none}
.rb-gcta__icon svg{width:21px;height:21px}
.rb-gcta > div{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.rb-gcta b{font-size:16px;color:var(--ink)}
.rb-gcta span{font-size:14px;color:var(--ink-2);line-height:1.5}

@media (max-width:1000px){
  .rb-gsec__in{grid-template-columns:1fr;gap:20px}
  .rb-gsec__id > p{max-width:60ch}
}
@media (max-width:620px){
  .rb-gcards{grid-template-columns:1fr}
  .rb-gsec__bar{gap:10px}
  .rb-gcta{padding:18px 18px;gap:14px}
}

/* The related block has no wrapper of its own in the template, so .rb-merch was
   receiving four direct children - heading, grid, button, cross-sell - and the
   two-column grid dealt them alternately into the left and right tracks. That
   is why the heading sat on its own beside the cards. Both halves are explicit
   columns now, and the grid only ever sees two children. */
.rb-merch > .rb-merch__col,
.rb-merch > .rb-xsell{min-width:0;display:flex;flex-direction:column}
.rb-merch__col .rb-pdp__more{margin-top:auto;padding-top:16px}

/* =========================================================================
   ALLERGEN BADGES
   Was a row of plain text pills. This is the icon treatment from the render:
   a circular outline mark per item with the label beneath it, in three states -
   contains, may contain, and free from.
   ====================================================================== */
.rb-alg{display:flex;flex-wrap:wrap;gap:8px 4px;margin:14px 0 4px;align-items:flex-start}
.rb-alg__i{display:flex;flex-direction:column;align-items:center;gap:8px;
  width:104px;text-align:center;padding:4px 2px}
.rb-alg__i i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1.5px solid currentColor;flex:none}
.rb-alg__i i svg{width:22px;height:22px}
.rb-alg__i b{font-family:var(--body);font-size:11.5px;font-weight:600;line-height:1.3;
  color:var(--ink-2);letter-spacing:0}

/* contains - the one to actually notice */
.rb-alg__i--has{color:var(--hot)}
.rb-alg__i--has b{color:var(--ink)}
/* may contain - a caution, not a warning */
.rb-alg__i--may{color:#B0873A}
/* free from - only shown where the category evidences the claim */
.rb-alg__i--free{color:#2E7D4F}

.rb-alg__note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3);
  max-width:60ch}

@media (max-width:520px){
  .rb-alg__i{width:88px}
  .rb-alg__i i{width:40px;height:40px}
  .rb-alg__i i svg{width:19px;height:19px}
  .rb-alg__i b{font-size:11px}
}

/* ---- category index (/all-categories/) ---- */
.rb-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.rb-cat{display:flex;flex-direction:column;gap:6px;padding:16px 17px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;box-shadow:var(--sh-1);min-height:104px;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.rb-cat:hover{border-color:var(--hot);box-shadow:var(--sh-2);transform:translateY(-2px)}
.rb-cat__n{font-family:var(--disp,var(--body));font-size:15.5px;font-weight:700;
  line-height:1.25;color:var(--ink)}
.rb-cat__d{font-size:12.5px;line-height:1.5;color:var(--ink-2);flex:1}
.rb-cat__c{font-style:normal;font-size:11.5px;font-weight:700;color:var(--hot);
  font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .rb-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rb-cat{padding:13px 13px 12px;min-height:0}
  .rb-cat__d{display:none}
}

/* ---- contact page ---- */
.rb-contact{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,46px);align-items:start}
.rb-contact__aside{display:flex;flex-direction:column;gap:14px}
.rb-form{display:flex;flex-direction:column;gap:16px}
.rb-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rb-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rb-field{display:flex;flex-direction:column;gap:6px}
.rb-field > span{font-size:13px;font-weight:600;color:var(--ink-2)}
.rb-field > span b{color:var(--hot);font-weight:600}
.rb-field > span small{font-weight:500;color:var(--ink-3);font-size:12px}
.rb-field input,.rb-field select,.rb-field textarea{
  font-family:var(--body);font-size:15px;padding:11px 13px;min-height:46px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--card);
  color:var(--ink);width:100%;box-sizing:border-box}
.rb-field textarea{min-height:130px;resize:vertical;line-height:1.55}
.rb-field input:focus,.rb-field select:focus,.rb-field textarea:focus{
  outline:2px solid var(--hot);outline-offset:-1px;border-color:var(--hot)}
.rb-form .rb-btn{align-self:flex-start;min-height:48px}
.rb-note--ok{background:#E7F3EC;border-color:#BFE0CC;color:#1F5C3A}
.rb-note--bad{background:#FBEAEA;border-color:#EFCACA;color:#8E2020}
.rb-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.rb-kv dt{font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.rb-kv dd{margin:0;font-size:14px;color:var(--ink);text-align:right}
.rb-kv dd a{color:var(--hot);text-decoration:none}
.rb-kv dd a:hover{text-decoration:underline}
@media (max-width:900px){
  .rb-contact{grid-template-columns:1fr}
}
@media (max-width:560px){
  .rb-form__row{grid-template-columns:1fr}
}

/* ---- about page ---- */
.rb-about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,48px);align-items:start}
.rb-about__aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:18px}
@media (max-width:900px){
  .rb-about{grid-template-columns:1fr}
  .rb-about__aside{position:static}
}

/* ---- cart page: map the legacy item cards onto the site's surface ---- */
.rb-cartpage .bg-white.rounded-2xl{background:var(--card)!important;
  border:1px solid var(--line)!important;border-radius:var(--r)!important;
  box-shadow:var(--sh-1)}
.rb-cartpage .bg-white.rounded-2xl:hover{border-color:var(--line)!important}
.rb-cartacts{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.rb-cartacts .rb-btn{flex:1;min-width:180px;justify-content:center;min-height:48px}
.rb-btn--quiet{background:var(--band)!important;color:var(--ink)!important;
  border:1px solid var(--line)!important}
.rb-btn--quiet:hover{background:var(--sand)!important;border-color:var(--ink-3)!important}
@media (max-width:560px){ .rb-cartacts .rb-btn{flex:1 1 100%} }

/* ---- account pages ---- */
.rb-account .woocommerce{max-width:none}
.rb-account .bg-gradient-to-b,.rb-account .bg-gradient-to-r{background-image:none!important}

/* =========================================================================
   LEGACY COMPONENT SURFACES - /bulk-buy/, /cart/, /my-account/
   These three pages render functional components (a filtered product grid, the
   cart line items with their quantity forms, and WooCommerce's account
   templates). Their markup is left alone on purpose: the bulk grid's filter JS
   binds to data-price / data-category on the cards, and the cart and account
   markup carries the forms that take money. Rewriting them to chase a class
   name is not worth the risk of breaking checkout.

   What is safe, and what actually makes them look like the rest of the site, is
   mapping their surfaces onto the design tokens.
   ====================================================================== */

.rb-bulkbody .bg-white,
.rb-cartpage .bg-white,
.rb-account .bg-white{background:var(--card)!important}

.rb-bulkbody [class*="rounded-2xl"],
.rb-bulkbody [class*="rounded-xl"],
.rb-cartpage [class*="rounded-2xl"],
.rb-cartpage [class*="rounded-xl"],
.rb-account [class*="rounded-2xl"],
.rb-account [class*="rounded-xl"]{border-radius:var(--r)!important}

/* the purple/pink borders and rings become the site's hairline */
.rb-bulkbody [class*="border-candy-purple"],
.rb-bulkbody [class*="border-purple"],
.rb-bulkbody [class*="border-pink"],
.rb-cartpage [class*="border-candy-purple"],
.rb-cartpage [class*="border-purple"],
.rb-cartpage [class*="border-pink"],
.rb-account [class*="border-candy-purple"],
.rb-account [class*="border-purple"],
.rb-account [class*="border-pink"]{border-color:var(--line)!important;border-width:1px!important}

/* no gradients on these three - they are utility pages, not the homepage */
.rb-bulkbody [class*="bg-gradient-to"],
.rb-cartpage [class*="bg-gradient-to"],
.rb-account [class*="bg-gradient-to"]{background-image:none!important}

/* headings back onto the type scale */
.rb-bulkbody h2,.rb-cartpage h2,.rb-account h2{font-family:var(--disp,var(--body));
  color:var(--ink);letter-spacing:-.01em}
.rb-bulkbody h3,.rb-cartpage h3,.rb-account h3{font-family:var(--disp,var(--body));
  color:var(--ink)}

/* the primary action on each page is the site's button, not a gradient pill */
.rb-cartpage .checkout-button,
.rb-cartpage a[href*="checkout"].bg-gradient-to-r,
.rb-account .woocommerce-Button,
.rb-account button[type=submit],
.rb-bulkbody a[class*="bg-bubblegum-pink"]{
  background:var(--hot)!important;color:#fff!important;border:0!important;
  border-radius:100px!important;font-family:var(--body)!important;font-weight:700!important;
  min-height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 26px!important}
.rb-cartpage .checkout-button:hover,
.rb-account .woocommerce-Button:hover,
.rb-account button[type=submit]:hover{background:var(--hot-2)!important}

/* form controls */
.rb-account input[type=text],.rb-account input[type=email],.rb-account input[type=password],
.rb-account input[type=tel],.rb-account select,.rb-cartpage input[type=number]{
  font-family:var(--body);border:1px solid var(--line)!important;border-radius:var(--r-ctl)!important;
  min-height:44px;background:var(--card);color:var(--ink)}

/* tap targets on the cart line controls, which were 28-35px */
@media (hover:none){
  .rb-cartpage a[href*="remove_item"],
  .rb-cartpage button{min-height:40px;min-width:40px;display:inline-flex;
    align-items:center;justify-content:center}
}

/* ---- pick & mix: surfaces onto the tokens, picker markup untouched ---- */
.pick-and-mix-page [class*="bg-gradient-to"]:not(#progress-bar):not(#progress-bar *){
  background-image:none!important;background-color:var(--band)!important}
.pick-and-mix-page [class*="border-candy-purple"],
.pick-and-mix-page [class*="border-bubblegum-pink"]{border-color:var(--line)!important;
  border-width:1px!important}
.pick-and-mix-page [class*="rounded-2xl"],
.pick-and-mix-page [class*="rounded-xl"]{border-radius:var(--r)!important}
.pick-and-mix-page h2,.pick-and-mix-page h3{font-family:var(--disp,var(--body));color:var(--ink)}
/* the progress bar keeps its gradient - it is the one place it means something */
.pick-and-mix-page #progress-bar{background-image:linear-gradient(90deg,var(--hot),var(--hot-2))!important}
.pick-and-mix-page #checkout-btn{background-image:none!important;background:var(--hot)!important;
  border-radius:100px!important;min-height:48px}
.pick-and-mix-page #checkout-btn:hover:not(:disabled){background:var(--hot-2)!important;transform:none!important}

/* =========================================================================
   SEASONAL DRESSING
   Only renders when roch_season_active() is true, so switching the season off
   removes the markup and these become inert. Seasonal colour is scoped to
   .rb-season and the two chrome elements - nothing overrides the site palette
   globally, so turning it off cannot leave a stray orange behind.
   ====================================================================== */

.rb-season{
  --pumpkin:#C2410C;
  --pumpkin-2:#9A3412;
  padding-top:0;padding-bottom:0}
.rb-season__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  align-items:stretch;gap:0;overflow:hidden;
  border-radius:var(--r);text-decoration:none;color:inherit;
  background:linear-gradient(135deg,#2A1119 0%,#3A1520 55%,#4A1C1E 100%);
  box-shadow:var(--sh-2);
  transition:transform .18s,box-shadow .18s}
.rb-season__in:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.rb-season__copy{padding:clamp(26px,3.4vw,42px);display:flex;flex-direction:column;
  justify-content:center;gap:11px;min-width:0}
.rb-season__eyebrow{font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#F0A868}
.rb-season h2{font-family:var(--disp,var(--head));font-size:clamp(23px,2.7vw,33px);
  line-height:1.1;margin:0;color:#FFF8F1;letter-spacing:-.01em}
.rb-season p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(246,235,224,.8);
  max-width:46ch}
.rb-season__pts{list-style:none;margin:2px 0 0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.rb-season__pts li{font-size:13px;color:rgba(246,235,224,.72);position:relative;
  padding-left:16px}
.rb-season__pts li::before{content:"";position:absolute;left:0;top:6px;width:7px;height:7px;
  border-radius:50%;background:var(--pumpkin)}
.rb-season__pts b{color:#FFF8F1;font-weight:700}
.rb-season__go{display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-family:var(--body);font-size:14.5px;font-weight:700;color:#F0A868}
.rb-season__go svg{width:17px;height:17px;transition:transform .18s}
.rb-season__in:hover .rb-season__go svg{transform:translateX(3px)}
.rb-season__img{display:block;position:relative;min-height:100%;overflow:hidden}
.rb-season__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:820px){
  .rb-season__in{grid-template-columns:1fr}
  .rb-season__img{min-height:0;aspect-ratio:16/10}
  .rb-season__img img{position:static;height:100%}
  .rb-season__copy{padding:24px 22px 26px}
  .rb-season p{max-width:none}
}

/* ---- the nav entry ---- */
.rb-nav__season{gap:7px!important;padding:9px 13px!important;border-radius:100px;
  background:#FDF0E4;border:1px solid #F0D5BC;color:#A9500F!important;
  display:inline-flex!important;align-items:center}
.rb-nav__season svg{width:16px;height:16px;flex:none}
.rb-nav__season:hover{background:#D2691E;border-color:#D2691E;color:#fff!important}

/* ---- the shelf entry ---- */
.rb-shortcut--season{color:#8A3F0C}
.rb-shortcut--season svg{color:#D2691E}
.rb-shortcut--season:hover{background:rgba(255,255,255,.75);color:#6E3208}

@media (max-width:900px){
  .rb-season__in{grid-template-columns:1fr;gap:24px}
  .rb-season__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .rb-season .rb-lead{max-width:none}
  .rb-season__cta{gap:12px}
  .rb-season__cta .rb-btn{flex:1 1 100%;justify-content:center}
}

/* ---- verifiable trust facts, replacing the invented reviews ---- */
.rb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.rb-fact{display:flex;flex-direction:column;gap:7px;padding:18px 19px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1)}
.rb-fact b{font-family:var(--disp,var(--body));font-size:15.5px;font-weight:700;
  color:var(--ink);line-height:1.3}
.rb-fact span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:620px){ .rb-facts{grid-template-columns:1fr} }

/* =========================================================================
   SEASONAL THEME - HALLOWEEN
   The whole design is token-driven, so re-declaring the tokens under one body
   class recolours every page, button, card and chip at once. Remove the class
   and everything returns to the house palette. There is no second stylesheet.

   The shift is plum-and-pumpkin rather than novelty orange-and-black: the brand
   is already a deep plum, so it only has to lean, not dress up.
   ====================================================================== */

/* ===========================================================================
   HALLOWEEN
   ---------------------------------------------------------------------------
   Scoped to body.season-halloween, which inc/seasonal.php puts on the Halloween
   landing page and its children only. Everywhere else stays raspberry.

   Two earlier attempts, and why this is the third:

   1. Cream ground + burnt orange (#C2410C). Barely a change - the page still
      looked like the shop with a slightly different button.
   2. A full dark inversion. It looked the part, but the design system is built
      light: .rb-sec--white takes var(--card), and every unclassed <b> and
      <span> inherits var(--ink). Flipping the tokens left cream text on cream
      cards at 1.06:1 - invisible - across 112 elements. Restyling all 34 hw-*
      components and every light surface to match was the wrong trade.

   So: the CHROME goes loud - a pumpkin header and shelf, which is the "orange
   like the header" that was actually asked for - and the CONTENT stays light,
   where every existing component is already readable. Drama comes from bright
   #FF7518 fills with near-black ink on them (8.6:1), not from inverting the
   page.

   Every text/background pair on the page was measured after the fact; nothing
   here relies on it looking about right.
   ======================================================================== */

body.season-halloween{
  /* A warm amber ground - clearly not the everyday cream, still light enough
     that every inherited colour keeps working. */
  --cream:#FFF4E6;
  --band:#FFE9D2;
  --card:#FFFDFA;
  --line:#F0D3B4;
  --sand:#FFDDB8;
  --sunk:#FFE4C4;

  /* Pumpkin. The bright fill is for backgrounds carrying dark ink; the deep
     one is for orange TEXT on a light ground, where the bright one would fail. */
  --hot:#C2410C;        /* text-safe on cream: 5.4:1 */
  --hot-2:#9A3412;
  --hot-soft:#FFE7D2;

  --ink:#2A1014;        /* deeper and warmer than the everyday ink */
  --ink-2:#5C3A33;
  --ink-3:#8A5F52;

  --dark:#1F0D18;
  --footer:#160812;
  --star:#C2410C;
}

/* A pumpkin glow behind the content, so the ground is not flat. */
body.season-halloween{
  background-color:var(--cream);
  background-image:
    radial-gradient(1000px 560px at 84% -6%, rgba(255,117,24,.26), transparent 60%),
    radial-gradient(720px 480px at 6% 2%,  rgba(124,45,160,.10), transparent 58%);
  background-attachment:fixed;
}

/* ---- the loud bit: header + shelf ------------------------------------- */

/* Bright pumpkin, dark ink on it. This is the "oh wow" - it is the first thing
   on screen and it is nothing like the rest of the shop. */
body.season-halloween .rb-head{
  background:linear-gradient(180deg,#FF8A2B 0%, #F97316 55%, #EA6A0C 100%);
  border-bottom:1px solid #C2410C;
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 10px 26px -14px rgba(120,50,0,.5);
}
/* The logo is artwork, so it is forced to solid black rather than tinted. */
body.season-halloween .rb-logo img{filter:brightness(0) saturate(100%)}
body.season-halloween .rb-nav a{color:#25100A}
body.season-halloween .rb-nav a:hover{color:#5A1F00}
body.season-halloween .rb-nav small{color:#6B3410}
body.season-halloween .rb-head__act{color:#25100A}
body.season-halloween .rb-bag i{background:#25100A;color:#FFD9A8}

/* The nav CTA has to invert to stay visible on an orange bar. Written as
   a.rb-nav__cta so it outranks "body.season-halloween .rb-nav a" (0,2,2). */
body.season-halloween .rb-nav a.rb-nav__cta,
body.season-halloween a.rb-nav__cta{
  background:#25100A; border-color:#25100A; color:#FFE9D2;
}
body.season-halloween .rb-nav a.rb-nav__cta:hover,
body.season-halloween a.rb-nav__cta:hover{
  background:#3E1B10; border-color:#3E1B10; color:#FFF4E6;
}

body.season-halloween .rb-util{background:#25100A;color:#FFE0C2}
body.season-halloween .rb-util a{color:#FFE0C2}
body.season-halloween .rb-util a:hover{color:#FFB870}

/* The shelf goes dark under the orange header - two bright bands stacked read
   as a single orange slab and the nav stops separating from the shortcuts. */
body.season-halloween .rb-shortcuts{
  background:linear-gradient(180deg,#3A1508 0%, #25100A 100%);
  border-top:1px solid rgba(255,180,120,.24);
  border-bottom:1px solid rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,200,150,.14);
}
body.season-halloween .rb-shortcut{color:#FFE9D2}
body.season-halloween .rb-shortcut svg{color:#FFB870;opacity:1}
body.season-halloween .rb-shortcut:hover{background:rgba(255,255,255,.12);color:#fff}
body.season-halloween .rb-shortcuts__sep{background:rgba(255,200,150,.26)}

/* ---- content --------------------------------------------------------- */

body.season-halloween .rb-sec--band{background:var(--band)}
body.season-halloween .rb-sec--white{background:var(--card)}

/* --hot (#C2410C) on the band (#FFE9D2) measures 4.4:1 - just under AA for
   text this size. The deeper pumpkin clears it at 5.9:1. */
body.season-halloween .rb-eyebrow{color:var(--hot-2);letter-spacing:.16em}
body.season-halloween .rb-h2,
body.season-halloween .rb-h3,
body.season-halloween .rb-sh{color:var(--ink)}
body.season-halloween .rb-prose a{color:var(--hot)}

/* Cards keep their own light surface; only the accents move to pumpkin. */
body.season-halloween .rb-chip{
  background:#FFE7D2; border-color:#F0C49B; color:#8A3A0B;
}
body.season-halloween .rb-chip:hover{background:var(--hot);border-color:var(--hot);color:#fff}

/* ---- buttons ---------------------------------------------------------- */

/* Bright fill, near-black ink: 8.6:1, and far louder than white-on-rust. */
body.season-halloween .rb-btn,
body.season-halloween .rb-more,
body.season-halloween .rb-atc,
body.season-halloween .hw-btn{
  background:#FF7518; border-color:#E8590C; color:#25100A; font-weight:700;
}
body.season-halloween .rb-btn:hover,
body.season-halloween .rb-more:hover,
body.season-halloween .rb-atc:hover,
body.season-halloween .hw-btn:hover{
  background:#FF9040; border-color:#FF7518; color:#25100A;
}
/* The ghost button lives on the dark hero and must stay light. */
body.season-halloween .hw-btn--ghost{
  background:transparent; color:#FFEBD6; border-color:rgba(255,235,214,.5);
}
body.season-halloween .hw-btn--ghost:hover{
  background:rgba(255,235,214,.14); border-color:#FFEBD6; color:#fff;
}

body.season-halloween .rb-stars{color:var(--hot)}
/* A legacy utility class still used for a price on the Halloween page. On
   the band it measured 4.34:1, just under AA. */
body.season-halloween .text-candy-purple{color:var(--hot-2)}
/* The side cart's free-delivery figure is pinned by
   "#side-cart .text-candy-purple{color:var(--hot)!important}", so the
   Halloween override has to match that weight to reach it. */
body.season-halloween #side-cart .text-candy-purple{color:var(--hot-2)!important}

/* ---- hero and the dark bands the page already had --------------------- */

body.season-halloween .hw-hero{
  background:
    radial-gradient(760px 420px at 78% 12%, rgba(255,117,24,.42), transparent 62%),
    linear-gradient(158deg,#2E1220 0%, #190A16 60%, #220D1B 100%);
}
body.season-halloween .hw-eyebrow{color:#FFB870}
body.season-halloween .hw-allergen{background:#25100A;color:#FFEBD6}

body.season-halloween .rb-foot{background:var(--footer)}

/* ---- the assistant, if it is on --------------------------------------- */

body.season-halloween .rai__launch{background:#FF7518;color:#25100A}
body.season-halloween .rai__launch:hover{background:#FF9040;color:#25100A}
body.season-halloween .rai__head{background:linear-gradient(180deg,#F97316,#C2410C)}
body.season-halloween .rai__add{background:#FF7518;border-color:#E8590C;color:#25100A}

@media print{
  body.season-halloween{background:#fff;color:#000}
  body.season-halloween .rb-head{background:#fff}
}
}

/* =========================================================================
   HALLOWEEN LANDING PAGE
   Dark, seasonal, and ordered to sell: hero, quantity chooser, products, the
   allergen argument, then the copy last.
   ====================================================================== */

.hw-hero{background:
    radial-gradient(90% 120% at 78% 12%, rgba(194,65,12,.30), transparent 62%),
    linear-gradient(160deg,#2A1119 0%,#1B0A12 60%,#24101C 100%);
  color:#F6EBE0;padding:clamp(38px,6vw,68px) 0;position:relative;overflow:hidden}
.hw-hero__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,54px);align-items:center;position:relative;z-index:2}
.hw-eyebrow{display:inline-block;font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:#F0A868;margin-bottom:12px}
.hw-hero h1{font-family:var(--disp,var(--head));font-size:clamp(32px,5vw,54px);
  line-height:1.04;letter-spacing:-.02em;margin:0 0 16px;color:#FFF8F1}
.hw-hero__lead{font-size:clamp(15px,1.4vw,17px);line-height:1.6;color:rgba(246,235,224,.82);
  max-width:52ch;margin:0 0 24px}
.hw-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;
  padding:0 26px;border-radius:100px;font-family:var(--body);font-size:15px;font-weight:700;
  text-decoration:none;background:#E2620F;color:#fff;border:1px solid #E2620F;
  transition:background .16s,border-color .16s,transform .16s}
.hw-btn:hover{background:#C2410C;border-color:#C2410C;transform:translateY(-1px)}
.hw-btn--ghost{background:transparent;color:#F6EBE0;border-color:rgba(246,235,224,.34)}
.hw-btn--ghost:hover{background:rgba(246,235,224,.1);border-color:rgba(246,235,224,.6)}
.hw-hero__pts{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap}
.hw-hero__pts li{font-size:13.5px;color:rgba(246,235,224,.72);position:relative;padding-left:17px}
.hw-hero__pts li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  border-radius:50%;background:#F0A868}
.hw-hero__pts b{color:#FFF8F1;font-weight:700}
.hw-hero__img{min-width:0}
.hw-hero__img img{width:100%;height:auto;border-radius:var(--r);display:block;
  box-shadow:0 24px 60px rgba(0,0,0,.42)}

/* ---- the quantity chooser ---- */
.hw-calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.hw-calc__c{display:flex;flex-direction:column;gap:5px;padding:19px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1)}
.hw-calc__c--on{border-color:#E2620F;box-shadow:0 0 0 3px rgba(226,98,15,.13)}
.hw-calc__c b{font-family:var(--disp,var(--body));font-size:16px;color:var(--ink)}
.hw-calc__c em{font-style:normal;font-size:12.5px;font-weight:700;color:#C2410C}
.hw-calc__c span{font-size:13.5px;line-height:1.5;color:var(--ink-2);flex:1;margin-bottom:6px}

/* ---- the allergen argument ---- */
.hw-allergen{background:#2A1119;color:#F6EBE0;padding:clamp(34px,5vw,58px) 0}
.hw-allergen__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,52px);align-items:start}
.hw-allergen h2{font-family:var(--disp,var(--head));font-size:clamp(24px,3vw,34px);
  line-height:1.12;margin:0;color:#FFF8F1}
.hw-allergen p{font-size:15px;line-height:1.65;color:rgba(246,235,224,.8);margin:0 0 14px;
  max-width:58ch}
.hw-allergen b{color:#FFF8F1}
.hw-allergen__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hw-allergen__cta .hw-btn{min-height:44px;padding:0 20px;font-size:14px}

@media (max-width:900px){
  .hw-hero__in,.hw-allergen__in{grid-template-columns:1fr}
  .hw-hero__img{order:-1}
}
@media (max-width:560px){
  .hw-hero__cta{gap:10px}
  .hw-hero__cta .hw-btn{flex:1 1 100%}
  .hw-hero__pts{gap:10px;flex-direction:column}
}

/* =========================================================================
   MOBILE MENU
   Below 900px the primary nav and the category shelf are hidden and their
   contents move into a drawer. Two stacked horizontally-scrolling strips is
   not navigation: it was 239px of chrome on a 375px screen - 29% of the first
   view - with no way to see the sections at a glance and no menu button at all.
   ====================================================================== */

.rb-burger{display:none}
.rb-burger span{display:flex;flex-direction:column;gap:4px;width:19px}
.rb-burger i{display:block;height:2px;background:currentColor;border-radius:2px}

.rb-drawer{position:fixed;inset:0;z-index:120;background:rgba(31,13,24,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.rb-drawer[hidden]{display:none}
.rb-drawer__panel{position:absolute;inset:0 0 0 auto;width:min(400px,88vw);
  background:var(--cream);display:flex;flex-direction:column;gap:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:-18px 0 50px rgba(31,13,24,.3);
  animation:rbDrawerIn .2s ease}
@keyframes rbDrawerIn{from{transform:translateX(14px);opacity:.6}to{transform:none;opacity:1}}

.rb-drawer__top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--cream);z-index:2}
.rb-drawer__top span{font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.rb-drawer__x{width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;
  color:var(--ink-2);cursor:pointer;border-radius:var(--r-ctl);margin:-6px -8px -6px 0}
.rb-drawer__x:hover{background:var(--band);color:var(--ink)}

.rb-drawer__search{display:flex;align-items:center;gap:9px;margin:16px 18px 6px;
  padding:0 13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-ctl)}
.rb-drawer__search svg{width:17px;height:17px;color:var(--ink-3);flex:none}
.rb-drawer__search input{flex:1;min-width:0;border:0;background:none;font-family:var(--body);
  font-size:16px;padding:13px 0;color:var(--ink);outline:none}

.rb-drawer__nav{display:flex;flex-direction:column;padding:10px 8px}
.rb-drawer__nav a{display:flex;flex-direction:column;gap:2px;padding:13px 14px;
  border-radius:var(--r-ctl);text-decoration:none;color:var(--ink);min-height:52px;
  justify-content:center}
.rb-drawer__nav a:hover,.rb-drawer__nav a:focus-visible{background:var(--band)}
.rb-drawer__nav b{font-family:var(--disp,var(--body));font-size:17px;font-weight:700}
.rb-drawer__nav em{font-style:normal;font-size:12.5px;color:var(--ink-3)}

.rb-drawer__sec{padding:14px 18px;border-top:1px solid var(--line)}
.rb-drawer__lab{display:block;font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.rb-drawer__chips{display:flex;flex-wrap:wrap;gap:7px}
.rb-drawer__chips a{display:inline-flex;align-items:center;min-height:38px;padding:8px 13px;
  border-radius:100px;background:var(--card);border:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.rb-drawer__chips a:hover{border-color:var(--hot);color:var(--hot-2)}

.rb-drawer__foot{display:flex;flex-direction:column;gap:2px}
.rb-drawer__foot a{padding:11px 0;font-size:14.5px;font-weight:600;color:var(--ink-2);
  text-decoration:none;min-height:44px;display:flex;align-items:center}
.rb-drawer__foot a:hover{color:var(--hot)}
.rb-drawer__note{margin:0;padding:14px 18px 26px;font-size:12.5px;line-height:1.5;
  color:var(--ink-3);border-top:1px solid var(--line)}

/* ---- the swap ---- */
@media (max-width:900px){
  .rb-burger{display:inline-flex}
  .rb-head__in > .rb-nav{display:none!important}   /* now lives in the drawer */
  .rb-shortcuts{display:none}                 /* ditto */
  .rb-head__in{flex-wrap:nowrap;min-height:0;padding:11px 0}
  .rb-head__act{gap:2px}
}

/* =========================================================================
   PRE-BUILT BUNDLES
   A bundle is a recipe over real products, not a SKU - so the card shows what
   is in it and the true sum of the component prices.
   ====================================================================== */
.rb-bundles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.rb-bundle{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1);transition:border-color .16s,box-shadow .16s,transform .16s}
.rb-bundle:hover{border-color:var(--hot);box-shadow:var(--sh-2);transform:translateY(-2px)}
.rb-bundle__imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.rb-bundle__imgs img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--band)}
.rb-bundle__b{display:flex;flex-direction:column;gap:7px;padding:16px 17px 17px;flex:1}
.rb-bundle__note{font-family:var(--body);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hot)}
.rb-bundle__n{font-family:var(--disp,var(--body));font-size:18px;font-weight:700;
  line-height:1.25;color:var(--ink)}
.rb-bundle__d{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rb-bundle__list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;
  gap:4px;flex:1}
.rb-bundle__list li{font-size:12.5px;color:var(--ink-2);line-height:1.4;
  padding-left:2px;display:flex;gap:7px}
.rb-bundle__list em{font-style:normal;font-weight:700;color:var(--ink);flex:none;
  font-variant-numeric:tabular-nums}
.rb-bundle__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:13px;border-top:1px solid var(--line);flex-wrap:wrap}
.rb-bundle__p{font-family:var(--disp,var(--body));font-size:21px;font-weight:700;color:var(--ink)}
.rb-bundle__p del{font-size:14px;color:var(--ink-3);font-weight:500}
.rb-bundle__add{min-height:44px;flex:none}
.rb-bundle__add.is-done{background:var(--star,#2E7D4F)!important;border-color:var(--star,#2E7D4F)!important}
@media (max-width:560px){
  .rb-bundles{grid-template-columns:1fr}
  .rb-bundle__foot{gap:10px}
  .rb-bundle__add{flex:1 1 100%;justify-content:center}
}

/* =========================================================================
   WOOCOMMERCE NOTICES
   These are the "item removed. Undo?", "cart updated" and error messages
   WooCommerce prints after a redirect. They were rendering completely
   unstyled - bare text with a stray default border - and full-container-width
   while the content beneath them was centred, which is what made the account
   page look broken. They are real messages doing a real job; they just had no
   design applied.
   ====================================================================== */

.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-notices-wrapper{margin:0 0 22px}

.rb .woocommerce-message,
.rb .woocommerce-info,
.rb .woocommerce-error{
  list-style:none;
  display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap;
  margin:0 0 10px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-ctl);
  background:var(--card);
  font-family:var(--body);font-size:14.5px;line-height:1.55;color:var(--ink);
  box-shadow:var(--sh-1)}

.rb .woocommerce-message{background:#E7F3EC;border-color:#BFE0CC;color:#1F5C3A}
.rb .woocommerce-info{background:var(--band);border-color:var(--line);color:var(--ink-2)}
.rb .woocommerce-error{background:#FBEAEA;border-color:#EFCACA;color:#8E2020}
.woocommerce-error li{list-style:none;margin:0}

/* the Undo / View basket link that rides along with them */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a.restore-item{
  order:2;margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:36px;padding:0 15px;border-radius:100px;
  background:var(--hot);color:#fff!important;border:0;
  font-family:var(--body);font-size:13px;font-weight:700;text-decoration:none}
.woocommerce-message .button:hover,
.woocommerce-message a.restore-item:hover{background:var(--hot-2)}

/* Line them up with the page content rather than spanning the whole
   container while the form beneath sits centred at 560px. */
.woocommerce-login-wrapper:not(:has(#customer_login)) ~ .woocommerce-notices-wrapper,
.rb-account .woocommerce-notices-wrapper{max-width:560px;margin-left:auto;margin-right:auto}

@media (max-width:560px){
  .woocommerce-message,.woocommerce-info,.woocommerce-error{padding:12px 13px;font-size:14px}
  .woocommerce-message .button,.woocommerce-message a.restore-item{margin-left:0;width:100%}
}