/* ==========================================================
   CX Checkout v0.24.0 — σελίδα δωροκάρτας (account/voucher)
   Βασίζεται στο cx_checkout.css (μεταβλητές, reset, κουμπιά,
   κουτιά εισαγωγής), που φορτώνεται πριν από αυτό. Τα χρώματα
   έρχονται από Admin → Εμφάνιση, ανά στοιχείο από Admin → Πεδία,
   και τα χρώματα κάθε κάρτας από Admin → Δωροκάρτα → Σχέδια.
   Διατάξεις: .cxg--side (Α), .cxg--steps (Β), .cxg--showcase (Γ).
   ========================================================== */

/* v0.24: τα μεγέθη γραμμάτων βγαίνουν από την Εμφάνιση → Τυπογραφία (--cxc-t-*) και την
   κλίμακα της δωροκάρτας (--cxg-k, Δωροκάρτα → Μέγεθος γραμμάτων). Πλάτος: --cxg-max. */
.cxg {
  --cxg-k: 1;
  --cxg-fs-block: calc(var(--cxc-t-section, 26px) * 0.85 * var(--cxg-k));  /* 22 — «Έχεις ήδη δωροκάρτα;», «Συχνές ερωτήσεις» */
  --cxg-fs-head:  calc(var(--cxc-t-product, 16px) * 0.94 * var(--cxg-k));  /* 15 — τίτλοι ενοτήτων, βήματα, ερωτήσεις */
  --cxg-fs-chip:  calc(var(--cxc-t-price, 16px) * var(--cxg-k));           /* 16 — ποσά */
  --cxg-fs-total: calc(var(--cxc-t-price, 16px) * 1.375 * var(--cxg-k));   /* 22 — σύνολο */
  --cxg-fs-text:  calc(var(--cxc-t-label, 14px) * var(--cxg-k));           /* 14 — κείμενα */
  --cxg-fs-small: calc(var(--cxc-t-label, 14px) * 0.93 * var(--cxg-k));    /* 13 — βοηθητικά */
  --cxg-fs-tiny:  calc(var(--cxc-t-label, 14px) * 0.86 * var(--cxg-k));    /* 12 — μετρητής, «ΒΗΜΑ 1» */
  --cxg-fs-hero:  calc(var(--cxc-t-section, 26px) * 1.7 * var(--cxg-k));   /* 44 — τίτλος βιτρίνας */
  container: cxg / inline-size;
  /* v0.31.3: width:100% — με το inline-size containment η ρίζα δεν έχει «δικό της» πλάτος περιεχομένου· μέσα σε
     flex γονέα (container του Journal, από τότε που η σελίδα κάθεται απευθείας σε αυτόν — v0.30.4) τα margin:auto
     την έκαναν όσο το padding της (96px). Με ρητό πλάτος γεμίζει μέχρι το --cxg-max, κεντραρισμένη. */
  width: 100%;
  box-sizing: border-box;
  max-width: var(--cxg-max, 1140px);
  margin-left: auto;
  margin-right: auto;
}
.cxc.cxg .cxc-btn { font-size: calc(var(--cxc-t-button, 15px) * var(--cxg-k)); }
.cxg:not(.is-js) .cxg-js-only { display: none !important; }
.cxg :where(ol) { margin: 0; padding: 0; list-style: none; }

.cxg .cxg-radio { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }

/* ── Κεφαλίδα ──────────────────────────────────────────── */
.cxg-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.cxg--steps .cxg-head { margin-bottom: 26px; }
.cxg-intro { max-width: 62ch; font-size: calc(var(--cxg-fs-text) * 1.07); line-height: 1.5; color: var(--cxc-soft); }
.cxc .cxg-block-title { font-size: var(--cxg-fs-block); letter-spacing: -0.01em; }
.cxg-notice { margin: 0; }

/* ── Διάταξη Α: κάρτα αριστερά, φόρμα δεξιά ─────────────── */
.cxg-grid--side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start; }
.cxg-aside { min-width: 0; }
.cxg-aside-inner { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }
.cxg-main { display: flex; flex-direction: column; gap: 30px; min-width: 0; }

/* ── Περιοχή προεπισκόπησης και κάρτα ──────────────────── */
.cxg-stage { display: flex; justify-content: center; padding: 36px 28px; background: var(--cxc-panel); border-radius: var(--cxc-radius); }
.cxg-stage--md { padding: 26px 20px; }
.cxg-stage--sm { padding: 0; background: none; border-radius: 0; }

