/* Reset, type, and the small shared parts in the sticker style: buttons, chips, stepper, sticker, depth host,
   doodles and the print grain. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 72px); overflow-x: clip; }
body { overflow-x: clip; } /* motion (the hero flying out) never makes the page scroll sideways */
body {
  margin: 0;
  background: var(--paper-grain), var(--base);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html[lang="ckb"] body { font-family: var(--font-ku); line-height: 1.75; }
img { max-width: 100%; display: block; }
/* Phones: no grey/blue flash on tap, and holding a photo doesn't select it or open the save-image menu. */
html { -webkit-tap-highlight-color: transparent; }
img, canvas, .depth, .car-media, .card-media, .sheet-media {
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -.005em;
  text-wrap: balance;
  overflow-wrap: anywhere; /* a word too wide for a phone breaks instead of widening the page */
}
html[lang="ckb"] .display { font-family: var(--font-ku); text-transform: none; line-height: 1.2; letter-spacing: 0; }
.ku-line { font-family: var(--font-ku); font-weight: 900; color: var(--red); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 10px; }
.skip {
  position: fixed; inset-inline-start: 12px; top: -80px; z-index: 300;
  background: var(--ink); color: var(--base); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Buttons are stickers: coloured vinyl in a white die-cut margin, lifted off the paper. A tilt (--r) can be set
   per button; under the mouse a sticker straightens and lifts, and it squashes when pressed. */
.btn {
  --r: 0deg;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 54px; padding: .8em 1.6em;
  border: 4px solid var(--white); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-weight: 800; font-size: 1.08rem; line-height: 1.1; text-decoration: none; white-space: nowrap;
  cursor: pointer; box-shadow: var(--lift); rotate: var(--r);
  transition: rotate .25s var(--ease-out), translate .25s var(--ease-out), box-shadow .25s var(--ease-out), scale .12s var(--ease-out), background-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { rotate: 0deg; translate: 0 -3px; box-shadow: var(--lift-hi); }
}
.btn:active { scale: .95; translate: none; }
/* The main action button. (Yellow once; the class name stayed so the pages didn't need changing.) */
.btn--yellow { background: var(--speckle), var(--cta); background-size: 128px, auto; color: #fff; }
.btn--ink { background: var(--ink); color: var(--base); }
.btn--wa { background: var(--wa); color: var(--wa-ink); } /* WhatsApp's own green stays clean */
.btn--small { min-height: 44px; padding: .45em 1em; font-size: .92rem; border-width: 3px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; rotate: var(--r); translate: none; scale: none; box-shadow: var(--lift); }

.circle-btn {
  --r: 0deg;
  position: relative;
  width: 58px; height: 58px; border-radius: 50%;
  border: 4px solid var(--white); background: var(--base); color: var(--ink);
  display: inline-grid; place-items: center;
  font-weight: 800; font-size: .95rem; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  box-shadow: var(--lift); rotate: var(--r);
  transition: rotate .25s var(--ease-out), translate .25s var(--ease-out), box-shadow .25s var(--ease-out), scale .12s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .circle-btn:hover { rotate: 0deg; translate: 0 -2px; box-shadow: var(--lift-hi); }
}
.circle-btn:active { scale: .93; }
.circle-btn--pill { width: auto; padding-inline: 20px; border-radius: 999px; background: var(--ink); color: var(--base); }
.badge {
  position: absolute; top: -9px; inset-inline-end: -9px;
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px;
  border: 3px solid var(--white); box-shadow: 0 3px 6px -2px rgba(43, 22, 16, .4);
  background: var(--red); color: #fff; font-size: .75rem; font-weight: 800;
  display: grid; place-items: center; font-variant-numeric: tabular-nums; rotate: 10deg;
}
.badge[hidden] { display: none; }

.chip {
  --r: 0deg;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .4em 1.1em; border-radius: 999px;
  border: 3px solid var(--white); background: var(--base); color: var(--ink);
  font-weight: 800; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: var(--lift); rotate: var(--r);
  transition: rotate .25s var(--ease-out), translate .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { rotate: 0deg; translate: 0 -2px; box-shadow: var(--lift-hi); }
}
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--ink); color: var(--base); }

.stepper {
  display: inline-flex; align-items: center;
  border: 3px solid var(--white); border-radius: 999px; background: var(--white); font-weight: 800;
  box-shadow: var(--lift);
}
.stepper button {
  width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  font-size: 1.25rem; line-height: 1; border-radius: 50%;
}
.stepper output { min-width: 1.8em; text-align: center; font-variant-numeric: tabular-nums; }

.sticker {
  --tilt: -8deg;
  display: inline-grid; gap: .15em;
  background: var(--speckle), var(--yellow); background-size: 128px, auto;
  border-radius: 14px; padding: .6em 1em;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--cut), 0 14px 22px -12px rgba(43, 22, 16, .5);
  transform: rotate(var(--tilt));
}
html[dir="rtl"] .sticker { --tilt: 8deg; }

