/* Puff Republic & Master Baiters — old-Florida bait shop meets smoke shop.
   Colors come from the two logos: navy + gold (Master Baiters), red (Puff Republic),
   olive (smoke shop card), on sun-bleached sand. */
:root{
  --sand:#F4ECDD;        /* page */
  --paper:#FBF7EE;       /* cards */
  --line:#E3D7BF;
  --navy:#12294F;        /* Master Baiters navy */
  --navy-2:#1E3C66;
  --gold:#C9914F;        /* Master Baiters gold */
  --gold-lt:#E7BE7C;
  --olive:#4A5F32;       /* smoke shop card */
  --olive-dk:#3A4B27;
  --cream:#F3EAD3;
  --red:#D8241C;         /* Puff Republic red / bobber red */
  --red-dk:#B51B14;
  --ink:#1B2436;
  --ink-2:#5B6474;
  --alert:#B51B14;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --contour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%23E4D7BC' stroke-width='1.4'%3E%3Cpath d='M-20 40 C40 10 90 70 150 40 S260 10 380 50'/%3E%3Cpath d='M-20 80 C50 50 100 110 170 80 S270 50 380 90'/%3E%3Cpath d='M-20 125 C40 100 110 150 180 120 S280 95 380 135'/%3E%3Cpath d='M-20 170 C60 140 120 195 190 165 S290 140 380 180'/%3E%3Cpath d='M-20 215 C50 190 130 240 200 210 S300 185 380 225'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--sand) var(--contour);color:var(--ink);font:16px/1.55 var(--body)}
img{max-width:100%;display:block}
a{color:var(--navy-2)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-variation-settings:"SOFT" 100;line-height:1.08}

/* ---------- buttons ---------- */
.btn{display:inline-block;border:0;border-radius:999px;padding:.8rem 1.35rem;font-weight:700;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.btn--lure{background:var(--red);color:#fff;box-shadow:0 2px 0 var(--red-dk)}
.btn--lure:hover{background:var(--red-dk)}
.btn--lure:disabled{opacity:.6;cursor:wait}
.btn--ghost{background:transparent;border:2px solid var(--navy);color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:var(--paper)}
.btn--full{width:100%}
.iconbtn{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;padding:.2rem .5rem;color:var(--navy)}
.linkbtn{background:none;border:0;padding:0;color:var(--navy-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;justify-self:start;font-weight:600}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.35rem clamp(1rem,4vw,2.5rem);background:var(--navy);color:var(--cream);border-bottom:4px solid var(--gold)}
.topbar__brand{display:flex;align-items:center;gap:.55rem;color:inherit;text-decoration:none;min-width:0}
.topbar__mb{width:40px;height:40px}
.topbar__pr{width:56px;height:auto}
.topbar__name{display:flex;flex-direction:column;font:700 1.15rem/1.1 var(--display);font-variation-settings:"SOFT" 100;min-width:0}
.topbar__name small{font:600 .75rem/1.3 var(--body);color:var(--gold-lt);letter-spacing:.02em}
.topbar__actions{display:flex;gap:.5rem;align-items:center;flex:none}
.trackbtn{background:transparent;color:var(--cream);border:1.5px solid rgba(243,234,211,.55);border-radius:999px;padding:.42rem .95rem;font-weight:600;cursor:pointer;white-space:nowrap}
.trackbtn:hover{border-color:var(--cream)}
.cartbtn{display:flex;gap:.5rem;align-items:center;background:var(--red);color:#fff;border:0;border-radius:999px;padding:.42rem .5rem .42rem 1rem;font-weight:700;cursor:pointer}
.cartbtn__count{background:var(--paper);color:var(--red);border-radius:999px;min-width:1.7rem;padding:.05rem .45rem;text-align:center}
.cartbtn.bump{animation:bump .35s ease}
@keyframes bump{50%{transform:scale(1.12)}}

/* "adding to an order" bar */
.addbar{position:sticky;top:3.3rem;z-index:19;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;justify-content:center;
  background:var(--gold-lt);color:var(--navy);padding:.6rem 1rem;font-weight:700;border-bottom:2px solid var(--gold);text-align:center}
.addbar__btn{background:var(--navy);color:var(--cream);border:0;border-radius:999px;padding:.35rem .9rem;font-weight:700;cursor:pointer}
.addbar__x{background:none;border:0;color:var(--navy);text-decoration:underline;cursor:pointer;font-weight:600}
.myorder .btn--ghost{padding:.5rem .9rem;font-size:.9rem;justify-self:start}

.agebar{display:flex;flex-wrap:wrap;gap:.4rem .8rem;justify-content:center;align-items:center;background:var(--olive);color:var(--cream);
  padding:.55rem 1rem;font-weight:600;text-align:center;font-size:.92rem}
.agebar .addbar__x{color:var(--cream)}
.poster--locked .poster__art,.poster--locked .poster__text{filter:grayscale(.7);opacity:.55}
.poster--locked::after{content:"21+ only";position:absolute;top:1rem;right:1rem;background:var(--red);color:#fff;font-weight:800;padding:.3rem .8rem;border-radius:999px}
.poster--locked .poster__btn{pointer-events:none}

/* ---------- hero ---------- */
.hero{max-width:1180px;margin:0 auto;padding:clamp(2rem,6vw,4rem) clamp(1rem,4vw,2.5rem) 1.5rem;
  display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:center}
.hero__title{font-size:clamp(2.3rem,5.4vw,4.3rem);font-weight:800;color:var(--navy);margin:0;letter-spacing:-.01em;max-width:15ch}
.hero__tag{font-size:clamp(1.02rem,1.8vw,1.2rem);color:var(--ink-2);margin:1rem 0 1.5rem;max-width:44ch}
.board{background:var(--navy);color:var(--cream);border-radius:14px;padding:1.4rem 1.5rem;border:3px solid var(--gold);
  box-shadow:inset 0 0 0 5px var(--navy),inset 0 0 0 6px rgba(231,190,124,.5);transform:rotate(1.2deg)}
.board__label{margin:0;font:700 1.05rem/1 var(--display);color:var(--gold-lt)}
.board__today{margin:.4rem 0 .8rem;font:800 clamp(1.5rem,2.6vw,2rem)/1.15 var(--display);font-variation-settings:"SOFT" 100}
.board__phone{margin:0 0 .4rem;font-weight:700}
.board a{color:var(--cream)}
.board__more{font-size:.9rem;color:var(--gold-lt)!important}

/* welcome offer + promo code + discount lines */
.promo{display:inline-block;margin:0 0 1rem;background:var(--gold-lt);color:var(--navy);font-weight:800;padding:.5rem .95rem;border-radius:999px;border:2px dashed var(--navy)}
.promocode__row{display:flex;gap:.5rem}
.promocode__row input{flex:1;text-transform:uppercase}
.promocode__row .btn{padding:.55rem .9rem}
.promocode__msg{margin:.3rem 0 0;font-size:.88rem;font-weight:600}
.promocode__msg.ok{color:#2E5A2A}.promocode__msg.bad{color:var(--alert)}
.totals__row--disc{color:#2E5A2A;font-weight:700}

/* ---------- what you'll find ---------- */
.find{max-width:1180px;margin:0 auto;padding:1rem clamp(1rem,4vw,2.5rem) 2.5rem}
.find__title{display:flex;align-items:center;gap:1rem;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--navy);margin:0 0 1.2rem}
.find__title::before,.find__title::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--gold))}
.find__title::after{background:linear-gradient(90deg,var(--gold),transparent)}
.posters{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
/* short horizontal banners: art on the left, text on the right */
.poster{position:relative;overflow:hidden;border-radius:16px;display:grid;grid-template-columns:40% 1fr;min-height:230px;
  box-shadow:0 10px 24px -14px rgba(18,41,79,.5)}
.poster__art{position:relative;display:grid;place-items:center;overflow:hidden}
.poster__text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:1.2rem 1.3rem;gap:.35rem}
.poster__name{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:900;text-transform:uppercase;letter-spacing:.01em;margin:0;line-height:1}
.poster__kind{display:flex;align-items:center;gap:.5rem;margin:0;font-weight:700;letter-spacing:.08em;font-size:.78rem;text-transform:uppercase}
.poster__kind::after{content:"";width:1.4rem;height:2px;background:currentColor;opacity:.7}
.poster__line{margin:.3rem 0 .6rem;font-size:.93rem;line-height:1.45;max-width:36ch}
.poster__btn{padding:.6rem 1.1rem;font-size:.92rem}

.poster--pr{background:var(--olive);color:var(--cream)}
.poster--pr .poster__art{background:var(--olive-dk)}
.poster__leaves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.poster__logo{position:relative;width:min(200px,86%);filter:drop-shadow(0 5px 8px rgba(0,0,0,.25))}
.poster--pr .poster__kind{color:#DCD3B4}
.poster--pr .poster__btn{background:var(--cream);color:var(--olive-dk);box-shadow:0 2px 0 #C7BB98}
.poster--pr .poster__btn:hover{background:#fff}

.poster--mb{background:var(--navy);color:var(--cream)}
.poster__scene{position:absolute;inset:0;width:100%;height:100%}
.poster__badge{position:absolute;top:.7rem;left:.7rem;width:84px;height:84px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3))}
.poster--mb .poster__kind{color:var(--gold-lt)}
.poster--mb .poster__btn{background:var(--red);color:#fff;box-shadow:0 2px 0 var(--red-dk)}
.poster--mb .poster__btn:hover{background:var(--red-dk)}

.find__title--how{margin-top:2.2rem}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.steps li{counter-increment:s;padding:.8rem .9rem .8rem 3.3rem;position:relative;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:12px}
.steps li::before{content:counter(s);position:absolute;left:.8rem;top:.75rem;width:1.9rem;height:1.9rem;border-radius:50%;
  display:grid;place-items:center;background:var(--gold);color:var(--navy);font:900 1.05rem/1 var(--display)}
.steps strong{display:block;color:var(--navy)}

/* ---------- shop ---------- */
.shop{max-width:1180px;margin:0 auto;padding:1rem clamp(1rem,4vw,2.5rem) 3rem}
.shop__title{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--navy);margin:0 0 .6rem}
.shop__bar{position:sticky;top:3.3rem;z-index:10;background:var(--sand);padding:.5rem 0;display:grid;gap:.45rem .6rem;border-bottom:2px dashed var(--line);
  grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"search search sub" "dept cats cats";align-items:center}
.shop__bar .search{grid-area:search}
.shop__bar .subsel{grid-area:sub}
#dept-chips{grid-area:dept}
#cat-chips{grid-area:cats;padding-left:.6rem;border-left:2px solid var(--line)}
.search input{width:100%;padding:.55rem 1.1rem;border:2px solid var(--navy);border-radius:999px;background:var(--paper)}
.chips{display:flex;gap:.45rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:2px solid var(--navy);background:var(--paper);color:var(--navy);border-radius:999px;padding:.22rem .8rem;cursor:pointer;font-weight:700;font-size:.88rem;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.chips--cats .chip{border-color:var(--line);font-weight:600;color:var(--ink)}
.chips--cats .chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.subsel select{padding:.5rem .8rem;border:2px solid var(--line);border-radius:999px;background:var(--paper);max-width:100%}
.shop__count{color:var(--ink-2);font-size:.92rem;margin:.6rem 0}
.shop__status{text-align:center;color:var(--ink-2)}
.shop__more{text-align:center;margin-top:1.5rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.card{background:var(--paper);border-radius:14px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);position:relative}
.card__img{aspect-ratio:1;background:#fff;display:grid;place-items:center;border-bottom:1px dashed var(--line)}
.card__img img{width:100%;height:100%;object-fit:contain;padding:.6rem}
.card__body{padding:.75rem .85rem .9rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card__sub{font-size:.78rem;color:var(--olive);font-weight:700}
.card__name{font:600 .95rem/1.3 var(--body);margin:0;flex:1}
.card__link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.card__link:hover .card__name{text-decoration:underline;text-underline-offset:3px}
.card__foot{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:.35rem .85rem .9rem}
.card__act{width:100%}
/* price tag with a punched hole */
.card__price{position:relative;background:var(--gold);color:var(--navy);font:800 1.15rem/1 var(--display);padding:.4rem .6rem .4rem 1.2rem;
  clip-path:polygon(.7rem 0,100% 0,100% 100%,.7rem 100%,0 50%)}
.card__price::before{content:"";position:absolute;left:.62rem;top:50%;width:.36rem;height:.36rem;margin-top:-.18rem;border-radius:50%;background:var(--paper)}
.card__price--store{background:var(--line);color:var(--ink-2);font:700 .8rem/1.2 var(--body)}
.card__add{border:0;background:var(--navy);color:var(--cream);font-weight:700;border-radius:999px;padding:.55rem .85rem;cursor:pointer;white-space:nowrap;width:100%}
.card__add:hover{background:var(--navy-2)}
.card__add[disabled]{background:var(--line);color:var(--ink-2);cursor:not-allowed}
.card__add.added{background:var(--red);color:#fff}

/* ---------- info ---------- */
.info{background:var(--navy);color:#DCE3EC;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  padding:3rem clamp(1rem,4vw,2.5rem);border-top:5px solid var(--gold)}
.info h2{font-size:1.9rem;color:var(--gold-lt);margin:0 0 .8rem}
.info a{color:var(--cream)}
.loc{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 1.1rem}
.loc__logo{width:56px;height:auto;flex:none;border-radius:6px}
.loc strong{color:var(--cream);display:block}
.info__phone{font-weight:700;font-size:1.1rem}
.hours{border-collapse:collapse;width:100%;max-width:20rem}
.hours td{padding:.22rem 0;border-bottom:1px dashed rgba(231,190,124,.25)}
.hours td+td{text-align:right}
.hours__sp{padding-top:.8rem!important;color:var(--gold-lt);font-weight:700;border-bottom:0!important}
.hours__note{opacity:.75;font-size:.85em}
.foot{text-align:center;font-size:.85rem;color:var(--ink-2);padding:1.8rem 1rem 2.5rem}
.foot__logos{display:flex;justify-content:center;gap:.8rem;align-items:center;margin-bottom:.6rem}
.foot__logos img:first-child{width:56px}.foot__logos img:last-child{width:80px}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(18,41,79,.5);z-index:40}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(450px,100%);background:var(--paper);z-index:50;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .25s ease,visibility .25s;visibility:hidden}
.drawer.open{transform:none;visibility:visible;box-shadow:-10px 0 30px rgba(18,41,79,.25)}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;background:var(--navy);color:var(--cream);border-bottom:4px solid var(--gold)}
.drawer__head h2{font-size:1.7rem;margin:0}
.drawer__head .iconbtn{color:var(--cream)}
.drawer__body{padding:1.2rem;overflow-y:auto;flex:1;display:grid;gap:.9rem;align-content:start}
.lines{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.line{display:grid;grid-template-columns:3.6rem 1fr auto;gap:.7rem;align-items:center}
.line img{width:3.6rem;height:3.6rem;object-fit:contain;background:#fff;border-radius:8px;border:1px solid var(--line)}
.line__name{font-size:.92rem;font-weight:600;line-height:1.25}
.line__price{font-size:.85rem;color:var(--ink-2)}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.qty button{background:none;border:0;width:2rem;height:2rem;cursor:pointer;font-weight:700;color:var(--navy)}
.qty span{min-width:1.5rem;text-align:center}
.lines--plain li{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem}
.empty{color:var(--ink-2)}
.muted{color:var(--ink-2)}
.totals{display:grid;gap:.6rem;border-top:2px dashed var(--line);padding-top:1rem}
.totals__row{display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem}
.totals__row strong{font:800 1.7rem/1 var(--display);color:var(--navy)}
.totals__row--sm{font-size:.9rem;color:var(--ink-2)}
.totals__row .plus{display:block;font:600 .8rem/1.2 var(--body);color:var(--ink-2);text-align:right}
.totals__note{margin:0;font-size:.85rem;color:var(--ink-2)}
.field{display:grid;gap:.25rem;font-size:.9rem;font-weight:600}
.field input,.field select{padding:.72rem .85rem;border:1.5px solid #B9AE95;border-radius:10px;font-weight:400;background:#fff;width:100%}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem}
.check input{width:1.2rem;height:1.2rem;margin-top:.15rem;flex:none;accent-color:var(--navy)}
.hp{position:absolute;left:-9999px}
.formerror{background:#FBE3DF;color:var(--alert);padding:.6rem .8rem;border-radius:8px;margin:0;font-weight:600}
.signedas{margin:0;font-size:.9rem;color:var(--ink-2)}
.signedas strong{color:var(--ink);word-break:break-all}
.codeinput{font:800 1.8rem/1 var(--display)!important;letter-spacing:.4em;text-align:center}
.row-links{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.whocard{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:.8rem .95rem;display:grid;gap:.15rem;font-size:.92rem}
.whocard__name{font:800 1.4rem/1.1 var(--display);color:var(--navy)}
.whocard .linkbtn{margin-top:.3rem}
.acct__h{font-size:1.5rem;margin:.4rem 0 0;color:var(--navy)}
.myorder{border:1px solid var(--line);border-radius:12px;padding:.85rem;display:grid;gap:.45rem;background:#fff}
.myorder__top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.myorder__id{font:800 1.3rem/1 var(--display);color:var(--navy)}
.myorder p{margin:0;font-size:.9rem}
.pill{border-radius:999px;padding:.12rem .6rem;font-size:.78rem;font-weight:700;background:var(--line)}
.pill--new{background:#F6E2B8}.pill--ready{background:#D4E6D1;color:#2E5A2A}.pill--cancelled{background:#F6D5CF;color:var(--alert)}

/* order confirmation = pickup ticket */
.done__label{margin:0;font-weight:700;color:var(--olive)}
.done__id{font:900 2.8rem/1 var(--display);margin:0;justify-self:start;color:var(--navy);background:var(--gold-lt);padding:.5rem 1rem;border-radius:8px;
  border:2px dashed var(--navy);position:relative}
.done__where{background:var(--sand);border-radius:10px;padding:.75rem .85rem;display:grid;gap:.5rem;border:1px solid var(--line)}
.done__where p{margin:0}
.done__demo{background:#FFF1C9;padding:.5rem .7rem;border-radius:8px;font-size:.88rem}
.track{display:grid;gap:.7rem}
.track p{margin:0}
.track__status{font:800 1.8rem/1 var(--display);color:var(--navy)}
.track__status--ready{color:#2E5A2A}
.track__status--cancelled{color:var(--alert)}

/* ---------- age gate ---------- */
.agegate{position:fixed;inset:0;z-index:100;background:var(--navy) var(--contour);display:grid;place-items:center;padding:1.2rem}
.agegate__box{background:var(--paper);max-width:29rem;padding:2rem;border-radius:18px;border:3px solid var(--gold)}
.agegate__logos{display:flex;gap:.7rem;align-items:center;margin-bottom:.8rem}
.agegate__logos img:first-child{width:72px}.agegate__logos img:last-child{width:102px}
.agegate__store{font:700 1.1rem/1.2 var(--display);margin:0 0 .5rem;color:var(--olive)}
.agegate h2{font-size:2.4rem;margin:0 0 .8rem;color:var(--navy)}
.agegate__actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.agegate__denied{color:var(--alert);font-weight:600}

.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,160%);visibility:hidden;background:var(--navy);color:var(--cream);
  padding:.7rem 1.1rem;border-radius:999px;z-index:60;transition:transform .25s ease;max-width:90vw;border:2px solid var(--gold)}
.toast.show{transform:translate(-50%,0);visibility:visible}

/* ---------- order changes, confirmed by, promo codes ---------- */
.pill--confirmed{background:#DCE6F7;color:#1E3C66}
.confby{margin:0;font-weight:700;color:#2E5A2A}
.editnote{margin:0;font-size:.88rem;color:var(--ink-2)}
.myorder__btns{display:flex;flex-wrap:wrap;gap:.5rem}
.oedit{display:grid;gap:.7rem;background:var(--sand);border:1px solid var(--line);border-radius:10px;padding:.75rem}
.lines--edit li{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.lines--edit li.gone .oedit__name{text-decoration:line-through;opacity:.6}
.oedit__name{flex:1;min-width:10rem;font-size:.92rem;font-weight:600}
.small{font-size:.82rem;margin:0}
.codechips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem;align-items:center}
.codechips__h{font-size:.82rem;color:var(--ink-2);width:100%}
.codechip{border:2px dashed var(--navy);background:var(--paper);color:var(--navy);border-radius:999px;padding:.3rem .75rem;font-size:.82rem;cursor:pointer}
.codechip b{letter-spacing:.04em}
.codechip.on{background:var(--gold-lt);border-style:solid}
.oldprice{color:var(--ink-2);font-size:.85em;margin-right:.15rem}
.dealtag{display:inline-block;background:#E4F0DF;color:#2E5A2A;border-radius:999px;padding:0 .45rem;font-size:.72rem;font-weight:800;vertical-align:1px}
.savedline{margin:0;color:#2E5A2A;font-weight:700;font-size:.9rem}

/* ---------- installable app ---------- */
.appbar{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:.7rem;
  background:var(--navy);color:var(--cream);border:2px solid var(--gold);border-radius:16px;padding:.6rem .7rem;box-shadow:0 10px 30px rgba(18,41,79,.35);max-width:560px;margin:0 auto}
.appbar img{border-radius:10px;flex:none}
.appbar__text{display:grid;flex:1;font-size:.85rem;line-height:1.3}
.appbar__text strong{font-size:1rem}
.appbar__btn{background:var(--red);color:#fff;border:0;border-radius:999px;padding:.5rem 1rem;font-weight:800;cursor:pointer}
.appbar__x{background:none;border:0;color:var(--cream);font-size:1.6rem;line-height:1;cursor:pointer;padding:0 .2rem}
.iosguide{position:fixed;inset:0;z-index:95;background:rgba(18,41,79,.6);display:grid;place-items:end center;padding:1rem}
.iosguide__box{background:var(--paper);border-radius:18px;padding:1.4rem;max-width:26rem;width:100%;border:3px solid var(--gold);margin-bottom:env(safe-area-inset-bottom)}
.iosguide__box img{border-radius:14px}
.iosguide__box h2{color:var(--navy);margin:.6rem 0}
.iosguide__box ol{padding-left:1.2rem;display:grid;gap:.5rem}
.ios-share{display:inline-block;width:1rem;height:1.1rem;border:2px solid var(--navy);border-top:0;border-radius:0 0 3px 3px;position:relative;vertical-align:-2px;margin:0 .1rem}
.ios-share::before{content:"";position:absolute;left:50%;top:-.45rem;width:2px;height:.8rem;background:var(--navy);transform:translateX(-50%)}
.foot__links{display:flex;gap:1rem;justify-content:center;align-items:center}
/* when opened as an installed app: respect the phone's notch / home bar */
@media (display-mode: standalone){
  .topbar{padding-top:calc(.35rem + env(safe-area-inset-top))}
  .drawer__head{padding-top:calc(1rem + env(safe-area-inset-top))}
  .foot{padding-bottom:calc(2.5rem + env(safe-area-inset-bottom))}
}

/* ---------- phones ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:1.4rem}
  .board{transform:none}
  .posters{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
}
@media (max-width:600px){
  .addbar{top:3.4rem;font-size:.9rem}
  .poster{grid-template-columns:1fr;min-height:0}
  .poster__art{height:150px}
  .poster__logo{width:150px}
  .poster__badge{width:70px;height:70px}
  .poster__text{padding:1rem 1.1rem 1.2rem}
  .topbar{padding:.5rem .8rem;gap:.5rem}
  .topbar__pr,.topbar__name small{display:none}
  .topbar__mb{width:40px;height:40px}
  .topbar__name{font-size:.98rem}
  .trackbtn{padding:.35rem .7rem;font-size:.85rem}
  .cartbtn{padding:.35rem .4rem .35rem .8rem;font-size:.9rem}
  .steps{grid-template-columns:1fr;gap:.6rem}
  .grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .card__name{font-size:.88rem}
}

/* ==========================================================
   MOBILE-FIRST SHOPPING (2026-09-24)
   sticky search, one-row filters, − n + stepper, product
   details sheet, floating "View cart" bar
   ========================================================== */
.search{position:relative;display:block}
.search input{padding-left:2.5rem;padding-right:2.6rem;min-height:44px;font-size:16px;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%2312294F' stroke-width='2.4'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%2312294F' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat .9rem 50%/1.05rem}
.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search__clear{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;border-radius:50%;
  background:var(--line);color:var(--navy);font-size:1.25rem;line-height:1;cursor:pointer}
.shop__filters{display:contents}
.shop__meta{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.shop__meta .linkbtn{font-size:.9rem}
.searchbtn{display:none}

/* − n + stepper (cards + details sheet) */
.stepper{display:flex;align-items:center;width:100%;border:2px solid var(--navy);border-radius:999px;background:#fff;overflow:hidden}
.stepper button{flex:none;width:2.6rem;height:2.4rem;border:0;background:var(--navy);color:var(--cream);font-size:1.3rem;font-weight:800;cursor:pointer;line-height:1}
.stepper button:hover{background:var(--navy-2)}
.stepper span{flex:1;text-align:center;font-weight:800;font-size:.85rem;color:var(--navy);white-space:nowrap}

/* product details */
body.noscroll{overflow:hidden}
.psheet{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:1rem}
.psheet__scrim{position:absolute;inset:0;background:rgba(18,41,79,.55)}
.psheet__box{position:relative;background:var(--paper);border-radius:18px;width:min(780px,100%);max-height:90vh;overflow:auto;
  display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--gold);box-shadow:0 20px 50px rgba(18,41,79,.35)}
.psheet__img{background:#fff;display:grid;place-items:center;aspect-ratio:1;border-right:1px dashed var(--line)}
.psheet__img img{width:100%;height:100%;object-fit:contain;padding:1rem}
.psheet__body{padding:1.4rem 1.4rem 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.psheet__name{font-size:clamp(1.35rem,3vw,1.7rem);color:var(--navy);margin:0}
.psheet__where{margin:0;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.psheet__desc{margin:0;white-space:pre-line;font-size:.95rem}
.psheet__foot{margin-top:auto;padding-top:.6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.psheet__act .card__add,.psheet__act .stepper button{min-height:2.8rem}
.psheet__x{position:absolute;top:.55rem;right:.55rem;z-index:2;width:2.5rem;height:2.5rem;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(18,41,79,.25)}
.psheet__grab{display:none}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}

/* floating cart bar: phones only */
.cartbar{display:none}

@media (max-width:860px){
  main{display:flex;flex-direction:column}
  .hero{order:1}.shop{order:2}.find{order:3}.info{order:4}
  main>section{width:100%;min-width:0}

  .cartbar{display:flex;position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:44;
    align-items:center;gap:.7rem;background:var(--red);color:#fff;border:0;border-radius:999px;padding:.8rem 1.15rem;
    font-weight:800;font-size:1rem;box-shadow:0 10px 24px -8px rgba(18,41,79,.6);cursor:pointer;max-width:560px;margin:0 auto}
  .cartbar__n{background:#fff;color:var(--red);border-radius:999px;min-width:1.7rem;padding:.05rem .45rem;text-align:center}
  .cartbar__t{margin-left:auto}
  .cartbar__t .plus{display:inline;color:inherit;font-size:.72rem;font-weight:600}
  .drawer.open ~ .cartbar{display:none}
  body.has-cartbar .appbar{display:none!important}   /* shopping: the cart bar wins over the install banner */
  body.has-cartbar .foot{padding-bottom:6.5rem}
  body.has-cartbar .toast{bottom:5.4rem}
  .toast{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .psheet{place-items:end stretch;padding:0}
  .psheet__box{grid-template-columns:1fr;border-radius:20px 20px 0 0;border-width:3px 0 0;max-height:92vh;
    animation:sheetup .25s ease;padding-bottom:env(safe-area-inset-bottom)}
  .psheet__img{aspect-ratio:auto;height:min(40vh,300px);border-right:0;border-bottom:1px dashed var(--line)}
  .psheet__grab{display:block;position:absolute;top:.45rem;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:9px;background:var(--line);z-index:2}
  .psheet__body{padding:1rem 1.1rem 0}
  .psheet__foot{position:sticky;bottom:0;background:var(--paper);flex-direction:row;align-items:center;padding:.8rem 0 1rem;border-top:1px solid var(--line)}
  .psheet__act{flex:1}
}

@media (max-width:600px){
  /* compact hero so products start sooner */
  .hero{padding:1.1rem 1rem .6rem;gap:.9rem}
  .hero__title{font-size:1.85rem;max-width:none}
  .hero__tag{margin:.55rem 0 .7rem;font-size:.95rem}
  .hero__cta{display:none}
  .promo{margin:0;font-size:.9rem}
  .board{padding:.75rem 1rem;display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;align-items:center;border-radius:12px}
  .board__label{grid-column:1/-1;font-size:.9rem}
  .board__today{margin:0;font-size:1.1rem}
  .board__phone{margin:0;font-size:.9rem}
  .board__more{grid-column:1/-1}

  .searchbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:transparent;color:var(--cream);
    border:1.5px solid rgba(243,234,211,.55);cursor:pointer;padding:0}
  .topbar__name span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* sticky search + one scrollable row of filters */
  .shop{padding-top:.4rem}
  .shop__title{font-size:1.45rem;margin:.4rem 0 .2rem}
  .shop__bar{position:sticky;top:var(--tb,60px);z-index:15;margin:0 -1rem;padding:.55rem 1rem .5rem;gap:.5rem;
    grid-template-columns:minmax(0,1fr);grid-template-areas:"search" "filters";border-bottom:1px solid var(--line);
    box-shadow:0 8px 12px -12px rgba(18,41,79,.45)}
  .shop__filters{grid-area:filters;position:relative;display:flex;align-items:center;gap:.45rem;overflow-x:auto;scrollbar-width:none;
    margin-right:-1rem;padding-right:1rem;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .shop__filters::-webkit-scrollbar{display:none}
  #dept-chips,#cat-chips{overflow:visible;flex:none;padding-bottom:0}
  #cat-chips{padding-left:.45rem;border-left:2px solid var(--line)}
  .shop__filters .subsel{flex:none}
  .shop__filters .subsel select{padding:.4rem .7rem;font-size:.88rem;font-weight:600}
  .chip{padding:.4rem .9rem;font-size:.86rem}
  .shop__count{margin:.5rem 0}

  /* product cards */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .card{border-radius:12px}
  .card__img img{padding:.4rem}
  .card__body{padding:.55rem .65rem 0;gap:.2rem}
  .card__sub{font-size:.72rem}
  .card__name{font-size:.88rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .card__foot{padding:.45rem .65rem .7rem;gap:.45rem}
  .card__price{font-size:1.02rem}
  .card__price--store{font-size:.78rem}
  .card__add{min-height:2.5rem;padding:.5rem .6rem}
  .stepper button{width:2.4rem;height:2.35rem}
  .stepper span{font-size:.8rem}
}
@media (max-width:400px){
  .topbar__name{display:none}
}