/*
 * Pita Gyros & Churros
 * Layout, scale, spacing and motion ported from the reference theme (thekebabshop.com).
 * Colour and type swapped to the Pita identity. See docs/CARTAS.md for the mapping.
 */

:root {
  --navy: #001e5a;        /* logo navy — replaces reference red #eb292b */
  --ink: #00113a;         /* button background — replaces #080d08 */
  --gold: #f2b84b;        /* accent on dark — logo gold #b4771b, lightened for contrast */
  --gold-deep: #b4771b;   /* logo gold */
  --sky: #cfe0fa;         /* tile + hover highlight — from menu blue #266edc */
  --aegean: #266edc;      /* menu blue */
  --cream: #f7f1e3;       /* replaces #fcf5de */
  --white: #ffffff;
  --text: #00113a;
  --font-display: "Rubik", "Arial Black", system-ui, sans-serif;
  --font-sub: "Outfit", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;
  --gold-text: #8a5a12;   /* logo gold darkened for text on light backgrounds (WCAG AA) */
  --hdr: 67px;            /* header height; main.js keeps it exact, these defaults avoid layout shift */
  --ease-slide: cubic-bezier(0.645, 0.045, 0.355, 1); /* GSAP power3.inOut */
}
@media (min-width: 600px) { :root { --hdr: 67px; } }
@media (min-width: 1024px) { :root { --hdr: 100px; } }

/* ------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100000; background: var(--ink); color: var(--gold);
  padding: 10px 16px; border-radius: 9px; font-family: var(--font-sub); font-weight: 600;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--aegean); outline-offset: 3px; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 100%;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}
main { padding-top: var(--hdr); }
section[id], .anchor-top, .mf-card[id] { scroll-margin-top: calc(var(--hdr) + 16px); }
.anchor-top { position: absolute; top: 0; }

/* ------------------------------------------------------- typography */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  overflow-wrap: anywhere;
  hyphens: manual;
}
.h1 { font-size: min(64px, 15vw); }
@media (min-width: 600px) { .h1 { font-size: 80px; } }
@media (min-width: 768px) { .h1 { font-size: 96px; } }
@media (min-width: 1024px) { .h1 { font-size: 128px; } }
@media (min-width: 1441px) { .h1 { font-size: 192px; } }

.h2 { font-size: min(56px, 13vw); }
@media (min-width: 600px) { .h2 { font-size: 64px; } }
@media (min-width: 768px) { .h2 { font-size: 80px; } }
@media (min-width: 1024px) { .h2 { font-size: 96px; } }
@media (min-width: 1441px) { .h2 { font-size: 144px; } }

.h4 { font-size: min(36px, 9.5vw); }
@media (min-width: 768px) { .h4 { font-size: 48px; } }
@media (min-width: 1024px) { .h4 { font-size: 64px; } }
@media (min-width: 1441px) { .h4 { font-size: 80px; } }

.h6 {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
}
@media (min-width: 768px) { .h6 { font-size: 28px; } }
@media (min-width: 1024px) { .h6 { font-size: 32px; } }
@media (min-width: 1441px) { .h6 { font-size: 40px; } }

p { font-size: 20px; line-height: 1.35; }
@media (min-width: 768px) { p { font-size: 24px; } }
@media (min-width: 1441px) { p { font-size: 26px; } }

a { transition: ease-in-out all 0.25s; }
a:hover { transition: ease-in-out all 0.5s; }

/* ---------------------------------------------------------- buttons */
.button {
  border: none;
  border-radius: 16px;
  display: inline-block;
  font-family: var(--font-sub);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0.35em 0.7em;
  text-align: center;
  text-decoration: none;
  background: var(--ink);
  color: var(--gold);
}
@media (min-width: 1441px) { .button { font-size: 32px; } }
.button:hover, .button:focus-visible { background: var(--gold); color: var(--ink); }

/* ----------------------------------------------------------- layout */
.wrapper { padding: 0 5%; }
.container { max-width: 1920px; margin: auto; }

/* ----------------------------------------------------------- header */
.main-header {
  background: var(--navy);
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
}
.main-header .title-bar .container {
  border-bottom: 3px solid var(--cream);
  flex-wrap: wrap;
  text-align: center;
  transition: border-color ease 0.5s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 1024px) { .main-header .title-bar .container { height: 100px; } }
.main-header .title-bar .container.scroll { border-color: var(--navy); }
.main-header .title-bar .wrap {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.main-header .logo { display: inline-block; margin: 6px 0; }
.main-header .logo img { width: 52px; height: 52px; }
@media (min-width: 1024px) { .main-header .logo img { width: 84px; height: 84px; } }
.main-header .group { display: flex; align-items: center; gap: 0; }
.main-header .button { margin-right: 1.5rem; }
.main-header .mobile { border-radius: 9px; font-size: 18px; margin: 0 auto 13px; }
.main-header .desktop { display: none; }
@media (min-width: 600px) {
  .main-header .mobile { display: none; }
  .main-header .desktop { display: inline-block; }
}

/* language switch */
.lang-switch {
  display: inline-flex;
  border: 2px solid var(--cream);
  border-radius: 9px;
  overflow: hidden;
  margin-right: 1rem;
}
@media (min-width: 1024px) { .lang-switch { margin-right: 1.5rem; } }
.lang-btn {
  background: transparent;
  border: 0;
  color: var(--cream);
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 8px 9px;
  min-width: 40px;
  min-height: 34px;
  transition: background 0.25s, color 0.25s;
}
@media (min-width: 1024px) { .lang-btn { font-size: 18px; padding: 10px 12px; min-height: 42px; } }
.lang-btn[aria-pressed="true"] { background: var(--cream); color: var(--navy); }
.lang-btn:not([aria-pressed="true"]):hover { background: rgba(247, 241, 227, 0.2); }

/* nav panel */
.main-nav {
  background: var(--cream);
  max-height: calc(100vh - var(--hdr));
  max-height: calc(100dvh - var(--hdr));
  overflow: auto;
  text-align: left;
}
.main-nav .wrapper { padding-top: 3rem; padding-bottom: 3rem; }
.main-nav .main-menu {
  font-family: var(--font-display);
  font-weight: 900;
  margin-bottom: 2rem;
}
.main-nav .main-menu li + li { margin-top: 0.08em; }
.main-nav .main-menu a {
  color: var(--navy);
  font-size: 40px;
  line-height: 1;
  transition: all 0.25s linear;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  display: inline-block;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .main-nav .main-menu a { font-size: 72px; } }
@media (min-width: 1441px) { .main-nav .main-menu a { font-size: 88px; } }
.main-nav .main-menu a::after {
  content: "";
  background: var(--cream);
  border-radius: 8px;
  height: 80%;
  width: 0%;
  position: absolute;
  top: 10%;
  left: -5%;
  transform: rotate(-2.5deg);
  transition: all 0.25s ease;
  z-index: -1;
}
@media (min-width: 768px) { .main-nav .main-menu a::after { border-radius: 12px; } }
@media (min-width: 1441px) { .main-nav .main-menu a::after { border-radius: 16px; } }
.main-nav .main-menu a:hover::after,
.main-nav .main-menu a:focus-visible::after { background: var(--sky); width: 110%; }
.main-nav .social { display: flex; }
.main-nav .social a {
  background: var(--navy);
  border-radius: 50%;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5em;
  width: 48px;
  height: 48px;
}
.main-nav .social svg { width: 50%; height: 50%; }
@media (min-width: 768px) { .main-nav .social a { width: 64px; height: 64px; } }
@media (min-width: 1441px) { .main-nav .social a { width: 80px; height: 80px; } }
.main-nav .social a:hover { background: var(--sky); color: var(--ink); }

/* hamburger (ported 1:1) */
.hamburger {
  padding: 12px 0;
  display: inline-block;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}
.hamburger:hover { opacity: 0.75; }
.hamburger-box { width: 40px; height: 24px; display: inline-block; position: relative; }
.hamburger-inner { display: block; top: 50%; margin-top: -1.5px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 40px; height: 3px; background-color: var(--cream); border-radius: 3px;
  position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; }
.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }
.hamburger--emphatic { overflow: hidden; }
.hamburger--emphatic .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; }
.hamburger--emphatic .hamburger-inner::before {
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in;
}
.hamburger--emphatic .hamburger-inner::after {
  top: 10px; right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in;
}
.hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; }
.hamburger--emphatic.is-active .hamburger-inner::before {
  left: -80px; top: -80px; transform: translate3d(80px, 80px, 0) rotate(45deg);
  transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.hamburger--emphatic.is-active .hamburger-inner::after {
  right: -80px; top: -80px; transform: translate3d(-80px, 80px, 0) rotate(-45deg);
  transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* ------------------------------------------------------------- hero */
.home main { text-align: center; }
.rev-slider { background: var(--navy); width: 100%; }
.hero-slider {
  position: relative;
  overflow: hidden;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 480 / 540;
  touch-action: pan-y;
  user-select: none;
}
@media (min-width: 600px) { .hero-slider { aspect-ratio: 16 / 9; } }
.hs-track {
  display: flex;
  height: 100%;
  transition: transform 800ms var(--ease-slide);
  will-change: transform;
}
.no-autoplay .hs-track { transition: none; }
.hs-slide { position: relative; flex: 0 0 100%; height: 100%; }
.hs-link { position: absolute; inset: 0; display: block; color: var(--cream); -webkit-user-drag: none; }
.hs-media, .hs-media picture { position: absolute; inset: 0; display: block; }
.hs-media video, .hs-media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hs-shade {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 17, 58, 0.28) 0%, rgba(0, 17, 58, 0) 35%);
}

