/* Distraction-free checkout (admin-only). Brand: purple #2e0c64, buy-green
   #00b900, link-blue #1e73be, Roboto. Scoped under .cn / cn-* to avoid theme
   bleed on this standalone template. */

:root {
  --cn-purple: #2e0c64;
  --cn-green: #00b900;
  --cn-blue: #1e73be;
  --cn-ink: #1d1d28;
  --cn-muted: #6b6b7a;
  --cn-line: #e3e3ec;
  --cn-bg: #f6f6fa;
  --cn-radius: 12px;

  /* Spacing scale — the ONE source of truth for gaps/padding. Use these tokens
     everywhere; don't hand-pick pixel margins.
       --cn-sp-1  6px   hairline (label→hint, chip gaps)
       --cn-sp-2  12px  inside a group (field ↔ field, control padding-x)
       --cn-sp-3  16px  block padding (modal head/body/foot, cards)
       --cn-sp-4  24px  between sections */
  --cn-sp-1: 6px;
  --cn-sp-2: 12px;
  --cn-sp-3: 16px;
  --cn-sp-4: 24px;
}

.cn-page {
  min-height: 100vh;
  margin: 0;
  background: var(--cn-bg);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--cn-ink);
  -webkit-font-smoothing: antialiased;
}

/* --- Isolation: keep theme / WooCommerce / plugin CSS from leaking in. ---
   border-box everywhere; neutralise the stray block margins + line-heights the
   theme injects on headings/paragraphs/fieldsets. Our layout sets all real
   spacing via flex `gap`, so these resets can't disturb it. */
.cn-page *, .cn-page *::before, .cn-page *::after { box-sizing: border-box; }
/* Headings: tame the theme's oversized line-height/font, but let each heading's
   own class control its margin (class rules already beat theme element rules). */
.cn-page h1, .cn-page h2, .cn-page h3, .cn-page h4, .cn-page h5 { line-height: 1.3; font-family: inherit; }
.cn-page fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cn-page legend { padding: 0; }
.cn-page input, .cn-page select, .cn-page textarea, .cn-page button { font-family: inherit; }

/* Strip the parent theme's global button/input chrome (button{background;color;
   padding} + button:hover{background}) that was bleeding onto our controls — e.g.
   the weird bg on Stepper hover. `:where()` carries ZERO specificity, so this
   overrides the theme's bare element rules (same specificity, ours loads later
   via the stylesheet dependency) while NEVER out-specifying our own .cn-*
   component classes. That's how we isolate without !important. */
