/* Διορθώσεις κινητού για τις σελίδες εκτός αρχικής (κατάλογος, προϊόν,
   καλάθι, ταμείο, λογαριασμός, πληροφορίες). Ιδιοκτησία: agent «pages».
   Φορτώνεται ΜΕΤΑ το horecacy.css.

   Μετρημένα σε 320/375/390/430 εικονοστοιχεία με εξομοίωση iPhone (DPR 3,
   αφή), ελληνικά και αγγλικά — όχι εκτιμημένα. Οι κανόνες για όλα τα πλάτη
   είναι λίγοι και σκόπιμοι (πλέγμα καρτών, σελιδοποίηση)· τα υπόλοιπα ζουν
   σε @media (max-width:767px), ώστε το desktop να μένει όπως ήταν. */


/* κείμενο κουμπιού μόνο για το κινητό (στο desktop μένει το εικονίδιο με
   το tooltip, όπως ήταν) */
@media (min-width:768px){ .hz-m-only{ display:none } }

/* ══ 1. Λίστες προϊόντων: κατηγορία, αναζήτηση, προσφορές, μάρκα, σχετικά ══ */

/* Οι κάρτες ήταν float:left με διαφορετικό ύψος (όνομα σε τρεις ή τέσσερις
   γραμμές). Στο κινητό, όπου δεν υπάρχουν οι κανόνες «clear» του θέματος, η
   επόμενη κάρτα σκάλωνε κάτω από την κοντύτερη και το πλέγμα άφηνε τρύπα μισής
   οθόνης. Με flex κάθε σειρά ευθυγραμμίζεται σε κάθε πλάτος, και το κουμπί
   αγοράς πέφτει στο ίδιο ύψος σε όλη τη σειρά. */
.hz-products{ display:flex; flex-wrap:wrap }
/* τα ::before/::after του Bootstrap (clearfix) θα γίνονταν άδεια «κελιά» */
.hz-products::before, .hz-products::after{ display:none }
.hz-products > [class*="col-"]{ float:none; display:flex; flex-direction:column }
.hz-products > [class*="col-"] > .product-thumb{ flex:1 1 auto }
.hz-products .product-thumb > div:not(.image){ flex:1 1 auto; display:flex; flex-direction:column }
.hz-products .product-thumb .button-group{ margin-top:auto }
/* τα clearfix του προτύπου «σχετικά» (visible-md) δεν χρειάζονται πια */
.hz-products > .clearfix{ display:none !important }

/* Προβολή λίστας: εικόνα αριστερά, στοιχεία δεξιά. Η κάρτα είναι πλέον flex
   σε στήλη (horecacy.css), οπότε το float:left του θέματος για την εικόνα
   αγνοούνταν: η φωτογραφία έπιανε όλο το πλάτος από πάνω και το κείμενο
   έμενε μετατοπισμένο 230px δεξιά κάτω από αυτήν. */
.product-list .product-thumb{ flex-direction:row; align-items:stretch }
.product-list .product-thumb .image{
  flex:0 0 220px; display:flex; align-items:center; justify-content:center;
  float:none; padding:12px; border-bottom:0; border-right:1px solid var(--line) }
.product-list .product-thumb > div:not(.image){ flex:1 1 auto; min-width:0; display:flex; flex-direction:column }
.product-list .product-thumb .caption{ margin-left:0; min-height:0; padding:16px 18px 4px }
.product-list .product-thumb .button-group{ border-left:0; padding:0 18px 16px; margin-top:auto; max-width:360px }

