/* CuteGhostPrints — the whole site's look.
   Pink and plum, bubbly headings, a cream page. Everything sizes off the
   tokens below, and every grid collapses to one or two columns on a phone. */

:root {
  --pink: #e0559a;
  --pink-soft: #fdeef5;
  --pink-line: #f4e1eb;
  --plum: #3b2140;
  /* The pink from the DTF TRANSFER lettering on the mockups, sampled from the
     artwork itself, with a tint of it for backgrounds and a deeper one for
     text — #fc87ba is too light to read at small sizes on white. */
  --blush: #fc87ba;
  --blush-soft: #ffe3f0;
  --rose: #d1457f;
  --cream: #fffafc;
  --ink: #3b2140;
  --muted: #8b7a86;
  --faint: #b08aa0;
  --gap: 20px;
  --page: 1280px;
  --radius: 18px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font:
    400 16px/1.5 Nunito,
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

h1,
h2,
h3 {
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}
h2 {
  font-size: clamp(24px, 3.2vw, 32px);
}

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

/* ---------- announcement bar ---------- */
.ticker {
  background: var(--plum);
  color: #fde4ee;
  font: 700 12.5px/1 Nunito;
  letter-spacing: 1px;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
}
.ticker > span {
  display: inline-block;
  animation: slide 34s linear infinite;
}
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ticker > span {
    animation: none;
  }
}

/* ---------- header ---------- */
header.site {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 250, 252, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pink-line);
}
.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
.bar .logo {
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
}
/* The lettering is three times as wide as it is tall, so height is what is
   set and the width follows. 52px keeps the bar the height it was with the
   two lines of text. */
.bar .logo img {
  height: 52px;
  width: auto;
  display: block;
}
.icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  transition: background 0.15s;
}
.icon-btn:hover {
  background: var(--pink-soft);
}
.cart-btn {
  position: relative;
}
.cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--pink);
  color: #fff;
  font: 800 11px/18px Nunito;
  text-align: center;
}

nav.main {
  border-top: 1px solid var(--pink-line);
}
nav.main ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.main > .wrap > ul > li {
  position: relative;
}
nav.main a,
nav.main .top {
  display: block;
  padding: 11px 14px;
  font: 800 13.5px Nunito;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
nav.main li:hover > a,
nav.main li:hover > .top {
  color: var(--pink);
}
nav.main .menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--pink-line);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(120, 60, 100, 0.16);
  padding: 8px 0;
  z-index: 5;
}
nav.main li:hover > .menu {
  display: block;
}
nav.main .menu a {
  padding: 8px 18px;
  text-transform: none;
  font: 600 14px Nunito;
  letter-spacing: 0;
}
nav.main .menu a:hover {
  background: var(--pink-soft);
  color: var(--pink);
}
nav.main .menu .head {
  padding: 9px 18px 3px;
  font: 800 10.5px Nunito;
  letter-spacing: 1.4px;
  color: var(--faint);
}

.burger {
  display: none;
}

/* ---------- buttons ---------- */
.btn,
.btn-ghost {
  display: inline-block;
  border-radius: 26px;
  font: 800 14px Nunito;
  padding: 13px 24px;
  text-align: center;
  transition:
    transform 0.12s,
    box-shadow 0.15s,
    background 0.15s;
}
.btn {
  background: var(--pink);
  color: #fff;
}
.btn:hover {
  background: #cf417f;
  transform: translateY(-1px);
}
.btn-ghost {
  background: #fff;
  color: var(--rose);
  border: 2px solid var(--blush);
  padding: 11px 22px;
}
.btn-ghost:hover {
  background: var(--blush-soft);
  border-color: var(--rose);
}

