/* Stickies & Beads — storefront styles
   Palette: Soft Pastels (pinned). Headings: Fredoka. */
:root{
  --radius:22px; --card-radius:20px; --maxw:1160px;
  --shadow-soft:0 10px 30px rgba(70,55,40,.10);
  --shadow-lift:0 18px 44px rgba(70,55,40,.18);
  /* soft pastel canvas + candy accents */
  --canvas:#FBF7EF; --panel:#FFFFFF; --ink:#4A4038; --muted:#8A7F73; --line:#EBE2D3;
  --c1:#8FD3EA; --c2:#F7C0D6; --c3:#FBE29B; --c4:#D8C1F0; --c5:#B7E7CC; --c6:#FBD0AC;
  --accent:#2FA9D8; --accent2:#F06BA0; --accent-ink:#124b63;
  --tag-bg:#FFE08A; --tag-ink:#6a5312;
  --display:'Fredoka'; --body:'Nunito';
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--canvas); color:var(--ink);
  font-family:var(--body),system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,.brand{font-family:var(--display),var(--body),sans-serif; font-weight:700; line-height:1.1; margin:0 0 .4em;}
h2{font-size:clamp(1.8rem,4vw,2.6rem);}
h3{font-size:1.2rem; margin:0 0 .2em;}
p{margin:0 0 1em;}
.muted{color:var(--muted);}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1.3rem;}
a{color:inherit;}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* confetti frame */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.confetti span{position:absolute; font-size:2rem; filter:drop-shadow(0 3px 4px rgba(0,0,0,.12));}
@media(max-width:720px){ .confetti span{font-size:1.4rem;} }

/* top bar */
header.bar{position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter:blur(9px) saturate(140%); border-bottom:2px dashed var(--line);}
.bar .row{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.3rem; max-width:var(--maxw); margin:0 auto;}
.brand{font-size:1.7rem; display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--ink);}
.brand .dot{width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 3px var(--panel);}
.nav{display:flex; gap:1.4rem; align-items:center;}
.nav a{color:var(--ink); text-decoration:none; font-weight:700; font-family:var(--display);}
.nav a:hover{color:var(--accent);}
@media(max-width:640px){ .nav{display:none;} }

/* hero */
.hero{position:relative; z-index:2; text-align:center; padding:2.4rem 1rem 1.2rem;}
.hero img.logo{display:block; margin:0 auto; max-width:min(760px,92vw); width:100%; height:auto;
  border-radius:26px; box-shadow:var(--shadow-lift); background:var(--panel);}
.hero .kicker{display:inline-block; margin-top:1.2rem; background:var(--panel); border:2px solid var(--line);
  border-radius:999px; padding:.35rem 1rem; font-weight:800; font-family:var(--display); color:var(--accent-ink);}
.hero .lead{max-width:640px; margin:.9rem auto 0; font-size:1.15rem; color:var(--muted);}

/* dividers (real bead-string photos, bg removed) */
.divider{text-align:center; margin:.4rem 0 .2rem; position:relative; z-index:2;}
.divider img{width:min(940px,96vw); height:auto; display:inline-block; user-select:none;}

/* sections */
section.block{position:relative; z-index:2; padding:1.2rem 0 2.2rem;}
.section-head{display:flex; align-items:center; gap:.7rem; margin:0 0 1.2rem;}
.section-head .emoji{font-size:2rem;}
.section-head h2{margin:0;}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.5rem 1.3rem;}
.grid-empty{color:var(--muted); font-family:var(--display); font-weight:600; padding:1rem 0;}

/* product card = sticker */
.card{background:var(--panel); border-radius:var(--card-radius); padding:.8rem .8rem 1rem;
  box-shadow:var(--shadow-soft); border:3px solid #fff; position:relative;
  transition:transform .16s ease, box-shadow .16s ease; transform:rotate(var(--rot,0deg));}