/* σελιδοποίηση στα χρώματα του καταστήματος (ήταν το μπλε του Bootstrap) */
.pagination > li > a, .pagination > li > span{ color:var(--ink); background:var(--raise); border-color:var(--line) }
.pagination > li > a:hover, .pagination > li > a:focus{ color:var(--flame); background:var(--cream); border-color:var(--line) }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover{ background:var(--esp); border-color:var(--esp); color:#fff }

@media (max-width:767px){
  /* Γραμμή εργαλείων. Ετικέτα και μενού δίπλα-δίπλα σε μισή οθόνη: η ετικέτα
     έτρωγε το πλάτος και η ταξινόμηση έδειχνε «Προε» — στα 320 μόνο «|». Η
     ετικέτα ανεβαίνει από πάνω και το μενού παίρνει όλη τη στήλη. */
  .hz-toolbar{ display:flex; gap:10px; margin:0 0 4px }
  .hz-toolbar::before, .hz-toolbar::after{ display:none }
  .hz-toolbar > div{ float:none; width:auto; flex:1 1 0; min-width:0; padding:0 }
  .hz-toolbar .input-group{ display:flex; flex-direction:column; width:100%; margin-bottom:12px }
  .hz-toolbar .input-group-addon{
    display:block; width:auto; padding:0 0 5px; background:none; border:0; text-align:left;
    font-size:12px; font-weight:700; color:var(--mut); line-height:1.3; white-space:normal }
  .hz-toolbar .input-group .form-control{ float:none; width:100%; border-radius:8px !important; padding-right:6px }

  /* Η εικόνα κατηγορίας μόνη της σε σειρά έσπρωχνε τα προϊόντα 100+
     εικονοστοιχεία κάτω χωρίς να λέει κάτι — τα προϊόντα τη δείχνουν ήδη. */
  .hz-intro-img{ display:none }
  .hz-intro + hr{ margin:14px 0 }

  /* Υποκατηγορίες: κουμπάκια που πατιούνται, όχι σύνδεσμοι 20px σε λίστα */
  .hz-refine{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px }
  .hz-refine::before, .hz-refine::after{ display:none }
  .hz-refine > div, .hz-refine ul{ display:contents }
  .hz-refine li{ list-style:none }
  .hz-refine li a{
    display:flex; align-items:center; min-height:44px; padding:6px 14px;
    background:var(--raise); border:1px solid var(--line); border-radius:999px;
    font-size:13.5px; font-weight:700; line-height:1.25; color:var(--ink) }
  .hz-refine + br{ display:none }
  #product-category h3{ font-size:17px; margin:4px 0 10px }

  /* Σελιδοποίηση: κουμπιά 33px → 44px, και η ένδειξη «1 έως 15 από 40» από
     κάτω στο κέντρο αντί για κολλημένη δεξιά. */
  .hz-pager .pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:6px 0 10px }
  .hz-pager .pagination > li > a, .hz-pager .pagination > li > span{
    float:none; display:flex; align-items:center; justify-content:center;
    min-width:44px; height:44px; margin:0; padding:0 10px; border-radius:8px !important; font-size:15px }
  .hz-pager .text-left, .hz-pager .text-right{ text-align:center }
  .hz-pager .text-right{ color:var(--mut); font-size:12.5px; padding-bottom:8px }

  /* Όνομα προϊόντος στην κάρτα: ολόκληρο το μπλοκ πατιέται (ήταν σύνδεσμος
     32px όταν το όνομα χωρούσε σε μία γραμμή). */
  .product-thumb .caption h4 a{ display:block; min-height:44px }

  /* Προβολή λίστας (μένει από οριζόντια θέση ή tablet): εικόνα αριστερά,
     στοιχεία δεξιά. Πριν, κάθε προϊόν έπιανε μιάμιση οθόνη με τη φωτογραφία
     σε όλο το πλάτος. */
  .product-list .product-thumb .image{ flex:0 0 104px; padding:8px }
  .product-list .product-thumb .image img{ max-height:96px; width:auto }
  .product-list .product-thumb .caption{ padding:10px 12px 2px }
  .product-list .product-thumb .button-group{ padding:0 12px 12px; max-width:none }
}


/* ── στήλη φίλτρων (το πλαίσιο είναι του filter.twig· βασικό ύφος στο horecacy.css) */
.hz-filter-toggle{ flex-wrap:wrap }
.hz-filter-picked[hidden]{ display:none }
.hz-filter-picked{
  flex:0 0 100%; padding-left:25px; font-size:12.5px; font-weight:600; line-height:1.35;
  color:var(--flame); white-space:normal }
@media (min-width:992px){ .hz-filter-picked{ display:none } }