/* ---------- the mockup: a photo with the design laid into its box ---------- */
.mock {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.mock > img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mock > .slot {
  position: absolute;
}
.mock > .slot > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- product card ---------- */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Shirts get a bigger box on the home page: a chest print at a quarter of the
   row is too small to see what you're buying. */
.grid.roomy {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background: #fff;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(120, 60, 100, 0.14);
}
.card .shot {
  position: relative;
}
/* The second mockup, revealed on hover — the pink one behind the white one. */
.card .shot .alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.28s;
}
.card:hover .shot .alt {
  opacity: 1;
}
/* Under the photo, not over it — on the mockup it was sitting on the shop's
   own logo, which is part of the picture. */
.card .quick {
  display: block;
  width: 100%;
  background: var(--blush);
  color: #fff;
  font: 800 12.5px Nunito;
  letter-spacing: 0.6px;
  padding: 12px 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.card .quick:hover {
  background: var(--pink);
  color: #fff;
}
.card .quick.added {
  background: #1d9e75;
  color: #fff;
}
.card .body {
  padding: 13px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.chip {
  align-self: flex-start;
  background: var(--blush-soft);
  color: var(--rose);
  font: 800 10.5px Nunito;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9px;
}
.chip.new {
  background: #fde68a;
  color: #7a5a00;
}
.card .title {
  font: 700 15.5px/1.3 Nunito;
}
.card .price {
  font: 800 17px Nunito;
  color: var(--pink);
  margin-top: auto;
  padding-top: 4px;
}

/* ---------- sections ---------- */
section {
  margin-top: 54px;
}
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.head-row .sub {
  font: 600 15px Nunito;
  color: var(--muted);
  margin-top: 5px;
}
.link-more {
  font: 800 13px Nunito;
  color: var(--rose);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ---------- hero ---------- */
.hero {
  margin-top: 22px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(120deg, #fde4ee 0%, #efe4fb 55%, #e2f1fb 100%);
  display: grid;
  /* The cards get the bigger half. They are the only picture of the product
     above the fold, and at an even split they sat small in the middle of their
     own column with a corridor of empty gradient on either side. */
  grid-template-columns: 0.85fr 1.35fr;
  align-items: center;
  gap: 0;
  padding: 36px 30px 36px 44px;
}
.hero .eyebrow {
  font: 800 12.5px Nunito;
  letter-spacing: 2.2px;
  color: var(--pink);
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  margin: 12px 0 14px;
}
.hero h1 span {
  color: var(--rose);
}
.hero p {
  font: 600 16px/1.55 Nunito;
  color: #6b5a66;
  max-width: 430px;
  margin: 0;
}
.hero .ctas {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.hero-shots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
/* The three cups share the room they're given — fixed widths pushed the page
   sideways on a narrow screen. They overlap heavily, so the three together are
   wider than the column and each one is bigger than a third of it. */
.hero-shots > div {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 34px rgba(120, 60, 100, 0.22);
  margin: 0 -30px;
}
.hero-shots > div.big {
  flex: 1.3 1 0;
  z-index: 2;
}
/* The outer two lean outwards, so without a little room their corners are
   sliced off by the banner's rounded edge. */
.hero-shots {
  padding: 14px 20px;
}

/* ---------- trust strip ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.trust > div {
  background: #fff;
  border: 1px solid var(--pink-line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.trust .ico {
  font-size: 26px;
  line-height: 1;
  flex: none;
}
.trust .t {
  font: 800 15px Nunito;
  line-height: 1.25;
}
.trust .s {
  font: 600 12.5px/1.4 Nunito;
  color: var(--muted);
  margin-top: 3px;
}

/* ---------- category circles ---------- */
.cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 24px;
}
/* The tiles grow to fill the row — a category is a photo, and a small photo
   of a product is no use. A short last row still centres. */
.cats a {
  text-align: center;
  flex: 1 1 210px;
  max-width: 300px;
}
.cats .circ {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--pink-line);
  background: #fff;
  box-shadow: 0 8px 18px rgba(120, 60, 100, 0.1);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.cats a:hover .circ {
  box-shadow: 0 14px 26px rgba(120, 60, 100, 0.16);
}
/* The tiles with no product behind them — mystery bundles, gang sheets — are
   just an emoji, so they get the pink instead of an empty white square. */
.cats .circ.plain {
  background: var(--blush-soft);
  border-color: transparent;
  aspect-ratio: 1;
}
.cats a:hover .circ {
  transform: translateY(-4px);
}
.cats .lbl {
  font: 800 15.5px Nunito;
  margin-top: 12px;
}

/* ---------- vibes ---------- */
.vibes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.vibes a {
  flex: 0 1 180px;
  border-radius: 16px;
  padding: 18px 10px;
  text-align: center;
  font: 800 14px Nunito;
  border: 1px solid var(--pink-line);
  background: #fff;
  transition:
    transform 0.15s,
    background 0.15s;
}
.vibes a:hover {
  transform: translateY(-3px);
  background: var(--pink-soft);
}
.vibes .emo {
  display: block;
  font-size: 26px;
  margin-bottom: 6px;
}

/* ---------- dark band ---------- */
.band {
  margin-top: 54px;
  border-radius: 28px;
  background: var(--plum);
  color: #fff;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px 40px;
}
.band .eyebrow {
  font: 800 12.5px Nunito;
  letter-spacing: 2.2px;
  color: #f7b6d2;
}
.band h2 {
  margin: 10px 0 16px;
}
.band .art {
  border-radius: 18px;
  background: #4c2c53;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 76px;
}

/* ---------- steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.steps div {
  background: #fff;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius);
  padding: 24px;
}
/* Centred by the box rather than by a line-height guess — Nunito's descender
   pushed the digit to the bottom of the circle. Solid pink, not pink on pink,
   which read as washed out rather than as a deliberate step marker. */
.steps .n {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font: 800 17px/1 Nunito;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.steps h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.steps p {
  font: 600 14.5px/1.6 Nunito;
  color: var(--muted);
  margin: 0;
}

/* ---------- reviews ---------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.reviews div {
  background: #fff;
  border: 1px solid var(--pink-line);
  border-radius: var(--radius);
  padding: 22px;
}
.reviews .stars {
  color: #f59e0b;
  font-size: 15px;
}
.reviews p {
  font: 600 15px/1.6 Nunito;
  margin: 10px 0;
}
.reviews .who {
  font: 800 13px Nunito;
  color: var(--faint);
}

/* ---------- newsletter ---------- */
.news {
  margin-top: 54px;
  border-radius: 28px;
  padding: 40px;
  background: linear-gradient(120deg, #fde4ee, #efe4fb);
  text-align: center;
}
.news h2 {
  margin-bottom: 8px;
}
.news p {
  font: 600 15px Nunito;
  color: #6b5a66;
  margin: 0 0 18px;
}
.news form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.news input {
  border: 2px solid #fff;
  background: #fff;
  border-radius: 26px;
  padding: 13px 20px;
  font: 600 15px Nunito;
  min-width: 280px;
  outline: none;
}
.news input:focus {
  border-color: var(--pink);
}

/* ---------- footer ---------- */
footer.site {
  margin-top: 60px;
  background: var(--plum);
  color: #e7d6e4;
  padding: 40px 0 22px;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 28px;
}
footer.site h3 {
  font: 800 13px Nunito;
  letter-spacing: 1.4px;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 12px;
}
footer.site a,
footer.site li {
  display: block;
  font: 600 14px/2 Nunito;
  color: #cbb0c8;
}
footer.site a:hover {
  color: #fff;
}
footer.site ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer.site .fine {
  border-top: 1px solid #5a3b5e;
  margin-top: 26px;
  padding-top: 14px;
  font: 600 12.5px Nunito;
  color: #b99bb5;
}

/* ---------- collection page ---------- */
/* Four across at the same card size as the three on the home page: the row
   gets wider rather than the cards getting smaller. */
.wrap.roomy-page {
  max-width: 1440px;
  --gap: 11px;
}
.crumbs {
  font: 700 13px Nunito;
  color: var(--muted);
  padding: 22px 0 0;
}
.crumbs a:hover {
  color: var(--pink);
}
.page-head {
  margin: 10px 0 22px;
}
.page-head p {
  font: 600 15px Nunito;
  color: var(--muted);
  margin: 6px 0 0;
}
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.filters button {
  border: 2px solid var(--pink-line);
  background: #fff;
  border-radius: 22px;
  padding: 8px 15px;
  font: 800 13px Nunito;
}
.filters button.on {
  border-color: var(--pink);
  background: var(--pink-soft);
  color: var(--pink);
}

/* ---------- product page ---------- */
.product {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  margin-top: 8px;
}
.gallery .main {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--pink-line);
  cursor: zoom-in;
  position: relative;
}
.gallery .main::after {
  content: "⤢";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(59, 33, 64, 0.72);
  color: #fff;
  font: 700 17px/38px Nunito;
  text-align: center;
  opacity: 0;
  transition: opacity 0.18s;
}
.gallery .main:hover::after {
  opacity: 1;
}
.gallery .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.gallery .thumbs button {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--pink-line);
  padding: 0;
}
.gallery .thumbs button.on {
  border-color: var(--pink);
}
.info h1 {
  font-size: clamp(28px, 3.4vw, 38px);
  margin: 8px 0 10px;
}
.info .type {
  font: 800 12.5px Nunito;
  letter-spacing: 1.2px;
  color: var(--faint);
  text-transform: uppercase;
}
.info .price {
  font: 800 30px Nunito;
  color: var(--pink);
  margin: 14px 0 6px;
}
.info .stock {
  font: 700 14px Nunito;
  color: #1d9e75;
}
.info .lbl {
  font: 800 14px Nunito;
  margin: 22px 0 9px;
}
.sizes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sizes button {
  border: 2px solid #ead3e0;
  background: #fff;
  border-radius: 14px;
  padding: 11px 15px;
  font: 800 14px Nunito;
}
.sizes button.on {
  border-color: var(--pink);
  background: var(--pink-soft);
}
.info .add {
  width: 100%;
  margin-top: 22px;
  padding: 15px;
}
details.acc {
  border-top: 1px solid var(--pink-line);
  padding: 14px 0;
}
details.acc summary {
  font: 800 16px Nunito;
  cursor: pointer;
  list-style: none;
}
details.acc summary::-webkit-details-marker {
  display: none;
}
details.acc summary::after {
  content: " +";
  color: var(--pink);
}
details.acc[open] summary::after {
  content: " −";
}
details.acc .txt {
  font: 600 14.5px/1.7 Nunito;
  color: #6b5a66;
  margin-top: 8px;
}

/* ---------- cart drawer ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(59, 33, 64, 0.4);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.scrim.open {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: #fff;
  z-index: 61;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: none;
}
.drawer .top {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--pink-line);
}
.drawer .top h2 {
  font-size: 22px;
}
.drawer .lines {
  flex: 1;
  overflow: auto;
  padding: 6px 20px;
}
.line {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--pink-line);
}
.line .nm {
  font: 700 14.5px/1.3 Nunito;
}
.line .sz {
  font: 600 12.5px Nunito;
  color: var(--muted);
}
.line .qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.line .qty button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pink-soft);
  font: 800 14px/1 Nunito;
  color: var(--pink);
}
.drawer .foot {
  border-top: 1px solid var(--pink-line);
  padding: 18px 20px 22px;
}
.drawer .tot {
  display: flex;
  justify-content: space-between;
  font: 800 18px Nunito;
  margin-bottom: 4px;
}
.drawer .note {
  font: 600 12.5px Nunito;
  color: var(--muted);
  margin-bottom: 14px;
}
.empty {
  text-align: center;
  color: var(--muted);
  font: 600 15px Nunito;
  padding: 50px 0;
}

/* ---------- simple pages ---------- */
.simple {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
}
.simple h1 {
  font-size: 38px;
  margin-bottom: 12px;
}
.simple p {
  font: 600 16px/1.7 Nunito;
  color: var(--muted);
}
.skeleton {
  min-height: 55vh;
  display: grid;
  place-items: center;
  color: var(--faint);
  font: 700 15px Nunito;
}

/* ---------- phones and tablets ---------- */
@media (max-width: 1080px) {
  .grid,
  .grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid.roomy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid.six,
  .cats,
  .vibes {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 32px 26px;
  }
  .hero-shots {
    margin-top: 10px;
  }
  .trust {
    grid-template-columns: repeat(2, 1fr);
  }
  .product {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .band {
    grid-template-columns: 1fr;
  }
  .band .art {
    max-width: 200px;
  }
}

@media (max-width: 720px) {
  :root {
    --gap: 12px;
  }
  .wrap {
    padding: 0 16px;
  }
  .grid,
  .grid.three,
  .grid.six,
  .cats,
  .steps,
  .reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vibes {
    grid-template-columns: repeat(3, 1fr);
  }
  .steps,
  .reviews {
    grid-template-columns: 1fr;
  }
  section {
    margin-top: 38px;
  }
  .burger {
    display: grid;
  }
  nav.main {
    display: none;
  }
  nav.main.open {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--pink-line);
  }
  nav.main.open ul {
    flex-direction: column;
    align-items: stretch;
  }
  nav.main.open .menu {
    display: block !important;
    position: static;
    border: 0;
    box-shadow: none;
    min-width: 0;
    padding: 0 0 8px 14px;
  }
  nav.main.open .top {
    color: var(--faint);
  }
  /* The name at desktop size pushed the cart off the edge of a phone. */
  .bar {
    gap: 4px;
  }
  .bar .logo {
    margin: 0 auto;
    gap: 6px;
    min-width: 0;
  }
  .bar .logo img {
    height: 40px;
  }
  .icon-btn {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .card .shot .alt {
    display: none;
  }
  .news input {
    min-width: 0;
    flex: 1;
  }
  footer.site .cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* A design whose public copy hasn't been made yet. */
.mock .awaiting {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 2px dashed rgba(224, 85, 154, 0.35);
  background: rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  text-align: center;
  font: 800 11px Nunito;
  letter-spacing: 0.4px;
  color: var(--faint);
}

/* ---------- questions ---------- */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq details.acc:first-of-type {
  border-top: 0;
}

/* ---------- search ---------- */
.searchbar {
  display: none;
  border-top: 1px solid var(--pink-line);
  padding: 12px 0;
}
.searchbar.open {
  display: flex;
  gap: 10px;
}
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--pink-line);
  border-radius: 26px;
  padding: 12px 20px;
  font: 600 15px Nunito;
  outline: none;
  background: #fff;
}
.searchbar input:focus {
  border-color: var(--pink);
}
.searchbar button {
  flex: none;
  background: var(--pink);
  color: #fff;
  border-radius: 26px;
  padding: 0 24px;
  font: 800 14px Nunito;
}
.searchbar button:hover {
  background: #cf417f;
}

/* ---------- the photo, full size ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(32, 30, 34, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
}
.lightbox .lb-stage {
  margin: 0;
  width: min(760px, 78vw);
  max-height: 86vh;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.32);
}
.lightbox .lb-stage .mock {
  max-height: 86vh;
}
.lightbox .lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--plum);
  font-size: 19px;
  box-shadow: 0 4px 14px rgba(90, 70, 95, 0.18);
}
.lightbox .lb-close:hover,
.lightbox .lb-nav:hover {
  background: var(--pink-soft);
  color: var(--pink);
}
.lightbox .lb-nav {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  color: var(--plum);
  font: 700 30px/1 Nunito;
  box-shadow: 0 4px 14px rgba(90, 70, 95, 0.18);
}
.lightbox .lb-count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  color: #ece7ec;
  font: 700 13.5px Nunito;
}

@media (max-width: 720px) {
  .lightbox {
    padding: 12px;
  }
  .lightbox .lb-stage {
    width: 100%;
  }
  .lightbox .lb-nav {
    position: absolute;
    bottom: 60px;
    width: 46px;
    height: 46px;
  }
  .lightbox .lb-nav.prev {
    left: 16px;
  }
  .lightbox .lb-nav.next {
    right: 16px;
  }
}

/* ---------- Welcome offer popup ---------- */
/* Sits over everything on a first visit. The card uses the same pink-to-lilac
   wash as the newsletter block at the foot of the home page, so it reads as
   part of the shop rather than an ad that landed on it. */
.offer-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Flex with `margin:auto` on the card rather than grid centring: when the
     card is taller than the screen the overflow has to spill downwards, and a
     centred grid item cuts off its own top instead. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 60px 20px 24px;
  background: rgba(59, 33, 64, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.offer-back.in {
  opacity: 1;
}
.offer {
  position: relative;
  width: min(440px, 100%);
  margin: auto;
  /* Must stay visible — the mascot hangs off the top edge, and any scrolling
     here would slice its head off. The backdrop does the scrolling instead. */
  overflow: visible;
  border-radius: 28px;
  padding: 56px 32px 28px;
  text-align: center;
  background: linear-gradient(120deg, #fde4ee, #efe4fb);
  box-shadow: 0 24px 60px rgba(59, 33, 64, 0.35);
  transform: translateY(14px) scale(0.97);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2),
    opacity 0.2s ease;
}
.offer-back.in .offer {
  transform: none;
}
/* The mascot straddles the top edge, the way the bear does on the sites he
   liked — it needs the card's padding-top to have room for it. */
.offer-ghost img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.offer-ghost {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 6px 12px rgba(59, 33, 64, 0.2));
}
.offer h2 {
  margin: 0 0 4px;
  font: 900 46px/1 Nunito;
  letter-spacing: 1px;
  color: var(--pink);
}
.offer-lead {
  margin: 0 0 10px;
  font: 800 19px Nunito;
  color: var(--plum);
}
.offer-sub {
  margin: 0 0 20px;
  font: 600 14.5px/1.5 Nunito;
  color: #6b5a66;
}
.offer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-form input {
  border: 2px solid #fff;
  background: #fff;
  border-radius: 26px;
  padding: 14px 20px;
  font: 600 15px Nunito;
  text-align: center;
  outline: none;
}
.offer-form input:focus-visible {
  border-color: var(--pink);
}
.offer-x {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: none;
  cursor: pointer;
  font: 400 26px/1 Nunito;
  color: var(--faint);
  padding: 4px 8px;
}
.offer-x:hover {
  color: var(--plum);
}
.offer-no {
  display: block;
  margin: 14px auto 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 700 13px Nunito;
  color: var(--muted);
  text-decoration: underline;
}
.offer-no:hover {
  color: var(--plum);
}
.offer-done p {
  margin: 0 0 6px;
  font: 800 20px Nunito;
  color: var(--pink);
}
.offer-code {
  font: 700 15px Nunito !important;
  color: var(--plum) !important;
}
.offer-code b {
  font-weight: 900;
  letter-spacing: 1px;
}
@media (max-width: 480px) {
  .offer {
    padding: 50px 22px 24px;
  }
  .offer h2 {
    font-size: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-back,
  .offer {
    transition: none;
  }
  .offer {
    transform: none;
  }
}

/* ---------- Next-drop counter ---------- */
/* Sits above the newest arrivals. The shop adds designs on a schedule and
   nothing on the page said so — a date to count down to is the reason to come
   back, and the reason the sign-up below is worth anything. */
.dropbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 14px 20px;
  border: 1px solid var(--pink-line);
  border-radius: 999px;
  background: var(--blush-soft);
}
.dropbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dropbar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pink);
  flex: none;
  animation: dropPulse 2s ease-in-out infinite;
}
@keyframes dropPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}
.dropbar-title {
  font: 800 16px Nunito;
  color: var(--plum);
}
.dropbar-sub {
  font: 600 13px Nunito;
  color: var(--rose);
}
.dropbar-cta {
  font: 800 13px Nunito;
  color: #fff;
  background: var(--pink);
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
}
.dropbar-cta:hover {
  background: #cf417f;
}
@media (prefers-reduced-motion: reduce) {
  .dropbar-dot {
    animation: none;
  }
}
@media (max-width: 520px) {
  .dropbar {
    border-radius: 20px;
  }
}

/* ---------- Load more ---------- */
/* A shop page draws sixty cards and then offers the rest. Each card carries two
   mockup photos, so drawing a thousand at once is four thousand images and a
   page a hundred screens tall — at which point the browser draws nothing. */
.load-more {
  display: block;
  margin: 32px auto 0;
  border: 2px solid var(--pink);
  background: transparent;
  color: var(--pink);
  border-radius: 26px;
  padding: 14px 32px;
  font: 800 14px Nunito;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.load-more:hover {
  background: var(--pink);
  color: #fff;
}

/* A picker and a search box, for a collection with too many franchises to
   show as buttons. */
.filter-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: 800 12px Nunito;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #7a6b74);
}
.filter-bar select,
.filter-bar input {
  border: 2px solid var(--pink-line);
  background: #fff;
  border-radius: 22px;
  padding: 9px 15px;
  font: 700 14px Nunito;
  color: inherit;
  min-width: 230px;
  max-width: 100%;
}
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--pink);
}
.filter-bar .find input {
  min-width: 260px;
}
@media (max-width: 640px) {
  .filter-bar label {
    width: 100%;
  }
  .filter-bar select,
  .filter-bar input {
    width: 100%;
    min-width: 0;
  }
}