/* ------------------------------------------------------- film layers
 * Every layer with data-t="start-end" is driven by main.js from the film's currentTime
 * (or, on image slides, from the time since the slide became active).
 *   no class   -> before start (hidden, entrance pose)
 *   .is-on     -> between start and end (visible)
 *   .is-off    -> after end (exit pose)
 * Entrances: data-in = pop | rise | fade | wipe | none. Exits: data-out = shrink | drop | grow | fade | none.
 * Motion uses the independent `scale` / `translate` properties so each layer keeps its own
 * `transform` / `rotate` for layout. Sizes use container units (cqw) so the banner scales as one piece.
 */
.hero-slider { container-type: size; }
.film-layers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.film-layers [data-t] {
  opacity: 0;
  transition: opacity 0.22s ease, scale 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), translate 0.4s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.film-layers [data-in="pop"] { scale: 0.2; }
.film-layers [data-in="rise"] { translate: 0 60%; }
.film-layers [data-in="wipe"] { opacity: 1; clip-path: inset(0 100% 0 0); }
.film-layers [data-in="none"] { opacity: 1; transition: none; }
.film-layers [data-t].is-on { opacity: 1; scale: 1; translate: 0 0; }
.film-layers [data-in="wipe"].is-on, .film-layers [data-in="wipe"].is-off { clip-path: inset(0 -2% 0 0); }
.film-layers [data-t].is-off { opacity: 0; transition-duration: 0.2s; }
.film-layers [data-t].is-off[data-out="shrink"] { scale: 0; opacity: 0; transition: scale 0.22s cubic-bezier(0.55, 0, 1, 0.45), opacity 0s linear 0.22s; }
.film-layers [data-t].is-off[data-out="drop"] { translate: 0 140%; opacity: 1; transition: translate 0.32s cubic-bezier(0.55, 0, 1, 0.45); }
.film-layers [data-t].is-off[data-out="grow"] { scale: 1.18; opacity: 0; transition: scale 0.3s ease-in, opacity 0.3s ease-in; }
.film-layers [data-t].is-off[data-out="none"] { opacity: 1; scale: 1; translate: 0 0; }
.film-reset .film-layers [data-t], .film-reset .film-layers [data-t] * { transition: none !important; animation: none !important; }

/* tags (speech bubbles, like the reference "NEW" tags) */
.tag {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 1.9cqw;
  padding: 0.32em 0.55em 0.28em;
  border-radius: 0.3em;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0.12em 0 var(--ink);
}
.tag::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.42em;
  width: 0.7em; height: 0.5em;
  translate: -50% 0;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.fl-tags { position: absolute; top: 4cqh; left: 0; right: 0; display: flex; justify-content: center; gap: 2.2cqw; }
.fl-tags .tag:nth-child(2) { translate: 0 -0.6cqw; }

/* two-line stickers ("FIRE HONEY / CHICKEN", "CRISPY / CHICKPEAS") */
.stk { position: absolute; display: flex; flex-direction: column; align-items: center; rotate: -3deg; }
.stk .ln {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: 7.2cqw;
  color: var(--navy);
  background: var(--cream);
  padding: 0.06em 0.2em 0.02em;
  border-radius: 0.14em;
  box-shadow: 0 0.07em 0 var(--gold-deep);
}
.stk .ln-2 { margin-top: -0.06em; font-size: 5.6cqw; color: var(--cream); background: var(--navy); box-shadow: 0 0.07em 0 var(--gold-deep), 0 0 0 0.06em var(--cream); }
.stk-1 { left: 50%; bottom: 6cqh; transform: translateX(-50%); }
.stk-2 { left: 10cqw; bottom: 9cqh; align-items: flex-start; }
.stk-2 .ln-2 { margin-left: 6cqw; }
.stk-2 .tag-price { position: absolute; right: -10cqw; top: -2.4cqw; rotate: 8deg; font-size: 2.1cqw; }
.stk-menu { left: 5cqw; top: 9cqh; align-items: flex-start; }
.stk-menu .ln { font-size: 6cqw; }
.stk-menu .ln-2 { margin-left: 4cqw; font-size: 5cqw; }