@media (max-width:991px){
  /* Ανοιχτό, το πλαίσιο είχε μία επιλογή ανά σειρά των 44px: στην «Καφετέρια»
     τέσσερις οθόνες κουτάκια πριν από το πρώτο προϊόν. Οι επιλογές γίνονται
     κουμπάκια που τυλίγονται — τρεις-τέσσερις ανά σειρά, ίδιος στόχος αφής. */
  .hz-filter-group > div{ display:flex; flex-wrap:wrap; gap:8px }
  .hz-filter-opt{
    min-height:44px; padding:6px 12px 6px 10px; gap:8px;
    background:var(--paper); border:1px solid var(--line); border-radius:999px;
    font-size:13.5px; line-height:1.2 }
  .hz-filter-opt:has(input:checked){ background:#FCE6E1; border-color:var(--flame); color:var(--ink); font-weight:700 }
  .hz-filter-opt input{ width:18px; height:18px; flex:0 0 18px }
  .hz-filter-group{ padding:12px 0 14px }
  .hz-filter-apply{ min-height:48px; font-size:15px }
}

/* ══ 2. Αναζήτηση ══════════════════════════════════════════════════════════ */
@media (max-width:767px){
  /* Το πεδίο, η κατηγορία και τα δύο κουτάκια στοιβάζονται· τα κουτάκια ήταν
     13px με ετικέτα 12px, αδύνατο να τα πετύχει το δάχτυλο. */
  .hz-search-form .row > div{ margin-bottom:10px }
  .hz-search-form .checkbox-inline{ margin:0 }
  .hz-search-form p{ margin:0 }
  .hz-search-form #button-search{ width:100%; margin-top:6px }
  .hz-results-title{ font-size:19px; margin:22px 0 12px }
  #product-search h1{ font-size:22px; overflow-wrap:anywhere }
}


/* ══ 3. Σελίδα προϊόντος ═══════════════════════════════════════════════════ */

/* Το «.thumbnails» του θέματος έχει margin-left:-20px και κάθε <li>
   margin-left:20px· η λίστα έβγαινε 5px έξω από την οθόνη σε κάθε προϊόν
   (μετρημένο: από −5 έως 305 στα 320). */
.thumbnails{ margin-left:0 }
.thumbnails > li{ margin-left:0 }
.thumbnails .image-additional{ margin:0 10px 0 0 }

.hz-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:14px 0 0 }
.hz-tags > span{ font-size:12.5px; color:var(--mut); margin-right:4px }
.hz-tags a{
  display:inline-flex; align-items:center; padding:3px 11px; border:1px solid var(--line);
  border-radius:999px; background:var(--raise); font-size:12.5px; color:var(--ink-soft) }
.hz-tags a:hover{ color:var(--flame); border-color:var(--kraft) }

.hz-buyrow #button-cart{ margin-top:12px }