:where(.cn-page) button,
:where(.cn-page) input[type="button"],
:where(.cn-page) input[type="submit"],
:where(.cn-page) input[type="reset"] {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  text-transform: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
/* Kill theme :hover/:active/:focus background bleed. The theme's button:hover is
   (0,1,1) AND is inlined (uncertain load order), so we out-specify it: `.cn-page
   button:hover` is (0,2,1) — beats the theme by specificity regardless of order,
   yet stays below our component hovers (e.g. .cn-btn--primary:hover is (0,4,0)).
   Only background is neutralised, so component text colours are untouched. */
.cn-page button:hover,
.cn-page button:active,
.cn-page button:focus,
.cn-page input[type="submit"]:hover,
.cn-page input[type="submit"]:active { background: none; }

/* Admin-only preview hint (hidden from real shoppers) */
.cn-adminbar {
  background: #2e0c64;
  color: #fff;
  font-size: 12.5px;
  text-align: center;
  padding: 8px 14px;
  line-height: 1.4;
}
.cn-adminbar a { color: #ffd84d; word-break: break-all; }

/* Minimal top bar — logo only */
.cn-topbar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid var(--cn-line);
}
.cn-topbar img { height: 34px; width: auto; display: block; }

/* Two-column layout: form (left) + sticky summary (right) on desktop. */
.cn-layout {
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  display: flex;
  align-items: flex-start;
  gap: 34px;
}
.cn-main { flex: 1 1 auto; min-width: 0; }

/* Back-to-previous-step link, sits above a step's title. */
.cn-page .cn-steplink {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; margin: 0;
  color: var(--cn-blue); font-size: 13px; font-weight: 600; cursor: pointer;
}
.cn-page .cn-steplink:hover { color: var(--cn-purple); }
.cn-steplink svg { display: block; }
/* When a step opens with a back-link, the title sits right under it (no big gap). */
.cn-step1 > .cn-steplink + .cn-section-title { margin-top: 0; }

/* Back-to-cart link above the steps */
.cn-page .cn-backlink {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 var(--cn-sp-2);
  color: var(--cn-muted); font-size: 13px; font-weight: 600;
  text-decoration: none; background: none; border: none;
}
.cn-page .cn-backlink:hover { color: var(--cn-purple); }
.cn-backlink svg { display: block; }

/* Stepper — connected steps: (1)———(2)———(3), a label under each circle. */
.cn-stepper__list {
  list-style: none;
  display: flex;
  margin: 0 0 28px;
  padding: 0;
}
.cn-step { flex: 1 1 0; position: relative; }
/* Connector lines, centred on the 26px marker (centre = 13px from the row top).
   Each step draws the half-segment to its left and right; the two halves of
   adjacent steps meet to form one continuous line. */
.cn-step::before,
.cn-step::after {
  content: '';
  position: absolute;
  top: 13px;
  height: 2px;
  background: var(--cn-line);
  z-index: 0;
}
.cn-step::before { left: 0; width: calc(50% - 17px); }
.cn-step::after  { right: 0; width: calc(50% - 17px); }
.cn-step:first-child::before { display: none; }
.cn-step:last-child::after   { display: none; }
/* Fill the segments already reached (up to and into the active step). */
.cn-step--done::before,
.cn-step--done::after,
.cn-step--active::before { background: var(--cn-purple); }

.cn-step__btn {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  font: inherit;
  color: var(--cn-muted);
}
.cn-step--done .cn-step__btn,
.cn-step--active .cn-step__btn { color: var(--cn-purple); }
.cn-step--done .cn-step__btn { cursor: pointer; }
.cn-step__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cn-line);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--cn-bg); /* mask the line behind the circle */
}
.cn-step--active .cn-step__marker { background: var(--cn-purple); }
.cn-step--done .cn-step__marker { background: var(--cn-green); }
.cn-step__label {
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* Body card */
.cn-body {
  background: #fff;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  padding: 28px 26px;
}
.cn-placeholder { color: var(--cn-muted); text-align: center; padding: 40px 0; }

/* Uniform vertical rhythm for every step: a flex column with one gap token, so
   spacing does NOT depend on child margins (immune to theme `label{margin}` /
   `h3{margin}` bleed and to our own resets). Section titles get a little extra
   space above; the "different address?" link sits closer to the field above. */
.cn-step1 { display: flex; flex-direction: column; gap: var(--cn-sp-2); }
.cn-step1 > .cn-section-title { margin: 10px 0 0; line-height: 1.3; }
.cn-step1 > .cn-diffaddr-toggle { margin-top: -6px; }

/* Doc-type choice */
.cn-doctype { border: none; margin: 0; padding: 0; }
.cn-doctype__legend {
  font-size: 17px;
  font-weight: 700;
  color: var(--cn-purple);
  margin-bottom: 12px;
  padding: 0;
}
.cn-doctype__options { display: flex; gap: 12px; }
.cn-choice {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 2px solid var(--cn-line);
  border-radius: var(--cn-radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cn-choice.is-selected {
  border-color: var(--cn-purple);
  background: rgba(46, 12, 100, 0.04);
}
.cn-choice input { accent-color: var(--cn-purple); width: 18px; height: 18px; }
.cn-choice__title { font-weight: 600; font-size: 15px; }

/* ΑΦΜ */
.cn-afm-block { display: flex; flex-direction: column; gap: var(--cn-sp-2); }
/* Outlined fields with the label notched onto the top border.
   margin:0 kills the theme/Woo `label { margin-bottom }` bleed — that stray 8px
   was inflating grid rows to 58px and adding 8px under every full-width field,
   breaking the uniform gap. */
.cn-page .cn-field { display: block; position: relative; margin: 0; }
.cn-field__label {
  position: absolute;
  top: -7px;
  left: 11px;
  z-index: 1;
  padding: 0 6px;
  background: #fff;            /* cuts the border line under the label */
  font-size: 12px;
  font-weight: 600;
  color: var(--cn-muted);
  line-height: 1;
  pointer-events: none;
}
.cn-afm-input {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.cn-afm-input input {
  width: 100%;
  padding: 12px 40px 12px 14px;
  border: 2px solid var(--cn-line);
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.cn-afm-input input:focus { border-color: var(--cn-blue); }
.cn-afm-input.is-valid input { border-color: var(--cn-green); }
.cn-afm-input.is-invalid input { border-color: #c62828; }
.cn-afm-check {
  position: absolute;
  right: 12px;
  color: var(--cn-green);
  font-weight: 800;
  font-size: 18px;
}
.cn-afm-spinner {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--cn-line);
  border-top-color: var(--cn-purple);
  border-radius: 50%;
  animation: cn-spin .7s linear infinite;
}
@keyframes cn-spin { to { transform: rotate(360deg); } }
.cn-afm-error { color: #c62828; font-size: 13px; margin: 0; }

/* Invoice row: ΑΦΜ input (left) + fetched company info (right) on desktop. */
.cn-afm-row { display: flex; align-items: center; gap: 18px; }
.cn-afm-field { flex: 0 0 300px; }
.cn-afm-row .cn-afm-ok { flex: 1 1 auto; min-width: 0; margin-top: 0; }

/* Compact invoice confirmation — one green line, no card. */
.cn-afm-ok { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; }
.cn-afm-ok__name { font-size: 14px; font-weight: 700; color: var(--cn-ink); }
.cn-afm-ok__doy { font-size: 12px; color: var(--cn-muted); }
/* AADE company fields (Επωνυμία / ΔΟΥ) — editable, inside the invoice popup. */
.cn-afm-company { display: flex; flex-direction: column; gap: var(--cn-sp-2); }

/* Green validity tick on the inner-right of a control. */
.cn-field__control { position: relative; }
.cn-field__control.has-tick .cn-input { padding-right: 40px; }
.cn-valid-tick {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--cn-green); pointer-events: none;
}
.cn-valid-tick svg { display: block; }
.cn-lockfield .cn-valid-tick { right: 12px; }

/* Autofilled input that's locked until the pencil is tapped. */
.cn-lockfield { position: relative; display: flex; align-items: center; }
.cn-lockfield input { padding-right: 44px; }
.cn-lockfield.is-locked input { background: var(--cn-bg); cursor: default; }
.cn-page .cn-lockfield__pencil {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none !important; background: none !important; box-shadow: none !important;
  color: var(--cn-muted) !important; cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.cn-page .cn-lockfield__pencil svg { display: block; width: 16px !important; height: 16px !important; }
.cn-page .cn-lockfield__pencil:hover { background: var(--cn-bg) !important; color: var(--cn-purple) !important; }
.cn-afm-ok__tick { color: var(--cn-green); font-weight: 800; margin-right: 6px; }
.cn-page .cn-afm-ok__toggle {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0; font: inherit; font-size: 12px; color: var(--cn-blue) !important;
  text-decoration: underline; cursor: pointer;
}
.cn-afm-ok .cn-extras__list { flex-basis: 100%; margin-top: 4px; }

/* Verified identity (green, read-only) — compact */
.cn-verified {
  margin-top: 12px;
  border: 1px solid rgba(0, 185, 0, 0.35);
  background: rgba(0, 185, 0, 0.05);
  border-radius: 10px;
  padding: 8px 12px;
}
.cn-verified__row {
  display: flex;
  gap: 10px;
  padding: 2px 0;
}
.cn-verified__row + .cn-extras { margin-top: 0; }
.cn-verified__label {
  flex: 0 0 90px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cn-muted);
  padding-top: 1px;
}
.cn-verified__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--cn-ink);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.cn-verified__tick { color: var(--cn-green); font-weight: 800; }

/* Collapsible extra fields */
.cn-extras { margin-top: 4px; }
.cn-extras__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  background: none;
  border: none;
  padding: 2px 0;
  color: var(--cn-blue);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.cn-extras__list { margin: 8px 0 0; }
.cn-extras__row {
  display: flex;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px dashed var(--cn-line);
  font-size: 14px;
}
.cn-extras__row dt { flex: 0 0 120px; color: var(--cn-muted); margin: 0; }
.cn-extras__row dd { flex: 1 1 auto; min-width: 0; margin: 0; }

/* ---- Email identification gate ---- */
.cn-gate {
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.cn-gate__card {
  background: #fff;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  padding: 30px 26px;
}
.cn-gate__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--cn-purple);
  margin: 0 0 6px;
  line-height: 1.2;
}
.cn-gate__sub { color: var(--cn-muted); font-size: 14px; margin: 0 0 20px; line-height: 1.45; }

.cn-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;                 /* mobile tap target */
  padding: 12px 14px;
  border: 2px solid var(--cn-line);
  border-radius: 10px;
  font-size: 16px;                  /* prevents iOS zoom */
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.cn-input:focus { border-color: var(--cn-blue); }
.cn-input--code {
  letter-spacing: 0.5em;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Buttons. Prefixed with .cn-page + !important on colours because this page
   still loads the theme/plugin stylesheets via wp_head, and their generic
   `button:hover` / `a.button:hover` rules would otherwise repaint these
   (e.g. a purple hover background swallowing the text). */
.cn-page .cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;                 /* comfortable mobile target */
  margin-top: 12px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 2px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.cn-page .cn-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Looks disabled but stays clickable so we can surface WHY (hover title / tap). */
.cn-page .cn-btn--primary.is-blocked,
.cn-page .cn-btn--primary.is-blocked:hover { opacity: .5; cursor: not-allowed; background-color: var(--cn-purple) !important; }

/* Primary — purple background, white text (both states). */
.cn-page .cn-btn--primary,
.cn-page a.cn-btn--primary {
  background-color: var(--cn-purple) !important;
  color: #fff !important;
  border-color: var(--cn-purple) !important;
}
.cn-page .cn-btn--primary:not(:disabled):hover,
.cn-page a.cn-btn--primary:hover {
  background-color: #431a86 !important; /* lighter purple so hover is visible */
  color: #fff !important;
  border-color: #431a86 !important;
}

/* Ghost/secondary — white background, purple text; hover = faint purple tint.
   Text stays purple in every state, so it never blends into the background. */
.cn-page .cn-btn--ghost,
.cn-page a.cn-btn--ghost {
  background-color: #fff !important;
  color: var(--cn-purple) !important;
  border-color: var(--cn-line) !important;
}
.cn-page .cn-btn--ghost:not(:disabled):hover,
.cn-page a.cn-btn--ghost:hover {
  background-color: rgba(46, 12, 100, 0.06) !important;
  color: var(--cn-purple) !important;
  border-color: var(--cn-purple) !important;
}

.cn-gate__actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.cn-page .cn-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* mobile tap target */
  background: none !important;
  border: none;
  padding: 0;
  color: var(--cn-blue) !important;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.cn-page .cn-link:hover { color: #155a94 !important; text-decoration: underline; }
.cn-page .cn-link:disabled { color: var(--cn-muted) !important; cursor: not-allowed; text-decoration: none; }

/* Password field + show/hide toggle */
.cn-pw { position: relative; }
.cn-input--pw { padding-right: 46px; }
.cn-page .cn-pw__toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none !important;
  background: none !important;      /* kill theme button:hover purple fill */
  color: var(--cn-muted) !important;
  cursor: pointer;
  border-radius: 8px;
}
.cn-page .cn-pw__toggle:hover { background: none !important; }
/* Force the icon size — a theme `svg { width:… }` rule was collapsing it to 0
   width inside the flex button (0x20 → invisible). Paint strokes directly (not
   via currentColor) so a theme `color` rule can't turn it white either. */
.cn-page .cn-pw__toggle svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  fill: none !important;
}
.cn-page .cn-pw__toggle svg path,
.cn-page .cn-pw__toggle svg circle,
.cn-page .cn-pw__toggle svg line {
  stroke: #6b6b7a !important;
  fill: none !important;
}
.cn-page .cn-pw__toggle:hover svg path,
.cn-page .cn-pw__toggle:hover svg circle,
.cn-page .cn-pw__toggle:hover svg line {
  stroke: #2e0c64 !important;       /* purple tint on hover */
}

/* Divider */
.cn-or {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--cn-muted);
  font-size: 12px;
  margin: 18px 0 8px;
}
.cn-or::before, .cn-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cn-line);
}
.cn-or span { padding: 0 12px; }