/* giant drifting words (the "FIRE / HONEY / CHICKEN" scene) */
.fl-words { position: absolute; inset: 0; }
.fl-words .w {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.82;
  white-space: nowrap;
  color: var(--cream);
  opacity: 0.86;
  font-size: 15cqw;
  text-shadow: 0 0.04em 0.25em rgba(0, 17, 58, 0.35);
}
.fl-words .w1 { left: -1.5cqw; top: 6cqh; }
.fl-words .w2 { right: -2cqw; top: 36cqh; }
.fl-words .w3 { left: 12cqw; bottom: -2.5cqh; font-size: 13cqw; }
.fl-words .w > span { display: inline-block; }
.fl-words.is-on .w1 > span { animation: drift-r 2.2s linear both; }
.fl-words.is-on .w2 > span { animation: drift-l 2.2s linear both; }
.fl-words.is-on .w3 > span { animation: drift-r 2.2s linear both; }
.fl-words.is-on .w2 { animation: word-in-r 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fl-words.is-on .w1, .fl-words.is-on .w3 { animation: word-in-l 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fl-words.is-on .w3 { animation-delay: 0.12s; }
@keyframes drift-r { from { transform: translateX(-2.5cqw); } to { transform: translateX(2.5cqw); } }
@keyframes drift-l { from { transform: translateX(3cqw); } to { transform: translateX(-2cqw); } }
@keyframes word-in-l { from { translate: -12cqw 0; } to { translate: 0 0; } }
@keyframes word-in-r { from { translate: 12cqw 0; } to { translate: 0 0; } }

/* round badge ("Fire is our flavor" → "Good food / Good mood") */
.hs-badge {
  position: absolute;
  left: 4.5cqw; top: 54cqh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 14.5cqw; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  border: 0.32cqw solid var(--navy);
  box-shadow: 0 0 0 0.32cqw var(--cream), 0 1cqw 2.4cqw rgba(0, 0, 0, 0.3);
  rotate: -8deg;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-align: center;
}
.hs-badge .b-top { font-family: "Kaushan Script", var(--font-sub); font-weight: 400; text-transform: none; color: var(--gold-text); font-size: 2.2cqw; letter-spacing: 0; }
.hs-badge .b-mid { font-size: 2.7cqw; margin-top: 0.12em; }

/* script caption ("Fire Honey Chicken" → "Gyros su tadžiki") */
.fl-script {
  position: absolute; left: 0; right: 0; bottom: 5cqh;
  font-family: "Kaushan Script", var(--font-sub);
  font-size: 4.4cqw;
  line-height: 1.1;
  color: var(--cream);
  text-shadow: 0 0.06em 0.3em rgba(0, 17, 58, 0.7);
}

/* stripe wipe: Greek key (meander) from the logo's border, alternating colour and direction */
.fl-wipe { position: absolute; inset: 0; display: flex; flex-direction: column; --key-h: 8.5cqh; --key-w: calc(var(--key-h) * 0.9); }
.fl-wipe .band {
  flex: 1 1 0;
  margin: -1px 0;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M0 2H18M0 18H18M14 18V6H2V14H10V10H6' fill='none' stroke='%23f2b84b' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") repeat-x 0 50% / var(--key-w) var(--key-h);
  translate: -101% 0;
  transition: translate 0.34s cubic-bezier(0.65, 0, 0.35, 1);
}
.fl-wipe .band:nth-child(even) {
  translate: 101% 0;
  background-color: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M0 2H18M0 18H18M14 18V6H2V14H10V10H6' fill='none' stroke='%23001e5a' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
}
.fl-wipe .band:nth-child(1) { transition-delay: 0.00s; }
.fl-wipe .band:nth-child(2) { transition-delay: 0.05s; }
.fl-wipe .band:nth-child(3) { transition-delay: 0.02s; }
.fl-wipe .band:nth-child(4) { transition-delay: 0.08s; }
.fl-wipe .band:nth-child(5) { transition-delay: 0.04s; }
.fl-wipe .band:nth-child(6) { transition-delay: 0.10s; }
.fl-wipe .band:nth-child(7) { transition-delay: 0.03s; }
.fl-wipe .band:nth-child(8) { transition-delay: 0.07s; }
.fl-wipe.is-on .band { translate: 0 0; animation: key-r 0.9s linear infinite; }
.fl-wipe.is-on .band:nth-child(even) { animation-name: key-l; }
.fl-wipe.is-off .band { transition-duration: 0.38s; }
/* shift by whole tiles so the loop is seamless at any size */
@keyframes key-r { from { background-position-x: 0; } to { background-position-x: calc(var(--key-w) * 3); } }
@keyframes key-l { from { background-position-x: 0; } to { background-position-x: calc(var(--key-w) * -3); } }

/* video inside the letters */
.fl-fill { position: absolute; left: 2cqw; bottom: 8cqh; width: 66cqw; height: 15cqw; }
.fill-canvas { width: 100%; height: 100%; filter: drop-shadow(0 0.4cqw 0.9cqw rgba(0, 17, 58, 0.55)); }
.fill-src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pill {
  position: absolute; left: 30cqw; bottom: 3.2cqh;
  font-family: var(--font-sub); font-weight: 600;
  font-size: 1.9cqw; line-height: 1;
  color: var(--navy); background: var(--cream);
  padding: 0.55em 1em; border-radius: 0.5em;
  box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.25);
}
.pill::before {
  content: ""; position: absolute; left: 50%; top: -0.45em; width: 0.9em; height: 0.5em;
  translate: -50% 0; background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.tag-skepasti { position: absolute; left: 61cqw; bottom: 25cqh; rotate: -6deg; font-size: 2.4cqw; }

/* menu slide: pointer tags (reference "NEW TOPPING / Crispy Chickpeas") */
.ptag {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, calc(-100% - 1.1cqw));
  display: flex; flex-direction: column; align-items: center;
  background: var(--cream); color: var(--navy);
  border-radius: 0.6cqw;
  padding: 0.6cqw 1.1cqw 0.55cqw;
  box-shadow: 0 0.5cqw 1.4cqw rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.ptag[data-dir="up"] { transform: translate(-50%, 1.1cqw); }
.ptag::after {
  content: ""; position: absolute; left: 50%; bottom: -1cqw; width: 1.8cqw; height: 1.1cqw;
  translate: -50% 0; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ptag[data-dir="up"]::after { bottom: auto; top: -1cqw; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ptag b { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.55cqw; line-height: 1; }
.ptag small { font-family: var(--font-sub); font-weight: 600; font-size: 1.3cqw; line-height: 1.1; margin-top: 0.25cqw; color: var(--gold-text); }

/* static fallback (reduced motion, autoplay blocked): one readable composition */
.film-static .film-layers [data-t] { opacity: 0; transition: none; animation: none; }
.film-static .film-layers .fl-words, .film-static .film-layers .fl-words *,
.film-static .film-layers .hs-badge, .film-static .film-layers .hs-badge * { opacity: 1; scale: 1; translate: 0 0; animation: none; }
.film-static .fl-words .w { opacity: 0.86; }
.hs-menu.film-static .film-layers [data-t] { opacity: 1; scale: 1; translate: 0 0; }

/* phone: 8:9 banner, bigger type relative to the frame */
@media (max-width: 599px) {
  .tag { font-size: 3.6cqw; }
  .fl-tags { top: 5cqh; gap: 3cqw; }
  .stk .ln { font-size: 13cqw; }
  .stk .ln-2 { font-size: 10cqw; }
  .stk-1 { bottom: 7cqh; }
  .stk-2 { left: 7cqw; bottom: 10cqh; }
  .stk-2 .tag-price { right: -14cqw; top: -5cqw; font-size: 4cqw; }
  .stk-menu { left: auto; right: 5cqw; top: 4cqh; align-items: flex-end; }
  .stk-menu .ln { font-size: 10cqw; }
  .stk-menu .ln-2 { margin: 0 4cqw 0 0; font-size: 8.5cqw; }
  .fl-words .w { font-size: 25cqw; }
  .fl-words .w1 { left: -2cqw; top: 6cqh; }
  .fl-words .w2 { right: -3cqw; top: 37cqh; }
  .fl-words .w3 { left: 4cqw; bottom: 1cqh; font-size: 21cqw; }
  .hs-badge { left: 5cqw; top: 33cqh; width: 28cqw; border-width: 0.7cqw; box-shadow: 0 0 0 0.7cqw var(--cream), 0 2cqw 4cqw rgba(0, 0, 0, 0.3); }
  .hs-badge .b-top { font-size: 4.3cqw; }
  .hs-badge .b-mid { font-size: 5.2cqw; }
  .fl-script { font-size: 8.5cqw; bottom: 6cqh; }
  .fl-fill { left: 3cqw; width: 94cqw; height: 22cqw; bottom: 20cqh; }
  .pill { left: 50%; transform: translateX(-50%); bottom: 8cqh; font-size: 4cqw; white-space: nowrap; }
  .tag-skepasti { left: auto; right: 6cqw; bottom: 43cqh; font-size: 4.6cqw; }
  /* --mx/--my = arrow tip on the phone crop; --max = where the arrow sits along the tag (default centre),
     so a tag can lean away from the edge or from a neighbouring dish while still pointing at its own */
  .ptag { left: var(--mx); top: var(--my); padding: 1.4cqw 2.4cqw 1.2cqw; border-radius: 1.4cqw; }
  .ptag::after { left: var(--max, 50%); }
  .ptag[data-mdir="down"] { transform: translate(calc(-1 * var(--max, 50%)), calc(-100% - 2.2cqw)); }
  .ptag[data-mdir="down"]::after { bottom: -2cqw; top: auto; width: 3.6cqw; height: 2.2cqw; clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .ptag[data-mdir="up"] { transform: translate(calc(-1 * var(--max, 50%)), 2.2cqw); }
  .ptag[data-mdir="up"]::after { top: -2cqw; bottom: auto; width: 3.6cqw; height: 2.2cqw; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .ptag b { font-size: 3.4cqw; }
  .ptag small { font-size: 3cqw; }
}

/* arrows + progress ring (reference "tksnav") */
.hs-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 48px; height: 48px;
  margin-top: -24px;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--cream);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  opacity: 0;
  transition: opacity 0.5s, background 0.25s;
  padding: 0;
}
.hs-arrow svg { width: 22px; height: 22px; }
.hs-prev { left: 30px; }
.hs-next { right: 30px; }
.hero-slider:hover .hs-arrow, .hs-arrow:focus-visible { opacity: 1; }
.hs-arrow:hover { background: rgba(247, 241, 227, 0.25); }
@media (hover: none) { .hs-arrow { display: none; } }
.hs-progress {
  position: absolute;
  right: 8px; bottom: 8px;
  width: 36px; height: 36px;
  transform: rotate(-90deg);
  z-index: 5;
  pointer-events: none;
}
.hs-progress circle { fill: none; stroke-width: 3; }
.hs-progress .bg { stroke: rgba(242, 184, 75, 0.25); }
.hs-progress .fg { stroke: rgba(242, 184, 75, 0.85); stroke-linecap: round; }
.no-autoplay .hs-progress { display: none; }

/* ------------------------------------------------ favourites grid */
.home .menu { padding: 40px 5%; }
@media (min-width: 1024px) { .home .menu { padding: 64px 5%; } }
.home .menu.food .h1, .home .menu.food .h2 { color: var(--navy); }
/* 12vw keeps the 10-letter English word (FAVOURITES) on one line down to 320 px; no mid-word break */
.home .menu.food .h1 { font-size: min(64px, 13vw); overflow-wrap: normal; }
@media (min-width: 600px) { .home .menu.food .h1 { font-size: min(80px, 11.5vw); } }
@media (min-width: 1441px) { .home .menu.food .h1 { font-size: 112px; } }
.home .menu.food .h2 { font-size: min(48px, 12vw); line-height: 1.05; }
@media (min-width: 768px) { .home .menu.food .h2 { font-size: 56px; } }
@media (min-width: 1024px) { .home .menu.food .h2 { font-size: 52px; } }
@media (min-width: 1441px) { .home .menu.food .h2 { font-size: 80px; } }
.home .menu header { text-align: center; max-width: 1328px; margin: 0 auto 24px; }
@media (min-width: 1024px) { .home .menu header { margin: 0 auto 16px; } }
.home .menu .menu-wrapper {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1328px;
  margin: auto;
  padding-bottom: 32px;
}
@media (min-width: 1024px) { .home .menu .menu-wrapper { justify-content: space-between; } }
.home .menu .menu-item { color: var(--ink); display: block; width: 100%; }
.home .menu .menu-item + .menu-item { margin-top: 32px; }
@media (min-width: 768px) {
  .home .menu .menu-wrapper { justify-content: space-between; }
  .home .menu .menu-item { width: 47.7064220183%; }
  .home .menu .menu-item + .menu-item { margin-top: 0; }
  .home .menu .menu-item:nth-of-type(3) { margin: 32px auto 0; }
}
@media (min-width: 1024px) {
  .home .menu.food .menu-item { width: 27.1084337349%; }
  .home .menu .menu-item:nth-of-type(3) { margin: 0; }
}
.home .menu .thumbnail { position: relative; max-width: 416px; margin: 0 auto 12px; }
/* tilted tile behind each cut-out (the reference bakes a pink tile into the photo) */
.home .menu .thumbnail::before {
  content: "";
  position: absolute;
  inset: 12% 9% 9% 12%;
  border-radius: 16px;
  background: var(--sky);
  transform: rotate(-6deg);
  transition: transform 0.2s ease-in-out;
}
.home .menu .menu-item:nth-of-type(2) .thumbnail::before { transform: rotate(4deg); inset: 10% 12% 10% 10%; }
.home .menu .menu-item:nth-of-type(3) .thumbnail::before { transform: rotate(-10deg); }
.home .menu .thumbnail img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transform: scale(1);
  transition: all 0.2s ease-in-out;
  filter: drop-shadow(0 18px 22px rgba(0, 17, 58, 0.18));
}
@media (min-width: 1024px) {
  .home .menu .menu-item:hover .thumbnail img { transform: scale(1.1); }
}

/* ------------------------------------------------------ full menu */
.menu-full { padding: 0 5% 40px; }
.menu-full > .container {
  background: var(--cream);
  border-radius: 40px;
  padding: 3em 5%;
}
@media (min-width: 600px) { .menu-full > .container { padding: 4em 5%; } }
@media (min-width: 1024px) { .menu-full > .container { padding: 5em 5%; } }
.menu-full header { text-align: center; margin-bottom: 1.5em; }
.menu-full .h4 { color: var(--navy); }
.menu-full .h6 { margin-top: 0.3em; }
/*
 * Menu composition (reading order = DOM order = tab order, never masonry):
 *  < 600 px     one column, photo on top, natural heights.
 *  600–1023 px  one column; cards with a photo turn horizontal (photo left), so no card leaves a hole.
 *  >= 1024 px   rows of two equal cards, always in DOM order:
 *               Gyros (photo at the side) + Vegetarian · Plate + Skepasti · Salad + Snacks ·
 *               Churros (photo at the side) + Drinks · CTA (full width).
 *               Rows stretch to the taller card; in a photo card the photo absorbs the difference,
 *               so the text block never gets an empty filler area.
 */
.mf-grid {
  --mf-pad: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 1328px;
  margin: 0 auto;
  text-align: left;
}
@media (min-width: 600px) { .mf-grid { --mf-pad: 24px; gap: 24px; } }
@media (min-width: 1024px) {
  .mf-grid { --mf-pad: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .mf-grid > .mf-cta { grid-column: 1 / -1; }
}
.mf-card {
  background: var(--white);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.mf-card:hover, .mf-card:focus-within { box-shadow: 0 12px 30px rgba(0, 30, 90, 0.16); }
.mf-card.is-selected { border-color: var(--gold-deep); }
.mf-card:focus-within, .mf-card.is-selected:focus-within { border-color: var(--aegean); }
.mf-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: var(--mf-pad); }
.mf-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  font-size: 30px;
}
@media (min-width: 1024px) { .mf-title { font-size: 40px; } }
/* "VEGETARIŠKAS" is ~7.9× the font size wide and must never break mid-word (only between
   "Gyros" and "vegetariškas"). Below ~350 px the font shrinks just enough for the word to fit. */
@media (max-width: 599px) {
  html[lang="lt"] #m-vege-t { overflow-wrap: normal; font-size: min(30px, calc((100vw - 110px) / 8)); }
}
.mf-variant {
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 16px;
  color: var(--aegean);
}
.mf-desc { font-size: 17px; line-height: 1.4; }
@media (min-width: 1024px) { .mf-variant { font-size: 18px; } .mf-desc { font-size: 19px; } }
.mf-sizes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.mf-sizes li {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 2px solid var(--navy);
  border-radius: 9px;
  padding: 6px 12px;
  font-family: var(--font-sub);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy);
}
.mf-sizes strong { font-size: 20px; }
@media (max-width: 479px) {
  .mf-grid { --mf-pad: 18px 16px 20px; }
  .mf-sizes { gap: 6px; }
  .mf-sizes li { padding: 6px 9px; gap: 6px; font-size: 14px; }
  .mf-sizes strong { font-size: 18px; }
  .mf-cta .button { font-size: 20px; }
}
.mf-sizes li:last-child:not(.single) { background: var(--navy); color: var(--cream); }
.mf-extra { font-family: var(--font-sub); font-weight: 600; font-size: 15px; color: var(--gold-text); }
.mf-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 17px; line-height: 1.35;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(0, 30, 90, 0.25);
}
.mf-list li:last-child { border-bottom: 0; }
.mf-list strong { font-family: var(--font-sub); font-weight: 600; font-size: 20px; color: var(--navy); white-space: nowrap; }
@media (min-width: 1024px) { .mf-list li { font-size: 19px; } }
.mf-cta { background: var(--navy); align-items: flex-start; justify-content: space-between; gap: 20px; padding: var(--mf-pad); }
/* the CTA closes the menu as a full-width strip from 600 px up */
@media (min-width: 600px) { .mf-cta { flex-direction: row; flex-wrap: wrap; align-items: center; } }

/* 600–1023 px: one column, photo cards horizontal */
@media (min-width: 600px) and (max-width: 1023px) {
  .mf-card:has(> .mf-photo) { flex-direction: row; }
  .mf-card:has(> .mf-photo) > .mf-photo { flex: 0 0 40%; aspect-ratio: auto; min-height: 220px; }
  .mf-card:has(> .mf-photo) > .mf-photo img { position: absolute; inset: 0; }
}
/* >= 1024 px: vertical cards let the photo take the row's extra height (text keeps its natural size);
   "side" cards (photo next to the text) sit next to a card without a photo. */
@media (min-width: 1024px) {
  .mf-card:has(> .mf-photo):not(.mf-card--side) > .mf-photo { flex: 1 0 auto; }
  .mf-card:has(> .mf-photo):not(.mf-card--side) > .mf-body { flex: 0 0 auto; }
  .mf-card--side { flex-direction: row; }
  .mf-card--side > .mf-photo { flex: 0 0 42%; aspect-ratio: auto; min-height: 240px; }
  .mf-card--side > .mf-photo img { position: absolute; inset: 0; }
  .mf-card--side > .mf-body { flex: 1 1 auto; justify-content: center; }
}
@media (min-width: 600px) {
  .mf-card:has(> .mf-photo) > .mf-body { justify-content: center; }
  .mf-card:has(> .mf-photo) > .mf-body > .mf-order { margin-top: 4px; }
}
@media (min-width: 1024px) {
  .mf-card:has(> .mf-photo):not(.mf-card--side) > .mf-body { justify-content: flex-start; }
}
/* 1024–1199 px: "CHURROS" needs ~200 px at 40 px, but the side layout leaves ~172 px and the word
   would break in the middle. In this range the churros card stacks like the other photo cards. */
@media (min-width: 1024px) and (max-width: 1199px) {
  #m-churros.mf-card--side { flex-direction: column; }
  #m-churros.mf-card--side > .mf-photo { flex: 1 0 auto; aspect-ratio: 16 / 10; min-height: 0; }
  #m-churros.mf-card--side > .mf-body { flex: 0 0 auto; justify-content: flex-start; }
}
.mf-slogan {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  color: var(--cream); font-size: 40px; line-height: 0.9; letter-spacing: -0.02em;
}
@media (min-width: 1024px) { .mf-slogan { font-size: 56px; } }

/* --------------------------------------------------------- intro */
.home .intro { padding: 0 5%; }
@media (min-width: 1024px) { .home .intro { text-align: left; } }
.home .intro .container {
  background: var(--cream);
  border-radius: 40px;
  margin: auto;
  position: relative;
  padding: 3em 5%;
}
@media (min-width: 600px) { .home .intro .container { padding: 4em 5%; } }
@media (min-width: 768px) { .home .intro .container { padding: 5em 5%; } }
@media (min-width: 1024px) { .home .intro .container { padding: 6em 5%; display: flex; align-items: center; justify-content: space-between; } }
@media (min-width: 1441px) { .home .intro .container { padding: 7em 5%; } }
.home .intro .image { margin-bottom: 1.5rem; }
.home .intro .image img { width: 100%; max-width: 256px; margin: 0 auto; aspect-ratio: 1; }
@media (min-width: 1024px) {
  .home .intro .image { margin-bottom: 0; width: 30.3571428571%; }
  .home .intro .image img { max-width: 565px; margin: 0; }
  .home .intro .text { width: 64.2857142857%; }
}
@media (min-width: 1441px) {
  .home .intro .image { width: 35.7142857143%; }
  .home .intro .text { width: 57.1428571429%; }
}
.home .intro .text .h4 { color: var(--navy); }
.home .intro .text .h6 { margin: 0.25em 0 0; color: var(--gold-text); }
.home .intro .text p:not(.h6) { margin: 1em auto 1.5em; max-width: 680px; }
@media (min-width: 1024px) { .home .intro .text p:not(.h6) { margin-left: 0; } }

/* ------------------------------------------------------- gallery */
.home .gallery { padding: 40px 5% 0; --gap: clamp(12px, 2vw, 20px); }
.home .gallery .container { display: flex; flex-wrap: wrap; gap: var(--gap); margin: 0; padding: 0; max-width: none; }
.home .gallery .container > li {
  position: relative; flex: 1 1 100%; border-radius: 16px; overflow: hidden; min-width: 0; aspect-ratio: 4 / 3;
  background: var(--cream);
}
.home .gallery .container > li img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home .gallery .container > li:nth-child(5n + 1) { flex: 1 1 100%; aspect-ratio: 16 / 9; }
.home .gallery .container > li:nth-child(5n + 2),
.home .gallery .container > li:nth-child(5n + 3) { flex: 1 1 calc((100% - var(--gap)) / 2); aspect-ratio: 4 / 3; }
.home .gallery .container > li:nth-child(5n + 4) { flex: 1 1 100%; aspect-ratio: 21 / 9; }
.home .gallery .container > li:nth-child(5n + 5) { flex: 1 1 100%; aspect-ratio: 5 / 4; }
.home .gallery .container > li:nth-child(1) img { object-position: 50% 40%; }
@media (min-width: 600px) {
  .home .gallery { padding: 40px 0 0 0; }
  .home .gallery .container {
    display: grid;
    gap: var(--gap);
    grid-template-columns: 1.15fr 1fr 1fr 1.15fr;
    grid-template-rows: auto auto;
    grid-template-areas: "hero mid1 mid2 tallR" "hero wide wide tallR";
  }
  .home .gallery .container > li { aspect-ratio: auto; }
  .home .gallery .container > li:nth-child(1) { border-radius: 0 16px 16px 0; grid-area: hero; aspect-ratio: 3 / 4; }
  .home .gallery .container > li:nth-child(2) { grid-area: mid1; aspect-ratio: 4 / 3; }
  .home .gallery .container > li:nth-child(3) { grid-area: mid2; aspect-ratio: 4 / 3; }
  .home .gallery .container > li:nth-child(4) { grid-area: wide; aspect-ratio: 3 / 1; }
  .home .gallery .container > li:nth-child(5) { border-radius: 16px 0 0 16px; grid-area: tallR; aspect-ratio: 3 / 4; }
}

/* ------------------------------------------------------- reviews */
.reviews { padding: 40px 5% 0; }
.reviews > .container { background: var(--cream); border-radius: 40px; padding: 3em 5%; }
@media (min-width: 600px) { .reviews > .container { padding: 4em 5%; } }
@media (min-width: 1024px) { .reviews > .container { padding: 5em 5%; } }
.reviews > .container > header { text-align: center; margin-bottom: 1.5em; }
.reviews .h4 { color: var(--navy); }
.reviews .h6 { margin-top: 0.3em; }
.rv-summary, .rv-source, .rv-carousel { max-width: 1328px; margin-left: auto; margin-right: auto; }

/* stars: grey row + gold row clipped to --pct (interface icons, CSS only) */
.rv-stars {
  --s: 20px;
  position: relative; display: inline-block; flex: none;
  width: calc(var(--s) * 5); height: var(--s);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d3d9e4' d='M12 2.4l2.95 6.1 6.75.95-4.9 4.73 1.17 6.67L12 17.68l-5.97 3.17 1.17-6.67-4.9-4.73 6.75-.95z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x;
}
.rv-stars > i {
  position: absolute; inset: 0 auto 0 0; width: var(--pct, 100%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b4771b' d='M12 2.4l2.95 6.1 6.75.95-4.9 4.73 1.17 6.67L12 17.68l-5.97 3.17 1.17-6.67-4.9-4.73 6.75-.95z'/%3E%3C/svg%3E") 0 0 / var(--s) var(--s) repeat-x;
}
.rv-stars--lg { --s: 28px; }
@media (min-width: 1024px) { .rv-stars--lg { --s: 34px; } }
.rv-anim .rv-sum .rv-stars > i { width: 0; }
.rv-anim .rv-summary.is-in .rv-stars > i { width: var(--pct); transition: width 1.2s cubic-bezier(0.33, 1, 0.68, 1) 0.1s; }

/* summary cards (one per location, never combined) */
.rv-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { .rv-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.rv-sum {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--white); border-radius: 16px; padding: 24px; color: var(--navy);
}
@media (min-width: 1024px) { .rv-sum { padding: 28px 32px; } }
.rv-sum-unit {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1; font-size: 30px; color: var(--navy);
}
@media (min-width: 1024px) { .rv-sum-unit { font-size: 40px; } }
.rv-sum-place { font-family: var(--font-sub); font-weight: 600; font-size: 15px; color: var(--aegean); }
.rv-sum-score { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.rv-score {
  font-family: var(--font-display); font-weight: 900; line-height: 0.9; color: var(--navy);
  font-size: 56px; font-variant-numeric: tabular-nums; min-width: 2.1ch;
}
@media (min-width: 1024px) { .rv-score { font-size: 72px; } }
.rv-sum-count { font-family: var(--font-sub); font-weight: 600; font-size: 18px; }
.rv-count { font-variant-numeric: tabular-nums; }
.rv-sum-link, .rv-link, .rv-more, .rv-lang {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-sub); font-weight: 600; font-size: 17px; line-height: 1.1; color: var(--navy);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.rv-sum-link { margin-top: auto; }
.rv-sum-link span, .rv-link span { border-bottom: 2px solid var(--gold-deep); padding-bottom: 3px; }
.rv-sum-link::after, .rv-link::after { content: "\2197"; font-size: 0.95em; }
.rv-more, .rv-lang { text-decoration: underline; text-decoration-color: rgba(0, 30, 90, 0.35); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.rv-more:hover, .rv-lang:hover { text-decoration-color: var(--gold-deep); }
.rv-source { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--text); text-align: center; }
@media (min-width: 768px) { .rv-source { font-size: 15px; } }

/* review cards */
.rv-carousel { margin-top: 32px; }
@media (min-width: 1024px) { .rv-carousel { margin-top: 40px; } }
.rv-track { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .rv-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1024px) { .rv-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rv-card { display: flex; text-align: left; }
.rv-name, .rv-unit, .rv-sum-place { margin: 0; text-transform: none; }
.rv-card > article {
  display: flex; flex-direction: column; gap: 12px; width: 100%;
  background: var(--white); border-radius: 16px; padding: 24px; color: var(--text);
  border: 2px solid transparent; transition: border-color 0.25s;
}
.rv-card > article:focus-within { border-color: var(--aegean); }
.rv-head { display: flex; align-items: center; gap: 12px; }
.rv-avatar {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--cream); font-family: var(--font-sub); font-weight: 600; font-size: 17px; letter-spacing: 0.02em;
}
/* author's own Google profile photo (with permission; sources in docs/AVALIACOES.md): uniform scale, circular crop */
img.rv-avatar { object-fit: cover; object-position: 50% 50%; background: var(--sky); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px rgba(0, 30, 90, 0.15); }
.rv-name { font-family: var(--font-sub); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--navy); }
.rv-unit {
  display: inline-block; margin-top: 4px !important; padding: 3px 10px; border-radius: 999px;
  background: var(--sky); color: var(--navy); font-family: var(--font-sub); font-weight: 600; font-size: 13px; line-height: 1.3;
}
.rv-card blockquote { margin: 0; }
.rv-card blockquote p { font-size: 17px; line-height: 1.5; color: var(--text); }
.rv-card blockquote p + p { margin-top: 0.7em; }
@media (min-width: 1024px) { .rv-card blockquote p { font-size: 18px; } }
.rv-note { font-family: var(--font-sub); font-weight: 600; font-size: 14px; color: var(--gold-text); }
.rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: auto; padding-top: 4px; }
.rv-link { margin-left: auto; }
.rv-controls { display: none; }

/* phones: manual carousel (no auto-rotation) */
@media (max-width: 767px) {
  .rv-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -5%; padding: 4px 5% 8px; scroll-padding: 0 5%;
  }
  .rv-track::-webkit-scrollbar { display: none; }
  /* cards keep their natural height (no stretching to the tallest one), so the links follow the text;
     the excerpt is clamped to 5 lines to keep the cards similar, and "Skaityti visą" opens the rest */
  .rv-track { align-items: flex-start; }
  .rv-card { flex: 0 0 88%; scroll-snap-align: start; }
  .rv-card > article { padding: 20px; gap: 10px; }
  .rv-card .rv-short { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
  .rv-card.is-open .rv-short { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .rv-actions { margin-top: 2px; padding-top: 0; }
  .rv-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
  .rv-arrow {
    display: grid; place-items: center; width: 48px; height: 48px; flex: none;
    border-radius: 50%; border: 2px solid var(--navy); background: var(--white); color: var(--navy); cursor: pointer;
  }
  .rv-arrow svg { width: 22px; height: 22px; }
  .rv-arrow:disabled { opacity: 0.35; cursor: default; }
  .rv-pos { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .rv-dots { display: flex; gap: 6px; }
  .rv-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 30, 90, 0.25); transition: width 0.25s, background 0.25s; }
  .rv-dots span.is-on { width: 22px; border-radius: 4px; background: var(--navy); }
  .rv-pos-text { font-family: var(--font-sub); font-weight: 600; font-size: 15px; color: var(--navy); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-card > article, .rv-dots span { transition: none; }
}

/* ------------------------------------------------------- locations */
.locations { padding: 40px 5% 0; }
.locations > .container { background: var(--sky); border-radius: 40px; padding: 3em 5%; }
@media (min-width: 600px) { .locations > .container { padding: 4em 5%; } }
@media (min-width: 1024px) { .locations > .container { padding: 5em 5%; } }
.locations > .container > header { text-align: center; margin-bottom: 1.5em; }
.locations .h4 { color: var(--navy); }
.locations .h6 { margin-top: 0.3em; }
.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1328px; margin: 0 auto; text-align: left; }
@media (min-width: 768px) { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.loc-card { display: flex; flex-direction: column; background: var(--white); border-radius: 16px; overflow: hidden; color: var(--navy); }
.loc-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 auto; padding: 24px; }
@media (min-width: 1024px) { .loc-body { padding: 28px 32px; } }
@media (max-width: 479px) { .loc-body { padding: 20px 16px; } }
.loc-unit {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1; font-size: 30px; color: var(--navy);
}
@media (min-width: 1024px) { .loc-unit { font-size: 40px; } }
.loc-address { font-style: normal; font-family: var(--font-sub); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--aegean); }
@media (min-width: 1024px) { .loc-address { font-size: 19px; } }
.loc-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px; border: 2px solid var(--navy);
  font-family: var(--font-sub); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--navy);
}
.loc-hours-t { margin-top: 6px; font-family: var(--font-sub); font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-text); }
.loc-hours { width: 100%; margin: 0; }
.loc-hours > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 8px; margin: 0 -8px; border-bottom: 1px dashed rgba(0, 30, 90, 0.25); border-radius: 8px;
  font-size: 17px; line-height: 1.35;
}
.loc-hours > div:last-child { border-bottom: 0; }
.loc-hours dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.loc-hours dd { margin: 0; font-family: var(--font-sub); font-weight: 600; font-size: 18px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .loc-hours > div { font-size: 19px; } .loc-hours dd { font-size: 20px; } }
.loc-hours > div.is-today { background: var(--cream); border-bottom-color: transparent; }
.loc-today {
  display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--navy); color: var(--cream);
  font-family: var(--font-sub); font-weight: 600; font-size: 12px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.05em;
}
.loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; width: 100%; }
.loc-btn { font-size: 20px; border-radius: 12px; padding: 0.55em 0.9em; min-height: 44px; }
.loc-btn--alt { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
@media (max-width: 479px) { .loc-btn { flex: 1 1 100%; font-size: 18px; } }
.loc-social { max-width: 1328px; margin: 24px auto 0; text-align: center; }
.loc-ig {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--font-sub); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--navy); text-align: left;
}
.loc-ig svg { flex: none; width: 32px; height: 32px; }
.loc-ig strong { font-weight: 600; border-bottom: 2px solid var(--gold-deep); overflow-wrap: anywhere; }
.loc-ig:hover strong, .loc-ig:focus-visible strong { border-bottom-color: var(--navy); }

