/* editor.css — reskinned from the existing visual-editor.css. Same structure
   (map view + section sketches + suggestion chips), Goodland Design palette. */

/* Deep teal→navy used for the editor chrome (sidebar + top bars) */
:root { --gd-editor-dark: linear-gradient(135deg, #0d2233 0%, #103c49 55%, #155f6e 100%); }

/* ---- Picker: full-page editor shell ---- */
@keyframes gd-fade-in { from { opacity: 0; } to { opacity: 1; } }

.gdp-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: var(--gd-page);
  display: flex;
}
.gdp-dialog {
  flex: 1; width: 100%; height: 100%;
  background: var(--gd-page);
  overflow: hidden;
  display: flex; flex-direction: row;
  animation: gd-fade-in .22s var(--gd-ease);
}

/* Main column (header + scrolling body) sits right of the sidebar */
.gdp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ---- Left rail: recent edits (top) + cart total (bottom) ---- */
.gdp-sidebar {
  width: 270px; flex-shrink: 0;
  background: var(--gd-editor-dark); color: #fff;
  display: flex; flex-direction: column; overflow: hidden;
}
.gdp-side__brand {
  display: flex; align-items: center; gap: 9px;
  padding: 18px 22px 12px;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05rem;
}
.gdp-side__brand svg { width: 22px; height: 22px; color: var(--gd-amber); flex-shrink: 0; }
.gdp-side__head {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); padding: 6px 22px 8px;
}
.gdp-side__list { flex: 1; overflow-y: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.gdp-side__empty {
  font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .5);
  padding: 8px 8px 0; margin: 0;
}
.gdp-side__row {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid transparent;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: background .13s var(--gd-ease), border-color .13s var(--gd-ease), transform .1s var(--gd-ease);
}
.gdp-side__row:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .16); }
.gdp-side__row:active { transform: scale(.99); }
.gdp-side__row:focus-visible { outline: none; border-color: var(--gd-amber); }
.gdp-side__row-dot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
  background: var(--gd-teal);
}
.gdp-side__row-dot--addon { background: var(--gd-amber); }
.gdp-side__row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gdp-side__row-loc {
  font-size: .82rem; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gdp-side__row-what {
  font-size: .74rem; color: rgba(255, 255, 255, .6); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gdp-side__cart {
  flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .2); padding: 16px 22px;
}
.gdp-side__cart-head {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); margin-bottom: 10px;
}
.gdp-side__cart-items { display: flex; flex-direction: column; }
.gdp-side__cart-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gdp-side__cart-item-loc {
  font-size: .82rem; color: rgba(255, 255, 255, .85); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gdp-side__cart-item-price { font-size: .82rem; font-weight: 700; flex-shrink: 0; }
.gdp-side__cart-empty { font-size: .8rem; color: rgba(255, 255, 255, .5); padding: 4px 0 8px; line-height: 1.4; }
.gdp-side__cart-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 12px; padding-top: 12px; border-top: 1.5px solid rgba(255, 255, 255, .18);
}
.gdp-side__cart-total-lbl { font-size: .82rem; color: rgba(255, 255, 255, .75); font-weight: 600; }
.gdp-side__cart-total-val { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 600; }

/* ---- Header ---- */
.gdp-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 22px; background: var(--gd-editor-dark); color: #fff; flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gdp-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  background: rgba(255, 255, 255, .12); border: none; color: #fff;
  border-radius: 50%; cursor: pointer;
  transition: background .2s var(--gd-ease), transform .12s var(--gd-ease);
}
.gdp-back svg { width: 19px; height: 19px; }
.gdp-back:hover { background: rgba(255, 255, 255, .24); transform: translateX(-2px); }
.gdp-close {
  background: rgba(255, 255, 255, .12); border: none; color: #fff;
  border-radius: 999px; padding: 7px 11px; font-family: "Outfit", sans-serif;
  font-weight: 700; font-size: .85rem; cursor: pointer; flex-shrink: 0;
  transition: background .2s var(--gd-ease);
}
.gdp-close:hover { background: rgba(255, 255, 255, .24); }
.gdp-hd__hint { font-size: .85rem; opacity: .8; flex: 1; min-width: 0; }

/* Page picker — custom dropdown (native <select> option lists can't be themed) */
.gdp-page { position: relative; display: inline-flex; align-items: stretch; flex-shrink: 0; margin-left: auto; }
.gdp-page__lbl {
  display: flex; align-items: center; padding: 0 12px;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); white-space: nowrap;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .2); border-right: none;
  border-radius: 999px 0 0 999px;
}
.gdp-page__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 13px; min-width: 132px;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: 0 999px 999px 0; cursor: pointer;
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: .82rem;
  transition: background .2s var(--gd-ease), border-color .2s var(--gd-ease);
}
.gdp-page__btn:hover { background: rgba(255, 255, 255, .18); }
.gdp-page.is-open .gdp-page__btn,
.gdp-page__btn:focus-visible { border-color: var(--gd-amber); outline: none; }
.gdp-page.is-open .gdp-page__lbl { border-color: var(--gd-amber); }
.gdp-page__current { flex: 1; text-align: left; white-space: nowrap; }
.gdp-page__chev { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s var(--gd-ease); }
.gdp-page.is-open .gdp-page__chev { transform: rotate(180deg); }

