/* ══════════════════════════════════════════════════════════════════════════
   ΨΗΦΙΑΚΟΙ ΚΑΤΑΛΟΓΟΙ — catalogues.visiongroup.gr
   ══════════════════════════════════════════════════════════════════════════

   Η εμφάνιση του vision-catalogues, με τις ίδιες τιμές: κυανό #0DCAF0, απαλή
   διαβάθμιση στο φόντο, λευκή λωρίδα με το λογότυπο, λευκές κάρτες που
   ανασηκώνονται, σκούρο υποσέλιδο #343A40.

   ΤΑ ΟΝΟΜΑΤΑ ΤΩΝ ΜΕΤΑΒΛΗΤΩΝ ΕΧΟΥΝ ΠΡΟΘΕΜΑ «--cat-», οι ΤΙΜΕΣ είναι ίδιες.
   Το style.css ορίζει ήδη --accent, --ink, --line· χωρίς πρόθεμα θα άλλαζαν
   χρώμα και τα άλλα πέντε sites.

   Φορτώνεται ΠΑΝΩ από το style.css — εδώ μπαίνουν μόνο οι διαφορές.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --cat-accent:        #0DCAF0;
  --cat-accent-strong: #0AA8C9;
  --cat-accent-soft:   #E8FBFF;

  --cat-ink:    #0B1A26;
  --cat-muted:  #5B6B78;
  --cat-footer: #343A40;

  --cat-radius:       12px;
  --cat-shadow:       0 4px 8px rgba(0, 0, 0, .1);
  --cat-shadow-hover: 0 8px 16px rgba(0, 0, 0, .15);
}

body {
  background: linear-gradient(to right, #F8F9FA, #E9ECEF);
  color: var(--cat-ink);
}

/* ── Επικεφαλίδα: μόνο το λογότυπο ──────────────────────────────────────
   Το markup έρχεται από includes/partials/header-catalogues.php — η κανονική
   μπάρα με πλοήγηση, αναζήτηση και παραγγελία δεν φορτώνεται καθόλου. */

.public-header {
  background: #fff;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.public-header img {
  max-width: 250px;
  width: auto;
  height: auto;
  margin-inline: auto;
}

/* ── Το κυρίως μέρος ────────────────────────────────────────────────── */

.public-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px clamp(16px, 4vw, 32px);
}

.catalogue-view { width: 100%; max-width: 1000px; }

/* Το βασικό φύλλο βάφει τις επικεφαλίδες στο λαδί του ADV. Εδώ το σχέδιο
   έχει σκούρο μελανί — αλλιώς το site δείχνει σαν παρακλάδι του ADV. */
.page-title {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--cat-ink);
}

.page-lead { color: var(--cat-muted); margin: .4rem 0 20px; }

/* ── Πλέγματα ───────────────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: 25px;
  width: 100%;
  margin-inline: auto;
}

.grid--categories { grid-template-columns: repeat(4, 1fr); max-width: 1500px; }
.grid--catalogues { grid-template-columns: repeat(3, 1fr); max-width: 1000px; }

@media (max-width: 1050px) {
  .grid--categories { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid--categories,
  .grid--catalogues { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 450px) {
  .grid--categories,
  .grid--catalogues { grid-template-columns: 1fr; }
}

/* ── Κάρτες ─────────────────────────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--cat-radius);
  overflow: hidden;
  text-decoration: none;
  color: #000;
  text-align: center;
  box-shadow: var(--cat-shadow);
  transition: transform .3s ease, box-shadow .3s ease;
  width: 100%;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--cat-shadow-hover);
  outline: none;
  /* Το βασικό φύλλο υπογραμμίζει τους συνδέσμους στο hover· στο σχέδιο δεν
     υπάρχει υπογράμμιση. */
  text-decoration: none;
}

.card:focus-visible {
  box-shadow: 0 0 0 3px var(--cat-accent-soft), var(--cat-shadow-hover);
}

