/* ===== v2.4.4 brand look (Oct 23, 2026) =====
   Jack, looking at v2.4.2 in light and dark: "Not good... I don't like the fonts and it doesn't look on brand."
   The look now follows his JBS HQ app and the logo: Fredoka (rounded bold) for headings, buttons, prices and
   section titles; Inter for body text; brand red #8B3A3A as the main accent with HQ's deep red #7f0000; gold
   (#f9a825 / #ffca28) for highlights and badges; near-black #1b1b1b bar; warm cream and warm dark grounds.
   Dark mode is a REAL dark palette (the page-wide invert filter and every re-invert are gone).
   The splash is untouched (splash.css / splash.js are byte-identical to v2.4.3). */
@font-face{font-family:"Fredoka";src:url(fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{
 --b-red:#8B3A3A;--b-red2:#7f0000;--b-red3:#c62828;--b-gold:#f9a825;--b-gold2:#ffca28;--b-gold3:#f7a823;--b-ink:#1b1b1b;--b-ink2:#14181f;
 --b-gold-ink:#8a5a00;--b-acc:#8B3A3A;--b-price:#8B3A3A;--b-onbar:#f7efe2;
 --w-bg:#f5f1ea;--w-card:#fffdf9;--w-tan:#f0e8dc;--w-tan2:#e2d6c5;--w-line:#e6dccd;--w-ink:#1b1b1b;--w-mut:#6c6056;
 --w-ember:#8B3A3A;--w-ember2:#7f0000;--w-bar:#1b1b1b;
 --serif:"Fredoka","Inter",system-ui,sans-serif;--sans:"Inter",system-ui,-apple-system,"Roboto","Segoe UI",sans-serif;
 --fd:"Fredoka","Inter",system-ui,sans-serif}
html.dk20{
 --w-bg:#15110f;--w-card:#211b17;--w-tan:#2a221d;--w-tan2:#3a2f28;--w-line:#3a2f28;--w-ink:#f4ece1;--w-mut:#bcae9c;
 --w-ember:#8B3A3A;--w-ember2:#a54848;--w-bar:#0f0c0b;--b-acc:#ef8a7c;--b-price:#ffca28;--b-gold-ink:#ffca28;
 --cream:var(--w-bg);--cream2:var(--w-tan);--card:var(--w-card);--ivory:var(--w-bg);--ivory2:var(--w-tan);--paper:var(--w-bg);
 --ink:var(--w-ink);--mut:var(--w-mut);--line:var(--w-line);
 background:var(--w-bg);color-scheme:dark}
html.dk20 body{background:var(--w-bg);color:var(--w-ink)}

/* ---- type ---- */
body{font-family:var(--sans)}
h1,h2,h3,.h1,.h2,.h3,.disp,.disp2,.top h1,.ckh span,.sech23 h2,.sechead .disp2,.pname,.ptitle,.pdname,.pr,.pprice,.price,.prc,.stot,.tot b,
.btn,button.btn,.chip,.tabs .tl,.eyebrow,.stamp19,.ptag,.tbadge,.badge,.pill,.mecard b,.ord b,.empty h2,.sheet h2,.bagi .bn,.bn,.big23,.kpi b,.stat23 b{font-family:var(--fd)!important}
h1,h2,h3,.h1,.h2,.h3,.disp,.disp2,.top h1,.sech23 h2{font-weight:600!important;letter-spacing:.1px!important;font-style:normal!important}
.btn,button.btn{font-weight:600!important;letter-spacing:.2px}
.pr,.pprice,.price,.prc{font-weight:600!important}
.eyebrow{font-weight:600!important;letter-spacing:1.6px}
p,li,label,input,select,textarea,.small,.muted,.fine,.ckv{font-family:var(--sans)}

/* ---- top bar: near-black like HQ, thin gold line, logo on its cream badge ---- */
.top,.staff .top,body.staff .top{background:var(--w-bar)!important;color:var(--b-onbar)!important;box-shadow:0 2px 12px rgba(0,0,0,.22);border-bottom:2px solid var(--b-gold)!important}
.top h1{color:var(--b-gold2)!important}
.top .logobtn,html.dk20 .top .logobtn{background:#f6efe2!important}

/* ---- buttons: brand red, gold for highlights ---- */
.btn:not(.light):not(.ghost):not(.glass),.btn.sm:not(.light):not(.ghost),.herocta .btn:not(.light):not(.ghost):not(.glass){background:var(--b-red)!important;color:#fff!important;border-color:var(--b-red)!important}
.btn:not(.light):not(.ghost):not(.glass):active{background:var(--b-red2)!important}
.btn.light{background:var(--w-card)!important;color:var(--w-ink)!important;border:1.5px solid var(--w-line)!important}
.btn.ghost{color:var(--w-ink)!important;border-color:var(--w-line)!important}
.btn.gold,.btn.gold24{background:var(--b-gold)!important;color:#1b1b1b!important}

/* ---- accents ---- */
.pr,.pprice,.price,.prc{color:var(--b-price)!important}
.eyebrow{color:var(--b-acc)!important}
.eyebrow.ondark,.ondark.eyebrow{color:var(--b-gold2)!important}
.linkbtn,.flink{color:var(--b-acc)!important}
a{color:var(--b-acc)}
.tbadge,.badge{background:var(--b-gold)!important;color:#1b1b1b!important;font-weight:700}
.stamp19,.ptag{color:#1b1b1b!important;background:var(--b-gold2)!important;border-color:var(--b-gold)!important;font-weight:600}
.sechead .disp2,.shop .sec>.eyebrow+.disp,.story .disp2{background:linear-gradient(var(--b-gold),var(--b-gold)) left bottom/34px 3px no-repeat!important}
.sech23 h2::after{background:var(--b-gold)!important;width:34px;height:3px;border-radius:2px}
.chip.on,button.chip[aria-pressed="true"]{background:var(--b-ink)!important;color:var(--b-gold2)!important;border-color:var(--b-ink)!important}
html.dk20 .chip.on,html.dk20 button.chip[aria-pressed="true"]{background:var(--b-gold)!important;color:#1b1b1b!important;border-color:var(--b-gold)!important}
:focus-visible{outline:3px solid var(--b-gold)}
input:focus,select:focus,textarea:focus{border-color:var(--b-gold)!important;box-shadow:0 0 0 3px rgba(249,168,37,.22)!important;outline:none}

/* ---- bottom tabs (HQ: light bar, red active, raised home) ---- */
.tabs{background:var(--w-card)!important;border-top:1px solid var(--w-line)!important;box-shadow:0 -4px 16px rgba(40,25,10,.08)}
.tabs button{color:var(--w-mut)}
.tabs button[aria-current=page],.tabs button[aria-current=page] .tl{color:var(--b-acc)!important}
.tabs button.home .i{background:var(--b-ink)!important;color:var(--b-gold2)!important;border-color:var(--w-card)!important}
.tabs button.home[aria-current=page] .i{background:var(--b-red)!important;color:#fff!important;box-shadow:0 6px 16px rgba(139,58,58,.4)}
html.dk20 .tabs button.home .i{background:#2e2620!important}
html.dk20 .tabs button.home[aria-current=page] .i{background:var(--b-red)!important}

/* ---- dark mode: real surfaces (no filters anywhere) ---- */
html.dk20 .scrim{background:rgba(0,0,0,.55)!important}
html.dk20 :is(.card,.pcard,.prod,.tile,.sheet,.bagl,.summary,.mes,.mylink2,.authcard,.cks,.radio,.trust,.padd,.story,.pdkosher,.zipbox,.fbar,.crow,.copt,.logocard,.holi,.kslist,.kscert,.corpfeat,.bxlist,.travelband){background-color:var(--w-card)!important;color:var(--w-ink)!important;border-color:var(--w-line)!important}
html.dk20 :is(.flv button,.flv2 button,.szp button,.chip,.qa button,.dchips button,.seg button,.tiers div):not(.on):not([aria-pressed="true"]){background-color:var(--w-tan)!important;color:var(--w-ink)!important;border-color:var(--w-tan2)!important}
html.dk20 :is(.flv button,.flv2 button,.szp button)[aria-pressed="true"],html.dk20 :is(.flv button,.flv2 button,.szp button).on{background:var(--b-gold)!important;color:#1b1b1b!important;border-color:var(--b-gold)!important}
html.dk20 :is(input,select,textarea){background-color:var(--w-tan)!important;color:var(--w-ink)!important;border-color:var(--w-tan2)!important}
html.dk20 :is(input,textarea)::placeholder{color:#8f8172}
html.dk20 :is(.muted,.small.muted,.fine,.ckv.muted){color:var(--w-mut)!important}
html.dk20 .sfoot{background:#0f0c0b!important;border-top:1px solid #2a221d!important;color:#e9e0d3!important}
html.dk20 .toast{background:#f4ece1!important;color:#1b1b1b!important}
html.dk20 .top .logobtn{background:#f6efe2!important}
html.dk20 .stamp19,html.dk20 .ptag{background:var(--b-gold2)!important;color:#1b1b1b!important}
html.dk20 hr{border-color:var(--w-line)}

/* dark: hard-coded light surfaces in styles.css now read these (light values unchanged) */
html.dk20{--b-white:var(--w-card);--b-white2:var(--w-card);--b-glass:rgba(27,22,19,.97);--b-soft:#d9cdbf;--b-soft2:#e6dccf;--b-soft3:#e3c08a;
 --w-ember:#e9806f;--w-ember2:#d86a5a}
html.dk20 .big23:not(.brk23):not(.out23){background:var(--b-red)!important}
html.dk20 :is(.qty,.cp20,.mecard,.shnote,.boxbar,.buybar){background-color:var(--w-card)!important;color:var(--w-ink)!important;border-color:var(--w-line)!important}
html.dk20 .buybar,html.dk20 .boxbar{background-color:rgba(27,22,19,.97)!important}
html.dk20 .mecard{background:linear-gradient(135deg,#2a211c,#1b1613)!important}
html.dk20 .mecard .av{background:var(--b-gold)!important;color:#1b1b1b!important}
html.dk20 .gbtn20{background:#fff!important;color:#1f1f1f!important;border-color:#dadce0!important}
html.dk20 .pill.p-ok{background:#1f3a29!important;color:#9fe0b5!important}
html.dk20 .pill.p-warn{background:#3d2c12!important;color:#ffcf80!important}
html.dk20 .pill.p-bad{background:#4a1d1d!important;color:#ffb4ab!important}
html.dk20 .sw{background:#4a3f37!important}
html.dk20 :is(.flv,.flv2,.flvs,.fl19,.szp) button:not([aria-pressed="true"]):not(.on){background:var(--w-tan)!important;color:var(--w-ink)!important;border-color:var(--w-tan2)!important}
html.dk20 .poz{color:var(--w-mut)!important}
.mecard .av{background:var(--b-gold)!important;color:#1b1b1b!important;font-family:var(--fd)!important}

html.dk20 #app :is(.flv,.flv2,.szp) button[aria-pressed="true"],html.dk20 #app :is(.flv,.flv2,.szp) button.on{background-color:var(--b-gold)!important;color:#1b1b1b!important;border-color:var(--b-gold)!important}
html.dk20 #app .gbtn20{background-color:#fff!important;color:#1f1f1f!important}
#app :is(.flv,.flv2,.szp) button[aria-pressed="true"]{font-family:var(--fd)!important;font-weight:600!important}

.pdprice>span:first-child{font-family:var(--fd)!important;font-weight:600;color:var(--b-price)!important}
html.dk20 img[src$="seal-dark.png"]{content:url(img/seal-light.png)}
html.dk20 img[src$="tk-dark.png"]{content:url(img/tk-light.png)}

/* Reorder sheet */
.ro244{list-style:none;margin:6px 0 0;padding:0}
.ro244 li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--w-line)}
.ro244 li:last-child{border-bottom:0}
.ro244 li b{font-family:var(--fd);font-weight:600;color:var(--b-price)}
.ro244 li small{flex-basis:100%;color:var(--w-mut);font-size:12.5px}
.ro244.sk li span{color:var(--w-mut);text-decoration:line-through;text-decoration-color:rgba(139,58,58,.5)}
.ro244.sk li small{color:var(--b-acc);text-decoration:none}
.lbl244{margin:14px 0 0;font-family:var(--fd);font-weight:600;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--b-acc)}
.ro244more{display:block;margin:8px 0 2px}

/* printing (gift cards, labels) always prints on white */
html.dk20 body.printmode,html.dk20 body.card24{background:#fff!important;color:#1b1b1b!important}
@media print{html.dk20,html.dk20 body{background:#fff!important;color:#000!important}}

/* surfaces that are dark in BOTH modes keep light text (they read --cream, which is the dark page colour in dark mode) */
html.dk20 :is(.top,.pinscreen,.shophero){color:#f4ece1!important}
.pinscreen h1{color:var(--b-gold2)!important;font-family:var(--fd)!important;font-weight:600!important}

/* order history */
.ordl244{display:flex;flex-direction:column;gap:10px}
.ord244{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--w-card);border:1px solid var(--w-line);border-left:5px solid var(--b-gold);border-radius:14px;padding:12px 12px 12px 14px;color:var(--w-ink);box-shadow:0 2px 10px rgba(40,25,10,.06)}
.ord244 .grow{display:flex;flex-direction:column;gap:3px;min-width:0}
.ordh244{display:flex;gap:8px;align-items:baseline}.ordh244 b{font-family:var(--fd);font-weight:600;font-size:16px}
.ordi244{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ordm244{display:flex;gap:6px;flex-wrap:wrap}.ordm244 .pill{font-size:11.5px}
.ordt244{font-family:var(--fd);font-weight:600;font-size:16px;color:var(--b-price);white-space:nowrap}
/* shipping */
.ship244opts .radio .grow b{font-family:var(--fd);font-weight:600}
.ship244{display:flex;flex-direction:column;gap:4px;margin:12px 0 4px;padding:12px 14px;border-radius:12px;background:var(--w-tan);border:1px dashed var(--b-gold)}
.ship244 b{font-family:var(--fd);font-weight:600}.ship244 span{font-size:13.5px;color:var(--w-mut)}
.err244{color:var(--b-acc)!important;font-weight:600}