:root {
  --bg: #f8ddd2;            /* il rosa cipria del fondo */
  --bg-deep: #efbfae;       /* il rosa più carico in basso, il tavolo */
  --box: #1f6b66;           /* il cartone verde petrolio della scatola */
  --box-dark: #144a46;      /* i lati in ombra */
  --box-in: #f3e6cc;        /* la carta crema dentro la scatola */
  --gold: #d6a548;          /* l'oro della stampa a caldo e dei bordi */
  --gold-light: #f7dc93;    /* il riflesso dell'oro */
  --ribbon: #e5547a;        /* il nastro di raso */
  --ribbon-light: #ff9ab4;  /* la luce sul raso */
  --ribbon-dark: #a8304f;   /* l'ombra del raso */
  --cup: #3b2018;           /* i pirottini di carta pieghettata */
  --dark: #2a140e;          /* il cioccolato fondente */
  --milk: #7a4229;          /* il cioccolato al latte */
  --white: #f4e5cf;         /* il cioccolato bianco */
  --pink: #e98aa3;          /* il burro di cacao rosa */
  --ink: #3a1a12;           /* le scritte */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
}

.shop {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 70% 105%, var(--bg-deep) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, var(--bg-deep) 100%);
}

/* una grana di carta appena visibile */
.shop::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shop__bar {
  position: absolute;
  z-index: 3;
  top: min(3.2vh, 24px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 clamp(14px, 4vw, 56px);
  font-size: clamp(11px, 1.6vmin, 14px);
  letter-spacing: 0.02em;
}
.shop__brand {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(15px, 2.3vmin, 20px);
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 1;
  font-weight: 600;
}
.shop__where { opacity: 0.65; font-stretch: 90%; }

.shop__copy {
  position: absolute;
  z-index: 3;
  left: clamp(14px, 6vw, 96px);
  top: 50%;
  width: min(40vw, 460px);
  transform: translateY(-50%);
}
.shop__kicker {
  margin: 0 0 0.6em;
  font-size: clamp(11px, 1.5vmin, 14px);
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ribbon-dark);
}
.shop__title {
  margin: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 560;
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 0;
  font-size: clamp(30px, min(6.4vw, 9vh), 92px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.shop__title em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  color: var(--box);
}

.shop__card {
  position: relative;
  display: grid;
  gap: 0.25em;
  margin: clamp(14px, 3vh, 28px) 0 clamp(14px, 3vh, 26px);
  padding: 0.8em 1em 0.85em;
  border-radius: 12px;
  background: rgba(255, 250, 244, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 26px -14px rgba(90, 30, 20, 0.45);
  width: min(100%, 300px);
  overflow: hidden;
}
.shop__card-name {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(17px, 2.6vmin, 24px);
  font-weight: 600;
  font-variation-settings: 'opsz' 36, 'SOFT' 100;
  display: block;
}
.shop__card-note { font-size: clamp(11px, 1.6vmin, 14px); opacity: 0.7; font-stretch: 95%; display: block; }

.shop__button {
  position: relative;
  border: 0;
  border-radius: 999px;
  padding: 0.85em 1.5em;
  background: var(--box);
  color: #fff6e6;
  font: inherit;
  font-size: clamp(13px, 1.8vmin, 16px);
  font-weight: 600;
  font-stretch: 100%;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(20, 74, 70, 0.9);
  transition: font-stretch 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.shop__button span { display: inline-block; }
@media (hover: hover) {
  .shop__button:hover { font-stretch: 125%; transform: scale(1.04); }
}
.shop__button:active { transform: scale(0.96); }
.shop__button:focus-visible, .stage:focus-visible { outline: 3px solid var(--ribbon); outline-offset: 4px; }

/* ---------------------------------------------------------------- the 3D stage */
.stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: var(--persp, 1400px);
  perspective-origin: var(--cx, 70%) 40%;
  cursor: pointer;
  touch-action: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.stage__shadow {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: calc(var(--s) * 1.5);
  height: calc(var(--s) * 0.55);
  margin-left: calc(var(--s) * -0.75);
  margin-top: calc(var(--s) * 0.08);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(80, 25, 15, 0.42), rgba(80, 25, 15, 0.14) 60%, transparent);
  filter: blur(6px);
  pointer-events: none;
}

.tilt {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--s);
  height: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  transform-style: preserve-3d;
}
.spin, .box, .tray-pos, .tray, .tray__grid, .lid-pos, .lid, .wall, .skirt, .pr, .pr__lift, .table-bits, .bow {
  transform-style: preserve-3d;
}
.spin { position: absolute; inset: 0; }
.box { position: absolute; inset: 0; }

/* the floor of the box and its four walls; every wall has an outer and an inner side 2px apart */
.box__floor {
  position: absolute;
  inset: 0;
  background: var(--box-dark);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.wall { position: absolute; }
.wall__out, .wall__in, .skirt__out, .skirt__in { position: absolute; inset: 0; }
.wall--front, .wall--back { left: -2px; width: calc(var(--s) + 4px); height: var(--h); transform-origin: 50% 100%; }
.wall--front { top: calc(var(--s) - var(--h)); transform: rotateX(-90deg); }
.wall--back { top: calc(var(--h) * -1); transform: rotateX(-90deg); }
.wall--left, .wall--right { top: 0; height: var(--s); width: var(--h); }
.wall--left { left: calc(var(--h) * -1); transform-origin: 100% 50%; transform: rotateY(90deg); }
.wall--right { left: var(--s); transform-origin: 0 50%; transform: rotateY(-90deg); }

.wall__out {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%, rgba(0, 0, 0, 0.18)),
    var(--box);
}
.wall--left .wall__out, .wall--right .wall__out { background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05)), var(--box-dark); }
.wall__in { background: linear-gradient(180deg, #e6d4b2, var(--box-in) 70%); }
.wall--front .wall__in { transform: translateZ(-2px); }
.wall--back .wall__out { transform: translateZ(-2px); }
.wall--back .wall__in { background: linear-gradient(0deg, #d9c39b, var(--box-in) 80%); }
.wall--left .wall__out { transform: translateZ(-2px); }
.wall--right .wall__out { transform: translateZ(-2px); }
.wall--left .wall__in, .wall--right .wall__in { background: linear-gradient(90deg, #dcc59c, var(--box-in)); }

/* the gold line printed along the front wall, under the lid */
.wall__label {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-style: italic;
  font-size: calc(var(--h) * 0.32);
  color: var(--gold);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* the cream insert with its nine paper cups */
.tray-pos { position: absolute; inset: 0; transform: translateZ(var(--tz)); }
.tray {
  position: absolute;
  inset: 3px;
  background:
    radial-gradient(90% 90% at 40% 30%, #fbf2de, var(--box-in) 70%, #e2cca2);
  box-shadow: inset 0 0 0 1px rgba(150, 110, 60, 0.25);
}
/* two sheets of tissue paper tucked along the sides, a little crumpled */
.tissue {
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 9%;
  background:
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.0) 0 7px, rgba(255, 255, 255, 0.55) 7px 9px, rgba(200, 160, 120, 0.12) 9px 13px),
    linear-gradient(90deg, rgba(255, 240, 230, 0.95), rgba(255, 228, 220, 0.7));
  opacity: 0.85;
}
.tissue--l { left: -1%; border-radius: 0 40% 40% 0 / 0 6% 6% 0; }
.tissue--r { right: -1%; border-radius: 40% 0 0 40% / 6% 0 0 6%; transform: scaleX(-1); }
.tray__grid { position: absolute; inset: 0; }

.pr {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
}
/* the pleated paper cup: a ring of folds and a darker inside */
.pr__cup {
  position: absolute;
  inset: 4%;
  border-radius: 22%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%),
    repeating-conic-gradient(from 0deg, var(--cup) 0deg 6deg, #5a3326 6deg 9deg, #2b150f 9deg 12deg);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(60, 20, 10, 0.4);
}
.pr__cup::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 30%;
  background: radial-gradient(closest-side, #1d0c07, #2a140d 80%, transparent);
}
.pr__lift { position: absolute; inset: 0; }
.pr__shadow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 3, 1, 0.75), transparent);
}
.pr__slice {
  position: absolute;
  inset: 17%;
  border-radius: 46%;
}
.pr__top {
  position: absolute;
  inset: 17%;
  border-radius: 46%;
  overflow: hidden;
}
.pr__top svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the shine moves the other way when the box tilts */
.pr__gloss {
  position: absolute;
  left: calc(22% + var(--gx, 0) * 1%);
  top: calc(16% + var(--gy, 0) * 1%);
  width: 38%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: rotate(-24deg);
  mix-blend-mode: screen;
}

/* the lid, hinged on the back edge */
.lid-pos { position: absolute; inset: 0; transform: translateZ(calc(var(--h) + 1px)); }
.lid { position: absolute; inset: 0; transform-origin: 50% 0; }
.lid__top, .lid__under {
  position: absolute;
  left: -3px;
  top: -3px;
  width: calc(var(--s) + 6px);
  height: calc(var(--s) + 6px);
}
.lid__top {
  transform: translateZ(1px);
  backface-visibility: hidden;
  background:
    radial-gradient(70% 60% at var(--lx, 35%) var(--ly, 25%), rgba(255, 255, 255, 0.16), transparent 70%),
    var(--box);
  box-shadow: inset 0 0 0 calc(var(--s) * 0.022) var(--box), inset 0 0 0 calc(var(--s) * 0.028) var(--gold);
}
.lid__under {
  transform: translateZ(-1px) rotateX(180deg);
  backface-visibility: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 0 3px, transparent 3px 9px),
    var(--box-in);
  display: grid;
  place-items: center;
}
.lid__under span {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-style: italic;
  font-size: calc(var(--s) * 0.05);
  color: var(--box);
  opacity: 0.75;
}

/* the gold foil stamp: it shines where the light falls */
.foil {
  position: absolute;
  left: 42%;
  top: 40%;
  width: 62%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: calc(var(--s) * 0.012);
  color: var(--gold);
  background: linear-gradient(115deg, var(--gold) 0%, var(--gold) calc(var(--sh, 40%) - 14%), var(--gold-light) var(--sh, 40%), var(--gold) calc(var(--sh, 40%) + 14%), var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.foil__mark { width: 30%; color: var(--gold-light); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3)); }
.foil__name {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 650;
  font-size: calc(var(--s) * 0.105);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
  line-height: 1;
  color: transparent;
  white-space: nowrap;
}
.foil__line {
  font-size: calc(var(--s) * 0.032);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: transparent;
  font-stretch: 115%;
}

/* the satin ribbon crossing the lid and running down the skirts */
.ribbon {
  position: absolute;
  transform: translateZ(1px);
  background:
    linear-gradient(var(--dir), var(--ribbon-dark) 0%, var(--ribbon) 18%, var(--ribbon-light) 46%, var(--ribbon) 70%, var(--ribbon-dark) 100%);
  box-shadow: 0 0 0 0.5px rgba(120, 20, 40, 0.4);
}
.ribbon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(var(--dir2), rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px);
}
.ribbon--h { --dir: 180deg; --dir2: 90deg; left: 0; right: 0; top: 74%; height: calc(var(--s) * 0.07); margin-top: calc(var(--s) * -0.035); }
.ribbon--v { --dir: 90deg; --dir2: 0deg; top: 0; bottom: 0; left: 76%; width: calc(var(--s) * 0.07); margin-left: calc(var(--s) * -0.035); }

.skirt { position: absolute; }
.skirt--front, .skirt--back { left: -3px; width: calc(var(--s) + 6px); height: var(--lh); transform-origin: 50% 0; }
.skirt--front { top: calc(var(--s) + 3px); transform: rotateX(-90deg); }
.skirt--back { top: -3px; transform: rotateX(-90deg); }
.skirt--left, .skirt--right { top: -3px; height: calc(var(--s) + 6px); width: var(--lh); }
.skirt--left { left: -3px; transform-origin: 0 50%; transform: rotateY(90deg); }
.skirt--right { left: calc(var(--s) + 3px - var(--lh)); transform-origin: 100% 50%; transform: rotateY(-90deg); }
.skirt__out {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.2)), var(--box);
  border-bottom: 2px solid var(--gold);
}
.skirt--left .skirt__out, .skirt--right .skirt__out {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.12)), var(--box-dark);
  border-bottom: 0;
}
.skirt--left .skirt__out { border-right: 2px solid var(--gold); }
.skirt--right .skirt__out { border-left: 2px solid var(--gold); }
.skirt__in { background: var(--box-in); }
.skirt--front .skirt__in { transform: translateZ(-1.5px); }
.skirt--back .skirt__out, .skirt--left .skirt__out, .skirt--right .skirt__out { transform: translateZ(-1.5px); }
.ribbon-drop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 76%;
  width: calc(var(--s) * 0.07);
  margin-left: calc(var(--s) * -0.035);
  background: linear-gradient(90deg, var(--ribbon-dark), var(--ribbon) 30%, var(--ribbon-light) 50%, var(--ribbon) 70%, var(--ribbon-dark));
}
.ribbon-drop--side {
  top: 74%;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: calc(var(--s) * 0.07);
  margin: calc(var(--s) * -0.035) 0 0;
  background: linear-gradient(180deg, var(--ribbon-dark), var(--ribbon) 30%, var(--ribbon-light) 50%, var(--ribbon) 70%, var(--ribbon-dark));
}