.card__media {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 140px;
  background: linear-gradient(135deg, var(--cat-accent-soft), #F4FBFD);
}

/* Τα εξώφυλλα φαίνονται ΟΛΟΚΛΗΡΑ — ποτέ κομμένα. */
.card__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ΤΑ ΦΥΛΛΑΔΙΑ: ΙΔΙΟ ΥΨΟΣ ΕΙΚΟΝΑΣ ΣΕ ΟΛΕΣ ΤΙΣ ΚΑΡΤΕΣ, όπως το παλιό site.
   Εκεί κάθε εξώφυλλο είχε σταθερό ύψος (435px) και γέμιζε το πλαίσιο. Εδώ
   κάθε εικόνα κρατούσε τη δική της αναλογία, οπότε ένα πιο «φαρδύ»
   εξώφυλλο (π.χ. End of the Year, 1,17:1) έβγαινε κοντύτερο από τα
   υπόλοιπα. Τώρα όλα σε αναλογία Α4 (1:1,41 — η αναλογία των περισσότερων
   εξωφύλλων) και γεμίζουν το πλαίσιο· όσα έχουν άλλη αναλογία χάνουν λίγο
   από τις άκρες, ακριβώς όπως στο παλιό site.
   Με αναλογία και όχι σταθερά pixel: η κάρτα αλλάζει πλάτος ανά οθόνη, και
   σταθερό ύψος θα έκοβε πολύ περισσότερο στο κινητό. */
.grid--catalogues .card__media { aspect-ratio: 1 / 1.41; min-height: 0; }
.grid--catalogues .card__media img {
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* ο τίτλος του εξωφύλλου είναι συνήθως πάνω */
}
.grid--catalogues .media-fallback { aspect-ratio: auto; height: 100%; min-height: 0; }

/* Οι κατηγορίες είναι τετράγωνα πλακίδια, όπως το παλιό site. */
.card--category .card__media { aspect-ratio: 1 / 1; min-height: 0; }
.card--category .card__media img { height: 100%; object-fit: cover; }

.media-fallback {
  width: 100%;
  min-height: 200px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--cat-accent-strong);
  font-size: clamp(1rem, 3.5vw, 1.4rem);
  font-weight: 700;
  line-height: 1.3;
}

.card--category .media-fallback { aspect-ratio: 1 / 1; min-height: 0; }

.card__body {
  padding: 15px;
  border-top: 1px solid #ddd;
}

.card__title {
  font-size: 17px;
  font-weight: 700;
  color: #0dcaf0;
  margin: 0 0 5px;
  line-height: 1.3;
}

.card__sub { font-size: 14px; color: #555; margin: 0; }

/* ── Πλοήγηση πίσω ──────────────────────────────────────────────────── */

.back-link {
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  color: #b5aaa0;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  box-shadow: var(--cat-shadow);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  margin-bottom: 25px;
}

.back-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--cat-shadow-hover);
  background: #F8F9FA;
  text-decoration: none;
  color: #b5aaa0;
}

.back-link:active { transform: translateY(0); }

/* ── Ο ένας κατάλογος ───────────────────────────────────────────────── */

.catalogue-embed {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-radius: var(--cat-radius);
  overflow: hidden;
  box-shadow: var(--cat-shadow);
}

.catalogue-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 700px) {
  .catalogue-embed { aspect-ratio: 3 / 4; }
}

.open-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--cat-accent);
  color: #04333d;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 10px;
  box-shadow: var(--cat-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.open-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--cat-shadow-hover);
  color: #04333d;
  text-decoration: none;
}

/* ── Υποσέλιδο: σκούρη λωρίδα με εικονίδια ──────────────────────────── */

.public-footer {
  text-align: center;
  padding: 20px;
  background: var(--cat-footer);
  color: #fff;
  font-size: 17px;
}

.public-footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.public-footer a {
  color: #fff;
  display: inline-flex;
  transition: color .2s ease;
}

.public-footer a:hover { color: var(--cat-accent); }

.public-footer svg { width: 20px; height: 20px; }

/*
 * Η νομική λωρίδα, κάτω από τα εικονίδια.
 *
 * Δεν υπήρχε στο σχέδιο γιατί το vision-catalogues δεν είχε cookies ούτε
 * φόρμες. Εδώ είναι υποχρεωτική — κρατιέται όσο πιο διακριτική γίνεται, στο
 * ίδιο σκούρο, ώστε να μοιάζει συνέχεια της λωρίδας και όχι δεύτερο μπλοκ.
 */
