/* ============================================================
   cucina.gr — Responsive layer (SANDBOX deliverable)
   Φορτώνεται ΜΕΤΑ το base CSS. Desktop (>=1025px) μένει AS IS.
   Tiers:  phone <=600  ·  tablet 601-1024  ·  compact (burger) <=1024
   ============================================================ */

.burger-btn, .nav-backdrop { display: none; }

/* =====================================================================
   COMPACT LAYER — phone + tablet (<= 1024px): burger + reflow + no overflow
   ===================================================================== */
@media screen and (max-width: 1024px) {

  /* --- box model + καθολικό cap πλάτους (σκοτώνει όλα τα legacy fixed widths) --- */
  .page-container, .page-container * { box-sizing: border-box; max-width: 100%; }
  /* overflow-x:clip (όχι hidden): το hidden κάνει το overflow-y του body -> auto (spec), το body
     αποκτά δικό του scrollbar και στενεύει (width 345 αντί 360) -> ασύμμετρο margin. Το clip κόβει
     χωρίς scroll container. (max-width:100% caps παντού απoτρέπουν ούτως ή άλλως h-overflow.) */
  html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; }

  /* --- δομικές στήλες full-width, χωρίς float --- */
  .page-container, .header, .header-top, .header-middle,
  .main, .main-content, .main-subcontent, .footer {
    width: 100% !important; min-width: 0; float: none;
  }
  .main { background: #ffffff !important; }         /* διώχνει την πράσινη nav-band bg */
  .page-container { margin: 0 !important; border: 0 !important; }  /* base: 1000px + margin:auto + border */
  .sitename, .sitename h1, .sitename h2 { width: auto !important; }
  img, object, embed, iframe { max-width: 100% !important; height: auto; }

  /* --- reset positioning σε μετακινημένα/cloned κομμάτια (drawer, affiliated) --- */
  .drawer-extra, .drawer-extra *,
  .affiliated-moved, .affiliated-moved * {
    position: static !important; float: none !important;
    left: auto !important; right: auto !important; top: auto !important;
    width: auto !important; max-width: 100% !important;
  }

  /* --- Header + burger --- */
  .header-top { position: relative; min-height: 56px; padding: 8px 62px 8px 12px; }
  .sitename h1 { font-size: 22px; margin: 0; line-height: 1.2; }
  .header-top .nav0, .header-top .nav1 { display: none; }   /* -> drawer */
  /* Burger — 3-line icon (Clean Light), vertically centered με το logo, X animation */
  .burger-btn {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    position: absolute; top: 50%; right: 20px; margin-top: 10px; transform: translateY(-50%);
    width: 40px; height: 40px; padding: 0;                 /* == logo icon 40x40, κεντραρισμένο κάτω με το logo */
    background: #5a8f00; border: none; border-radius: 8px; cursor: pointer; z-index: 1001;
  }
  .burger-btn span {
    display: block; width: 20px; height: 3px; border-radius: 3px;
    background: #fff; transition: transform .25s ease, opacity .2s ease;
  }
  /* Όταν ανοίγει το drawer, κρύβουμε το burger — κλείσιμο μόνο με το ✕ του drawer (ή backdrop). */
  body.nav-open .burger-btn { display: none !important; }

  /* --- Banner full-width --- */
  /* base .header-middle: height:150px fixed -> όταν το banner μικραίνει, φαίνεται το πράσινο
     background κάτω. Auto ύψος ώστε το container να μικραίνει μαζί με το banner. */
  .header-middle { height: auto !important; min-height: 0 !important; background: none !important; overflow: hidden; }
  .header-middle object, .header-middle embed, .header-middle img {
    width: 100% !important; height: auto !important; display: block;
  }

  /* --- Off-canvas drawer (Clean Light) --- */
  .main-navigation {
    position: fixed; top: 0; left: 0; height: 100%; width: 82%; max-width: 300px;
    margin: 0; padding: 0; background: #ffffff; box-shadow: 2px 0 18px rgba(0,0,0,.28);
    transform: translateX(-100%); transition: transform .25s ease; z-index: 1002; overflow-y: auto;
  }
  body.nav-open .main-navigation { transform: translateX(0); }
  .nav-backdrop {
    display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .25s; z-index: 1001;
  }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

  /* header «Μενού» + ✕ */
  .main-navigation .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; padding: 0 16px; background: #5a8f00; color: #fff; font-size: 18px; font-weight: 700;
    position: sticky; top: 0; z-index: 1;
  }
  .main-navigation .drawer-close { background: none; border: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; padding: 6px; }

  /* κρύψε τα legacy στοιχεία του base menu */
  .main-navigation h1.first, .main-navigation .round-border-topright { display: none !important; }
  .main-navigation #menu { margin: 0; padding: 0; background: none; }
  .main-navigation #menu ul { list-style: none; margin: 0; padding: 0; }
  .main-navigation #menu li { margin: 0; padding: 0; background: none; }
  .main-navigation #menu li:empty { display: none; }
  .main-navigation #menu li a {
    display: block; padding: 13px 16px !important; font-size: 15px; line-height: 1.3; color: #2a2a2a; text-decoration: none;
    /* ακύρωση base: height:16px, width:190px, green gif background */
    height: auto !important; width: auto !important; margin: 0 !important;
    background: none !important; background-image: none !important;
    border: none; border-bottom: 1px solid #eee; border-left: 4px solid transparent;
  }
  .main-navigation #menu li a:hover { background: #f6faef !important; border-left-color: #5a8f00; color: #3f6600; }
  .main-navigation #menu a span { display: none; }  /* base arrow */

  /* Leftover Skype block στο drawer (το affiliated μετακινήθηκε έξω) -> hide */
  .main-navigation .container31, .main-navigation [id^="SkypeButton"] { display: none !important; }

  /* leftover <br> πριν το affiliated -> +12px άνισο gap. Hide τα direct-child br. */
  .main-subcontent > br { display: none; }

  /* Όλα τα subcontent boxes (κεντρική: Νέα/Ξέρατε/Newsletter · detail: «Δείτε επίσης»
     blue/lightgreen/purple κλπ) γεμίζουν το track (base .subcontent-unit-border width:183px). */
  .main-subcontent [class*="subcontent-unit-border"]:not([class*="ImgContainer"]),
  .main-subcontent .affiliated-moved { width: 100% !important; box-sizing: border-box; margin: 0 0 10px !important;
    border-radius: 6px; overflow: hidden; }
  /* Legacy corner gifs (white triangle masks) — σπάνε όταν το box είναι 100%.
     Hide· το border-radius+overflow:hidden δίνει καθαρές rounded γωνίες. */
  .main-subcontent .round-border-topleft,
  .main-subcontent .round-border-topright { display: none !important; }
  /* «Δείτε επίσης» (detail): κεντράρισμα image + caption σε ΚΑΘΕ πλάτος (tablet 190px track &
     phone full-width box). Η αναδιοργάνωση (2026-09) έκανε τη δομή FLAT (blue/lightgreen/orange/green
     = siblings, ΟΧΙ nested) → scope μέσω .main-subcontent:has(.subcontent-unit-border-blue) [detail only·
     η κεντρική/rightbox δεν έχει -blue]. Το global `.main img{float:left;margin:…10px}` + inner-div
     `margin-left:5px` τα έβγαζαν off-center (δεξιά)· εδώ: text-align center + inner-div margins 0 + img float:none/auto. */
  .main-subcontent:has(.subcontent-unit-border-blue) [class*="subcontent-unit-border-"]:not([class*="ImgContainer"]) {
    text-align: center !important;
  }
  .main-subcontent:has(.subcontent-unit-border-blue) [class*="subcontent-unit-border-"] > div {
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .main-subcontent:has(.subcontent-unit-border-blue) [class*="subcontent-unit-border-"] img {
    float: none !important; display: block !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  /* caption `<p class="center">` έχει fixed width:160px + margin-left → κείμενο κεντρ. μέσα στα
     160 αλλά το p αριστερά. Full-width ώστε το text-align:center να το κεντράρει στο box. */
  .main-subcontent:has(.subcontent-unit-border-blue) [class*="subcontent-unit-border-"] p {
    width: auto !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center !important;
  }
  /* «See also» banners: auto-adaptive columns — 2-up όπου χωράει (phone full-width ~457px), 1-up στο
     narrow tablet sidebar (190px) & πολύ στενό phone. Το affiliated-moved spanάρει full-width. */
  .main-subcontent:has(.subcontent-unit-border-blue) {
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px; align-items: stretch;   /* stretch -> ίσο ύψος boxes ανά σειρά */
  }
  /* ο τίτλος (μετακινημένος έξω από το blue box) + το affiliated = full-width span */
  .main-subcontent:has(.subcontent-unit-border-blue) > h1.seealso-title,
  .main-subcontent:has(.subcontent-unit-border-blue) > .affiliated-moved { grid-column: 1 / -1; margin: 0 !important; }
  .main-subcontent:has(.subcontent-unit-border-blue) > [class*="subcontent-unit-border-"] { margin: 0 !important; }

  /* Affiliated box (mobile/tablet, κάτω από «Δείτε επίσης»/Newsletter): κεντράρισμα header + links */
  .main-subcontent .affiliated-moved,
  .main-subcontent .affiliated-moved ul,
  .main-subcontent .affiliated-moved li,
  .main-subcontent .affiliated-moved a { text-align: center !important; }
  .main-subcontent .affiliated-moved ul,
  .main-subcontent .affiliated-moved li {
    list-style: none !important; margin-left: 0 !important; padding-left: 0 !important;
  }

  /* Affiliated box = «unit» σαν τα υπόλοιπα (πορτοκαλί header, γκρι body) */
  .main-subcontent .affiliated-moved { padding: 0 0 8px; background: rgb(235, 235, 235); border: none; }
  .affiliated-moved .container31 { margin: 0 0 8px !important; padding: 4px 10px 3px; background: rgb(232, 177, 13); font-size: 15px; }
  .affiliated-moved .container31 .first31, .affiliated-moved .container31 .first32 { color: #fff !important; }
  .affiliated-moved .first2 { padding: 0 10px; }
  .affiliated-moved .first2 ul { list-style: none; margin: 0; padding: 0; }
  .affiliated-moved .first2 li { margin: 3px 0; background: none !important; }
  .affiliated-moved .first2 a { color: #5a8f00 !important; text-decoration: none; font-size: 13px; }
  .affiliated-moved .first2 a:hover { text-decoration: underline; }

  /* Πληροφορίες (top links) + σημαίες */
  .drawer-sec { padding: 14px 16px 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #5a8f00; font-weight: 700; }
  .drawer-extra { margin: 0; border: 0; padding: 0; }
  .drawer-extra ul { list-style: none; margin: 0; padding: 0; }
  .drawer-extra li { background: none !important; list-style: none; margin: 0; padding: 0; }
  .drawer-extra > ul > li > a { display: block; padding: 11px 16px; color: #555; text-decoration: none; font-size: 14px; background: none; border-bottom: 1px solid #f0f0f0; }
  .drawer-extra > ul > li > a:hover { background: #f6faef; color: #3f6600; }
  .drawer-flags { padding: 14px 16px; display: flex; gap: 14px; align-items: center; }
  .drawer-flags a { display: inline-block; opacity: .4; transition: opacity .15s; }
  .drawer-flags a.active { opacity: 1; }
  .drawer-flags a:hover { opacity: .8; }
  .drawer-flags img { width: 30px; height: auto; vertical-align: middle; border: 1px solid #e0e0e0; }
  .drawer-flags a.active img { border: 2px solid #5a8f00; box-shadow: 0 0 0 1px #5a8f00; }

  /* --- Content + right column (stacked base) --- */
  .main-content { padding: 12px; }
  /* base: .box5{height:336px} & .box3{width:558px} fixed -> σε στενά πλάτη το κείμενο
     ξεχειλίζει και το επόμενο box επικαλύπτει το readmore. Auto για να «αναπνέει». */
  .main-content .box5 { height: auto !important; overflow: visible; padding: 4px 14px !important; }  /* inner white space -> headings/photo δεν κολλάνε αριστερά */
  .main-content .box3 { width: auto !important; padding-left: 14px !important; padding-right: 14px !important; }
  /* Detail article container (class="box" — μόνο στις detail pages): inner side padding
     ώστε h2/h3/photo/κείμενο να μην κολλάνε αριστερά, όπως στην κεντρική. */
  .main-content .box  { padding-left: 14px !important; padding-right: 14px !important; }
  /* ΟΛΑ τα headings (h2/h3/h4) ξεκινούν λίγο δεξιότερα (indent 14px) όπως το intro .box.
     Base flush σε .custarticle κλπ. Στο .box τα headings indent-άρουν ήδη από το box padding
     → reset padding-left εκεί ώστε να μη διπλασιαστεί. */
  .main-content h2, .main-content h3, .main-content h4 { padding-left: 14px; }
  /* boxes που ΗΔΗ έχουν side padding (.box intro· .box5/.box3 list items) → reset heading padding
     ώστε το indent να έρχεται μόνο από το box (όχι διπλό). */
  .main-content .box h2,  .main-content .box h3,  .main-content .box h4,
  .main-content .box3 h2, .main-content .box3 h3, .main-content .box3 h4,
  .main-content .box5 h2, .main-content .box5 h3, .main-content .box5 h4 { padding-left: 0; }
  /* Σημ.: ο author εμφανιζόταν ως .box h4 (icust margin-top:-1em → overlap σε mobile). Αντικαταστάθηκε
     σε επίπεδο markup με <h3> (content files· βλ. MIGRATION.md), ώστε να στοιχίζεται με τους άλλους
     grey υπότιτλους χωρίς το negative-margin overlap. Δεν χρειάζεται ειδικός κανόνας εδώ. */
  /* Ίδιο διαθέσιμο πλάτος για ΟΛΕΣ τις παραγράφους: κάποιες έχουν legacy inline
     margin:0 50px 0 28px (στενότερες/μετατοπισμένες). Override σε base 15/10 (ίδιο με τα siblings,
     ευθυγραμμισμένο με τα headings @15). Εξαιρούνται οι INSPIRE-like (margin:0 0 0 Νpx) που θέλουμε centered. */
  .main-content .custarticle p:not([style*="margin:0 0 0"]):not([style*="margin: 0 0 0"]):not([style*="margin-left"]) {
    margin-left: 15px !important; margin-right: 10px !important;
  }
  /* Article body paragraphs: trim the base .box p side margins (icust 15/10) so the text column
     is wider — on tablet/phone the ~30px+ gutters (box padding + p margin) felt too big. Tablet
     gets a mild trim here; the ≤600 block below trims further for phone. */
  .main-content .box p { margin-left: 10px !important; margin-right: 8px !important; }
  /* blockquote.style4 = desktop pull-quote: 65x60px openquote3.gif at left + 70px padding to clear it
     (base "background-position: middle left" is invalid → icon actually sat top-left). Too deep on
     tablet/phone, so SHRINK the icon (background-size) and give just enough left padding to clear it —
     no text overlap, much less indent. text-indent reset (it stacked on top of the padding). */
  .main-content blockquote.style4, .main-content blockquote.style66 {
    padding-left: 44px !important; padding-right: 10px !important; text-indent: 0 !important;
    background-size: 30px auto !important; background-position: 8px 10px !important;
  }
  /* Collapse the legacy <br> spacer-run IMMEDIATELY after a floated icon (QR had 3 br's → big gap;
     contact2 had 1 leading br → text started a line too low). Element-adjacent (+) is whitespace-
     agnostic so it catches the run regardless of text nodes between the br's. Removes ONLY the br's
     right after the icon — intentional br's later in the block (contact2 Τ/E-mail/Site, which follow
     TEXT not the img) are kept. In ≤1024 so it also tidies the TABLET float layout (text/link flow
     cleanly beside the floated QR, desktop-like); on phone the icon is stacked (≤600). */
  .main-content img[style*="float"] + br,
  .main-content img[style*="float"] + br + br,
  .main-content img[style*="float"] + br + br + br,
  .main-content img[style*="float"] + br + br + br + br { display: none !important; }
  /* Registration-block intro span ("...βρείτε στο παρακάτω link :") uses a DOUBLE <br> before the
     link → a 2-line gap. Collapse the pair to one line on tablet/phone (hide the 2nd br); desktop
     (>1024) keeps the original double spacing. The span is identified by its templated inline
     negative top-margin (display:block; margin:-5px ...). Generalizes to these registration blocks. */
  .main-content span[style*="margin:-5px"] br + br { display: none !important; }
  /* …but 1 plain <br> left the link touching the line above; give a small controlled gap (less than
     the old double-br blank line, more than zero) via an inline-block top margin on the link. */
  .main-content span[style*="margin:-5px"] a { display: inline-block !important; margin-top: 9px !important; }
  /* Breathing room before the "Επικοινωνία"/contact block so it reads as a separate sub-section
     (after the registration link it sat only ~14px below). Targets the contact2 paragraph. */
  .main-content p:has(> img[src*="contact2"]) { margin-top: 20px !important; }
  /* STACK the big floated icons (QR / registration banners) on tablet+phone: floating them left on a
     narrow column leaves the short intro text top-aligned beside a much taller icon (looks un-centered)
     and pushes the link below. Stacking — icon centered on its own line, text full-width below — is clean
     and matches phone. EXCEPTION: contact2 (small 90px icon + longer text) balances fine beside, so it
     keeps floating left (next rule wins by specificity). margin-bottom:30 gives a gap under the icon. */
  .main-content img[style*="float"] {
    float: none !important; display: block !important;
    margin-left: auto !important; margin-right: auto !important; margin-bottom: 30px !important;
    max-width: 160px !important; height: auto !important;
  }
  .main-content p:has(> img[src*="contact2"]) img {
    float: left !important; display: inline !important; width: 90px !important; height: auto !important;
    margin: 2px 12px 6px 0 !important;
  }

  /* ── ARTICLE IMAGES — γενικός κανόνας για ΟΛΑ τα άρθρα (κεντράρισμα + graceful wrap) ──
     Base patterns: (1) div.*floatleftWrap = fixed 550px wrapper + float:left 250px imgs·
     (2) class στο ίδιο το <img> (single, μέσα σε classless div/anchor)· (3) legacy
     <div align="center"> με ασύμμετρα inline margins (…50px…28px) → off-center.
     Τα floats + fixed widths σπάνε <748px. Εδώ: containers κεντράρουν, imgs χωρίς float. */

  /* (1) THUMBNAIL-GRID via CSS Grid: auto-fit columns 200–280px, κεντραρισμένες. Μόνη σε σειρά →
     μεγαλώνει συμμετρικά ώς 280 (γεμίζει το διαθέσιμο κενό)· 2-up όταν χωράει· uniform στήλες
     (χωρίς το flex last-line quirk που άφηνε την τελευταία -6px off-center). */
  .main-content div.multiimagefloatleftWrap,
  .main-content div.sponsorimagefloatleftWrap {
    width: auto !important; float: none !important; margin: 0 0 12px !important;
    /* max=280px (ΟΧΙ 1fr): με 1fr η auto-fit ΔΕΝ collapse-άρει την κενή track (π.χ. 2 εικόνες → 3 tracks,
       κενό δεξιά)· με fixed max οι κενές tracks collapse & το justify-content:center κεντράρει το μπλοκ. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
    justify-content: center; align-items: start; gap: 8px;
  }
  .main-content div.multiimagefloatleftWrap > a,
  .main-content div.multiimagefloatleftWrap > img,
  .main-content div.sponsorimagefloatleftWrap > a,
  .main-content div.sponsorimagefloatleftWrap > img {
    margin: 0 !important; display: block; min-width: 0;
  }

  /* (2a) THUMBNAIL-GRID: οι εικόνες γεμίζουν τη στήλη αλλά cap στα 280px, κεντραρισμένες μέσα της
     (1 στήλη σε στενά → μεγαλώνουν ώς 280· 2-up σε ~≥420px → γεμίζουν τη στήλη). */
  .main-content div.multiimagefloatleftWrap img,
  .main-content div.sponsorimagefloatleftWrap img {
    float: none !important; clear: none !important; display: block !important;
    width: 100% !important; max-width: 280px !important; height: auto;
    margin-left: auto !important; margin-right: auto !important;
  }
  /* (2b) SINGLE εικόνα με class (ΟΧΙ μέσα σε wrapper) → full-width κεντραρισμένη */
  .main-content img[class*="floatleftWrap"] {
    float: none !important; clear: none !important; display: block !important;
    width: auto !important; max-width: 100% !important; height: auto;
    margin-left: auto !important; margin-right: auto !important;
  }

  /* (3) legacy <div align="center"> με εικόνες: μηδένισε τα ασύμμετρα inline margins + κεντράρισε */
  .main-content div[align="center"]:has(img) {
    margin-left: 0 !important; margin-right: 0 !important; text-align: center !important;
  }
  .main-content div[align="center"] img {
    float: none !important; display: inline-block !important; vertical-align: top;
    /* max-width αφήνει χώρο για τα 2×4px margins ώστε full-width εικόνα να ΜΗΝ ξεφεύγει δεξιά */
    max-width: calc(100% - 8px) !important; height: auto; margin: 4px !important;
  }

  /* (4) legacy <table> image galleries (<table> ή <table width="500px"> + spacer <td width=NN>&nbsp;):
     ΔΕΝ ήταν centered/responsive → ασύμμετρο κενό αριστερά/δεξιά. Fix = κεντράρισμα + kill fixed width
     + collapse spacer cells + responsive imgs. (Verified: image-tds ΠΟΤΕ δεν έχουν width → ασφαλές target·
     order-form tables δεν έχουν <img> → δεν πιάνονται.) */
  .main-content table:has(img) {
    width: auto !important; max-width: 100% !important;
    margin-left: auto !important; margin-right: auto !important;
  }
  /* collapse ΜΟΝΟ spacer cells (td με width αλλά ΧΩΡΙΣ img) — ΟΧΙ image cells (w500 variant = <td width="50%"><img>) */
  .main-content table:has(img) td[width]:not(:has(img)) { display: none !important; }
  .main-content table:has(img) td:has(img) { width: auto !important; }   /* neutralize %/px στα image cells */
  .main-content table:has(img) img {
    max-width: 100% !important; height: auto !important;
  }
  /* legacy content <p> με inline left-margin (π.χ. «INSPIRE YOUR PASSION» margin:0 0 0 215px)
     που «κεντράρει» στο desktop σπρώχνοντας δεξιά → σε mobile/tablet στριμώχνεται/σπάει κάθετα.
     Reset margin + text-align:center (κεντραρισμένο, όπως στο desktop). */
  .main-content p[style*="margin:0 0 0"],
  .main-content p[style*="margin: 0 0 0"],
  .main-content p[style*="margin-left"] { margin-left: 0 !important; margin-right: 0 !important; text-align: center !important; }

  /* Detail pages: μεγάλες εικόνες + order-form tables/inputs να χωράνε στο viewport */
  .main-content img { max-width: 100% !important; height: auto; }

  /* Lightbox: σε mobile/tablet το legacy popup παρακάμπτεται (native open σε νέα καρτέλα) μέσω JS
     (build-page.sh · unLightbox). Άρα δεν χρειάζεται CSS override για το #lightbox overlay εδώ. */

  /* Order form (FormOrderConsent κλπ): κράτα το 3-column desktop layout
     (label | input | (*)) αλλά RESPONSIVE — κάθε <tr> γίνεται flex row
     (αντί για τα legacy float-based fixed widths 68px/330px). */
  .main-content table { max-width: 100% !important; }
  .main-content form table { display: block; width: 100% !important; }
  .main-content form tbody { display: block; }
  .main-content form tr { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 6px; width: 100%; }
  .main-content form td { display: block; }
  /* full-width rows (header, recaptcha msg) */
  .main-content form td[colspan="3"], .main-content td.boxOrderForm { flex: 1 1 100% !important; }
  /* col1 = label (fixed) */
  .main-content td.boxOrderFormspan1 { flex: 0 0 74px; text-align: right; padding: 6px 2px 0 0 !important; margin: 0 !important; }
  /* col2 = input (fills) — και τα consent/info cells με inline width:330px */
  .main-content td.boxOrderFormSpan,
  .main-content form td[style*="330px"] { flex: 1 1 auto !important; min-width: 0; width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; }
  /* col3 = (*) / (max chars=…) / bare td — FIXED πλάτος ώστε ΟΛΑ τα inputs ίδιο μέγεθος */
  .main-content form tr > td:nth-child(3):not([colspan="3"]) { flex: 0 0 86px; text-align: left; font-size: 11px; line-height: 1.3; padding: 6px 0 0 2px !important; margin: 0 !important; }
  .main-content .boxOrderFormIBox    { width: 100% !important; box-sizing: border-box; margin: 3px 0 !important; }
  /* Non-table forms (π.χ. NewsletterContactForm): οι σειρές είναι <div> (όχι <tr>) —
     label (div.boxOrderFormspan1) + input (div.boxOrderFormSpan) στην ΙΔΙΑ σειρά, όπως desktop. */
  .main-content form > div:has(> .boxOrderFormspan1) { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 6px; width: 100%; }
  .main-content div.boxOrderFormspan1 { flex: 0 0 74px; text-align: right; padding: 6px 2px 0 0 !important; margin: 0 !important; }
  .main-content div.boxOrderFormSpan  { flex: 1 1 auto !important; min-width: 0; width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; }
  /* «Όροι» consent legal text: στο desktop είναι 10px (fine-print) αλλά τα mobile rules το κάνουν
     16px (τεράστιο). Μικρό font όπως desktop. Στόχος: το consent span + το cell του (width:330px). */
  .main-content form td[style*="330px"],
  .main-content form span[style*="padding: 10px 0 10px 0"],
  .main-content form span[style*="padding:10px 0 10px 0"] { font-size: 11px !important; line-height: 1.45 !important; }
  .main-content input:not([type=checkbox]):not([type=radio]),
  .main-content select, .main-content textarea { max-width: 100% !important; box-sizing: border-box; }
  .main-content form div { margin-left: 0 !important; margin-right: 0 !important; }  /* legacy inline margin-left:371px */
  .main-content form input[type=button], .main-content form input[type=submit],
  .main-content form input[type=image], .main-content form button {
    width: auto !important; min-width: 120px; max-width: 100% !important; margin: 10px 0 !important;
    float: none !important; padding: 9px 18px; cursor: pointer;
  }
  .main-content form * { max-width: 100% !important; position: static !important; float: none !important; }
  /* Detail article content: μακριά text/links/bold να σπάνε (πιάνει nowrap/unbreakable) */
  .main-content { overflow-wrap: break-word; word-wrap: break-word; }
  .main-content a, .main-content b, .main-content strong, .main-content span,
  .main-content li, .main-content td, .main-content p, .main-content h1,
  .main-content h2, .main-content h3, .main-content h4 { overflow-wrap: break-word; word-break: break-word; }
  .main-content [nowrap], .main-content [style*="nowrap"] { white-space: normal !important; }
  /* Article τίτλος (h2 olive) vs υπότιτλος (h3 gray). Base .box5 h3:130% -> σε mobile
     γίνεται ΜΕΓΑΛΥΤΕΡΟ από το h2. Ξεκάθαρη ιεραρχία όπως στο desktop. */
  .main-content h2 { font-size: 20px !important; line-height: 1.25; color: #6C7425; font-weight: normal; margin: 5px 0 3px !important; }
  .main-content h3 { font-size: 14px !important; line-height: 1.35; color: rgb(125,125,125); font-weight: normal; margin: 0 0 12px !important; }
  /* 2ο συνεχόμενο h3 (κατηγορία) κολλητά κάτω από το 1ο (υπότιτλος) — όπως desktop (base mt:-13px). */
  .main-content h3 + h3 { margin-top: -9px !important; }
  .main-content .captioned_image img { float: left; width: 120px; height: auto; max-width: 40%; margin: 2px 12px 6px 0; }
  /* «Περισσότερα» — base: margin-left:450px + πορτοκαλί link σε κίτρινο (αόρατο).
     Το κάνουμε καθαρό πράσινο CTA κουμπί, δεξιά. */
  .main-content .readmore {
    margin-left: 0 !important; text-align: right; clear: both;
    background: none !important; padding: 2px 0 12px;
  }
  .main-content .readmore a {
    display: inline-block; padding: 8px 16px; border-radius: 6px;
    background: #5a8f00; color: #fff !important; text-decoration: none !important;
    font-size: 14px; font-weight: 700;
  }
  .main-content .readmore a:hover { background: #3f6600; color: #fff !important; }

  /* Pagination: base #left/#right έχουν margins 48-55px -> σπάνε <941px.
     Flex space-between, χωρίς fixed margins. */
  .main-content .resultBox2 ul {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: 8px 12px; list-style: none; margin: 0; padding: 0;
  }
  .main-content .resultBox2 li { display: block; margin: 0; }
  .main-content .resultBox2 #left,
  .main-content .resultBox2 #center,
  .main-content .resultBox2 #right { margin: 0 !important; font-size: 14px; white-space: nowrap; }
  .main-content .resultBox2 img#left, .main-content .resultBox2 img#right { vertical-align: middle; }

  /* hr separator: full-width + απόσταση από το footer (να μην κολλάει) */
  .main-content .clear-contentunit { width: 100% !important; margin: 14px 0 22px !important; }
  .main-subcontent { padding: 12px; }
  /* base .footer: height:3.7em fixed → σε mobile το disclaimer γίνεται 2-3 γραμμές και το γκρι bg
     καλύπτει μόνο την 1η. Auto height ώστε να μεγαλώνει με το κείμενο (όλα τα mobile/tablet πλάτη). */
  .footer { text-align: center; padding: 16px 12px 28px; height: auto !important; min-height: 0 !important; overflow: visible !important;
    /* Όλες οι γραμμές κειμένου πάνω σε ΣΥΜΠΑΓΕΣ γκρι (225)· το fade γίνεται στα τελευταία 28px
       (bottom padding, ΚΑΤΩ από το κείμενο) → σβήνει σταδιακά χωρίς καμία γραμμή σε λευκό. */
    background: linear-gradient(to bottom, rgb(225,225,225) 0%, rgb(225,225,225) calc(100% - 28px), rgba(225,225,225,0) 100%) !important; }
}

/* =====================================================================
   Pagination — στενή στήλη (<=850px: phone + tight tablet):
   μόνο βελάκια ◀ ▶ + «Σελίδα X από Y» (αλλιώς σπάει σε 2 γραμμές)
   ===================================================================== */
@media screen and (max-width: 850px) {
  .main-content .resultBox2 #left,
  .main-content .resultBox2 #right { font-size: 0 !important; }   /* κρύβει το text, κρατά το arrow img */
  .main-content .resultBox2 #left img,
  .main-content .resultBox2 #right img { width: 24px !important; height: 24px !important; }
  .main-content .resultBox2 #center { font-size: 14px; font-weight: 700; }
}

/* =====================================================================
   PHONE tweaks (<= 600px)
   ===================================================================== */
@media screen and (max-width: 600px) {
  /* white space στα πλάγια: το padding του .main-content το «σπάνε» τα παιδιά (box5/pagetitle),
     οπότε το δίνουμε στο .main (γονέας) όπου δεν ξεφεύγουν. */
  .main { padding: 0 14px !important; box-sizing: border-box; }

  /* Article intro cover (.captioned_imageBordered): κρατάμε float-left ώστε το article text να ΤΥΛΙΓΕΙ
     δίπλα (όπως desktop/tablet)· ΑΛΛΑ κεντράρουμε cover+label ΜΕΣΑ στο frame (fit-content = πλάτος του
     «Φωτογραφικό Υλικό» label) → το cover δεν είναι πια αριστερά-offset και το label δεν βγαίνει δεξιά. */
  .main-content .captioned_imageBordered {
    float: left !important; margin: 0 12px 6px 0 !important;
    width: -moz-fit-content !important; width: fit-content !important; max-width: 46% !important;
    text-align: center !important;
  }
  /* και τα δύο customDesc (cover + text-link «Φωτογραφικό Υλικό») auto-width, κεντραρισμένα·
     nowrap ώστε το label να μένει σε μία γραμμή (το 96px το έσπαγε mid-word «Φωτογραφι/κό»). */
  .main-content .captioned_imageBordered .customDesc {
    width: auto !important; text-align: center !important;
    margin-left: auto !important; margin-right: auto !important; white-space: nowrap;
  }
  .main-content .captioned_imageBordered .customDesc img,
  .main-content .captioned_imageBordered .customDesc p img {
    width: 88px !important; height: auto !important; max-width: 100% !important;
    display: block !important; margin: 4px auto 0 !important; float: none !important;
  }
  .main-content, .main-subcontent { padding-left: 0 !important; padding-right: 0 !important;
    /* base .main-content/.main-subcontent = display:inline (legacy float-fix)· σε phone (χωρίς grid)
       το inline δημιουργεί line-box leading πάνω από το pagetitle. Block το εξαλείφει. */
    display: block !important;
    /* base .main-content margin-left:20px (παλιά nav-column) — αόρατο όσο ήταν inline, εμφανίζεται
       με το block → ασύμμετρο margin. Reset (το tablet grid το κάνει ήδη). */
    margin-left: 0 !important; margin-right: 0 !important; }
  /* + το main-content padding-top:12px (compact block) πρόσθετε επιπλέον κενό πάνω από το pagetitle
     μόνο σε phone (στο tablet το grid το μηδενίζει). Το αφαιρούμε ώστε το κενό να ταιριάζει με tablet. */
  .main-content { padding-top: 0 !important; }
  .main-content h1.pagetitle { font-size: 22px; }
  .main-content, .main-content p { font-size: 16px; line-height: 1.55; }
  /* h2/h3 ρυθμίζονται στο compact block (≤1024) — ενιαία ιεραρχία */

  /* Ενότητα «Επικοινωνία» (icon = images/contact2.png) — ίδια σε όλα τα άρθρα:
     phone → icon block κεντραρισμένο ΠΑΝΩ, τα στοιχεία (Τ/E-mail/Site) από κάτω το ένα
     κάτω από το άλλο, μικρότερο font ώστε το email να χωράει σε 1 σειρά (και στα 320px). */
  .main-content p:has(> img[src*="contact2"]) { font-size: 13px !important; line-height: 1.5; }
  /* icon ΑΡΙΣΤΕΡΑ (όπως desktop) με το κείμενο δεξιά· μικρότερο (90px) ώστε να μένει χώρος στο
     κείμενο σε στενή οθόνη. Τα Τ/E-mail/Site πέφτουν από κάτω (full width) γιατί το intro είναι ψηλό. */
  .main-content p:has(> img[src*="contact2"]) img {
    float: left !important; width: 90px !important; height: auto !important; margin: 2px 12px 6px 0 !important;
  }
  .main-content p:has(> img[src*="contact2"]) a { overflow-wrap: normal; word-break: keep-all; }

  /* Phone: tighter article gutters. Base was .box padding 14px + .box p margin 15/10 => ~29px/24px
     empty each side on a ~350px column (the "green box" gaps). Trim both to ~16px each side. */
  .main-content .box { padding-left: 10px !important; padding-right: 10px !important; }
  .main-content .box p { margin-left: 6px !important; margin-right: 6px !important; }

  /* Content images pushed off-screen by a legacy left margin/float inside SUFFIXED caption
     wrappers — img[align="left"] with margin-left:40-105px in .captioned_imageBordered3 /
     p.customDesc480/580 (the base .captioned_imageBordered/.customDesc are already handled above,
     and win by specificity). On a ~345px phone that margin shoved the image past the viewport →
     center block-level, no float, capped. (Audit 2026-09-30: fixes present/seminar edge cases.) */
  .main-content [class*="captioned_imageBordered"] img,
  .main-content p[class*="customDesc"] img {
    float: none !important; display: block !important;
    margin-left: auto !important; margin-right: auto !important;
    max-width: 100% !important; height: auto !important;
  }

  /* (the floated-icon STACK + contact2-beside rules moved to the ≤1024 block so tablet matches phone;
     see there. The <br>-spacer collapse is also in ≤1024.
     margin-bottom:30 on the stacked icon restores a gap under the QR that
     matches the ~26px gap above it.) */

  /* newblockquote1 = gray framed quote whose 2nd icust definition adds margin-left:30px (+ a 500x430
     frame variant) → ~15px overhang on a ~345px phone. Reset the push + cap width. (Audit 2026-09-30.) */
  .main-content .newblockquote1 {
    width: auto !important; max-width: 100% !important; height: auto !important;
    margin-left: 5px !important; padding-left: 14px !important; text-indent: 0 !important;
    background-size: contain !important;
  }
}

/* =====================================================================
   TABLET refinements (601–1024px) — άνετο single-column (2-col: TODO/υπό απόφαση)
   ===================================================================== */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  /* 2-col με CSS GRID: content = minmax(0,1fr) γεμίζει ΠΑΝΤΑ, sidebar = 230px κλειδωμένο
     δεξιά. Αδύνατον να μείνει κενό (σε αντίθεση με flex-grow που εξαρτάται από min-content).
     Το .main-navigation είναι position:fixed → εκτός grid flow. */
  .main { display: grid; grid-template-columns: minmax(0, 1fr) 230px; column-gap: 13px; row-gap: 16px; align-items: start;
          width: 100% !important; margin: 0 !important; padding: 0 12px 16px !important; box-sizing: border-box; }
  /* Detail pages («Δείτε επίσης» = blue/lightgreen/purple boxes, ΔΕΝ υπάρχουν στην κεντρική):
     στενότερο sidebar → το άρθρο (main-content) κερδίζει ωφέλιμο πλάτος. :has() = detail-only,
     η εγκεκριμένη κεντρική (230px) μένει άθικτη. */
  .main:has(.main-subcontent [class*="subcontent-unit-border-blue"]),
  .main:has(.main-subcontent [class*="subcontent-unit-border-purple"]),
  .main:has(.main-subcontent [class*="subcontent-unit-border-lightgreen"]) {
    grid-template-columns: minmax(0, 1fr) 190px;
  }
  .main-content    { min-width: 0; width: auto !important; margin: 0 !important; padding: 0 !important; }
  .main-subcontent { width: auto !important; margin: 0 !important; padding: 0 !important; }
  .footer          { grid-column: 1 / -1; width: 100% !important; }
  .main-content, .main-content p { font-size: 16px; line-height: 1.6; }
  .main-content .captioned_image img { width: 150px; max-width: 40%; }
  /* Pagetitle no-wrap: σε στενό tablet (601–~735px) η h1 (base 220%≈35px) ξεπερνά το στενό
     main-content column (2-col grid· sidebar 230px) και σπάει σε 2 γραμμές. Ο μακρύτερος τίτλος
     («Καλωσήρθατε στο Cucina.gr»≈463px @35px → 13.15px/1px-font) χρειάζεται:
       601px→availW≈319→≤24px · 713px→availW≈446→≤34px · ≥~738px→35px χωράει.
     Fluid clamp (γραμμικά με το availW≈1.134·W−363): μικραίνει ΜΟΝΟ όπου χρειάζεται. Ceiling = 2.2em
     (= ακριβώς το base 220% → στα ≥~740px ο τίτλος μένει ΠΑΝΟΜΟΙΟΤΥΠΟΣ, μηδέν αλλαγή σε 768/1024·
     αν έβαζα 35px θα άλλαζε 0.2px → 1px page-height shift → false visual diffs). Floor 22px (= phone).
     No `nowrap` → αν ποτέ ξεπεράσει, wrap αντί h-overflow. */
  .main-content h1.pagetitle { font-size: clamp(22px, calc(8.4vw - 27px), 2.2em); }
}

/* ── «Δείτε επίσης» (detail sidebar): μικρά κάθετα κενά ανάμεσα στα covers, ΟΛΑ τα breakpoints.
   Το base `margin:0 0 1em 0` (=10px) των boxes άφηνε 10px κενά — τα μαζεύουμε.
   Scope = απόγονοι του .subcontent-unit-border-blue wrapper (υπάρχει ΜΟΝΟ σε detail pages,
   όχι στην κεντρική). Always-on (εκτός media query) → πιάνει και desktop ≥1025. */
.main-subcontent .subcontent-unit-border-blue [class*="subcontent-unit-border"]:not([class*="ImgContainer"]) {
  margin-bottom: 0 !important;
}

/* «Δείτε επίσης»/«See also» header (μετακινημένος έξω από το blue box → full-width grey bar· ΟΛΑ τα viewports).
   Αναπαράγει το παλιό in-box h1 styling (bg #bebebe, white, 14/bold, centered) αφού ο base selector δεν πιάνει πια. */
.main-subcontent > h1.seealso-title {
  background: rgb(190, 190, 190); color: #fff; text-align: center;
  font-size: 14px; font-weight: 700; padding: 4px 10px 3px; margin: 0 0 10px; border-radius: 6px;
}

/* =====================================================================
   B2 — captioned cover + gallery-label: ΠΑΝΤΑ κεντραρισμένα μεταξύ τους (ΟΛΑ τα viewports)
   Frame = fit-content (αγκαλιάζει το πλατύτερο από cover/label) → κοινό κέντρο. float-left ώστε
   το article text να τυλίγει δίπλα. Μετά το content cleanup το label είναι καθαρό text (GR/EN).
   ===================================================================== */
.main-content .captioned_imageBordered {
  width: -moz-fit-content !important; width: fit-content !important;
  max-width: 60% !important; text-align: center !important;
}
.main-content .captioned_imageBordered .customDesc { text-align: center !important; }
.main-content .captioned_imageBordered .customDesc img,
.main-content .captioned_imageBordered .customDesc p img {
  display: block !important; float: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
/* Το label = ΔΙΑΚΡΙΤΙΚΟ pill (μικρό)· wrap-safe (white-space:normal) ώστε να ΧΩΡΑΕΙ ΠΑΝΤΑ,
   ακόμα και στο μικρότερο mobile (Samsung S8+ ~360px). Scope: text-anchor ΜΟΝΟ (a χωρίς <img>). */
.main-content .captioned_imageBordered .customDesc a:not(:has(img)):not(:empty) {
  display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: 12px auto 2px; padding: 4px 10px;
  font-size: 11px; line-height: 1.25; white-space: nowrap; text-align: center;
  border: 1px solid #9db8d4; border-radius: 12px; background: #eef4fa;
  color: #2f5c86; text-decoration: none;
}
.main-content .captioned_imageBordered .customDesc a:not(:has(img)):not(:empty):hover { background: #deeaf6; }

/* =====================================================================
   Lightbox responsive (<=1024) — το legacy Lokesh-Dhakar lightbox: (α) inline pixel dims = φυσικό
   μέγεθος εικόνας -> overflow· (β) position:absolute -> σε κινητό καταλήγει μακριά (scroll to find).
   Fix: position:FIXED + flex-centered (πάντα ορατό στο viewport, close δίπλα) + cap εικόνας.
   ===================================================================== */
@media screen and (max-width: 1024px) {
  /* overlay: full-screen fixed darken. opacity forced (το legacy JS την animate-άρει· εδώ την
     κλειδώνουμε ώστε να σκουραίνει σίγουρα σε κάθε browser). */
  #overlay { position: fixed !important; top: 0 !important; left: 0 !important;
             width: 100% !important; height: 100% !important; z-index: 9998 !important;
             background: #000 !important; opacity: 0.86 !important; }
  /* lightbox: pin στο viewport (fixed, top:2vh) αντί position:absolute (που σε κινητό κατέληγε
     μακριά -> scroll to find). Κρατάμε το legacy rendering (text-align:center + margin:auto στο
     container) — ΧΩΡΙΣ flex. overflow-y:auto αν το σύνολο ξεπερνά το ύψος. */
  #lightbox { position: fixed !important; top: 4vh !important; left: 0 !important; right: 0 !important;
              width: 100% !important; z-index: 10000 !important; }
  /* ⚠️ font-size:0 στα image containers: το legacy Effect.Scale (changeImage/next) βάζει inline
     font-size ~3400px -> το line-box της inline εικόνας φουσκώνει -> container height τεράστιο
     (λευκό κουτί, image 2+ «χανόταν»). Μηδενίζουμε το font-size ΕΔΩ (όχι στο imageData/caption). */
  #outerImageContainer, #imageContainer { font-size: 0 !important; }
  #outerImageContainer { max-width: 94vw !important; width: auto !important; height: auto !important; margin: 0 auto !important; }
  #imageContainer { padding: 8px !important; }
  /* κύρια εικόνα: display:block (χωρίς inline whitespace) + cap σε πλάτος ΚΑΙ ύψος */
  #lightbox img, #imageContainer img { display: block !important; margin: 0 auto !important;
    max-width: 92vw !important; max-height: 72vh !important; width: auto !important; height: auto !important; }
  #imageDataContainer { max-width: 94vw !important; width: auto !important; margin: 6px auto 0 !important; box-sizing: border-box; }
  #imageData { box-sizing: border-box; text-align: center; }
  #imageData #imageDetails { width: auto !important; float: none !important; }
  #imageData #bottomNavClose { float: none !important; display: inline-block; }
  /* NEXT/PREV: τα legacy hover-nav links δείχνουν βέλος ΜΟΝΟ on :hover (αόρατα σε mobile).
     Βάζουμε ΠΑΝΤΑ-ορατά βέλη ‹ › μέσω ::after — absolute μέσα στο link ώστε να σέβονται το
     JS show/hide (η JS κάνει display:none το prevLink σε first & nextLink σε last -> ::after
     display:none element ΔΕΝ renderάρεται -> το βέλος κρύβεται αυτόματα στα άκρα). */
  #hoverNav #prevLink, #hoverNav #nextLink { position: relative; }
  #hoverNav #prevLink::after, #hoverNav #nextLink::after {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.5);
    color: #fff; font: 30px/40px Arial, sans-serif !important; text-align: center;
  }
  #hoverNav #prevLink::after { content: "\2039"; left: 6px; }   /* ‹ */
  #hoverNav #nextLink::after { content: "\203A"; right: 6px; }  /* › */
}

/* =====================================================================
   ORDER / CONTACT (table) forms — labels LEFT at ALL widths (desktop included).
   The base desktop CSS INTENDS labels-left (.boxOrderFormspan1 float:left 68px +
   .boxOrderFormSpan float:left 330px) but floated <td> stack in modern browsers →
   the label lands ABOVE the input. Apply the clean flex 3-col layout
   (label | input | (*)) unconditionally so it holds on desktop too. (The ≤1024
   block keeps its own copy + mobile font/stack tuning — identical values here.)
   ===================================================================== */
.main-content form table { display: block; width: 100% !important; }
.main-content form tbody { display: block; }
.main-content form tr { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 6px; width: 100%; }
.main-content form td { display: block; }
.main-content form td[colspan="3"], .main-content td.boxOrderForm { flex: 1 1 100% !important; }
.main-content td.boxOrderFormspan1 { flex: 0 0 74px !important; width: auto !important; text-align: right; float: none !important; padding: 6px 2px 0 0 !important; margin: 0 !important; }
.main-content td.boxOrderFormSpan,
.main-content form td[style*="330px"] { flex: 1 1 auto !important; min-width: 0; width: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; }
.main-content form tr > td:nth-child(3):not([colspan="3"]) { flex: 0 0 86px; text-align: left; padding: 6px 0 0 2px !important; margin: 0 !important; }
.main-content .boxOrderFormIBox { width: 100% !important; box-sizing: border-box; float: none !important; margin: 3px 0 !important; }

/* Phone (<=600): compact gallery-pill so long labels (π.χ. «Φωτογραφικό Υλικό») δεν προεξέχουν
   του cover όσο τώρα — φέρνει το products stick-out στο επίπεδο των books. */
@media screen and (max-width: 600px) {
  .main-content .captioned_imageBordered .customDesc a:not(:has(img)):not(:empty) { font-size: 10px !important; padding: 3px 8px !important; }
}