/* Krum brand: red #9B1A1E, cream #FFFBF1, pink #FAC1B6, brown #5A2A1E, yellow #F5D98B */
:root{
  --red:#9B1A1E; --red-dark:#7C1316; --cream:#FFFBF1; --pink:#FAC1B6;
  --brown:#5A2A1E; --yellow:#F5D98B;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Mulish',system-ui,sans-serif;background:var(--cream);color:var(--brown);line-height:1.55}
img{display:block;max-width:100%}
h1,h2,h3{font-family:'Onest',system-ui,sans-serif;font-weight:900;color:var(--red);letter-spacing:-.01em}
h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:.4rem}

.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,3rem);background:var(--cream);border-bottom:2px solid rgba(155,26,30,.12)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{width:34px;height:34px}
.brand span{font-family:'Onest';font-weight:900;color:var(--red);font-size:1.15rem}
.nav-links{display:flex;align-items:center;gap:1.1rem}
.nav-links a{color:var(--brown);text-decoration:none;font-weight:700;font-size:.95rem}
.nav-links a.btn{color:#fff}
.nav-links a:hover{color:var(--red)}
.nav-links .ig{display:flex;color:var(--red)}
@media(max-width:640px){.nav-links a:not(.btn):not(.ig){display:none}}

.btn{white-space:nowrap;display:inline-block;background:var(--red);color:var(--cream);font-family:'Onest';font-weight:900;
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;font-size:1rem;border:2px solid var(--red);cursor:pointer}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn.small{padding:.5rem 1.1rem;font-size:.9rem}
.btn.ghost{background:transparent;color:var(--red)}
.btn.ghost:hover{background:var(--red);color:var(--cream)}

.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1rem,4vw,3rem);align-items:center;
  padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,3rem);background:linear-gradient(180deg,var(--cream),#FFF3E2)}
.hero-text h1{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.04;margin:.4rem 0 .8rem}
.kicker{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--red)}
.sub{font-size:1.08rem;max-width:34ch}
.cta-row{display:flex;gap:.8rem;margin-top:1.4rem;flex-wrap:wrap}
.hero-photo img{border-radius:28px;box-shadow:0 24px 60px rgba(90,42,30,.22);aspect-ratio:1;object-fit:cover;width:100%}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero-photo{order:-1}}

.section{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem)}
.section.alt{background:#FFF3E2}
.section-sub{max-width:56ch;margin-bottom:1.4rem}
.center{text-align:center;margin-top:1.8rem}

.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.2rem;max-width:760px}
.store{border:2px solid rgba(155,26,30,.18);border-radius:20px;padding:1.2rem 1.3rem;background:#fff}
.store.nearest{border-color:var(--red);box-shadow:0 10px 30px rgba(155,26,30,.15)}
.store h3{font-size:1.2rem;margin-bottom:.15rem}
.store .area{font-weight:700}
.store .note{font-size:.9rem;opacity:.85;margin:.25rem 0 .9rem}
.store .tag{display:inline-block;background:var(--yellow);color:var(--brown);font-weight:800;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;border-radius:999px;padding:.2rem .7rem;margin-bottom:.6rem}
.store.soon{opacity:.75;border-style:dashed}
.locate-note{margin-top:.7rem;font-size:.9rem;font-weight:700;color:var(--red);min-height:1.2em}
#locateBtn{margin-top:.2rem}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.card-grid.three{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:960px}
.card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(90,42,30,.08)}
.card img{width:100%;aspect-ratio:1;object-fit:cover}
.card .pad{padding:.7rem .9rem 1rem}
.card .nm{font-family:'Onest';font-weight:900;color:var(--brown);font-size:.98rem}
.card .pr{font-weight:800;color:var(--red)}

.photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;max-width:900px}
.photo-strip img{border-radius:18px;aspect-ratio:1;object-fit:cover;width:100%}

.gift{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.gift-photo img{border-radius:24px;aspect-ratio:1;object-fit:cover;width:100%}
@media(max-width:720px){.gift{grid-template-columns:1fr}}

.ig-band{text-align:center;background:var(--red);color:var(--cream)}
.ig-band h2{color:var(--cream)}
.ig-band .section-sub{margin:0 auto 1.4rem;color:var(--pink)}
.ig-band .btn{background:var(--cream);color:var(--red);border-color:var(--cream)}
.ig-band .btn:hover{background:var(--yellow);border-color:var(--yellow);color:var(--brown)}

.footer{text-align:center;padding:2.5rem 1rem 3rem;background:var(--brown);color:var(--cream)}
.footer img{width:44px;margin:0 auto .7rem}
.footer a{color:var(--pink);text-decoration:none;font-weight:700}
.footer a:hover{color:var(--yellow)}
.foot-links{margin-top:.4rem;font-size:.95rem}

/* feature cards (boxes & tins) + steps */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;max-width:920px}
.feature{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(90,42,30,.10)}
.feature img{width:100%;aspect-ratio:1;object-fit:cover}
.feature-pad{padding:1.1rem 1.3rem 1.4rem}
.feature-pad h3{margin-bottom:.3rem}
.feature-pad p{font-size:.95rem;margin-bottom:1rem}
.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem;max-width:920px;margin:0 auto}
.step{text-align:center;padding:0 .6rem}
.step-n{font-family:'Onest';font-weight:900;color:var(--pink);font-size:2rem;line-height:1;margin-bottom:.3rem}
.step h3{font-size:1.05rem;margin-bottom:.25rem}
.step p{font-size:.92rem}

/* horizontal cookie slider */
.slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.slider .slide{flex:0 0 172px;scroll-snap-align:start}
.swipe-hint{font-size:.8rem;font-weight:700;color:var(--red);opacity:.7;margin-top:.2rem}
@media(min-width:760px){.swipe-hint{display:none}}

/* other ways to order */
.other-ways{margin:2.2rem 0 .8rem;font-size:1.15rem}
.way-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;max-width:640px}
.way{display:block;background:#fff;border:2px solid rgba(155,26,30,.18);border-radius:18px;padding:1rem 1.2rem;text-decoration:none}
.way:hover{border-color:var(--red)}
.way h3{font-size:1.05rem;margin-bottom:.15rem}
.way p{font-size:.85rem;color:var(--brown)}