/* Storefront layout. Calm, refined type (Libre Baskerville headings, Nunito Sans text); colours come from assets/themes.js. */
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:10px;font-weight:600}
.skip:focus{left:12px}
.only-m{display:none!important}
.loader{padding:120px 16px;text-align:center;color:var(--muted)}
section h2{font-size:clamp(26px,2.8vw,36px)}
.eyebrow{display:block;margin-bottom:8px}

/* announcement bar */
.announce{background:var(--bar);color:var(--bar-ink);font-size:12.5px;font-weight:500;letter-spacing:.05em}
.announce .abar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px}
.announce p{margin:0;text-align:center;flex:1;max-width:720px;line-height:1.3;padding-block:6px}
.ab{background:none;border:0;color:inherit;font-size:18px;line-height:1;padding:2px 10px;opacity:.6}
.ab:hover{opacity:1}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.hbar{display:flex;align-items:center;gap:18px;min-height:76px}
.logo{display:block;height:54px;flex:none;text-decoration:none}
.loc{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:transparent;border-radius:10px;padding:6px 12px 6px 9px;text-align:left;color:var(--ink);min-width:0;max-width:220px}
.loc svg{color:var(--brand);flex:none}
.loc span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.loc small{font-size:11px;color:var(--muted)}
.loc b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;gap:2px;margin-left:10px;flex-wrap:wrap}
.nav a{font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:9px 12px;border-radius:8px;white-space:nowrap;position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;background:var(--brand);transform:scaleX(0);transition:transform .2s}
.nav a:hover::after{transform:scaleX(1)}
#navProducts{display:contents}
.icons{display:flex;gap:4px;margin-left:auto}
.ib{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:transparent;border:0;color:var(--ink)}
.ib:hover{background:var(--soft)}
.count{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--brand-ink);font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1}

/* hero banner: text panel + photos that cross-fade with a slow zoom */
.hero{padding-top:22px}
.hero-box{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:var(--soft);border-radius:22px;overflow:hidden;min-height:470px}
.hero-text{padding:56px 48px 70px 56px;display:flex;flex-direction:column;justify-content:center;color:var(--soft-ink)}
.hero-text .eyebrow{color:var(--brand)}
.hero-text h1{font-size:clamp(30px,3.6vw,48px);line-height:1.15;font-weight:400}
.hero-text p{font-size:17px;line-height:1.65;margin:16px 0 26px;opacity:.85;max-width:440px}
.hero-text .acts{display:flex;gap:10px;flex-wrap:wrap}
.hero-text.in > *{animation:rise .7s ease both}
.hero-text.in > *:nth-child(2){animation-delay:.08s}
.hero-text.in > *:nth-child(3){animation-delay:.16s}
.hero-text.in > *:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.hero-media{position:relative;background:var(--photo);overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;transform:scale(1.02)}
.hero-media img.on{opacity:1;animation:zoom 7s ease-out forwards}
@keyframes zoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.dots{position:absolute;left:56px;bottom:26px;display:flex;gap:8px;align-items:center}
.dots button{width:28px;height:3px;border-radius:2px;border:0;background:var(--soft-ink);opacity:.2;padding:0;position:relative;overflow:hidden}
.dots button[aria-current="true"]{opacity:1;background:color-mix(in srgb,var(--soft-ink) 20%,transparent)}
.dots button[aria-current="true"]::after{content:"";position:absolute;inset:0;background:var(--brand);transform-origin:left;animation:fill var(--slide-ms,5500ms) linear forwards}
@keyframes fill{from{transform:scaleX(0)}}

