/* Craft Coffee Roasters — same family as kairospemoscoffeeshop.com + order.kairospemoscoffeeshop.com:
   Kairos yellow, black ink, Prompt display type, sticker buttons, teal "wallet card" plan cards. Change colors here only. */
:root{--yellow:#FFCC37;--yellow-2:#FFE9A6;--ink:#111;--muted:#3b3b3b;--card:#fff;--teal:#0b5d5b;--teal-deep:#0E2F2D;--neon:#5AFF24;--pink:#F7B8F2;
  --danger:#B3261E;--ok:#1d7a3a;--line:#111;--r:18px;--shadow:4px 4px 0 var(--ink)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--yellow);color:var(--ink);font:16px/1.45 Inter,-apple-system,system-ui,Segoe UI,Roboto,sans-serif}
a{color:inherit}img{max-width:100%;display:block}
h1,h2,h3,.disp{font-family:Prompt,Inter,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin:0 0 .5em}
h1{font-size:clamp(30px,5vw,52px)}h2{font-size:clamp(22px,3.2vw,32px)}h3{font-size:18px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* header */
.hdr{position:sticky;top:0;z-index:20;background:var(--yellow);border-bottom:2px solid var(--ink)}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}.logo img{height:46px;width:auto}
.nav{display:flex;gap:18px;margin-left:auto;align-items:center}.nav a{text-decoration:none;font-weight:600;text-transform:uppercase;font-size:14px;letter-spacing:.02em}
.nav a.on{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.stk.burger{display:none;margin-left:auto}
@media(max-width:860px){.nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--yellow);flex-direction:column;align-items:flex-start;padding:14px 20px 20px;border-bottom:2px solid var(--ink);gap:14px}.nav.open{display:flex}.stk.burger{display:inline-flex}.nav .stk{align-self:stretch;justify-content:center}}
/* sticker buttons */
.stk{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:10px 18px;
  font:800 14px/1 Prompt,Inter,sans-serif;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;box-shadow:var(--shadow);cursor:pointer;transition:transform .08s,box-shadow .08s}