.card:hover{transform:rotate(0deg) translateY(-4px) scale(1.02); box-shadow:var(--shadow-lift);}
.card .ph{aspect-ratio:1/1; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  font-size:3.4rem; background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb,var(--sw,#eee) 55%, #fff), transparent 60%),
    var(--sw,#eee);}
.card .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.card h3{margin:.7rem .2rem .1rem;}
.card .desc{margin:0 .2rem .6rem; color:var(--muted); font-size:.93rem; line-height:1.4;}
.card .meta{margin:0 .2rem .8rem; font-size:.8rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.card .foot{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:0 .2rem;}
.price{font-family:var(--display); font-weight:800; font-size:1.25rem; color:var(--tag-ink);
  background:var(--tag-bg); border-radius:999px; padding:.2rem .8rem; box-shadow:0 3px 0 rgba(0,0,0,.08); transform:rotate(-3deg); white-space:nowrap;}
.want{border:none; cursor:pointer; font-family:var(--display); font-weight:800; font-size:.92rem; color:#fff;
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb,var(--accent) 80%, #000));
  border-radius:999px; padding:.5rem .9rem; box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 60%,#000);
  transition:transform .1s ease;}
.want:active{transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb,var(--accent) 60%,#000);}
.soldout{position:absolute; top:.6rem; left:.6rem; background:#fff; color:#b23; border:2px solid #b23;
  font-family:var(--display); font-weight:800; font-size:.72rem; padding:.15rem .5rem; border-radius:8px; transform:rotate(-8deg);}
.card.is-sold{opacity:.72; filter:saturate(.7);}
.card.is-sold .want{background:#bbb; box-shadow:0 4px 0 #999; cursor:not-allowed;}

/* thumbnails row (multi-photo) */
.thumbs{display:flex; gap:.35rem; margin:.5rem .2rem 0;}
.thumbs button{width:38px; height:38px; border-radius:9px; overflow:hidden; border:2px solid var(--line); padding:0; cursor:pointer; background:none;}
.thumbs button.on{border-color:var(--accent);}
.thumbs img{width:100%; height:100%; object-fit:cover; display:block;}

/* about */
.about-card{background:var(--panel); border:3px solid #fff; border-radius:var(--card-radius); box-shadow:var(--shadow-soft);
  padding:1.2rem 1.4rem; max-width:720px;}
.about-card p{margin:0 0 .7rem;}
.about-card p:last-child{margin-bottom:0;}

/* inquiry modal */
.scrim{position:fixed; inset:0; background:rgba(40,30,20,.45); backdrop-filter:blur(3px); z-index:50;
  display:none; align-items:center; justify-content:center; padding:1rem;}
.scrim.open{display:flex;}
.modal{background:var(--panel); border-radius:24px; max-width:440px; width:100%; padding:1.4rem 1.4rem 1.6rem;
  box-shadow:var(--shadow-lift); border:3px solid #fff; position:relative;}
.modal h3{font-size:1.5rem;}
.modal .item-chip{display:inline-flex; gap:.5rem; align-items:center; background:var(--c3);
  color:var(--ink); border-radius:999px; padding:.3rem .8rem; font-weight:800; font-family:var(--display); margin-bottom:.9rem;}
.modal label{display:block; font-weight:700; font-size:.85rem; margin:.7rem 0 .25rem;}
.modal input,.modal textarea{width:100%; border:2px solid var(--line); border-radius:12px; padding:.55rem .7rem; font:inherit; background:var(--canvas); color:var(--ink);}
.modal textarea{resize:vertical; min-height:64px;}
.modal .two{display:flex; gap:.7rem;}
.modal .two>div{flex:1;}
.modal .send{margin-top:1rem; width:100%; border:none; cursor:pointer; font-family:var(--display); font-weight:800; font-size:1.05rem;
  color:#fff; background:linear-gradient(180deg,var(--accent2),color-mix(in srgb,var(--accent2) 80%,#000));
  border-radius:14px; padding:.7rem; box-shadow:0 5px 0 color-mix(in srgb,var(--accent2) 60%,#000);}
.modal .send[disabled]{opacity:.6; cursor:wait;}
.modal .x{position:absolute; top:.7rem; right:.9rem; border:none; background:none; font-size:1.5rem; cursor:pointer; color:var(--muted);}
.modal .fine{font-size:.8rem; color:var(--muted); margin:.6rem 0 0;}
.modal .msg{margin:.6rem 0 0; font-weight:700; font-family:var(--display);}
.modal .msg.ok{color:#2e8b57;}
.modal .msg.err{color:#c0392b;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

/* footer */
footer{position:relative; z-index:2; text-align:center; padding:2rem 1rem 3rem; color:var(--muted);}
footer .heart{color:var(--accent2);}
footer .family{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.1rem;}
footer .family a{color:var(--ink); text-decoration:none; font-family:var(--display); font-weight:700;
  background:var(--panel); border:2px solid var(--line); border-radius:999px; padding:.5rem 1rem;
  box-shadow:var(--shadow-soft); transition:transform .12s ease, border-color .12s ease;}
footer .family a:hover{transform:translateY(-2px); border-color:var(--accent);}

@media (prefers-reduced-motion: reduce){
  .card,.want,footer .family a{transition:none;}
}