.cxg-card {
  --cxg-card-bg: var(--cxc-primary);
  --cxg-card-fg: var(--cxc-primary-text);
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  padding: 6.5% 7%;
  overflow: hidden;
  background-color: var(--cxg-card-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--cxg-card-fg);
  border-radius: calc(var(--cxc-radius) + 2px);
  line-height: 1.2;
  container-type: inline-size;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cxg-card--preview { max-width: 420px; box-shadow: 0 28px 50px -26px rgba(0, 0, 0, 0.38); }
.cxg-card--image { background-color: var(--cxc-thumb); }
/* Σκίαση για να διαβάζεται το λευκό κείμενο πάνω στην εικόνα */
.cxg-card--image.cxg-card--on-dark:not(.cxg-card--ov-none)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 58%);
  pointer-events: none;
}
.cxg-card--image.cxg-card--on-dark.cxg-card--ov-full::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5)); }
.cxg-card--image.cxg-card--on-dark { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

.cxg-card-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cxg-pat { position: absolute; inset: 0; display: none; width: 100%; height: 100%; }
.cxg-card--p-ring .cxg-pat--ring,
.cxg-card--p-dots .cxg-pat--dots,
.cxg-card--p-stars .cxg-pat--stars,
.cxg-card--p-arcs .cxg-pat--arcs,
.cxg-card--p-lines .cxg-pat--lines { display: block; }

.cxg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* Ύψος λογότυπου: Πεδία → Κάρτα → Λογότυπο → Μέγεθος (--cxg-logo-hpx), αλλιώς % του ύψους της κάρτας
   από Δωροκάρτα → Μέγεθος λογότυπου (--cxg-logo)· η κάρτα έχει ύψος 63cqw */
.cxg-card-logo { max-width: 58%; font-size: 17px; font-size: calc(var(--cxg-logo-hpx, calc(var(--cxg-logo, 16) * 0.63cqw)) * 0.41); font-weight: 700; letter-spacing: 0.04em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cxg-card-logo img { display: block; width: auto; max-width: 100%; height: 36px; height: var(--cxg-logo-hpx, calc(var(--cxg-logo, 16) * 0.63cqw)); max-height: none; object-fit: contain; object-position: left center; }
/* v0.34.5: «Μονόχρωμο» = το σχήμα του λογότυπου (mask) γεμάτο με το τρέχον χρώμα κειμένου — δηλαδή το χρώμα
   κειμένου του θέματος της κάρτας, ή το «Χρώμα» από Πεδία → Κάρτα → Λογότυπο (μολυβάκι). Πριν ήταν CSS filter
   (λευκό/μαύρο) που αγνοούσε κάθε χρώμα. Η <img> μένει αόρατη μόνο για τις διαστάσεις. */
.cxg-card--logo-mono .cxg-card-logo--img { position: relative; }
.cxg-card--logo-mono .cxg-card-logo--img img { visibility: hidden; }
.cxg-card--logo-mono .cxg-card-logo--img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--cxg-logo-src) left center / contain no-repeat;
  mask: var(--cxg-logo-src) left center / contain no-repeat;
}
/* Παλιοί browsers χωρίς mask: όπως πριν, λευκή/μαύρη σιλουέτα με filter */
@supports not ((mask: url('')) or (-webkit-mask: url(''))) {
  .cxg-card--logo-mono .cxg-card-logo--img img { visibility: visible; }
  .cxg-card--logo-mono .cxg-card-logo--img::after { content: none; }
  .cxg-card--logo-mono.cxg-card--on-dark .cxg-card-logo img { filter: brightness(0) invert(1); }
  .cxg-card--logo-mono.cxg-card--on-light .cxg-card-logo img { filter: brightness(0); }
}
.cxg-card--logo-hide .cxg-card-logo { visibility: hidden; }
.cxg-card-label { font-size: 11px; font-size: 2.5cqw; font-weight: 600; letter-spacing: 0.16em; white-space: nowrap; }
.cxg-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cxg-card-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cxg-card-for { font-size: 11px; font-size: 2.5cqw; font-weight: 600; letter-spacing: 0.1em; opacity: 0.85; }
.cxg-card-name { font-size: 18px; font-size: 4.3cqw; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cxg-card-from { font-size: 13px; font-size: 2.8cqw; opacity: 0.85; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cxg-card-amount { flex-shrink: 0; font-size: 56px; font-size: 12.5cqw; font-weight: 700; line-height: 0.9; letter-spacing: -0.02em; white-space: nowrap; }
/* Τι γράφεται πάνω σε εικόνα */
.cxg-card--ov-amount .cxg-card-top,
.cxg-card--ov-amount .cxg-card-who,
.cxg-card--ov-none .cxg-card-top,
.cxg-card--ov-none .cxg-card-bottom { visibility: hidden; }

/* ── Ενότητες φόρμας ───────────────────────────────────── */
.cxg-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cxc .cxg-sec-title { display: flex; align-items: center; gap: 10px; font-size: var(--cxg-fs-head); font-weight: 600; }
.cxc .cxg-sec-title label { margin: 0; font-size: inherit; font-weight: inherit; }
.cxg-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--cxc-input);
  border-radius: 50%;
  font-size: var(--cxg-fs-tiny);
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cxg-sec.is-done .cxg-num { background: var(--cxc-accent); border-color: var(--cxc-accent); color: var(--cxc-accent-text); }
.cxg-optional { font-size: var(--cxg-fs-small); font-weight: 400; color: var(--cxc-muted); }
.cxg-note { margin-top: -4px; font-size: var(--cxg-fs-small); line-height: 1.45; color: var(--cxc-muted); }
.cxg-note--account { margin-top: 0; font-size: var(--cxg-fs-text); color: var(--cxc-soft); }

/* Ποσά */
/* Σταθερό πλάτος (δεν τεντώνουν σε φαρδιά σελίδα): όσα χωράνε στη σειρά */
.cxg-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.cxc .cxg-amounts > .cxg-chip { flex: 1 1 88px; max-width: 124px; }
.cxc .cxg-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--cxc-btn-h) + 2px);
  margin: 0;
  padding: 0 10px;
  background: var(--cxc-field);
  color: var(--cxc-text);
  border: 1px solid var(--cxc-input);
  border-radius: var(--cxc-radius-sm);
  font-size: var(--cxg-fs-chip);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cxg-chip:hover { border-color: var(--cxc-text); }