.stk:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.stk:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.stk.blk{background:var(--ink);color:#fff}.stk.teal{background:var(--teal);color:#fff}.stk.y{background:var(--yellow)}.stk.big{padding:16px 26px;font-size:17px}.stk.full{width:100%}
.stk[disabled]{opacity:.5;pointer-events:none}.stk .n{background:var(--neon);color:var(--ink);border-radius:999px;padding:2px 8px;font-size:12px}
.link{background:none;border:0;padding:0;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;color:inherit}
/* cards */
.card{background:var(--card);border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:22px}.mt{margin-top:22px}.mt2{margin-top:44px}.mb{margin-bottom:18px}.muted{color:var(--muted)}.small{font-size:13px}.center{text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.pcard{display:flex;flex-direction:column;text-decoration:none;overflow:hidden}
.pcard .im{aspect-ratio:1/1;background:var(--yellow-2);border-bottom:2px solid var(--ink);overflow:hidden}.pcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.pcard:hover .im img{transform:scale(1.04)}
.pcard .t{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}.pcard .nm{font:800 16px/1.2 Prompt,Inter,sans-serif;text-transform:uppercase}.pcard .pr{font-weight:700}
.tag{display:inline-block;background:var(--neon);border:2px solid var(--ink);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:800;text-transform:uppercase;width:max-content}
.tag.pink{background:var(--pink)}.tag.y{background:var(--yellow)}.tag.gray{background:#eee}.tag.red{background:#ffd6d2}
/* hero */
.hero{padding:44px 0 30px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero img.lg{width:100%;max-width:560px;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.12))}
.hero p.lead{font-size:19px;max-width:520px}
@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:24px}.hero img.lg{max-width:380px;margin:0 auto}}
.ticker{background:var(--ink);color:var(--yellow);font:800 14px Prompt,sans-serif;text-transform:uppercase;letter-spacing:.06em;overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--ink)}
.ticker span{display:inline-block;padding:9px 0;animation:tick 28s linear infinite}@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker span{animation:none}}
/* teal wallet card (from the ordering site) */
.wallet{position:relative;border-radius:24px;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#14807c 0%,var(--teal) 45%,var(--teal-deep) 100%);border:2px solid var(--ink);box-shadow:var(--shadow);padding:22px;overflow:hidden}
.wallet:after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07)}
.wallet .chip{display:inline-block;background:var(--neon);color:var(--ink);border-radius:999px;font:800 12px Prompt,sans-serif;text-transform:uppercase;padding:4px 10px}
.wallet .big{font:900 34px/1 Prompt,sans-serif}.wallet .muted{color:#cfe7e4}.wallet hr{border:0;border-top:1px dashed rgba(255,255,255,.35);margin:14px 0}
.wallet .stk{box-shadow:3px 3px 0 #000}
.walletrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
/* forms */
label.f{display:block;font-weight:700;font-size:14px;margin:0 0 14px}label.f>span{display:block;margin-bottom:6px}
input,select,textarea{width:100%;font:16px Inter,sans-serif;padding:13px 14px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--teal);outline-offset:1px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media(max-width:560px){.row2,.row3{grid-template-columns:1fr}}
.seg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.seg button{border:2px solid var(--ink);background:#fff;border-radius:999px;padding:9px 14px;font:700 14px Inter,sans-serif;cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}.seg.days button{min-width:52px}.seg.md button{min-width:44px;padding:8px 0}
.err{background:#ffe1dd;border:2px solid var(--danger);color:#5c0d08;border-radius:12px;padding:12px 14px;font-weight:600;margin:10px 0}
.okmsg{background:#dcffd0;border:2px solid var(--ok);border-radius:12px;padding:12px 14px;font-weight:600;margin:10px 0}
.note{background:var(--yellow-2);border:2px dashed var(--ink);border-radius:12px;padding:12px 14px;font-size:14px}
.cardbox{border:2px solid var(--ink);border-radius:12px;padding:12px;background:#fff;min-height:56px}
.demo{background:repeating-linear-gradient(45deg,#fff3c4,#fff3c4 10px,#ffe9a6 10px,#ffe9a6 20px);border:2px dashed var(--ink);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:700;margin-bottom:10px}
.lines{width:100%;border-collapse:collapse}.lines td{padding:8px 0;border-bottom:1px solid #0002;vertical-align:top}.lines td:last-child{text-align:right;white-space:nowrap}.lines tr.tot td{font-weight:900;border:0;font-size:18px}
.thumb{width:52px;height:52px;border-radius:10px;border:2px solid var(--ink);object-fit:cover;background:var(--yellow-2)}
.two{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}@media(max-width:900px){.two{grid-template-columns:1fr}}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}@media(max-width:820px){.pdp{grid-template-columns:1fr}}
.pdp .gal img{border:2px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);background:#fff;aspect-ratio:1/1;object-fit:cover;width:100%}
.thumbs{display:flex;gap:10px;margin-top:12px}.thumbs img{width:70px;height:70px;border-radius:10px;border:2px solid var(--ink);object-fit:cover;cursor:pointer}
.desc{font-size:15px}.desc img{border-radius:12px}
.qty{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}.qty button{border:0;background:none;font:900 18px Prompt;width:40px;height:40px;cursor:pointer}.qty span{min-width:30px;text-align:center;font-weight:800}
/* drawer */
.scrim{position:fixed;inset:0;background:#0007;z-index:40;display:none}.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--yellow);border-left:2px solid var(--ink);z-index:41;transform:translateX(105%);transition:transform .2s;display:flex;flex-direction:column}
.drawer.on{transform:none}.drawer .hd{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:2px solid var(--ink)}.drawer .bd{flex:1;overflow:auto;padding:16px 18px}.drawer .ft{padding:16px 18px;border-top:2px solid var(--ink)}
.ci{display:flex;gap:12px;align-items:center;margin-bottom:12px}.ci .x{margin-left:auto}
footer{margin-top:70px;background:var(--ink);color:#fff;padding:40px 0 30px}footer a{color:#fff;text-decoration:none;opacity:.85}footer a:hover{opacity:1;text-decoration:underline}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}@media(max-width:700px){footer .cols{grid-template-columns:1fr}}
footer img{height:70px;width:auto;background:var(--yellow);border-radius:14px;padding:8px 12px;margin-bottom:14px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 22px}
.adm table{width:100%;border-collapse:collapse;font-size:14px}.adm th,.adm td{text-align:left;padding:8px;border-bottom:1px solid #0002;vertical-align:top}.adm code{font-size:12px;word-break:break-all}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:999px;padding:12px 20px;font-weight:700;z-index:60;box-shadow:3px 3px 0 var(--neon)}
.skel{opacity:.5}.hide{display:none!important}

@media(max-width:900px){.joinwrap>div:last-child{order:-1}}