/* Depth host: holds the plain photo; the WebGL canvas covers it once it's ready. Both carry the white
   die-cut edge: the photo through the #cut filter, the canvas draws its own (it moves with the 3D). */
.depth { position: relative; }
.depth > img { width: 100%; height: 100%; object-fit: contain; filter: url(#cut) var(--item-shadow); }
.depth > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: var(--item-shadow); }
.depth.is-live > img { opacity: 0; }

/* Hand-drawn doodles, hand-written notes, rubber stamps */
.doodle { position: absolute; pointer-events: none; color: var(--ink); overflow: visible; }
.doodle--spark { width: 24px; height: 24px; }
.doodle--heart { width: 22px; height: 22px; color: var(--red); }
.doodle--berry { width: 44px; height: 48px; color: var(--red); }
.doodle--squiggle { position: relative; display: block; width: min(300px, 60%); height: 22px; margin: 4px auto 0; color: var(--red); }
.hand { font-family: var(--font-hand); font-weight: 400; line-height: 1.05; }
html[lang="ckb"] .hand { font-family: var(--font-ku); font-weight: 700; }
.stamp-label {
  display: inline-block; padding: 4px 12px; border: 3px solid var(--red); border-radius: 8px;
  background: rgba(255, 255, 255, .7); color: var(--red);
  font: 900 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  rotate: -9deg; filter: url(#rough);
}
html[lang="ckb"] .stamp-label { font: 900 16px/1.3 var(--font-ku); }
/* Live doodles (doodles.js): a layer where doodles pop in, move and move on. It sits in front of the section's
   content (a strawberry crossing a big title shows on top) but never takes a click, so anything under a doodle
   still works. */
.doodle-field { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* Parallax drift (sections.js scrubs --drift as the element scrolls past); `translate` stacks on any tilt. */
.drift { translate: 0 var(--drift, 0px); }
/* the content after the layer gets its own layer below it; :where() keeps this weaker than any rule that places an element */
:where(.doodle-field ~ *) { position: relative; z-index: 1; }
.doodle-live { position: absolute; transform: translate(-50%, -50%); will-change: transform, opacity; animation: none !important; }
/* Sparkles twinkle now and then, each on its own beat. */
@media (prefers-reduced-motion: no-preference) {
  .doodle--spark { animation: twinkle 3.6s ease-in-out infinite; animation-delay: var(--tw, 0s); }
  @keyframes twinkle { 0%, 70%, 100% { scale: 1; opacity: 1; } 80% { scale: .55; opacity: .5; } 90% { scale: 1.15; } }
}

/* The cut-out that flies into the basket */
.fly-sticker { position: fixed; z-index: 130; pointer-events: none; object-fit: contain; filter: url(#cut) drop-shadow(0 10px 10px rgba(43, 22, 16, .3)); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* The Latin wordmark keeps the display face in Kurdish too. */
html[lang="ckb"] .brand-word { font-family: var(--font-display); text-transform: uppercase; line-height: .9; direction: ltr; }