/* The public shop.
 *
 * Loud on purpose, and kept entirely separate from app.css: the workshop stays
 * dark and calm, and nothing in here can reach it. The palette, the three
 * voices and the utility classes are the Frosty Rollers system rebuilt in plain
 * CSS -- same rules, no Tailwind.
 *
 * Voices: Luckiest Guy shouts (headings, buttons, the wordmark), Permanent
 * Marker scrawls (tags, prices, labels), Fredoka talks (everything else).
 */

:root {
  --ink: #140A38;
  --ink-800: #1C1049;
  --ink-700: #26165E;
  --ink-600: #332078;
  --ice: #43C6F5;
  --flame: #FF7A00;
  --punch: #FF1E8E;
  --grape: #7A2BF5;
  --slime: #A3E635;
  --pop: #FFD500;
  --cream: #FFF6E9;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, .45);
  --radius: 18px;

  --font-graff: "Luckiest Guy", "Impact", "Haettenschweiler", sans-serif;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --font-body: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--ice); }

/* --- the painted wall ------------------------------------------------- */

.wall {
  background-color: var(--ink);
  background-image:
    radial-gradient(60rem 40rem at 15% -10%, rgba(122, 43, 245, .55), transparent 60%),
    radial-gradient(50rem 35rem at 95% 0%, rgba(255, 30, 142, .35), transparent 55%),
    radial-gradient(45rem 45rem at 50% 120%, rgba(67, 198, 245, .28), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 9px);
}