.cxg-chip.is-selected,
.cxg-chip:has(.cxg-radio:checked) { background: var(--cxc-accent); border-color: var(--cxc-accent); color: var(--cxc-accent-text); }
.cxg-chip:has(.cxg-radio:focus-visible) { outline: 2px solid var(--cxc-accent); outline-offset: 2px; }
.cxc .cxg-chip--other { font-size: var(--cxg-fs-small); }

.cxg-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cxg-custom-box { position: relative; width: 220px; max-width: 100%; }
.cxg-custom-sym { position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--cxc-muted); pointer-events: none; }
.cxg-custom-sym--left { left: 14px; }
.cxg-custom-sym--right { right: 14px; }
.cxc .cxg-custom-box.has-left .cxc-input { padding-left: 32px; }
.cxc .cxg-custom-box.has-right .cxc-input { padding-right: 32px; }
.cxc .cxg-custom .cxc-input { font-size: 16px; }
.cxg-hint { font-size: var(--cxg-fs-small); color: var(--cxc-muted); }
.cxg-custom.is-invalid .cxg-hint { color: var(--cxc-error); }
.cxc .cxg-custom.is-invalid .cxc-input { border-color: var(--cxc-error); box-shadow: 0 0 0 1px var(--cxc-error); }

/* Σχέδια */
.cxg-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 150px)); gap: 14px 12px; }
.cxc .cxg-design { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; font-weight: inherit; cursor: pointer; }
.cxg-design-thumb { flex-direction: row; align-items: flex-end; justify-content: flex-end; padding: 8% 9%; border-radius: var(--cxc-radius-sm); transition: box-shadow 0.15s ease, transform 0.15s ease; }
.cxg-design-thumb .cxg-card-amount { font-size: 18px; font-size: 14cqw; }
/* v0.45.1: λογότυπο και στη μικρή κάρτα (Δωροκάρτα → «Λογότυπο και στις μικρές κάρτες»), όπως στη μεγάλη: ίδιος τρόπος,
   μέγεθος (αναλογικό, cqw) και χρώμα. Πάνω αριστερά, με τα ίδια περιθώρια με το ποσό· δεν κρύβει το ✓ (πάνω δεξιά).
   Σε παλιούς browsers χωρίς cqw δεν εμφανίζεται (το μέγεθος δεν θα έβγαινε σωστό) — η μικρή κάρτα μένει όπως πριν. */
