/* Cami Pixel Shop.
   Look: a real sticker sheet. Cream paper with dots, thick plum outlines and hard shadows (like the
   outlines in her logo), tilted cards with price stickers, scalloped colour bands, and her own blob
   characters peeking in from the edges.

   Sections: 1 tokens  2 base  3 header  4 buttons  5 layout  6 hero  7 products  8 bands
             9 product page  10 basket  11 text pages  12 footer  13 small screens  */

/* ---------- 1. tokens ---------- */
@font-face { font-family: "Fredoka"; font-weight: 400; font-display: swap; src: url(fonts/fredoka-400.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url(fonts/fredoka-600.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url(fonts/fredoka-700.woff2) format("woff2"); }

:root {
  --ink: #2b2140;
  --soft: #5e5573;
  --cream: #fff3d6;
  --white: #fff;
  --hot: #ff5fae;
  --purple: #7b46cf;
  /* panel colours: the pastels of the characters in her logo (see .c-* below and render.COLOURS) */
  --yellow: #ffe28a; --pink: #ffb3de; --mint: #a7ecc8; --lilac: #d9c6ff; --sky: #a8d4ff; --peach: #ffc7a8;
  --radius: 22px;
  --shadow: 5px 5px 0 var(--ink);
  --rainbow: linear-gradient(90deg, #f08080, #f5b5a0, #f2d56b, #8fe3b4, #6ccfc0, #4a90d9, #9b59d0, #e070c0);
  /* organic outlines so each die-cut sticker has its own shape */
  --cut-1: 32% 28% 34% 30% / 30% 34% 28% 36%;
  --cut-2: 28% 34% 30% 36% / 34% 28% 36% 30%;
  --cut-3: 36% 30% 28% 34% / 28% 36% 34% 30%;
  --cut-4: 30% 36% 32% 28% / 36% 30% 28% 34%;
  --cut-5: 34% 28% 36% 30% / 30% 34% 32% 28%;
  font-family: "Fredoka", ui-rounded, "Nunito", "Segoe UI", system-ui, sans-serif;
}
.c-yellow { --c: var(--yellow); } .c-pink { --c: var(--pink); } .c-mint { --c: var(--mint); }
.c-lilac { --c: var(--lilac); } .c-sky { --c: var(--sky); } .c-peach { --c: var(--peach); }

/* ---------- 2. base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); line-height: 1.6; font-size: 18px;
  background-color: var(--cream);
  background-image: radial-gradient(rgba(43, 33, 64, .13) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
}
img { max-width: 100%; height: auto; display: block; }
/* Links: dark text (easy to read) with a pink underline. Buttons, menus and cards set their own colours. */
a { color: var(--ink); text-decoration-color: var(--hot); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Only links inside written text get the yellow highlight. Image links (stickers, photos, cards) must not:
   the highlight would be a square box behind a rounded picture. */
:is(.text, .desc, .crumbs, .small, .note, .added, .cart-msg, .review) a:hover { background: var(--yellow); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--white); padding: 8px; z-index: 99; }
:focus-visible { outline: 4px solid #4a90d9; outline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.small { font-size: .9rem; color: var(--soft); }

/* Every section heading on every page is a little tilted label sticker. */
.section-title {
  display: inline-block; margin: 0 0 28px; padding: 2px 18px; background: var(--yellow);
  border: 3px solid var(--ink); border-radius: 16px; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink);
}
.band .section-title { background: var(--white); }
.theme:nth-of-type(even) .section-title { background: var(--mint); }
.theme:nth-of-type(3n) .section-title { background: var(--pink); }

/* Her blob characters. Cut-off ones sit flush on the edge they were cut on (see tools/extract_blobs.py). */
.peek, .blob { position: absolute; pointer-events: none; user-select: none; z-index: 1; }
.blob { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(3deg); } }

/* ---------- 3. header ---------- */
/* Desktop: logo on the left, links and Basket on the right. Phones: logo, then Basket and a Menu button;
   the links drop down from the button (see the small-screens section). */
.top {
  position: sticky; top: 0; z-index: 20; background: var(--white);
  display: flex; align-items: center; gap: 10px 22px;
  padding: 10px max(18px, calc((100% - 1120px) / 2 + 18px));
  border-bottom: 4px solid var(--ink); box-shadow: 0 6px 0 var(--hot);
}
.brand { margin-right: auto; }
.brand img { width: 230px; }
.top nav { display: flex; align-items: center; gap: 4px 8px; order: 2; }
.top nav a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: 14px; border: 3px solid transparent; }
.top nav a:hover { background: var(--yellow); border-color: var(--ink); transform: rotate(-2deg); }
.top nav a[aria-current] { background: var(--mint); border-color: var(--ink); }
.actions { display: flex; align-items: center; gap: 10px; order: 3; }
.basket { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--hot); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); text-decoration: none; font-weight: 600; }
.basket:hover { background: #ff3d9c; transform: translate(-1px, -1px) rotate(-2deg); }
.basket[aria-current] { background: var(--mint); }
.cart-count { background: var(--white); color: var(--ink); border: 2px solid var(--ink); min-width: 24px; height: 24px; border-radius: 12px; font-size: .85rem; display: inline-grid; place-items: center; padding: 0 5px; }
.cart-count.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.5) rotate(-12deg); } 100% { transform: none; } }