/* Shop by character — the category tiles, with a count under the name. Four
   across, two full rows: as flexible tiles they came out six and then a
   stranded four. */
.cats.chars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 24px;
}
.cats.chars a {
  max-width: none;
}
.cats.chars .count {
  font: 700 12px Nunito;
  color: var(--muted);
  margin-top: 1px;
}
@media (max-width: 900px) {
  .cats.chars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .cats.chars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* The four promises, one line inside the banner. */
/* Two by two. On one line they wrapped three-then-one, which reads as a
   mistake rather than a list. */
.hero .promises {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 9px 26px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font: 700 13.5px Nunito;
  color: #6b5a66;
}
.hero .promises li::before {
  content: "✦";
  color: var(--pink);
  margin-right: 7px;
}

/* ---- account ---- */
.account .acct-form { display: grid; gap: 12px; max-width: 420px; margin: 18px auto; text-align: left; }
.account label { display: grid; gap: 5px; font: 700 14px Nunito, sans-serif; }
.account input { font: 600 16px Nunito, sans-serif; padding: 11px 12px; border: 1.5px solid #e6d9e3; border-radius: 10px; width: 100%; box-sizing: border-box; }
.account input:focus { outline: none; border-color: #d9468c; }
.account .row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.account .link { background: none; border: 0; padding: 0; font: 700 14px Nunito, sans-serif; color: #6a4c9c; cursor: pointer; text-decoration: underline; }
.account .msg { font: 600 14px Nunito, sans-serif; color: #6a4c9c; min-height: 18px; }
.account h2 { font: 600 22px Fredoka, sans-serif; margin: 24px 0 8px; }
.account .order, .order-summary .order { border: 1px solid #e6d9e3; border-radius: 12px; padding: 12px 14px; margin: 10px auto; max-width: 520px; text-align: left; font: 600 15px Nunito, sans-serif; }
.account .order ul, .order-summary .order ul { margin: 6px 0 0 18px; padding: 0; }
.account .ship { color: #7d6574; font-size: 14px; margin-top: 6px; }
.order-summary { margin: 14px 0; }