/* ------------------------------------------- order CTA ("app") */
.home .app { padding: 40px 5%; }
.home .app .container {
  background: var(--navy);
  border-radius: 40px;
  position: relative;
  margin: auto;
  width: 100%;
  padding: 3em 5%;
}
@media (min-width: 600px) { .home .app .container { padding: 4em 5%; } }
@media (min-width: 768px) { .home .app .container { padding: 5em 5%; } }
@media (min-width: 1024px) { .home .app .container { padding: 6em 5%; display: flex; align-items: center; justify-content: space-between; } }
@media (min-width: 1441px) { .home .app .container { padding: 7em 5%; } }
@media (min-width: 1024px) { .home .app .text { text-align: left; width: 50%; } }
.home .app .slogan {
  color: var(--cream);
  line-height: 0.8;
  font-size: min(84px, 21vw);
}
.home .app .slogan span { display: block; }
.home .app .slogan span + span { color: var(--gold); }
@media (min-width: 768px) { .home .app .slogan { font-size: 128px; } }
@media (min-width: 1024px) { .home .app .slogan { font-size: 9.5vw; } }
@media (min-width: 1441px) { .home .app .slogan { font-size: 176px; } }
.home .app .text p {
  color: var(--cream);
  font-family: var(--font-sub);
  font-weight: 600;
  margin: 0.6em 0 0.8em;
}
.app-buttons { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center; }
@media (min-width: 1024px) { .app-buttons { justify-content: flex-start; } }
.home .app .image { margin-top: 24px; margin-bottom: -18.5%; position: relative; z-index: 2; }
@media (min-width: 1024px) { .home .app .image { margin-top: -4em; margin-bottom: -11em; width: 48%; transform: translateY(16%); } }
@media (min-width: 1441px) { .home .app .image { margin-top: -5em; margin-bottom: -13em; } }
.home .app .image img { width: 100%; max-width: 800px; margin: 0 auto; aspect-ratio: 1; filter: drop-shadow(0 24px 24px rgba(0, 10, 40, 0.35)); }
@media (min-width: 1024px) { .home .app .image img { width: 108%; max-width: 108%; } }