@media (max-width:767px){
  /* Σειρά ανάγνωσης: όνομα → φωτογραφία → διαθεσιμότητα → τιμή → αγορά.
     Οι δύο στήλες στοιβάζονταν με τη σειρά του κώδικα, οπότε μετά την
     κεφαλίδα ερχόταν μια φωτογραφία μισής οθόνης (με τις μικρές σε δεύτερη
     σειρά) και το όνομα έπεφτε κάτω από την πρώτη οθόνη. Η δεξιά στήλη γίνεται
     «display:contents», ώστε τα παιδιά της να μπουν στη σειρά δίπλα στη
     φωτογραφία χωρίς να αλλάξει το πρότυπο του desktop. */
  .hz-prod-top{ display:flex; flex-direction:column; margin-left:0; margin-right:0 }
  .hz-prod-top::before, .hz-prod-top::after{ display:none }
  .hz-prod-top > .hz-prod-media{ order:2; width:auto; padding:0 }
  .hz-prod-top > .hz-prod-buy{ display:contents }
  .hz-prod-buy > *{ order:3 }
  .hz-prod-buy > h1{ order:1; margin:2px 0 12px; overflow-wrap:anywhere }
  #product-product .hz-prod-buy > h1{ font-size:22px; line-height:1.22 }
  .hz-prod-buy > .btn-group:empty{ display:none }
  .hz-prod-buy > .hz-avail{ align-self:flex-start; margin-top:4px }
  .hz-prod-buy > .list-unstyled{ margin-bottom:6px }
  .hz-prod-buy h2{ margin:8px 0 4px }

  /* Φωτογραφίες: η κύρια ως 240px ύψος, οι μικρές σε μία σειρά 60px. */
  .thumbnails{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; overflow:visible }
  .thumbnails > li{ margin:0; float:none }
  .thumbnails > li:first-child{ flex:0 0 100% }
  .thumbnails > li:first-child .thumbnail{ display:flex; align-items:center; justify-content:center; margin:0; padding:8px }
  .thumbnails > li:first-child .thumbnail img{ max-height:240px; width:auto; max-width:100% }
  .thumbnails .image-additional{ flex:0 0 60px; max-width:60px; margin:0 }
  .thumbnails .image-additional a{
    display:flex; align-items:center; justify-content:center; width:60px; height:60px;
    margin:0; padding:3px; background:#fff; border:1px solid var(--line); border-radius:8px }
  .thumbnails .image-additional img{ max-width:100%; max-height:100%; width:auto; height:auto }

  /* Ποσότητα και κουμπί στην ίδια σειρά: ένα πεδίο πλήρους πλάτους για ένα
     διψήφιο νούμερο έσπρωχνε το κουμπί αγοράς μισή οθόνη κάτω. */
  .hz-buyrow{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 10px; margin-bottom:10px }
  .hz-buyrow > .control-label{ flex:0 0 100%; margin:0; font-size:13px; color:var(--ink-soft) }
  .hz-buyrow > #input-quantity{ flex:0 0 76px; width:76px; text-align:center; font-weight:700 }
  .hz-buyrow > #button-cart{ flex:1 1 auto; width:auto; margin:0; min-height:46px; font-size:16px }
  .hz-buyrow > .hz-off, .hz-buyrow > .hz-off-note{ flex:0 0 100% }

  /* Καρτέλες: στόχοι αφής 44px και πλάγια κύλιση αν δεν χωρούν, αντί να
     σπάνε σε δεύτερη σειρά πάνω στο περιεχόμενο. */
  .hz-tabs{ margin-top:20px }
  .hz-tabs .nav-tabs{ display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:0 }
  .hz-tabs .nav-tabs::-webkit-scrollbar{ display:none }
  .hz-tabs .nav-tabs > li{ float:none; flex:0 0 auto }
  .hz-tabs .nav-tabs > li > a{ display:flex; align-items:center; min-height:46px; padding:0 16px; margin-right:4px; font-weight:700 }
  .hz-tabs .nav-tabs > li.active > a{ color:var(--ink) }
  .hz-tabs .tab-content{ padding:16px 15px }
  /* Πίνακας χαρακτηριστικών μέσα σε πλαίσιο με δικό του περιθώριο: δύο
     στήλες που χωρούν, όχι τρία στρώματα πλαισίων. */
  #tab-specification .table{ margin:0; font-size:13.5px }
  #tab-specification .table td{ padding:9px 10px; overflow-wrap:anywhere }
  #tab-specification .table td:first-child{ width:46%; color:var(--ink-soft) }

  /* Ετικέτες: στο κινητό κρύβονται. Είναι λέξεις-κλειδιά της εισαγωγής
     καταλόγου («clear, round, lids, 250ml…») — ως κουμπιά αφής 44px έφτιαχναν
     τοίχο 250-300px στο τέλος της σελίδας χωρίς να βοηθούν τον πελάτη· η
     αναζήτηση στην κεφαλίδα κάνει την ίδια δουλειά. */
  .hz-tags{ display:none }

  /* Εξαντλημένο: το «Τηλεφωνήστε μας…» είναι η μόνη ενέργεια της σελίδας —
     στόχος αφής πλήρους ύψους, όχι σύνδεσμος γραμμής κειμένου. */
  .hz-off-note a{ display:inline-block; padding:5px 0; line-height:1.45 }

  #product-product h3{ font-size:18px; margin:26px 0 12px }
}


/* ══ 4. Καλάθι και επιβεβαίωση παραγγελίας ════════════════════════════════ */
@media (max-width:767px){
  /* Κάθε γραμμή γίνεται κάρτα. Ο πίνακας κυλούσε πλάγια με τα ονόματα σε μία
     γραμμή, και ποσότητα, τιμή και σύνολο έμεναν εκτός οθόνης — στην
     επιβεβαίωση ακόμη και το ΣΥΝΟΛΟ της παραγγελίας.

       [εικ.] όνομα (σε όσες γραμμές χρειάζεται)
       [εικ.] κωδικός                 τιμή μονάδας
       [ποσότητα ↻ ✕]                       σύνολο                      */
  .hz-cart-wrap, .hz-confirm-wrap{ overflow:visible; border:0; margin-bottom:14px }
  .hz-cart, .hz-confirm{ border:0; margin:0; background:none }
  .hz-cart thead, .hz-confirm thead{ display:none }
  .hz-cart tbody, .hz-confirm tbody{ display:block }
  .hz-cart tbody tr, .hz-confirm tbody tr{
    display:grid; grid-template-columns:64px minmax(0,1fr) auto; column-gap:12px; row-gap:4px;
    align-items:center; margin:0 0 10px; padding:12px;
    background:var(--raise); border:1px solid var(--line); border-radius:var(--radius) }
  /* white-space: το Bootstrap βάζει nowrap σε κάθε κελί μέσα σε .table-responsive
     στο κινητό — αυτό κρατούσε το όνομα σε μία γραμμή 600 εικονοστοιχείων. */
  .hz-cart tbody td, .hz-confirm tbody td, .hz-confirm tfoot td{
    display:block; padding:0 !important; border:0 !important; background:none; text-align:left; white-space:normal !important }
  .table-hover > tbody > tr:hover{ background:var(--raise) }

  .hz-c-img{ grid-column:1; grid-row:1 / span 2; align-self:start }
  .hz-c-img a{ display:block }
  .hz-c-img .img-thumbnail{ width:64px; height:auto; padding:2px }
  .hz-c-name{ grid-column:2 / 4; grid-row:1; font-weight:700; font-size:14px; line-height:1.3; overflow-wrap:anywhere }
  .hz-c-name a{ color:var(--ink) }
  .hz-c-model{ grid-column:2; grid-row:2; font-size:12px; color:var(--mut); overflow-wrap:anywhere }
  .hz-c-price{ grid-column:3; grid-row:2; font-size:12.5px; color:var(--ink-soft); text-align:right !important; white-space:nowrap !important }
  .hz-c-qty{ grid-column:1 / 3; grid-row:3; margin-top:8px }
  .hz-c-total{ grid-column:3; grid-row:3; margin-top:8px; text-align:right !important; font-size:16px; font-weight:800; color:var(--ink); white-space:nowrap !important }
  /* η ετικέτα που αλλιώς έδινε η κεφαλίδα του πίνακα */
  .hz-c-price::before, .hz-c-total::before{
    content:attr(data-label); display:block; font-size:10.5px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; color:var(--mut) }
  .hz-c-qty .input-group{ display:flex; max-width:none !important; width:auto }
  .hz-c-qty .input-group .form-control{ flex:0 0 64px; width:64px; float:none; text-align:center; font-weight:700; border-radius:8px 0 0 8px }
  .hz-c-qty .input-group-btn{ display:flex; width:auto }
  .hz-c-qty .input-group-btn .btn{ width:46px; min-height:46px; height:46px; padding:0; margin:0 }
  .hz-c-qty .input-group-btn .btn:last-child{ border-radius:0 8px 8px 0 }
  /* Γραμμή χωρίς απόθεμα («***»): φαίνεται από μακριά, όχι μόνο από τα αστεράκια */
  .hz-cart tr.is-short{ border-color:#F0BDB3; background:#FDF3F1 }

  /* Επιβεβαίωση: χωρίς κουμπιά ποσότητας, οπότε πιο σφιχτή κάρτα */
  .hz-confirm tbody tr{ grid-template-columns:minmax(0,1fr) auto auto; padding:10px 12px }
  .hz-confirm .hz-c-name{ grid-column:1 / 4 }
  .hz-confirm .hz-c-model{ grid-column:1 / 4; grid-row:2 }
  .hz-confirm .hz-c-qty{ grid-column:1; grid-row:3; margin:4px 0 0; font-size:13px; font-weight:700; color:var(--ink) }
  .hz-confirm .hz-c-qty::before{
    content:attr(data-label); display:block; font-size:10.5px; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; color:var(--mut) }
  .hz-confirm .hz-c-price{ grid-column:2; grid-row:3; margin-top:4px }
  .hz-confirm .hz-c-total{ grid-row:3; margin-top:4px; padding-left:12px !important; font-size:15px }
  /* Σύνολα: «ετικέτα — ποσό» σε μία σειρά, και το τελικό με έμφαση */
  .hz-confirm tfoot{ display:block; padding:4px 2px 0 }
  .hz-confirm tfoot tr{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--line) }
  .hz-confirm tfoot td:last-child{ text-align:right; white-space:nowrap !important; font-weight:700 }
  .hz-confirm tfoot tr:last-child{ border-bottom:0; font-size:17px; font-weight:800 }
  .hz-confirm tfoot td:empty{ display:none }
  /* «Ξανά στο καλάθι» / «Επιστροφή» στις πληροφορίες παραγγελίας */
  .hz-confirm .hz-c-act{ grid-column:1 / 4; grid-row:4; display:flex !important; flex-wrap:wrap; gap:8px; margin-top:10px }
  .hz-confirm .hz-c-act .btn{ flex:1 1 120px; min-width:0; gap:6px; font-size:13px; padding:4px 8px; white-space:normal; line-height:1.2 }

  /* Ιστορικό παραγγελιών: κάρτα ανά παραγγελία
       #29                       Εκκρεμεί
       22/10/2026                 174.33€
       Όνομα πελάτη               Είδη 3
       [ Προβολή ]                                                       */
  .hz-orders-wrap{ overflow:visible; border:0 }
  .hz-orders{ border:0; background:none }
  .hz-orders thead{ display:none }
  .hz-orders tbody{ display:block }
  .hz-orders tbody tr{
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; margin:0 0 10px; padding:12px;
    background:var(--raise); border:1px solid var(--line); border-radius:var(--radius) }
  .hz-orders tbody td{ display:block; padding:0 !important; border:0 !important; text-align:left; white-space:normal !important }
  .hz-o-id{ grid-column:1; grid-row:1; font-size:16px; font-weight:800 }
  .hz-o-status{ grid-column:2; grid-row:1; justify-self:end; padding:2px 10px !important; border-radius:999px;
                background:var(--cream); font-size:12px; font-weight:700; color:var(--ink-soft) }
  .hz-o-date{ grid-column:1; grid-row:2; font-size:13px; color:var(--mut) }
  .hz-o-total{ grid-column:2; grid-row:2; text-align:right !important; font-size:16px; font-weight:800 }
  .hz-o-cust{ grid-column:1; grid-row:3; font-size:13px; color:var(--ink-soft); overflow-wrap:anywhere }
  .hz-o-prod{ grid-column:2; grid-row:3; text-align:right !important; font-size:13px; color:var(--ink-soft) }
  .hz-o-prod::before{ content:attr(data-label) " "; }
  .hz-o-view{ grid-column:1 / 3; grid-row:4; margin-top:8px }
  .hz-o-view .btn{ width:100%; gap:6px }

  /* Σύνολα καλαθιού: ίδια λογική, χωρίς πλέγμα πίνακα */
  .hz-totals{ border:0; background:none }
  .hz-totals tr{ display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line) }
  .hz-totals td{ display:block; border:0 !important; padding:8px 2px !important; background:none }
  .hz-totals td:first-child{ text-align:left !important }
  .hz-totals td:first-child strong{ font-weight:600 }
  .hz-totals tr:last-child{ border-bottom:0; font-size:17px; font-weight:800 }
  .hz-totals tr:last-child strong{ font-weight:800 }

  #checkout-cart h2{ font-size:19px; margin:18px 0 6px }
}


