/* The Little Cloud Slime — palette taken from the logo artwork.
   Mobile-first: everything is designed for a phone, then widened. */

:root{
  /* Logo colours */
  --pink:        #F79FC4;
  --pink-deep:   #E2769F;
  --lavender:    #B9A6E8;
  --lav-deep:    #8E74CF;
  --sky:         #8FD3F4;
  --sky-deep:    #4FA8D8;
  --mint:        #A8E6CF;
  --mint-deep:   #5FBF9B;
  --butter:      #FFE29A;

  /* Surfaces & ink. Pastels can't carry text, so type is deep plum. */
  --cream:       #FFFCF7;
  --card:        #FFFFFF;
  --ink:         #43355E;
  --ink-soft:    #7A6B94;
  --line:        #EFE7F7;

  --radius:      22px;
  --radius-sm:   14px;
  --shadow:      0 4px 16px rgba(142,116,207,.10);
  --shadow-lg:   0 10px 30px rgba(142,116,207,.16);
  --wrap:        1040px;
}

*,*::before,*::after{ box-sizing:border-box }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Quicksand',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.logo-text{
  font-family:'Fredoka','Quicksand',system-ui,sans-serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
}
h1{ font-size:1.9rem }
h2{ font-size:1.4rem }
a{ color:var(--lav-deep) }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px }

/* ---------- sky background ---------- */
/* Three overlapping tints muddied to grey. Keep the cream dominant: soft,
   widely-spaced washes at low alpha, warm pink leading. */
.sky{
  background-color:var(--cream);
  background-image:
    radial-gradient(900px 520px at 8% 0%,   rgba(247,159,196,.13), transparent 70%),
    radial-gradient(760px 480px at 96% 6%,  rgba(143,211,244,.12), transparent 72%),
    radial-gradient(820px 520px at 50% 100%,rgba(255,226,154,.10), transparent 72%);
  background-attachment:fixed;
}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:rgba(255,252,247,.92);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);
}
.site-head .bar{
  display:flex; align-items:center; gap:12px;
  min-height:62px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; margin-right:auto }
.brand img{ height:44px; width:auto; display:block }
.brand .logo-text{ font-size:1.05rem; margin:0; line-height:1.05 }
.brand .logo-text span{ display:block; font-size:.74rem; color:var(--lav-deep) }

.cart-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--lavender); color:#fff; text-decoration:none;
  font-weight:700; padding:9px 15px; border-radius:999px;
  box-shadow:var(--shadow); white-space:nowrap;
}
.cart-btn .pill{
  background:#fff; color:var(--lav-deep);
  border-radius:999px; min-width:21px; height:21px;
  display:grid; place-items:center; font-size:.76rem; padding:0 6px;
}

/* ---------- hero ---------- */
.hero{ text-align:center; padding:30px 0 22px }
.hero h1{ font-size:2rem; margin-bottom:.3em }
.hero p{ color:var(--ink-soft); max-width:30em; margin:0 auto; font-size:1.02rem }
.hero .logo-big{ max-width:230px; width:62%; height:auto; margin:0 auto 10px; display:block }

/* ---------- product grid ---------- */
.grid{ display:grid; grid-template-columns:1fr; gap:16px; padding:8px 0 40px }
@media(min-width:560px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:900px){ .grid{ grid-template-columns:repeat(3,1fr); gap:22px } }

.card{
  background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
  border:2px solid var(--line);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg) }

/* 4:5, not 1:1. Product photos come off a phone in portrait, and a square
   crop cuts the top and bottom off every one of them. */
.card .ph{
  aspect-ratio:4/5; background:linear-gradient(140deg,#FDF2F8,#EEF6FF 50%,#F0FBF6);
  display:grid; place-items:center; position:relative; overflow:hidden;
}
.card .ph img{ width:100%; height:100%; object-fit:cover; display:block }
.card .ph .noimg{ font-size:2.6rem; opacity:.55 }

.card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; flex:1 }
.card h3{ font-size:1.12rem; margin:0 0 4px }
.card .meta{ color:var(--ink-soft); font-size:.86rem; margin:0 0 8px }
.card .desc{ font-size:.92rem; color:var(--ink-soft); margin:0 0 12px; flex:1 }
.card .foot{ display:flex; align-items:center; gap:10px; margin-top:auto }
.price{ font-family:'Fredoka',sans-serif; font-size:1.3rem; color:var(--pink-deep); font-weight:600 }