.cxg-thumb-top { display: none; }
@supports (width: 1cqw) {
  .cxg-design-thumb .cxg-thumb-top { display: flex; position: absolute; top: 0; left: 0; right: 0; padding: 8% 9% 0; pointer-events: none; }
}
.cxg-design:hover .cxg-design-thumb { transform: translateY(-2px); }
.cxg-design.is-selected .cxg-design-thumb,
.cxg-design:has(.cxg-radio:checked) .cxg-design-thumb { box-shadow: 0 0 0 2px var(--cxc-bg), 0 0 0 4px var(--cxc-accent); }
.cxg-design:has(.cxg-radio:focus-visible) .cxg-design-thumb { outline: 2px solid var(--cxc-accent); outline-offset: 5px; }
.cxg-design-check { position: absolute; top: 8px; right: 8px; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--cxc-bg); color: var(--cxc-text); border-radius: 50%; text-shadow: none; }
.cxg-design-check .cxc-i { width: 14px; height: 14px; stroke-width: 2.4; }
.cxg-design.is-selected .cxg-design-check,
.cxg-design:has(.cxg-radio:checked) .cxg-design-check { display: flex; }
.cxg-design-name { font-size: var(--cxg-fs-small); line-height: 1.3; overflow-wrap: anywhere; }
.cxg-design.is-selected .cxg-design-name { font-weight: 600; }

/* Πεδία */
.cxg-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.cxg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cxc .cxg-label { max-width: none; margin: 0; font-size: var(--cxg-fs-text); font-weight: 500; }
.cxg-req { color: var(--cxc-error); }
.cxg-error { margin: 0; font-size: var(--cxg-fs-small); font-weight: 500; color: var(--cxc-error); }
.cxc .cxg-field.is-invalid .cxc-input,
.cxc .cxg-sec--message.is-invalid .cxc-input { border-color: var(--cxc-error); box-shadow: 0 0 0 1px var(--cxc-error); }

/* Μήνυμα */
.cxg-wishes { display: flex; flex-wrap: wrap; gap: 8px; }
.cxc .cxg-wish-chip { height: 34px; padding: 0 13px; background: var(--cxc-field); color: var(--cxc-text); border: 1px solid var(--cxc-input); border-radius: 999px; font-size: var(--cxg-fs-small); }
.cxc .cxg-wish-chip:hover { border-color: var(--cxc-text); }
.cxc textarea.cxc-input { height: auto; min-height: 104px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.cxg-message-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: -6px; }
.cxg-counter { margin-left: auto; font-size: var(--cxg-fs-tiny); color: var(--cxc-muted); white-space: nowrap; }
.cxg-counter.is-over { color: var(--cxc-error); }

/* Αποδοχή, σύνολο, κουμπί */
.cxc .cxg-check { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: var(--cxg-fs-text); font-weight: 400; line-height: 1.45; color: var(--cxc-soft); cursor: pointer; }
.cxg-check input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--cxc-accent); }
.cxg-f-agree .cxg-error { padding-left: 32px; }
.cxg-checkout { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid var(--cxc-line); }
.cxg-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cxg-total-label { font-size: var(--cxg-fs-head); font-weight: 600; }
.cxg-total-value { font-size: var(--cxg-fs-total); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.cxg-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--cxg-fs-small); line-height: 1.4; color: var(--cxc-muted); text-align: center; }
.cxc .cxg-submit.is-busy,
.cxc .cxg-next.is-busy { opacity: 0.6; pointer-events: none; }

/* Η ευχή κάτω από την κάρτα, πληροφορίες */
.cxg-wish { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--cxc-panel); border-radius: var(--cxc-radius); }
.cxg-wish-label { font-size: var(--cxg-fs-tiny); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cxc-muted); }
.cxg-wish-text { font-size: var(--cxg-fs-text); font-style: italic; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.cxg-wish-text.is-empty { font-style: normal; color: var(--cxc-muted); }
.cxg-info { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 0; font-size: var(--cxg-fs-small); line-height: 1.45; color: var(--cxc-soft); }
.cxg-info li { display: flex; align-items: flex-start; gap: 12px; }
.cxg-info .cxc-i { margin-top: 1px; }

/* Μετά την προσθήκη */
.cxg-done { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; background: var(--cxc-panel); border: 1px solid var(--cxc-line); border-radius: var(--cxc-radius-md); outline: none; }
.cxg-done-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; background: var(--cxc-accent); color: var(--cxc-accent-text); border-radius: 50%; }
.cxg-done-icon .cxc-i { width: 22px; height: 22px; stroke-width: 2.25; }
.cxg-done-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cxc .cxg-done-title { font-size: calc(var(--cxg-fs-head) * 1.13); }
.cxg-done-text { font-size: var(--cxg-fs-text); color: var(--cxc-soft); overflow-wrap: anywhere; }
.cxg-done-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 8px; }
.cxc .cxg-done-again { font-size: var(--cxg-fs-text); font-weight: 500; color: var(--cxc-soft); text-decoration: underline; }
.cxc .cxg-done-again:hover { color: var(--cxc-text); }