/* --------------------------------------------------------- footer */
.main-footer { background: var(--navy); padding: 2em 0; position: relative; text-align: center; }
@media (min-width: 1024px) { .main-footer { padding: 4em 0 1em; } }
.main-footer .row { z-index: 1; position: relative; }
@media (min-width: 600px) { .main-footer .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } }
@media (min-width: 1024px) { .main-footer .row { padding-bottom: 2em; } }
.main-footer .logo { width: 100%; }
@media (min-width: 1024px) { .main-footer .logo { width: 256px; } }
.main-footer .logo a { display: inline-block; margin-bottom: 2em; }
@media (min-width: 1024px) { .main-footer .logo a { margin-bottom: 0; } }
.main-footer .logo img { width: 166px; height: 166px; }
.main-footer .menus { font-family: var(--font-sub); font-weight: 600; width: 100%; }
@media (min-width: 600px) { .main-footer .menus { display: flex; justify-content: space-between; } .main-footer .menus nav { width: 48%; } }
@media (min-width: 1024px) { .main-footer .menus { width: calc(100% - 624px); text-align: left; } }
.main-footer .menus nav + nav { margin-top: 0.75em; }
@media (min-width: 600px) { .main-footer .menus nav + nav { margin-top: 0; } }
.main-footer .menus ul li { margin-bottom: 0.75em; }
.main-footer .menus ul li:last-child { margin-bottom: 0; }
.main-footer .menus ul a, .main-footer .lang-link {
  color: var(--cream); font-size: 24px; line-height: 1; text-decoration: none;
}
@media (min-width: 1441px) { .main-footer .menus ul a, .main-footer .lang-link { font-size: 28px; } }
.main-footer .menus ul a:hover, .main-footer .lang-link:hover { color: var(--gold); }
.footer-lang { color: var(--cream); font-size: 24px; display: flex; gap: 8px; align-items: baseline; justify-content: center; }
@media (min-width: 1024px) { .footer-lang { justify-content: flex-start; } }
.lang-link { background: none; border: 0; padding: 0; font-family: inherit; font-weight: 600; }
.lang-link[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; text-decoration-color: var(--gold); }
.main-footer .buttons { margin: 3em auto; width: 256px; }
@media (min-width: 600px) { .main-footer .buttons { display: flex; justify-content: space-between; width: 100%; } }
@media (min-width: 1024px) { .main-footer .buttons { display: inline-block; margin: 0; width: 256px; } }
@media (min-width: 1441px) { .main-footer .buttons { width: 300px; } }
.main-footer .buttons a { width: 100%; }
@media (min-width: 600px) { .main-footer .buttons a { width: 48%; } }
@media (min-width: 1024px) { .main-footer .buttons a { width: 100%; } }
.main-footer .buttons a + a { margin: 2rem 0 0 0; }
@media (min-width: 600px) { .main-footer .buttons a + a { margin: 0; } }
@media (min-width: 1024px) { .main-footer .buttons a + a { margin: 1.5rem 0 0 0; } }
.main-footer > .wrapper > .container > p { color: var(--cream); font-size: 14px; }