.drips { position: relative; }
.drips::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 24px;
  background: inherit;
  -webkit-mask-image: radial-gradient(12px 22px at 10% 0, #000 98%, transparent 100%),
                      radial-gradient(9px 15px at 24% 0, #000 98%, transparent 100%),
                      radial-gradient(14px 26px at 41% 0, #000 98%, transparent 100%),
                      radial-gradient(8px 12px at 57% 0, #000 98%, transparent 100%),
                      radial-gradient(13px 24px at 72% 0, #000 98%, transparent 100%),
                      radial-gradient(10px 17px at 88% 0, #000 98%, transparent 100%);
          mask-image: radial-gradient(12px 22px at 10% 0, #000 98%, transparent 100%),
                      radial-gradient(9px 15px at 24% 0, #000 98%, transparent 100%),
                      radial-gradient(14px 26px at 41% 0, #000 98%, transparent 100%),
                      radial-gradient(8px 12px at 57% 0, #000 98%, transparent 100%),
                      radial-gradient(13px 24px at 72% 0, #000 98%, transparent 100%),
                      radial-gradient(10px 17px at 88% 0, #000 98%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}

/* --- lettering -------------------------------------------------------- */

h1, h2, h3, .graff {
  font-family: var(--font-graff);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0 0 .5em;
}

.graff-out {
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}
.graff-out-thin { -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }

.graff-ink {
  color: var(--cream);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--grape), 8px 8px 0 rgba(0, 0, 0, .35);
}

.wordmark-fill {
  background: linear-gradient(100deg, var(--pop), var(--flame) 35%, var(--punch) 70%, var(--grape));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}

.marker { font-family: var(--font-marker); }

/* --- furniture -------------------------------------------------------- */

.sticker {
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  background: var(--cream);
  color: var(--ink);
}

.tilt-l { transform: rotate(-2deg); }
.tilt-r { transform: rotate(2deg); }

.btn {
  display: inline-block;
  font-family: var(--font-graff);
  font-size: 1.05rem;
  letter-spacing: .03em;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--pop);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { transform: translate(1px, 1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: 5px 5px 0 var(--ink); transform: none; }

/* .btn-pop is the default fill, named so templates can say what they mean. */
.btn-pop { background: var(--pop); color: var(--ink); }
.btn-punch { background: var(--punch); color: var(--cream); }
.btn-ice { background: var(--ice); }
.btn-slime { background: var(--slime); }
.btn-ghost { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: 5px 5px 0 rgba(0,0,0,.4); }
.btn-small { font-size: .85rem; padding: .45rem .95rem; box-shadow: 4px 4px 0 var(--ink); }

.tag {
  display: inline-block;
  font-family: var(--font-marker);
  font-size: .82rem;
  padding: .15rem .7rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--ice);
  color: var(--ink);
  text-decoration: none;
}
.tag-pop { background: var(--pop); }
.tag-slime { background: var(--slime); }
.tag-punch { background: var(--punch); color: var(--cream); }

.price {
  font-family: var(--font-marker);
  font-size: 1.35rem;
  color: var(--pop);
  -webkit-text-stroke: 1px var(--ink);
  paint-order: stroke fill;
}

/* --- layout ----------------------------------------------------------- */

.shop-wrap { width: min(1180px, 92vw); margin: 0 auto; }
.stack > * + * { margin-top: 1rem; }
.centred { text-align: center; }
.muted { color: rgba(255, 246, 233, .68); }

.topstrip {
  background: var(--ink-700);
  border-bottom: 3px solid var(--ink);
  font-family: var(--font-marker);
  font-size: .85rem;
  text-align: center;
  padding: .4rem 1rem;
  color: var(--pop);
}

.shop-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink-800);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}
.shop-head .bar {
  width: min(1180px, 92vw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--font-graff);
  font-size: clamp(1.4rem, 3.6vw, 2rem);
  text-decoration: none;
  white-space: nowrap;
}
.shop-head nav { display: flex; gap: .9rem; align-items: center; margin-left: auto; }
.shop-head nav a {
  font-family: var(--font-graff);
  color: var(--cream);
  text-decoration: none;
  letter-spacing: .03em;
}
.shop-head nav a:hover, .shop-head nav a.on { color: var(--pop); }

.searchbar { display: flex; gap: .5rem; flex: 1 1 260px; min-width: 220px; }
.searchbar input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
}
.searchbar input::placeholder { color: rgba(20, 10, 56, .5); }

.cartlink { position: relative; }
.cartlink .count {
  position: absolute;
  top: -.55rem; right: -.9rem;
  min-width: 1.35rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--punch);
  border: 2px solid var(--ink);
  color: var(--cream);
  font-family: var(--font-marker);
  font-size: .75rem;
  text-align: center;
  line-height: 1.3rem;
}

main.shop { min-height: 60vh; padding: 2rem 0 4rem; }

.notice {
  width: min(1180px, 92vw);
  margin: 1rem auto 0;
  padding: .8rem 1.1rem;
  border-radius: 14px;
  border: 3px solid var(--ink);
  font-family: var(--font-marker);
  color: var(--ink);
}
.notice.ok { background: var(--slime); }
.notice.err { background: var(--flame); color: var(--ink); }

/* --- hero ------------------------------------------------------------- */

.hero {
  padding: 3.5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero h1 { font-size: clamp(2.6rem, 8vw, 5.2rem); margin-bottom: .3em; }
.hero p.lead { font-size: clamp(1.05rem, 2.4vw, 1.4rem); max-width: 46ch; }
.hero .cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.splat {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
}

/* --- product grid ----------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.card {
  background: var(--cream);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover { transform: translate(-2px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.card .shot {
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-bottom: 4px solid var(--ink);
  overflow: hidden;
}
.card .shot img { width: 100%; height: 100%; object-fit: cover; }
.card .body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card h3 {
  font-family: var(--font-graff);
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.15;
}
.card h3 a { color: var(--ink); text-decoration: none; }
.card .row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; }
.card .price { color: var(--punch); -webkit-text-stroke: 0; }
.card .blurb { font-size: .9rem; color: rgba(20, 10, 56, .78); margin: 0; }

.flag {
  position: absolute;
  top: .6rem; left: -.4rem;
  font-family: var(--font-marker);
  font-size: .8rem;
  background: var(--punch);
  color: var(--cream);
  border: 2px solid var(--ink);
  padding: .1rem .7rem;
  transform: rotate(-4deg);
}
.card .shot { position: relative; }

/* --- sections rail ---------------------------------------------------- */

.rail { display: flex; gap: .8rem; flex-wrap: wrap; }
.rail a {
  font-family: var(--font-graff);
  text-decoration: none;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: var(--ink-600);
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
}
.rail a.on { background: var(--pop); color: var(--ink); }

/* --- panels ----------------------------------------------------------- */

.panel {
  background: var(--cream);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  padding: 1.4rem 1.5rem;
}
.panel.dark { background: var(--ink-700); color: var(--cream); }
.panel h2 { color: inherit; }

.split { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

.gallery { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.gallery img { border: 3px solid var(--ink); border-radius: 12px; background: #fff; }
.shot-main {
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  background: #fff;
  width: 100%;
}

dl.spec { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
dl.spec dt { font-family: var(--font-marker); }
dl.spec dd { margin: 0; }

/* --- forms ------------------------------------------------------------ */

.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-family: var(--font-marker); margin-bottom: .3rem; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: #fff;
  color: var(--ink);
}
.hint { font-size: .85rem; color: rgba(20, 10, 56, .7); }
.panel.dark .hint { color: rgba(255, 246, 233, .7); }
.error {
  background: var(--flame);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: .7rem 1rem;
  font-family: var(--font-marker);
  margin-bottom: 1rem;
}

/* --- tables (basket, library) ----------------------------------------- */

.lines { width: 100%; border-collapse: collapse; }
.lines th, .lines td { text-align: left; padding: .7rem .5rem; border-bottom: 2px dashed rgba(20, 10, 56, .25); vertical-align: middle; }
.lines th { font-family: var(--font-marker); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.lines .right, .lines th.right { text-align: right; }
.lines .thumb { width: 64px; }
.lines .thumb img { width: 64px; height: 64px; object-fit: cover; border: 3px solid var(--ink); border-radius: 10px; background: #fff; }
.panel.dark .lines th, .panel.dark .lines td { border-bottom-color: rgba(255, 246, 233, .2); }

.total { font-family: var(--font-graff); font-size: 1.5rem; }

/* --- footer ----------------------------------------------------------- */

.shop-foot {
  background: var(--ink-800);
  border-top: 4px solid var(--ink);
  padding: 2.5rem 0;
  font-size: .92rem;
}
.shop-foot .cols { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: space-between; }
.shop-foot a { color: var(--pop); text-decoration: none; }
.shop-foot a:hover { text-decoration: underline; }

/* --- odds and ends ---------------------------------------------------- */

.empty {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--font-marker);
  font-size: 1.1rem;
}

.pager { display: flex; gap: .6rem; justify-content: center; align-items: center; margin-top: 2.5rem; flex-wrap: wrap; }

.badges { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .tilt-l, .tilt-r { transform: none; }
}