/* ── Διάταξη Β: σε 3 βήματα ────────────────────────────── */
.cxg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 26px; }
.cxc .cxg-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 0 12px; color: var(--cxc-muted); border-bottom: 3px solid var(--cxc-line); text-align: left; cursor: default; }
.cxc .cxg-step.is-active,
.cxc .cxg-step.is-done { color: var(--cxc-text); border-bottom-color: var(--cxc-accent); }
.cxc .cxg-step.is-done { cursor: pointer; }
.cxg-step-num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border: 1.5px solid var(--cxc-input); border-radius: 50%; font-size: var(--cxg-fs-small); font-weight: 600; }
.cxg-step.is-active .cxg-step-num { border-color: var(--cxc-accent); }
.cxg-step.is-done .cxg-step-num { background: var(--cxc-accent); border-color: var(--cxc-accent); color: var(--cxc-accent-text); }
.cxg-step-check { display: none; width: 14px; height: 14px; stroke-width: 2.4; }
.cxg-step.is-done .cxg-step-n { display: none; }
.cxg-step.is-done .cxg-step-check { display: block; }
.cxg-step-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxg-step-kicker { font-size: var(--cxg-fs-tiny); letter-spacing: 0.08em; color: var(--cxc-muted); }
.cxg-step-label { font-size: var(--cxg-fs-head); font-weight: 600; }
.cxg-progress { display: none; }
.cxg:not(.is-js) .cxg-steps { display: none; }

.cxg-grid--steps { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.cxg-panel { display: flex; flex-direction: column; gap: 22px; padding: 28px; border: 1px solid var(--cxc-line); border-radius: var(--cxc-radius); }
.cxg-pane { display: flex; flex-direction: column; gap: 26px; }
.cxg.is-js .cxg-pane:not(.is-current) { display: none; }
.cxg.is-js.is-added .cxg-pane { display: none; }
.cxg--steps .cxg-amounts { gap: 10px; }
.cxc.cxg--steps .cxg-amounts > .cxg-chip { flex-basis: 92px; max-width: 132px; }
.cxc.cxg--steps .cxg-chip { height: calc(var(--cxc-btn-h) + 6px); font-size: calc(var(--cxg-fs-chip) * 1.125); }
.cxc.cxg--steps .cxg-chip--other { font-size: var(--cxg-fs-text); }
.cxg--steps .cxg-designs { grid-template-columns: repeat(auto-fill, minmax(130px, 170px)); gap: 16px 14px; }
.cxg-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cxg:not(.is-js) .cxg-nav .cxg-next,
.cxg:not(.is-js) .cxg-nav .cxg-back { display: none; }
.cxc .cxg-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--cxg-fs-text); font-weight: 500; color: var(--cxc-soft); }
.cxc .cxg-back:hover { color: var(--cxc-text); }
.cxc .cxg-back:hover span { text-decoration: underline; }
.cxg-review-wrap { display: flex; flex-direction: column; gap: 12px; }
.cxg-review { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--cxc-line); }
.cxg-review-row { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cxc-line); }
.cxg-review-key { flex-shrink: 0; width: 90px; font-size: var(--cxg-fs-small); font-weight: 400; color: var(--cxc-muted); }
.cxg-review-value { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--cxg-fs-text); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cxc .cxg-review-change { flex-shrink: 0; font-size: var(--cxg-fs-small); color: var(--cxc-soft); text-decoration: underline; }
.cxg:not(.is-js) .cxg-review-change { display: none; }
.cxg-summary { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--cxc-line); border-radius: var(--cxc-radius); }
.cxc .cxg-summary-title { font-size: var(--cxg-fs-tiny); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cxc-muted); }
.cxg-sum-row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--cxg-fs-small); }
.cxg-sum-row > span:first-child { flex-shrink: 0; color: var(--cxc-muted); }
.cxg-sum-row > span:last-child { min-width: 0; font-weight: 500; text-align: right; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cxg-sum-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--cxc-line); font-size: var(--cxg-fs-head); font-weight: 600; }
.cxg-sum-total strong { font-size: calc(var(--cxg-fs-total) * 0.9); font-weight: 700; white-space: nowrap; }
.cxg--steps .cxg-done { flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; background: none; border: 0; text-align: center; }
.cxg--steps .cxg-done-icon { width: 56px; height: 56px; }
.cxg--steps .cxg-done-icon .cxc-i { width: 26px; height: 26px; }
.cxg--steps .cxg-done-body { align-items: center; }
.cxc.cxg--steps .cxg-done-title { font-size: var(--cxg-fs-block); }
.cxg--steps .cxg-done-actions { justify-content: center; margin-top: 10px; }
.cxg-bar { display: none; }