/* ------------------------------------------- reveal (AOS-equivalent) */
.aos-ready [data-aos] { transition-property: opacity, transform; transition-duration: 750ms; transition-timing-function: ease; }
.aos-ready [data-aos="fade-in"] { opacity: 0; }
.aos-ready [data-aos="zoom-in"] { opacity: 0; transform: scale(0.6); }
.aos-ready [data-aos].aos-animate { opacity: 1; transform: none; }

/* ------------------------------------------------ product cards (photo + body) */
.mf-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky); }
.mf-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mf-photo--cutout img { object-fit: contain; padding: 4%; filter: drop-shadow(0 12px 16px rgba(0, 17, 58, 0.2)); }
.mf-card:focus-within .mf-photo img { transform: scale(1.05); }
@media (hover: hover) { .mf-card:hover .mf-photo img { transform: scale(1.05); } }
/* dishes without a matching photo: brand band (Greek key from the logo border), not another dish */
.mf-band, .loc-band {
  height: 20px; background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 20'%3E%3Cpath d='M0 2H18M0 18H18M14 18V6H2V14H10V10H6' fill='none' stroke='%23f2b84b' stroke-opacity='0.55' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: 50% 50%; background-size: 18px 20px;
}
.mf-order {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 44px; margin-top: auto; padding: 6px 0 0;
  font-family: var(--font-sub); font-weight: 600; font-size: 18px; line-height: 1; color: var(--navy);
}
.mf-order span { border-bottom: 2px solid var(--gold-deep); padding-bottom: 3px; }
.mf-order::after { content: "\2192"; transition: transform 0.25s; }
.mf-order:hover::after, .mf-order:focus-visible::after { transform: translateX(4px); }