.bow {
  position: absolute;
  left: 76%;
  top: 74%;
  width: calc(var(--s) * 0.42);
  height: calc(var(--s) * 0.29);
  margin-left: calc(var(--s) * -0.21);
  margin-top: calc(var(--s) * -0.16);
}
.bow__svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 calc(var(--s) * 0.012) calc(var(--s) * 0.01) rgba(60, 10, 25, 0.45)); }

/* on the table: crumbs, cocoa nibs and the little menu card */
.table-bits { position: absolute; inset: 0; }
.crumb, .nib { position: absolute; border-radius: 40%; }
.crumb { width: calc(var(--s) * 0.022); height: calc(var(--s) * 0.016); background: #8fb35a; box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25); }
.crumb--a { left: 108%; top: 72%; transform: rotate(30deg); }
.crumb--b { left: -12%; top: 90%; background: #c9874f; transform: rotate(-20deg); }
.crumb--c { left: 112%; top: 84%; width: calc(var(--s) * 0.014); background: #f2e6d2; }
.nib { width: calc(var(--s) * 0.03); height: calc(var(--s) * 0.02); background: #3a1b10; }
.nib--a { left: -9%; top: 78%; transform: rotate(50deg); }
.nib--b { left: 104%; top: 95%; transform: rotate(-35deg); }
.menu-card {
  position: absolute;
  left: 104%;
  top: 8%;
  width: calc(var(--s) * 0.34);
  height: calc(var(--s) * 0.46);
  padding: calc(var(--s) * 0.03);
  background: linear-gradient(160deg, #fffaf1, #f2e5cf);
  box-shadow: 1px 2px 0 rgba(120, 70, 40, 0.25), 6px 10px 14px -8px rgba(80, 30, 20, 0.5);
  transform: rotate(9deg) translateZ(1px);
  display: grid;
  align-content: start;
  gap: calc(var(--s) * 0.015);
  border-top: calc(var(--s) * 0.012) solid var(--ribbon);
}
.menu-card span { font-family: 'Fraunces Variable', Georgia, serif; font-size: calc(var(--s) * 0.05); font-weight: 600; }
.menu-card i { font-size: calc(var(--s) * 0.03); opacity: 0.6; line-height: 1.25; }

/* the puff of cocoa dust when a praline comes out of its cup */
.dust {
  position: absolute;
  width: calc(var(--s) * 0.012);
  height: calc(var(--s) * 0.012);
  border-radius: 50%;
  background: #6e3a22;
  pointer-events: none;
}

/* ---------------------------------------------------------------- narrow screens: copy on top, box below */
.is-narrow .shop__copy {
  left: 0;
  right: 0;
  top: calc(min(3.2vh, 24px) + 26px);
  width: auto;
  transform: none;
  padding: 0 16px;
  text-align: center;
}
.is-narrow .shop__kicker { display: none; }
.is-narrow .shop__title { font-size: clamp(24px, min(8vw, 6.5vh), 46px); }
.is-narrow .shop__card {
  margin: 8px auto 0;
  padding: 0.45em 0.8em 0.5em;
  width: min(90%, 260px);
}
.is-narrow .shop__button {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--btn-drop, 0px));
  transform: translateX(-50%);
  display: none;
}
.is-narrow .menu-card { display: none; }