.gdp-page__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 100%; padding: 6px;
  background: #fff; border-radius: 14px;
  border: 1px solid rgba(0, 53, 122, .1);
  box-shadow: 0 18px 42px -12px rgba(0, 53, 122, .45);
  animation: gd-fade-in .14s var(--gd-ease);
}
.gdp-page__opt {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: none; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--gd-ink);
  font-family: "Outfit", sans-serif; font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background .13s var(--gd-ease), color .13s var(--gd-ease);
}
.gdp-page__opt + .gdp-page__opt { margin-top: 2px; }
.gdp-page__opt:hover { background: var(--gd-mist); }
.gdp-page__opt.is-active { background: var(--gd-grape); color: #fff; }

.gdp-body {
  flex: 1; overflow-y: auto; padding: 26px 24px 48px;
  /* Goodland touch: a soft dawn wash behind the editor interior */
  background:
    radial-gradient(1100px 380px at 18% -8%, rgba(176, 106, 230, .10), transparent 60%),
    radial-gradient(900px 420px at 96% 4%, rgba(156, 0, 179, .12), transparent 55%),
    var(--gd-mist);
}
/* Keep map content aligned + readable on a full-width page */
.gdp-body > * { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto; }

/* ================================================================
   DESCRIBE STEP — full-page, side-by-side (before | edit form)
   ================================================================ */
.gd-edit {
  position: fixed; inset: 0; z-index: 85;
  background: var(--gd-page);
  display: flex; flex-direction: column;
  animation: gd-fade-in .2s var(--gd-ease);
}
.gd-edit__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 22px; background: var(--gd-editor-dark); color: #fff; flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gd-edit__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
  background: rgba(255, 255, 255, .12); border: none; color: #fff;
  border-radius: 50%; cursor: pointer;
  transition: background .2s var(--gd-ease), transform .12s var(--gd-ease);
}
.gd-edit__icon svg { width: 19px; height: 19px; }
.gd-edit__icon:hover { background: rgba(255, 255, 255, .24); }
#descBack:hover { transform: translateX(-2px); }
.gd-edit__loc {
  flex: 1; min-width: 0;
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Mini-edit switcher: tabs for each section change inside a container */
.gd-edit__mini-switch {
  display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
  padding: 10px 22px; background: #0c2a36; border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.gd-edit__mini-tab {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid transparent; color: #cfe7ec;
  font-family: "Outfit", sans-serif; font-size: .82rem; font-weight: 600;
  transition: background .15s var(--gd-ease), color .15s var(--gd-ease);
}
.gd-edit__mini-tab:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.gd-edit__mini-tab.is-active { background: #fff; color: var(--gd-ink); border-color: #fff; }

.gd-edit__cols { flex: 1; display: flex; overflow: hidden; }
.gd-edit__pane {
  flex: 1; min-width: 0; overflow-y: auto; padding: 40px;
  display: flex; flex-direction: column; justify-content: safe center;
}

/* LEFT — what they have now */
.gd-edit__before {
  background: var(--gd-mist);
  border-right: 1px solid rgba(0, 53, 122, .1);
}
.gd-edit__pane-lbl {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gd-grape); margin-bottom: 12px;
}
.gd-edit__pane-lbl--before { color: var(--gd-plum-500); }
.gd-edit__pane-lbl--after { color: var(--gd-flame); }
.gd-edit__before-val {
  background: #fff; border: 1.5px solid rgba(0, 53, 122, .12); border-radius: 14px;
  padding: 18px 20px; font-size: 1.05rem; line-height: 1.55; color: var(--gd-ink);
  box-shadow: 0 2px 10px rgba(0, 53, 122, .05);
}
.gd-edit__before-empty {
  border: 1.5px dashed rgba(0, 53, 122, .2); border-radius: 14px;
  padding: 18px 20px; font-size: .95rem; line-height: 1.55; color: var(--gd-plum-500);
}
.gd-edit__preview { margin-bottom: 14px; }
.gd-edit__preview .gdp-blur { width: 100%; }
.gd-edit__current { margin-top: 2px; }
.gd-edit__current-lbl { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gd-plum-500); margin-bottom: 6px; }
.gd-edit__current-body {
  background: #fff; border: 1.5px solid rgba(0, 53, 122, .12); border-radius: 12px;
  padding: 14px 16px; font-size: .92rem; line-height: 1.55; color: var(--gd-ink);
  white-space: pre-wrap; max-height: 220px; overflow-y: auto;
  box-shadow: 0 2px 10px rgba(0, 53, 122, .05);
}
.gd-edit__current-empty { font-size: .9rem; color: var(--gd-plum-500); line-height: 1.5; }
/* Logo slot card — shown where a section's logo lives (image, not text) */
.gd-edit__logo-card {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
  padding: 14px 16px; background: #fff; border: 1.5px dashed rgba(156, 0, 179, .45);
  border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 53, 122, .05);
}
.gd-edit__logo-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.gd-edit__logo-meta { display: flex; flex-direction: column; gap: 3px; }
.gd-edit__logo-lbl { font-weight: 700; font-size: .95rem; color: var(--gd-ink); }
.gd-edit__logo-sub { font-size: .84rem; color: var(--gd-plum-500); line-height: 1.45; }
.gd-edit__re {
  margin-top: 16px; font-size: .9rem; color: var(--gd-ink); line-height: 1.5;
  background: rgba(156, 0, 179, .08); border-radius: 10px; padding: 12px 14px;
}
.gd-edit__re span {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gd-grape); margin-bottom: 3px;
}

