/* ==========================================================================
   LOOT cookies — Сладкоежка
   Same candy-counter poster logic as the flavour deck, at menu density: every
   item is a flat colour field of its own flavour with the dessert floating on
   it. No cards, no borders, no shadows under panels.
   ========================================================================== */

.sweets {
  min-height: 100svh;
  background: var(--cream, #f6e7c1);
  color: #33251c;
  padding: calc(var(--bar) + 3rem) var(--edge) 5rem;
}

.sweets__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

.sweets__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: lowercase;
}

.sweets__note {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.85rem, 1.6vw, 1.35rem);
  text-transform: lowercase;
  opacity: .55;
  margin-bottom: .4rem;
}

.sweets__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(.6rem, 1.2vw, 1.1rem);
}

/* Each tile carries its own field, drawn from the dessert on it. */
.sweet {
  --field: #f0dcc0;
  --tile-ink: #33251c;

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  padding: 1.15rem 1.25rem 1.35rem;
  border-radius: 1.5rem;
  background: var(--field);
  color: var(--tile-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.sweet:hover { transform: translateY(-6px); }

.sweet--wide { grid-column: span 2; }

@media (max-width: 620px) {
  .sweet--wide { grid-column: span 1; }
}

.sweet__art {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  margin-bottom: .9rem;
}

.sweet__art img {
  width: 86%;
  height: auto;
  max-height: 12.5rem;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.sweet:hover .sweet__art img { transform: scale(1.06) rotate(-2deg); }

/* Same contact shadow language as the flavour deck. */
.sweet__art::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 52%;
  aspect-ratio: 5 / 1;
  translate: -50% 0;
  border-radius: 50%;
  background: rgb(51 37 28 / .16);
  filter: blur(11px);
}

.sweet__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .5rem;
}

.sweet__meta {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: auto;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sweet__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-transform: none;
}

.sweet__weight { opacity: .6; }

.sweet__tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .3rem .65rem .25rem;
  border-radius: 100px;
  background: var(--tile-ink);
  color: var(--field);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .sweet,
  .sweet__art img { transition: none; }
}

/* -------------------------------------------------------------- mobile --- */

@media (max-width: 620px) {
  /* Two across, not one. Sixteen full-width tiles is a 5800px scroll on a
     phone; paired tiles halve it and read like a menu you can scan. */
  .sweets { padding-top: calc(var(--bar) + 1.5rem); }

  .sweets__grid {
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }

  .sweet {
    min-height: 0;
    padding: .8rem .85rem 1rem;
    border-radius: 1.1rem;
  }

  .sweet__art { margin-bottom: .65rem; }
  .sweet__art img { width: 92%; max-height: 7.5rem; }

  .sweet__name { font-size: .8rem; line-height: 1.15; }
  .sweet__price { font-size: .95rem; }
  .sweet__meta { font-size: .62rem; gap: .4rem; flex-wrap: wrap; }
  .sweet__tag { top: .55rem; right: .55rem; font-size: .5rem; padding: .25rem .45rem .2rem; }

  /* The two sets still earn the full width. */
  .sweet--wide { grid-column: span 2; }
  .sweet--wide .sweet__art img { max-height: 10rem; }
}