.site-footer {
  background: var(--cat-footer);
  color: #fff;
  --footer-dim:  #C9CDD1;   /* 7,2:1 πάνω στο #343A40 */
  --on-dark-dim: #C9CDD1;
}

.site-footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer a { color: #C9CDD1; }
.site-footer a:hover { color: var(--cat-accent); }

/* ── Κουμπί κοινοποίησης πάνω στην κάρτα ────────────────────────────── */

.card-wrap {
  position: relative;
  display: flex;
}

.card-wrap .card { width: 100%; }

.card-share {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  color: #555;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}

.card-share svg { width: 17px; height: 17px; }

.card-wrap:hover .card-share,
.card-share:focus-visible { opacity: 1; }

.card-share:hover { background: #fff; color: #0dcaf0; }

/* Σε οθόνη αφής δεν υπάρχει hover — το κουμπί θα ήταν μονίμως αόρατο. */
@media (hover: none) {
  .card-share { opacity: 1; }
}

/* ── Το παράθυρο ανάγνωσης ──────────────────────────────────────────── */

/*
 * ΤΟ hidden ΠΡΕΠΕΙ ΝΑ ΝΙΚΑΕΙ.
 *
 * Ο browser κρύβει τα [hidden] με «display: none», αλλά αυτός ο κανόνας είναι
 * του φυλλομετρητή και χάνει από οποιαδήποτε κλάση ορίζει display. Το
 * «display: flex» παρακάτω τον ακυρώνει — και το παράθυρο εμφανίζεται πάνω
 * από τη σελίδα από τη στιγμή που φορτώνει, χωρίς να το ζητήσει κανείς.
 */
.cat-modal[hidden] { display: none; }

.cat-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 26, 38, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0px, 3vw, 32px);
}

.cat-modal__box {
  background: #fff;
  width: min(1040px, 100%);
  height: min(90dvh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(11, 26, 38, .12), 0 30px 70px rgba(11, 26, 38, .2);
}

@media (max-width: 560px) {
  .cat-modal { padding: 8px; }
  .cat-modal__box {
    width: 100%;
    border-radius: 14px;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

.cat-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  border-bottom: 1px solid #E2E8ED;
}

.cat-modal__title {
  font-weight: 700;
  letter-spacing: -.01em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-modal__link {
  flex-shrink: 0;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #E2E8ED;
  border-radius: 999px;
  background: #fff;
  color: var(--cat-muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;   /* και ως <a> («Νέα καρτέλα») */
  transition: border-color .15s ease, color .15s ease;
}

.cat-modal__link svg { width: 15px; height: 15px; }

/*
 * Σε στενή οθόνη μένει μόνο το εικονίδιο.
 *
 * Στα 375px η ετικέτα έπαιρνε 184 από τα 375 και άφηνε τον τίτλο του
 * καταλόγου με 83 — δηλαδή τρεις χαρακτήρες και αποσιωπητικά. Το aria-label
 * στο κουμπί κρατάει το νόημα για όποιον ακούει τη σελίδα.
 */
@media (max-width: 560px) {
  .cat-modal__link-text { display: none; }
  .cat-modal__link { padding: 0; width: 38px; justify-content: center; }
}

.cat-modal__link:hover {
  border-color: var(--cat-accent);
  color: #055160;
}

.cat-modal__close {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: #F4F7F9;
  color: var(--cat-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}

.cat-modal__close:hover { background: var(--cat-accent-soft); color: #055160; }

.cat-modal__body {
  flex: 1;
  min-height: 0;
  background: #F4F7F9;
}

.cat-modal__body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Ειδοποιήσεις ───────────────────────────────────────────────────── */

.cat-toasts {
  position: fixed;
  z-index: 200;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.cat-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #E2E8ED;
  border-left: 4px solid var(--cat-muted);
  box-shadow: 0 2px 6px rgba(11, 26, 38, .06), 0 14px 30px rgba(11, 26, 38, .08);
  font-size: .88rem;

  /*
   * Η ΟΡΑΤΟΤΗΤΑ ΔΕΝ ΠΡΟΚΥΠΤΕΙ ΑΠΟ ΤΗΝ ΚΙΝΗΣΗ.
   *
   * Ο browser ΠΑΓΩΝΕΙ τις κινήσεις CSS όταν η καρτέλα δεν είναι ορατή. Αν η
   * εμφάνιση ξεκινούσε από «opacity: 0» και βασιζόταν στην κίνηση για να
   * φτάσει στο 1, μια ειδοποίηση που γεννιέται σε κρυφή καρτέλα δεν θα
   * εμφανιζόταν ΠΟΤΕ — θα περίμενε παγωμένη ώσπου να τη σβήσει το χρονόμετρο.
   *
   * Η κίνηση μετακινεί μόνο. Το χρώμα και η αδιαφάνεια είναι δεδομένα.
   */
  opacity: 1;
  transition: opacity .2s ease;
  animation: cat-toast-in .18s ease-out;
}

@keyframes cat-toast-in {
  from { transform: translateY(8px); }
}

/* Ο επισκέπτης που έχει ζητήσει λιγότερη κίνηση δεν θέλει να πετάγονται
   πράγματα στην οθόνη — εμφανίζονται, απλώς χωρίς ταξίδι. */
@media (prefers-reduced-motion: reduce) {
  .cat-toast { animation: none; }
  .cat-toast { transform: none; }
  .card, .back-link, .open-btn { transition: none; }
  .card:hover, .back-link:hover, .open-btn:hover { transform: none; }
}

.cat-toast--success { border-left-color: #0F6B4F; }
.cat-toast--error   { border-left-color: #A63A2C; }
.cat-toast--info    { border-left-color: var(--cat-accent-strong); }

.cat-toast__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--cat-muted);
}

.cat-toast--success .cat-toast__icon { background: #0F6B4F; }
.cat-toast--error   .cat-toast__icon { background: #A63A2C; }

/* ══════════════════════════════════════════════════════════════════════════
   «ΡΩΤΗΣΤΕ ΜΑΣ» — το κυλιόμενο κουμπί
   ══════════════════════════════════════════════════════════════════════════

   Είναι <details>: ο browser το ανοιγοκλείνει μόνος του, με ποντίκι και με
   πληκτρολόγιο, χωρίς JavaScript. */

.ask {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;          /* πάνω από τη σελίδα, ΚΑΤΩ από το παράθυρο (100) */
}

/* Το βελάκι του <details> φεύγει — το κουμπί έχει δικό του εικονίδιο. */
.ask__btn::-webkit-details-marker { display: none; }
.ask__btn { list-style: none; }

.ask__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 52px;            /* άνετος στόχος αφής */
  border-radius: 999px;
  background: var(--cat-accent);
  color: #04333d;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(11, 26, 38, .22);
  transition: transform .2s ease, box-shadow .2s ease;
  user-select: none;
}

.ask__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11, 26, 38, .28);
}

.ask__btn:focus-visible {
  outline: 3px solid #04333d;
  outline-offset: 2px;
}

.ask__btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Ανοιχτό: το κουμπί γίνεται «κλείσιμο» και χάνει το βάρος του. */
.ask[open] .ask__btn {
  background: #fff;
  color: var(--cat-ink);
  box-shadow: var(--cat-shadow);
}

/* ── Το πλαίσιο ─────────────────────────────────────────────────────────
   Ανοίγει ΠΑΝΩ από το κουμπί: κάτω δεν υπάρχει χώρος, και σε κινητό θα
   έμπαινε κάτω από το πληκτρολόγιο. */

.ask__panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(76vh, 620px);
  overflow-y: auto;
  padding: 18px;
  background: #fff;
  border-radius: var(--cat-radius);
  box-shadow: 0 10px 24px rgba(11, 26, 38, .16), 0 30px 70px rgba(11, 26, 38, .22);
  text-align: left;
}

.ask__head { margin-bottom: 12px; }
.ask__head strong { display: block; font-size: 16px; }

.ask__ctx {
  display: block;
  font-size: 13px;
  color: var(--cat-muted);
  margin-top: 2px;
  /* Ο τίτλος καταλόγου μπορεί να είναι μακρύς — μία γραμμή και τέλος. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ask__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FCECE9;
  color: #8A2B1C;
  font-size: 14px;
}

.ask__form .field { margin-bottom: 12px; max-width: none; }

/*
 * ΤΟ «label» ΔΕΝ ΕΙΝΑΙ ΕΝΑ ΠΡΑΓΜΑ.
 *
 * Οι ετικέτες των πεδίων είναι τίτλοι από πάνω — μπλοκ. Η ετικέτα της
 * συγκατάθεσης όμως ΠΕΡΙΕΧΕΙ το κουτάκι και το κείμενο δίπλα-δίπλα, και
 * είναι flex. Ένας γενικός κανόνας «label { display: block }» τη σπάει: το
 * κουτάκι πάει πάνω και το κείμενο από κάτω.
 *
 * Το :not() κρατά τον κανόνα στις ετικέτες που όντως είναι τίτλοι.
 */
.ask__form .field > label:not(.consent-check) {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--cat-ink);
}

/*
 * Το ίδιο και για το πλάτος: «input { width: 100% }» έκανε το κουτάκι της
 * συγκατάθεσης 309 pixel φαρδύ.
 */
.ask__form input:not([type="checkbox"]),
.ask__form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D7DEE4;
  border-radius: 8px;
  /* 16px: κάτω από αυτό ο iPhone κάνει zoom μόλις πατηθεί το πεδίο, και ο
     επισκέπτης βρίσκεται ξαφνικά σε μεγεθυμένη σελίδα. */
  font: inherit;
  font-size: 16px;
  background: #fff;
  color: var(--cat-ink);
}

.ask__form input:focus,
.ask__form textarea:focus {
  outline: 2px solid var(--cat-accent-strong);
  outline-offset: 1px;
  border-color: var(--cat-accent-strong);
}

.ask__form textarea { resize: vertical; min-height: 76px; }

.ask__form .consent-field { margin: 12px 0; font-size: 13px; }

/* Κουτάκι και κείμενο στην ίδια γραμμή, με το κουτάκι στο ύψος της πρώτης
   σειράς — όχι κεντραρισμένο σε κείμενο τεσσάρων γραμμών. */
.ask__form .consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  line-height: 1.45;
}

.ask__form .consent-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--cat-accent-strong);
}

.ask__form .btn {
  width: 100%;
  background: var(--cat-accent);
  color: #04333d;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  min-height: 48px;
}

.ask__form .btn:hover { background: var(--cat-accent-strong); color: #04333d; }

/* Σε πολύ κοντές οθόνες (κινητό με ανοιχτό πληκτρολόγιο) το πλαίσιο πιάνει
   ό,τι ύψος υπάρχει και κυλάει μέσα του. */
@media (max-height: 560px) {
  .ask__panel { max-height: calc(100vh - 96px); }
}

/* Σε στενή οθόνη το κουμπί κρατά μόνο το εικονίδιο, για να μη σκεπάζει
   περιεχόμενο. */
@media (max-width: 420px) {
  .ask__btn-text { display: none; }
  .ask__btn { padding: 0; width: 52px; justify-content: center; }
}

/* Οι ειδοποιήσεις ανεβαίνουν πάνω από το κουμπί — αλλιώς το σκεπάζουν. */
.cat-toasts { bottom: 84px; }

/* ── Κατηγορία «χωρίς εικόνες»: λίστα με ονόματα ────────────────────── */
/* Για τιμοκαταλόγους. Ίδια συμπεριφορά με τις κάρτες (ανοίγει το ίδιο
   παράθυρο, ίδιο κουμπί αντιγραφής συνδέσμου), χωρίς εξώφυλλο.
   Το όνομα σε σκούρο (#0B1A26 σε λευκό: 17:1) και η γαλάζια γραμμή αριστερά
   κρατά το χρώμα του site — το γαλάζιο ως γράμμα θα ήταν 1,9:1, δυσανάγνωστο. */
.grid--list { gap: 12px; }
.card--text {
  flex-direction: row;
  align-items: center;
  min-height: 64px;
  text-align: left;
  border-left: 4px solid var(--cat-accent);
}
.card--text:hover,
.card--text:focus-visible { transform: translateY(-2px); }
.card--text .card__body {
  border-top: 0;
  padding: 14px 52px 14px 16px;   /* χώρος δεξιά για το κουμπί αντιγραφής */
  width: 100%;
}
.card--text .card__title { color: var(--cat-ink); margin: 0; font-size: 16px; }
.card--text .card__sub { margin-top: 4px; }
.card-wrap:has(.card--text) .card-share {
  top: 50%;
  transform: translateY(-50%);
}