/* ==========================================================================
   Menu page (/menu/): tabs, item lists, order section.
   Template classes (menu_*) keep their base styles; everything prefixed sl- / order_ is new.
   ========================================================================== */

.sl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Tabs (5 categories instead of the template's 4) ---------- */
.menu_tabs { scroll-margin-top: 1.25rem; }
.menu_tabs-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.menu_link { cursor: pointer; padding: 1.05rem 1rem 1.1rem; line-height: 1.2; text-align: center; }
.menu_link:focus-visible { outline: 2px dashed var(--brand); outline-offset: 5px; }
.menu_tabs-content { overflow: visible; }

/* ---------- Pane header ---------- */
.sl-pane_head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 2.5rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px dashed var(--grey--400); }
.sl-pane_title-wrap { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.sl-pane_icon { width: 4rem; height: 4rem; object-fit: contain; flex: none; }
.sl-pane_icon--grill { transform: translateX(0.4rem) scale(1.2); }
.sl-pane_icon--drinks { transform: scale(1.12); }
.sl-pane_title { color: #fff; font-size: 4rem; line-height: 0.9; }
.sl-pane_intro { margin: 0; max-width: 30rem; font-family: var(--_typography---font-family--detail); font-weight: 700; font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.01em; color: var(--brand); text-align: right; text-wrap: balance; }

/* ---------- Item cards ----------
   One component for every item: the template's dashed block with a picture box (fixed 4:3, the picture covers it) on the
   left, then name + badges, description, availability note and the price(s) pinned to the bottom.
   Two arrangements of the same markup:
   · wide card (default): picture | everything else in one column. .menu_infos and .sl-top are display:contents, so name,
     description, note and price are placed straight on the card's grid (the price row takes the spare height).
   · compact card (phones, and the two-column tablet grid): picture | .sl-top (name + price), then description + note
     underneath at full width, so narrow cards do not squeeze the description into a sliver. */
.sl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sl-item { display: flex; min-width: 0; }
.sl-card { --pic: 12.5rem; flex: 1; min-width: 0; padding: 0.75rem; transition: border-color 0.2s, background-color 0.2s; }
.sl-card:hover { border-color: var(--brand); background-color: #ffffff08; }
.sl-card .menu_block-content { display: grid; grid-template-columns: var(--pic) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "pic head" "pic desc" "pic note" "pic price"; gap: 0 1.25rem; flex: 1; align-self: stretch; width: 100%; }
.sl-card .menu_infos, .sl-top { display: contents; }

/* picture box */
.sl-pic { grid-area: pic; align-self: start; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--_sizes---border-radius--xsmall); background-color: #262d35; }
.sl-pic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); pointer-events: none; }
.sl-pic_img { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: 50% 50%; }
/* Sloppy's product photos are 16:9 with the product in the middle of a wide marble margin: the 4:3 box keeps the whole
   plate / board (a long sandwich keeps both ends) and a slight zoom brings the food closer. Every product: the single
   pieces on their paper too: is centred in its frame (it spans about 21%-79% of the width; the box shows 16.5%-83.5%),
   so the crop stays centred. (The dip tubs fill their frame already: no zoom in the chips.) */
.sl-card .sl-pic--own .sl-pic_img { transform: scale(1.12); }
/* no picture: a small "chalkboard" with the chalk icon of the category (the photo-less tile of the home page) */
.sl-pic--tile { display: flex; justify-content: center; align-items: center; background-color: #232121; background-image: radial-gradient(circle at 78% 18%, rgba(25, 179, 138, 0.22), rgba(25, 179, 138, 0) 46%), linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 60%); }
.sl-pic_icon { width: 52%; height: 64%; object-fit: contain; transform: rotate(-8deg); opacity: 0.95; }
.sl-pic_icon.is-icon-skewer { width: 62%; height: 76%; }
.sl-pic_icon.is-icon-hotdog { width: 58%; height: 70%; }
.sl-pic_icon.is-icon-leaf { filter: brightness(0) invert(1); }

/* text */
.sl-head { grid-area: head; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; min-width: 0; padding-top: 0.3rem; }
.sl-card .menu_name { color: #fff; font-size: 1.3125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-transform: none; }
.sl-desc { grid-area: desc; margin: 0.45rem 0 0; color: var(--grey--200); font-size: 0.9688rem; line-height: 1.45; }
.sl-note { margin: 0; display: flex; align-items: center; gap: 0.35rem; color: #9c978d; font-size: 0.8125rem; line-height: 1.3; }
.sl-card .sl-note { grid-area: note; margin-top: 0.5rem; }
.sl-card .sl-note::before { content: ""; flex: none; width: 0.85rem; height: 0.85rem; background: url(../img/ui/pin.svg?v=4e0bf4ee15) center / contain no-repeat; opacity: 0.9; }

/* price(s). Sized items: one small labelled column per size ("Μικρό" over 5,50€ | "Μεγάλο" over 7,50€): a block that
   is narrow enough for every card width, so prices never wrap. */
.sl-price { grid-area: price; align-self: end; display: flex; align-items: flex-end; gap: 1.1rem; margin-top: 0.85rem; padding-bottom: 0.2rem; white-space: nowrap; }
.sl-price_line { display: inline-flex; align-items: baseline; gap: 0.45rem; }
.sl-price--sized .sl-price_line { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.sl-price_val { font-family: var(--_typography---font-family--primary); font-size: 1.875rem; line-height: 0.85; color: var(--brand); letter-spacing: 0.01em; }
.sl-price_label { font-size: 0.6875rem; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey--200); }

.sl-badge { display: inline-flex; align-items: center; padding: 0.22rem 0.55rem 0.2rem; border: 1px solid transparent; border-radius: 3rem; font-size: 0.6563rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.sl-badge--popular { background-color: var(--brand); color: var(--ink); }
.sl-badge--signature { background-color: #fff; color: var(--ink); }
.sl-badge--smash { border-color: var(--brand); color: var(--brand); }

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .sl-card { --pic: 9.75rem; }
  .sl-card .menu_block-content { column-gap: 1rem; }
  .sl-card .menu_name { font-size: 1.1875rem; }
  .sl-desc { font-size: 0.9375rem; }
  .sl-price_val { font-size: 1.75rem; }
}

/* compact card: two columns of them on tablets, one on phones */
@media screen and (min-width: 768px) and (max-width: 991px), screen and (max-width: 479px) {
  .sl-card { padding: 0.7rem; }
  .sl-card .menu_block-content { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "pic top" "desc desc" "note note"; align-content: start; column-gap: 0.85rem; }
  /* name on top, price at the bottom: level with the bottom of the picture */
  .sl-top { grid-area: top; display: flex; flex-direction: column; min-width: 0; }
  .sl-head { gap: 0.35rem 0.45rem; padding-top: 0.1rem; }
  .sl-card .menu_name { font-size: 1.125rem; line-height: 1.18; }
  .sl-desc { margin-top: 0.7rem; padding: 0 0.15rem; font-size: 0.9375rem; line-height: 1.4; }
  .sl-desc--brief { margin-top: 0.3rem; padding: 0; }
  .sl-card .sl-note { margin-top: 0.45rem; padding: 0 0.15rem; }
  .sl-price { align-self: flex-start; gap: 0.9rem; margin-top: auto; padding: 0.5rem 0 0; }
  .sl-price_val { font-size: 1.75rem; }
  .sl-price--sized .sl-price_line { gap: 0.3rem; }
  .sl-price--sized .sl-price_label { font-size: 0.625rem; }
}

/* ---------- Groups (sub-headings inside a pane) ---------- */
.sl-group { margin-top: 2.75rem; }
.sl-pane_head + .sl-group { margin-top: 0; }
.sl-group_head { display: flex; align-items: center; gap: 1.25rem; }
.sl-group_title { flex: none; max-width: 100%; color: var(--brand); font-family: var(--_typography---font-family--primary); font-size: 2.5rem; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: uppercase; }
.sl-group_rule { flex: 1; height: 0; border-top: 1px dashed var(--grey--400); }
.sl-group_note { margin: 0.35rem 0 0; color: var(--grey--200); font-size: 1rem; line-height: 1.45; max-width: 62rem; }
.sl-group_body > .menu_wrapper, .sl-group_body > .sl-compact, .sl-group_body > .sl-chips { margin-top: 1.25rem; }

/* compact "name … price" lists */
.sl-compact { display: block; padding: 1.25rem 1.75rem; }
.sl-compact_list { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 3rem; }
.sl-compact_item { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; break-inside: avoid; color: #fff; font-size: 1.0625rem; line-height: 1.3; }
.sl-compact_name { font-weight: 500; }
.sl-compact_dots { flex: 1; min-width: 1rem; border-bottom: 1px dashed var(--grey--400); transform: translateY(-0.25em); }
.sl-compact_price { font-family: var(--_typography---font-family--primary); font-size: 1.5rem; line-height: 0.9; color: var(--brand); letter-spacing: 0.01em; white-space: nowrap; }
.sl-star { color: var(--brand); margin-left: 0.15em; }
.sl-compact_note { margin-top: 0.75rem; }

/* photo chips (dips): picture, name, price */
.sl-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sl-chip { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0.5rem; border: 1px dashed var(--grey--400); border-radius: var(--_sizes---border-radius--xsmall); transition: border-color 0.2s, background-color 0.2s; }
.sl-chip:hover { border-color: var(--brand); background-color: #ffffff08; }
.sl-chip_text { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.75rem; padding: 0.65rem 0.3rem 0.2rem; }
.sl-chip_name { min-width: 0; color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.sl-chip_price { flex: none; font-family: var(--_typography---font-family--primary); font-size: 1.5rem; line-height: 0.9; color: var(--brand); letter-spacing: 0.01em; white-space: nowrap; }
/* the legend of the asterisk: last cell of the grid, as wide as what is left of the last row */
.sl-chips_note { grid-column: var(--f5); display: flex; align-items: flex-end; min-width: 0; margin: 0; padding: 0.5rem 0.3rem 0.75rem; }
@media screen and (max-width: 1199px) {
  /* narrower chips: name on top, price underneath (pinned to the bottom, so a row of chips lines up) */
  .sl-chip_text { flex-direction: column; align-items: flex-start; }
}

/* group with a photo (soft drinks) */
.sl-group--media { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1rem 2rem; align-items: stretch; }
.sl-group_media { position: relative; min-height: 16rem; border: 1px dashed var(--grey--400); border-radius: var(--_sizes---border-radius--xsmall); padding: 0.75rem; }
.sl-group_img { position: absolute; inset: 0.75rem; width: calc(100% - 1.5rem); height: calc(100% - 1.5rem); object-fit: cover; object-position: 50% 78%; border-radius: var(--_sizes---border-radius--xsmall); }
.sl-group--media .sl-compact_list { columns: 2; }

/* ---------- Pane footer: jump to the other categories ---------- */
.sl-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 0.75rem; margin-top: 2.75rem; }
.sl-more_label { font-family: var(--_typography---font-family--detail); font-weight: 700; font-size: 1rem; color: var(--grey--200); margin-right: 0.35rem; }
.sl-more_link { padding: 0.45rem 1rem 0.5rem; border: 1px dashed var(--grey--300); border-radius: 3rem; color: #fff; font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-decoration: none; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.sl-more_link:hover, .sl-more_link:focus-visible { border-color: var(--brand); border-style: solid; background-color: var(--brand); color: var(--ink); outline: none; }

.sl-menu_note { margin: 2rem 0 0; max-width: 40rem; color: #9c978d; font-size: 0.875rem; line-height: 1.45; text-align: center; }

/* ---------- Order section (replaces the template's testimonials) ---------- */
.section_order { position: relative; background-color: var(--brand); color: var(--ink); }
.order_component { display: flex; flex-direction: column; align-items: center; text-align: center; }
.order_lead { margin: 1.5rem 0 0; max-width: 44rem; font-size: 1.25rem; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.order_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; width: 100%; max-width: 78rem; margin: 0; padding: 0; list-style: none; }
.order_card { display: flex; flex-direction: column; align-items: center; padding: 2.25rem 1.5rem 2rem; background-color: #fff; border: 2px solid var(--ink); border-radius: 1.5rem; box-shadow: 0.35rem 0.35rem 0 var(--ink); transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
.order_card._1 { transform: rotate(-2deg); }
.order_card._2 { transform: rotate(1.5deg) translateY(1.25rem); background-color: var(--paper); }
.order_card._3 { transform: rotate(-1.25deg); }
.order_card._4 { transform: rotate(2deg) translateY(1rem); background-color: var(--paper); }
.order_card:hover { transform: rotate(0deg) scale(1.03); }
.order_name { font-family: var(--_typography---font-family--primary); font-size: 3rem; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; }
.order_addr { margin: 0.6rem 0 0; font-size: 1.0625rem; font-weight: 600; }
.order_hours { margin: 0.25rem 0 0; font-size: 0.9063rem; line-height: 1.4; color: #4a4741; }
.order_hours span { display: block; }
.order_phone { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 1.25rem; color: var(--ink); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; text-decoration: none; white-space: nowrap; }
.order_phone span { border-bottom: 2px dashed transparent; transition: border-color 0.2s; }
.order_phone:hover span { border-bottom-color: var(--ink); }
.order_phone-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.order_btn { margin-top: 1.25rem; min-width: 9rem; text-align: center; }
.order_btn-label { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.order_btn-arrow { width: 0.55em; height: 0.55em; flex: none; transform: translateY(-0.08em); }
.order_btn .button_bite-1, .order_btn .button_bite-2 { color: #fff; }
.order_card._2 .order_btn .button_bite-1, .order_card._2 .order_btn .button_bite-2,
.order_card._4 .order_btn .button_bite-1, .order_card._4 .order_btn .button_bite-2 { color: var(--paper); }
.order_all .button_bite-1, .order_all .button_bite-2 { color: var(--brand); }
.order_all { padding-left: 2.5rem; padding-right: 2.5rem; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media screen and (max-width: 991px) {
  /* the header is sticky here (nav-mobile.css, 5-5.5rem tall): a deep link / "Δες και" jump must stop below it */
  .menu_tabs { scroll-margin-top: 6.5rem; }
  /* two rows of pills: the two long labels on top, the three short ones below */
  .menu_tabs-menu { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; width: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; }
  .menu_tabs-menu .menu_link { grid-column: span 2; }
  .menu_tabs-menu .menu_link:nth-child(-n + 2) { grid-column: span 3; }

  .sl-pane_head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .sl-pane_title { font-size: 3.25rem; }
  .sl-pane_intro { max-width: none; text-align: left; text-wrap: wrap; }
  .sl-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
  .sl-chips_note { grid-column: var(--f4); }
  .sl-compact_list { columns: 2; }
  /* photo group: stacked (photo band on top, list in 2 columns): beside a 14-row single-column list the photo became a sliver */
  .sl-group--media { grid-template-columns: minmax(0, 1fr); }
  .sl-group_media { min-height: 0; aspect-ratio: 2 / 1; }
  .sl-group_img { object-position: 50% 60%; }
  .sl-group--media .sl-compact_list { columns: 2; }

  .order_list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .order_card, .order_card._1, .order_card._2, .order_card._3, .order_card._4 { transform: none; }
  .order_card:hover { transform: none; }
  .order_card { box-shadow: 0.25rem 0.25rem 0 var(--ink); }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 767px) {
  .menu_tabs { scroll-margin-top: 6rem; }
  .menu_link { padding: 0.8rem 0.5rem 0.85rem; font-size: 1.125rem; }
  .sl-pane_head { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
  .sl-pane_title-wrap { gap: 0.9rem; }
  .sl-pane_icon { width: 3rem; height: 3rem; }
  .sl-pane_title { font-size: 2.75rem; }
  .sl-pane_intro { font-size: 1rem; }
  .sl-group { margin-top: 2.25rem; }
  .sl-group_title { font-size: 2.125rem; }
  .sl-list { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .sl-group_media { aspect-ratio: 3 / 2; }
  .sl-group_img { object-position: 50% 75%; }
  .order_lead { font-size: 1.125rem; }
  .order_name { font-size: 2.5rem; }
}

/* large phones / small tablets: one column of wide cards */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .sl-card { --pic: clamp(10.5rem, 31vw, 13rem); }
  .sl-card .menu_block-content { column-gap: 1.125rem; }
}

@media screen and (max-width: 639px) {
  .sl-compact_list, .sl-group--media .sl-compact_list { columns: 1; }
  .sl-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-chips_note { grid-column: var(--f3); }
}

/* soft drinks (long names): where two columns would be too narrow: beside the photo on small desktops, and on
   large phones: most names wrapped onto a second line: one column there */
@media screen and (min-width: 992px) and (max-width: 1199px), screen and (min-width: 640px) and (max-width: 767px) {
  .sl-group--media .sl-compact_list { columns: 1; }
}

@media screen and (max-width: 479px) {
  .menu_tabs-menu { gap: 0.5rem; }

  .sl-chips { gap: 0.5rem; }
  .sl-chips_note { padding: 0.25rem 0.5rem 0.6rem; }
  .sl-chip { padding: 0.375rem; }
  .sl-chip_text { padding: 0.5rem 0.2rem 0.2rem; }
  .sl-chip_name { font-size: 0.875rem; line-height: 1.2; }
  .sl-chip_price { font-size: 1.375rem; }

  .sl-group_media { aspect-ratio: 1; }
  .sl-group_img { object-position: 50% 73%; }

  .sl-compact { padding: 0.9rem 1.05rem; }
  .sl-compact_item { font-size: 1rem; padding: 0.45rem 0; }
  .sl-more { justify-content: flex-start; gap: 0.5rem; margin-top: 2rem; }
  .sl-more_link { padding: 0.42rem 0.8rem 0.46rem; }
  .sl-more_label { width: 100%; }

  .order_list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .order_card { padding: 1.75rem 1.25rem 1.6rem; }
}

@media screen and (max-width: 359px) {
  .sl-card .menu_block-content { column-gap: 0.7rem; }
  .sl-card .menu_name { font-size: 1.0625rem; }
  .sl-price { gap: 0.7rem; }
  .sl-price_val { font-size: 1.5625rem; }
  .sl-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-chips_note { grid-column: var(--f2); }
}