/* Discreet social login — small label + small icons, understated */
.cn-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.cn-social__label {
  font-size: 12px;
  color: var(--cn-muted);
}
.cn-social__icons { display: flex; gap: 8px; }
.cn-social__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                      /* keeps the tap target while looking small */
  height: 44px;
  border-radius: 50%;
  background: none;
  text-decoration: none;
  transition: background .15s;
}
.cn-social__btn:hover { background: #f1f1f7; }
.cn-social__icon { display: inline-flex; }
.cn-social__icon svg { width: 20px; height: 20px; }

/* ---- Form: section titles, grid, select, textarea ---- */
.cn-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cn-purple);
  margin: var(--cn-sp-4) 0 var(--cn-sp-2);
}
/* Address form + grids: one flex column, uniform gap. Every row (single field
   or a multi-column grid) is a direct child and gets the same vertical gap; the
   grids handle their own equal-column gap. */
.cn-addr { display: flex; flex-direction: column; gap: var(--cn-sp-2); }
.cn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cn-sp-2);
}
.cn-field--full { grid-column: 1 / -1; }
.cn-hint { color: var(--cn-muted); font-size: 13px; margin: var(--cn-sp-1) 0 0; }
.cn-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Google Places suggestions must sit above everything (incl. mobile sheet). */
.pac-container { z-index: 100000 !important; }