/* ── Διάταξη Γ: βιτρίνα ────────────────────────────────── */
.cxg-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 56px; padding: 44px 48px; background: var(--cxc-panel); border-radius: var(--cxc-radius); }
.cxg-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.cxg-hero-eyebrow { font-size: var(--cxg-fs-tiny); font-weight: 600; letter-spacing: 0.16em; color: var(--cxc-muted); }
.cxc .cxg-hero-title { font-size: var(--cxg-fs-hero); line-height: 1.04; letter-spacing: -0.025em; }
.cxg-hero-text { max-width: 440px; font-size: calc(var(--cxg-fs-text) * 1.14); line-height: 1.5; color: var(--cxc-soft); }
.cxg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.cxc .cxg-hero-cta { padding: 0 24px; }
.cxc .cxg-hero-link { padding: 0 20px; }
.cxg-hero-cards { position: relative; width: 100%; max-width: 460px; aspect-ratio: 520 / 380; margin-left: auto; }
.cxg-card--hero { position: absolute; width: 63%; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 0.42); }
.cxg-card--slot-3 { left: 0; top: 30%; transform: rotate(-8deg); }
.cxg-card--slot-2 { right: 0; top: 0; transform: rotate(7deg); }
.cxg-card--slot-1 { left: 18%; top: 40%; transform: rotate(-2deg); }
.cxg-hero-cards--1 .cxg-card--slot-1 { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); }
.cxg-hero-cards--2 .cxg-card--slot-2 { left: 6%; right: auto; top: 6%; transform: rotate(-7deg); }
.cxg-hero-cards--2 .cxg-card--slot-1 { left: 30%; top: 38%; transform: rotate(4deg); }

.cxg-how { margin-bottom: 56px; }
.cxg-how-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 20px; }
.cxg-how-item { display: flex; flex-direction: column; gap: 10px; }
.cxg-how-top { display: flex; align-items: center; gap: 12px; }
.cxg-how-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--cxc-panel); border-radius: 50%; }
.cxg-how-icon .cxc-i { width: 21px; height: 21px; }
.cxg-how-num { font-size: var(--cxg-fs-small); font-weight: 600; letter-spacing: 0.08em; color: var(--cxc-muted); }
.cxc .cxg-how-name { font-size: calc(var(--cxg-fs-head) * 1.07); }
.cxg-how-text { font-size: var(--cxg-fs-text); line-height: 1.5; color: var(--cxc-soft); }

.cxg--showcase .cxg-form { scroll-margin-top: 24px; }
.cxg-head--form { margin-bottom: 18px; }
.cxg--showcase .cxg-notice { margin-bottom: 16px; }
.cxg-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--cxc-line); border-radius: var(--cxc-radius); }
.cxg-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 24px; }
.cxg-col + .cxg-col { border-left: 1px solid var(--cxc-line); }
.cxg--showcase .cxg-fields { grid-template-columns: minmax(0, 1fr); }
.cxg--showcase .cxg-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cxc.cxg--showcase .cxg-amounts > .cxg-chip { max-width: none; }
.cxc.cxg--showcase .cxg-chip { height: calc(var(--cxc-btn-h) + 4px); }
.cxg--showcase .cxg-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.cxg--showcase .cxg-card--preview { max-width: none; box-shadow: none; }
.cxg--showcase .cxg-done { flex-direction: column; }