/* ------------------------------------------------ category tabs (sliding highlight) */
.mf-tabs { max-width: 1328px; margin: 0 auto 24px; }
.mf-tabs-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px 6px; -webkit-overflow-scrolling: touch; }
.mf-tabs-scroll::-webkit-scrollbar { display: none; }
.mf-tabs-list {
  position: relative; display: flex; gap: 2px; width: max-content; min-width: 100%;
  justify-content: center; padding: 4px; background: var(--white);
  border: 2px solid var(--navy); border-radius: 999px;
}
.mf-tabs-list li { flex: none; }
.mf-tab {
  position: relative; z-index: 1; display: flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border-radius: 999px; white-space: nowrap; color: var(--navy);
  font-family: var(--font-sub); font-weight: 600; font-size: 18px; line-height: 1.1;
  transition: color 0.25s;
}
.mf-tab.is-selected { color: var(--cream); }
@media (hover: hover) { .mf-tab:not(.is-selected):hover { background: var(--sky); } }
.mf-tab.is-selected::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 20px; height: 3px; margin-left: -10px;
  border-radius: 3px; background: var(--gold-deep);
}
.mf-tab.is-selected::after { background: var(--gold); }
.mf-cursor {
  position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0; opacity: 0;
  border-radius: 999px; background: var(--navy);
  transition: transform 0.4s var(--ease-slide), width 0.4s var(--ease-slide), opacity 0.2s;
}
@media (max-width: 479px) {
  .mf-tabs-list { justify-content: flex-start; }
  .mf-tab { padding: 8px 14px; font-size: 16px; }
}