/* RIGHT — the edit instructions */
.gd-edit__after { align-items: center; }
.gd-edit__form {
  width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
}
/* keep the "before" card from stretching full height */
.gd-edit__before-val, .gd-edit__before-empty { flex: 0 0 auto; }
.gd-edit__q { font-size: 1.05rem; font-weight: 700; color: var(--gd-ink); }
.gd-edit__sublabel { font-size: .82rem; font-weight: 700; color: var(--gd-ink); }
.gd-edit__hints { min-height: 60px; }
.gd-edit__textarea { min-height: 150px; }
.gd-edit__opt { font-weight: 400; color: var(--gd-plum-500); }

.gd-edit__counter {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: -6px; font-size: .78rem; color: var(--gd-plum-500); font-weight: 600;
}
.gd-edit__counter-chars { font-variant-numeric: tabular-nums; opacity: .8; }
.gd-edit__counter.is-over { color: var(--gd-flame); }
.gd-edit__counter.is-over .gd-edit__counter-words { font-weight: 700; }

.gd-edit__cost {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .88rem; color: var(--gd-plum-500);
  padding: 4px 2px; background: none;
}
.gd-edit__cost-price {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.7rem;
  color: var(--gd-flame); line-height: 1;
}
.gd-edit__cost-desc { font-size: .86rem; color: var(--gd-plum-500); }
.gd-edit__cost-desc strong { color: var(--gd-ink); font-weight: 700; }
.gd-edit__window { font-size: .84rem; color: var(--gd-plum-500); }
.gd-edit__window strong { color: var(--gd-flame); font-weight: 700; }
.gd-edit__window--closed { color: var(--gd-plum-500); }
.gd-edit__file-current { font-size: .84rem; color: var(--gd-plum-600); }
.gd-edit__file-current strong { color: var(--gd-ink); }
.gd-edit__photo { display: block; max-width: 240px; border-radius: 10px; border: 1px solid rgba(0, 53, 122, .1); }

/* Stage 2 — full-width review (uses the whole page, no empty column) */
.gd-edit__review { flex: 1; overflow-y: auto; padding: 36px 40px; }
.gd-review { max-width: 760px; margin: 0 auto; }
.gd-review__h { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.9rem; color: var(--gd-ink); }
.gd-review__loc { color: var(--gd-plum-500); font-weight: 600; margin: 4px 0 22px; }
.gd-review__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; }
.gd-review__card { background: #fff; border: 1.5px solid rgba(0, 53, 122, .12); border-radius: 14px; padding: 16px 18px; }
.gd-review__card--after { border-color: rgba(156, 0, 179, .35); box-shadow: 0 4px 16px rgba(156, 0, 179, .1); }
.gd-review__arrow { align-self: center; font-size: 1.6rem; color: var(--gd-grape); font-weight: 700; }
.gd-review__text { margin-top: 8px; line-height: 1.55; color: var(--gd-ink); white-space: pre-wrap; max-height: 240px; overflow-y: auto; }
.gd-review__note { margin-top: 10px; font-size: .82rem; line-height: 1.5; color: var(--gd-plum-500); }
.gd-review__notes { margin-top: 16px; background: var(--gd-mist); border-radius: 12px; padding: 12px 16px; font-size: .9rem; color: var(--gd-ink); line-height: 1.5; }
.gd-review__foot { margin-top: 24px; }
.gd-review__pay { margin-bottom: 4px; }
.gd-review__pay-note { font-size: .82rem; font-weight: 700; color: var(--gd-grape); padding-bottom: 8px; }
.gd-review__pay-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(0, 53, 122, .08); font-size: .92rem; color: var(--gd-ink); }
.gd-review__pay-row--muted { color: var(--gd-plum-500); }
.gd-review__pay-row strong, .gd-review__pay-total strong { font-variant-numeric: tabular-nums; }
.gd-review__pay-total { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0 0; font-weight: 700; font-size: 1rem; color: var(--gd-ink); }
/* The one upsell in the editor: a hosting client, on the screen where they're about
   to pay for an edit. Deliberately quiet — it sits directly above the pay button and
   must not compete with it. Never rendered for Care & Grow (see upgradeNudgeHtml). */