/* ── Υπόλοιπο, συχνές ερωτήσεις (όλες οι διατάξεις) ─────── */
.cxg-balance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 36px; align-items: center; margin-top: 48px; padding: 28px 32px; background: var(--cxc-panel); border-radius: var(--cxc-radius); scroll-margin-top: 24px; }
.cxg-balance-head { display: flex; flex-direction: column; gap: 6px; }
.cxg-balance-text { font-size: var(--cxg-fs-text); line-height: 1.5; color: var(--cxc-soft); }
.cxg-balance-form { display: flex; flex-direction: column; gap: 10px; }
.cxg-balance-row { display: flex; gap: 8px; }
.cxc .cxg-balance-row .cxc-input { letter-spacing: 0.04em; }
.cxg-balance-result { padding: 12px 14px; background: var(--cxc-bg); border: 1px solid var(--cxc-line); border-radius: var(--cxc-radius-sm); font-size: var(--cxg-fs-text); line-height: 1.45; color: var(--cxc-soft); }
.cxg-balance-result strong { display: block; margin-bottom: 2px; font-size: var(--cxg-fs-head); color: var(--cxc-text); }
.cxg-balance-result.is-error { color: var(--cxc-error); border-color: var(--cxc-error); }

.cxg-faq { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 48px; }
.cxg-faq-head { display: flex; flex-direction: column; gap: 8px; }
.cxg-faq-contact { font-size: var(--cxg-fs-text); line-height: 1.5; color: var(--cxc-soft); }
.cxc .cxg-faq-contact a { font-weight: 600; color: var(--cxc-text); text-decoration: underline; }
.cxg-faq-list { border-top: 1px solid var(--cxc-line); }
.cxg-faq-item { border-bottom: 1px solid var(--cxc-line); }
.cxg-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-size: var(--cxg-fs-head); font-weight: 600; list-style: none; cursor: pointer; }
.cxg-faq-q::-webkit-details-marker { display: none; }
.cxg-faq-q::marker { content: ""; }
.cxg-faq-q .cxc-i { transition: transform 0.2s ease; }
.cxg-faq-item[open] .cxg-faq-q .cxc-i { transform: rotate(180deg); }
.cxg-faq-a { max-width: 68ch; padding: 0 0 16px; font-size: var(--cxg-fs-text); line-height: 1.55; color: var(--cxc-soft); }

/* ── Κενή σελίδα (χωρίς σχέδια) ───────────────────────── */
.cxg-empty .cxc-empty-title { margin: 0; }

