/* ═══════════════════════════════════════════════════════════════════
   Meniul.

   Elementul care ține pagina: fiecare produs își arată volumul ca pe o
   riglă. Toate lichidele se măsoară față de 400 ml, toată mâncarea față
   de 350 g, deci riglele se aliniază pe verticală și un espresso de 20
   ml se citește instantaneu față de un cold brew de 400. Restul paginii
   stă liniștită ca să se vadă asta.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --top-h: 54px;
  --chips-h: 47px;
}

html { scroll-behavior: smooth; }

/* ────────────────────────────────────────────────────── bara de sus */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding-inline: clamp(16px, 5vw, 40px);
  background: rgb(36 28 24 / .88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hair);
}

.top__back {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  transition: color .2s var(--ease);
}
.top__back:hover { color: var(--tan); }

.top__back > svg:first-child {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.top__mark { width: 21px; height: 21px; }

.top__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink-1);
}

/* ─────────────────────────────────────────────── categoriile lipite */

.chips {
  position: sticky;
  top: var(--top-h);
  z-index: 19;
  height: var(--chips-h);
  background: rgb(36 28 24 / .88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--hair);
}

.chips ul {
  display: flex;
  gap: 7px;
  height: 100%;
  align-items: center;
  padding-inline: clamp(16px, 5vw, 40px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* marchează că mai sunt categorii dincolo de margine */
  mask-image: linear-gradient(to right, #000 0 calc(100% - 30px), transparent 100%);
}
.chips ul::-webkit-scrollbar { display: none; }

.chips a {
  display: block;
  flex: none;
  padding: 6px 13px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.chips a:hover { color: var(--ink-1); border-color: rgb(242 238 233 / .3); }

.chips a[aria-current="true"] {
  color: var(--dark);
  background: var(--tan);
  border-color: var(--tan);
}

/* ──────────────────────────────────────────────────────── coala ─── */

.sheet {
  max-width: 640px;   /* o coloană: rândul nu se întinde până devine ilizibil */
  margin-inline: auto;
  padding: clamp(34px, 7vw, 68px) clamp(18px, 5vw, 40px) clamp(60px, 12vw, 110px);
}

.world + .world { margin-top: clamp(52px, 10vw, 96px); }

/* Cu trei culori nu mai pot separa capitolele prin nuanță, așa că le
   separ prin plin: singura suprafață mare de nisipiu din pagină. */
.world__head {
  padding: clamp(18px, 4vw, 26px) clamp(18px, 4.5vw, 30px) clamp(20px, 4.5vw, 28px);
  margin-bottom: clamp(22px, 4vw, 34px);
  border-radius: clamp(14px, 3vw, 20px);
  background: var(--tan);
  color: var(--dark);
}

.world__name {
  font-size: clamp(30px, 8.5vw, 48px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
}

.world__blurb {
  margin-top: 9px;
  max-width: 34rem;
  font-size: clamp(14px, 3.7vw, 15.5px);
  font-weight: 500;
  line-height: 1.45;
  color: rgb(52 41 35 / .88);
  text-wrap: balance;
}

.world__list {
  margin-top: clamp(9px, 2vw, 13px);
  max-width: 34rem;
  display: grid;
  gap: clamp(4px, .9vw, 7px);
  font-size: clamp(13.5px, 3.6vw, 15px);
  line-height: 1.4;
  color: rgb(52 41 35 / .74);
}

/* Un punct discret, nu emoji: fără niciun semn, cele trei rânduri s-ar
   citi ca o frază ruptă în bucăți, nu ca o listă. */
.world__list li {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  align-items: baseline;
}

.world__list li::before {
  content: "·";
  font-weight: 700;
  color: rgb(52 41 35 / .5);
}

/* ───────────────────────────────────────────────────────── secțiuni */

.sec { scroll-margin-top: calc(var(--top-h) + var(--chips-h) + 14px); }
.sec + .sec { margin-top: clamp(34px, 6vw, 52px); }

.sec__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 14px;
}

.sec__title {
  font-size: clamp(19px, 5vw, 23px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--tan);
}

.sec__sub, .sec__note {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sec__flat {
  margin-left: auto;
  padding: 3px 11px;
  border: 1px solid var(--tan-dim);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tan);
  white-space: nowrap;
}
.sec__flat b { font-weight: 700; }

.sec__foot {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
}

/* ───────────────────────────────────────────────────────── produse */

.item {
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--hair);
}
.items > .item:last-child { border-bottom: 0; }

.item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
}

.item__name {
  font-size: clamp(15px, 4vw, 16.5px);
  font-weight: 500;
  letter-spacing: -.008em;
  color: var(--ink-1);
}

.star { color: var(--tan); margin-left: 3px; }

.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px 2px;
  border: 1px solid var(--tan-dim);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tan);
  vertical-align: 2px;
}

.price {
  flex: none;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}
.price__sep { color: var(--ink-3); padding-inline: 2px; }

.item__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 14px;
  margin-top: 6px;
}

/* rigla — semnătura paginii */
.spec {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 6.1rem;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.gauge {
  flex: none;
  position: relative;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--hair);
  overflow: hidden;
}
.gauge::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  background: var(--tan);
  opacity: .85;
}

.desc {
  flex: 1 1 15rem;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-2);
}

.close {
  margin-top: clamp(44px, 8vw, 72px);
  padding-top: clamp(18px, 3vw, 24px);
  border-top: 1px solid var(--hair);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ───────────────────────────────────── semnătura, la capătul listei */

.credit { margin-top: clamp(40px, 7vw, 64px); }

/* ───────────────────────────────────────────── două coloane, larg */

@media (min-width: 940px) {
  .sheet { max-width: 1180px; }
  .world { columns: 2; column-gap: 4.75rem; }
  .world__head { column-span: all; }
  .sec { break-inside: avoid; }
  .sec + .sec { margin-top: 0; }
  .sec { margin-bottom: 44px; }
}

/* ─────────────────────────── riglele se umplu la prima vedere ──── */

@media (prefers-reduced-motion: no-preference) {
  .gauge::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--ease);
  }
  .sec[data-seen] .gauge::after { transform: scaleX(1); }

  /* mică decalare pe verticală, ca umplerea să curgă de sus în jos */
  .sec[data-seen] .item:nth-child(n + 2)  .gauge::after { transition-delay: .03s; }
  .sec[data-seen] .item:nth-child(n + 5)  .gauge::after { transition-delay: .07s; }
  .sec[data-seen] .item:nth-child(n + 9)  .gauge::after { transition-delay: .11s; }
  .sec[data-seen] .item:nth-child(n + 13) .gauge::after { transition-delay: .15s; }
  .sec[data-seen] .item:nth-child(n + 17) .gauge::after { transition-delay: .19s; }
}