/* Rocko Pals — shop (/shop/) + adoption certificates (/tag/).
   Its own DALL·E toy-shop backdrop (fixed, like the site's other scenes). */
body { margin:0; font-family:var(--font-body); color:#1c2434; min-height:100vh;
  background: #F6E4C6 url("/scenes/toy-shop.webp?v=3bb9f07") center top / cover no-repeat fixed; }
[hidden] { display:none !important; }
.wrap { max-width: 980px; margin:0 auto; padding: 24px 16px 70px; }
.center { text-align:center; }

.pals-head { text-align:center; margin: 8px 0 18px; position:relative; }
/* soft light scrim so the title + lede stay crisp over the busy toy-shop backdrop */
.pals-head::before { content:""; position:absolute; inset:-14px -6% -2px; z-index:-1; pointer-events:none;
  background: radial-gradient(115% 96% at 50% 40%, rgba(255,249,238,.94) 0%, rgba(255,249,238,.72) 46%, rgba(255,249,238,0) 80%); }
/* a solid red badge — tiny red caps were unreadable over the toy-shop backdrop (Ron) */
.pals-head .eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; font-weight:800;
  color:#fff; background:#d83a34; padding:6px 14px; border-radius:999px; box-shadow:0 3px 0 #a82a25; margin:0 0 8px; }
.pals-head h1 { font-family:var(--font-display); font-weight:700; font-size: clamp(2.2rem,8vw,3.4rem); margin:0 0 8px; color:#1c2434; }
.pals-head .lede { color:#334155; font-weight:700; margin:0 auto; max-width:56ch; line-height:1.5; }

/* scarcity strip */
.scarcity { max-width: 720px; margin: 0 auto; background:#fff; border-radius:20px; padding:6px;
  box-shadow:0 12px 30px rgba(20,60,90,.16); }
.scarcity-in { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; border:2px dashed rgba(216,58,52,.35); border-radius:15px; padding:12px 6px; }
.scarcity-in > div { text-align:center; }
.scarcity .n { display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,5vw,1.8rem); color:#d83a34; line-height:1.1; }
.scarcity .n.gold { color:#B8860B; }
.scarcity .l { display:block; color:#4b5563; font-weight:800; font-size:.82rem; line-height:1.25; margin-top:2px; }

.sect { font-family:var(--font-display); font-weight:700; font-size:1.6rem; text-align:center; margin: 34px 0 14px; color:#1c2434; }

/* product cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.pal { background:#fff; border-radius:22px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 12px 30px rgba(20,60,90,.16); }
.pal .ph { position:relative; aspect-ratio: 1/1; background: radial-gradient(circle at 50% 60%, #FFF4E0 0%, #FDE3C4 70%); display:grid; place-items:center; }
.pal .ph img { width:82%; height:82%; object-fit:contain; filter: drop-shadow(0 10px 14px rgba(80,40,10,.22)); }
.pal .flag { position:absolute; top:12px; left:12px; background:#1c2434; color:#fff; font-weight:800; font-size:.74rem;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.pal .stamp { display:none; position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) rotate(-14deg);
  font-family:var(--font-display); font-weight:700; font-size:2.2rem; letter-spacing:.08em; text-transform:uppercase;
  color:#d83a34; border:4px solid #d83a34; border-radius:10px; padding:2px 14px; background:rgba(255,255,255,.75); }
.pal[data-phase="retired"] .stamp { display:block; }
.pal[data-phase="retired"] .ph img { filter: grayscale(.6) drop-shadow(0 10px 14px rgba(80,40,10,.22)); }

/* the hang tag — a Rocko-red folded tag with a punched hole */
.hangtag { position:relative; margin:-34px 18px 0; background:#d83a34; color:#fff; border-radius:16px 16px 16px 16px;
  padding:16px 16px 14px 44px; box-shadow:0 6px 0 #a82a25, 0 10px 20px rgba(120,20,15,.25); z-index:1; }
.hangtag .hole { position:absolute; left:16px; top:18px; width:14px; height:14px; border-radius:50%; background:#fff;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.3); }
.hangtag .tag-no { display:block; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.hangtag .tag-name { display:block; font-family:var(--font-display); font-weight:700; font-size:1.4rem; line-height:1.15; }
.hangtag .tag-bday { display:block; font-weight:800; font-size:.85rem; color:#FFE08A; }
.hangtag .tag-poem { margin:8px 0 0; font-style:italic; font-weight:700; font-size:.66rem; line-height:1.38; text-wrap:pretty; }

.pal .body { padding:14px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pal .spec { color:#4b5563; font-weight:700; font-size:.88rem; }
.pal .ed { display:flex; justify-content:space-between; gap:8px; font-weight:800; font-size:.86rem; color:#1c2434; }
.pal .ed-a { color:#d83a34; }
.pal .cta { margin-top:auto; padding-top:4px; }
.buy { display:block; text-align:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  background:#d83a34; color:#fff; text-decoration:none; padding:12px 18px; border-radius:999px; box-shadow:0 5px 0 #a82a25; }
.buy:active { transform:translateY(3px); box-shadow:0 2px 0 #a82a25; }
.buy.soon { background:#E8E3DA; color:#4b5563; box-shadow:none; font-variant-numeric: tabular-nums; }
@keyframes palflash { 0%,100% { box-shadow:0 12px 30px rgba(20,60,90,.16); } 30% { box-shadow:0 0 0 5px rgba(216,58,52,.7); } }
.pal.flash { animation: palflash 1.7s ease; }

/* how it works + grown-ups */
.steps { list-style:none; padding:0; margin:0 auto; max-width:720px; display:grid; gap:10px; }
.steps li, .grownups { background:#fff; border-radius:18px; padding:14px 16px; box-shadow:0 8px 22px rgba(20,60,90,.12); }
.steps li { display:flex; gap:12px; align-items:flex-start; color:#334155; font-weight:700; line-height:1.5; }
.steps .ic { font-size:1.5rem; line-height:1.1; }
.steps b, .grownups b { color:#1c2434; }
.steps a { color:#d83a34; }
.center .btn { margin-top:16px; }
.grownups { max-width:720px; margin:34px auto 0; }
.grownups h2 { font-family:var(--font-display); font-weight:700; font-size:1.25rem; margin:0 0 8px; }
.grownups p { color:#334155; font-weight:700; line-height:1.55; margin:0 0 8px; }
.grownups p:last-child { margin:0; }

/* ---------- /tag/ : adoption certificate ---------- */
.panel { background:#fff; border-radius:20px; padding:20px; margin:16px auto; max-width:620px; box-shadow:0 12px 30px rgba(20,60,90,.16); }
.panel h2 { font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin:0 0 6px; }
.panel p { color:#334155; font-weight:700; line-height:1.5; margin:0 0 10px; }
.field { display:block; margin:10px 0; }
.field span { display:block; font-weight:800; font-size:.86rem; color:#1c2434; margin-bottom:4px; }
.field input, .field select { width:100%; box-sizing:border-box; font:inherit; font-weight:800; font-size:1.05rem; padding:11px 12px;
  border:2px solid #E8E3DA; border-radius:12px; background:#FBFAF7; color:#1c2434; }
.field input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.08em; text-transform:uppercase; }
.field input:focus, .field select:focus { outline:none; border-color:#d83a34; }
.namepick { display:flex; gap:8px; align-items:flex-end; }
.namepick .field { flex:1; margin:0; }
.dice { font-size:1.4rem; border:0; background:#FFF4E0; border-radius:12px; padding:9px 12px; cursor:pointer; }
.go { font:inherit; font-family:var(--font-display); font-weight:700; font-size:1.1rem; border:0; cursor:pointer;
  background:#d83a34; color:#fff; padding:11px 24px; border-radius:999px; box-shadow:0 5px 0 #a82a25; margin-top:6px; }
.go:active { transform:translateY(3px); box-shadow:0 2px 0 #a82a25; }
.go.alt { background:#1c2434; box-shadow:0 5px 0 #0b1220; }
.msg { font-weight:800; min-height:1.4em; margin-top:8px; color:#C2410C; }
.msg.ok { color:#0E7C6B; }
.tabs { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin: 6px 0 0; }
.tabs button { font:inherit; font-weight:800; border:2px solid rgba(20,60,90,.12); background:#fff; color:#1c2434; padding:8px 14px; border-radius:999px; cursor:pointer; }
.tabs button[aria-selected="true"] { background:#1c2434; color:#fff; border-color:#1c2434; }

/* the certificate itself */
.cert { max-width:620px; margin:16px auto; background:#FFFBF2; border-radius:10px; padding:8px; color:#2c2413;
  box-shadow:0 18px 44px rgba(20,60,90,.22); }
.cert-in { border:3px solid #d83a34; border-radius:6px; padding:20px 18px; text-align:center; box-shadow: inset 0 0 0 4px #FFFBF2, inset 0 0 0 5px rgba(216,58,52,.4); }
.cert.gold .cert-in { border-color:#C9A227; box-shadow: inset 0 0 0 4px #FFFBF2, inset 0 0 0 5px rgba(201,162,39,.55); }
.cert .lbl { font-weight:800; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:#d83a34; }
.cert img { width:150px; height:150px; object-fit:contain; display:block; margin:8px auto 0; }
.cert h2 { font-family:var(--font-display); font-weight:700; font-size:1.9rem; margin:4px 0 0; color:#1c2434; }
.cert .edn { font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#d83a34; margin:2px 0; }
.cert .goldtag { display:inline-block; margin:6px 0; font-weight:800; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:#5a4300; background:linear-gradient(135deg,#FFE9A3,#E7B936 55%,#FFF1BF); padding:5px 12px; border-radius:999px; box-shadow:0 2px 0 #9c7a1e; }
.cert .poem { font-style:italic; font-weight:700; color:#4a3f24; line-height:1.5; margin:10px 0; }
.cert .keeper { font-weight:800; color:#1c2434; margin:10px 0 2px; }
.cert .keeper b { font-family:var(--font-display); font-size:1.3rem; color:#d83a34; }
.cert .id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.1em; color:#6C665E; font-size:.85rem; }
.cert ol { text-align:left; max-width:340px; margin:10px auto 0; padding-left:20px; color:#4a3f24; font-weight:700; font-size:.9rem; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:800; font-size:1.15rem; letter-spacing:.1em;
  background:#FFF4E0; border:2px dashed #d83a34; border-radius:12px; padding:12px; text-align:center; word-break:break-all; color:#1c2434; }

.shelf { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.shelf a { display:flex; flex-direction:column; align-items:center; width:104px; text-decoration:none; color:#1c2434; font-weight:800; font-size:.8rem; text-align:center; }
.shelf img { width:84px; height:84px; object-fit:contain; background:#FFF4E0; border-radius:16px; }
.shelf a.gold img { box-shadow:0 0 0 3px #E7B936; }

@media (max-width: 520px) {
  .scarcity .l { font-size:.74rem; }
  .hangtag { margin: -28px 12px 0; }
}

/* product photography (img/shop/) */
.pals-hero { display:block; width:100%; max-width:860px; height:auto; margin:18px auto 0; border-radius:22px;
  box-shadow:0 12px 30px rgba(20,60,90,.18); }
.pal .ph img.photo { width:100%; height:100%; object-fit:cover; filter:none; }
.pal[data-phase="retired"] .ph img.photo { filter: grayscale(.6); }
.goldhunt { display:flex; gap:18px; align-items:center; max-width:720px; margin:18px auto 0; background:#fff; border-radius:20px;
  padding:14px; box-shadow:0 12px 30px rgba(20,60,90,.16); border:2px solid #E7B936; }
.goldhunt img { width:150px; height:150px; flex:none; border-radius:16px; object-fit:cover; }
.goldhunt .eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; color:#B8860B; margin:0 0 2px; }
.goldhunt h2 { font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin:0 0 6px; color:#1c2434; }
.goldhunt p { color:#334155; font-weight:700; line-height:1.5; margin:0; }
.cert img.photo { border-radius:16px; }
@media (max-width: 520px) {
  .goldhunt { flex-direction:column; text-align:center; }
}

/* header actions + "How the tag works" pop-up */
.head-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:16px 0 0; }
.pill-btn { font:inherit; font-family:var(--font-display); font-weight:700; font-size:1.05rem; cursor:pointer; text-decoration:none;
  background:#1c2434; color:#fff; border:0; padding:11px 20px; border-radius:999px; box-shadow:0 5px 0 #0b1220; }
.pill-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #0b1220; }
.pill-btn.ghost { background:#fff; color:#1c2434; box-shadow:0 5px 0 rgba(20,60,90,.2); }
.pill-btn.ghost:active { box-shadow:0 2px 0 rgba(20,60,90,.2); }
.how { width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box; border:0; border-radius:24px;
  padding:22px 18px 18px; background:#FFFBF2; color:#1c2434; box-shadow:0 24px 60px rgba(10,20,40,.35); }
.how::backdrop { background:rgba(20,28,44,.55); }
.how[open] { animation: howin .18s ease-out; }
@keyframes howin { from { opacity:0; transform:translateY(10px) scale(.98); } }
.how .eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:800; color:#d83a34; margin:0 0 2px; text-align:center; }
.how h2 { font-family:var(--font-display); font-weight:700; font-size:1.6rem; margin:0 0 14px; text-align:center; }
.how .steps li { box-shadow:none; border:1px solid rgba(20,60,90,.1); }
.how-x { position:absolute; top:10px; right:12px; width:40px; height:40px; border:0; border-radius:50%; background:rgba(20,60,90,.08);
  font-size:1.6rem; line-height:1; color:#1c2434; cursor:pointer; }
.how-actions { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:16px; }
.how-actions .buy { padding:11px 22px; }
.how-actions form { margin:0; }
@media (prefers-reduced-motion: reduce) { .how[open] { animation:none; } }

/* series sections — Series 2 "The New Litter" sits below Series 1 */
.series { scroll-margin-top: 90px; }
.series + .series { margin-top: 44px; }
.series-label { width:fit-content; margin:0 auto -14px; text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; font-weight:800;
  color:#fff; background:#d83a34; padding:6px 14px; border-radius:999px; box-shadow:0 3px 0 #a82a25; }
.series-banner { display:block; width:100%; max-width:860px; height:auto; margin:0 auto 18px; border-radius:22px;
  box-shadow:0 12px 30px rgba(20,60,90,.18); }

/* 4 Pals per series: 4 across on wide screens, 2 across in between, 1 on
   phones — never 3 + a lonely 4th. */
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) {
  .wrap { max-width: 1200px; }
  .grid { grid-template-columns: repeat(4, 1fr); }
}
/* each poem line is its own block; if a long line must wrap at narrow card
   widths, the continuation hangs indented so it still reads as 4 verses */
.hangtag .tag-poem .verse { display:block; padding-left:.9em; text-indent:-.9em; }
@media (min-width: 1180px) {
  .hangtag { margin: -34px 10px 0; padding-left: 36px; padding-right: 12px; }
  .hangtag .hole { left: 12px; }
}