/* HO Builder - front (HappyOnline 2026-08)
   Grid 12 στηλών, χωρίς εξάρτηση από το grid του theme, ώστε ο builder να
   συμπεριφέρεται ίδια όπου κι αν μπει. */

.ho-b { --ho-b-max: 1776px; --ho-b-gap: 20px; --ho-b-accent: #ff6600; }

.ho-b-container { width: 100%; max-width: var(--ho-b-max); margin: 0 auto; padding: 0 12px; box-sizing: border-box; }
.ho-b-fluid { width: 100%; padding: 0 12px; box-sizing: border-box; }
.ho-b-full { width: 100%; }

.ho-b-row { position: relative; }
.ho-b-row--default { }
.ho-b-row--hero { padding: 0; }
.ho-b-row--band { padding: 42px 0; }

/* κεφαλίδα ενότητας */
.ho-b-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ho-b-head--center { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ho-b-head--center .ho-b-head-text { max-width: 720px; }
.ho-b-head--right { justify-content: flex-end; text-align: right; }
.ho-b-title { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 700; }
.ho-b-subtitle { margin: 6px 0 0; color: #6b6b6b; font-size: 15px; }

.ho-b-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid var(--ho-b-accent); border-radius: 999px; color: var(--ho-b-accent); background: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.ho-b-btn:hover { background: var(--ho-b-accent); color: #fff; text-decoration: none; transform: translateY(-1px); }
.ho-b-btn--solid { background: var(--ho-b-accent); color: #fff; }
.ho-b-btn--solid:hover { filter: brightness(1.07); }
.ho-b-band-cta { margin-top: 22px; text-align: center; }

/* στήλες */
.ho-b-cols { display: flex; flex-wrap: wrap; margin: 0 calc(var(--ho-b-gap) / -2); }
.ho-b-cols--flush { margin: 0; }
.ho-b-col { box-sizing: border-box; padding: 0 calc(var(--ho-b-gap) / 2); min-width: 0; }
.ho-b-cols--flush .ho-b-col { padding: 0; }

.ho-b-col-1 { width: 8.3333%; } .ho-b-col-2 { width: 16.6667%; } .ho-b-col-3 { width: 25%; }
.ho-b-col-4 { width: 33.3333%; } .ho-b-col-5 { width: 41.6667%; } .ho-b-col-6 { width: 50%; }
.ho-b-col-7 { width: 58.3333%; } .ho-b-col-8 { width: 66.6667%; } .ho-b-col-9 { width: 75%; }
.ho-b-col-10 { width: 83.3333%; } .ho-b-col-11 { width: 91.6667%; } .ho-b-col-12 { width: 100%; }

/* οριζόντια κύλιση για carousels χωρίς βιβλιοθήκη */
.ho-b-scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; }
.ho-b-scroll::-webkit-scrollbar { height: 6px; }
.ho-b-scroll::-webkit-scrollbar-thumb { background: #d5d5d7; border-radius: 3px; }
.ho-b-scroll > * { scroll-snap-align: start; flex: 0 0 calc((100% - (var(--ho-b-per-view, 4) - 1) * 16px) / var(--ho-b-per-view, 4)); }

/* slider */
.ho-b-slider { position: relative; overflow: hidden; }
.ho-b-slider-track { display: flex; transition: transform .45s ease; }
.ho-b-slide { flex: 0 0 100%; position: relative; display: block; }
.ho-b-slide img { display: block; width: 100%; height: auto; }
.ho-b-slide-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 6% 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.75); background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.ho-b-slide-title { font-size: 30px; font-weight: 700; line-height: 1.2; }
.ho-b-slide-sub { font-size: 16px; }
.ho-b-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #222; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.16); }
.ho-b-nav--prev { left: 14px; } .ho-b-nav--next { right: 14px; }
.ho-b-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 7px; }
.ho-b-dot { width: 22px; height: 4px; border: 0; border-radius: 2px; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; }
.ho-b-dot.is-active { background: var(--ho-b-accent); }

/* banners */
.ho-b-banners { display: flex; gap: 16px; flex-wrap: wrap; }
.ho-b-banners.ho-b-scroll { flex-wrap: nowrap; }
.ho-b-banner { display: block; position: relative; flex: 1 1 0; min-width: 0; }
.ho-b-scroll .ho-b-banner { flex: 0 0 calc((100% - (var(--ho-b-per-view, 4) - 1) * 16px) / var(--ho-b-per-view, 4)); }
.ho-b-banner img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ho-b-banner-title { display: block; margin-top: 8px; font-weight: 600; font-size: 14px; }

/* προϊόντα */
.ho-b-products { display: flex; gap: 16px; flex-wrap: wrap; }
.ho-b-products.ho-b-scroll { flex-wrap: nowrap; }
.ho-b-product { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid #ececee; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.ho-b-products:not(.ho-b-scroll) .ho-b-product { flex: 1 1 200px; }
.ho-b-product-media { position: relative; display: block; }
.ho-b-product-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.ho-b-product-badge { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 6px; background: var(--ho-b-accent); color: #fff; font-size: 13px; font-weight: 700; }
.ho-b-product-name { display: block; color: #333; font-size: 14px; font-weight: 600; line-height: 1.4; min-height: 40px; text-decoration: none; }
.ho-b-product-price { display: flex; align-items: baseline; gap: 8px; }
.ho-b-price-new { font-size: 19px; font-weight: 700; }
.ho-b-price-old { font-size: 13px; color: #999; text-decoration: line-through; }
.ho-b-product-cart { margin-top: auto; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--ho-b-accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; }
.ho-b-product-cart:hover { filter: brightness(1.07); }

/* image box */
.ho-b-imagebox { display: flex; flex-direction: column; gap: 10px; }
.ho-b-imagebox img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ho-b-imagebox-title { margin: 0; font-size: 20px; font-weight: 700; }
.ho-b-imagebox-text { margin: 0; color: #6b6b6b; font-size: 14px; }

/* κατηγορίες */
.ho-b-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #333; text-decoration: none; }
.ho-b-cat img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ho-b-cat-title { font-size: 14px; font-weight: 600; text-align: center; }

.ho-b-html img, .ho-b-html iframe { max-width: 100%; }

/* preview */
.ho-b-preview-bar { padding: 10px 16px; background: #222; color: #fff; font-size: 13px; text-align: center; }

@media (max-width: 991px) {
  .ho-b-col-t-1 { width: 8.3333%; } .ho-b-col-t-2 { width: 16.6667%; } .ho-b-col-t-3 { width: 25%; }
  .ho-b-col-t-4 { width: 33.3333%; } .ho-b-col-t-6 { width: 50%; } .ho-b-col-t-12 { width: 100%; }
  .ho-b-title { font-size: 22px; }
  .ho-b-slide-title { font-size: 22px; }
}

@media (max-width: 767px) {
  .ho-b-row--default, .ho-b-row--band { padding: 24px 0; }
  .ho-b-col { width: 100%; }
  .ho-b-col-m-1 { width: 8.3333%; } .ho-b-col-m-2 { width: 16.6667%; } .ho-b-col-m-3 { width: 25%; }
  .ho-b-col-m-4 { width: 33.3333%; } .ho-b-col-m-6 { width: 50%; } .ho-b-col-m-12 { width: 100%; }
  .ho-b-head { margin-bottom: 14px; }
  .ho-b-title { font-size: 19px; }
  .ho-b-scroll > *, .ho-b-scroll .ho-b-banner { flex: 0 0 72%; }
  .ho-b-nav { width: 34px; height: 34px; font-size: 20px; }
  .ho-b-slide-text { left: 5%; bottom: 8%; gap: 6px; }
  .ho-b-slide-title { font-size: 17px; }
  .ho-b-slide-sub { font-size: 13px; }
}

/* ---------- heading block ---------- */
.ho-b-heading { display: flex; flex-direction: column; gap: 10px; }
.ho-b-heading--center { align-items: center; text-align: center; }
.ho-b-heading--right { align-items: flex-end; text-align: right; }
.ho-b-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ho-b-heading-title { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; }
.ho-b-heading-text { margin: 0; font-size: 15px; line-height: 1.55; opacity: .9; }
.ho-b-heading .ho-b-btn { margin-top: 6px; }

/* ---------- hotspot block ---------- */
.ho-b-hotspot { position: relative; }
.ho-b-hotspot-media { display: block; }
.ho-b-hotspot-media img { width: 100%; height: auto; display: block; border-radius: 10px; }
.ho-b-spot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.ho-b-spot-dot { display: block; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--ho-b-accent, #ef5713); box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: pointer; position: relative; }
.ho-b-spot-dot::before, .ho-b-spot-dot::after { content: ''; position: absolute; background: var(--ho-b-accent, #ef5713); }
.ho-b-spot-dot::before { left: 50%; top: 5px; bottom: 5px; width: 2px; transform: translateX(-50%); }
.ho-b-spot-dot::after { top: 50%; left: 5px; right: 5px; height: 2px; transform: translateY(-50%); }
.ho-b-spot-card { position: absolute; bottom: 130%; display: flex; gap: 10px; align-items: center; width: 250px; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.ho-b-spot--left .ho-b-spot-card { right: -8px; }
.ho-b-spot--right .ho-b-spot-card { left: -8px; }
.ho-b-spot:hover .ho-b-spot-card, .ho-b-spot.is-open .ho-b-spot-card { opacity: 1; visibility: visible; transform: translateY(0); }
.ho-b-spot-card img { width: 62px; height: 62px; object-fit: contain; flex: 0 0 auto; }
.ho-b-spot-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ho-b-spot-title { font-size: 12.5px; font-weight: 600; color: #222; text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ho-b-spot-price { font-size: 14px; font-weight: 700; color: var(--ho-b-accent, #ef5713); }

/* ---------- blog block ---------- */
.ho-b-posts { display: grid; grid-template-columns: repeat(var(--ho-b-per-view, 3), minmax(0, 1fr)); gap: 18px; }
.ho-b-post { background: #fff; border: 1px solid #eee; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.ho-b-post-media img { width: 100%; height: auto; display: block; }
.ho-b-post-body { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.ho-b-post-title { font-size: 14.5px; font-weight: 600; color: #222; text-decoration: none; line-height: 1.4; }
.ho-b-post-title:hover { color: var(--ho-b-accent, #ef5713); }
.ho-b-post-date { font-size: 12px; color: #8a8a8a; }

/* ---------- newsletter block ---------- */
.ho-b-news { width: 100%; }
.ho-b-news-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ho-b-news-input { flex: 1 1 220px; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid #ddd; border-radius: 25px; font-size: 14px; }
.ho-b-news-btn { height: 46px; padding: 0 34px; border: 2px solid var(--ho-b-accent, #ef5713); border-radius: 25px; background: #fff; color: #111; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease; }
.ho-b-news-btn:hover { background: var(--ho-b-accent, #ef5713); color: #fff; }
.ho-b-news-note { margin: 8px 0 0; font-size: 12px; color: #777; }
.ho-b-news-msg { margin: 8px 0 0; font-size: 13px; }
.ho-b-news-msg.is-ok { color: #2e7d32; }
.ho-b-news-msg.is-error { color: #c62828; }

@media (max-width: 991px) {
  .ho-b-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ho-b-heading-title { font-size: 24px; }
}

@media (max-width: 767px) {
  .ho-b-posts { grid-template-columns: 1fr; }
  .ho-b-heading-title { font-size: 21px; }
  .ho-b-spot-card { width: 210px; }
}

/* Σε γραμμές/στήλες με δικό τους χρώμα κειμένου, τα κουτιά ακολουθούν. */
.ho-b-imagebox-title { color: inherit; }
.ho-b-imagebox-text { color: inherit; opacity: .9; }
.ho-b-heading-title, .ho-b-heading-text { color: inherit; }

/* ---------- κάρτα προϊόντος σαν του theme ---------- */
.ho-b-product { text-align: center; align-items: center; }
.ho-b-product-brand { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ho-b-accent, #ef5713); }
.ho-b-product-name { text-align: center; font-weight: 500; }
.ho-b-product-model { font-size: 11.5px; color: #8a8a8a; }
.ho-b-product-price { justify-content: center; }
.ho-b-product-actions { display: flex; gap: 6px; justify-content: center; margin-top: 2px; }
.ho-b-product-act { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 30px; border: 1px solid #e3e3e5; border-radius: 6px; background: #fff; color: #666; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.ho-b-product-act:hover { border-color: var(--ho-b-accent, #ef5713); color: var(--ho-b-accent, #ef5713); }
.ho-b-product-cart { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ho-b-product-cart svg { flex: 0 0 auto; }

@media (max-width: 767px) {
  .ho-b-product-act { width: 38px; height: 28px; }
  .ho-b-product-model { display: none; }
}

.ho-b-btn-wrap { display: flex; }
.ho-b-btn-wrap--center { justify-content: center; }
.ho-b-btn-wrap--right { justify-content: flex-end; }
.ho-b-image { display: flex; }
.ho-b-image--center { justify-content: center; }
.ho-b-image--right { justify-content: flex-end; }
.ho-b-image img { max-width: 100%; height: auto; }

/* ==========================================================================
   HappyOnline 2026-08-27 - ΣΧΕΔΙΑΣΗ ΠΕΡΙΕΧΟΜΕΝΟΥ
   Μπαίνει στις περιγραφές προϊόντων και στα άρθρα, μέσω των .ho-c-* κλάσεων
   που ορίζουν τα πρότυπα. Καμία επίδραση σε ό,τι υπάρχει ήδη.
   ========================================================================== */

/* ΜΟΝΟ περιθώριο εδώ. Το χρώμα μπαίνει ανά συστατικό, αλλιώς αυτός ο
   κανόνας νικά σε ειδικότητα και σκουραίνει πορτοκαλί τίτλους. */
.ho-b [class*="ho-c-"] h3,
.ho-b [class*="ho-c-"] h4 { margin: 0 0 12px; }

/* ---------------------------------------------- πίνακας χαρακτηριστικών --- */
.ho-c-specs { margin: 24px 0; }

.ho-c-specs h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ef5713;
  padding-bottom: 10px;
  border-bottom: 2px solid #ef5713;
  margin-bottom: 0;
}

.ho-c-specs ul { list-style: none; margin: 0; padding: 0; }

.ho-c-specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  border-bottom: 1px solid #ececee;
}

.ho-c-specs li:nth-child(odd) { background: #fafafb; }
.ho-c-specs li:last-child { border-bottom: 0; }
.ho-c-specs li span { color: #6b6b6b; }
.ho-c-specs li b { color: #222; font-weight: 600; text-align: right; }

/* ------------------------------------------------------ κάρτες οφελών --- */
.ho-c-benefits { margin: 24px 0; }

.ho-c-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid #ececee;
  border-radius: 14px;
  padding: 26px 22px 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ho-c-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
  border-color: #e3e3e5;
}

.ho-c-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: #ef5713;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.ho-c-card h4 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: #222; }
.ho-c-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #6b6b6b; }

/* ------------------------------------------------ κείμενο με εικόνα --- */
.ho-c-media { margin: 22px 0; }
.ho-c-media .ho-b-col-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.ho-c-media h3 { font-size: 23px; font-weight: 700; line-height: 1.3; color: #222; }

.ho-c-media h3::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 12px;
  background: #ef5713;
  border-radius: 2px;
}

.ho-c-lead { font-size: 16px; line-height: 1.8; color: #4a4a4a; margin: 14px 0 0; }

.ho-c-media img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .10);
}

/* κενή στήλη εικόνας: να φαίνεται ως θέση, όχι ως σφάλμα */




/* ------------------------------------------------------- ερωτήσεις --- */
.ho-c-faq { margin: 26px 0; }
.ho-b .ho-c-faq h3 { color: #222; }

.ho-c-q {
  border: 1px solid #ececee;
  border-radius: 12px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.ho-c-q:hover { border-color: #e3e3e5; box-shadow: 0 2px 10px rgba(0, 0, 0, .05); }
.ho-c-q[open] { border-color: #ef5713; }

.ho-c-q summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 16px 52px 16px 18px;
  font-size: 17px;
  font-weight: 600;
  color: #222;
  background: #fafafb;
  transition: color .18s ease, background .18s ease;
}

.ho-c-q summary::-webkit-details-marker { display: none; }
.ho-c-q summary:hover { color: #ef5713; }
.ho-c-q[open] summary { color: #ef5713; background: #fff; }

.ho-c-q summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  background:
    linear-gradient(#ef5713, #ef5713) center/13px 2px no-repeat,
    linear-gradient(#ef5713, #ef5713) center/2px 13px no-repeat;
  transition: transform .2s ease;
}

/* Μείον: κρύβουμε την κάθετη γραμμή. ΧΩΡΙΣ rotate, αλλιώς η οριζόντια
   γίνεται κάθετη και φαίνεται σαν παύλα στο πλάι. */
.ho-c-q[open] summary::after { transform: none; background-size: 13px 2px, 0 0; }

.ho-c-q > div,
.ho-c-q > p { padding: 6px 18px 18px; margin: 0; font-size: 16px; line-height: 1.8; color: #4a4a4a; }
.ho-c-q > div p { margin: 0 0 12px; font-size: 16px; line-height: 1.8; color: #4a4a4a; }
.ho-c-q > div p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- βήματα --- */
.ho-c-steps { margin: 34px 0; }
.ho-c-steps ol { list-style: none; counter-reset: hoc; margin: 0; padding: 0; }

.ho-c-steps li {
  counter-increment: hoc;
  position: relative;
  padding: 0 0 26px 62px;
  font-size: 15.5px;
  line-height: 1.75;
  color: #4a4a4a;
}

.ho-c-steps li::before {
  content: counter(hoc);
  position: absolute;
  left: 0;
  top: -2px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ef5713;
  color: #ef5713;
  font-weight: 700;
  font-size: 16px;
}

.ho-c-steps li::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: 4px;
  width: 2px;
  background: #ececee;
}

.ho-c-steps li:last-child { padding-bottom: 0; }
.ho-c-steps li:last-child::after { display: none; }
.ho-c-steps li strong { color: #222; }

/* -------------------------------------------------------- σύγκριση --- */
.ho-c-compare { margin: 34px 0; }

.ho-c-vs {
  height: 100%;
  border: 1px solid #ececee;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.ho-c-vs > h4 {
  margin: 0;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  background: #f6f7f9;
  border-bottom: 1px solid #ececee;
}

.ho-b .ho-c-vs--accent > h4 { background: #ef5713; color: #fff; border-bottom-color: #ef5713; }
.ho-c-vs ul { list-style: none; margin: 0; padding: 16px 18px; }

.ho-c-vs li {
  position: relative;
  padding: 7px 0 7px 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a4a4a;
}

.ho-c-vs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 12px;
  height: 6px;
  border-left: 2px solid #ef5713;
  border-bottom: 2px solid #ef5713;
  transform: rotate(-45deg);
}

/* -------------------------------------------------------- εισαγωγή --- */
.ho-c-intro { margin: 18px 0 24px; }

.ho-c-intro .ho-c-lead {
  padding-left: 18px;
  border-left: 3px solid #ef5713;
  font-size: 17.5px;
  line-height: 1.8;
  color: #333;
  margin: 0 0 20px;
}

.ho-c-intro img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 22px rgba(0, 0, 0, .10); }

/* ------------------------------------------- εναλλαγή πλευράς εικόνας --- */
/* Μόνο σε desktop. Στα κινητά η στοίβα μένει κείμενο -> εικόνα, που διαβάζεται
   σωστά. Το .rt-row του θέματος είναι flex, οπότε το row-reverse πιάνει. */
@media (min-width: 992px) {
  .ho-c-media--flip > .rt-row { flex-direction: row-reverse; }
}

/* ------------------------------------------------------------ γκαλερί --- */
.ho-c-gallery { margin: 30px 0; }

.ho-c-gallery .ho-b-col-inner {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.ho-c-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  transition: transform .4s ease;
}

.ho-c-gallery .ho-b-col-inner:hover img { transform: scale(1.06); }

/* κενές θέσεις εικόνας, σε γκαλερί και σε ενότητες κειμένου/εικόνας */




/* -------------------------------------------------- κουτί επισήμανσης --- */
.ho-c-note {
  margin: 22px 0;
  padding: 16px 20px;
  background: #fff6f2;
  border-left: 4px solid #ef5713;
  border-radius: 0 12px 12px 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: #333;
}

.ho-c-note strong { color: #ef5713; }

@media (max-width: 767px) {
  .ho-c-gallery .ho-b-col-inner { margin-bottom: 14px; }
  .ho-c-note { font-size: 15px; padding: 14px 16px; }
}

/* ------------------------------------------------------- κινητά --- */
/* ----------------------------------------------------- σκέτο κείμενο --- */
.ho-c-plain { margin: 18px 0; }
.ho-c-plain h3 { font-size: 21px; font-weight: 700; line-height: 1.35; color: #222; margin: 0 0 12px; }
.ho-c-plain p { font-size: 16px; line-height: 1.85; color: #4a4a4a; margin: 0 0 14px; }
.ho-c-plain p:last-child { margin-bottom: 0; }
.ho-c-plain ul { margin: 0 0 14px; padding-left: 22px; }
.ho-c-plain li { font-size: 16px; line-height: 1.8; color: #4a4a4a; margin-bottom: 6px; }
.ho-c-intro h3 { font-size: 22px; font-weight: 700; color: #222; margin: 0 0 14px; }
.ho-c-intro p { font-size: 16px; line-height: 1.85; color: #4a4a4a; }
.ho-c-media p, .ho-c-media li { font-size: 15.5px; line-height: 1.8; color: #4a4a4a; }
.ho-c-media h3 + p { margin-top: 14px; }
.ho-c-media ul { padding-left: 20px; }



/* Θέση εικόνας που δεν έχει συμπληρωθεί. Χωρίς αυτό το κουτί η ετικέτα
   έπεφτε πάνω στο κείμενο και η γραμμή φαινόταν σπασμένη. */
.ho-c-imgph {
  display: block;
  min-height: 260px;
  height: 100%;
  border: 2px dashed #e3e3e5;
  border-radius: 14px;
  background: #fbfbfc;
  position: relative;
}

.ho-c-imgph::after {
  content: "εδώ μπαίνει εικόνα";
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 13px;
  color: #8a8a8a;
}

/* Λίστα με τικ μέσα σε τρεχούμενο κείμενο: χωρίς πλαίσιο και κεφαλίδα, ώστε να
   μη σπάει τη ροή του άρθρου. Μόνο τα τικ και ο αέρας αλλάζουν. */
.ho-c-vs--bare {
  border: 0;
  border-radius: 0;
  background: transparent;
  margin: 6px 0 16px;
}

.ho-c-vs--bare ul { padding: 0; }
.ho-c-vs--bare li { font-size: 16px; line-height: 1.8; }

/* ==========================================================================
   ΔΙΚΟ ΜΑΣ GRID
   Οι στήλες του builder ΔΕΝ πρέπει να εξαρτώνται από το grid του θέματος: στη
   σελίδα άρθρου τα rt-col-lg-* δεν εφάρμοζαν, οπότε κάθε στήλη έπιανε 100% και
   η εικόνα έπεφτε από κάτω σε πλήρες πλάτος. Τα ορίζουμε εδώ, με ειδικότητα
   που κερδίζει, και μόνο μέσα στο .ho-b ώστε να μην αγγίζει το θέμα.
   ========================================================================== */
@media (min-width: 992px) {
  .ho-b .rt-row > .rt-col-lg-1 { flex: 0 0 auto; width: 8.3333%; }
  .ho-b .rt-row > .rt-col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
  .ho-b .rt-row > .rt-col-lg-3 { flex: 0 0 auto; width: 25%; }
  .ho-b .rt-row > .rt-col-lg-4 { flex: 0 0 auto; width: 33.3333%; }
  .ho-b .rt-row > .rt-col-lg-5 { flex: 0 0 auto; width: 41.6667%; }
  .ho-b .rt-row > .rt-col-lg-6 { flex: 0 0 auto; width: 50%; }
  .ho-b .rt-row > .rt-col-lg-7 { flex: 0 0 auto; width: 58.3333%; }
  .ho-b .rt-row > .rt-col-lg-8 { flex: 0 0 auto; width: 66.6667%; }
  .ho-b .rt-row > .rt-col-lg-9 { flex: 0 0 auto; width: 75%; }
  .ho-b .rt-row > .rt-col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
  .ho-b .rt-row > .rt-col-lg-11 { flex: 0 0 auto; width: 91.6667%; }
  .ho-b .rt-row > .rt-col-lg-12 { flex: 0 0 auto; width: 100%; }
}

@media (max-width: 991px) {
  .ho-b .rt-row > [class*="rt-col"] { width: 100%; }
  .ho-b .ho-c-media .ho-b-col-inner { margin-bottom: 16px; }
}

/* Η εικόνα ενότητας να μην ξεφεύγει σε ύψος όταν η στήλη είναι στενή. */
.ho-b .ho-c-media img,
.ho-b .ho-c-intro img { max-height: 420px; object-fit: cover; }

/* Κάρτα χωρίς τίτλο: το κείμενο είναι το περιεχόμενο, όχι υπότιτλος. */
.ho-c-card--plain { padding: 22px; }
.ho-c-card--plain p { font-size: 15.5px; line-height: 1.7; color: #333; }

/* ==========================================================================
   ΑΚΥΡΩΣΗ ΤΟΥ blog-contents * { width: unset !important }
   Το θέμα του blog σβήνει κάθε πλάτος σε ΟΛΟΥΣ τους απογόνους του άρθρου.
   Χωρίς αυτό το μπλοκ, μέσα σε άρθρο: οι στήλες γίνονται 100%, η εικόνα
   πέφτει από κάτω σε πλήρες πλάτος, τα κυκλάκια χάνουν το σχήμα τους.
   Επαναφέρουμε τα πλάτη μόνο μέσα στο .ho-b. Το !important είναι ο μόνος
   τρόπος να νικηθεί !important σε καθολικό επιλογέα.
   ========================================================================== */
@media (min-width: 992px) {
  .ho-b .rt-row > .rt-col-lg-1 { width: 8.3333% !important; }
  .ho-b .rt-row > .rt-col-lg-2 { width: 16.6667% !important; }
  .ho-b .rt-row > .rt-col-lg-3 { width: 25% !important; }
  .ho-b .rt-row > .rt-col-lg-4 { width: 33.3333% !important; }
  .ho-b .rt-row > .rt-col-lg-5 { width: 41.6667% !important; }
  .ho-b .rt-row > .rt-col-lg-6 { width: 50% !important; }
  .ho-b .rt-row > .rt-col-lg-7 { width: 58.3333% !important; }
  .ho-b .rt-row > .rt-col-lg-8 { width: 66.6667% !important; }
  .ho-b .rt-row > .rt-col-lg-9 { width: 75% !important; }
  .ho-b .rt-row > .rt-col-lg-10 { width: 83.3333% !important; }
  .ho-b .rt-row > .rt-col-lg-11 { width: 91.6667% !important; }
  .ho-b .rt-row > .rt-col-lg-12 { width: 100% !important; }
}

@media (max-width: 991px) {
  .ho-b .rt-row > [class*="rt-col"] { width: 100% !important; }
}

/* Στοιχεία που χρειάζονται συγκεκριμένο πλάτος για να έχουν σχήμα. */
.ho-b .ho-c-num { width: 38px !important; height: 38px !important; }
.ho-b .ho-c-media img,
.ho-b .ho-c-intro img,
.ho-b .ho-c-gallery img { width: 100% !important; }
.ho-b .ho-c-imgph { width: 100% !important; }
.ho-b .ho-c-media h3::after { width: 46px !important; }
.ho-b .ho-c-steps li::before { width: 40px !important; }
.ho-b .ho-c-vs li::before { width: 12px !important; }
.ho-b .ho-c-q summary::after { width: 13px !important; }
.ho-b .ho-c-specs li b { width: auto !important; }

/* --- ΓΡΑΜΜΗ ΣΥΓΚΡΙΣΗΣ ---------------------------------------------------- */
/* Το κείμενο αριστερά κεντράρεται κατακόρυφα ως προς το κουτί δεξιά, που είναι
   ψηλότερο. Κεντράρεται ΜΟΝΟ η στήλη χωρίς κουτί, αλλιώς θα κεντραριζόταν και
   το κουτί μέσα στη στήλη του. */
.ho-b .ho-c-compare > .rt-row { align-items: stretch; }
.ho-b .ho-c-compare .ho-b-col-inner { height: 100%; }

.ho-b .ho-c-compare .ho-b-col-inner:not(:has(.ho-c-vs)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Λευκό φόντο στον τίτλο του κουτιού, με λεπτή γραμμή διαχωρισμού. */
.ho-b .ho-c-vs > h4 {
  background: #fff;
  border-bottom: 1px solid #ececee;
}

/* Το κυκλάκι του αριθμού: σωστός κύκλος, στοιχισμένο με το κείμενο, και
   ΠΑΝΤΑ ορατό ακόμα κι όταν το θέμα σβήνει πλάτη. */
.ho-b .ho-c-num {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  padding: 0;
  margin: 0 0 12px;
  border-radius: 50% !important;
  background: #ef5713 !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(239, 87, 19, .28);
}

/* --- ΚΕΝΤΡΑΡΙΣΜΑ ΧΩΡΙΣ ΥΨΟΣ --------------------------------------------- */
/* Το height:100% στο εσωτερικό της στήλης ακυρώνεται από το θέμα, οπότε το
   κείμενο έμενε στο πάνω μέρος. Flex container γίνεται η ΣΤΗΛΗ: το κεντράρισμα
   δεν χρειάζεται πλέον ύψος, και το κουτί συνεχίζει να γεμίζει τη στήλη. */
.ho-b .ho-c-compare > .rt-row > [class*="rt-col"],
.ho-b .ho-c-media > .rt-row > [class*="rt-col"],
.ho-b .ho-c-intro > .rt-row > [class*="rt-col"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ho-b .ho-c-compare .ho-b-col-inner,
.ho-b .ho-c-media .ho-b-col-inner,
.ho-b .ho-c-intro .ho-b-col-inner {
  height: auto !important;
  width: 100% !important;
}

/* Το κουτί με τα τικ και η θέση εικόνας γεμίζουν τη στήλη τους. */
.ho-b .ho-c-compare .ho-b-col-inner:has(.ho-c-vs),
.ho-b .ho-c-media .ho-b-col-inner:has(.ho-c-imgph) {
  flex: 1 1 auto;
}

.ho-b .ho-c-compare .ho-c-vs,
.ho-b .ho-c-media .ho-c-imgph { height: 100% !important; }

@media (max-width: 767px) {
  .ho-c-specs li { padding: 10px 12px; font-size: 14px; }
  .ho-c-card { padding: 20px 18px 18px; }
  .ho-c-media h3 { font-size: 20px; }
  .ho-c-lead, .ho-c-intro .ho-c-lead { font-size: 15.5px; }
  .ho-c-steps li { padding-left: 52px; font-size: 15px; }
  .ho-c-steps li::before { width: 34px; height: 34px; font-size: 15px; }
  .ho-c-steps li::after { left: 16px; top: 36px; }
  .ho-c-benefits .ho-b-col-inner { margin-bottom: 14px; }
  .ho-c-compare .ho-b-col-inner { margin-bottom: 14px; }
}

/* ==========================================================================
   ΘΕΜΑΤΑ ΓΡΑΜΜΗΣ ΑΡΧΙΚΗΣ
   Κάθε θέμα αλλάζει ΜΟΝΟ την εμφάνιση της γραμμής. Το πλήθος των banner ή των
   προϊόντων μένει ρύθμιση του block (per_view). Έτσι ένα θέμα δουλεύει με 1, 2,
   3 ή 4 στοιχεία χωρίς δικό του κώδικα.
   ========================================================================== */

/* ---------- Πλακίδια ------------------------------------------------------ */
.ho-b-row--plakidia > .rt-row { align-items: stretch; }
.ho-b-row--plakidia .ho-b-col-inner { height: 100%; }

.ho-b-row--plakidia .ho-b-banner,
.ho-b-row--plakidia .ho-b-cat,
.ho-b-row--plakidia .ho-b-imagebox {
  background: #fff;
  border: 1px solid #ececee;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ho-b-row--plakidia .ho-b-banner:hover,
.ho-b-row--plakidia .ho-b-cat:hover,
.ho-b-row--plakidia .ho-b-imagebox:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  border-color: #e0e0e2;
}

/* Ίδια αναλογία σε όλες τις εικόνες: άνισα αρχεία δεν σπάνε πια τη γραμμή.
   Ρυθμίζεται ανά γραμμή με --ho-b-tile-ratio στο πεδίο «έξτρα css». */
.ho-b-row--plakidia .ho-b-banner img,
.ho-b-row--plakidia .ho-b-cat img,
.ho-b-row--plakidia .ho-b-imagebox img {
  aspect-ratio: var(--ho-b-tile-ratio, 4 / 3);
  object-fit: cover;
  border-radius: 0;
}

.ho-b-row--plakidia .ho-b-banner-title,
.ho-b-row--plakidia .ho-b-cat-title { margin: 0; padding: 12px 14px; font-size: 14px; text-align: left; }
.ho-b-row--plakidia .ho-b-imagebox-body { padding: 0 14px 14px; }

/* ---------- Βιτρίνα ------------------------------------------------------- */
/* Το πλήθος των γραμμών που πιάνει η πρώτη στήλη βγαίνει από το πλήθος των
   στηλών: :first-child:nth-last-child(N) σημαίνει «πρώτο και συνολικά N». */
@media (min-width: 992px) {
  .ho-b-row--vitrina > .rt-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    margin: 0;
  }

  .ho-b-row--vitrina > .rt-row > [class*="rt-col"] {
    width: auto !important;
    max-width: none;
    padding: 0;
  }

  .ho-b-row--vitrina > .rt-row > [class*="rt-col"]:first-child:nth-last-child(3) { grid-row: span 2; }
  .ho-b-row--vitrina > .rt-row > [class*="rt-col"]:first-child:nth-last-child(4) { grid-row: span 3; }
  .ho-b-row--vitrina > .rt-row > [class*="rt-col"]:first-child:nth-last-child(5) { grid-row: span 4; }

  .ho-b-row--vitrina .ho-b-col-inner,
  .ho-b-row--vitrina .ho-b-banner,
  .ho-b-row--vitrina .ho-b-imagebox { height: 100%; }

  .ho-b-row--vitrina .ho-b-banner img,
  .ho-b-row--vitrina .ho-b-imagebox img { height: 100%; object-fit: cover; }
}

.ho-b-row--vitrina .ho-b-banner img,
.ho-b-row--vitrina .ho-b-imagebox img { border-radius: 12px; }

/* ---------- Λωρίδα λογοτύπων --------------------------------------------- */
.ho-b-row--lorida { background: #f7f7f8; padding-top: 18px; padding-bottom: 18px; }
.ho-b-row--lorida .ho-b-head { margin-bottom: 10px; }
.ho-b-row--lorida .ho-b-title { font-size: 15px; font-weight: 600; }
.ho-b-row--lorida .ho-b-subtitle { display: none; }

.ho-b-row--lorida .ho-b-banner img,
.ho-b-row--lorida .ho-b-cat img {
  height: 46px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 0;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}

.ho-b-row--lorida .ho-b-banner:hover img,
.ho-b-row--lorida .ho-b-cat:hover img { filter: none; opacity: 1; }
.ho-b-row--lorida .ho-b-banner-title,
.ho-b-row--lorida .ho-b-cat-title { display: none; }

/* ---------- Προσφορές ---------------------------------------------------- */
.ho-b-row--prosfores { background: linear-gradient(180deg, #fff6f2, #fff); }
.ho-b-row--prosfores .ho-b-title::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 8px;
  background: var(--ho-b-accent, #ef5713);
}

.ho-b-row--prosfores .ho-b-product { border-color: #f3d9cc; box-shadow: 0 6px 18px rgba(239,87,19,.10); }
.ho-b-row--prosfores .ho-b-product-badge { font-size: 14px; padding: 4px 11px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ho-b-row--prosfores .ho-b-price-new { color: #c62828; font-size: 21px; }

/* ---------- Σκούρα μπάντα ------------------------------------------------ */
.ho-b-row--skoteini { background: #17181c; color: #fff; padding-top: 34px; padding-bottom: 34px; }
.ho-b-row--skoteini .ho-b-title,
.ho-b-row--skoteini .ho-b-heading-title,
.ho-b-row--skoteini .ho-b-banner-title,
.ho-b-row--skoteini .ho-b-cat,
.ho-b-row--skoteini .ho-b-cat-title,
.ho-b-row--skoteini .ho-b-product-name,
.ho-b-row--skoteini .ho-b-price-new { color: #fff; }

.ho-b-row--skoteini .ho-b-subtitle,
.ho-b-row--skoteini .ho-b-heading-text,
.ho-b-row--skoteini .ho-b-product-brand,
.ho-b-row--skoteini .ho-b-product-model { color: #b9bbc0; }

.ho-b-row--skoteini .ho-b-btn { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.ho-b-row--skoteini .ho-b-btn:hover { background: #fff; color: #17181c; border-color: #fff; }
.ho-b-row--skoteini .ho-b-btn--solid { background: var(--ho-b-accent, #ef5713); border-color: var(--ho-b-accent, #ef5713); color: #fff; }
.ho-b-row--skoteini .ho-b-product { background: #1e2026; border-color: #2c2f37; box-shadow: none; }
.ho-b-row--skoteini .ho-b-scroll::-webkit-scrollbar-thumb { background: #40434c; }

@media (max-width: 991px) {
  .ho-b-row--lorida .ho-b-banner img,
  .ho-b-row--lorida .ho-b-cat img { height: 38px; }
}

@media (max-width: 767px) {
  .ho-b-row--skoteini { padding-top: 24px; padding-bottom: 24px; }
  .ho-b-row--plakidia .ho-b-banner img,
  .ho-b-row--plakidia .ho-b-cat img { aspect-ratio: var(--ho-b-tile-ratio, 16 / 9); }
}

/* ΒΙΝΤΕΟ ΣΤΗΝ ΠΕΡΙΓΡΑΦΗ
   Το iframe μπαίνει στο κλικ, οπότε το κουτί πρέπει να κρατά τη θέση του με
   την αναλογία, αλλιώς η σελίδα αναπηδά όταν αντικατασταθεί το εξώφυλλο. */
.ho-b-video { margin: 0; }
.ho-b-video__open,
.ho-b-video > iframe {
  display: block; width: 100%; border: 0; padding: 0; border-radius: 10px;
  overflow: hidden; background: #111; position: relative; cursor: pointer;
}
.ho-b-video--16x9 .ho-b-video__open, .ho-b-video--16x9 > iframe { aspect-ratio: 16 / 9; }
.ho-b-video--4x3  .ho-b-video__open, .ho-b-video--4x3  > iframe { aspect-ratio: 4 / 3; }
.ho-b-video--1x1  .ho-b-video__open, .ho-b-video--1x1  > iframe { aspect-ratio: 1 / 1; }
.ho-b-video__thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.ho-b-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%; background: rgba(239, 87, 19, .92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); transition: transform .15s ease;
}
.ho-b-video__play::after {
  content: ''; position: absolute; left: 29px; top: 24px;
  border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff;
}
.ho-b-video__open:hover .ho-b-video__play { transform: translate(-50%, -50%) scale(1.07); }
.ho-b-video__title {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px;
  color: #fff; font-size: 15px; font-weight: 700; text-align: left;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
.ho-b-video__caption { margin-top: 8px; font-size: 13.5px; color: #6a6a70; }

@media (max-width: 767px) {
  .ho-b-video__play { width: 58px; height: 58px; }
  .ho-b-video__play::after { left: 23px; top: 18px; border-width: 11px 0 11px 17px; }
}

/* ΣΤΟΙΧΙΣΗ ΚΑΘ' ΥΨΟΣ ΑΝΑ ΓΡΑΜΜΗ
   Λύνει το «στοιχίζω με το χέρι στο laptop και στο desktop είναι κουνημένα»:
   η στοίχιση γίνεται μία φορά με CSS και κρατά σε κάθε πλάτος οθόνης.
   Χωρίς κλάση δεν αλλάζει τίποτα, ώστε η εγκεκριμένη αρχική να μείνει ίδια.
   Στοχεύεται η ΕΣΩΤΕΡΙΚΗ σειρά των στηλών, όχι η σειρά του τίτλου. */
.ho-b-va-top > .rt-row { align-items: flex-start; }
.ho-b-va-middle > .rt-row { align-items: center; }
.ho-b-va-bottom > .rt-row { align-items: flex-end; }

/* Στα κινητά οι στήλες στοιβάζονται, οπότε η στοίχιση καθ' ύψος δεν έχει νόημα
   και μόνο μπερδεύει τα κενά. */
@media (max-width: 767px) {
  .ho-b-va-top > .rt-row,
  .ho-b-va-middle > .rt-row,
  .ho-b-va-bottom > .rt-row { align-items: stretch; }
}

/* ------------------------------------------------------------------------- */
/* ΙΣΟΫΨΕΙΣ ΖΩΝΕΣ ΑΝΑ ΓΡΑΜΜΗ, αίτημα 3α, δεύτερο πέρασμα 10/09/2026.
   Στη δική τους εικόνα με τις τέσσερις κάρτες οι εικόνες ήταν στοιχισμένες,
   αλλά ο τίτλος με τρεις σειρές έσπρωχνε το κείμενό του ~27px πιο κάτω. Η
   στοίχιση καθ' ύψος δεν το λύνει, γιατί στοιχίζει τη στήλη ως ένα μπλοκ.
   Εδώ οι στήλες μοιράζονται τις ΙΔΙΕΣ γραμμές του grid, οπότε κάθε ζώνη
   παίρνει το ύψος της ψηλότερης και όλα ξεκινούν στην ίδια γραμμή.
   Χωρίς την κλάση δεν αλλάζει τίποτα. Χωρίς υποστήριξη subgrid, ούτε. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 768px) {
		.ho-b-bands > .rt-row {
			display: grid;
			/* Ρητές ΙΣΕΣ στήλες. Χωρίς αυτό οι auto στήλες μοιράζουν τον χώρο με βάση
			   το περιεχόμενο και βγαίνουν ανόμοιες (μετρήθηκε 139 και 152px δίπλα-δίπλα).
			   Το minmax(0,1fr) εμποδίζει μια μακριά λέξη να φουσκώσει τη στήλη. */
			grid-template-columns: repeat(12, minmax(0, 1fr));
			/* ΔΥΟ ζώνες, όπως το ζήτησαν 14/09: η πρώτη γραμμή είναι η εικόνα και η
			   δεύτερη ό,τι ακολουθεί. Έτσι εικόνες και τίτλοι ξεκινούν στην ίδια
			   γραμμή, ενώ το κείμενο ρέει κάτω από τον ΔΙΚΟ του τίτλο. */
			grid-template-rows: auto auto;
			align-items: start;
		}

		/* Μέσα σε grid οι κλάσεις πλάτους του theme δεν ισχύουν, το πλάτος το
		   δίνει το span. Και τα 12 μπαίνουν, ώστε να καλύπτεται κάθε συνδυασμός. */
		.ho-b-bands > .rt-row > * {
			grid-row: 1 / -1;
			display: grid;
			grid-template-rows: subgrid;
			align-items: start;
			/* ΚΡΙΣΙΜΟ: οι κλάσεις rt-col-lg-N κουβαλούν width:25% κ.λπ. Σε flex αυτό
			   είναι ποσοστό της γραμμής, σε grid όμως λύνεται πάνω στην περιοχή του
			   κελιού, οπότε η στήλη μάζευε στο ένα τέταρτο (μετρήθηκε 104px αντί 435).
			   Το πλάτος το δίνει πλέον μόνο το span. Θέλει !important: ο κανόνας του
			   grid του theme ζει σε αρχείο που ο browser δεν μας αφήνει να διαβάσουμε
			   από JS, και μετρημένα κέρδιζε (η στήλη έμενε 108,75 από 435). */
			width: auto !important;
			max-width: none !important;
		}

		.ho-b-bands > .rt-row > .rt-col-lg-1 { grid-column: span 1; }
		.ho-b-bands > .rt-row > .rt-col-lg-2 { grid-column: span 2; }
		.ho-b-bands > .rt-row > .rt-col-lg-3 { grid-column: span 3; }
		.ho-b-bands > .rt-row > .rt-col-lg-4 { grid-column: span 4; }
		.ho-b-bands > .rt-row > .rt-col-lg-5 { grid-column: span 5; }
		.ho-b-bands > .rt-row > .rt-col-lg-6 { grid-column: span 6; }
		.ho-b-bands > .rt-row > .rt-col-lg-7 { grid-column: span 7; }
		.ho-b-bands > .rt-row > .rt-col-lg-8 { grid-column: span 8; }
		.ho-b-bands > .rt-row > .rt-col-lg-9 { grid-column: span 9; }
		.ho-b-bands > .rt-row > .rt-col-lg-10 { grid-column: span 10; }
		.ho-b-bands > .rt-row > .rt-col-lg-11 { grid-column: span 11; }
		.ho-b-bands > .rt-row > .rt-col-lg-12 { grid-column: span 12; }

		/* ΜΕΤΡΗΜΕΝΟ ΕΜΠΟΔΙΟ: δικός μας παλιότερος κανόνας πιο πάνω στο ίδιο αρχείο,
		   «.ho-b .rt-row > .rt-col-lg-3 { width: 25% !important }», κέρδιζε σε
		   ειδικότητα και κράταγε τη στήλη στα 108,75 από 435 pixel. Εδώ ίδια
		   ειδικότητα και πιο κάτω στο αρχείο, οπότε κερδίζει αυτός. */
		.ho-b .ho-b-bands > .rt-row > [class*="rt-col-"] {
			width: auto !important;
			max-width: none !important;
		}

		.ho-b-bands > .rt-row > * > .ho-b-col-inner {
			grid-row: 1 / -1;
			display: grid;
			grid-template-rows: subgrid;
			align-items: start;
			width: auto;
			max-width: none;
		}

		/* Το πρώτο μπλοκ, η εικόνα, πιάνει τη ΠΡΩΤΗ ζώνη και μένει κανονικό μπλοκ.
		   Ό,τι ακολουθεί ζει μέσα στο .ho-b-band-rest, που πιάνει τη ΔΕΥΤΕΡΗ ζώνη
		   και μέσα του τα στοιχεία ρέουν κανονικά. Έτσι οι τίτλοι ξεκινούν όλοι
		   στην ίδια γραμμή, χωρίς να ισοϋψώνονται μεταξύ τους, και το κείμενο
		   πέφτει ακριβώς κάτω από τον δικό του τίτλο. */
		.ho-b-bands .ho-b-col-inner > .ho-b-band-rest {
			display: block;
		}

		/* Ασφάλεια: σε grid το min-width auto σπάει τα μακριά κείμενα. */
		.ho-b-bands .ho-b-col-inner > *,
		.ho-b-bands .ho-c-card > * {
			min-width: 0;
		}
	}
}

/* Δικό μας αρχείο βίντεο (mp4/webm), αίτημα 14/09. Γεμίζει το ίδιο κουτί με
   το YouTube ώστε η αναλογία να μένει ίδια σε όλες τις γραμμές. */
.ho-b-video__file{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;border-radius:10px;}

/* Το .ho-b-band-rest υπάρχει σε κάθε στήλη αλλά είναι ουδέτερο: display:contents
   σημαίνει ότι δεν δημιουργεί κουτί, άρα καμία σελίδα δεν αλλάζει. Γίνεται
   πραγματικό μπλοκ ΜΟΝΟ μέσα σε γραμμή με ισοϋψείς ζώνες. (ho-b-band-rest ουδέτερο) */
.ho-b-band-rest { display: contents; }