/* ── Responsive ────────────────────────────────────────── */
/* Στενή περιοχή περιεχομένου (π.χ. θέμα με στήλη δεξιά/αριστερά): μία στήλη */
@container cxg (max-width: 900px) {
  .cxg-hero { grid-template-columns: minmax(0, 1fr); }
  .cxg-hero-cards { margin: 0 auto; }
  .cxg-cols { grid-template-columns: minmax(0, 1fr); }
  .cxg-col + .cxg-col { border-top: 1px solid var(--cxc-line); border-left: 0; }
  .cxg--showcase .cxg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cxg--showcase .cxg-amounts { display: flex; }
  .cxc.cxg--showcase .cxg-amounts > .cxg-chip { max-width: 124px; }
  .cxg--showcase .cxg-designs { grid-template-columns: repeat(auto-fill, minmax(118px, 150px)); }
  .cxg--showcase .cxg-col--last .cxg-stage { max-width: 420px; }
}
@container cxg (max-width: 720px) {
  /* Α: τίτλος → κάρτα → φόρμα → πληροφορίες (η ευχή φαίνεται ήδη στο πεδίο) */
  .cxg-grid--side { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .cxg-grid--side .cxg-aside,
  .cxg-grid--side .cxg-aside-inner,
  .cxg-grid--side .cxg-main { display: contents; }
  .cxg-grid--side .cxg-main > * { order: 3; }
  .cxg-grid--side .cxg-main > .cxg-head { order: 1; }
  .cxg-grid--side .cxg-stage { order: 2; }
  .cxg-grid--side .cxg-wish { display: none; }
  .cxg-grid--side .cxg-info { order: 4; }
  .cxg-grid--steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cxg-aside-inner { position: static; }
  .cxg--steps .cxg-aside { order: -1; }
  .cxg-card--preview { margin: 0 auto; }
  .cxg-balance,
  .cxg-faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 1199px) {
  .cxc .cxg-hero-title { font-size: calc(var(--cxg-fs-hero) * 0.86); }
  .cxg-hero { gap: 28px; padding: 36px; }
  .cxg-grid--side { gap: 36px; }
}

@media (max-width: 991px) {
  .cxg-grid--side,
  .cxg-grid--steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cxg-aside-inner { position: static; }
  .cxg--steps .cxg-aside { order: -1; }
  .cxg-card--preview { margin: 0 auto; }
  .cxg-hero { grid-template-columns: minmax(0, 1fr); padding: 32px 26px; }
  .cxg-hero-cards { margin: 0 auto; }
  .cxg-how-list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cxg-cols { grid-template-columns: minmax(0, 1fr); }
  .cxg-col + .cxg-col { border-top: 1px solid var(--cxc-line); border-left: 0; }
  .cxg-balance,
  .cxg-faq { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 767px) {
  .cxg-main { gap: 26px; }
  .cxg-fields,
  .cxg--showcase .cxg-fields { grid-template-columns: minmax(0, 1fr); }
  .cxg-stage { padding: 22px 18px; }
  .cxg-stage--sm { padding: 0; }
  .cxg-amounts,
  .cxg--showcase .cxg-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cxc .cxg-amounts > .cxg-chip,
  .cxc.cxg--steps .cxg-amounts > .cxg-chip,
  .cxc.cxg--showcase .cxg-amounts > .cxg-chip { max-width: none; }
  .cxc .cxg-chip { height: calc(var(--cxc-btn-h) + 2px); }
  .cxc.cxg--steps .cxg-chip { height: calc(var(--cxc-btn-h) + 6px); font-size: calc(var(--cxg-fs-chip) * 1.06); }
  .cxc.cxg--steps .cxg-chip--other { font-size: var(--cxg-fs-small); }
  .cxg-designs { grid-auto-flow: column; grid-auto-columns: 132px; grid-template-columns: none; margin: -4px -4px 0; padding: 6px 4px 8px; overflow-x: auto; scroll-snap-type: x proximity; }
  .cxg-design { scroll-snap-align: start; }
  .cxg--steps .cxg-designs,
  .cxg--showcase .cxg-designs { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .cxc .cxg-block-title { font-size: calc(var(--cxg-fs-block) * 0.92); }
  .cxc .cxg-hero-title { font-size: calc(var(--cxg-fs-hero) * 0.72); }
  .cxg-hero { gap: 22px; margin-bottom: 40px; padding: 26px 20px; }
  .cxg-hero-text { font-size: var(--cxg-fs-text); }
  .cxg-how { margin-bottom: 40px; }
  .cxg-col { padding: 20px 16px; }
  .cxg-balance { margin-top: 40px; padding: 22px 18px; }
  .cxg-balance-row { flex-direction: column; }
  .cxg-faq { margin-top: 40px; }
  .cxg-done { flex-direction: column; }

  /* Β στο κινητό: μπάρα βημάτων, κάρτα πάνω, κουμπί συνέχειας στη σταθερή μπάρα */
  .cxg--steps .cxg-steps { gap: 6px; margin-bottom: 8px; }
  .cxc.cxg--steps .cxg-step { padding: 0; border-bottom-width: 4px; border-radius: 2px; }
  .cxg--steps .cxg-step-num,
  .cxg--steps .cxg-step-txt { display: none; }
  .cxg--steps.is-js .cxg-progress { display: block; margin: 0 0 16px; font-size: var(--cxg-fs-small); color: var(--cxc-muted); }
  .cxg--steps .cxg-panel { padding: 0; border: 0; }
  .cxg--steps .cxg-stage--md { padding: 0; background: none; }
  .cxg--steps .cxg-card--preview { max-width: 340px; }
  .cxg--steps .cxg-summary,
  .cxg--steps .cxg-info { display: none; }
  .cxg--steps.is-js .cxg-nav .cxg-next,
  .cxg--steps.is-js .cxg-nav .cxg-submit { display: none; }
  .cxg--steps.is-js .cxg-nav:has(.cxg-back) { justify-content: flex-start; }
  .cxg--steps.is-js { padding-bottom: 104px; }
  .cxg--steps.is-js .cxg-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--cxc-bg);
    border-top: 1px solid var(--cxc-line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .cxg--steps.is-js.is-added .cxg-bar { display: none; }
  .cxg-bar-total { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1.2; }
  .cxg-bar-total span { font-size: var(--cxg-fs-tiny); color: var(--cxc-muted); }
  .cxg-bar-total strong { font-size: calc(var(--cxg-fs-total) * 0.8); font-weight: 700; white-space: nowrap; }
  .cxc .cxg-bar .cxc-btn { flex-grow: 1; height: calc(var(--cxc-btn-h) + 4px); }
}