.cn-select { appearance: auto; background: #fff; }
.cn-textarea {
  min-height: 60px;
  resize: vertical;
  line-height: 1.4;
  font-family: inherit;
}
.cn-charcount { display: block; text-align: right; font-size: 11px; color: var(--cn-muted); margin-top: 4px; }
/* Collapsed delivery-note trigger — a plain link that reveals the textarea. */
.cn-addnote { align-self: flex-start; padding: 2px 0; font-weight: 600; font-size: 14px; }

.cn-ship-toggle { margin-bottom: 4px; }

/* Shipping-method section disabled until billing is set. */
.cn-ship-section.is-locked { opacity: .5; pointer-events: none; user-select: none; }
.cn-ship-lockhint { margin: 0 0 var(--cn-sp-2); font-size: 13px; color: var(--cn-muted); }

/* Validation errors + next-step button */
.cn-errors {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(198, 40, 40, 0.35);
  background: rgba(198, 40, 40, 0.05);
  border-radius: 10px;
}
.cn-errors ul { margin: 0; padding-left: 18px; }
.cn-errors li { color: #c62828; font-size: 13px; line-height: 1.5; }
.cn-next { margin-top: 20px; }
/* Inline spinner inside the place-order button (while placing OR recalculating). */
.cn-btn__spinner {
  display: inline-block; width: 16px; height: 16px; margin-right: 9px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  border-radius: 50%; animation: cn-spin .7s linear infinite;
}
.cn-pay__logo { max-height: 24px; max-width: 40px; width: auto; display: block; }
/* Disabled payment method (e.g. COD unavailable) — greyed, with the reason. */
.cn-method-wrap.is-disabled { opacity: .6; background: var(--cn-bg); }
.cn-method-wrap.is-disabled .cn-method { cursor: not-allowed; }
.cn-method-wrap.is-disabled .cn-method__desc { color: #c0392b; }
/* Step 3 review recap */
/* Review step — compact: tighter card padding + row gap (the gap comes from the
   flex column, so no per-row margin). */
.cn-step1--review { gap: 8px; }
.cn-review__row {
  border: 1px solid var(--cn-line); border-radius: 10px;
  padding: 8px 12px; background: #fff;
}
.cn-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.cn-review__title { font-weight: 700; font-size: 12.5px; color: var(--cn-purple); }
.cn-review__body { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; line-height: 1.35; min-width: 0; }
.cn-review__muted { color: var(--cn-muted); font-size: 12.5px; }
.cn-step1--review .cn-sum__totals { margin-top: 4px; }
.cn-step1--review .cn-sum__totals div { padding: 2px 0; font-size: 13px; }
.cn-step1--review .cn-sum__grand { margin-top: 8px; padding-top: 8px; font-size: 16px; }
.cn-terms { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--cn-sp-2); font-size: 13.5px; line-height: 1.35; cursor: pointer; }
.cn-terms input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--cn-purple); flex: 0 0 auto; }
.cn-terms a { color: var(--cn-blue); }
.cn-terms--optional { margin-top: var(--cn-sp-2); color: var(--cn-muted); }
/* Extra breathing room above the terms/marketing disclaimers where they follow the
   additional-services block, so they don't crowd the gift-wrap add-on. */
.cn-addons + .cn-terms { margin-top: var(--cn-sp-4, 24px); }
/* Inline link-styled button (opens the terms modal — no new-tab navigation). */
.cn-page .cn-linkbtn {
  display: inline; padding: 0; border: 0; background: none; font: inherit;
  color: var(--cn-blue); text-decoration: underline; cursor: pointer;
}
.cn-page .cn-linkbtn:hover { text-decoration: none; }