/* The Menu button only exists on phones. The checkbox is invisible but still reachable with the keyboard. */
.menu-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.menu-button { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; cursor: pointer; border: 3px solid var(--ink); border-radius: 14px; background: var(--white); box-shadow: 3px 3px 0 var(--ink); }
.bars, .bars::before, .bars::after { display: block; width: 22px; height: 3px; background: var(--ink); border-radius: 2px; transition: transform .2s, background .2s; }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -7px; } .bars::after { top: 7px; }
.menu-check:checked ~ .actions .bars { background: transparent; }
.menu-check:checked ~ .actions .bars::before { transform: translateY(7px) rotate(45deg); }
.menu-check:checked ~ .actions .bars::after { transform: translateY(-7px) rotate(-45deg); }
.menu-check:checked ~ .actions .menu-button { background: var(--yellow); }
.menu-check:focus-visible ~ .actions .menu-button { outline: 4px solid #4a90d9; outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 4. buttons ---------- */
.button {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--hot); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; padding: 11px 24px;
  box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s;
}
.button:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 7px 7px 0 var(--ink); }
.button:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.button.ghost { background: var(--white); color: var(--ink); }
.button[disabled] { opacity: .5; cursor: wait; }

/* ---------- 5. layout ---------- */
main { padding-bottom: 20px; }
main > section.wrap, main > .wrap { margin-top: 36px; margin-bottom: 36px; }
.wrap > section { margin: 56px 0; }
.wrap > section.more { margin-top: 64px; }

/* ---------- 6. home hero: a pile of die-cut stickers on a sheet ---------- */
.hero { max-width: 1120px; margin: 0 auto; padding: 36px 18px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 5.8vw, 3.8rem); }
.lead { font-size: 1.15rem; color: var(--soft); max-width: 27em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 20px; }
.proof { margin: 0; color: var(--soft); font-size: .95rem; }