.gd-upsell {
  margin: 12px 0 2px; padding: 12px 14px;
  background: rgba(156, 0, 179, .07); border-radius: 12px;
}
.gd-upsell__h { font-size: .84rem; font-weight: 700; color: var(--gd-grape); }
.gd-upsell__list { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; color: var(--gd-ink); }
.gd-upsell__list li { margin: 3px 0; }
.gd-upsell__note { margin: 8px 0 0; font-size: .8rem; line-height: 1.45; color: var(--gd-plum-500); }
.gd-upsell__note a { color: var(--gd-flame); font-weight: 700; text-decoration: none; }
.gd-upsell__note a:hover { text-decoration: underline; }
.gd-upsell__link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--gd-flame); cursor: pointer; }
.gd-upsell__link:hover { text-decoration: underline; }

.gd-review__actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.gd-review__actions .gd-btn--block { flex: 1; width: auto; }
.gd-review__actions .gd-btn--ghost { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 760px) {
  .gd-edit__cols { flex-direction: column; }
  .gd-edit__before { border-right: none; border-bottom: 1px solid rgba(0, 53, 122, .1); flex: 0 0 auto; }
  .gd-edit__pane { padding: 22px 20px; }
  .gd-review__grid { grid-template-columns: 1fr; }
  .gd-review__arrow { transform: rotate(90deg); }
}

/* ================================================================
   MAP — branded intro + side-by-side section cards
   ================================================================ */
.gdp-intro {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 22px; padding: 4px 2px;
}
/* Live status pushed to the right, using the empty header space */
.gdp-intro__status {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
  gap: 3px; text-align: right; padding-left: 16px;
}
.gdp-intro__leaf {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px;
  color: #fff; background: var(--gd-grad-sunset, linear-gradient(135deg, var(--gd-amber), var(--gd-flame)));
  box-shadow: 0 6px 16px rgba(156, 0, 179, .3);
}
.gdp-intro__leaf svg { width: 24px; height: 24px; }
.gdp-intro__text { flex: 1; min-width: 0; }
.gdp-intro__title {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.5rem;
  color: var(--gd-ink); line-height: 1.15;
}
.gdp-intro__sub { font-size: .92rem; color: var(--gd-plum-500); margin-top: 3px; line-height: 1.45; }
.gdp-intro__sub strong { color: var(--gd-ink); font-weight: 600; }
.gdp-intro__pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.gdp-intro__pill::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.gdp-intro__pill--included { color: #0b6b62; }
.gdp-intro__pill--addon { color: var(--gd-flame); }

.gdp-sections { display: flex; flex-direction: column; gap: 16px; }

/* Each section is one self-contained card: a labelled header, then preview | options */
.vem-section {
  background: #fff; border: 1px solid rgba(0, 53, 122, .09);
  border-radius: 18px; padding: 16px 18px 18px;
  box-shadow: 0 4px 18px rgba(0, 53, 122, .06);
}
@keyframes gd-section-flash {
  0% { box-shadow: 0 0 0 0 rgba(156, 0, 179, .5), 0 4px 18px rgba(0, 53, 122, .06); }
  100% { box-shadow: 0 0 0 7px rgba(156, 0, 179, 0), 0 4px 18px rgba(0, 53, 122, .06); }
}
.vem-section--flash { border-color: var(--gd-grape); animation: gd-section-flash 1.5s var(--gd-ease); }
/* A section already edited in the current edit — tinted so progress is visible */
.vem-section--edited { background: rgba(156, 0, 179, .06); border-color: rgba(156, 0, 179, .35); }
.vem-section__edited {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; background: rgba(156, 0, 179, .14);
  color: var(--gd-grape); font-size: .72rem; font-weight: 700;
}
.vem-section__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.vem-section__head-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--gd-grape); }
.vem-section__label {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.3rem; font-weight: 600; line-height: 1.15;
  letter-spacing: normal; word-spacing: normal; text-transform: none;
  color: var(--gd-grape);
}