/* Terms & conditions modal. */
.cn-terms-modal {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 12, 40, 0.5); padding: 20px;
}
.cn-terms-modal__box {
  display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: 85vh;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(16, 12, 40, 0.28); overflow: hidden;
}
.cn-terms-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--cn-line, #e3e3e8);
}
.cn-terms-modal__title { font-size: 17px; font-weight: 800; color: var(--cn-purple, #2e0c64); }
.cn-page .cn-terms-modal__close { border: 0; background: none; font-size: 20px; line-height: 1; color: #888; cursor: pointer; padding: 4px; }
.cn-terms-modal__body { padding: 18px 20px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: var(--cn-ink, #1a1a1a); }
.cn-terms-modal__body :first-child { margin-top: 0; }
.cn-terms-modal__body--loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--cn-muted); }
.cn-terms-modal__body--loading .cn-btn__spinner { margin: 0; border-color: rgba(46, 12, 100, 0.2); border-top-color: var(--cn-purple, #2e0c64); }
.cn-terms-modal__body a { color: var(--cn-blue); }
.cn-terms-modal__foot { padding: 14px 20px; border-top: 1px solid var(--cn-line, #e3e3e8); }
.cn-terms-modal__foot .cn-btn { width: 100%; }

/* ---- Άρθρο 39Α step ---- */
.cn-39a__intro { color: var(--cn-muted); font-size: 14px; margin: 0; }
.cn-39a__need-invoice p { font-size: 14px; line-height: 1.5; }
.cn-39a__modes { display: flex; flex-direction: column; gap: var(--cn-sp-2); margin: 0 0 var(--cn-sp-1); }
.cn-39a__mode, .cn-39a__bizopt { display: flex; align-items: flex-start; gap: var(--cn-sp-2); padding: var(--cn-sp-3); border: 1.5px solid var(--cn-line, #e3e3e8); border-radius: 12px; cursor: pointer; }
.cn-39a__mode.is-sel, .cn-39a__bizopt.is-sel { border-color: var(--cn-purple, #2e0c64); background: rgba(46, 12, 100, 0.04); box-shadow: 0 0 0 1px var(--cn-purple, #2e0c64) inset; }
.cn-39a__mode input, .cn-39a__bizopt input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--cn-purple, #2e0c64); flex: 0 0 auto; }
.cn-39a__mode span, .cn-39a__bizopt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-39a__mode strong, .cn-39a__bizopt strong { font-size: 15px; color: var(--cn-ink, #1a1a1a); }
.cn-39a__mode em, .cn-39a__bizopt em { font-style: normal; font-size: 13px; color: var(--cn-muted); line-height: 1.4; }
/* Field groups reuse the checkout's field rhythm (same row spacing as the address/invoice grid). */
.cn-39a__panel { margin-top: var(--cn-sp-3); padding-top: var(--cn-sp-3); border-top: 1px solid var(--cn-line, #e3e3e8); display: flex; flex-direction: column; gap: var(--cn-sp-3); }
.cn-39a__afmrow { display: flex; align-items: center; justify-content: space-between; gap: var(--cn-sp-2); flex-wrap: wrap; font-size: 15px; }
.cn-39a__ok { color: #1f7a33; font-weight: 700; }
.cn-39a__form { display: flex; flex-direction: column; gap: var(--cn-sp-3); }
.cn-39a .cn-grid { row-gap: var(--cn-sp-3); }
.cn-39a__otpgen { border: 1px dashed var(--cn-line, #e3e3e8); border-radius: 10px; padding: var(--cn-sp-3); display: flex; flex-direction: column; gap: var(--cn-sp-3); }
.cn-39a__hint, .cn-39a__note { font-size: 12.5px; color: var(--cn-muted); line-height: 1.45; margin: 0; }
.cn-39a__biz { display: flex; flex-direction: column; gap: var(--cn-sp-2); }
.cn-39a__drop { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: var(--cn-sp-3); border: 1.5px dashed var(--cn-purple, #2e0c64); border-radius: 12px; color: var(--cn-purple, #2e0c64); font-weight: 600; font-size: 14px; cursor: pointer; background: rgba(46, 12, 100, 0.03); }
.cn-39a__drop input { display: none; }
.cn-39a__files { list-style: none; margin: var(--cn-sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--cn-sp-1); }
.cn-39a__files li { display: flex; align-items: center; justify-content: space-between; gap: var(--cn-sp-2); padding: 9px 12px; border: 1px solid var(--cn-line, #e3e3e8); border-radius: 9px; font-size: 13.5px; }
.cn-39a__fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-39a__applied { display: flex; flex-direction: column; gap: var(--cn-sp-3); }
.cn-39a__badge { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 10px; background: rgba(0, 185, 0, 0.10); color: #1f7a33; font-weight: 600; font-size: 14.5px; }
/* Reduced island VAT (17%) note. */
.cn-island-note { margin: 0 0 var(--cn-sp-3); padding: 12px 16px; border-radius: 10px; background: rgba(30, 115, 190, 0.08); border: 1px solid rgba(30, 115, 190, 0.25); color: var(--cn-ink, #1a1a1a); font-size: 13.5px; line-height: 1.5; }

.cn-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
/* Apple Pay / wallet — Stripe's Express Checkout button occupies the button slot,
   full-width to match the place-order button. */
.cn-step-nav--wallet { display: block; }
.cn-step-nav--wallet .cn-wallet { width: 100%; max-width: none; }
.cn-wallet__el { min-height: 46px; }
.cn-step-nav .cn-next { margin-top: 0; flex: 1 1 auto; }

/* Custom saved-address dropdown (two-line rows + edit on the right) */
.cn-picker { position: relative; }
.cn-picker__label { display: block; font-size: 12px; font-weight: 600; color: var(--cn-muted); margin-bottom: 6px; }
.cn-page .cn-picker__open {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border: 2px solid var(--cn-line) !important; border-radius: 10px;
  background: #fff !important; color: var(--cn-ink) !important;
  cursor: pointer; text-align: left; font: inherit;
}
.cn-page .cn-picker__open:hover { border-color: #cfcfe0 !important; background: #fff !important; }
.cn-picker__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cn-picker__main { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-picker__sub { font-size: 12px; color: var(--cn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-picker__chevron { flex: 0 0 auto; display: inline-flex; color: var(--cn-muted); transition: transform .2s ease; }
.cn-picker__chevron svg { display: block; }
.cn-picker__chevron.up { transform: rotate(180deg); }
.cn-picker__menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  margin: 6px 0 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--cn-line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  max-height: 340px; overflow-y: auto;
}
/* Each menu row: selectable address (left) + inline "Επεξεργασία" (right). */
.cn-picker__li { display: flex; align-items: center; border-radius: 8px; }
.cn-picker__li.is-current { background: rgba(46, 12, 100, 0.05); }
.cn-page .cn-picker__item {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border: none !important; background: none !important;
  border-radius: 8px; cursor: pointer; text-align: left; font: inherit;
  color: var(--cn-ink) !important;
}
.cn-picker__li:hover { background: rgba(46, 12, 100, 0.05); }
.cn-picker__item--new { color: var(--cn-purple) !important; font-weight: 700; }
.cn-page .cn-picker__item-edit {
  flex: 0 0 auto;
  border: none !important; background: none !important;
  color: var(--cn-blue) !important; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 0 12px;
}
.cn-page .cn-picker__item-edit:hover { color: #155a94 !important; text-decoration: underline; }

/* Text-link buttons must never carry theme button chrome (bg/border/radius). */
.cn-page .cn-link,
.cn-page .cn-diffaddr-toggle,
.cn-page .cn-extras__toggle,
.cn-page .cn-ship-more,
.cn-page .cn-picker__item-edit,
.cn-page .cn-boxnow__change {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Fake "address" input — looks like a field, opens the popup on click. */
.cn-page .cn-fakeinput {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--cn-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--cn-muted) !important;
  font: inherit; font-size: 16px;
  text-align: left; cursor: pointer;
}
.cn-page .cn-fakeinput:hover { border-color: #cfcfe0 !important; }

/* Failed validation: flag the address control (dropdown / fake input / summary) red. */
.cn-page .cn-picker__open.is-invalid,
.cn-page .cn-fakeinput.is-invalid,
.cn-page .cn-input.is-invalid { border-color: #c62828 !important; }
.cn-addr-summary.is-invalid { border-color: #c62828; }
.cn-modal__err { padding: 0 var(--cn-sp-3); margin: 0 0 var(--cn-sp-2); }

/* Address summary card + add button */
.cn-addr-summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--cn-line); border-radius: 10px; background: #fff;
}
.cn-addr-summary__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.cn-addr-summary__phone { color: var(--cn-muted); font-size: 13px; }
.cn-page .cn-addr-add {
  margin-top: 12px; width: 100%; min-height: 48px; padding: 12px;
  border: 1px dashed var(--cn-line) !important; border-radius: 10px;
  background: #fafafe !important; color: var(--cn-purple) !important;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cn-page .cn-addr-add:hover { border-color: var(--cn-purple) !important; background: #f4f2fb !important; }

/* Address editor modal (form + map) */
.cn-modal-overlay {
  position: fixed; inset: 0; z-index: 90000;
  background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cn-modal {
  width: min(560px, 100%); max-height: 92vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--cn-radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.cn-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--cn-sp-3); border-bottom: 1px solid var(--cn-line); }
.cn-modal__title { font-weight: 800; color: var(--cn-purple); font-size: 16px; }
.cn-page .cn-modal__close {
  width: 32px; height: 32px; border: none !important; background: none !important;
  color: var(--cn-muted) !important; font-size: 16px; cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cn-page .cn-modal__close:hover { background: var(--cn-bg) !important; color: var(--cn-ink) !important; }
.cn-modal__head-actions { display: inline-flex; align-items: center; gap: 6px; }
.cn-page .cn-modal__pencil {
  width: 32px; height: 32px; border: none !important; background: none !important;
  color: var(--cn-muted) !important; font-size: 15px; cursor: pointer; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cn-page .cn-modal__pencil:hover { background: var(--cn-bg) !important; color: var(--cn-purple) !important; }
.cn-page .cn-modal__pencil.is-on { background: rgba(46, 12, 100, 0.1) !important; color: var(--cn-purple) !important; }
/* Modal body is a flex column: ΑΦΜ block, address form and map are evenly
   spaced by one gap token — same rhythm as inside the address form. */
.cn-modal__body { padding: var(--cn-sp-3); overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
/* Roomier vertical rhythm inside the invoice popup only — the notched labels sit
   on each box's top edge, so the default 12px group gap read as cramped. Scoped to
   the modal (not the global --cn-sp-2 token) and vertical-only: grids keep their
   12px column gap, just a wider row-gap. */
.cn-modal__body .cn-afm-block,
.cn-modal__body .cn-afm-company,
.cn-modal__body .cn-addr { gap: 18px; }
.cn-modal__body .cn-grid { row-gap: 18px; }
/* Uniform control height so inputs and native selects line up on every row. */
.cn-modal__body .cn-input:not(.cn-textarea),
.cn-modal__body .cn-select,
.cn-modal__body .cn-afm-input input { min-height: 50px; height: 50px; box-sizing: border-box; }
.cn-input:disabled { background: var(--cn-bg); color: var(--cn-muted); cursor: not-allowed; }

/* Email typo suggestion */
.cn-email-suggest { margin: var(--cn-sp-1) 0 0; font-size: 13px; color: var(--cn-muted); }
.cn-modal__foot { display: flex; gap: var(--cn-sp-2); padding: var(--cn-sp-3); border-top: 1px solid var(--cn-line); }
.cn-page .cn-modal__foot .cn-btn { margin-top: 0; flex: 1 1 0; width: auto; }

.cn-map-wrap { display: flex; flex-direction: column; gap: var(--cn-sp-1); }
.cn-map-hint { display: block; font-size: 12px; color: var(--cn-muted); }
.cn-map { width: 100%; height: 220px; border-radius: 10px; border: 1px solid var(--cn-line); overflow: hidden; }

/* Discreet dotted "different shipping address?" toggle (last item of billing). */
.cn-diffaddr-toggle {
  display: inline-block;
  align-self: flex-start; /* don't stretch in the flex column → sits left, content width */
  margin-top: 1px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  color: var(--cn-muted);
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cn-diffaddr-toggle:hover { color: var(--cn-purple); }
.cn-diffaddr {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--cn-line);
}
.cn-diffaddr__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.cn-diffaddr__title { font-weight: 700; color: var(--cn-purple); font-size: 14px; }

/* Shipping methods — the whole row (incl. BoxNow locker) is one bordered card. */
.cn-method-list { display: flex; flex-direction: column; gap: 10px; }
.cn-method-wrap {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--cn-line);
  border-radius: var(--cn-radius);
  transition: border-color .15s, background .15s;
}
.cn-method-wrap.is-selected { border-color: var(--cn-purple); background: rgba(46, 12, 100, 0.04); }
/* Sole option — a confirmed row, not a picker: no radio, no hover/pointer, a
   quiet green check instead so it doesn't read as "one of several choices". */
.cn-method-wrap.is-single { border-color: var(--cn-line); background: #fff; }
.cn-method-wrap.is-single .cn-method { cursor: default; }
.cn-method__check {
  flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--cn-green, #00b900);
}
.cn-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}
.cn-method input { accent-color: var(--cn-purple); width: 18px; height: 18px; flex: 0 0 auto; }
.cn-method__icon { flex: 0 0 auto; display: inline-flex; color: var(--cn-purple); }
.cn-method__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cn-method__name { font-weight: 600; font-size: 14px; }
.cn-method__desc { font-size: 12px; color: var(--cn-muted); line-height: 1.4; }

/* Payment rows: radio + [icon + title on one line] + description below. The
   icon and title always share a line; a multi-line desc never knocks them out
   of alignment. Description clamps to 2 lines w/ a toggle. */
.cn-method--pay { align-items: flex-start; gap: 12px; }
.cn-method--pay > input { margin-top: 4px; flex: 0 0 auto; }
.cn-method--pay .cn-method__text { flex: 1 1 auto; gap: 4px; }
/* Inline flow (not flex) so the icon sits at the start of the title and, when the
   title wraps to 2+ lines, the following lines start UNDER the icon — the title wraps
   around it — instead of being trapped in a narrow column beside it. */
.cn-method--pay .cn-method__head { display: block; line-height: 20px; }
.cn-method--pay .cn-method__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 20px; margin-right: 10px; vertical-align: -5px; /* align with first line */
}
.cn-method--pay .cn-method__icon img { max-width: 26px; max-height: 20px; width: auto; height: auto; }
.cn-method--pay .cn-method__name { display: inline; }
/* Info glyph next to "Αντικαταβολή μη διαθέσιμη" — hover/focus shows the reason. */
.cn-method__info { display: inline-flex; align-items: center; margin-left: 5px; color: var(--cn-muted, #7a7a85); cursor: help; vertical-align: -2px; }
.cn-method__info:focus-visible { outline: 2px solid var(--cn-purple, #2e0c64); outline-offset: 2px; border-radius: 50%; }
/* Accepted-card badges. DESKTOP: pinned small at the TOP-RIGHT (the original layout);
   the text reserves room on the right so the title doesn't run under them. On phones
   (≤560px) they move to the bottom-right + larger — see the mobile override below. */
.cn-method--pay { position: relative; }
.cn-method__brands {
  position: absolute; right: 14px; top: 12px; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px;
  max-width: 124px; pointer-events: none;
}
.cn-method__brands svg { display: block; border-radius: 2px; height: 18px; width: auto; }
/* Reserve room to the RIGHT only on rows that show badges, so the top-right badges
   never overlap the title (other rows keep their natural spacing). */
.cn-method--pay:has(.cn-method__brands) .cn-method__text { padding-right: 132px; }
.cn-method__desc.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.cn-page .cn-method__more {
  align-self: flex-start; margin-top: 2px;
  background: none; border: none; padding: 0;
  color: var(--cn-blue); font-size: 12px; font-weight: 600; cursor: pointer;
}
.cn-page .cn-method__more:hover { color: var(--cn-purple); text-decoration: underline; }
.cn-method__cost { flex: 0 0 auto; font-weight: 700; color: var(--cn-purple); align-self: flex-start; }

/* Shipping rows reuse the payment card layout (.cn-method--pay); these are the only
   deltas — the price takes the slot the card-brand badges occupy on payment rows, and
   the "sole option" green check needs the same nudge the radio gets. */
.cn-method--ship .cn-method__cost { line-height: 20px; white-space: nowrap; }
.cn-method--ship .cn-method__check { margin-top: 2px; }
/* The icon column is 26px wide + 10px gap, matching the payment rows, so the BoxNow
   sub-row's 46px indent (16 padding + 18 control + 12 gap) still lines up. */

/* BoxNow locker — auto-picked nearest, own sub-row inside the card. */
.cn-boxnow { padding: 0 14px 12px 46px; }
.cn-page .cn-boxnow__pick {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--cn-line) !important;
  border-radius: 10px;
  background: #fafafe !important;
  color: var(--cn-ink) !important;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.cn-page .cn-boxnow__pick:hover { border-color: var(--cn-purple) !important; background: #f4f2fb !important; }
.cn-page .cn-boxnow__pick.is-picked {
  border-style: solid !important;
  border-color: rgba(0, 185, 0, 0.4) !important;
  background: rgba(0, 185, 0, 0.05) !important;
}
.cn-boxnow__ico { flex: 0 0 auto; }
.cn-boxnow__loc { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.cn-boxnow__loc strong { font-size: 13px; line-height: 1.25; }
.cn-boxnow__addr { font-size: 12px; line-height: 1.2; color: var(--cn-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-boxnow__dist { display: block; font-size: 11.5px; line-height: 1.2; color: var(--cn-green); font-weight: 600; margin-top: 2px; }
.cn-boxnow__change { flex: 0 0 auto; color: var(--cn-blue); font-weight: 700; font-size: 12px; }
/* Harden against theme button:hover (dark bg swallowing the text). */
.cn-page .cn-method__locker {
  background-color: #fff !important;
  color: var(--cn-purple) !important;
  border: 1px solid var(--cn-purple) !important;
}
.cn-page .cn-method__locker:hover {
  background-color: rgba(46, 12, 100, 0.06) !important;
  color: var(--cn-purple) !important;
}
.cn-page .cn-method__locker.is-picked {
  background-color: rgba(0, 185, 0, 0.06) !important;
  color: #0a7d0a !important;
  border-color: var(--cn-green) !important;
}
.cn-page .cn-method__locker.is-picked:hover { background-color: rgba(0, 185, 0, 0.12) !important; color: #0a7d0a !important; }
.cn-page .cn-diffaddr-toggle,
.cn-page .cn-diffaddr-toggle:hover { background: none !important; }
.cn-page .cn-diffaddr-toggle:hover { color: var(--cn-purple) !important; }
/* Sits right under the last method so it reads as part of the same group. */
.cn-ship-more { margin-top: 2px; min-height: 34px; padding-left: 2px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
/* Hover underline stays on the label text only — never under the chevron. */
.cn-page .cn-ship-more:hover { text-decoration: none; }
.cn-page .cn-ship-more:hover .cn-ship-more__txt { text-decoration: underline; }
/* Keep methods visible (just dimmed) while shipping recalculates on select. */
/* Dim (not block) while recalculating — radios are disabled separately, but the
   BoxNow locker button + toggle stay clickable. */
.cn-ship-methods.is-recalculating .cn-method { opacity: .55; transition: opacity .1s; }

/* BoxNow locker — clean rounded popup (widget brings its own header/search),
   same as the classic checkout. */
.cn-boxnow-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 99998; }
.cn-boxnow-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  border: 0;
  z-index: 99999;
  background: #fff;
}
.cn-page .cn-boxnow-close {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 100000;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6) !important;
  color: #fff !important;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cn-page .cn-boxnow-close:hover { background: rgba(0, 0, 0, .85) !important; color: #fff !important; }

/* ---- Order summary ---- */
.cn-sum__title { font-size: 16px; font-weight: 700; color: var(--cn-purple); margin: 0 0 14px; }
.cn-sum__items { list-style: none; margin: 0; padding: 0; }
.cn-sum__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--cn-line);
  font-size: 14px;
}
.cn-sum__thumb { position: relative; flex: 0 0 auto; width: 44px; height: 44px; }
.cn-sum__thumb img {
  width: 44px; height: 44px; object-fit: cover;
  border: 1px solid var(--cn-line); border-radius: 8px; background: #fff;
}
.cn-sum__qty {
  position: absolute; top: -8px; right: -8px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cn-purple); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px;
}
.cn-sum__name { flex: 1 1 auto; min-width: 0; line-height: 1.3; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cn-sum__qtytxt { color: var(--cn-muted); font-size: 12px; }
/* Discreet quantity stepper */
.cn-sum__qtyctl { display: inline-flex; align-items: center; gap: 8px; }
.cn-page .cn-sum__qtyctl button {
  width: 22px; height: 22px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cn-line) !important; border-radius: 6px;
  background: #fff !important; color: var(--cn-ink) !important;
  font-size: 15px; cursor: pointer;
}
.cn-page .cn-sum__qtyctl button:hover:not(:disabled) { border-color: var(--cn-purple) !important; color: var(--cn-purple) !important; }
.cn-page .cn-sum__qtyctl button:disabled { opacity: .4; cursor: not-allowed; }
.cn-sum__qtynum { min-width: 16px; text-align: center; font-size: 13px; font-weight: 600; }
.cn-sum__items.is-busy { opacity: .55; pointer-events: none; }
.cn-sum__price { flex: 0 0 auto; font-weight: 600; }
.cn-sum__totals { margin: 14px 0 0; }
.cn-sum__totals div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--cn-ink); }
.cn-sum__totals dt, .cn-sum__totals dd { margin: 0; }
.cn-sum__discount dd { color: var(--cn-purple); }
/* Wallet payment shows like a discount — the deducted amount in the accent colour. */
.cn-sum__wallet dt, .cn-sum__wallet dd { color: var(--cn-purple); font-weight: 600; }
/* VAT breakdown (invoices only): net + per-rate ΦΠΑ, muted, set off from the
   item-based lines above by a hairline. */
.cn-sum__vatrow dt, .cn-sum__vatrow dd { color: var(--cn-muted); font-size: 13px; }
.cn-sum__vatrow--first { margin-top: 4px; border-top: 1px dashed var(--cn-line); }
/* Receipt: single "prices include ΦΠΑ x%" note (no breakdown). */
.cn-sum__vatnote { margin: 6px 0 0; font-size: 12px; color: var(--cn-muted); text-align: right; }
.cn-sum__grand {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--cn-line);
  font-size: 18px; font-weight: 800; color: var(--cn-purple);
}

/* Desktop sticky sidebar */
.cn-sum--sidebar {
  flex: 0 0 320px;
  position: sticky;
  top: 20px;
  background: #fff;
  border: 1px solid var(--cn-line);
  border-radius: var(--cn-radius);
  padding: 20px 20px 22px;
}
.cn-sum--mobile { display: none; }

@media (max-width: 900px) {
  .cn-layout { display: block; max-width: 720px; }
  .cn-main { padding-bottom: 76px; }         /* clear the fixed mobile bar */
  .cn-sum--sidebar { display: none; }
  .cn-sum--mobile { display: block; }
}

/* Mobile bottom sheet — totals always visible, tap to expand items */
.cn-sum--mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 1px solid var(--cn-line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.cn-sum__bar {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  min-height: 56px;
  background: none; border: none; font: inherit; cursor: pointer;
}
.cn-sum__bar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--cn-purple); }
.cn-sum__chevron { display: inline-block; transition: transform .15s; transform: rotate(180deg); }
.cn-sum__chevron.up { transform: rotate(0deg); }
.cn-sum__bar-total { font-size: 18px; font-weight: 800; color: var(--cn-purple); }
.cn-sum__body {
  max-height: 50vh; overflow-y: auto;
  padding: 0 18px 18px;
  border-top: 1px solid var(--cn-line);
}

@media (max-width: 560px) {
  .cn-body { padding: 22px 16px; }
  .cn-doctype__options { flex-direction: column; }
  .cn-step__label { font-size: 11px; }
  .cn-gate { padding: 24px 16px 60px; }
  .cn-gate__card { padding: 24px 18px; }
  .cn-grid, .cn-grid--3 { grid-template-columns: 1fr; }   /* single column on phones */
  .cn-afm-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .cn-afm-field { flex: 1 1 auto; }
  /* Phones: the top-right badges squeezed the title into a narrow column, so pin them
     bigger at the BOTTOM-RIGHT and give the text full width with bottom room instead. */
  .cn-method__brands { top: auto; bottom: 12px; max-width: 108px; }
  .cn-method__brands svg { height: 15px; }
  .cn-method--pay:has(.cn-method__brands) .cn-method__text { padding-right: 0; padding-bottom: 18px; }
}

/* ---- Finalize block (bottom of the payment step): gift wrap + terms + place order.
   Separated from the payment-method list with a divider. ---- */
.cn-finalize { margin-top: var(--cn-sp-3, 18px); padding-top: var(--cn-sp-3, 18px); border-top: 1px solid var(--cn-line, #e3e3e8); }
.cn-finalize .cn-addons { margin-bottom: var(--cn-sp-2, 12px); }
/* The additional-services block reuses .cn-review__row but should NOT carry that
   card's outer border/background — the inner .cn-addon box is the only bordered part. */
.cn-review__row.cn-addons { border: 0; border-radius: 0; padding: 0; background: transparent; }
/* ---- additional services (gift wrapping) ---- */
.cn-addons .cn-addon {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--cn-line, #e3e3e8); border-radius: 12px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.cn-addons .cn-addon.is-selected { border-color: var(--cn-purple, #2e0c64); background: rgba(46, 12, 100, 0.04); }
.cn-addons .cn-addon.is-unavailable { opacity: .6; cursor: not-allowed; }
/* Checkbox + icon sit centered on the title's 22px line; the body text (title +
   description) shares one left edge so everything lines up. */
.cn-addons .cn-addon input { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--cn-purple, #2e0c64); align-self: flex-start; }
.cn-addon__ico { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--cn-purple, #2e0c64); }
.cn-addon__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cn-addon__title { font-size: 14.5px; font-weight: 700; line-height: 22px; color: var(--cn-ink, #1a1a1a); display: flex; align-items: baseline; gap: 7px; }
.cn-addon__fee { font-weight: 700; color: var(--cn-purple, #2e0c64); margin-left: 4px; white-space: nowrap; flex: 0 0 auto; }
.cn-addon__desc { font-size: 12.5px; color: var(--cn-muted, #6b6b76); }
.cn-addon__desc--na { color: #b26a00; }