.board { position: relative; aspect-ratio: 1 / .94; border: 4px solid var(--ink); border-radius: 36px; overflow: hidden; background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); }
.board .blob { z-index: 5; }
.die { position: absolute; z-index: 2; display: block; transition: transform .25s; transform: rotate(var(--tilt, 0deg)); }
.die img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--white); border-radius: var(--cut-1); box-shadow: 0 0 0 3px var(--ink), 4px 6px 0 3px var(--ink); }
.die:hover { transform: rotate(0deg) translateY(-8px) scale(1.05); z-index: 4; }
.die-name { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; background: var(--white); border: 3px solid var(--ink); border-radius: 12px; padding: 0 12px; font-size: .85rem; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.die:hover .die-name, .die:focus-visible .die-name { opacity: 1; }
/* Keyboard focus: a ring that follows the sticker's own rounded shape, not a rectangle around it. */
.die:focus-visible { outline: none; }
.die:focus-visible img { outline: 4px solid #4a90d9; outline-offset: 6px; }
.die.s1 { left: 6%; top: 8%; width: 41%; --tilt: -5deg; } .die.s1 img { border-radius: var(--cut-1); }
.die.s2 { left: 55%; top: 6%; width: 36%; --tilt: 6deg; } .die.s2 img { border-radius: var(--cut-2); }
.die.s3 { left: 31%; top: 46%; width: 36%; --tilt: 3deg; z-index: 3; } .die.s3 img { border-radius: var(--cut-3); }
.die.s4 { left: 4%; top: 60%; width: 25%; --tilt: -8deg; } .die.s4 img { border-radius: var(--cut-4); }
.die.s5 { left: 71%; top: 54%; width: 25%; --tilt: -4deg; } .die.s5 img { border-radius: var(--cut-5); }

/* ---------- 7. products ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 22px; }
.card { position: relative; display: block; background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 10px 12px; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.card:nth-child(3n) { transform: rotate(-1.2deg); } .card:nth-child(3n+1) { transform: rotate(1deg); }
.card:hover { transform: rotate(0) translateY(-6px); box-shadow: 8px 10px 0 var(--ink); }
.card img { aspect-ratio: 1; width: 100%; object-fit: cover; border-radius: 14px; border: 2px solid var(--ink); }
.card-title { display: block; font-weight: 600; margin: 10px 4px 0; line-height: 1.25; }
.price-tag { position: absolute; top: -12px; right: -10px; z-index: 2; background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px; padding: 0 10px; font-weight: 700; transform: rotate(6deg); box-shadow: 2px 3px 0 var(--ink); }
.badge { position: absolute; top: 14px; left: 14px; background: var(--hot); color: var(--ink); border: 2px solid var(--ink); font-size: .8rem; font-weight: 600; padding: 1px 10px; border-radius: 10px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.filters a { color: var(--ink); text-decoration: none; font-weight: 600; background: var(--white); border: 3px solid var(--ink); border-radius: 14px; padding: 4px 16px; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s; }
.filters a:hover { transform: translate(-1px, -2px) rotate(-2deg); background: var(--yellow); }
.filters a.on { background: var(--hot); color: var(--ink); }

/* "Favourites": a row of products you scroll sideways (touch-swipe, or the arrows). */
.strip-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.strip-arrows { display: flex; gap: 10px; margin-bottom: 28px; }
.arrow { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); background: var(--white); color: var(--ink); font: 700 1.2rem/1 inherit; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.arrow:hover { background: var(--yellow); }
.arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.strip { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 18px 34px; margin: 0 -18px; scroll-padding-inline: 18px; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .card { flex: 0 0 min(230px, 62vw); scroll-snap-align: start; }

/* ---------- 8. colour bands (themes, how it works) ---------- */
/* Extra room at the bottom is where her bottom-edge characters peek in without covering text. */
.band { background: var(--c); border-block: 4px solid var(--ink); padding: 44px 0 104px; margin: 74px 0 40px; position: relative; }
.band::before { /* scalloped, cloud-like top edge */
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 30px;
  background: radial-gradient(circle at 20px 30px, var(--c) 19px, var(--ink) 19px, var(--ink) 23px, transparent 23.5px) 0 0 / 40px 30px repeat-x;
}
.band > .wrap { position: relative; z-index: 2; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 26px 22px; }
.tile { background: var(--c); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 12px 14px; text-align: center; color: var(--ink); text-decoration: none; font-weight: 700; transition: transform .15s; }
.band .tile { background: var(--white); }
.tile:nth-child(odd) { transform: rotate(-1.5deg); } .tile:nth-child(even) { transform: rotate(1.5deg); }
.tile:hover { transform: rotate(0) translateY(-5px) scale(1.03); }
.tile img { aspect-ratio: 1; object-fit: cover; border-radius: var(--cut-1); border: 3px solid var(--ink); margin-bottom: 8px; background: var(--white); }
.tile:nth-child(3n+2) img { border-radius: var(--cut-3); } .tile:nth-child(3n) img { border-radius: var(--cut-5); }

.steps ol { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.steps li { counter-increment: s; background: var(--white); border: 3px solid var(--ink); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 50%; font-weight: 700; }

/* ---------- 9. product page ---------- */
.crumbs { color: var(--soft); font-size: .95rem; }
.product { margin-bottom: 8px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.gallery > a img { width: 100%; border: 4px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); background: var(--white); }
.thumbs { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.thumbs button { padding: 0; border: 3px solid var(--ink); border-radius: 14px; background: var(--white); cursor: pointer; overflow: hidden; width: 74px; height: 74px; transition: transform .12s; }
.thumbs button.on { background: var(--hot); box-shadow: 3px 3px 0 var(--ink); transform: translateY(-3px); }
.thumbs button:hover { transform: translateY(-3px) rotate(-3deg); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.price { display: inline-block; margin: 4px 0 12px; padding: 0 18px; font-size: 2rem; font-weight: 700; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); }
.desc { margin: 16px 0; }
.note { background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px; padding: 12px 16px; }
.add { display: grid; gap: 14px; background: var(--mint); border: 3px solid var(--ink); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin: 18px 0; }
.add label { display: grid; gap: 6px; font-weight: 600; }
.add textarea, .add input, .contact textarea, .contact input { font: inherit; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; background: var(--white); color: var(--ink); width: 100%; }
.add input[type=number] { width: 6em; }
.add .button { justify-self: start; }
.added { margin: 0; font-weight: 600; }

/* ---------- 10. basket ---------- */
.empty-blob { width: 120px; margin: 0 0 18px; animation: bob 6s ease-in-out infinite; }
.cart-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 8px 16px; align-items: center; background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); padding: 12px; margin-bottom: 16px; box-shadow: 4px 4px 0 var(--ink); }
.cart-row img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; border: 2px solid var(--ink); }
.cart-row h3 { font-size: 1.1rem; margin: 0; } .cart-row h3 a { color: var(--ink); text-decoration: none; }
.cart-row .line { font-weight: 700; font-size: 1.1rem; }
.cart-row .ctl { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cart-row .ctl button, .cart-row .ctl .linkish { font: inherit; font-weight: 600; background: var(--white); border: 3px solid var(--ink); border-radius: 10px; cursor: pointer; padding: 0 12px; min-height: 34px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.cart-row .ctl button:hover, .cart-row .ctl .linkish:hover { background: var(--yellow); }
.cart-row .ctl output { min-width: 2ch; text-align: center; font-weight: 700; }
.cart-row .note-line { grid-column: 2 / 4; margin: 0; font-size: .95rem; color: var(--soft); }
.cart-total { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 1.4rem; font-weight: 700; margin: 24px 0 8px; }
.cart-msg { background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px; padding: 12px 16px; margin: 14px 0; }

/* ---------- 11. text pages ---------- */
.text { position: relative; max-width: 46em; background: var(--white); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 6px 6px 0 var(--ink); padding: 26px 30px; margin-top: 36px; margin-bottom: 36px; }
.text h2 { margin-top: 1.6em; font-size: 1.4rem; }
.text table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.text td, .text th { padding: 8px 16px 8px 0; text-align: left; vertical-align: top; border-bottom: 2px solid rgba(43, 33, 64, .15); }
.text th { font-weight: 700; }
.thanks-blob { width: 150px; margin: 0 auto 18px; animation: bob 6s ease-in-out infinite; }

/* ---------- 12. footer ---------- */
.foot { position: relative; background: var(--ink); color: var(--white); margin-top: 70px; padding: 40px 0 46px; font-size: .95rem; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--rainbow); }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 0 18px; }
.foot .safe { background: var(--yellow); color: var(--ink); border: 3px solid var(--white); border-radius: 16px; padding: 12px 18px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot a { color: var(--yellow); }
.foot .small { color: #cfc8e0; }

/* ---------- 13. small screens ---------- */
@media (max-width: 800px) {
  body { font-size: 17px; }
  .brand img { width: 170px; }
  .top nav a { padding: 5px 9px; }
  .hero { grid-template-columns: 1fr; padding-top: 24px; gap: 30px; }
  .board { aspect-ratio: 1 / 1.02; border-radius: 28px; box-shadow: 6px 6px 0 var(--ink); }
  .product { grid-template-columns: 1fr; gap: 24px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .steps ol { grid-template-columns: 1fr; gap: 18px; }
  .band { padding: 40px 0 84px; }
  .cart-row { grid-template-columns: 64px 1fr; }
  .cart-row img { width: 64px; height: 64px; }
  .cart-row .line { grid-column: 2; }
  .text { padding: 20px 18px; }
  .strip-arrows { display: none; }
  .callout { padding: 26px 22px; }
  .callout .blob { display: none; }
}
/* ---------- 17. phones: menu button, and more room to breathe ---------- */
@media (max-width: 800px) {
  body { line-height: 1.65; }

  /* more space from the screen edges, and between blocks */
  .wrap { padding-inline: 22px; }
  .hero { padding: 30px 22px 0; gap: 36px; }
  .hero h1 { margin-bottom: .5em; }
  .hero-actions { margin: 26px 0 20px; gap: 14px; }
  main > section.wrap, main > .wrap { margin-top: 30px; margin-bottom: 30px; }
  .wrap > section { margin: 56px 0; }
  .band { margin: 70px 0 44px; padding: 46px 0 100px; }
  .band > .wrap { padding-inline: 22px; }
  .section-title { margin-bottom: 26px; }
  .strip { margin-inline: -22px; padding: 16px 22px 34px; scroll-padding-inline: 22px; gap: 22px; }
  .grid { gap: 32px 18px; }
  .tiles { gap: 24px 18px; }
  .crumbs { margin: 0 0 16px; }
  .product { gap: 32px; }
  .thumbs { gap: 12px; }
  .add { padding: 20px 18px; }
  .text { margin: 30px 18px; padding: 28px 22px; }
  .callout { margin-inline: 0; padding: 28px 24px; }
  .cart-row { padding: 14px; margin-bottom: 18px; }
  .cart-total { margin-top: 28px; }
  .foot { margin-top: 64px; padding: 46px 0 56px; }
  .foot-in { padding-inline: 22px; }
  .foot .safe { padding: 16px 18px; }
  .foot .links { gap: 12px 22px; margin: 20px 0; }
}
@media (max-width: 400px) {
  .basket-label { display: none; }  /* just the basket icon and its count on the narrowest phones */
}

/* ---------- 18. tablets and small windows: collapse the menu earlier, keep pictures a sensible size ---------- */
/* The menu collapses below 1040px because six links (with Reviews) plus the Basket no longer fit on one line. */
@media (max-width: 1040px) {
  .top { gap: 8px 12px; padding: 10px 18px; }
  .brand img { width: 170px; }
  .menu-button { display: inline-flex; }
  .basket { padding: 8px 12px; min-height: 48px; }
  .top nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 6px;
    background: var(--white); padding: 14px 18px 20px; border-bottom: 4px solid var(--ink); box-shadow: 0 6px 0 var(--hot);
  }
  .menu-check:checked ~ nav { display: flex; }
  .top nav a { padding: 12px 16px; font-size: 1.1rem; line-height: 1.3; }
  .top nav a:hover { transform: none; }
}
@media (max-width: 800px) {
  .brand img { width: 150px; }
  /* once the hero stacks, the sticker board should not balloon to the full window width */
  .board { width: 100%; max-width: 540px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 14. reviews and call-outs ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 30px 24px; margin-bottom: 28px; }
.review { margin: 0; background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.review:nth-child(odd) { transform: rotate(-.8deg); } .review:nth-child(even) { transform: rotate(.8deg); }
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.avatar { display: grid; place-items: center; width: 48px; height: 48px; flex: none; background: var(--c); border: 3px solid var(--ink); border-radius: var(--cut-2); font-weight: 700; font-size: 1.2rem; }
.review blockquote { margin: 0 0 12px; white-space: pre-line; }
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.stars { letter-spacing: 2px; }
.stars .on { color: var(--yellow); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.stars .off { color: #e5dff0; }
.review-summary { font-size: 1.2rem; margin: 0 0 6px; }
.review-note { max-width: 40em; margin-bottom: 30px; }

.callout { position: relative; overflow: hidden; background: var(--white); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); padding: 34px 36px; }
.callout > :not(.blob) { position: relative; z-index: 2; }
.callout h2 { margin-bottom: .3em; }
.callout p { max-width: 36em; color: var(--soft); }
.callout .blob { z-index: 1; }

/* ---------- 15. social icons, contact form, preview banner ---------- */
.social { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; padding: 0; margin: 22px 0 0; }
.social a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--white); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .12s, background .12s; }
.social a:hover { background: var(--yellow); transform: translate(-1px, -2px) rotate(-6deg); }
.foot .social a { color: var(--ink); border-color: var(--white); box-shadow: none; }

.contact { display: grid; gap: 16px; margin-top: 28px; }
.contact label { display: grid; gap: 6px; font-weight: 600; }
.contact textarea { resize: vertical; }
.contact .button { justify-self: start; }
.contact .trap { position: absolute; left: -9999px; }
.form-status { margin: 0; background: var(--mint); border: 3px solid var(--ink); border-radius: 14px; padding: 10px 16px; }

.demo-banner { margin: 0; background: var(--ink); color: var(--yellow); text-align: center; padding: 8px 14px; font-size: .9rem; }

/* ---------- 16. postage choice in the basket ---------- */
.region { background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 4px 4px 0 var(--ink); padding: 16px 18px; margin: 20px 0 6px; display: grid; gap: 8px; }
.region label { font-weight: 700; }
.region select { font: inherit; font-weight: 600; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 12px; background: var(--white); color: var(--ink); max-width: 22em; }
.region .small { margin: 0; }
.postage { margin: 0; padding-left: 1.2em; }
.cart-total small { font-size: .9rem; font-weight: 400; color: var(--soft); }

/* Collapsible blocks in text pages (for example the optional cancellation form). */
.text details { border: 3px solid var(--ink); border-radius: 14px; padding: 10px 18px; background: #fffbea; margin: 16px 0; }
.text summary { font-weight: 700; cursor: pointer; }
.text details[open] summary { margin-bottom: 8px; }