/* v31 (19 Oct 2026): HER DESIGN BACK. Owner: "its become too white and unpleasing", "everything had a design - i even shared html".
   The v28 neutral layer (type28, v28*.css) is unlinked. This file keeps ONLY what v28-v30 added for function, content or
   markup that came after her design (sticky buy bar, Chutki above it, form error lines, legal folding, meal-plan fixes,
   shop record wrap, recipe pager, layouts for new markup, tighter gaps), drawn in HER look: pink borders, pink offset
   shadows, pink / neon pills, black panels, pink buttons, italic accents. Loaded last on the customer pages. */

/* ---------- 1. the rupee sign always draws as a rupee (Noto Devanagari draws only the sign) ---------- */
@font-face{font-family:"IM Rupee";src:url(../fonts/nd-rupee.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap;unicode-range:U+20B9}
@font-face{font-family:"IM Rupee";src:url(../fonts/nd-rupee.woff2) format("woff2");font-weight:300 800;font-style:italic;font-display:swap;unicode-range:U+20B9}
html:root{--f-head:"IM Rupee","Cormorant Garamond","Noto Sans Devanagari",Georgia,serif;--f-body:"IM Rupee","DM Sans","Noto Sans Devanagari",sans-serif;
  --sans:"IM Rupee","DM Sans",Selawik,"Segoe UI",system-ui,-apple-system,Arial,"Noto Sans Devanagari",sans-serif;
  --serif:"IM Rupee","Cormorant Garamond","Libre Bodoni",Georgia,serif;
  --v31-card-line:#F2D9E2;--v31-card-shadow:#FFD3E2;--v31-pill-bg:#FFE5EE;--v31-pill-tx:#C2185B}

/* ---------- 2. header: the ticker words sit in one scrolling line (markup added in v28), her bar heights kept ---------- */
.im-tk{display:flex;align-items:center;gap:32px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.im-tk::-webkit-scrollbar{display:none}
.im-ticker .im-tk>span{display:inline-flex!important;flex:none;gap:.3em}
.im-ticker .icons{flex:none}
@media (max-width:1180px){.im-tk{gap:20px}}

/* ---------- 3. her footer: phone folding without the gap inside the title, room under a sticky bar ---------- */
#im-footer .nw{white-space:nowrap}
html body #im-footer{padding-bottom:0!important;margin-bottom:0!important}
#im-footer .icm-foot-mantra{padding-bottom:calc(14px + var(--bar-room,0px))}
@media (max-width:1100px){#im-footer .icm-foot-col.icm-foot-help{display:block!important}}
@media (max-width:640px){
  #im-footer .icm-foot-col:not(.icm-foot-brand):not(.icm-foot-nl) h4{display:flex!important;justify-content:flex-start!important;gap:.25em;align-items:center;text-align:left}
  #im-footer .icm-foot-col:not(.icm-foot-brand):not(.icm-foot-nl) h4::after{margin-left:auto}
  #im-footer .icm-foot-col.icm-foot-help{display:block!important}
}

/* ---------- 4. Chutki: on phones it sits above any bottom buy bar ---------- */
@media (max-width:1199px){.chutki-fab{bottom:calc(var(--bar-room,0px) + 16px)!important}}

/* ---------- 5. forms: an empty field says so in words (v28 function), drawn in her pink ---------- */
.fld-err{display:block;width:100%;font-size:12px;color:#B0164F;margin-top:4px;text-align:left}
[aria-invalid=true]{border-color:#DB2A6B!important}
#jb-q:placeholder-shown ~ #jb-x{visibility:hidden}
.im-flash{outline:2px solid #DB2A6B!important;outline-offset:3px;border-radius:8px}
input[type=checkbox],input[type=radio]{accent-color:#DB2A6B}
input[type=file]{font-size:12px;max-width:100%}
input[type=file]::file-selector-button{font:400 14px var(--f-body);height:32px;padding:0 16px;margin-right:12px;border-radius:999px;border:1px solid #DB2A6B;background:#fff;color:#DB2A6B;cursor:pointer}

/* ---------- 6. space: no tall empty bands (owner: "optimum usage of digital real estate") ---------- */
#main{min-height:0!important}
.pg-head,.jb-band{padding-top:clamp(12px,1.4vw,24px)!important;padding-bottom:clamp(10px,1.2vw,16px)!important}
.v26-hold{padding:clamp(16px,2vw,32px) var(--gut) clamp(16px,2vw,40px)!important}
.im-next{margin-top:24px!important;margin-bottom:16px!important}
.im-next + .im-conn{margin-top:16px}

/* ---------- 7. hold pages ("opens soon"): her pink glow and bow circle back ---------- */
.v26-hold::after{content:'';position:absolute;right:-90px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#FFE5EE 0%,rgba(255,229,238,0) 70%);pointer-events:none}
.v26-c .ico{width:64px;height:64px;border-radius:50%;background:#FFF0F5;display:flex;align-items:center;justify-content:center;font-size:32px}
/* checkout while ordering is closed: what is in the cart (v28 content), as one of her pink-edged cards */
.v28-hsum{width:100%;max-width:520px;margin:4px 0 0;text-align:left;border:1px solid var(--v31-card-line);border-radius:24px;box-shadow:6px 6px 0 var(--v31-card-shadow);padding:14px 18px;background:#fff}
.v28-hsum .lbl{font-size:12px;color:#DB2A6B;margin:0 0 8px}
.v28-hsum ul{list-style:none;margin:0;padding:0}
.v28-hsum li{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid #F7E3EA;font-size:14px}
.v28-hsum li:first-child{border-top:0;padding-top:0}
.v28-hsum img{width:48px!important;height:48px!important;max-width:48px;object-fit:contain;border-radius:8px;border:1.5px solid #E32C6F;flex:none}
.v28-hsum .n{flex:1;min-width:0;display:flex;flex-direction:column}
.v28-hsum .n small{font-size:12px;color:#6B6B6B}
.v28-hsum .p{flex:none;margin-left:auto;text-align:right;color:#E04B83}
.v28-hsum .tot{display:flex;justify-content:space-between;border-top:1.5px solid #E32C6F;padding-top:8px!important;margin:4px 0 0!important;font-size:14px}
.v28-hsum .tot span:last-child{color:#E04B83}
.v28-hsum .note{font-size:12px!important;color:#6B6B6B!important;margin:8px 0 0!important}
.v28-hsum .note a,.v28-alt a{color:#DB2A6B}
.v28-alt{font-size:12px!important;color:#6B6B6B}

/* ---------- 8. 3 World Records strip ---------- */
/* phones: v27 behaviour (her record cards scroll sideways inside the band) */

/* ---------- 9. Keep exploring story cards on phones and tablets: photo left, title beside it ---------- */
@media (max-width:1199px){
  .ic-grid.ic-3 .ic-card{display:grid!important;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;row-gap:2px;align-items:start}
  .ic-grid.ic-3 .ic-card .ic-ph{grid-row:1/3;margin:0!important}
}

/* ---------- 10. product: price and the actions (v28 markup), in her board's look ---------- */
html body .pd-buy{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;margin-top:8px}
html body .pd-pr{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px;text-align:center}
html body .pd-pr p{margin:0}
html body .pd-pr .col{grid-column:auto!important;display:flex;flex-direction:column;align-items:center;gap:4px}
html body .pd-buy .qrow{justify-content:center;margin:0}
html body .pd-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center}
html body .pd-acts .gbtn,html body .pd-acts .pbtn{margin:0;flex:0 0 auto;width:auto!important;padding-left:20px!important;padding-right:20px!important}
html body .pd-buy .pd-gst{margin:0;text-align:center}
html body .pd-nnote[hidden]{display:none}
html body .pd-src{margin-left:4px}
html body .pd-time .tr{flex-wrap:wrap}
html body .pd-stick.off{display:none!important}
html body .rlist{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 24px;font-size:14px}
html body .rlist li{padding:8px 0;border-bottom:1.5px solid #FFC6D9}
html body .rlist a{color:#E04B83;text-decoration:none}
html body .rlist a:hover{text-decoration:underline}
html body .rlist span{display:block;font-size:12px;color:#6B6B6B}
@media (max-width:900px){
  html body .pd-time .tr,html body .pd-time .row{flex-direction:column;align-items:flex-start;gap:4px}
  html body .pd-time .tl{display:none}
}
@media (max-width:799px){
  .pd-photo{max-height:300px}
  .pd-photo img{max-height:280px;object-fit:contain}
  nav.crumb{margin-top:8px!important;margin-bottom:6px!important}
}
/* product on a tablet (680-899): photo beside the name, facts and buy box */
@media (min-width:680px) and (max-width:899px){
  .pd-top{grid-template-columns:minmax(220px,300px) minmax(0,1fr)!important;grid-template-areas:"hd hd" "ph fa" "th fa" "de de"!important;grid-template-rows:auto auto 1fr auto!important;gap:12px 20px!important;align-items:start}
  .pd-photo{max-width:none!important;max-height:none!important;margin:0!important}
  .pd-photo img{max-height:none!important}
}
html body:has(.pd-main) .im-conn .ic-in{max-width:none}

/* ---------- 11. cart: You might also like sits under the cart (v28 markup), still her pink-and-green box ---------- */
@media (min-width:1181px){html body .ct{grid-template-columns:minmax(0,1fr) 320px;align-items:start}html body .ct-side{position:sticky;top:16px;grid-column:2;grid-row:1 / span 2}html body .ct-ymal-in{grid-column:1;grid-row:2}}
html body .ym-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
html body .ct-ymal-in .ym{display:flex;flex-direction:column;gap:8px;padding:0 0 4px}
html body .ct-ymal-in .ym img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
html body .ct-pm{display:none}
@media (max-width:640px){
  html body .ct-p{display:none}
  html body .ct-pm{display:block;margin:2px 0;color:#E04B83}
  html body .ct-l{gap:4px 16px}
  html body .ym-g{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* recipe cart and wishlist */
html body .rk-head[hidden]{display:none!important}
html body .wl-none .wl-idea{margin:24px auto 0;text-align:center}
html body .wl-idea .u-h.sm{text-transform:none!important;font-size:18px} /* v31 space round: sentence case, no small caps (no letter-spaced capitals) */
/* search: the button sits beside the field */
html body .s-form{display:flex!important;align-items:flex-end;gap:12px;max-width:none!important;width:100%}
html body .s-form .field{flex:1;min-width:0;margin:0}
html body .s-form .btn{flex:none;align-self:flex-end!important;margin:0 0 1px!important}
/* thank-you and orders: an order saved on this device shows instead of the hold (v28 function) */
html body[data-hold] main > .sh-live{display:block!important}
html body[data-hold] main > .ty.sh-live{display:flex!important}
html body .ty-b .btn,html body .wl-all .btn{flex:none}
html body[data-hold] main:has(> .sh-live) > .v26-hold{display:none!important}
html body .ty .dh-line{background:#0A0A0A;color:#fff;border-left:4px solid #39FF14;border-radius:16px;padding:12px 16px}

/* ---------- 12. recipes ---------- */
@media (max-width:799px){
  .rc-top{margin-top:8px!important}
  .rc-intents{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none;padding:0 16px;margin:0 -16px 8px!important;gap:8px!important}
  .rc-intents::-webkit-scrollbar{display:none}
  .rc-intents .chip{flex:none}
}
/* recipe card on a phone: Cook keeps its own row under the three icons */
@media (max-width:640px){
  html body .rc-act{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .rc-act button:nth-child(3){border-right:0!important}
  html body .rc-act .rc-go{display:flex!important;grid-column:1/-1;justify-self:stretch;justify-content:center;margin:2px 8px 8px}
}
/* recipe page: nutrients in rows of five, the second row only where it has values (v28 markup) */
html body .rd-nut{grid-template-columns:repeat(5,minmax(0,1fr))!important}
html body .rd-nut.rd-nut2{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:40%}
html body .rd-links{gap:0 20px!important}
html body .rd-links button,html body .rd-links a{white-space:nowrap}
html body .rd-hbg{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .rd-hbg.one{grid-template-columns:1fr!important}
html body .rd-hb>p{padding-bottom:12px;border-bottom:4px solid #DB2A6B;border-radius:0 0 2px 2px}
html body .rd-media.solo{grid-template-columns:1fr!important}
html body #rd .im-next{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
@media (min-width:900px){.rd-quick{display:none!important}}
@media (max-width:900px){html body .rd-top .rd-media{order:-1!important}html body .rd-nut.rd-nut2{max-width:none}}
@media (max-width:640px){html body .rd-nut b,html body .rd-nut span{font-size:12px!important}}
/* blog list: her board (big featured photo with Share on it, the body rail with "I love my body" under each) is v27 markup and CSS, nothing here */
/* blog story: photo height capped, comments in the story column */
html body .jb-art .hero{aspect-ratio:auto!important;height:420px}
html body .jb-art .hero.noimg{height:280px}
html body .jb-art .hero.noimg img{padding:24px!important;object-fit:contain!important}
html body .cm-wrap{margin-top:32px!important;padding-left:0!important;padding-right:0!important}
@media (min-width:901px){html body .cm-wrap{margin-left:calc(200px + clamp(24px,6vw,48px))!important;margin-right:0!important;max-width:820px!important}}
@media (max-width:640px){html body .jb-art .hero{height:240px}html body .jb-art .hero.noimg{height:200px}}
/* contribute and ideas: the send button stays under the last field (it floated over the text box) */
html body #fm-form .sub{position:static!important;display:inline-flex;align-items:center;margin-top:8px!important}
html body .fm-wrap{padding:clamp(12px,1.4vw,24px) clamp(16px,3vw,40px) 32px!important;box-sizing:border-box}
@media (max-width:640px){html body .fm{padding:20px 16px!important;max-width:100%!important;box-sizing:border-box}}
html body .rc-act button,html body .rc-act button span{color:#555}

/* ---------- 13. meal plan (fixes she said yes to: 6 slots a day, score bar, card actions) ---------- */
.mpx #rg>.hq-bar{grid-column:1/-1;grid-row:2;margin:0}
.mpx #rg>.hq-panel{grid-column:1/-1;grid-row:3;margin:0}
.mpx #rg>.hq-panel[hidden]{display:none}
@media (min-width:900px){.mpx .mp-right::after{content:"";display:block;position:sticky;bottom:0;height:40px;margin-top:-40px;background:linear-gradient(rgba(245,244,241,0),#F5F4F1);pointer-events:none}}
.mpx .mp-right-inner{padding-bottom:24px}
.mpx .mp-nav-btn{position:relative!important}
.mpx #nb-rec,.mpx #nb-rec.show{display:none!important}
.mpx .mp-nav-badge,.mpx .mp-nav-badge.hi{top:2px;right:2px;left:auto}
.mpx .ri-overlay-top>div{flex-wrap:nowrap!important;overflow:hidden;min-width:0}
.mpx .rc-card{height:100%}
.mpx .rb{flex:1 1 auto}
.mpx .rb-foot{margin-top:auto}
.mpx .rb-meta{flex-wrap:wrap;column-gap:8px;row-gap:0}
@media (max-width:640px){.mpx .rb-foot{flex-wrap:wrap;gap:6px}.mpx .rb-foot .btn-pk{flex:1 1 100%}}
.mpx div.sb-family-tab,.mpx div.sb-family-tab:hover{cursor:default}
.mpx .sb-inv-count:empty{display:none}
.mpx .rg-empty-t,.mpx .rg-empty-t *{font-family:var(--f-head)!important}
html body .rc-sub i[data-accent]{font-family:var(--f-accent)!important;font-style:normal!important;font-size:14px!important} /* her cursive "ifct + usda" on recipe cards */
.pg .mpr-go{text-align:center;padding:8px 16px 0;margin:0}
.pg:has(.mpr-go){padding-bottom:24px}
.mpr-go p{margin:0}

/* ---------- 14. app area: layouts for the v28 markup, in her MagicApp look (pink-edged cards, pink pills, black stage) ---------- */
#main .btn-line[disabled],#main .btn-line.is-off{opacity:.45!important;cursor:default!important;pointer-events:none}
body[data-a28] #main [hidden]{display:none!important}
body[data-a28] #main form button[type=submit],body[data-a28] #main form .btn{position:static!important}
body[data-a28] #main>.pg,body[data-a28] #main>div.pg{padding-bottom:24px!important}
body[data-a28] #main .pg>:last-child,body[data-a28] #main .pg>section:last-child>:last-child{margin-bottom:0!important}
body[data-a28] #main .pg>section{margin-bottom:32px}
body[data-a28] #main .pg>:has(+[hidden]:last-child){margin-bottom:0!important}
body[data-a28] .im-next{margin-top:8px!important}
/* her "coming soon" pill */
.ma28-chip,#main .ev28-chip{display:inline-flex;align-items:center;align-self:flex-start;min-height:24px;padding:0 12px;border-radius:999px;background:var(--v31-pill-bg);color:var(--v31-pill-tx);font-size:12px}
/* tabs: v27 pill tabs (her .tabs/.tab look); on a phone the row scrolls sideways instead of wrapping */
@media (max-width:640px){body[data-a28] #main .a28-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}body[data-a28] #main .a28-tabs::-webkit-scrollbar{display:none}body[data-a28] #main .a28-tabs>*{flex:none;white-space:nowrap}}
@media (max-width:800px){body[data-a28] #main .stage{padding:16px!important}}

/* events: two columns per event card on a laptop, her pink-edged card */
#main #ev{max-width:none}
#main #ev .ev28{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:16px 48px;align-items:start;padding:24px!important;margin:0 0 20px!important;width:100%;box-sizing:border-box;background:#fff} /* v31: v27 cardw look (light grey line, 16px corners, no shadow) */
#main #ev .ev28-a,#main #ev .ev28-b,#main #ev .ev28-more{display:flex;flex-direction:column;gap:12px;min-width:0}
#main #ev .ev28 h2,#main #ev .ev28 h3{margin:0!important}
#main #ev .ev28-when{margin:0!important}
#main #ev .ev28-cd{gap:8px}
#main #ev .ev28-ready{display:grid;gap:8px}
#main #ev .ev28 .muted{margin:0!important}
#main #ev .ev28-day{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
#main #ev .ev28-b{border-left:1.5px solid #FFC6D9;padding-left:24px}
#main #ev .ev28-reg>summary{list-style:none;cursor:pointer;align-self:flex-start;width:auto!important}
#main #ev .ev28-reg>summary::-webkit-details-marker{display:none}
#main #ev .ev28-reg[open]>summary{display:none}
#main #ev .ev28-reg .form{display:flex;flex-direction:column;gap:12px;margin:0}
#main #ev .ev28-acts{display:flex;gap:8px;flex-wrap:wrap}
#main #ev .ev28-all{margin:8px 0 0}
#main #ev>p.lead{margin:0 0 12px}
@media (max-width:799px){
  #main #ev .ev28{display:flex!important;flex-direction:column;padding:16px!important;gap:12px}
  #main #ev .ev28-a{display:contents}
  #main #ev .ev28-b{order:1;border-left:0;padding-left:0}
  #main #ev .ev28-more{order:2}
  #main #ev .ev28-b:has(.ev28-reg[open]){border-top:1.5px solid #FFC6D9;padding-top:12px}
  #main #ev .ev28-cd{align-self:stretch!important;width:100%!important;flex-wrap:nowrap!important}
  #main #ev .ev28-cd span{min-width:0!important;flex:1 1 0!important;text-align:center}
}

/* help */
body[data-a28=help] #main .a28-faq{padding:0!important;margin:0 0 8px!important}
body[data-a28=help] #main .a28-faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
body[data-a28=help] #main .a28-faq>summary::-webkit-details-marker{display:none}
body[data-a28=help] #main .a28-faq>summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.5px solid #DB2A6B;border-bottom:1.5px solid #DB2A6B;transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .15s}
body[data-a28=help] #main .a28-faq[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
body[data-a28=help] #main .a28-faq>p{margin:0!important;padding:0 16px 12px}
body[data-a28=help] #main .a28-faq>.btn{margin:0 16px 12px}
body[data-a28=help] #main #faq,body[data-a28=help] #main #c-form{max-width:760px!important}
body[data-a28=help] #main #t-form{display:flex!important;align-items:flex-end;gap:8px;max-width:760px;flex-wrap:wrap}
body[data-a28=help] #main #t-form .field{flex:1 1 260px;margin:0}
body[data-a28=help] #main #t-form .btn{align-self:flex-end!important;margin:0!important}
body[data-a28] #main .a28-kv{display:grid!important;grid-template-columns:160px minmax(0,1fr);gap:8px 16px;max-width:760px;margin:0}
body[data-a28] #main .a28-kv dt{grid-column:1;font-size:12px;color:#6B6B6B;margin:0}
body[data-a28] #main .a28-kv dd{grid-column:2;margin:0;overflow-wrap:anywhere}
@media (max-width:799px){body[data-a28] #main .a28-kv{grid-template-columns:110px minmax(0,1fr)}}
/* help / report */
body[data-a28=help-report] #main .a28-appeal{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px 48px;align-items:start;max-width:none}
body[data-a28=help-report] #main .a28-appeal-t{display:flex;flex-direction:column;gap:12px}
body[data-a28=help-report] #main .a28-appeal h2{margin:0}
body[data-a28=help-report] #main .pg>section{margin-bottom:16px!important}
@media (max-width:799px){body[data-a28=help-report] #main .a28-appeal{grid-template-columns:1fr}}
/* about, magic meal: photo beside words */
body[data-a28] #main .a28-split{align-items:center!important;gap:32px!important}
body[data-a28=about] #main .a28-split{margin-bottom:32px!important}
body[data-a28=about] #main .a28-split img{width:100%;max-height:420px;object-fit:cover;border-radius:16px!important}
body[data-a28] #main .a28-split h2{margin-top:0!important}
@media (max-width:640px){body[data-a28=about] #main .a28-split img{max-height:240px}}
/* sitemap */
body[data-a28=sitemap] #main .sm-cols{columns:4 220px;column-gap:32px}
body[data-a28=sitemap] #main .sm-cols section{margin-bottom:24px;break-inside:avoid}
body[data-a28=sitemap] #main .sm-cols h2{margin:0 0 8px!important;font-size:18px!important}
body[data-a28=sitemap] #main .sm-cols a{padding:2px 0}
body[data-a28=sitemap] #main .sm-cols details>summary{list-style:none;margin:4px 0 8px}
body[data-a28=sitemap] #main .sm-cols details>summary::-webkit-details-marker{display:none}
@media (max-width:640px){body[data-a28=sitemap] #main .sm-cols{columns:2 150px;column-gap:16px}body[data-a28=sitemap] #main .sm-cols section{margin-bottom:16px}body[data-a28=sitemap] #main .sm-cols a{min-height:32px!important;padding:0!important}}
/* legal shell (layout only; the documents stay as written); on a phone the contents fold */
body[data-a28^=legal-] #main .legal-grid{grid-template-columns:200px minmax(0,850px)!important;gap:48px!important}
body[data-a28^=legal-] #main .legal-doc{max-width:850px}
body[data-a28^=legal-] #main .toc .toc-d{margin:0 0 16px}
body[data-a28^=legal-] #main .toc .toc-d>summary{list-style:none;cursor:pointer;font-size:12px;margin:0 0 4px;display:flex;align-items:center;justify-content:space-between;color:#C2185B}
body[data-a28^=legal-] #main .toc .toc-d>summary::-webkit-details-marker{display:none}
body[data-a28^=legal-] #main .toc a{padding:4px 0!important;min-height:0!important;font-size:12px;line-height:1.4}
body[data-a28^=legal-] #main .toc hr{border:0;border-top:1.5px solid #FFC6D9;margin:8px 0 12px}
@media (min-width:901px){body[data-a28^=legal-] #main .toc .toc-d>summary{pointer-events:none}}
@media (max-width:900px){
  body[data-a28^=legal-] #main .legal-grid{grid-template-columns:1fr!important;gap:16px!important}
  body[data-a28^=legal-] #main .toc{display:flex;flex-direction:column;gap:8px}
  body[data-a28^=legal-] #main .toc .toc-d{margin:0;border:1.5px solid #E32C6F;border-radius:16px;padding:0 16px}
  body[data-a28^=legal-] #main .toc .toc-d>summary{min-height:40px;margin:0;font-size:14px}
  body[data-a28^=legal-] #main .toc .toc-d>summary::after{content:"";width:8px;height:8px;border-right:1.5px solid #DB2A6B;border-bottom:1.5px solid #DB2A6B;transform:rotate(45deg);margin-top:-4px}
  body[data-a28^=legal-] #main .toc .toc-d[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
  body[data-a28^=legal-] #main .toc .toc-l{padding:0 0 8px}
  body[data-a28^=legal-] #main .toc a{min-height:36px!important;display:flex!important;align-items:center;font-size:14px}
  body[data-a28^=legal-] #main .toc hr{display:none}
  body[data-a28^=legal-] #main .toc>.btn{align-self:flex-start}
}
/* MagicApp hub: her pillar cards (pink offset shadow), four across, two on a phone */
body[data-a28=magicapp] #main .ma28-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
body[data-a28=magicapp] #main .ma28-grid>a{min-height:0!important}
body[data-a28=magicapp] #main .ma28-grid>a .go{margin-top:auto;color:var(--pink-deep)}
body[data-a28=magicapp] #main .pg>section>h2{margin:0 0 12px!important}
@media (max-width:1100px){body[data-a28=magicapp] #main .ma28-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:800px){body[data-a28=magicapp] #main .ma28-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  body[data-a28=magicapp] #main .ma28-grid>a{padding:12px!important}
  body[data-a28=magicapp] #main .pg>section{margin-bottom:24px}}
/* Magic Circle: the five circles, pale until they open */
body[data-a28=magicapp-circle] #main .a28-hold{background:#0A0A0A;color:#fff;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
body[data-a28=magicapp-circle] #main .a28-hold h2{margin:0!important;color:#fff}
body[data-a28=magicapp-circle] #main .a28-hold p{margin:0;color:#ccc}
body[data-a28=magicapp-circle] #main .a28-hold .a28-circles{align-self:stretch;text-align:left}
body[data-a28=magicapp-circle] #main .a28-circles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}
body[data-a28=magicapp-circle] #main .a28-circles li{background:#111;border:1.5px solid #DB2A6B;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:2px;opacity:.8}
body[data-a28=magicapp-circle] #main .a28-circles span{font-family:var(--f-head);font-size:18px;color:#fff}
body[data-a28=magicapp-circle] #main .a28-circles small{font-size:12px;color:#FFC6D9}
@media (max-width:800px){body[data-a28=magicapp-circle] #main .a28-circles{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-a28=magicapp-circle] #main .a28-hold{padding:16px}}
/* coins, fix, kitchen care, notifications, nutri, tarot: the button beside its field */
body[data-a28=magicapp-coins] #main #co-calc{display:flex!important;align-items:flex-end;gap:12px;flex-wrap:wrap;max-width:760px}
body[data-a28=magicapp-coins] #main #co-calc .field{flex:1 1 200px;margin:0}
body[data-a28=magicapp-coins] #main #co-calc .btn{align-self:flex-end!important}
body[data-a28=magicapp-coins] #main .grid2{align-items:start}
body[data-a28=magicapp-coins] #main #co-led .btn{margin-top:8px}
body[data-a28=magicapp-fix] #main #x-form{max-width:760px}
body[data-a28=magicapp-fix] #main #x-form button[type=submit]{align-self:flex-start;justify-self:start;width:auto!important}
body[data-a28=magicapp-kitchen-care] #main #k-form{display:grid!important;grid-template-columns:2fr 1fr 1fr auto;align-items:end;gap:12px;max-width:none}
body[data-a28=magicapp-kitchen-care] #main #k-form .btn{align-self:end!important;margin:0!important}
@media (max-width:800px){body[data-a28=magicapp-kitchen-care] #main #k-form{grid-template-columns:1fr 1fr}body[data-a28=magicapp-kitchen-care] #main #k-form .field:first-child{grid-column:1/-1}body[data-a28=magicapp-kitchen-care] #main #k-form .btn{grid-column:1/-1;justify-self:start}}
body[data-a28=magicapp-notifications] #main #nt-form{max-width:760px}
body[data-a28=magicapp-nutri] #main .a28-askf{display:flex!important;align-items:flex-end;gap:8px;max-width:760px}
body[data-a28=magicapp-nutri] #main .a28-askf .field{flex:1;margin:0}
body[data-a28=magicapp-nutri] #main .a28-askf .btn{align-self:flex-end!important}
body[data-a28=magicapp-nutri] #main .a28-fac{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px 48px;align-items:start}
body[data-a28=magicapp-nutri] #main .a28-fac h2{margin-top:0!important}
body[data-a28=magicapp-nutri] #main .a28-fac #fa-done{grid-column:2}
body[data-a28=magicapp-nutri] #main .a28-fa button[type=submit]{justify-self:start;align-self:flex-start;width:auto!important}
@media (max-width:800px){body[data-a28=magicapp-nutri] #main .a28-fac{grid-template-columns:1fr}body[data-a28=magicapp-nutri] #main .a28-fac #fa-done{grid-column:1}}
body[data-a28] #main .pg>section{margin-bottom:24px}
/* 404 */
body[data-a28="404"] #main .err404 h1{margin:0 0 8px!important}
body[data-a28="404"] #main .err404 p{margin:0 0 12px}

/* ===================================================================================================================
   15. v31 SPACE ROUND (19 Oct, owner at 1906px: "suddenly everything has become centre aligned on home page ... the other
   pages effective utilisation of space has not happened"). Only container widths, columns and gaps change here; her colours,
   bands, cards, borders and imagery stay. Wide screens (>=1280): content runs to the same 32px gutter as the header strip.
   =================================================================================================================== */
/* the 32px gutter token: in v31-chrome.css */
/* home: her sections keep their styling; their 1280px centre column becomes the full width */
@media (min-width:1280px){
  html body .hh .wrap,html body .hh .hero .wrap{max-width:none!important;padding-left:var(--gut)!important;padding-right:var(--gut)!important}
  html body .hh .soul-fivers{max-width:none}
  html body .hh .soul-wrap{max-width:none}
  html body .hh .soul-wrap>p,html body .hh .soul-wrap>.soul-second{max-width:920px;margin-left:auto;margin-right:auto}
  html body .hh .cdb-cards{gap:24px}
}
/* kits and recipes rows: 6 across from 1600 (more cards, not wider cards); 4 below */
@media (min-width:1600px){
  html body .hh .prod-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  html body .hh .rec-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  html body .hh .gf-flow{grid-template-columns:minmax(0,1fr) 260px}
}
@media (max-width:1599px){html body .hh .prod-grid>.prod-card:nth-child(n+5),html body .hh .rec-grid>.rec-card:nth-child(n+5){display:none}}
/* her footer width: in v31-chrome.css (shared by every page) */
/* help: questions on the left, the forms on the right (they were one 760px column with the right half empty) */
@media (min-width:1280px){
  body[data-a28=help] #main .pg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
  body[data-a28=help] #main .pg>section:first-child{grid-column:1;grid-row:1 / span 6}
  body[data-a28=help] #main .pg>*:not(section:first-child){grid-column:2}
  body[data-a28=help] #main #faq,body[data-a28=help] #main #c-form,body[data-a28=help] #main #t-form{max-width:none!important}
  body[data-a28=help] #main .pg>section:first-child>.field{max-width:none}
}
/* magicapp forms that sat in a 760px column: the form keeps its width, the page around it uses two columns where it has two parts */
@media (min-width:1280px){
  body[data-a28] #main .a28-kv{max-width:none}
}
/* account (signed in) and orders: the full width */
@media (min-width:1280px){html body .v30a .a-wrap:not(.a-narrow):not(.a-split){max-width:none;padding-left:var(--gut);padding-right:var(--gut)}}
/* partner programme widths: in v31-partner.css (it loads after this file) */

/* ===================================================================================================================
   16. NO LETTER-SPACED CAPITALS (lead, 19 Oct: "no letter-spaced uppercase anywhere ... labels become sentence case DM Sans").
   Every label that was drawn in spaced capitals by CSS is drawn as written (sentence case) with normal spacing, on every
   customer page, header and footer included. Words her boards spell in capitals in the text itself are left as written.
   Headings keep their own (negative) tracking. The partner dashboard keeps its board look (only its shared footer changes).
   =================================================================================================================== */
html body:not([data-dash]) :not(h1,h2,h3,h1 *,h2 *,h3 *),html body[data-page=meal-plan] :not(h1,h2,h3,h1 *,h2 *,h3 *){letter-spacing:normal!important}
html body:not([data-dash]) *,html body[data-page=meal-plan] *{text-transform:none!important}
/* header and footer: in v31-chrome.css */
html body:not([data-dash]) h2.u-h.sm,html body:not([data-dash]) .pd-h1 span,html body:not([data-dash]) .rd-h.g,html body:not([data-dash]) .rc-rail h2,html body:not([data-dash]) .fr-h{letter-spacing:normal!important}
html body .wl-idea .u-h.sm{font-variant-caps:normal!important}
/* recipe and shop cards sitewide: the kind label is a plain grey line, the title one style (no pink italic last word) */
html body .hh .prod-cat,html body .hh .rec-cuisine{color:#6B6B6B!important;font-size:12px!important}
html body .hh .prod-name em,html body .hh .rec-title em{font-style:normal!important;color:inherit!important;font-family:inherit!important}