/* η μικρογραφία στο καλάθι: ο σύνδεσμος να έχει το μέγεθος της εικόνας, όχι
   μιας γραμμής κειμένου 16px */
.hz-c-img a{ display:inline-block }

/* ══ 5. Πτυσσόμενα πάνελ: βήματα ταμείου, κωδικός έκπτωσης, μεταφορικά ═════ */
#accordion .panel-title > a{ display:flex; align-items:center; gap:8px; color:var(--ink) }
#accordion .panel-title > a .fa-caret-down{ margin-left:auto }
@media (max-width:767px){
  /* Οι τίτλοι ήταν σύνδεσμοι ύψους 19px μέσα σε μεγαλύτερη μπάρα· ολόκληρη η
     μπάρα πατιέται τώρα. */
  #accordion .panel-heading{ padding:0 }
  #accordion .panel-title{ font-size:15px; line-height:1.3 }
  #accordion .panel-title > a{ min-height:50px; padding:12px 14px }
  /* βήμα που δεν έχει ανοίξει ακόμη: κείμενο χωρίς σύνδεσμο, ίδιο ύψος */
  #accordion .panel-title:not(:has(> a)){ padding:15px 14px; color:var(--mut) }
  #accordion .panel-body{ padding:14px }
  #accordion .panel-collapse.in{ border-top:2px solid var(--flame) }
  /* Κωδικός έκπτωσης: πεδίο και κουμπί δίπλα-δίπλα άφηναν στο πεδίο 50
     εικονοστοιχεία («Γράψτ…»). Στοιβάζονται. */
  #collapse-coupon .input-group, #collapse-voucher .input-group, #collapse-reward .input-group{ display:flex; flex-direction:column; gap:8px; width:100% }
  #collapse-coupon .input-group .form-control, #collapse-voucher .input-group .form-control,
  #collapse-reward .input-group .form-control{ float:none; width:100%; border-radius:8px !important }
  #collapse-coupon .input-group-btn, #collapse-voucher .input-group-btn, #collapse-reward .input-group-btn{ display:block; width:100% }
  #collapse-coupon .input-group-btn .btn, #collapse-voucher .input-group-btn .btn,
  #collapse-reward .input-group-btn .btn{ width:100%; border-radius:8px !important; margin:0 }
  #collapse-coupon .control-label, #collapse-voucher .control-label, #collapse-reward .control-label{ padding:0 0 6px; width:auto; float:none }
  #button-quote{ width:100%; min-height:48px }
  #checkout-checkout h2{ font-size:19px; margin:4px 0 10px }
  /* Βήμα 1: «Συνέχεια» και «Σύνδεση» δεν είναι μέσα σε .buttons — ήταν μικρά
     κουμπιά κολλημένα στην επόμενη επικεφαλίδα. */
  #collapse-checkout-option .btn{ display:flex; width:100%; min-height:48px; font-size:15px; margin:4px 0 22px }
  #collapse-checkout-option .row > div:last-child .btn{ margin-bottom:4px }
  #checkout-checkout legend{ font-size:16px; margin-bottom:12px }
}


