/* Bestsellers (Figma node 1:541). */

.dn-bestsellers { overflow-x: clip; }
.dn-bestsellers__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 50px; align-items: flex-start; }
.dn-bestsellers__head { margin-bottom: 30px; }  /* 50 + 30 = 80 between heading and grid */
.dn-bestsellers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 918px; max-width: 100%; }

/* Slider: 5 pages of 6 dishes. The track slides by whole pages (js/bestsellers-slider.js adds .is-slider; without js the pages are simply stacked). */
.dn-bestsellers__slider { width: 918px; max-width: 100%; }
.dn-bestsellers__viewport:focus-visible { outline: 2px solid var(--typography-tertiary); outline-offset: 8px; }
.dn-bestsellers__track { display: flex; flex-direction: column; gap: var(--row-space-pages, 50px); }
.dn-bestsellers__page { min-width: 0; }
.dn-bestsellers__page .dn-bestsellers__grid { width: 100%; }
.dn-bestsellers__slider.is-slider .dn-bestsellers__viewport { overflow: hidden; touch-action: pan-y; }
.dn-bestsellers__slider.is-slider .dn-bestsellers__track { flex-direction: row; gap: 0; transition: transform 0.75s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
.dn-bestsellers__slider.is-slider .dn-bestsellers__page { flex: 0 0 100%; }
@media (prefers-reduced-motion: reduce) { .dn-bestsellers__slider.is-slider .dn-bestsellers__track { transition: none; } }

/* Arrows: round, dark outline on the light page (the hero ones are white on the photo) */
.dn-bestsellers__nav { display: flex; gap: 12px; }
.dn-bestsellers__nav[hidden] { display: none; }
.dn-bestsellers__arrow {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--typography-primary); border-radius: 50%;
  background: transparent; color: var(--typography-primary); cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), opacity var(--transition);
}
.dn-bestsellers__arrow .dn-icon { width: 14px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dn-bestsellers__arrow--prev .dn-icon { transform: rotate(90deg); }
.dn-bestsellers__arrow--next .dn-icon { transform: rotate(-90deg); }
.dn-bestsellers__arrow:hover:not([aria-disabled="true"]) { background: var(--button-hover); border-color: var(--button-hover); }
.dn-bestsellers__arrow:focus-visible { outline: 2px solid var(--typography-tertiary); outline-offset: 3px; }
.dn-bestsellers__arrow[aria-disabled="true"] { opacity: 0.3; cursor: default; }

.dn-bestsellers__grid {
  display: grid;
  grid-template-columns: repeat(3, 260px);
  column-gap: 69px;
  row-gap: 0;                       /* the space between lines of dishes is --row-space on the price (see subgrid below) */
  --row-space: 50px;
  width: 918px;
  max-width: 100%;
  margin-bottom: calc(-1 * var(--row-space));   /* the last line has no line below it */
}

/* Each dish takes the same 4 rows of the grid (name / photo / text / price) as a subgrid, so the rows of neighbouring dishes line up:
   photos start at the same height whatever the length of the names (RU and GR names are longer than the English ones),
   and a short name sits on the bottom of its row, next to the photo. */
.dn-menu-item { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }
.dn-menu-item__name { align-self: end; }
.dn-menu-item__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-item);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: 0;
}
.dn-menu-item__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin: 4px 0; }   /* square cut-out dish (transparent PNG-style webp) under the name */
.dn-menu-item__text { font-size: 16px; font-style: italic; line-height: 21px; }
.dn-menu-item__price { margin-bottom: var(--row-space); font-size: 18px; font-style: italic; font-weight: 700; line-height: 1.2; }

/* Decorative plate bleeding off the left edge (Figma node 1:401). Cut-out version of plate.png (white background made transparent): assets/img/plate-alpha.png. */
.dn-bestsellers__plate {
  position: absolute;
  z-index: 0;
  left: -5px;
  top: -112px;
  width: auto;
  height: 794px;
  max-width: none;
  pointer-events: none;
}