/* Ono Bites — homepage styles
   Fonts: Bricolage Grotesque (display) + Familjen Grotesk (body), loaded from Google Fonts in index.html
   Palette: ink #000000 · cream #FFFFFF · pink #FF5A1F · lime #FF5A1F · orange #FF5A1F · blush #FFFFFF · deep pink #FF5A1F */

*{box-sizing:border-box}
body{margin:0;background:#FFFFFF;color:#000000;font-family:'Familjen Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#000000;text-decoration:none}
a:hover{color:#FF5A1F}
img{display:block}
input::placeholder{color:rgba(36,16,48,.42)}

@keyframes onoMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.page{width:100%;overflow:hidden}
.section{max-width:1320px;margin:0 auto;padding:76px 36px 0}

/* ---------- Marquees ---------- */
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-26{animation:onoMarquee 26s linear infinite}
.marquee-30{animation:onoMarquee 30s linear infinite}
.offerbar{background:#FF5A1F;color:#000000;overflow:hidden;padding:11px 0;border-bottom:3px solid #000000}
.offerbar .marquee-group{display:flex;align-items:center;gap:30px;padding-right:30px;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.wordbar{background:#000000;color:#FFFFFF;overflow:hidden;padding:18px 0;border-top:3px solid #000000;border-bottom:3px solid #000000}
.wordbar .marquee-group{display:flex;align-items:center;gap:34px;padding-right:34px;font-family:'Bricolage Grotesque',sans-serif;font-size:30px;letter-spacing:-.02em;font-weight:800;white-space:nowrap}
.c-lime{color:#FF5A1F}.c-pink{color:#FF5A1F}.c-orange{color:#FF5A1F}.c-cream{color:#FFFFFF}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:40;background:#FFFFFF;border-bottom:3px solid #000000}
.header-inner{max-width:1320px;margin:0 auto;padding:0 36px;height:78px;display:flex;align-items:center;justify-content:space-between;gap:32px;transition:height .3s cubic-bezier(.2,.7,.2,1)}
.header-inner.is-compact{height:62px}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.logo-dot{width:11px;height:11px;border-radius:50%;background:#FF5A1F;display:inline-block}
.nav{display:flex;gap:6px;font-size:14.5px;font-weight:600}
.nav a{padding:9px 14px;border-radius:999px;transition:background .2s ease,color .2s ease}
.nav a:hover{background:#000000;color:#FF5A1F}
.header-actions{display:flex;align-items:center;gap:12px}
.login{font-size:14px;font-weight:600;opacity:.6}
.login:hover{opacity:1}

/* ---------- Buttons ---------- */
.btn-pop{border:2.5px solid #000000;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease}
.btn-pop:hover{transform:translate(-2px,-2px)}
.btn-header{background:#FF5A1F;color:#FFFFFF;padding:12px 22px;font-size:14.5px;box-shadow:3px 3px 0 #000000}
.btn-header:hover{color:#FFFFFF;box-shadow:5px 5px 0 #000000}
.btn-ink{background:#000000;color:#FF5A1F;box-shadow:3px 3px 0 #FF5A1F;white-space:nowrap}
.btn-ink:hover{color:#FF5A1F;box-shadow:5px 5px 0 #FF5A1F}
.btn-hero{padding:17px 26px;font-size:15.5px;font-family:inherit}
.btn-link{padding:14px 22px;font-size:15px}
.btn-pinklink{background:#FF5A1F;color:#FFFFFF;padding:14px 22px;font-size:15px;white-space:nowrap;box-shadow:3px 3px 0 #000000}
.btn-pinklink:hover{color:#FFFFFF;box-shadow:5px 5px 0 #000000}
.btn-block-ink{width:100%;margin-top:6px;background:#000000;color:#FF5A1F;border:2.5px solid #000000;border-radius:999px;padding:15px;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn-block-ink:hover{background:#FF5A1F;color:#000000}
.btn-block-lime{width:100%;margin-top:20px;background:#FF5A1F;color:#000000;border:2.5px solid #000000;border-radius:999px;padding:16px;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease}
.btn-block-lime:hover{background:#FF5A1F;color:#FFFFFF}
.btn-cta{background:#FF5A1F;color:#000000;border:2.5px solid #000000;border-radius:999px;padding:17px 28px;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease}
.btn-cta:hover{background:#FF5A1F;color:#FFFFFF}

/* ---------- Stickers & headings ---------- */
.sticker{display:inline-block;border:2.5px solid #000000;border-radius:999px;padding:6px 14px;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.sticker-flat{border:none}
.bg-lime{background:#FF5A1F}
.bg-orange{background:#FF5A1F}
.bg-cream{background:#FFFFFF}
.bg-blush{background:#FFFFFF}
.bg-pink{background:#FF5A1F;color:#FFFFFF}
.bg-pink-flat{background:#FF5A1F}
.bg-lime-flat{background:#FF5A1F;color:#000000}
.rot-n16{transform:rotate(-1.6deg)}
.rot-n14{transform:rotate(-1.4deg)}
.rot-n12{transform:rotate(-1.2deg)}
.rot-p12{transform:rotate(1.2deg)}
.rot-p14{transform:rotate(1.4deg)}
.mb-16{margin-bottom:16px}

.h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;line-height:.95;letter-spacing:-.04em;font-weight:800}
.fs-56{font-size:56px}.fs-54{font-size:54px}.fs-52{font-size:52px}.fs-50{font-size:50px}
.lh-96{line-height:.96}.lh-94{line-height:.94}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px}
.mb-26{margin-bottom:26px}.mb-28{margin-bottom:28px}.mb-30{margin-bottom:30px}.mb-32{margin-bottom:32px}
.center-head{text-align:center;margin-bottom:34px}
.sec-note{margin:0;font-size:16.5px;line-height:1.5;max-width:300px;color:rgba(36,16,48,.65)}
.note-onpink{max-width:290px;color:rgba(255,246,233,.88);font-weight:500}
.note-onink{color:rgba(255,246,233,.7)}
.note-onlime{color:rgba(36,16,48,.72);font-weight:500}
.mono-note{margin:16px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:rgba(36,16,48,.5)}

/* ---------- Hover lift ---------- */
.lift:hover{transform:translate3d(0,-6px,0);box-shadow:6px 10px 0 #000000}

/* ---------- Hero ---------- */
.hero{max-width:1320px;margin:0 auto;padding:64px 36px 56px;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px;align-items:center}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:#FF5A1F;border:2.5px solid #000000;border-radius:999px;padding:8px 16px;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;margin-bottom:22px;transform:rotate(-1.6deg)}
.hero-title{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:86px;line-height:.9;letter-spacing:-.045em;font-weight:800;text-wrap:balance}
.hero-title > span{display:block}
.slap{background:#FF5A1F;color:#FFFFFF;padding:0 14px;border-radius:14px;display:inline-block;transform:rotate(-1.4deg)}
.hero-lead{margin:22px 0 0;font-size:19.5px;line-height:1.5;max-width:430px;color:rgba(36,16,48,.7)}
.signup{margin-top:30px;max-width:470px}
.signup-row{display:flex;gap:10px}
.input-email{flex:1;min-width:0;background:#fff;border:2.5px solid #000000;color:#000000;border-radius:999px;padding:17px 22px;font-size:16px;font-family:inherit;outline:none;font-weight:500}
.input-cream{background:#FFFFFF}
.signup-note{font-size:13.5px;color:rgba(36,16,48,.58);margin-top:10px;padding-left:6px}
.chips{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.chip{background:#fff;border:2.5px solid #000000;border-radius:999px;padding:10px 16px;font-size:14.5px;font-weight:700}
.chip-orange{background:#FF5A1F}

.hero-media{position:relative}
.hero-photo{border:3px solid #000000;border-radius:26px;overflow:hidden;background:#FFFFFF;aspect-ratio:1/1.1;box-shadow:10px 10px 0 #000000}
.hero-photo img{width:100%;height:116%;object-fit:cover;will-change:transform}
.badge-sugar{position:absolute;left:-36px;top:34px;width:132px;height:132px;border-radius:50%;background:#FF5A1F;border:3px solid #000000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-9deg);will-change:transform}
.badge-sugar b{font-family:'Bricolage Grotesque',sans-serif;font-size:31px;font-weight:800;line-height:1}
.badge-sugar small{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;margin-top:2px}
.sticker-baked{position:absolute;right:-22px;bottom:44px;background:#000000;color:#FF5A1F;border:3px solid #000000;border-radius:16px;padding:14px 18px;transform:rotate(4deg);box-shadow:5px 5px 0 #FF5A1F}
.sticker-baked .k{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.8}
.sticker-baked .v{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;line-height:1.05;margin-top:2px}

/* ---------- Trust strip ---------- */
.trust{background:#FFFFFF;border-bottom:3px solid #000000}
.trust-grid{max-width:1320px;margin:0 auto;padding:22px 36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.trust-item{background:#FFFFFF;border:2.5px solid #000000;border-radius:16px;padding:14px 16px}
.trust-item .t{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800}
.trust-item .s{font-size:13px;color:rgba(36,16,48,.62);line-height:1.35;margin-top:2px}

/* ---------- Grids ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.gap-18{gap:18px}.gap-16{gap:16px}

/* ---------- Product cards ---------- */
.product{display:flex;flex-direction:column;background:#fff;border:3px solid #000000;border-radius:20px;padding:13px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.product-img{border:2.5px solid #000000;border-radius:14px;overflow:hidden;background:#FFFFFF;aspect-ratio:1/1;position:relative}
.product-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.product-img img:hover{transform:scale(1.06) rotate(1deg)}
.tag{position:absolute;top:9px;left:9px;border:2px solid #000000;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.tag-0{background:#FF5A1F;color:#FFFFFF}
.tag-1{background:#FF5A1F;color:#000000}
.tag-2{background:#FF5A1F;color:#000000}
.tag-3{background:#000000;color:#FF5A1F}
.product-cat{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(36,16,48,.55);font-weight:700;margin-top:13px}
.product-name{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-top:4px;min-height:44px}
.product-claim{font-size:13.5px;color:#FF5A1F;font-weight:700;margin-top:6px}
.product-price{display:flex;align-items:baseline;gap:8px;margin-top:8px}
.product-price .now{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800}
.product-price .was{font-size:14px;color:rgba(36,16,48,.45);text-decoration:line-through}
.product-cta{margin-top:13px;text-align:center;background:#FF5A1F;border:2.5px solid #000000;border-radius:999px;padding:12px;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;transition:background .2s ease,color .2s ease}
.product-cta:hover{background:#FF5A1F;color:#FFFFFF}

/* ---------- Snack match ---------- */
.panel-pink{background:#FF5A1F;border:3px solid #000000;border-radius:28px;padding:44px;box-shadow:10px 10px 0 #000000}
.match-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start}
.moods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mood{cursor:pointer;border:2.5px solid #000000;border-radius:18px;padding:16px 18px;background:#FFFFFF;transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s ease,box-shadow .2s ease}
.mood.is-active{background:#FF5A1F;box-shadow:4px 4px 0 #000000;transform:translate(-2px,-2px)}
.mood-label{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em}
.mood-sub{font-size:13.5px;color:rgba(36,16,48,.65);margin-top:3px;font-weight:500}
.match-card{background:#FFFFFF;border:3px solid #000000;border-radius:22px;padding:26px;box-shadow:7px 7px 0 #FF5A1F}
.match-kicker{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:#FF5A1F}
.match-row{display:flex;gap:14px;margin-top:16px;align-items:center}
.match-thumb{width:78px;height:78px;border:2.5px solid #000000;border-radius:14px;overflow:hidden;background:#FFFFFF;flex:none}
.match-thumb img{width:100%;height:100%;object-fit:cover}
.match-name{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.025em}
.match-price{font-size:14px;color:rgba(36,16,48,.65);margin-top:4px;font-weight:600}
.match-why{font-size:15.5px;line-height:1.5;margin-top:16px;min-height:66px}

/* ---------- Heat meter ---------- */
.panel-ink{background:#000000;border:3px solid #000000;border-radius:28px;padding:48px 44px;color:#FFFFFF;box-shadow:10px 10px 0 #FF5A1F}
.heat-scale{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:rgba(255,246,233,.6)}
.heat-bar{flex:1;height:4px;border-radius:4px;background:linear-gradient(to right,#E8322E,#FF5A1F,#FF5A1F)}
.flavour{display:flex;flex-direction:column;background:#FFFFFF;border:2.5px solid #000000;border-radius:16px;padding:11px;color:#000000;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.flavour:hover{color:#000000}
.flavour-img{aspect-ratio:1/1;border:2px solid #000000;border-radius:11px;overflow:hidden;background:#FFFFFF}
.flavour-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.flavour-img img:hover{transform:scale(1.08)}
.dots{display:flex;gap:3px;margin-top:10px}
.dot{width:9px;height:9px;border-radius:50%;border:1.5px solid #000000}
.flavour-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-top:8px;min-height:36px}
.flavour-note{font-size:12.5px;color:rgba(36,16,48,.6);font-weight:600}

/* ---------- Categories ---------- */
.cat{position:relative;border:3px solid #000000;border-radius:22px;overflow:hidden;aspect-ratio:1/1.04;display:block;background:#FFFFFF;box-shadow:7px 7px 0 #000000}
.cat img{width:100%;height:120%;object-fit:cover;will-change:transform}
.cat-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(36,16,48,.88) 0%,rgba(36,16,48,.1) 58%,rgba(36,16,48,0) 100%)}
.cat-body{position:absolute;left:22px;right:22px;bottom:22px;color:#FFFFFF}
.cat-name{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1}
.cat-meta{font-size:14px;color:rgba(255,246,233,.82);margin-top:6px;font-weight:500}
.cat-claim{display:inline-block;background:#FF5A1F;color:#000000;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;margin-top:10px}

/* ---------- Bundle builder ---------- */
.bundle{margin-top:76px;background:#FF5A1F;border-top:3px solid #000000;border-bottom:3px solid #000000}
.bundle-inner{max-width:1320px;margin:0 auto;padding:64px 36px}
.bundle-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
.bundle-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.bitem{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;cursor:pointer;background:rgba(255,246,233,.55);border:2.5px solid #000000;transition:background .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease}
.bitem.is-on{background:#FFFFFF;box-shadow:4px 4px 0 #000000;transform:translate(-2px,-2px)}
.bitem-thumb{width:56px;height:56px;border:2px solid #000000;border-radius:11px;overflow:hidden;background:#FFFFFF;flex:none}
.bitem-thumb img{width:100%;height:100%;object-fit:cover}
.bitem-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;line-height:1.2;letter-spacing:-.02em}
.bitem-meta{font-size:12.5px;color:rgba(36,16,48,.62);margin-top:3px;font-weight:600}
.bcheck{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;transition:all .2s ease;border:2.5px solid #000000;background:transparent;color:transparent}
.bitem.is-on .bcheck{background:#FF5A1F;color:#FFFFFF}
.box-card{background:#000000;color:#FFFFFF;border:3px solid #000000;border-radius:22px;padding:28px;position:sticky;top:120px;box-shadow:7px 7px 0 #FF5A1F}
.box-kicker{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#FF5A1F}
.box-summary{font-size:15px;line-height:1.55;margin-top:14px;min-height:76px;color:rgba(255,246,233,.85);font-weight:500}
.box-lines{border-top:2px solid rgba(255,246,233,.2);margin-top:12px;padding-top:15px;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.box-line{display:flex;justify-content:space-between}
.box-line .l{color:rgba(255,246,233,.7)}
.box-line .num{font-variant-numeric:tabular-nums;font-weight:600}
.box-line .save{color:#FF5A1F;font-variant-numeric:tabular-nums;font-weight:700}
.box-total{display:flex;justify-content:space-between;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;margin-top:4px}
.box-total .num-t{font-variant-numeric:tabular-nums}
.box-hint{font-size:12.5px;color:rgba(255,246,233,.55);margin-top:11px;text-align:center;font-weight:500}

/* ---------- Snack o'clock ---------- */
.clock{display:flex;flex-direction:column;border:3px solid #000000;border-radius:22px;padding:24px;min-height:262px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.clock-blush{background:#FFFFFF}.clock-lime{background:#FF5A1F}.clock-orange{background:#FF5A1F}
.clock-time{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.clock-title{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-top:10px}
.clock-body{font-size:15px;line-height:1.45;margin-top:8px;color:rgba(36,16,48,.72);flex:1}
.clock-pick{display:inline-block;background:#000000;color:#FF5A1F;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;margin-top:14px;align-self:flex-start}

/* ---------- The label / nutrition ---------- */
.label-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:52px;align-items:start}
.label-lead{margin:20px 0 0;font-size:18px;line-height:1.5;color:rgba(36,16,48,.7);max-width:430px}
.facts{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.fact{background:#FFFFFF;border:2.5px solid #000000;border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:center}
.fact-k{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;color:#FF5A1F}
.fact-v{font-size:15.5px;line-height:1.45}
.nutri{background:#FF5A1F;color:#000000;border:3px solid #000000;border-radius:26px;padding:34px 32px;box-shadow:8px 8px 0 #000000}
.nutri-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.nutri-title{font-family:'Bricolage Grotesque',sans-serif;font-size:27px;font-weight:800;letter-spacing:-.03em}
.nutri-per{font-size:13px;font-weight:700;background:#FFFFFF;border:2px solid #000000;border-radius:999px;padding:4px 11px}
.nutri-table{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:0;margin-top:22px;font-size:14.5px}
.nutri-table .th{padding:11px 0;border-bottom:2.5px solid #000000;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800}
.nutri-table .td{padding:12px 0;border-bottom:1.5px solid rgba(36,16,48,.28);font-weight:600}
.nutri-table .r{text-align:right}
.nutri-table .td.r{font-variant-numeric:tabular-nums}
.nutri-note{margin:16px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;color:rgba(36,16,48,.62)}

/* ---------- Reviews ---------- */
.rating{background:#FFFFFF;border:2.5px solid #000000;border-radius:16px;padding:14px 18px;text-align:right}
.stars-big{font-size:26px;letter-spacing:.1em;color:rgba(36,16,48,.28)}
.rating-note{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:rgba(36,16,48,.55);margin-top:3px}
.review{background:#FFFFFF;border:3px dashed rgba(36,16,48,.28);border-radius:20px;padding:26px}
.review-stars{font-size:17px;letter-spacing:.12em;color:rgba(36,16,48,.25)}
.review-quote{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;margin-top:14px;color:rgba(36,16,48,.35)}
.review-foot{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:16px;border-top:2px solid rgba(36,16,48,.14)}
.avatar{width:36px;height:36px;border-radius:50%;border:2px solid rgba(36,16,48,.3);background:repeating-linear-gradient(135deg,#FFFFFF 0 6px,#F0E3D0 6px 12px)}
.review-slot{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:rgba(36,16,48,.5);line-height:1.4}

/* ---------- Story ---------- */
.story-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:52px;align-items:center}
.story-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp{border:3px solid #000000;border-radius:22px;overflow:hidden;background:#FFFFFF}
.sp img{width:100%;height:116%;object-fit:cover;will-change:transform}
.sp-tall{aspect-ratio:1/1.26;grid-row:span 2;box-shadow:7px 7px 0 #FF5A1F}
.sp-sq{aspect-ratio:1/1}
.sp-lime{box-shadow:6px 6px 0 #FF5A1F}
.sp-ph{background:repeating-linear-gradient(135deg,#FFFFFF 0 9px,#F0E3D0 9px 18px);display:flex;align-items:flex-end;padding:13px}
.ph-label{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:#FFFFFF;border:1.5px solid #000000;border-radius:6px;padding:5px 8px}
.story-pull{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;line-height:1.3;font-weight:700;letter-spacing:-.02em;margin:22px 0 0;color:#FF5A1F;max-width:440px}
.story-body{margin:18px 0 0;font-size:16.5px;line-height:1.55;color:rgba(36,16,48,.7);max-width:460px}
.story-note{margin:14px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;color:rgba(36,16,48,.5);max-width:460px}

/* ---------- Instagram / UGC ---------- */
.post{border:3px solid #000000;border-radius:20px;overflow:hidden;background:#FFFFFF;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.post-ph{aspect-ratio:1/1;background:repeating-linear-gradient(135deg,#FFFFFF 0 9px,#F0E3D0 9px 18px);display:flex;align-items:flex-end;padding:12px;border-bottom:2.5px solid #000000}
.post-ph .ph-label{padding:4px 7px}
.post-cap{padding:13px 15px 15px;font-size:14px;line-height:1.4;color:rgba(36,16,48,.78);font-weight:500}

/* ---------- Referral ---------- */
.panel-blush{background:#FFFFFF;border:3px solid #000000;border-radius:28px;padding:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:48px;align-items:center;box-shadow:10px 10px 0 #000000}
.ref-lead{margin:18px 0 0;font-size:17px;line-height:1.5;color:rgba(36,16,48,.72);max-width:400px}
.steps{display:flex;flex-direction:column;gap:12px}
.step{background:#FFFFFF;border:2.5px solid #000000;border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.step-n{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;color:#FF5A1F;flex:none}
.step-t{font-size:15.5px;line-height:1.4;font-weight:500}
.step-dark{background:#000000;color:#FF5A1F}
.step-dark .step-n{color:inherit}
.steps-note{margin:2px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:rgba(36,16,48,.55)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);gap:52px;align-items:start}
.faq-lead{margin:16px 0 0;font-size:16.5px;line-height:1.5;color:rgba(36,16,48,.65);max-width:280px}
.faq-list{display:flex;flex-direction:column;gap:11px}
.faq{border:2.5px solid #000000;border-radius:18px;overflow:hidden;background:#FFFFFF;transition:background .25s ease}
.faq.is-open{background:#FFFFFF}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;cursor:pointer}
.faq-q span:first-child{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em}
.faq-icon{flex:none;font-family:'Bricolage Grotesque',sans-serif;font-size:26px;line-height:1;font-weight:800;color:#FF5A1F;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq.is-open .faq-icon{transform:rotate(135deg)}
.faq-a{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.faq.is-open .faq-a{max-height:260px;opacity:1}
.faq-a > div{padding:0 22px 20px;font-size:16px;line-height:1.55;color:rgba(36,16,48,.72);max-width:560px}

/* ---------- Final CTA ---------- */
.cta-wrap{max-width:1320px;margin:76px auto 0;padding:0 36px}
.panel-cta{background:#000000;border:3px solid #000000;border-radius:28px;padding:56px 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:52px;align-items:center;color:#FFFFFF;box-shadow:10px 10px 0 #FF5A1F}
.cta-lead{margin:18px 0 0;font-size:16.5px;line-height:1.5;color:rgba(255,246,233,.72);max-width:400px}
.cta-check{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:14px;color:rgba(255,246,233,.68);font-weight:500}
.cta-check input{accent-color:#FF5A1F;width:17px;height:17px}

/* ---------- Footer ---------- */
.footer{margin-top:76px;background:#FF5A1F;border-top:3px solid #000000}
.footer-inner{max-width:1320px;margin:0 auto;padding:54px 36px 30px}
.footer-cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px;padding-bottom:34px;border-bottom:2.5px solid #000000}
.footer-about{margin:13px 0 0;font-size:15px;line-height:1.5;color:rgba(36,16,48,.72);max-width:290px;font-weight:500}
.footer-col{display:flex;flex-direction:column;gap:9px;font-size:15px;font-weight:600}
.footer-h{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;opacity:.55;margin-bottom:3px}
.wordmark{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(60px,12vw,168px);font-weight:800;letter-spacing:-.05em;line-height:.82;padding:26px 0 8px;white-space:nowrap}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:rgba(36,16,48,.62);font-weight:600}

/* ---------- Mobile menu (hidden on desktop) ---------- */
.menu-toggle{display:none;width:46px;height:46px;border-radius:50%;border:2.5px solid #000000;background:#FF5A1F;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;box-shadow:3px 3px 0 #000000;flex:none;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease}
.menu-toggle:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000000}
.menu-toggle span{display:block;width:18px;height:2.5px;background:#000000;border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.header.is-open .menu-toggle{background:#FF5A1F}
.header.is-open .menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.header.is-open .menu-toggle span:nth-child(2){opacity:0}
.header.is-open .menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;gap:10px;border-top:3px solid #000000;background:#FFFFFF;padding:18px 28px 26px;max-height:calc(100vh - 78px);overflow-y:auto}
.mm-link{display:flex;align-items:center;justify-content:space-between;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em;padding:14px 18px;border:2.5px solid #000000;border-radius:16px;background:#fff;transition:background .2s ease,transform .2s ease}
.mm-link:hover{background:#FF5A1F;color:#000000;transform:translate(-2px,-2px)}
.mm-link span{color:#FF5A1F}
.mm-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.mm-login{font-size:15px;font-weight:700}
.mm-cta{text-align:center}
body.menu-open{overflow:hidden}

/* =========================================================
   TABLET  (≤ 1100px)
   ========================================================= */
@media (max-width:1100px){
  .nav{display:none}
  .login{display:none}
  .menu-toggle{display:flex}
  .header.is-open .mobile-menu{display:flex}
  .header-inner{padding:0 28px}

  .section{padding:64px 28px 0}
  .hero{grid-template-columns:1fr;gap:56px;padding:52px 28px 56px}
  .hero-title{font-size:74px}
  .hero-lead{max-width:560px}
  .signup{max-width:560px}
  .hero-media{max-width:600px;width:100%;margin:0 auto}
  .badge-sugar{left:-18px}
  .sticker-baked{right:-12px}

  .fs-56,.fs-54{font-size:48px}
  .fs-52,.fs-50{font-size:46px}
  .sec-note{max-width:260px}

  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px 28px}

  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .cat-name{font-size:25px}
  .cat-meta{font-size:13px}
  .cat-body{left:16px;right:16px;bottom:16px}

  .panel-pink,.panel-blush{padding:36px}
  .panel-ink{padding:40px 36px}
  .match-grid{grid-template-columns:1fr}

  .bundle{margin-top:64px}
  .bundle-inner{padding:56px 28px}
  .bundle-grid{grid-template-columns:1fr}
  .bundle-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .box-card{position:static}

  .label-grid,.story-grid,.faq-grid{grid-template-columns:1fr;gap:40px}
  .story-photos{max-width:620px}
  .label-lead,.story-body,.story-pull{max-width:640px}
  .faq-lead{max-width:460px}

  .panel-blush{grid-template-columns:1fr;gap:32px}
  .cta-wrap{margin-top:64px;padding:0 28px}
  .panel-cta{grid-template-columns:1fr;gap:32px;padding:46px 40px}

  .footer{margin-top:64px}
  .footer-inner{padding:48px 28px 28px}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .footer-cols > div:first-child{grid-column:1 / -1}
}

/* =========================================================
   MOBILE  (≤ 640px)
   ========================================================= */
@media (max-width:640px){
  .offerbar{padding:9px 0}
  .offerbar .marquee-group{font-size:12px;gap:22px;padding-right:22px}

  .header-inner{padding:0 18px;height:64px;gap:12px}
  .header-inner.is-compact{height:58px}
  .logo{font-size:21px}
  .header-actions{gap:8px}
  .header-actions .btn-header{padding:10px 14px;font-size:13px;box-shadow:2px 2px 0 #000000}
  .menu-toggle{width:42px;height:42px;box-shadow:2px 2px 0 #000000}
  .mobile-menu{padding:14px 18px 22px;max-height:calc(100vh - 64px)}
  .mm-link{font-size:21px;padding:13px 16px}
  .mm-actions{flex-direction:column;align-items:stretch}
  .mm-login{text-align:center;padding:8px 0}
  .mm-cta{padding:15px 22px;font-size:15px}

  .section{padding:56px 18px 0}
  .hero{padding:36px 18px 44px;gap:44px}
  .hero-kicker{font-size:11px;padding:7px 12px}
  .hero-title{font-size:52px;line-height:.92}
  .slap{padding:0 10px;border-radius:10px}
  .hero-lead{font-size:17px}
  .signup-row{flex-direction:column}
  .signup-row .input-email,.signup-row button{width:100%}
  .btn-hero,.btn-cta{padding:16px 22px}
  .chips{gap:8px;margin-top:26px}
  .chip{font-size:13px;padding:8px 13px}
  .hero-photo{box-shadow:6px 6px 0 #000000;border-radius:20px}
  .badge-sugar{left:-6px;top:-18px;width:98px;height:98px}
  .badge-sugar b{font-size:24px}
  .badge-sugar small{font-size:10px}
  .sticker-baked{right:-6px;bottom:22px;padding:10px 13px;box-shadow:4px 4px 0 #FF5A1F}
  .sticker-baked .k{font-size:11px}
  .sticker-baked .v{font-size:19px}

  .wordbar{padding:13px 0}
  .wordbar .marquee-group{font-size:22px;gap:24px;padding-right:24px}

  .trust-grid{padding:16px 18px;gap:10px}
  .trust-item{padding:12px}
  .trust-item .t{font-size:14px}
  .trust-item .s{font-size:12px}

  .sec-head{flex-direction:column;align-items:flex-start;gap:16px}
  .mb-26,.mb-28,.mb-30,.mb-32{margin-bottom:24px}
  .center-head{text-align:left;margin-bottom:24px}
  .fs-56,.fs-54,.fs-52,.fs-50{font-size:40px}
  .sec-note{max-width:none}
  .sticker{font-size:11px;padding:5px 12px}

  .grid-4{gap:12px}
  .product{padding:9px;border-radius:16px}
  .product-img{border-radius:11px}
  .tag{font-size:9.5px;padding:4px 7px;top:6px;left:6px}
  .product-cat{font-size:10px;margin-top:10px}
  .product-name{font-size:15.5px;min-height:0}
  .product-claim{font-size:12px}
  .product-price .now{font-size:17px}
  .product-price .was{font-size:12.5px}
  .product-cta{font-size:13px;padding:10px}

  .panel-pink,.panel-blush,.panel-ink,.panel-cta{padding:26px 18px;border-radius:22px;box-shadow:6px 6px 0 #000000}
  .panel-ink{box-shadow:6px 6px 0 #FF5A1F}
  .panel-cta{box-shadow:6px 6px 0 #FF5A1F}
  .moods{grid-template-columns:1fr;gap:10px}
  .mood{padding:14px 16px}
  .mood-label{font-size:18px}
  .match-card{padding:20px;box-shadow:5px 5px 0 #FF5A1F}
  .match-name{font-size:19px}

  .heat-scale{font-size:11px}
  .grid-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .flavour-name{min-height:0}

  .grid-3{grid-template-columns:1fr;gap:18px}
  .cat{aspect-ratio:1/.9;box-shadow:5px 5px 0 #000000}
  .cat-name{font-size:28px}

  .bundle{margin-top:56px}
  .bundle-inner{padding:48px 18px}
  .bundle-items{grid-template-columns:1fr;gap:10px}
  .box-card{padding:22px;box-shadow:5px 5px 0 #FF5A1F}

  #clockGrid{grid-template-columns:1fr}
  .clock{min-height:0;padding:20px}
  .clock-time{font-size:34px}

  .label-lead{font-size:16.5px}
  .fact{grid-template-columns:1fr;gap:4px;padding:15px 16px}
  .nutri{padding:24px 18px;box-shadow:6px 6px 0 #000000}
  .nutri-title{font-size:22px}
  .nutri-table{font-size:13px}
  .nutri-table .th{font-size:10px}

  .rating{text-align:left}
  .review{padding:20px}
  .review-quote{font-size:19px}

  .story-photos{gap:10px}
  .sp{border-radius:16px}
  .sp-tall{box-shadow:5px 5px 0 #FF5A1F}
  .story-pull{font-size:21px}
  .story-body{font-size:15.5px}

  #postsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .post{border-radius:16px}
  .post-cap{font-size:12.5px;padding:10px 12px 12px}

  .step{padding:14px}
  .step-t{font-size:14.5px}
  .ref-lead{font-size:16px}

  .faq-q{padding:16px 18px}
  .faq-q span:first-child{font-size:16.5px}
  .faq-a > div{padding:0 18px 18px;font-size:15px}

  .cta-wrap{margin-top:56px;padding:0 18px}
  .cta-lead{font-size:15.5px}

  .footer{margin-top:56px}
  .footer-inner{padding:40px 18px 24px}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .wordmark{font-size:18vw;padding:22px 0 8px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px}
}

/* Small phones (≤ 380px) */
@media (max-width:380px){
  .hero-title{font-size:44px}
  .fs-56,.fs-54,.fs-52,.fs-50{font-size:35px}
  .header-actions .btn-header{display:none}
  .grid-4,.grid-6,#postsGrid{grid-template-columns:1fr}
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  *{transition:none!important}
}


/* =========================================================
   ONO BITES FINAL BRAND PALETTE — LOGO ORANGE / BLACK / WHITE
   ========================================================= */
:root{--ono-orange:#FF5A1F;--ono-black:#000;--ono-white:#fff}
body{background:#fff;color:#000}
a{color:#000}
a:hover{color:#FF5A1F}
.offerbar,.wordbar{background:#000;color:#fff;border-color:#000}
.btn-header,.btn-pinklink,.btn-cta,.btn-block-lime,.btn-block-ink,.product-cta,.box-btn,.clock-pick{background:#FF5A1F;color:#fff;border-color:#000}
.btn-header:hover,.btn-pinklink:hover,.btn-cta:hover,.btn-block-lime:hover,.btn-block-ink:hover,.product-cta:hover,.box-btn:hover,.clock-pick:hover{background:#000;color:#fff}
.product,.flavour,.cat,.mood,.match-card,.bitem,.box-card,.faq,.trust-item,.card{background:#fff;border-color:#000}
.panel-pink,.panel-ink{background:#fff;color:#000;border-color:#000;box-shadow:10px 10px 0 #FF5A1F}
.bg-lime,.bg-orange,.bg-pink,.bg-blush,.tag-0,.tag-1,.tag-2,.tag-3,.cat-claim,.bcheck,.sticker-baked{background:#FF5A1F;color:#fff}
.sticker,.hero-photo,.product-img,.flavour-img,.bitem-thumb,.box-card,.card-media,.ono-shop-page .card,.ono-shop-page .chip,.ono-shop-page .sort,.ono-shop-page .toolbar{border-color:#000}
.product-claim,.match-kicker,.card-off,.price-now{color:#FF5A1F}
.lift:hover{box-shadow:6px 10px 0 #FF5A1F}


/* =========================================================
   ONO BITES — FINAL VISUAL FIXES
   ========================================================= */

/* Quiz heading was white after the final white-panel palette override. */
.panel-pink .c-cream{
  color:#000000 !important;
}

/* Build-a-Box card is intentionally white, so its inherited white text
   must be changed to black. */
.box-card{
  color:#000000 !important;
}

.box-card .box-summary{
  color:#000000 !important;
}

.box-card .box-summary .ono-box-summary-link{
  color:#000000 !important;
}

.box-card .box-summary .ono-box-summary-plus{
  color:#000000 !important;
}

.box-card .box-line .l{
  color:rgba(0,0,0,.68) !important;
}

.box-card .box-line .num{
  color:#000000 !important;
}

.box-card .box-total{
  color:#000000 !important;
}

.box-card .box-hint{
  color:rgba(0,0,0,.58) !important;
}

/* Keep the bundle saving value in the ONO orange. */
.box-card .box-line .save{
  color:#FF5A1F !important;
}


/*new css */


/* Ono Bites — homepage styles    Fonts: Bricolage Grotesque (display) + Familjen Grotesk (body), loaded from Google Fonts in index.html    Palette: ink #000000 · cream #FFFFFF · pink #FF5A1F · lime #FF5A1F · orange #FF5A1F · blush #FFFFFF · deep pink #FF5A1F */  *{box-sizing:border-box} body{margin:0;background:#FFFFFF;color:#000000;font-family:'Familjen Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased} a{color:#000000;text-decoration:none} a:hover{color:#FF5A1F} img{display:block} input::placeholder{color:rgba(36,16,48,.42)}  @keyframes onoMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}  .page{width:100%;overflow:hidden} .section{max-width:1320px;margin:0 auto;padding:76px 36px 0}  /* ---------- Marquees ---------- */ .marquee-track{display:flex;width:max-content;will-change:transform} .marquee-26{animation:onoMarquee 26s linear infinite} .marquee-30{animation:onoMarquee 30s linear infinite} .offerbar{background:#FF5A1F;color:#000000;overflow:hidden;padding:11px 0;border-bottom:3px solid #000000} .offerbar .marquee-group{display:flex;align-items:center;gap:30px;padding-right:30px;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;white-space:nowrap} .wordbar{background:#000000;color:#FFFFFF;overflow:hidden;padding:18px 0;border-top:3px solid #000000;border-bottom:3px solid #000000} .wordbar .marquee-group{display:flex;align-items:center;gap:34px;padding-right:34px;font-family:'Bricolage Grotesque',sans-serif;font-size:30px;letter-spacing:-.02em;font-weight:800;white-space:nowrap} .c-lime{color:#000}.c-pink{color:#000}.c-orange{color:#000}.c-cream{color:#FFFFFF}  /* ---------- Header ---------- */ .header{position:sticky;top:0;z-index:40;background:#FFFFFF;border-bottom:3px solid #000000} .header-inner{max-width:1320px;margin:0 auto;padding:0 36px;height:78px;display:flex;align-items:center;justify-content:space-between;gap:32px;transition:height .3s cubic-bezier(.2,.7,.2,1)} .header-inner.is-compact{height:62px} .logo{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:8px} .logo-dot{width:11px;height:11px;border-radius:50%;background:#FF5A1F;display:inline-block} .nav{display:flex;gap:6px;font-size:14.5px;font-weight:600} .nav a{padding:9px 14px;border-radius:999px;transition:background .2s ease,color .2s ease} .nav a:hover{background:#000000;color:#FF5A1F} .header-actions{display:flex;align-items:center;gap:12px} .login{font-size:14px;font-weight:600;opacity:.6} .login:hover{opacity:1}  /* ---------- Buttons ---------- */ .btn-pop{border:2.5px solid #000000;border-radius:999px;font-weight:700;cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease} .btn-pop:hover{transform:translate(-2px,-2px)} .btn-header{background:#FF5A1F;color:#FFFFFF;padding:12px 22px;font-size:14.5px;box-shadow:3px 3px 0 #000000} .btn-header:hover{color:#FFFFFF;box-shadow:5px 5px 0 #000000} .btn-ink{background:#000000;color:#FF5A1F;box-shadow:3px 3px 0 #FF5A1F;white-space:nowrap} .btn-ink:hover{color:#FF5A1F;box-shadow:5px 5px 0 #FF5A1F} .btn-hero{padding:17px 26px;font-size:15.5px;font-family:inherit} .btn-link{padding:14px 22px;font-size:15px} .btn-pinklink{background:#FF5A1F;color:#FFFFFF;padding:14px 22px;font-size:15px;white-space:nowrap;box-shadow:3px 3px 0 #000000} .btn-pinklink:hover{color:#FFFFFF;box-shadow:5px 5px 0 #000000} .btn-block-ink{width:100%;margin-top:6px;background:#000000;color:#FF5A1F;border:2.5px solid #000000;border-radius:999px;padding:15px;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease} .btn-block-ink:hover{background:#FF5A1F;color:#000000} .btn-block-lime{width:100%;margin-top:20px;background:#FF5A1F;color:#000000;border:2.5px solid #000000;border-radius:999px;padding:16px;font-family:'Bricolage Grotesque',sans-serif;font-size:16.5px;font-weight:800;cursor:pointer;transition:background .2s ease,color .2s ease} .btn-block-lime:hover{background:#FF5A1F;color:#FFFFFF} .btn-cta{background:#FF5A1F;color:#000000;border:2.5px solid #000000;border-radius:999px;padding:17px 28px;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:800;cursor:pointer;white-space:nowrap;transition:background .2s ease,color .2s ease} .btn-cta:hover{background:#FF5A1F;color:#FFFFFF}  /* ---------- Stickers & headings ---------- */ .sticker{display:inline-block;border:2.5px solid #000000;border-radius:999px;padding:6px 14px;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;margin-bottom:14px} .sticker-flat{border:none} .bg-lime{background:#FF5A1F} .bg-orange{background:#FF5A1F} .bg-cream{background:#FFFFFF} .bg-blush{background:#FFFFFF} .bg-pink{background:#FF5A1F;color:#FFFFFF} .bg-pink-flat{background:#FF5A1F} .bg-lime-flat{background:#FF5A1F;color:#000000} .rot-n16{transform:rotate(-1.6deg)} .rot-n14{transform:rotate(-1.4deg)} .rot-n12{transform:rotate(-1.2deg)} .rot-p12{transform:rotate(1.2deg)} .rot-p14{transform:rotate(1.4deg)} .mb-16{margin-bottom:16px}  .h2{margin:0;font-family:'Bricolage Grotesque',sans-serif;line-height:.95;letter-spacing:-.04em;font-weight:800} .fs-56{font-size:56px}.fs-54{font-size:54px}.fs-52{font-size:52px}.fs-50{font-size:50px} .lh-96{line-height:.96}.lh-94{line-height:.94}  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px} .mb-26{margin-bottom:26px}.mb-28{margin-bottom:28px}.mb-30{margin-bottom:30px}.mb-32{margin-bottom:32px} .center-head{text-align:center;margin-bottom:34px} .sec-note{margin:0;font-size:16.5px;line-height:1.5;max-width:300px;color:rgba(36,16,48,.65)} .note-onpink{max-width:290px;color:rgba(255,246,233,.88);font-weight:500} .note-onink{color:rgba(255,246,233,.7)} .note-onlime{color:rgba(36,16,48,.72);font-weight:500} .mono-note{margin:16px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:rgba(36,16,48,.5)}  /* ---------- Hover lift ---------- */ .lift:hover{transform:translate3d(0,-6px,0);box-shadow:6px 10px 0 #000000}  /* ---------- Hero ---------- */ .hero{max-width:1320px;margin:0 auto;padding:64px 36px 56px;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:48px;align-items:center} .hero-kicker{display:inline-flex;align-items:center;gap:8px;background:#FF5A1F;border:2.5px solid #000000;border-radius:999px;padding:8px 16px;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;margin-bottom:22px;transform:rotate(-1.6deg)} .hero-title{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:86px;line-height:.9;letter-spacing:-.045em;font-weight:800;text-wrap:balance} .hero-title > span{display:block} .slap{background:#FF5A1F;color:#FFFFFF;padding:0 14px;border-radius:14px;display:inline-block;transform:rotate(-1.4deg)} .hero-lead{margin:22px 0 0;font-size:19.5px;line-height:1.5;max-width:430px;color:rgba(36,16,48,.7)} .signup{margin-top:30px;max-width:470px} .signup-row{display:flex;gap:10px} .input-email{flex:1;min-width:0;background:#fff;border:2.5px solid #000000;color:#000000;border-radius:999px;padding:17px 22px;font-size:16px;font-family:inherit;outline:none;font-weight:500} .input-cream{background:#FFFFFF} .signup-note{font-size:13.5px;color:rgba(36,16,48,.58);margin-top:10px;padding-left:6px} .chips{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap} .chip{background:#fff;border:2.5px solid #000000;border-radius:999px;padding:10px 16px;font-size:14.5px;font-weight:700} .chip-orange{background:#FF5A1F}  .hero-media{position:relative} .hero-photo{border:3px solid #000000;border-radius:26px;overflow:hidden;background:#FFFFFF;aspect-ratio:1/1.1;box-shadow:10px 10px 0 #000000} .hero-photo img{width:100%;height:116%;object-fit:cover;will-change:transform} .badge-sugar{position:absolute;left:-36px;top:34px;width:132px;height:132px;border-radius:50%;background:#FF5A1F;border:3px solid #000000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-9deg);will-change:transform} .badge-sugar b{font-family:'Bricolage Grotesque',sans-serif;font-size:31px;font-weight:800;line-height:1} .badge-sugar small{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;margin-top:2px} .sticker-baked{position:absolute;right:-22px;bottom:44px;background:#000000;color:#FF5A1F;border:3px solid #000000;border-radius:16px;padding:14px 18px;transform:rotate(4deg);box-shadow:5px 5px 0 #FF5A1F} .sticker-baked .k{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.8} .sticker-baked .v{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;font-weight:800;line-height:1.05;margin-top:2px}  /* ---------- Trust strip ---------- */ .trust{background:#FFFFFF;border-bottom:3px solid #000000} .trust-grid{max-width:1320px;margin:0 auto;padding:22px 36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .trust-item{background:#FFFFFF;border:2.5px solid #000000;border-radius:16px;padding:14px 16px} .trust-item .t{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800} .trust-item .s{font-size:13px;color:rgba(36,16,48,.62);line-height:1.35;margin-top:2px}  /* ---------- Grids ---------- */ .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px} .gap-18{gap:18px}.gap-16{gap:16px}  /* ---------- Product cards ---------- */ .product{display:flex;flex-direction:column;background:#fff;border:3px solid #000000;border-radius:20px;padding:13px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease} .product-img{border:2.5px solid #000000;border-radius:14px;overflow:hidden;background:#FFFFFF;aspect-ratio:1/1;position:relative} .product-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .product-img img:hover{transform:scale(1.06) rotate(1deg)} .tag{position:absolute;top:9px;left:9px;border:2px solid #000000;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px} .tag-0{background:#FF5A1F;color:#FFFFFF} .tag-1{background:#FF5A1F;color:#000000} .tag-2{background:#FF5A1F;color:#000000} .tag-3{background:#000000;color:#FF5A1F} .product-cat{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(36,16,48,.55);font-weight:700;margin-top:13px} .product-name{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-top:4px;min-height:44px} .product-claim{font-size:13.5px;color:#FF5A1F;font-weight:700;margin-top:6px} .product-price{display:flex;align-items:baseline;gap:8px;margin-top:8px} .product-price .now{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800} .product-price .was{font-size:14px;color:rgba(36,16,48,.45);text-decoration:line-through} .product-cta{margin-top:13px;text-align:center;background:#FF5A1F;border:2.5px solid #000000;border-radius:999px;padding:12px;font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;transition:background .2s ease,color .2s ease} .product-cta:hover{background:#FF5A1F;color:#FFFFFF}  /* ---------- Snack match ---------- */ .panel-pink{background:#FF5A1F;border:3px solid #000000;border-radius:28px;padding:44px;box-shadow:10px 10px 0 #000000} .match-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:26px;align-items:start} .moods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .mood{cursor:pointer;border:2.5px solid #000000;border-radius:18px;padding:16px 18px;background:#FFFFFF;transition:transform .2s cubic-bezier(.2,.7,.2,1),background .2s ease,box-shadow .2s ease} .mood.is-active{background:#FF5A1F;box-shadow:4px 4px 0 #000000;transform:translate(-2px,-2px)} .mood-label{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.02em} .mood-sub{font-size:13.5px;color:rgba(36,16,48,.65);margin-top:3px;font-weight:500} .match-card{background:#FFFFFF;border:3px solid #000000;border-radius:22px;padding:26px;box-shadow:7px 7px 0 #FF5A1F} .match-kicker{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:#FF5A1F} .match-row{display:flex;gap:14px;margin-top:16px;align-items:center} .match-thumb{width:78px;height:78px;border:2.5px solid #000000;border-radius:14px;overflow:hidden;background:#FFFFFF;flex:none} .match-thumb img{width:100%;height:100%;object-fit:cover} .match-name{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.025em} .match-price{font-size:14px;color:rgba(36,16,48,.65);margin-top:4px;font-weight:600} .match-why{font-size:15.5px;line-height:1.5;margin-top:16px;min-height:66px}  /* ---------- Heat meter ---------- */ .panel-ink{background:#000000;border:3px solid #000000;border-radius:28px;padding:48px 44px;color:#FFFFFF;box-shadow:10px 10px 0 #FF5A1F} .heat-scale{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:rgba(255,246,233,.6)} .heat-bar{flex:1;height:4px;border-radius:4px;background:linear-gradient(to right,#E8322E,#FF5A1F,#FF5A1F)} .flavour{display:flex;flex-direction:column;background:#FFFFFF;border:2.5px solid #000000;border-radius:16px;padding:11px;color:#000000;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease} .flavour:hover{color:#000000} .flavour-img{aspect-ratio:1/1;border:2px solid #000000;border-radius:11px;overflow:hidden;background:#FFFFFF} .flavour-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .flavour-img img:hover{transform:scale(1.08)} .dots{display:flex;gap:3px;margin-top:10px} .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid #000000} .flavour-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15.5px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-top:8px;min-height:36px} .flavour-note{font-size:12.5px;color:rgba(36,16,48,.6);font-weight:600}  /* ---------- Categories ---------- */ .cat{position:relative;border:3px solid #000000;border-radius:22px;overflow:hidden;aspect-ratio:1/1.04;display:block;background:#FFFFFF;box-shadow:7px 7px 0 #000000} .cat img{width:100%;height:120%;object-fit:cover;will-change:transform} .cat-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(36,16,48,.88) 0%,rgba(36,16,48,.1) 58%,rgba(36,16,48,0) 100%)} .cat-body{position:absolute;left:22px;right:22px;bottom:22px;color:#FFFFFF} .cat-name{font-family:'Bricolage Grotesque',sans-serif;font-size:32px;font-weight:800;letter-spacing:-.03em;line-height:1} .cat-meta{font-size:14px;color:rgba(255,246,233,.82);margin-top:6px;font-weight:500} .cat-claim{display:inline-block;background:#FF5A1F;color:#000000;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;margin-top:10px}  /* ---------- Bundle builder ---------- */ .bundle{margin-top:76px;background:#FF5A1F;border-top:3px solid #000000;border-bottom:3px solid #000000} .bundle-inner{max-width:1320px;margin:0 auto;padding:64px 36px} .bundle-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start} .bundle-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px} .bitem{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;cursor:pointer;background:rgba(255,246,233,.55);border:2.5px solid #000000;transition:background .2s ease,transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease} .bitem.is-on{background:#FFFFFF;box-shadow:4px 4px 0 #000000;transform:translate(-2px,-2px)} .bitem-thumb{width:56px;height:56px;border:2px solid #000000;border-radius:11px;overflow:hidden;background:#FFFFFF;flex:none} .bitem-thumb img{width:100%;height:100%;object-fit:cover} .bitem-name{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:800;line-height:1.2;letter-spacing:-.02em} .bitem-meta{font-size:12.5px;color:rgba(36,16,48,.62);margin-top:3px;font-weight:600} .bcheck{margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;transition:all .2s ease;border:2.5px solid #000000;background:transparent;color:transparent} .bitem.is-on .bcheck{background:#FF5A1F;color:#FFFFFF} .box-card{background:#000000;color:#FFFFFF;border:3px solid #000000;border-radius:22px;padding:28px;position:sticky;top:120px;box-shadow:7px 7px 0 #FF5A1F} .box-kicker{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#FF5A1F} .box-summary{font-size:15px;line-height:1.55;margin-top:14px;min-height:76px;color:rgba(255,246,233,.85);font-weight:500} .box-lines{border-top:2px solid rgba(255,246,233,.2);margin-top:12px;padding-top:15px;display:flex;flex-direction:column;gap:9px;font-size:14.5px} .box-line{display:flex;justify-content:space-between} .box-line .l{color:rgba(255,246,233,.7)} .box-line .num{font-variant-numeric:tabular-nums;font-weight:600} .box-line .save{color:#FF5A1F;font-variant-numeric:tabular-nums;font-weight:700} .box-total{display:flex;justify-content:space-between;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;margin-top:4px} .box-total .num-t{font-variant-numeric:tabular-nums} .box-hint{font-size:12.5px;color:rgba(255,246,233,.55);margin-top:11px;text-align:center;font-weight:500}  /* ---------- Snack o'clock ---------- */ .clock{display:flex;flex-direction:column;border:3px solid #000000;border-radius:22px;padding:24px;min-height:262px;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease} .clock-blush{background:#FFFFFF}.clock-lime{background:#fff}.clock-orange{background:#fff} .clock-time{font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1} .clock-title{font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-top:10px} .clock-body{font-size:15px;line-height:1.45;margin-top:8px;color:rgba(36,16,48,.72);flex:1} .clock-pick{display:inline-block;background:#000000;color:#FF5A1F;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;margin-top:14px;align-self:flex-start}  /* ---------- The label / nutrition ---------- */ .label-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:52px;align-items:start} .label-lead{margin:20px 0 0;font-size:18px;line-height:1.5;color:rgba(36,16,48,.7);max-width:430px} .facts{margin-top:28px;display:flex;flex-direction:column;gap:12px} .fact{background:#FFFFFF;border:2.5px solid #000000;border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:center} .fact-k{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;color:#FF5A1F} .fact-v{font-size:15.5px;line-height:1.45} .nutri{background:#FF5A1F;color:#000000;border:3px solid #000000;border-radius:26px;padding:34px 32px;box-shadow:8px 8px 0 #000000} .nutri-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px} .nutri-title{font-family:'Bricolage Grotesque',sans-serif;font-size:27px;font-weight:800;letter-spacing:-.03em} .nutri-per{font-size:13px;font-weight:700;background:#FFFFFF;border:2px solid #000000;border-radius:999px;padding:4px 11px} .nutri-table{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:0;margin-top:22px;font-size:14.5px} .nutri-table .th{padding:11px 0;border-bottom:2.5px solid #000000;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800} .nutri-table .td{padding:12px 0;border-bottom:1.5px solid rgba(36,16,48,.28);font-weight:600} .nutri-table .r{text-align:right} .nutri-table .td.r{font-variant-numeric:tabular-nums} .nutri-note{margin:16px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;color:rgba(36,16,48,.62)}  /* ---------- Reviews ---------- */ .rating{background:#FFFFFF;border:2.5px solid #000000;border-radius:16px;padding:14px 18px;text-align:right} .stars-big{font-size:26px;letter-spacing:.1em;color:rgba(36,16,48,.28)} .rating-note{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:rgba(36,16,48,.55);margin-top:3px} .review{background:#FFFFFF;border:3px dashed rgba(36,16,48,.28);border-radius:20px;padding:26px} .review-stars{font-size:17px;letter-spacing:.12em;color:rgba(36,16,48,.25)} .review-quote{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;margin-top:14px;color:rgba(36,16,48,.35)} .review-foot{display:flex;align-items:center;gap:11px;margin-top:20px;padding-top:16px;border-top:2px solid rgba(36,16,48,.14)} .avatar{width:36px;height:36px;border-radius:50%;border:2px solid rgba(36,16,48,.3);background:repeating-linear-gradient(135deg,#FFFFFF 0 6px,#F0E3D0 6px 12px)} .review-slot{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:rgba(36,16,48,.5);line-height:1.4}  /* ---------- Story ---------- */ .story-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:52px;align-items:center} .story-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px} .sp{border:3px solid #000000;border-radius:22px;overflow:hidden;background:#FFFFFF} .sp img{width:100%;height:116%;object-fit:cover;will-change:transform} .sp-tall{aspect-ratio:1/1.26;grid-row:span 2;box-shadow:7px 7px 0 #FF5A1F} .sp-sq{aspect-ratio:1/1} .sp-lime{box-shadow:6px 6px 0 #FF5A1F} .sp-ph{background:repeating-linear-gradient(135deg,#FFFFFF 0 9px,#F0E3D0 9px 18px);display:flex;align-items:flex-end;padding:13px} .ph-label{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:#FFFFFF;border:1.5px solid #000000;border-radius:6px;padding:5px 8px} .story-pull{font-family:'Bricolage Grotesque',sans-serif;font-size:25px;line-height:1.3;font-weight:700;letter-spacing:-.02em;margin:22px 0 0;color:#FF5A1F;max-width:440px} .story-body{margin:18px 0 0;font-size:16.5px;line-height:1.55;color:rgba(36,16,48,.7);max-width:460px} .story-note{margin:14px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;color:rgba(36,16,48,.5);max-width:460px}  /* ---------- Instagram / UGC ---------- */ .post{border:3px solid #000000;border-radius:20px;overflow:hidden;background:#FFFFFF;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease} .post-ph{aspect-ratio:1/1;background:repeating-linear-gradient(135deg,#FFFFFF 0 9px,#F0E3D0 9px 18px);display:flex;align-items:flex-end;padding:12px;border-bottom:2.5px solid #000000} .post-ph .ph-label{padding:4px 7px} .post-cap{padding:13px 15px 15px;font-size:14px;line-height:1.4;color:rgba(36,16,48,.78);font-weight:500}  /* ---------- Referral ---------- */ .panel-blush{background:#FFFFFF;border:3px solid #000000;border-radius:28px;padding:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:48px;align-items:center;box-shadow:10px 10px 0 #000000} .ref-lead{margin:18px 0 0;font-size:17px;line-height:1.5;color:rgba(36,16,48,.72);max-width:400px} .steps{display:flex;flex-direction:column;gap:12px} .step{background:#FFFFFF;border:2.5px solid #000000;border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:14px} .step-n{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;color:#FF5A1F;flex:none} .step-t{font-size:15.5px;line-height:1.4;font-weight:500} .step-dark{background:#000000;color:#FF5A1F} .step-dark .step-n{color:inherit} .steps-note{margin:2px 0 0;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:rgba(36,16,48,.55)}  /* ---------- FAQ ---------- */ .faq-grid{display:grid;grid-template-columns:minmax(0,.66fr) minmax(0,1fr);gap:52px;align-items:start} .faq-lead{margin:16px 0 0;font-size:16.5px;line-height:1.5;color:rgba(36,16,48,.65);max-width:280px} .faq-list{display:flex;flex-direction:column;gap:11px} .faq{border:2.5px solid #000000;border-radius:18px;overflow:hidden;background:#FFFFFF;transition:background .25s ease} .faq.is-open{background:#FFFFFF} .faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;cursor:pointer} .faq-q span:first-child{font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em} .faq-icon{flex:none;font-family:'Bricolage Grotesque',sans-serif;font-size:26px;line-height:1;font-weight:800;color:#FF5A1F;transition:transform .35s cubic-bezier(.2,.7,.2,1)} .faq.is-open .faq-icon{transform:rotate(135deg)} .faq-a{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease} .faq.is-open .faq-a{max-height:260px;opacity:1} .faq-a > div{padding:0 22px 20px;font-size:16px;line-height:1.55;color:rgba(36,16,48,.72);max-width:560px}  /* ---------- Final CTA ---------- */ .cta-wrap{max-width:1320px;margin:76px auto 0;padding:0 36px} .panel-cta{background:#000000;border:3px solid #000000;border-radius:28px;padding:56px 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:52px;align-items:center;color:#FFFFFF;box-shadow:10px 10px 0 #FF5A1F} .cta-lead{margin:18px 0 0;font-size:16.5px;line-height:1.5;color:rgba(255,246,233,.72);max-width:400px} .cta-check{display:flex;align-items:center;gap:10px;margin-top:15px;font-size:14px;color:rgba(255,246,233,.68);font-weight:500} .cta-check input{accent-color:#FF5A1F;width:17px;height:17px}  /* ---------- Footer ---------- */ .footer{margin-top:76px;background:#FF5A1F;border-top:3px solid #000000} .footer-inner{max-width:1320px;margin:0 auto;padding:54px 36px 30px} .footer-cols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px;padding-bottom:34px;border-bottom:2.5px solid #000000} .footer-about{margin:13px 0 0;font-size:15px;line-height:1.5;color:rgba(36,16,48,.72);max-width:290px;font-weight:500} .footer-col{display:flex;flex-direction:column;gap:9px;font-size:15px;font-weight:600} .footer-h{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;opacity:.55;margin-bottom:3px} .wordmark{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(60px,12vw,168px);font-weight:800;letter-spacing:-.05em;line-height:.82;padding:26px 0 8px;white-space:nowrap} .footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;color:rgba(36,16,48,.62);font-weight:600}  /* ---------- Mobile menu (hidden on desktop) ---------- */ .menu-toggle{display:none;width:46px;height:46px;border-radius:50%;border:2.5px solid #000000;background:#FF5A1F;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;box-shadow:3px 3px 0 #000000;flex:none;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease} .menu-toggle:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #000000} .menu-toggle span{display:block;width:18px;height:2.5px;background:#000000;border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s ease} .header.is-open .menu-toggle{background:#FF5A1F} .header.is-open .menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .header.is-open .menu-toggle span:nth-child(2){opacity:0} .header.is-open .menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mobile-menu{display:none;flex-direction:column;gap:10px;border-top:3px solid #000000;background:#FFFFFF;padding:18px 28px 26px;max-height:calc(100vh - 78px);overflow-y:auto} .mm-link{display:flex;align-items:center;justify-content:space-between;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.03em;padding:14px 18px;border:2.5px solid #000000;border-radius:16px;background:#fff;transition:background .2s ease,transform .2s ease} .mm-link:hover{background:#FF5A1F;color:#000000;transform:translate(-2px,-2px)} .mm-link span{color:#FF5A1F} .mm-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px} .mm-login{font-size:15px;font-weight:700} .mm-cta{text-align:center} body.menu-open{overflow:hidden}  /* =========================================================    TABLET  (≤ 1100px)    ========================================================= */ @media (max-width:1100px){   .nav{display:none}   .login{display:none}   .menu-toggle{display:flex}   .header.is-open .mobile-menu{display:flex}   .header-inner{padding:0 28px}    .section{padding:64px 28px 0}   .hero{grid-template-columns:1fr;gap:56px;padding:52px 28px 56px}   .hero-title{font-size:74px}   .hero-lead{max-width:560px}   .signup{max-width:560px}   .hero-media{max-width:600px;width:100%;margin:0 auto}   .badge-sugar{left:-18px}   .sticker-baked{right:-12px}    .fs-56,.fs-54{font-size:48px}   .fs-52,.fs-50{font-size:46px}   .sec-note{max-width:260px}    .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px 28px}    .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}   .grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}   .grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}   .cat-name{font-size:25px}   .cat-meta{font-size:13px}   .cat-body{left:16px;right:16px;bottom:16px}    .panel-pink,.panel-blush{padding:36px}   .panel-ink{padding:40px 36px}   .match-grid{grid-template-columns:1fr}    .bundle{margin-top:64px}   .bundle-inner{padding:56px 28px}   .bundle-grid{grid-template-columns:1fr}   .bundle-items{grid-template-columns:repeat(2,minmax(0,1fr))}   .box-card{position:static}    .label-grid,.story-grid,.faq-grid{grid-template-columns:1fr;gap:40px}   .story-photos{max-width:620px}   .label-lead,.story-body,.story-pull{max-width:640px}   .faq-lead{max-width:460px}    .panel-blush{grid-template-columns:1fr;gap:32px}   .cta-wrap{margin-top:64px;padding:0 28px}   .panel-cta{grid-template-columns:1fr;gap:32px;padding:46px 40px}    .footer{margin-top:64px}   .footer-inner{padding:48px 28px 28px}   .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}   .footer-cols > div:first-child{grid-column:1 / -1} }  /* =========================================================    MOBILE  (≤ 640px)    ========================================================= */ @media (max-width:640px){   .offerbar{padding:9px 0}   .offerbar .marquee-group{font-size:12px;gap:22px;padding-right:22px}    .header-inner{padding:0 18px;height:64px;gap:12px}   .header-inner.is-compact{height:58px}   .logo{font-size:21px}   .header-actions{gap:8px}   .header-actions .btn-header{padding:10px 14px;font-size:13px;box-shadow:2px 2px 0 #000000}   .menu-toggle{width:42px;height:42px;box-shadow:2px 2px 0 #000000}   .mobile-menu{padding:14px 18px 22px;max-height:calc(100vh - 64px)}   .mm-link{font-size:21px;padding:13px 16px}   .mm-actions{flex-direction:column;align-items:stretch}   .mm-login{text-align:center;padding:8px 0}   .mm-cta{padding:15px 22px;font-size:15px}    .section{padding:56px 18px 0}   .hero{padding:36px 18px 44px;gap:44px}   .hero-kicker{font-size:11px;padding:7px 12px}   .hero-title{font-size:52px;line-height:.92}   .slap{padding:0 10px;border-radius:10px}   .hero-lead{font-size:17px}   .signup-row{flex-direction:column}   .signup-row .input-email,.signup-row button{width:100%}   .btn-hero,.btn-cta{padding:16px 22px}   .chips{gap:8px;margin-top:26px}   .chip{font-size:13px;padding:8px 13px}   .hero-photo{box-shadow:6px 6px 0 #000000;border-radius:20px}   .badge-sugar{left:-6px;top:-18px;width:98px;height:98px}   .badge-sugar b{font-size:24px}   .badge-sugar small{font-size:10px}   .sticker-baked{right:-6px;bottom:22px;padding:10px 13px;box-shadow:4px 4px 0 #FF5A1F}   .sticker-baked .k{font-size:11px}   .sticker-baked .v{font-size:19px}    .wordbar{padding:13px 0}   .wordbar .marquee-group{font-size:22px;gap:24px;padding-right:24px}    .trust-grid{padding:16px 18px;gap:10px}   .trust-item{padding:12px}   .trust-item .t{font-size:14px}   .trust-item .s{font-size:12px}    .sec-head{flex-direction:column;align-items:flex-start;gap:16px}   .mb-26,.mb-28,.mb-30,.mb-32{margin-bottom:24px}   .center-head{text-align:left;margin-bottom:24px}   .fs-56,.fs-54,.fs-52,.fs-50{font-size:40px}   .sec-note{max-width:none}   .sticker{font-size:11px;padding:5px 12px}    .grid-4{gap:12px}   .product{padding:9px;border-radius:16px}   .product-img{border-radius:11px}   .tag{font-size:9.5px;padding:4px 7px;top:6px;left:6px}   .product-cat{font-size:10px;margin-top:10px}   .product-name{font-size:15.5px;min-height:0}   .product-claim{font-size:12px}   .product-price .now{font-size:17px}   .product-price .was{font-size:12.5px}   .product-cta{font-size:13px;padding:10px}    .panel-pink,.panel-blush,.panel-ink,.panel-cta{padding:26px 18px;border-radius:22px;box-shadow:6px 6px 0 #000000}   .panel-ink{box-shadow:6px 6px 0 #FF5A1F}   .panel-cta{box-shadow:6px 6px 0 #FF5A1F}   .moods{grid-template-columns:1fr;gap:10px}   .mood{padding:14px 16px}   .mood-label{font-size:18px}   .match-card{padding:20px;box-shadow:5px 5px 0 #FF5A1F}   .match-name{font-size:19px}    .heat-scale{font-size:11px}   .grid-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}   .flavour-name{min-height:0}    .grid-3{grid-template-columns:1fr;gap:18px}   .cat{aspect-ratio:1/.9;box-shadow:5px 5px 0 #000000}   .cat-name{font-size:28px}    .bundle{margin-top:56px}   .bundle-inner{padding:48px 18px}   .bundle-items{grid-template-columns:1fr;gap:10px}   .box-card{padding:22px;box-shadow:5px 5px 0 #FF5A1F}    #clockGrid{grid-template-columns:1fr}   .clock{min-height:0;padding:20px}   .clock-time{font-size:34px}    .label-lead{font-size:16.5px}   .fact{grid-template-columns:1fr;gap:4px;padding:15px 16px}   .nutri{padding:24px 18px;box-shadow:6px 6px 0 #000000}   .nutri-title{font-size:22px}   .nutri-table{font-size:13px}   .nutri-table .th{font-size:10px}    .rating{text-align:left}   .review{padding:20px}   .review-quote{font-size:19px}    .story-photos{gap:10px}   .sp{border-radius:16px}   .sp-tall{box-shadow:5px 5px 0 #FF5A1F}   .story-pull{font-size:21px}   .story-body{font-size:15.5px}    #postsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}   .post{border-radius:16px}   .post-cap{font-size:12.5px;padding:10px 12px 12px}    .step{padding:14px}   .step-t{font-size:14.5px}   .ref-lead{font-size:16px}    .faq-q{padding:16px 18px}   .faq-q span:first-child{font-size:16.5px}   .faq-a > div{padding:0 18px 18px;font-size:15px}    .cta-wrap{margin-top:56px;padding:0 18px}   .cta-lead{font-size:15.5px}    .footer{margin-top:56px}   .footer-inner{padding:40px 18px 24px}   .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}   .wordmark{font-size:18vw;padding:22px 0 8px}   .footer-bottom{flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px} }  /* Small phones (≤ 380px) */ @media (max-width:380px){   .hero-title{font-size:44px}   .fs-56,.fs-54,.fs-52,.fs-50{font-size:35px}   .header-actions .btn-header{display:none}   .grid-4,.grid-6,#postsGrid{grid-template-columns:1fr} }  /* ---------- Motion preferences ---------- */ @media (prefers-reduced-motion: reduce){   .marquee-track{animation:none}   *{transition:none!important} }   /* =========================================================    ONO BITES FINAL BRAND PALETTE — LOGO ORANGE / BLACK / WHITE    ========================================================= */ :root{--ono-orange:#FF5A1F;--ono-black:#000;--ono-white:#fff} body{background:#fff;color:#000} a{color:#000} a:hover{color:#FF5A1F} .offerbar,.wordbar{background:#FF5A1F;color:#fff;border-color:#000} .btn-header,.btn-pinklink,.btn-cta,.btn-block-lime,.btn-block-ink,.product-cta,.box-btn,.clock-pick{background:#FF5A1F;color:#fff;border: 2px solid #000000;} .btn-header:hover,.btn-pinklink:hover,.btn-cta:hover,.btn-block-lime:hover,.btn-block-ink:hover,.product-cta:hover,.box-btn:hover,.clock-pick:hover{background:#000;color:#fff} .product,.flavour,.cat,.mood,.match-card,.bitem,.box-card,.faq,.trust-item,.card{background:#fff;border-color:#000} .panel-pink,.panel-ink{background:#fff;color:#000;border-color:#000;box-shadow:10px 10px 0 #FF5A1F} .bg-lime,.bg-orange,.bg-pink,.bg-blush,.tag-0,.tag-1,.tag-2,.tag-3,.cat-claim,.bcheck,.sticker-baked{background:#FF5A1F;color:#fff} .sticker,.hero-photo,.product-img,.flavour-img,.bitem-thumb,.box-card,.card-media,.ono-shop-page .card,.ono-shop-page .chip,.ono-shop-page .sort,.ono-shop-page .toolbar{border-color:#000} .product-claim,.match-kicker,.card-off,.price-now{color:#FF5A1F} .lift:hover{box-shadow:6px 10px 0 #FF5A1F}    

/* =========================================================
   ONO BITES — VISIBILITY / HOVER FIXES
   ========================================================= */
.panel-pink .c-cream,
.panel-pink .h2,
.panel-pink .sec-head .h2 {
  color:#000000 !important;
}
.panel-pink .sticker {
  color:#000000 !important;
}
.mood,
.mood-label,
.mood-sub,
.match-card,
.match-card .match-name,
.match-card .match-price,
.match-card .match-why {
  color:#000000;
}
.mood:hover,
.mood:hover .mood-label,
.mood:hover .mood-sub {
  color:#000000 !important;
}
.mood.is-active,
.mood.is-active .mood-label,
.mood.is-active .mood-sub {
  color:#000000 !important;
}
.product-name,
.product-name a,
.product-name:hover,
.product-name a:hover {
  color:#000000 !important;
}
.clock,
.clock-time,
.clock-title,
.clock-body {
  color:#000000;
}
.clock a,
.clock a:hover,
.clock .clock-pick,
.clock .clock-pick:hover {
  color:#FFFFFF !important;
}
.clock-lime:hover,
.clock-orange:hover {
  color:#000000;
}
.clock-lime:hover .clock-time,
.clock-lime:hover .clock-title,
.clock-lime:hover .clock-body,
.clock-orange:hover .clock-time,
.clock-orange:hover .clock-title,
.clock-orange:hover .clock-body {
  color:#000000 !important;
}
.box-card {
  background:#FFFFFF !important;
  color:#000000 !important;
}
.box-card .box-kicker,
.box-card .box-summary,
.box-card .box-lines,
.box-card .box-line,
.box-card .box-line .l,
.box-card .box-line .num,
.box-card .box-total,
.box-card .box-total .num-t,
.box-card .box-hint {
  color:#000000 !important;
}
.box-card .box-lines {
  border-top-color:rgba(0,0,0,.18) !important;
}
.box-card .box-line .save {
  color:#FF5A1F !important;
}
.box-card .btn-block-lime {
  color:#FFFFFF !important;
}
.footer a,
.footer a:hover,
.footer .footer-about,
.footer .footer-h,
.footer .footer-bottom {
  color:#000000 !important;
}
.footer .footer-h {
  opacity:.75;
}
.footer a:hover {
  text-decoration:underline;
}

/* ===============================================================
   ONO BITES — PINK COLOR RESTORATION
   Only restores the pink shades from the original stylesheet.
   No layout, spacing, sizing, HTML or functionality changes.
   =============================================================== */
a:hover{color:#C2246B;}
.c-pink{color:#000;}
.logo-dot{background:#249EA0;}
.btn-header{background:#249EA0;}
.btn-ink{box-shadow:3px 3px 0 #249EA0;}
.btn-ink:hover{box-shadow:5px 5px 0 #249EA0;}
.btn-pinklink{background:#249EA0;}
.btn-block-lime:hover{background:#249EA0;}
.btn-cta:hover{background:#249EA0;}
.bg-blush{background:#FFD9E6;}
.bg-pink{background:#249EA0;}
.bg-pink-flat{background:#249EA0;}
.slap{background:#249EA0;}
.hero-photo{background:#FFD9E6;}
.sticker-baked{box-shadow:5px 5px 0 #249EA0;}
/* ---------- Trust strip ---------- */
.trust{background:#FFD9E6;}
.tag-0{background:#249EA0;}
.product-claim{color:#C2246B;}
.product-cta:hover{background:#249EA0;}
/* ---------- Snack match ---------- */
.panel-pink{background:#249EA0;}
.match-kicker{color:#C2246B;}
.match-thumb{background:#FFD9E6;}
.flavour-img{background:#FFD9E6;}
/* ---------- Categories ---------- */
.cat{background:#FFD9E6;}
.bitem-thumb{background:#FFD9E6;}
.bitem.is-on .bcheck{background:#249EA0;}
.box-card{box-shadow:7px 7px 0 #249EA0;}
.clock-blush{background:#fff;}
.fact-k{color:#C2246B;}
.sp{background:#FFD9E6;}
.sp-tall{box-shadow:7px 7px 0 #249EA0;}
.story-pull{color:#C2246B;}
/* ---------- Referral ---------- */
.panel-blush{background:#FFD9E6;}
.step-n{color:#C2246B;}
.faq.is-open{background:#FFD9E6;}
.faq-icon{color:#C2246B;}
.panel-cta{box-shadow:10px 10px 0 #249EA0;}
.header.is-open .menu-toggle{background:#249EA0;}
.mm-link span{color:#249EA0;}
.sticker-baked{box-shadow:4px 4px 0 #249EA0;}
.panel-cta{box-shadow:6px 6px 0 #249EA0;}
.box-card{box-shadow:5px 5px 0 #249EA0;}
.sp-tall{box-shadow:5px 5px 0 #249EA0;}