/* ══ 6. Φόρμες: λογαριασμός, ταμείο, επικοινωνία, επιστροφές ══════════════ */

/* Όροι χρήσης: ετικέτα που πατιέται ολόκληρη (βλ. πρότυπα ταμείου/εγγραφής) */
.hz-agree{ display:inline-flex; align-items:center; gap:8px; margin:0 10px 0 0; font-weight:400; cursor:pointer }
.hz-agree input[type=checkbox]{ margin:0 }

@media (max-width:767px){
  /* Κουτάκια και κουμπιά επιλογής 13px με ετικέτα 12px: το δάχτυλο πατούσε
     δίπλα. Ολόκληρη η ετικέτα γίνεται στόχος 44px. */
  .radio, .checkbox{ margin:2px 0 }
  .radio label, .checkbox label, label.radio-inline, label.checkbox-inline{
    display:flex; align-items:center; gap:10px; min-height:44px; padding-left:0;
    font-size:14px; line-height:1.3 }
  label.radio-inline, label.checkbox-inline{ display:inline-flex; vertical-align:middle; margin-top:0 }
  .radio input[type=radio], .checkbox input[type=checkbox],
  .radio-inline input[type=radio], .checkbox-inline input[type=checkbox]{
    position:static; flex:0 0 22px; width:22px; height:22px; margin:0; accent-color:var(--flame) }
  label.radio-inline + label.radio-inline, label.checkbox-inline + label.checkbox-inline{ margin-left:18px }
  .radio label img{ max-width:56px }

  /* Ζεύγη κουμπιών («Πίσω» / «Συνέχεια»): το float αριστερά-δεξιά τα έριχνε σε
     δύο σειρές όταν δεν χωρούσαν. Στοιβάζονται σε πλήρες πλάτος με το κύριο
     πρώτο. */
  .buttons{ display:flex; flex-direction:column-reverse; gap:10px; margin:18px 0 }
  .buttons::before, .buttons::after{ display:none }
  .buttons > .pull-left, .buttons > .pull-right{ float:none !important; width:100% }
  .buttons .btn{ display:flex; width:100%; min-height:48px; font-size:15px }

  .hz-agree{ display:flex; min-height:44px; margin:0 0 10px; font-size:14px; line-height:1.35; text-align:left }
  .hz-agree input[type=checkbox]{ flex:0 0 22px; width:22px; height:22px; accent-color:var(--flame) }
  .hz-agree a{ font-weight:700; text-decoration:underline }

  /* Πλαίσια «Νέος πελάτης / Έχω λογαριασμό»: χρώματα του καταστήματος αντί για
     το γκρι του Bootstrap. */
  .well{ background:var(--raise); border:1px solid var(--line); border-radius:var(--radius); box-shadow:none; padding:18px 16px }
  .well h2{ font-size:20px; margin-top:0 }

  /* Στη σύνδεση ο πελάτης που επιστρέφει είναι ο συνηθισμένος — πρώτο το
     πλαίσιο με τα πεδία, μετά η πρόσκληση για νέο λογαριασμό. */
  #account-login #content > .row{ display:flex; flex-direction:column-reverse }
  #account-login #content > .row::before, #account-login #content > .row::after{ display:none }
  #account-login .form-group > a, #checkout-checkout .form-group > a{ display:inline-flex; align-items:center; min-height:44px }
  #account-login .well .btn{ width:100% }

  /* Το «×» των μηνυμάτων ήταν 13×21 εικονοστοιχεία στη γωνία */
  .alert-dismissible{ position:relative; padding-right:50px }
  .alert-dismissible .close{
    position:absolute; top:0; right:0; width:46px; height:46px;
    display:flex; align-items:center; justify-content:center; font-size:24px }

  /* «Ο λογαριασμός μου»: λίστες συνδέσμων 16px χωρίς διάστιχο — μενού με
     σειρές 48px, όπως οι ρυθμίσεις ενός κινητού. */
  #account-account #content h2{ font-size:18px; margin:22px 0 8px }
  #account-account #content .list-unstyled{
    background:var(--raise); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 }
  #account-account #content .list-unstyled > li + li{ border-top:1px solid var(--line) }
  #account-account #content .list-unstyled a{ display:flex; align-items:center; min-height:48px; padding:6px 14px; font-size:14.5px }
  #account-account #content .list-unstyled a::after{ content:"\203A"; margin-left:auto; padding-left:10px; font-size:20px; color:var(--mut) }

  /* Χάρτης ιστοτόπου: 70 σύνδεσμοι γραμμής κειμένου → σειρές 44px */
  #information-sitemap #content ul{ list-style:none; padding-left:0; margin:0 }
  #information-sitemap #content ul ul{ padding-left:14px; border-left:2px solid var(--line); margin:0 0 6px 6px }
  #information-sitemap #content li a{ display:flex; align-items:center; min-height:44px; padding:4px 0; line-height:1.3 }
  #information-sitemap #content > .row > div > ul > li > a{ font-weight:700 }

  /* Μάρκες: το ευρετήριο («H») ήταν σύνδεσμος 10×16 και τα ονόματα 16px */
  #product-manufacturer #content > p a{
    display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px;
    margin:0 2px; border:1px solid var(--line); border-radius:8px; background:var(--raise); font-weight:700 }
  #product-manufacturer #content .row > .col-sm-3 > a{ display:flex; align-items:center; min-height:44px }

  legend{ font-size:17px; padding-bottom:6px }
  .form-horizontal .form-group{ margin-left:0; margin-right:0 }
  .form-horizontal .form-group > [class*="col-sm-"]{ padding-left:0; padding-right:0 }
  .form-horizontal .control-label{ padding-top:0; margin-bottom:5px; text-align:left }
  .input-group.date .btn, .input-group.datetime .btn, .input-group.time .btn{ height:46px; min-width:46px }
}