/* ------------------------------------------------ phone order bar */
.order-bar { display: none; }
@media (max-width: 599px) {
  :root { --ob-h: 76px; }
  .main-header .mobile { display: none; }
  .order-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px));
    background: var(--navy); border-top: 3px solid var(--cream);
  }
  .order-bar ul { display: flex; gap: 8px; max-width: 520px; margin: 0 auto; }
  .order-bar li { flex: 1 1 0; min-width: 0; }
  .order-bar li:has(.ob-bolt) { flex-grow: 1.5; }
  .ob-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 52px; padding: 6px 4px; border-radius: 12px; color: var(--cream);
    font-family: var(--font-sub); font-weight: 600; font-size: 14px; line-height: 1; text-align: center;
    transition: background 0.3s, color 0.3s;
  }
  .ob-item svg { width: 22px; height: 22px; flex: none; }
  .ob-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* lamp: the "tubelight" over the active item, kept small and gold */
  .ob-item::before {
    content: ""; position: absolute; left: 28%; right: 28%; top: -11px; height: 4px;
    border-radius: 0 0 4px 4px; background: var(--gold);
    box-shadow: 0 3px 12px 2px rgba(242, 184, 75, 0.55); opacity: 0; transition: opacity 0.3s;
  }
  .ob-item.is-active { background: linear-gradient(rgba(242, 184, 75, 0.2), rgba(242, 184, 75, 0) 85%); color: var(--gold); }
  .ob-item.is-active::before { opacity: 1; }
  .ob-bolt { background: var(--gold); color: var(--ink); box-shadow: 0 0 16px rgba(242, 184, 75, 0.35); }
  .ob-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
  .ob-bolt:focus-visible { outline-color: var(--cream); }
  body { scroll-padding-bottom: var(--ob-h); }
  .main-footer { padding-bottom: calc(2em + var(--ob-h)); }
  .ptag[data-hide-mobile] { display: none; } /* the phone crop shows no separate salad bowl: do not point at the side dish */
}
@media (prefers-reduced-motion: reduce) {
  .mf-cursor, .mf-tab, .mf-photo img, .mf-card, .mf-order::after, .ob-item, .ob-item::before { transition: none; }
  .mf-card:focus-within .mf-photo img, .mf-card:hover .mf-photo img { transform: none; }
  .mf-order:hover::after, .mf-order:focus-visible::after { transform: none; }
}