.vem-section__row { display: flex; gap: 20px; align-items: flex-start; }

/* LEFT — the live-site slice (or wireframe), captioned so its purpose is obvious */
.vem-section__preview { width: 340px; flex-shrink: 0; }
.vem-section__cap {
  font-size: .74rem; color: var(--gd-plum-500); margin-top: 8px; line-height: 1.35;
}
.vem-section__cap span { font-weight: 700; color: var(--gd-grape); }

/* RIGHT — what the member can actually request here */
.vem-section__opts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vem-opts__head {
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gd-plum-500);
}
.vem-opts__head-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--gd-grape); }
.vem-opts__hint {
  margin-left: auto; text-transform: none; letter-spacing: normal;
  font-weight: 500; font-size: .74rem; color: var(--gd-plum-500); opacity: .85;
}

/* ---- Live-site preview thumbnail ---- */
.vem-section__sketch {
  display: block; width: 100%; padding: 0; cursor: pointer; position: relative;
  border: 2px solid var(--gd-ink);
  border-radius: 12px; overflow: hidden;
  transition: box-shadow .2s var(--gd-ease);
}
.vem-section__sketch--clickable::after,
.gdp-blur--clickable::after {
  content: 'Describe a change here';
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(0, 53, 122, 0); opacity: 0;
  transition: opacity .18s, background .18s; pointer-events: none;
}
.vem-section__sketch--clickable:hover::after,
.gdp-blur--clickable:hover::after { opacity: 1; background: rgba(0, 53, 122, .52); }
.vem-section__sketch--clickable:hover,
.gdp-blur--clickable:hover { box-shadow: 0 0 0 3px var(--gd-grape); }

.gdp-blur {
  display: block; width: 100%; height: 150px; padding: 0; cursor: pointer; position: relative;
  border: 2px solid var(--gd-ink);
  border-radius: 12px; overflow: hidden;
  background: var(--gd-lilac);
  transition: box-shadow .2s var(--gd-ease);
}
.gdp-blur__frame {
  display: block; border: 0; pointer-events: none;
  position: absolute; top: 0; left: 0; transform-origin: top left;
  transition: opacity .2s ease;
}
.gdp-blur--clickable:focus-visible { outline: none; box-shadow: var(--gd-focus); }