/* quick-link pills */
.pills{display:flex;gap:8px;overflow-x:auto;padding-block:22px 4px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 16px;font-weight:500;font-size:13px;white-space:nowrap;transition:border-color .15s,background .15s}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* collection */
.collection{padding-block:18px 48px}
.crumbs{font-size:12px;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.coll-head{margin-bottom:16px}
.coll-head h2{font-size:clamp(24px,2.4vw,30px);font-weight:400}
.coll-head .hint{margin-top:4px;font-size:13.5px}
.coll{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:start}
.filters{position:sticky;top:100px;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.fhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px}
.fhead b{font-family:var(--body);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.fhead .link{font-weight:500;font-size:12px}
.filters fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:10px 0 4px;display:flex;flex-direction:column;gap:2px}
.filters legend{float:left;width:100%;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.fchk{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;padding:4px 0;cursor:pointer}
.fchk input{width:14px;height:14px;margin:0;flex:none}
.fchk .n{margin-left:auto;color:var(--muted);font-size:11.5px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.toolbar .sub{font-weight:500;font-size:12.5px}
.sort{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.sort select{width:auto;padding:6px 10px;font-size:13px;font-weight:500;border-radius:8px}
.fn{background:var(--brand);color:var(--brand-ink);border-radius:999px;font-size:10.5px;padding:1px 7px}
.active-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.active-f:empty{display:none}
.af{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:4px 11px;font-weight:500;font-size:12px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

/* product card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s}
.card:hover{box-shadow:0 18px 36px -24px rgba(50,25,15,.45);transform:translateY(-3px)}
.card .pic{position:relative;display:block;width:100%;aspect-ratio:4/3;background:var(--photo);border:0;padding:0;overflow:hidden}
.card .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.card:hover .pic img{transform:scale(1.05)}
.badge{position:absolute;top:10px;left:10px;background:var(--surface);color:var(--brand);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;border-radius:5px;padding:3px 8px;z-index:1;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.badge.out{background:var(--ink);color:var(--bg)}
.badge.sale{background:var(--accent);color:var(--accent-ink)}
.card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.szp{font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--brand)}
.card h3{font-size:16.5px;font-weight:400;margin-top:2px;line-height:1.3}
.card h3 button{all:unset;cursor:pointer}
.card h3 button:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}
.card .serves{font-size:12.5px;color:var(--muted)}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px}
.price{display:inline-flex;align-items:baseline;gap:8px;font-weight:600;font-size:14.5px;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.price s{font-size:12px;opacity:.55;font-weight:500}
.add{border:1px solid var(--brand);background:transparent;color:var(--brand);font-weight:600;border-radius:8px;padding:7px 12px;font-size:12.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s,color .15s}
.add:hover:not(:disabled){background:var(--brand);color:var(--brand-ink)}
.add:disabled{border-color:var(--line);color:var(--muted);opacity:1}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--brand);border-radius:8px;overflow:hidden}
.stepper button{border:0;background:transparent;color:var(--brand);font-weight:600;font-size:16px;width:32px;height:31px}
.stepper span{min-width:24px;text-align:center;font-size:13px;font-weight:600;font-variant-numeric:lining-nums tabular-nums}

/* moving photo strip */
.strip{padding-block:30px 46px}
.shead{text-align:center;margin-bottom:22px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:16px;width:max-content;animation:drift 48s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track figure{margin:0;width:280px;flex:none;border-radius:14px;overflow:hidden;background:var(--photo);border:1px solid var(--line)}
.track img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.track figcaption{padding:10px 14px 12px;font-size:13.5px;color:var(--muted);background:var(--surface)}
.track figcaption b{display:block;font-family:var(--display);font-weight:400;color:var(--ink);font-size:15.5px}
@keyframes drift{to{transform:translateX(calc(-50% - 8px))}}

/* why choose us */
.why{background:var(--surface);border-block:1px solid var(--line);padding-block:52px}
.why .wrap{text-align:center}
.why h2{margin-bottom:34px}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.wy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 12px}
.wy .ic{width:58px;height:58px;border-radius:50%;background:var(--soft);color:var(--brand);display:grid;place-items:center}
.wy b{font-family:var(--display);font-size:19px;font-weight:400}
.wy span{color:var(--muted);max-width:300px;line-height:1.6}

/* promo */
#promoSec{padding-block:52px 10px}
.promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.promo .txt{padding:46px 48px;display:flex;flex-direction:column;justify-content:center}
.promo h2{font-weight:400}
.promo p{font-size:16.5px;line-height:1.65;color:var(--muted);margin:14px 0 24px;max-width:440px}
.promo .btn{align-self:start}
.promo .hero-media{min-height:320px}

/* how to order */
.howto{padding-block:52px 10px}
.howto h2,.reviews h2,.contact h2{margin-bottom:22px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;counter-reset:s}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;line-height:1.6}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:22px;color:var(--brand)}

/* pay with confidence */
.trust-sec{padding-block:52px 10px}
.trust-sec h2{margin-bottom:22px}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:14px}
.tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}
.tr .ic{width:46px;height:46px;border-radius:50%;background:var(--soft);color:var(--brand);display:grid;place-items:center;margin-bottom:4px}
.tr b{font-family:var(--display);font-weight:400;font-size:17px}
.tr span:last-child{color:var(--muted);font-size:14.5px;line-height:1.6}
.safe{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.safe li{position:relative;padding-left:22px;line-height:1.5}
.safe li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

/* reviews */
.reviews{padding-block:52px 10px}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rev{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px}
.rev q{font-family:var(--display);font-style:italic;font-size:16px;line-height:1.6}
.rev span{font-weight:600;font-size:13px;color:var(--muted)}

/* story */
.story{padding-block:52px 10px}
.story-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center;background:var(--soft);color:var(--soft-ink);border-radius:22px;padding:40px 48px}
.story-art{display:grid;place-items:center}
.story-art .crum-logo{width:min(250px,100%);height:auto}
.story-art .plate{width:100%}
.story h2{margin-bottom:14px;font-weight:400}
.story p{margin:0 0 10px;font-size:16.5px;line-height:1.7}

/* contact */
.contact{padding-block:52px 60px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:4px}
.cbox .k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.cbox .v{font-family:var(--display);font-size:18px;overflow-wrap:anywhere}
.cbox .s{color:var(--muted);font-size:14px;white-space:pre-line;line-height:1.6}
.cbox .social{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

/* footer */
.foot{background:var(--foot);color:var(--foot-ink);padding-top:48px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.flogo{display:block;height:64px;margin-bottom:14px}
.fabout p{margin:0 0 14px;opacity:.8;max-width:340px;line-height:1.7}
.foot h3{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;opacity:.75}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.foot li{opacity:.85;overflow-wrap:anywhere}
.fl{background:none;border:0;padding:0;color:inherit;text-align:left;font-size:14.5px}
.fl:hover{text-decoration:underline}
.foot .social{display:flex;gap:8px;flex-wrap:wrap}
.foot .social a{border:1px solid currentColor;border-radius:999px;padding:5px 12px;font-size:12.5px;text-decoration:none;opacity:.8}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid color-mix(in srgb,var(--foot-ink) 18%,transparent);margin-top:36px;padding-top:16px;font-size:12.5px;opacity:.7}

/* floating buttons */
.wa-float{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:15;width:54px;height:54px;border-radius:50%;background:var(--wa);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.4)}
.cart-float{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:15;border:0;background:var(--ink);color:var(--bg);border-radius:12px;padding:13px 22px;font-weight:600;box-shadow:0 12px 26px -10px rgba(0,0,0,.5);white-space:nowrap}

/* product modal */
.pm{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;padding:22px 24px 26px}
.gal{display:flex;flex-direction:column;gap:10px}
.plate{background:var(--photo);border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:flex;gap:8px}
.thumbs button{width:78px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:1.5px solid transparent;padding:0;background:var(--photo)}
.thumbs button[aria-pressed="true"]{border-color:var(--brand)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pinfo{display:flex;flex-direction:column;gap:14px;min-width:0}
.pinfo h2{font-size:30px;font-weight:400}
.pinfo .line{color:var(--muted);margin:0;line-height:1.6}
.szs{display:flex;flex-direction:column;gap:8px;border:0;margin:0;padding:0}
.szs legend{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.sz{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 14px;cursor:pointer;transition:border-color .15s}
.sz input{width:16px;height:16px;margin:0}
.sz b{display:block;font-size:15px;font-weight:600}
.sz small{color:var(--muted);font-size:13px}
.sz .p{font-weight:600;font-size:15.5px;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.sz:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.sz.off{opacity:.55;cursor:not-allowed}
.buy{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.buy .btn{flex:1;min-width:180px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.qty button{border:0;background:transparent;width:38px;height:42px;font-size:17px;font-weight:600;color:var(--ink)}
.qty span{min-width:26px;text-align:center;font-weight:600;font-variant-numeric:lining-nums tabular-nums}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line);padding:12px 0}
.acc summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-size:14.5px}
.acc summary::after{content:"+";font-size:18px;line-height:1;color:var(--muted)}
.acc details[open] summary::after{content:"–"}
.acc p{margin:8px 0 2px;color:var(--muted);white-space:pre-line;line-height:1.65}

/* cart drawer */
#lines{display:flex;flex-direction:column;gap:12px}
.cline{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:10px;align-items:center}
.bin{width:40px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);display:grid;place-items:center;padding:0}
.bin:hover{color:#B42318;border-color:#E9B8B2}
.tots{border-top:1px solid var(--line);padding:14px 18px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.tots .r,.paybox .r,.receipt .r{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:lining-nums tabular-nums}
.receipt .r span:last-child,.tots .r span:last-child{white-space:nowrap;text-align:right}
.tots .big{font-weight:700;font-size:17px;margin-bottom:6px}
.paybox{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.acct{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--bg)}
.receipt{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.receipt hr{border:0;border-top:1px dashed var(--line);margin:6px 0;width:100%}
.ono{font-family:var(--display);font-size:22px}
.paybig{background:var(--soft);color:var(--soft-ink);border-radius:14px;padding:16px;text-align:center}
.paybig .sub{color:inherit;opacity:.8}
.paybig .amt{font-family:var(--display);font-size:28px;margin:4px 0}
.myo{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.myo ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.myo .ohead{display:flex;justify-content:space-between;gap:8px}
.myo .no{font-weight:600}
.myo .acts{display:flex;gap:8px;flex-wrap:wrap}
.pol{white-space:pre-line;line-height:1.7}

/* mobile menu */
.mlogo{display:block;height:44px}
.mlist{display:flex;flex-direction:column;gap:8px}
.mi{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px;text-align:left}
.mi .th{width:64px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--photo)}
.mi .th img{width:100%;height:100%;object-fit:cover;display:block}
.mi b{display:block;font-family:var(--display);font-weight:400}
.mi span.s{font-size:13px;color:var(--muted)}
.mlinks{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:6px}
.mlinks button{background:none;border:0;text-align:left;padding:12px 4px;font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line)}

/* theme preview panel */
.tpanel{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;width:min(310px,calc(100% - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px -12px rgba(0,0,0,.45);padding:12px}
.tp-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.tp-list{display:flex;flex-direction:column;gap:6px}
.tp{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:8px 10px;font-weight:600;font-size:13.5px;text-align:left}
.tp[aria-pressed="true"]{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.sw{display:flex;flex:none}
.sw i{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.9);margin-left:-5px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sw i:first-child{margin-left:0}
.tp-sub{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:10px 2px 6px}
.tp-list.fonts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fs{font-size:20px;line-height:1;width:28px;text-align:center;flex:none}
.tpanel{max-height:calc(100vh - 32px);overflow:auto}
.tpanel.min .tp-sub{display:none}
.tp-note{font-size:12px;color:var(--muted);margin:8px 2px 0}
.tpanel.min .tp-list,.tpanel.min .tp-note{display:none}
.tpanel.min{width:auto}
.tpanel.min .tp-head{margin:0}

@media (prefers-reduced-motion:reduce){
  .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .hero-media img.on{animation:none}
  .hero-text.in > *{animation:none}
  .dots button[aria-current="true"]::after{animation:none}
}

/* responsive: tablet */
@media (max-width:1100px){.nav a{padding:9px 8px;letter-spacing:.06em;font-size:12px}}
@media (max-width:960px){
  .only-m{display:revert!important}
  .only-d{display:none!important}
  .hbar{gap:10px;min-height:64px}
  .logo{height:44px}
  .coll{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 auto 0 0;top:0;width:min(340px,88%);z-index:31;border-radius:0 16px 16px 0;overflow:auto;display:none;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .filters.open{display:flex}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hero-box{grid-template-columns:1fr;min-height:0}
  .hero-media{order:-1;aspect-ratio:16/10}
  .hero-text{padding:24px 24px 52px}
  .dots{left:24px;bottom:20px}
  .promo{grid-template-columns:1fr}
  .promo .hero-media{order:-1;min-height:0;aspect-ratio:16/10}
  .promo .txt{padding:24px}
  .story-in{grid-template-columns:1fr;padding:28px 24px}
  .fgrid{grid-template-columns:1fr 1fr}
  .fabout{grid-column:1/-1}
  .pm{grid-template-columns:1fr;padding:16px}
  .track figure{width:220px}
  /* a full-width cart bar at the bottom instead of the small floating button */
  .cart-float{left:12px;right:12px;transform:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;border-radius:14px}
  body.has-cart .wa-float{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.has-cart{padding-bottom:76px}
}
/* computers: the cart bar is a pill at the bottom centre */
@media (min-width:961px){
  .cart-float{min-width:360px;border-radius:14px;padding:13px 20px}
  body.has-cart{padding-bottom:70px}
}
@media (min-width:641px){.mloc{display:none!important}}

/* responsive: phones */
@media (max-width:640px){
  html{scroll-padding-top:120px}
  body{font-size:15px}
  input,select,textarea{font-size:16px} /* 16px stops phones from zooming into a field */
  section h2{font-size:24px}
  .wrap{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}

  .announce{font-size:11.5px;letter-spacing:.03em}
  .announce .abar{min-height:30px}
  .announce p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:5px}
  .ab{display:none}
  .hbar{gap:6px;min-height:58px}
  .logo{height:40px;margin-right:auto}
  .top .loc{display:none}
  .ib{width:42px;height:42px}
  .mloc{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 10px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;text-align:left;color:var(--ink);font-size:14px}
  .mloc svg{color:var(--brand);flex:none}
  .mloc .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mloc .t b{font-weight:600}
  .mloc .go{flex:none;color:var(--muted);font-size:18px;line-height:1}

  .hero{padding-top:12px}
  .hero-box{border-radius:16px}
  .hero-media{aspect-ratio:16/11}
  .hero-text{padding:18px 18px 44px}
  .hero-text .eyebrow{margin-bottom:6px}
  .hero-text h1{font-size:25px}
  .hero-text p{font-size:14.5px;line-height:1.55;margin:10px 0 16px}
  .hero-text .acts{gap:8px;flex-wrap:nowrap}
  .hero-text .btn{padding:11px 18px;font-size:14px}
  .hero-text .btn.ghost{display:none}
  .dots{left:18px;bottom:18px}

  .pills{gap:6px;padding-block:14px 2px}
  .pill{padding:7px 14px;font-size:13px}

  .collection{padding-block:12px 30px}
  .crumbs{display:none}
  .coll-head{margin-bottom:12px}
  .coll-head h2{font-size:23px}
  .coll-head .hint{font-size:13.5px;margin-top:2px}
  .toolbar{flex-wrap:nowrap;gap:8px;margin-bottom:12px}
  .toolbar .sm{padding:8px 12px;font-size:13.5px}
  .toolbar .sub{flex:1;font-size:12.5px}
  .sort{margin-left:0}
  .sort .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sort select{padding:8px 10px;font-size:14px;max-width:160px}
  .grid{gap:10px}
  .card{border-radius:14px}
  .card:hover{transform:none}
  .badge{top:8px;left:8px;font-size:9.5px;padding:3px 7px;letter-spacing:.1em}
  .card .body{padding:10px 11px 12px;gap:2px}
  .szp{font-size:9.5px;letter-spacing:.1em}
  .card h3{font-size:15.5px;line-height:1.25}
  .card .serves{font-size:12px}
  .card .row{flex-direction:column;align-items:stretch;gap:8px;padding-top:10px}
  .price{font-size:14px}
  .add{justify-content:center;padding:8px 8px;font-size:12.5px}
  .stepper{justify-content:space-between}
  .stepper button{width:40px;height:36px}

  .strip{padding-block:22px 30px}
  .shead{margin-bottom:14px}
  .track{gap:10px;animation-duration:36s}
  .track figure{width:190px;border-radius:12px}
  .track figcaption{padding:8px 10px 10px;font-size:12px}
  .track figcaption b{font-size:14px}

  /* list-style sections: icon or number on the left, text on the right */
  .why{padding-block:30px}
  .why .wrap{text-align:left}
  .why h2{margin-bottom:16px}
  .why-grid,.trust{grid-template-columns:1fr;gap:10px}
  .wy,.tr{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start;text-align:left;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .why .wy{background:var(--bg)}
  .wy .ic,.tr .ic{width:44px;height:44px;grid-row:span 2;margin:0}
  .wy .ic svg,.tr .ic svg{width:22px;height:22px}
  .wy b,.tr b{font-size:16px;align-self:end}
  .wy span:last-child,.tr span:last-child{font-size:13.5px;line-height:1.5;max-width:none}
  .trust-sec,.howto,.reviews,.story{padding-block:30px 6px}
  .trust-sec h2,.howto h2,.reviews h2,.contact h2{margin-bottom:14px}
  .steps{grid-template-columns:1fr;gap:8px}
  .steps li{flex-direction:row;align-items:flex-start;gap:14px;padding:14px;font-size:14px;line-height:1.5}
  .steps li::before{font-size:18px;flex:none;width:26px}

  #promoSec{padding-block:30px 6px}
  .promo{border-radius:16px}
  .promo .hero-media{aspect-ratio:16/10}
  .promo .txt{padding:18px 18px 20px}
  .promo p{font-size:14.5px;margin:8px 0 16px}
  .promo .btn{align-self:stretch}

  .story-in{padding:22px 18px;gap:12px;border-radius:16px}
  .story-art .crum-logo{width:140px}
  .story p{font-size:15px}
  .contact{padding-block:30px 40px}
  .cgrid{grid-template-columns:1fr;gap:10px}
  .cbox{padding:16px}

  .foot{padding-top:32px}
  .fgrid{gap:22px 18px}
  .flogo{height:52px}
  .fbot{flex-direction:column;margin-top:24px}

  /* product details and the other dialogs open as bottom sheets */
  .modal,.modal.narrow{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:92vh;max-height:92dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .modal .dhead{position:sticky;top:0;background:var(--bg);z-index:2;padding:14px 16px 10px}
  .modal .dhead::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line)}
  .pm{gap:14px;padding:12px 16px 0}
  .thumbs button{width:64px}
  .pinfo{gap:12px}
  .pinfo h2{font-size:24px}
  .pinfo .line{font-size:14px}
  .sz{padding:11px 12px}
  .buy{position:sticky;bottom:0;z-index:1;background:var(--bg);margin:0 -16px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);flex-wrap:nowrap}
  .buy .btn{min-width:0}
  .acc{margin-bottom:14px}
  .drawer{width:100%}
  .dbody{padding:14px 16px}
  .tots{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}

  .wa-float{width:50px;height:50px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  body.has-cart .wa-float{bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .cart-float{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .tpanel{left:10px;right:10px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:360px){
  .grid{gap:8px}
  .hero-text h1{font-size:23px}
  .card .body{padding:9px 9px 11px}
  .card h3{font-size:15px}
  .add{font-size:12.5px}
}
#cartFloatTxt{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%}
#cartFloatTxt b{font-weight:600}

/* heading font: weight and size balance come from the chosen font style (assets/themes.js) */
h1,h2,h3,.hero-text h1,.coll-head h2,.card h3,.promo h2,.story h2,.pinfo h2,.wy b,.tr b,.track figcaption b,.cbox .v,.ono,.paybig .amt,.mi b,.rev q,.steps li::before{font-weight:var(--dw,400);font-size-adjust:var(--dadj,none)}

/* phones: shorter page. Lists become rows you swipe sideways; less spacing between sections. */
@media (max-width:640px){
  .hero-media{aspect-ratio:16/10}
  .why-grid,.trust,.steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-14px;padding:2px 14px 6px;scrollbar-width:none}
  .why-grid::-webkit-scrollbar,.trust::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none}
  .wy,.tr,.steps li{flex:0 0 80%;scroll-snap-align:start;scroll-margin-left:14px}
  .why{padding-block:24px}
  .why h2,.trust-sec h2,.howto h2{margin-bottom:12px}
  .trust-sec,.howto,.reviews,.story,#promoSec{padding-block:24px 4px}
  .trust-sec .link{font-size:13.5px}
  .strip{padding-block:18px 22px}
  .track figure{width:160px}
  .track figcaption{padding:7px 9px 9px}
  .promo .hero-media{aspect-ratio:16/9}
  .story-art{display:none}
  .story-in{padding:20px 18px}
  .contact{padding-block:24px 32px}
  .fgrid > div:nth-child(2){display:none}
  .fgrid{grid-template-columns:1fr 1fr}
  .fabout p{margin-bottom:10px}
  .foot ul{gap:6px;font-size:13.5px}
  .fl{font-size:13.5px}
}

/* phones: price and button share one line on each card */
@media (max-width:640px){
  .card .row{flex-direction:row;align-items:center;justify-content:space-between;gap:6px;padding-top:10px}
  .add .tc{display:none}
  .add{padding:7px 14px}
  .stepper button{width:30px;height:32px}
  .stepper span{min-width:20px}
}
.add{gap:.3em}

/* "Added to cart" message with a View cart button */
.toast{display:flex;align-items:center;gap:14px;justify-content:center}
.toast .tbtn{flex:none;background:var(--bg);color:var(--ink);border:0;border-radius:8px;padding:6px 12px;font-weight:600;font-size:13px}
body.has-cart .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.incart{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 8px 8px 14px;font-size:14px}
.incart .btn{padding:8px 14px;font-size:13.5px}
.toast span{min-width:0}
@media (max-width:640px){
  .toast{left:12px;right:12px;transform:none;max-width:none;justify-content:space-between;text-align:left;padding:10px 10px 10px 16px;border-radius:12px}
  .toast span{flex:1}
}

/* payment screenshot at checkout (same as Giftoria Atelier) */
.accts{display:flex;flex-direction:column;gap:8px}
.note.small{font-size:12.5px}
.proof-pick{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;text-align:left;border:1.5px dashed var(--brand);background:var(--soft);color:var(--ink);border-radius:14px;padding:12px 14px}
.proof-pick svg{flex:none;color:var(--brand)}
.proof-pick b{display:block;font-size:15px;font-weight:600}
.proof-pick small,.proof-row small{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.proof-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--bg)}
.proof-row img,.proof-row .ph{width:48px;height:60px;border-radius:8px;object-fit:cover;object-position:top;background:var(--soft);display:grid;place-items:center;color:var(--brand)}
.proof-row .pr-t{min-width:0}
.proof-row b{font-weight:600}
.proof-row.done{border-color:#BFDCCB;background:#F1F8F4}
.proof-row.done b{color:#1D6F4A}
.proof-row.error{border-color:var(--brand)}
.proof-row.error b{color:var(--brand)}
.proof-row .sm{min-height:40px}
.proof-skip{font-size:13px;text-align:left;margin-top:8px;padding:6px 0}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* cart lines on small phones: photo, name, quantity and bin all fit */
@media (max-width:400px){
  .cline{grid-template-columns:46px minmax(0,1fr) auto auto;gap:8px}
  .cline .mini{width:46px;height:46px}
  .cline .qty button{width:32px}
  .cline .qty span{min-width:22px}
  .bin{width:36px}
}

/* small phones: the announcement and the delivery bar show their full text (the announcement keeps one fixed
   height, so the page does not move when the message changes) */
@media (max-width:640px){
  .mloc .t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
}
@media (max-width:380px){
  .announce p{white-space:normal;overflow:visible;text-overflow:clip;min-height:calc(2.6em + 10px);display:flex;align-items:center;justify-content:center}
}