/* ============================================================================
   food.gr — overrides ΔΙΑΤΑΞΗΣ για /delivery, /delivery/<slug> και
   /delivery/category/<slug>. 26/09/2026.

   ΦΟΡΤΩΝΕΤΑΙ ΜΟΝΟ ΣΕ ΑΥΤΕΣ ΤΙΣ ΤΡΕΙΣ ΔΙΑΔΡΟΜΕΣ, από τα `seo_tags` blocks του
   _inject_dynamic_seo() (api.py γρ. 6111 λίστα, 6139 κατηγορία, 6211 κατάστημα).
   Καμία άλλη σελίδα του food.gr δεν το βλέπει.

   ΓΙΑΤΙ CSS ΚΑΙ ΟΧΙ REACT: το bundle index-BYzJbzEM.js (12/09) είναι το ζωντανό
   σε 7.496 ευρετηριασμένες σελίδες· το package-lock.json ΛΕΙΠΕΙ και το
   node_modules είναι κενό. Απόφαση ιδιοκτήτη: ΧΩΡΙΣ rebuild.

   ΧΡΩΜΑΤΑ ΚΑΙ ΓΡΑΜΜΑΤΟΣΕΙΡΕΣ ΔΕΝ ΑΛΛΑΖΟΥΝ — απόφαση ιδιοκτήτη. Μένει η παλέτα
   #FF6B35 / #202124 / #5F6368 / #E8EAED / #FAFAFA και DM Sans / Plus Jakarta.

   ⚠ Η ΚΛΑΣΗ `max-w-[1440px]` ΕΙΝΑΙ ΚΟΙΝΗ ΣΤΙΣ ΤΡΕΙΣ ΣΕΛΙΔΕΣ, αλλά οι δομές
   διαφέρουν: στο ΚΑΤΑΣΤΗΜΑ ο container είναι `flex gap-6` με `> aside`· στη
   ΛΙΣΤΑ απλό block με `> div.mt-10.pt-8.border-t`. Κάθε κανόνας δένεται με
   :has() στη ΣΩΣΤΗ δομή — σκέτο `display:grid` θα έσπαγε τη σελίδα καταστήματος.

   ΟΛΕΣ ΟΙ ΑΓΚΥΡΕΣ ΜΕΤΡΗΘΗΚΑΝ (εμφανίσεις στο component):
     max-w-[1440px] 1 · hidden lg:block 1 · w-[220px] flex-shrink-0 1
     mt-10 pt-8 border-t 1 · το hero card και τα δύο μισά του 1 έκαστο
     flex-1 min-w-0 2 → δένεται ΠΑΝΤΑ ως άμεσο παιδί.
   ΔΕΝ ΥΠΑΡΧΕΙ <main> σε κανένα component (0 εμφανίσεις).

   ── ΙΣΤΟΡΙΚΟ ΔΙΟΡΘΩΣΕΩΝ (ίδια μέρα) ──────────────────────────────────────
   1η γραφή: selectors `main > …` → νεκροί, δεν υπάρχει <main>.
   2η γραφή: κανόνες ΜΟΝΟ για <1023px και >1440px → στα **1024-1439px, που
             είναι το συνηθισμένο desktop, δεν άλλαζε ΤΙΠΟΤΑ** στη σελίδα
             καταστήματος. Γι' αυτό προστέθηκε το Α3.
   ΑΝΑΙΡΕΣΗ: αφαίρεση των τριών γραμμών <link> από το api.py.
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   ΜΕΡΟΣ Α — ΣΕΛΙΔΑ ΚΑΤΑΣΤΗΜΑΤΟΣ  /delivery/<slug>
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Α1. ΤΟ SIDEBAR ΦΑΙΝΕΤΑΙ ΚΑΙ ΣΕ ΚΙΝΗΤΟ (<1024px) ─────────────────────
   ΤΙ ΗΤΑΝ: <aside class="hidden lg:block w-[220px] flex-shrink-0">. Το
   `.hidden{display:none}` ισχύει παντού, το `.lg\:block` μόνο μέσα σε
   @media(min-width:64rem) — άρα κάτω από 1024px το «Πρόσφατα» ΔΕΝ φαινόταν.

   ΟΡΙΟ ΠΟΥ ΤΟ CSS ΔΕΝ ΠΕΡΝΑΕΙ: `{sidebarVisits.length > 0 && (<aside …>)}` —
   χωρίς ιστορικό το <aside> ΔΕΝ υπάρχει στο DOM. */