/* chips */
.chip{
  display:inline-block; font-size:.74rem; font-weight:700;
  padding:3px 10px; border-radius:999px; margin:0 5px 5px 0;
  background:var(--line); color:var(--lav-deep);
}
.chip.scent{ background:#FFF0F7; color:var(--pink-deep) }
.chip.type { background:#EDF8FF; color:var(--sky-deep) }
.chip.low  { background:#FFF4DC; color:#B07D1A }
.chip.out  { background:#F3F0F7; color:var(--ink-soft) }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem;
  border:none; border-radius:999px; padding:12px 22px;
  background:var(--pink); color:#fff; cursor:pointer; text-decoration:none;
  box-shadow:0 4px 0 var(--pink-deep);
  transition:transform .08s ease, box-shadow .08s ease;
  min-height:46px;                     /* comfortable thumb target */
}
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--pink-deep) }
.btn.lav  { background:var(--lavender); box-shadow:0 4px 0 var(--lav-deep) }
.btn.sky  { background:var(--sky);      box-shadow:0 4px 0 var(--sky-deep) }
.btn.mint { background:var(--mint);     box-shadow:0 4px 0 var(--mint-deep); color:#2C6B55 }
.btn.ghost{ background:#fff; color:var(--lav-deep); border:2px solid var(--line); box-shadow:none }
.btn.block{ width:100% }
.btn[disabled],.btn.disabled{
  background:#E8E2F0; color:#A99EBC; box-shadow:0 4px 0 #D6CEE4;
  cursor:not-allowed; pointer-events:none;
}
.btn.sm{ padding:8px 14px; font-size:.9rem; min-height:38px }

/* ---------- forms ---------- */
label{ display:block; font-weight:700; font-size:.9rem; margin:0 0 5px }
.hint{ font-weight:500; color:var(--ink-soft); font-size:.82rem }
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],textarea,select{
  width:100%; font:inherit; font-size:16px;   /* 16px stops iOS zooming on focus */
  padding:11px 13px; border:2px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--ink);
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--lavender);
  box-shadow:0 0 0 3px rgba(185,166,232,.25);
}
.field{ margin:0 0 15px }
.row2{ display:grid; grid-template-columns:1fr; gap:0 14px }
@media(min-width:620px){ .row2{ grid-template-columns:1fr 1fr } }

.panel{
  background:var(--card); border:2px solid var(--line);
  border-radius:var(--radius); padding:20px; box-shadow:var(--shadow);
  margin:0 0 18px;
}

/* radio cards */
.choice{
  display:flex; gap:12px; align-items:flex-start;
  border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; cursor:pointer; margin:0 0 10px; background:#fff;
}
.choice input{ margin-top:3px; accent-color:var(--lav-deep); width:18px; height:18px }
.choice.on{ border-color:var(--lavender); background:#FBF8FF }
.choice strong{ display:block }
.choice .hint{ margin:2px 0 0 }

/* ---------- notices ---------- */
.notice{
  border-radius:var(--radius-sm); padding:13px 16px; margin:0 0 16px;
  border:2px solid; font-size:.95rem;
}
.notice.ok   { background:#F0FBF6; border-color:var(--mint);  color:#2C6B55 }
.notice.warn { background:#FFF7E8; border-color:var(--butter);color:#8A6515 }
.notice.err  { background:#FFF0F4; border-color:var(--pink);  color:#A33E66 }
.notice.info { background:#F6F2FF; border-color:var(--lavender); color:var(--lav-deep) }

/* ---------- cart / totals ---------- */
.line{
  display:flex; gap:12px; align-items:center;
  padding:13px 0; border-bottom:2px solid var(--line);
}
.line:last-child{ border-bottom:none }
.line .thumb{
  width:62px; height:62px; border-radius:var(--radius-sm); flex:0 0 62px;
  object-fit:cover; background:linear-gradient(140deg,#FDF2F8,#EEF6FF);
  display:grid; place-items:center; font-size:1.5rem;
}
.line .info{ flex:1; min-width:0 }
.line .info strong{ display:block }
.qty{ display:flex; align-items:center; gap:6px }
.qty input{ width:58px; text-align:center; padding:7px 4px }

.totals{ margin-top:14px; border-top:2px dashed var(--line); padding-top:12px }
.totals .t{ display:flex; justify-content:space-between; padding:4px 0; color:var(--ink-soft) }
.totals .t.grand{
  font-family:'Fredoka',sans-serif; font-size:1.3rem;
  color:var(--ink); padding-top:8px;
}

/* ---------- venmo block ---------- */
.venmo{
  background:linear-gradient(150deg,#FFF7FB,#F4F9FF);
  border:3px solid var(--pink); border-radius:var(--radius);
  padding:22px; text-align:center;
}
.venmo .amount{
  font-family:'Fredoka',sans-serif; font-size:2.3rem;
  color:var(--pink-deep); line-height:1.1;
}
.venmo .note-box{
  display:inline-block; background:#fff; border:2px dashed var(--lavender);
  border-radius:var(--radius-sm); padding:9px 18px; margin:10px 0;
  font-family:'Fredoka',monospace; font-size:1.3rem; letter-spacing:.04em;
  color:var(--lav-deep);
}
.venmo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:#008CFF; color:#fff; font-weight:700; font-size:1.08rem;
  text-decoration:none; padding:14px 30px; border-radius:999px;
  box-shadow:0 4px 0 #0066BF; margin:6px 0 2px; min-height:52px;
}
.venmo-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #0066BF }

/* ---------- footer ---------- */
.site-foot{
  margin-top:40px; padding:26px 0 34px;
  border-top:2px solid var(--line); text-align:center;
  color:var(--ink-soft); font-size:.88rem;
}

/* ---------- sticky mobile bar ---------- */
.sticky-bar{
  position:sticky; bottom:0; z-index:30;
  background:rgba(255,252,247,.96); backdrop-filter:blur(10px);
  border-top:2px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  display:flex; gap:12px; align-items:center;
}
.sticky-bar .tot{ font-family:'Fredoka',sans-serif; font-size:1.15rem; white-space:nowrap }
.sticky-bar .btn{ flex:1 }

.empty{ text-align:center; padding:50px 20px; color:var(--ink-soft) }
.empty .big{ font-size:3.4rem; margin-bottom:8px }
.center{ text-align:center }
.muted{ color:var(--ink-soft) }
.small{ font-size:.86rem }
.mt{ margin-top:16px } .mb{ margin-bottom:16px }