/* ══ 7. Αφή σε tablet (iPad, κινητό οριζόντια) ════════════════════════════
   Πάνω από 767 η διάταξη μένει του desktop, αλλά το δάχτυλο θέλει ακόμη
   44 εικονοστοιχεία. Μετρημένα στα 820 και 1024 με αφή: λίστα/πλέγμα 36×30,
   ταξινόμηση 36, σελιδοποίηση 33×33, ετικέτες 16, ονόματα καρτών 32. */
@media (min-width:768px) and (pointer:coarse){
  #list-view, #grid-view{ min-width:46px; min-height:44px }
  #input-sort, #input-limit{ min-height:44px }
  .hz-toolbar .input-group-addon{ min-height:44px }
  .pagination > li > a, .pagination > li > span{ min-width:44px; padding:11px 15px; line-height:20px }
  .product-thumb .caption h4 a{ display:block; min-height:44px }
  .hz-tags a{ min-height:44px; padding:4px 14px }
  .hz-refine li a{ display:inline-flex; align-items:center; min-height:44px }
  .hz-filter-opt{ min-height:44px }
  .hz-tabs .nav-tabs > li > a{ min-height:46px; display:flex; align-items:center }
  #accordion .panel-title > a{ min-height:48px; margin:-10px -15px; padding:10px 15px }
  .radio label, .checkbox label, label.radio-inline, label.checkbox-inline{ min-height:44px; display:inline-flex; align-items:center }
  .hz-agree{ min-height:44px }
  .alert-dismissible .close{ min-width:44px; min-height:44px }
  #account-account #content .list-unstyled a,
  #information-sitemap #content li a{ display:inline-flex; align-items:center; min-height:44px }
  #account-login .form-group > a, #checkout-checkout .form-group > a{ display:inline-flex; align-items:center; min-height:44px }
  .hz-cart .input-group-btn .btn{ min-width:44px; min-height:44px }
  #product-manufacturer #content > p a, #product-manufacturer #content .row > .col-sm-3 > a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px }
  .input-group.date .btn, .input-group.datetime .btn, .input-group.time .btn{ min-height:44px; min-width:44px }
  /* κουμπιά περιεχομένου (καλάθι, φόρμες, φίλτρα): 34px στο θέμα */
  #content .btn, #column-left .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center }
  #content .btn-block{ display:flex }
  /* πεδία 34px του Bootstrap δίπλα σε κουμπιά 44px (π.χ. ποσότητα στο καλάθι) */
  #content .form-control, #column-left .form-control{ min-height:44px }
  .hz-c-name a{ display:inline-flex; align-items:center; min-height:44px }
}

/* ── Επικοινωνία: τηλέφωνο και email ως στόχοι αφής ────────────────────────
   Ετικέτα από πάνω, σύνδεσμος από κάτω, ύψος 44px ώστε να πατιέται με το
   δάχτυλο. Στο πρότυπο υπάρχει μόνο εδώ (contact.twig, .hz-contact-reach). */
#information-contact .hz-contact-reach strong{ display:block }
#information-contact .hz-contact-reach a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0 0 8px;
  font-weight:700; color:var(--ink); word-break:break-word }
#information-contact .hz-contact-reach a .fa{ color:var(--flame); width:16px; text-align:center }
#information-contact .hz-contact-reach a:hover,
#information-contact .hz-contact-reach a:focus{ color:var(--flame) }