@media (max-width: 63.999rem) {
  .max-w-\[1440px\]:has(> aside.hidden.lg\:block) {
    flex-direction: column;
  }

  aside.hidden.lg\:block {
    display: block;
    width: 100%;
    max-width: none;
  }

  /* Οριζόντια λωρίδα: κουτί 220px δίπλα στο κείμενο δεν χωράει σε οθόνη 390px.
     Δομή: aside > div.sticky > [ a, div.flex, div.space-y-1.5 ] */
  aside.hidden.lg\:block > div > div:last-child {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  aside.hidden.lg\:block > div > div:last-child > a {
    flex: 0 0 auto;
    width: 152px;
  }

  /* Ο σύνδεσμος επιστροφής διπλασιάζεται με το «mobile» αντίγραφο. */
  aside.hidden.lg\:block > div > a[href="/delivery"] {
    display: none;
  }
  aside.hidden.lg\:block > div.sticky {
    position: static;
  }
}

/* ── Α3. DESKTOP 1024px+ : ΤΟ ΚΕΝΟ ΠΟΥ ΕΙΧΑ ΑΦΗΣΕΙ ──────────────────────────
   Εδώ δεν υπήρχε ΚΑΝΕΝΑΣ κανόνας, γι' αυτό «δεν φαινόταν τίποτα».

   α) Το hero card μοιράζει φωτό/κείμενο 50/50 (`sm:w-1/2` και στα δύο). Σε
      1280px το κείμενο παίρνει ~570px, και ονόματα σαν «Artοποιώ Bakery -
      Pastry Shop» στα 48px (`sm:text-5xl`) σπάνε σε τρεις γραμμές. Η φωτό δεν
      κερδίζει τίποτα από το μισό πλάτος — είναι πηγή 408px, δηλαδή
      μεγεθύνεται. 42/58 δίνει τον χώρο στο κείμενο και αφήνει τη φωτό στο
      φυσικό της μέγεθος.
   β) Το sidebar 220px κόβει ονόματα καταστημάτων· 248px με μικρογραφία 44px
      (από 36px) το κάνει αναγνώσιμο χωρίς να φάει από το κέντρο. */
@media (min-width: 64rem) {
  /* α) αναλογία hero — και οι δύο άγκυρες μετρήθηκαν μοναδικές */
  .rounded-xl.border.bg-white.mb-6 > .flex.flex-col > .w-full.sm\:w-1\/2.self-start {
    width: 42%;
  }
  .rounded-xl.border.bg-white.mb-6 > .flex.flex-col > .flex.flex-col.justify-center.sm\:w-1\/2 {
    width: 58%;
  }

  /* β) sidebar λίγο πλατύτερο, μικρογραφίες μεγαλύτερες */
  aside.hidden.lg\:block.w-\[220px\] {
    width: 248px;
  }
  aside.hidden.lg\:block .w-9.h-9 {
    width: 44px;
    height: 44px;
  }
}

/* ── Α2. ΑΝΑΓΝΩΣΙΜΟΤΗΤΑ ΤΟΥ ΚΕΝΤΡΟΥ ΣΕ ΕΥΡΕΙΑ ΟΘΟΝΗ (1440px+) ────────────
   Στις 1920px οι παράγραφοι του «Τι λέει ο κόσμος» και του κειμένου γειτονιάς
   ξεπερνούσαν τους 120 χαρακτήρες ανά γραμμή. Περιορίζεται ΜΟΝΟ τρεχούμενο
   κείμενο — κάρτες, hero και πλέγματα κρατούν όλο το πλάτος. */
@media (min-width: 90rem) {
  .max-w-\[1440px\] > .flex-1.min-w-0 > div > p,
  .max-w-\[1440px\] > .flex-1.min-w-0 > div > div > p {
    max-width: 82ch;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΜΕΡΟΣ Β — ΛΙΣΤΑ  /delivery
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Β1. ΤΟ «ΠΡΟΣΦΑΤΑ» ΓΙΝΕΤΑΙ ΑΡΙΣΤΕΡΟ SIDEBAR ΣΕ DESKTOP ───────────────
   ΤΙ ΗΤΑΝ: στη λίστα το «Πρόσφατα» είναι ΤΕΛΕΥΤΑΙΟ block της σελίδας, κάτω από
   το πλέγμα κατηγοριών — δηλαδή μόνο μετά από κύλιση. Στη σελίδα καταστήματος
   είναι αριστερό sidebar. Ασυνέπεια.

   ΓΙΑΤΙ ΜΕ :has(): η ίδια κλάση container υπάρχει και στη σελίδα καταστήματος,
   που είναι flex-row. Χωρίς τη διάκριση, το display:grid θα την έσπαγε.
   Χωρίς ιστορικό το block δεν υπάρχει → το :has() αποτυγχάνει → ο container
   μένει block. Ομαλή υποβάθμιση. */
@media (min-width: 64rem) {
  .max-w-\[1440px\]:has(> div.mt-10.pt-8.border-t) {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .max-w-\[1440px\]:has(> div.mt-10.pt-8.border-t) > * {
    grid-column: 2;
    min-width: 0;
  }

  .max-w-\[1440px\]:has(> div.mt-10.pt-8.border-t) > div.mt-10.pt-8.border-t {
    grid-column: 1;
    grid-row: 1 / span 99;
    /* mt-10/pt-8/border-t υπηρετούσαν διαχωρισμό ΚΑΤΩ από το πλέγμα. */
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* Η λίστα μέσα στο sidebar: από grid-cols-2…6 σε μία στήλη. */
  .max-w-\[1440px\]:has(> div.mt-10.pt-8.border-t) > div.mt-10.pt-8.border-t > div:last-child {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΜΕΡΟΣ Γ — ΚΟΙΝΑ ΣΤΙΣ ΤΡΕΙΣ ΣΕΛΙΔΕΣ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Γ1. ΑΠΟΣΤΑΣΕΙΣ ΣΕ ΚΙΝΗΤΟ (<768px) ───────────────────────────────────
   px-8 = 32px αριστερά+δεξιά. Σε οθόνη 390px αφήνει 326px· στα 16px το
   κείμενο κερδίζει 32px πλάτος χωρίς να ακουμπά στην άκρη. */
@media (max-width: 48rem) {
  .max-w-\[1440px\] {
    padding-left: 16px;
    padding-right: 16px;
  }
}