/* ---- Suggested-edits dropdown (collapsed by default) ---- */
.vem-suggest { margin-bottom: 10px; border: 1.5px solid rgba(0, 53, 122, .1); border-radius: 12px; overflow: hidden; background: #fff; }
.vem-suggest__summary {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none;
  font-family: "Outfit", sans-serif; font-size: .82rem; font-weight: 700; color: var(--gd-grape);
}
.vem-suggest__summary::-webkit-details-marker { display: none; }
.vem-suggest__summary::marker { content: ''; }
.vem-suggest__chev { width: 16px; height: 16px; margin-left: auto; color: var(--gd-plum-500); transition: transform .2s var(--gd-ease); }
.vem-suggest[open] .vem-suggest__chev { transform: rotate(180deg); }
.vem-suggest__list { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 12px; }

/* ---- Quick-edit rows ---- */
.vem-chip {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; background: #fff;
  border: 1.5px solid rgba(0, 53, 122, .1); border-radius: 11px;
  cursor: pointer; font-family: "Outfit", sans-serif; text-align: left;
  transition: border-color .15s var(--gd-ease), box-shadow .15s var(--gd-ease), transform .1s var(--gd-ease);
}
.vem-chip + .vem-chip { margin-top: 8px; }
.vem-chip:hover { border-color: var(--gd-grape); box-shadow: 0 4px 12px rgba(156, 0, 179, .14); transform: translateY(-1px); }
.vem-chip:focus-visible { outline: none; box-shadow: var(--gd-focus); }
.vem-chip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vem-chip__q { font-size: .92rem; font-weight: 700; color: var(--gd-ink); line-height: 1.3; }
.vem-chip__cur { font-size: .78rem; color: var(--gd-plum-500); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vem-chip__go { width: 17px; height: 17px; color: var(--gd-grape); flex-shrink: 0; opacity: .5; transform: translateX(-3px); transition: opacity .15s var(--gd-ease), transform .15s var(--gd-ease); }
.vem-chip:hover .vem-chip__go { opacity: 1; transform: none; }

/* ---- Catch-all "describe something else" ---- */
.vem-section__custom {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 10px;
  padding: 10px 13px; background: transparent;
  border: 1.5px dashed rgba(156, 0, 179, .4); border-radius: 11px;
  color: var(--gd-grape); font-family: "Outfit", sans-serif; font-weight: 600; font-size: .88rem;
  text-align: left; cursor: pointer;
  transition: background .15s var(--gd-ease), border-color .15s var(--gd-ease);
}
.vem-section__custom:hover { background: rgba(156, 0, 179, .07); border-color: var(--gd-grape); }
.vem-section__custom-plus { font-size: 1.1rem; line-height: 1; font-weight: 700; }

/* Primary per-section edit action */
.vem-section__edit {
  display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; margin-top: 8px;
  padding: 12px 15px; background: var(--gd-grape); border: none; border-radius: 11px;
  color: #fff; font-family: "Outfit", sans-serif; font-weight: 700; font-size: .92rem;
  text-align: left; cursor: pointer;
  transition: filter .15s var(--gd-ease), transform .1s var(--gd-ease);
}
.vem-section__edit:hover { filter: brightness(1.07); }
.vem-section__edit:active { transform: translateY(1px); }
.vem-section__edit-go { font-size: 1.05rem; line-height: 1; }

/* Active edit status — which edit the next change joins (lives in the header, right side) */
.gdp-active__name { font-weight: 700; font-size: .95rem; color: var(--gd-grape); }
.gdp-active__meta { font-size: .82rem; font-weight: 600; color: var(--gd-plum-500); font-variant-numeric: tabular-nums; }
.gd-edit__bundlenote { font-size: .82rem; color: var(--gd-plum-500); margin: -4px 0 2px; line-height: 1.45; }

@media (max-width: 720px) {
  .vem-section__row { flex-direction: column; }
  .vem-section__preview { width: 100%; }
  .gdp-intro__status { display: none; }
}

/* ================================================================
   SKETCH SKELETON — reskinned to brand palette
   ================================================================ */
.sk-line { background: rgba(0, 53, 122, .16); border-radius: 3px; height: 7px; display: block; }
.sk-line--sm { width: 30%; } .sk-line--md { width: 55%; } .sk-line--lg { width: 75%; }
.sk-line--xl { width: 90%; } .sk-line--full { width: 100%; }

.sk-pill { background: rgba(0, 53, 122, .2); border-radius: 999px; height: 22px; width: 70px; display: inline-block; }
.sk-pill--solid { background: var(--gd-grad-sunset); }
.sk-pill--white { background: rgba(255, 255, 255, .35); }

.sk-img {
  background: rgba(0, 53, 122, .08); border-radius: 6px; border: 1.5px dashed rgba(0, 53, 122, .22);
  display: flex; align-items: center; justify-content: center; color: rgba(0, 53, 122, .25);
  font-size: .65rem; font-weight: 700; letter-spacing: .08em;
}

/* NAV */
.sk-nav { background: var(--gd-ink); padding: 10px 14px; display: flex; align-items: center; gap: 10px; height: 46px; }
.sk-nav__logo { display: flex; align-items: center; gap: 6px; }
.sk-nav__logo-mark { width: 18px; height: 18px; border-radius: 50%; background: var(--gd-amber); flex-shrink: 0; }
.sk-nav__logo-word { width: 52px; height: 7px; background: rgba(255, 255, 255, .6); border-radius: 3px; }
.sk-nav__links { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sk-nav__dot { width: 28px; height: 6px; background: rgba(255, 255, 255, .3); border-radius: 3px; }
.sk-nav__btn { background: var(--gd-grad-sunset); border-radius: 999px; height: 20px; width: 60px; }

/* HERO */
.sk-hero { background: var(--gd-grad-dawn); padding: 20px 18px; min-height: 150px; display: flex; gap: 16px; align-items: center; }
.sk-hero__content { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-hero__eyebrow { width: 40%; height: 5px; background: rgba(255, 255, 255, .55); border-radius: 3px; }
.sk-hero__h1 { width: 85%; height: 18px; background: rgba(255, 255, 255, .85); border-radius: 4px; }
.sk-hero__h1b { width: 60%; height: 18px; background: rgba(255, 255, 255, .85); border-radius: 4px; }
.sk-hero__sub { width: 92%; height: 6px; background: rgba(255, 255, 255, .4); border-radius: 3px; }
.sk-hero__sub2 { width: 75%; height: 6px; background: rgba(255, 255, 255, .4); border-radius: 3px; }
.sk-hero__btns { display: flex; gap: 8px; margin-top: 6px; }
.sk-hero__img { width: 90px; height: 100px; flex-shrink: 0; background: rgba(255, 255, 255, .14); border-radius: 10px; border: 1.5px dashed rgba(255, 255, 255, .35); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); font-size: .55rem; font-weight: 700; letter-spacing: .1em; }

/* STRIP */
.sk-strip { background: var(--gd-cream); border-top: 2px solid rgba(0, 53, 122, .08); border-bottom: 2px solid rgba(0, 53, 122, .08); padding: 10px 14px; display: flex; align-items: center; height: 48px; }
.sk-strip__item { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.sk-strip__item + .sk-strip__item { border-left: 1px solid rgba(0, 53, 122, .12); }
.sk-strip__icon { width: 14px; height: 14px; border-radius: 50%; background: var(--gd-teal); flex-shrink: 0; }
.sk-strip__text { flex: 1; height: 6px; background: rgba(0, 53, 122, .15); border-radius: 3px; }

/* FOOTER */
.sk-footer { background: var(--gd-ink); padding: 14px 16px 10px; }
.sk-footer__top { display: flex; gap: 16px; margin-bottom: 10px; }
.sk-footer__brand { flex: 1.2; }
.sk-footer__logo { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.sk-footer__col { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sk-footer__col-head { height: 6px; width: 45%; background: rgba(255, 255, 255, .55); border-radius: 3px; margin-bottom: 3px; }
.sk-footer__col-line { height: 5px; background: rgba(255, 255, 255, .22); border-radius: 3px; }
.sk-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 8px; height: 6px; background: rgba(255, 255, 255, .15); border-radius: 3px; width: 55%; }

/* MENU-HEADER */
.sk-menu-header { background: var(--gd-grad-dawn); padding: 18px; min-height: 80px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sk-menu-header__eyebrow { width: 25%; height: 5px; background: rgba(255, 255, 255, .55); border-radius: 3px; }
.sk-menu-header__title { width: 50%; height: 16px; background: rgba(255, 255, 255, .85); border-radius: 4px; }
.sk-menu-header__sub { width: 65%; height: 6px; background: rgba(255, 255, 255, .4); border-radius: 3px; }

/* MENU-ITEM */
.sk-menu-item { background: #fff; padding: 10px 12px; display: flex; gap: 10px; align-items: center; min-height: 72px; }
.sk-menu-item__img { width: 52px; height: 52px; flex-shrink: 0; background: rgba(0, 53, 122, .07); border-radius: 8px; border: 1.5px dashed rgba(0, 53, 122, .2); display: flex; align-items: center; justify-content: center; color: rgba(0, 53, 122, .25); font-size: .5rem; font-weight: 700; letter-spacing: .08em; }
.sk-menu-item__info { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sk-menu-item__name { width: 55%; height: 9px; background: rgba(0, 53, 122, .5); border-radius: 3px; }
.sk-menu-item__desc { width: 90%; height: 5px; background: rgba(0, 53, 122, .18); border-radius: 3px; }
.sk-menu-item__desc2 { width: 70%; height: 5px; background: rgba(0, 53, 122, .18); border-radius: 3px; }
.sk-menu-item__price { width: 30%; height: 8px; background: var(--gd-flame); border-radius: 3px; margin-top: 2px; }

/* ============================================================
   Accessibility / readability inside the editor (senior-friendly)
   ============================================================ */
.vem-section__cap { font-size: .92rem; }
.vem-opts__head, .vem-suggest__summary { font-size: .92rem; }
.vem-chip__q { font-size: 1.02rem; }
.vem-chip__cur { font-size: .85rem; }
.gd-edit__sublabel, .gd-edit__opt, .gd-edit__counter { font-size: .92rem; }
.gd-edit__q { font-size: 1.18rem; }
.gd-edit__current-body { font-size: 1rem; }
.gdp-page__btn, .gdp-page__opt { font-size: .95rem; }
.vem-section__custom, .vem-section__edit { font-size: .96rem; padding: 13px 15px; }
.gdp-side__row-loc { font-size: .88rem; }
.gdp-side__row-what { font-size: .82rem; }
.gdp-intro__sub { font-size: 1rem; }

/* SCHEDULE */
.sk-schedule { background: #fff; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 90px; }
.sk-schedule__row { display: flex; align-items: center; gap: 10px; }
.sk-schedule__day { width: 26px; height: 7px; background: rgba(0, 53, 122, .5); border-radius: 3px; flex-shrink: 0; }
.sk-schedule__loc { flex: 1; height: 6px; background: rgba(0, 53, 122, .18); border-radius: 3px; }
.sk-schedule__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gd-teal); flex-shrink: 0; }

/* BOOKING */
.sk-booking { background: var(--gd-cream); padding: 14px; min-height: 90px; display: flex; flex-direction: column; gap: 7px; }
.sk-booking__title { width: 45%; height: 10px; background: rgba(0, 53, 122, .55); border-radius: 3px; }
.sk-booking__row { display: flex; align-items: center; gap: 8px; }
.sk-booking__bullet { width: 5px; height: 5px; border-radius: 50%; background: var(--gd-flame); flex-shrink: 0; }
.sk-booking__line { flex: 1; height: 5px; background: rgba(0, 53, 122, .15); border-radius: 3px; }
.sk-booking__btn { margin-top: 4px; width: 90px; height: 22px; background: var(--gd-grad-sunset); border-radius: 999px; }

/* TEXT */
.sk-text { background: #fff; padding: 16px; display: flex; gap: 14px; min-height: 100px; }
.sk-text__content { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sk-text__img { width: 70px; height: 70px; flex-shrink: 0; background: rgba(0, 53, 122, .07); border-radius: 8px; border: 1.5px dashed rgba(0, 53, 122, .2); align-self: center; display: flex; align-items: center; justify-content: center; color: rgba(0, 53, 122, .25); font-size: .5rem; font-weight: 700; letter-spacing: .08em; }

@media (max-width: 880px) {
  .gdp-sidebar { width: 240px; }
}

@media (max-width: 640px) {
  /* Stack: editor on top, slim cart bar pinned below */
  .gdp-dialog { flex-direction: column; }
  .gdp-main { order: 1; }
  .gdp-sidebar {
    order: 2; width: 100%; flex-direction: row; align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .gdp-side__brand, .gdp-side__head, .gdp-side__list { display: none; }
  .gdp-side__cart {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; border-top: none; padding: 12px 18px;
  }
  .gdp-side__cart-head, .gdp-side__cart-items, .gdp-side__cart-empty { display: none; }
  .gdp-side__cart-total { margin-top: 0; padding-top: 0; border-top: none; gap: 10px; }
  .gdp-side__cart-total-val { font-size: 1.2rem; }

  .gdp-hd { flex-wrap: wrap; gap: 8px; }
  .gdp-hd__hint { display: none; }
}

/* "Finish & submit edit" CTA in the editor sidebar */
.gdp-side__finish {
  margin-top: 14px; width: 100%;
  padding: 14px 16px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--gd-amber); color: #fff;
  font-family: "Outfit", sans-serif; font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 18px rgba(176, 106, 230, .35);
  transition: filter .15s var(--gd-ease), transform .1s var(--gd-ease);
}
.gdp-side__finish:hover { filter: brightness(1.06); }
.gdp-side__finish:active { transform: translateY(1px); }
.gdp-side__finish:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- Works intake: pieces grid + per-piece form (Available Now / Past work) ---- */
.gd-works__hint { margin: 4px 0 10px; font-size: .82rem; color: var(--gd-ink-soft, #5d7499); line-height: 1.5; }
.gd-works {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding-bottom: 8px;
}
.gd-work {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: #fff; border: 1px solid var(--gd-mist); border-radius: 12px;
  overflow: hidden; cursor: pointer; padding: 0;
  transition: border-color .15s var(--gd-ease), transform .12s var(--gd-ease), box-shadow .15s var(--gd-ease);
}
.gd-work:hover, .gd-work:focus-visible { border-color: var(--gd-teal); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(13, 34, 51, .08); outline: none; }
.gd-work__thumb { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--gd-mist); }
.gd-work__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd-work__meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.gd-work__title { font-weight: 700; font-size: .86rem; color: var(--gd-ink); line-height: 1.25; }
.gd-work__sub { font-size: .76rem; color: var(--gd-ink-soft, #5d7499); }
.gd-work__x {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(13, 34, 51, .55); color: #fff; font-size: .72rem; line-height: 1;
  opacity: 0; transition: opacity .15s var(--gd-ease), background .15s var(--gd-ease);
}
.gd-work:hover .gd-work__x, .gd-work__x:focus-visible { opacity: 1; }
.gd-work__x:hover { background: #b23b3b; }
.gd-work--add {
  align-items: center; justify-content: center; gap: 6px; min-height: 150px;
  border: 2px dashed var(--gd-teal); background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.72)),
    var(--gd-mist);
}
.gd-work--add:hover { background: #fff; }
.gd-work__plus {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gd-teal); color: #fff;
  font-size: 1.5rem; font-weight: 600; line-height: 1;
}
.gd-work__add-lbl { font-weight: 700; font-size: .84rem; color: var(--gd-teal); }

.gd-workform {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  background: rgba(13, 34, 51, .45); animation: gd-fade-in .16s var(--gd-ease);
  padding: 18px;
}
.gd-workform__panel {
  width: min(460px, 100%); max-height: 90vh; overflow: auto;
  background: var(--gd-page); border-radius: 16px; padding: 18px 20px 20px;
  box-shadow: 0 18px 50px rgba(13, 34, 51, .35);
  display: flex; flex-direction: column; gap: 8px;
}
.gd-workform__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gd-workform__title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.gd-workform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-workform__msg { margin: 2px 0 4px; font-size: .9rem; line-height: 1.55; }
.gd-workform__note { margin: 4px 0 2px; font-size: .78rem; color: var(--gd-ink-soft, #5d7499); line-height: 1.5; }
.gd-workform__actions { display: flex; justify-content: flex-end; gap: 8px; }