χωρίς κλάση, ενώ η τιμή και η γραμμή αποθέματος είναι κι αυτές
. Ένα σκέτο «.caption p» τις εξαφάνιζε μαζί της — δύο φορές, στην τιμή και μετά στο απόθεμα. */ .product-thumb .caption p:not([class]){ display:none } .product-thumb .rating{ display:none } /* δεν έχουμε κριτικές· κενά αστέρια μειώνουν */ /* τιμή — το μόνο νούμερο που μετράει */ .product-thumb .caption .price{ margin:0; padding:2px 0 10px; font-size:19px; font-weight:800; color:var(--flame) } .product-thumb .price-tax{ display:block; font-size:11px; font-weight:600; color:var(--mut); margin-top:2px } /* Το κατάστημα δείχνει τιμές ΧΩΡΙΣ ΦΠΑ (config_tax=0). Χωρίς σήμανση ο πελάτης νομίζει ότι αυτό πληρώνει. Το OpenCart δεν βγάζει γραμμή φόρου σε αυτή τη ρύθμιση, οπότε η ένδειξη μπαίνει εδώ — ανά γλώσσα, από το lang του , ώστε να μη χρειαστεί να πειραχτούν τέσσερα πρότυπα. */ /* Το κατάστημα δείχνει τιμές χονδρικής ΧΩΡΙΣ ΦΠΑ. Χωρίς σήμανση ο πελάτης νομίζει ότι αυτό πληρώνει· το OpenCart δεν βγάζει γραμμή φόρου σε αυτή τη ρύθμιση, οπότε τη γράφει το πρότυπο της κάρτας. */ .hz-vat{ font-size:11px; font-weight:600; color:var(--mut); letter-spacing:.01em } .price-new{ color:var(--flame) } .price-old{ color:var(--mut); font-size:.75em; text-decoration:line-through } /* ── απόθεμα ─────────────────────────────────────────────────────────────── Τρεις καταστάσεις, διακριτές με σχήμα και όχι μόνο με χρώμα — μια κουκκίδα αλλάζει μέγεθος και η εξαντλημένη κάρτα ξεθωριάζει, ώστε να ξεχωρίζει και σε ασπρόμαυρη εκτύπωση και σε όποιον δεν διακρίνει κόκκινο/πράσινο. */ .hz-stock{ display:flex; align-items:center; gap:6px; margin:0; padding:0 0 10px; font-size:12px; font-weight:700; color:#2E7D32 } .hz-stock::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 7px } .hz-stock.is-low{ color:#B26A00 } .hz-stock.is-no{ color:var(--mut); font-weight:600 } .hz-stock.is-no::before{ width:9px; height:9px; border-radius:2px; transform:rotate(45deg) } .product-thumb.is-out .image{ position:relative } .product-thumb.is-out .image img{ opacity:.45; filter:grayscale(.55) } .hz-flag{ position:absolute; left:10px; top:10px; z-index:2; background:var(--esp); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:6px } .product-thumb .button-group .hz-buy.is-off{ background:var(--cream); color:var(--mut); cursor:not-allowed; box-shadow:none } .product-thumb .button-group .hz-buy.is-off:hover{ background:var(--cream); color:var(--mut) } .product-thumb .button-group{ border:0; background:transparent; padding:0 14px 14px; display:flex; gap:8px } .product-thumb .button-group button{ white-space:normal; line-height:1.2; padding:0 10px } .product-thumb .button-group button{ background:var(--flame); color:#fff; border:0; border-radius:8px; height:38px; font-weight:700; font-size:13px; flex:1 } .product-thumb .button-group button:hover{ background:#d13a26; color:#fff } .product-thumb .button-group .hz-buy{ flex:1 } .product-thumb .button-group button:not(.hz-buy){ flex:0 0 38px; background:var(--cream); color:var(--ink-soft) } .product-thumb .button-group button:not(.hz-buy):hover{ background:var(--line); color:var(--ink) } /* ── κουμπιά γενικά ─────────────────────────────────────────────────────── */ .btn-primary,.btn-primary:focus{ background:var(--flame); border-color:var(--flame); font-weight:700; border-radius:8px } .btn-primary:hover,.btn-primary:active{ background:#d13a26; border-color:#d13a26 } .btn-default{ background:var(--raise); border-color:var(--line); color:var(--ink); border-radius:8px } .btn-default:hover{ background:var(--cream); border-color:var(--kraft); color:var(--ink) } .form-control{ border-color:var(--line); border-radius:8px; box-shadow:none; color:var(--ink) } .form-control:focus{ border-color:var(--kraft); box-shadow:none } /* ── πλαϊνή στήλη ───────────────────────────────────────────────────────── */ .list-group{ border-radius:var(--radius); overflow:hidden; box-shadow:none } .list-group-item{ background:var(--raise); border-color:var(--line); color:var(--ink); font-size:13.5px; padding:11px 14px } .list-group-item:hover{ background:var(--cream); color:var(--flame) } .list-group-item.active,.list-group-item.active:hover{ background:var(--cream); color:var(--flame); border-color:var(--line); font-weight:700 } /* ── υποσέλιδο ──────────────────────────────────────────────────────────── */ footer{ background:var(--esp); color:var(--cream-soft,#C9B9A2); margin-top:40px; padding:34px 0 22px; border:0 } footer h5{ color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px } footer a{ color:rgba(243,233,218,.78) } footer a:hover{ color:var(--flame) } footer hr{ border-color:rgba(255,255,255,.1) } footer p{ color:rgba(243,233,218,.6) } /* ── σελίδα προϊόντος: διαθεσιμότητα και κουμπί αγοράς ───────────────────── Πριν, η διαθεσιμότητα ήταν μια γραμμή 13px μέσα στη λίστα με τον κωδικό προϊόντος, και από κάτω ένα κόκκινο «Προσθήκη στο καλάθι» πλήρους πλάτους — δηλαδή η σελίδα προσκαλούσε να αγοράσεις κάτι που δεν υπάρχει. */ .hz-avail{ display:inline-flex; align-items:center; gap:8px; margin:14px 0 4px; padding:7px 13px 7px 11px; border-radius:999px; background:#E8F3E9; color:#2E7D32; font-size:13px; font-weight:700; letter-spacing:.01em } .hz-avail-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 8px } .hz-avail.is-low{ background:#FBF0DE; color:#B26A00 } .hz-avail.is-no{ background:var(--cream); color:var(--ink-soft) } /* σχήμα, όχι μόνο χρώμα: ξεχωρίζει και χωρίς αντίληψη κόκκινου/πράσινου */ .hz-avail.is-no .hz-avail-dot{ width:9px; height:9px; border-radius:2px; transform:rotate(45deg) } .product-info h2 .hz-vat{ font-size:13px; font-weight:600; color:var(--mut); letter-spacing:.01em } .btn.hz-off{ background:var(--cream); color:var(--ink-soft); border:1px solid var(--line); font-weight:800; cursor:not-allowed; opacity:1 } .hz-off-note{ margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--ink-soft) } /* Ολόκληρη η πρόταση είναι ο σύνδεσμος· ένα nowrap εδώ την έβγαζε έξω από τη στήλη. Αδιάσπαστο μένει μόνο ο ίδιος ο αριθμός. */ .hz-off-note a{ color:var(--flame); font-weight:700 } /* ── διακόπτης γλώσσας ───────────────────────────────────────────────────── Δύο ονόματα δίπλα-δίπλα· το ενεργό με μπογιά, όχι μόνο με έντονα, ώστε να φαίνεται ποιο ισχύει με μια ματιά. */ .hz-lang{ display:flex; align-items:center; gap:2px; margin:0 } .hz-lang .language-select{ background:transparent; border:0; border-radius:6px; padding:4px 9px; font-size:12px; font-weight:600; color:rgba(255,255,255,.62); cursor:pointer } .hz-lang .language-select:hover{ color:#fff; background:rgba(255,255,255,.08) } .hz-lang .language-select.is-on{ color:var(--esp); background:var(--kraft); font-weight:800 } /* το τηλέφωνο στην πάνω μπάρα διαβάζεται σε κάθε πλάτος */ .hz-top-tel a{ font-weight:700 } .hz-top-tel a span{ letter-spacing:.02em } /* ── υποσέλιδο ─────────────────────────────────────────────────────────────*/ .hz-foot-brand address{ font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.62); margin:0 0 10px } .hz-foot-reach{ font-size:13px; line-height:1.8; margin:0 } .hz-foot-reach a{ color:var(--kraft); font-weight:700 } .hz-foot-reach a:hover{ color:#fff } .hz-foot-legal p{ margin:0 0 4px; font-size:12px; color:rgba(255,255,255,.45) } /* ── μπάρα πλοήγησης ─────────────────────────────────────────────────────── Το φύλλο στυλ του OpenCart βάφει το «#menu» μπλε με επιλογέα ταυτότητας, που κερδίζει κάθε κλάση· γι' αυτό γράφεται κι εδώ με το ίδιο «#menu». */ #menu.hz-menu{ background:var(--raise); border-bottom:1px solid var(--line); position:relative; z-index:40; min-height:0; margin:0; border-radius:0 } /* Η κλάση «collapse» του Bootstrap κρύβει το περιεχόμενο παντού· το στοκ «navbar-collapse» το ξανα-εμφανίζει σε μεγάλες οθόνες και αυτό λείπει εδώ. */ @media (min-width:992px){ /* Ανοίγει με το ποντίκι ΚΑΙ με Tab — χωρίς focus-within το πληκτρολόγιο δεν θα έφτανε ποτέ στους συνδέσμους. */ .hz-menu-all:hover > .hz-mega, .hz-menu-all:focus-within > .hz-mega{ display:block } } .hz-menu-toggle{ display:none; width:100%; background:transparent; border:0; padding:13px 0; font-size:14px; font-weight:800; color:var(--ink); text-align:left } .hz-menu-list{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; flex-wrap:wrap } .hz-menu-list > li > a{ display:flex; align-items:center; gap:7px; height:46px; padding:0 11px; font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap } .hz-menu-list > li > a:hover{ color:var(--flame); background:var(--cream) } .hz-menu-allbtn{ display:flex; align-items:center; gap:7px; height:46px; padding:0 13px; background:var(--esp); color:#fff; border:0; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer } .hz-menu-allbtn:hover, .hz-menu-all:hover .hz-menu-allbtn, .hz-menu-all:focus-within .hz-menu-allbtn{ background:var(--pit); color:#fff } .hz-menu-right{ margin-left:auto } .hz-menu-right + .hz-menu-right{ margin-left:0 } .hz-menu-deal{ color:var(--flame) !important } /* Το πτυσσόμενο με όλες τις κατηγορίες: στήλες που γεμίζουν το πλάτος, ώστε 26 κατηγορίες να διαβάζονται με μια ματιά αντί για λίστα-σκάλα. */ /* Το Bootstrap κάνει το «.dropdown» θέση αναφοράς, οπότε ένα width:100% μετρούσε πάνω στο ίδιο το στοιχείο του μενού — 181 εικονοστοιχεία για 26 κατηγορίες. Η αναφορά μετακινείται στο container, ώστε το πτυσσόμενο να πιάνει όλο το πλάτος της μπάρας. */ .hz-menu .container{ position:relative } .hz-menu-all{ position:static } .hz-mega{ display:none; position:absolute; top:100%; z-index:60; background:var(--raise); left:0; right:0; width:auto; max-width:none; padding:22px 24px; border:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow); columns:4; column-gap:28px } .hz-mega-col{ break-inside:avoid; margin:0 0 16px } .hz-mega-head{ display:block; font-size:13px; font-weight:800; color:var(--ink); padding:0 0 5px } .hz-mega-head:hover{ color:var(--flame) } .hz-mega ul{ list-style:none; margin:0; padding:0 0 0 1px; border-left:2px solid var(--line) } .hz-mega li a{ display:block; padding:3px 0 3px 9px; font-size:12.5px; color:var(--ink-soft) } .hz-mega li a:hover{ color:var(--flame) } .hz-mega em{ font-style:normal; color:var(--mut); font-size:11px; font-weight:600 } @media (max-width:991px){ .hz-menu-toggle{ display:block } .hz-menu-body{ display:none; border-top:1px solid var(--line) } .hz-menu-body.is-open{ display:block } .hz-menu-list{ display:block; padding:4px 0 10px } .hz-menu-list > li > a{ height:auto; padding:11px 2px } .hz-menu-right{ margin-left:0 } /* Σε κινητό δεν υπάρχει hover: το πτυσσόμενο γίνεται απλή λίστα μέσα στο ήδη πτυσσόμενο μενού, ώστε να μη χρειάζεται δεύτερο άνοιγμα. */ .hz-mega{ display:block; position:static; columns:1; max-width:none; box-shadow:none; border:0; padding:4px 0 8px } .hz-menu-allbtn{ display:none } } /* ── καλάθι ──────────────────────────────────────────────────────────────── Η ανανέωση ποσότητας και η διαγραφή ήταν και οι δύο γεμάτο κόκκινο· η διαγραφή πρέπει να φαίνεται λιγότερο «κανονική» από την ανανέωση. */ .hz-qty-remove{ background:var(--cream); color:var(--ink-soft); border:1px solid var(--line) } .hz-qty-remove:hover{ background:#F6DAD4; color:var(--flame); border-color:#F0BDB3 } .table thead th .hz-vat{ font-weight:600 } /* ── κινητό ──────────────────────────────────────────────────────────────── Σε 375 εικονοστοιχεία το προεπιλεγμένο θέμα δίνει μία κάρτα ανά σειρά («col-xs-12»): μια φωτογραφία ποτηριού γέμιζε μισή οθόνη και χρειαζόσουν επτά κυλήσεις για να δεις τρία προϊόντα. Σε κατάλογο χονδρικής ο πελάτης σαρώνει, δεν θαυμάζει. */ @media (max-width:767px){ .product-layout.product-grid{ width:50%; float:left; padding-left:7px; padding-right:7px } .product-grid .product-thumb .image img{ max-height:150px; width:auto } .product-thumb .caption{ padding:10px 10px 2px } .product-thumb .caption h4{ font-size:12.5px } .product-thumb .caption .price{ font-size:16px } .product-thumb .button-group{ padding:0 10px 10px } .product-thumb .button-group button{ font-size:11.5px; height:36px; padding:0 6px } .hz-flag{ font-size:9px; padding:4px 6px; left:7px; top:7px } /* Η ταινία υποσχέσεων έπιανε τρεις ολόκληρες γραμμές πριν από το πρώτο προϊόν. Μένει, αλλά σε μία σειρά που κυλά πλάγια. */ .hz-promise{ padding:9px 0 } /* Ο κανόνας για μεγάλες οθόνες έχει flex-wrap:wrap· χωρίς ρητό nowrap εδώ οι τρεις φράσεις, που είναι αδιάσπαστες, στοιβάζονταν σε τρεις σειρές. */ .hz-promise .container{ display:flex; flex-wrap:nowrap; gap:18px; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-left:16px; padding-right:16px } .hz-promise .container::-webkit-scrollbar{ display:none } .hz-promise span{ white-space:nowrap; font-size:11.5px } .hz-promise .sep{ display:none } /* Σε λίστα, μία ανά σειρά όπως πρέπει */ .product-layout.product-list{ width:100%; float:none } } /* η περιγραφή, πλέον δική της ενότητα κάτω από το πλαίσιο αγοράς */ .hz-tabs{ margin:26px 0 8px } .hz-tabs .tab-content{ background:var(--raise); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius) var(--radius); padding:20px 22px } .hz-tabs .tab-content p{ max-width:70ch } @media (max-width:767px){ /* Η διαδρομή πλοήγησης με ονόματα προϊόντων ξεχείλιζε έξω από την οθόνη και τραβούσε όλη τη σελίδα πλάγια. Κυλά μόνη της. */ .breadcrumb{ display:flex; flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch } .breadcrumb::-webkit-scrollbar{ display:none } .breadcrumb > li{ flex:0 0 auto } /* Ο πίνακας του καλαθιού σε 375 εικονοστοιχεία θέλει πλάγια κύληση αντί να στριμώχνει πέντε στήλες. */ .table-responsive{ -webkit-overflow-scrolling:touch } #content h1{ font-size:24px; line-height:1.2 } } /* ── καταλληλότητα για κινητό ────────────────────────────────────────────── Μετρημένα στα 375 εικονοστοιχεία, όχι εκτιμημένα. */ @media (max-width:767px){ /* Το Safari του iPhone ΜΕΓΕΘΥΝΕΙ τη σελίδα μόλις ο χρήστης αγγίξει πεδίο με γραμματοσειρά κάτω από 16px — και δεν ξαναγυρίζει μόνο του. Έτσι, μετά το πρώτο άγγιγμα στην αναζήτηση ή σε πεδίο του ταμείου, όλη η σελίδα έμενε ζουμαρισμένη και ο πελάτης έπρεπε να την επαναφέρει με τα δάχτυλα. */ input, select, textarea, .form-control, .input-sm, select.form-control, /* Το φύλλο στυλ του θέματος έχει «.input-group input{font-size:12px}», που με ειδικότητα 0-1-1 νικούσε κάθε σκέτο «input» ή «.form-control». Εδώ είναι το πεδίο ποσότητας του καλαθιού και η αναζήτηση — ακριβώς τα δύο που αγγίζει πρώτα ο πελάτης στο κινητό. */ .input-group input, .input-group select, .input-group .form-control, #search input, #search .form-control, #content .form-control, #column-left .form-control{ font-size:16px } /* Στόχοι αφής. Το δάχτυλο θέλει ~44 εικονοστοιχεία· κάτω από αυτό ο πελάτης αστοχεί και πατά το διπλανό. */ .form-control, select.form-control, .input-sm{ height:46px; padding:10px 12px } textarea.form-control{ height:auto; min-height:120px } .btn, .btn-lg, .btn-sm{ min-height:44px; display:inline-flex; align-items:center; justify-content:center } .product-thumb .button-group button{ height:44px } .hz-lang .language-select{ min-height:42px; padding:10px 12px; font-size:13px } #top-links a{ display:inline-flex; align-items:center; min-height:42px } .breadcrumb > li > a{ display:inline-flex; align-items:center; min-height:38px } .hz-menu-list > li > a{ min-height:46px } .hz-mega li a{ padding:9px 0 9px 9px } .hz-mega-head{ padding:9px 0 6px } .input-group .btn{ min-height:46px } /* Μικρά κείμενα που δεν διαβάζονταν σε οθόνη χεριού */ .hz-flag{ font-size:10.5px } .hz-promise span{ font-size:12px } .hz-stock{ font-size:12.5px } /* Ορατή απόκριση στο άγγιγμα αντί για το γκρι πλαίσιο του συστήματος */ a, button{ -webkit-tap-highlight-color:rgba(232,68,46,.18) } } @media (max-width:767px){ /* Τα δύο μενού ταξινόμησης έμεναν στα 30 εικονοστοιχεία: το θέμα τα ορίζει με «select.form-control{height:30px}», που νικά το σκέτο «.form-control». */ #input-sort, #input-limit, select.form-control, .input-sm{ height:46px } /* Οι σύνδεσμοι του υποσέλιδου ήταν 16 εικονοστοιχεία ύψος — σωστοί στο ποντίκι, αστοχία στο δάχτυλο. */ footer .list-unstyled > li > a{ display:block; padding:7px 0 } footer h5{ margin-top:18px } } @media (max-width:767px){ .hz-foot-reach a{ display:inline-block; padding:7px 0 } } /* ── στήλη φίλτρων ─────────────────────────────────────────────────────────*/ .hz-filter{ background:var(--raise); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:22px } .hz-filter-toggle{ display:flex; align-items:center; gap:9px; width:100%; padding:13px 15px; background:var(--cream); border:0; border-bottom:1px solid var(--line); font-size:13px; font-weight:800; color:var(--ink); text-align:left; cursor:default } /* Το «display:inline-flex» νικά το χαρακτηριστικό hidden, οπότε ο μετρητής έδειχνε «0» όταν δεν υπήρχε καμία επιλογή. */ .hz-filter-count[hidden]{ display:none } .hz-filter-count{ margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:11px; background:var(--flame); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center } .hz-filter-body{ padding:6px 15px 15px } .hz-filter-group{ padding:12px 0; border-bottom:1px solid var(--line) } .hz-filter-group:last-of-type{ border-bottom:0 } .hz-filter-group h5{ margin:0 0 9px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--mut) } .hz-filter-opt{ display:flex; align-items:center; gap:9px; margin:0; padding:5px 0; font-size:13px; font-weight:500; color:var(--ink-soft); cursor:pointer } .hz-filter-opt:hover{ color:var(--flame) } .hz-filter-opt input{ margin:0; width:16px; height:16px; accent-color:var(--flame); flex:0 0 16px } .hz-filter-apply{ width:100%; margin-top:14px; font-weight:800 } @media (max-width:991px){ /* Στο κινητό η στήλη μπαίνει πάνω από τα προϊόντα: κλειστή εξ ορισμού, ώστε ο κατάλογος να μένει στην πρώτη οθόνη. */ .hz-filter-toggle{ cursor:pointer } .hz-filter-body{ display:none } .hz-filter-body.is-open{ display:block } .hz-filter-opt{ padding:10px 0; font-size:14px } .hz-filter-opt input{ width:20px; height:20px; flex:0 0 20px } } /* ── «Ανά επιχείρηση»: δεύτερο πτυσσόμενο του μενού ────────────────────────*/ .hz-menu-biz{ position:static } .hz-menu-bizbtn{ display:flex; align-items:center; gap:7px; height:46px; padding:0 13px; background:transparent; border:0; border-right:1px solid var(--line); font-size:13px; font-weight:800; color:var(--ink); white-space:nowrap; cursor:pointer } .hz-menu-bizbtn:hover, .hz-menu-biz:hover .hz-menu-bizbtn, .hz-menu-biz:focus-within .hz-menu-bizbtn{ color:var(--flame); background:var(--cream) } .hz-biz{ display:none; position:absolute; top:100%; left:0; right:0; z-index:60; background:var(--raise); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow); padding:16px 20px; columns:3; column-gap:24px } .hz-biz-item{ display:block; break-inside:avoid; padding:7px 0; font-size:13.5px; font-weight:700; color:var(--ink) } .hz-biz-item:hover{ color:var(--flame) } .hz-biz-item em{ font-style:normal; color:var(--mut); font-size:11px; font-weight:600 } .hz-biz-all{ display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; font-weight:700; color:var(--flame) } @media (min-width:992px){ .hz-menu-biz:hover > .hz-biz, .hz-menu-biz:focus-within > .hz-biz{ display:block } } @media (max-width:991px){ .hz-menu-bizbtn{ display:none } .hz-biz{ display:block; position:static; columns:1; box-shadow:none; border:0; padding:4px 0 10px } .hz-biz-item{ padding:11px 0 } } @media (max-width:767px){ /* Το προεπιλεγμένο θέμα δίνει στην αριστερή στήλη «hidden-xs», οπότε στο τηλέφωνο εξαφανίζονταν ΚΑΙ τα φίλτρα — δηλαδή η μισή δουλειά δεν υπήρχε εκεί που παραγγέλνουν οι περισσότεροι. Η στήλη ξαναεμφανίζεται, αλλά μόνο το πλαίσιο φίλτρων: ο κατάλογος κατηγοριών υπάρχει ήδη ολόκληρος στο μενού και θα έσπρωχνε τα προϊόντα μια οθόνη πιο κάτω. */ #column-left{ margin-bottom:4px } #column-left > *:not(.hz-filter){ display:none } #column-left .hz-filter{ margin-bottom:16px } }