.builder-top { background: var(--ice); padding: 22px 0; border-bottom: 1px solid #DCE9E4; }
.builder-top-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Sites catalog page only (.sites-hero-band, alongside the shared
   .builder-top every other builder's top bar still uses unchanged) — the
   plain grey banner read as generic next to how much is actually in this
   catalog; this is meant to actually sell "try one, it's real and it's
   free to try." */
.sites-hero-band {
  position: relative; overflow: hidden; padding: 56px 0 46px; border-bottom: none;
  background: linear-gradient(135deg, #0B4A45 0%, #0E8C8C 55%, #12A5A0 100%);
}
.sites-hero-band .builder-top-row { position: relative; z-index: 1; }
.sites-hero-blob {
  position: absolute; inset-block-start: -30%; inset-inline-end: -10%; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
  pointer-events: none;
}
.sites-hero-eyebrow {
  display: inline-block; background: rgba(255,255,255,.16); color: #fff;
  font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 20px; margin-bottom: 14px;
}
.sites-hero-h1 { font-size: 38px; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; line-height: 1.15; }
.sites-hero-sub { font-size: 15px; color: rgba(255,255,255,.88); margin: 0; max-width: 620px; line-height: 1.7; }
.sites-hero-sub a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .sites-hero-band { padding: 40px 0 32px; }
  .sites-hero-h1 { font-size: 27px; }
}

/* Same save control in the same spot (the builder-top row) across all
   three builders — CV, sites, quotes — so "שמירה" is never somewhere
   different depending on what you're editing. Separate from any
   publish/finalize/download action, which stays where it already was. */
.builder-save-ctrl { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.builder-save-status { font-size: 12.5px; color: var(--grey); white-space: nowrap; min-width: 0; }
.builder-save-status.ok { color: var(--teal); font-weight: 700; }
.builder-save-btn:disabled { opacity: .6; cursor: default; }

.builder-wrap {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 32px;
  padding: 32px 24px 60px;
  align-items: start;
}

/* ---------- Builder v2 (sites.html): big canvas + persistent sidebar ---------- */
/* One always-visible panel — page structure on top, full settings below —
   instead of a button-triggered drawer, so editing is never hidden behind
   an extra click. It's the FIRST grid column, which in this RTL page means
   the physical right edge (grid tracks follow direction, so column 1 sits
   on the right) — right next to the global "האתרים שלי" rail (its own
   fixed strip further right still, see .my-sites-rail in style.css). The
   canvas stays the dominant element in the remaining (second, wider)
   column. */
/* .container's own 1120px max-width (meant for reading-width text pages)
   left large, unused margins on both sides of the canvas on any wider
   screen — confirmed live at 1920px, where over 400px of blank space sat
   on each side. The canvas is the whole point of this screen, so let it
   actually use the width it has; the sidebar itself stays capped either way. */
.builder-wrap-v2 { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 24px; padding: 24px 24px 60px; align-items: start; max-width: 1800px; }
@media (max-width: 980px) {
  .builder-wrap-v2 { grid-template-columns: 1fr; }
  /* Stacked on mobile: the canvas first (what the site actually looks
     like), the sidebar's structure + full settings form below it —
     reordered visually only, DOM order stays as-is for the grid above. */
  .builder-preview { order: 1; }
  .builder-sidebar { order: 2; }
}

/* Sticky WITHIN the sidebar's own internal scroll (.builder-form has
   overflow-y:auto), not just relative to the page — confirmed live: with
   only page-level stickiness, scrolling the sidebar's own long settings
   form carried the Save button straight out of view along with it. The
   negative side-margins + matching padding bleed it to the card's full
   width so scrolled content can't show through at the edges either. */
.builder-sidebar-head {
  display: grid; gap: 10px; padding: 22px 22px 14px; margin: -22px -22px 10px;
  border-bottom: 1px solid #EAEDEC; background: var(--white);
  position: sticky; top: -22px; z-index: 2;
}
.builder-sidebar-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.builder-topbar-v2-tpl { font-size: 14px; font-weight: 700; color: var(--teal-dark); }
.builder-sidebar .builder-save-ctrl { justify-content: flex-start; }
.builder-ai-review-btn { width: 100%; font-size: 13.5px; padding-block: 9px; }

/* ---------- Hierarchy block — folded into the sidebar's own top section,
   not a separate floating panel, so there's only ever one card here. ---------- */
.builder-hier-block { padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid #EAEDEC; }
.builder-hier-block .preview-tabs { margin-bottom: 10px; }
/* Real cards, not a bare bullet list — each row reads as its own block
   you can click, matching the "block list" clarity SITE123 gets from
   bordered rows with their own icon chip, adapted to DeskKit's own
   rounded/teal language instead of copying its visual style. */
.hier-tree { display: flex; flex-direction: column; gap: 6px; }
.hier-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--dark); cursor: pointer;
  background: var(--white); border: 1px solid #EAEDEC; transition: border-color .12s ease, box-shadow .12s ease;
}
.hier-row:hover { border-color: var(--teal-light, #B7DED6); box-shadow: 0 2px 8px rgba(13, 92, 78, .08); }
.hier-row .hier-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; background: var(--ice); color: var(--teal-dark);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
}
.hier-row .hier-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hier-row .hier-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s ease; flex-shrink: 0; }
.hier-row:hover .hier-actions { opacity: 1; }
.hier-row .hier-btn {
  background: none; border: none; cursor: pointer; color: var(--grey); font-size: 12px;
  width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.hier-row .hier-btn:hover { background: var(--ice); color: var(--teal-dark); }
.hier-row .hier-btn:disabled { opacity: .3; cursor: default; }
.hier-row .hier-btn:disabled:hover { background: none; color: var(--grey); }
.hier-children {
  display: flex; flex-direction: column; gap: 5px; margin: 2px 0 2px;
  padding: 6px 6px 6px 0; padding-inline-start: 20px; border-inline-start: 2px solid #EEF1EF;
}
.hier-children.collapsed { display: none; }
.hier-children .hier-row { padding: 7px 9px; font-size: 12.5px; font-weight: 500; background: var(--grey-light); border-color: transparent; }
.hier-children .hier-row:hover { border-color: var(--teal-light, #B7DED6); background: var(--white); }
.hier-children .hier-row .hier-icon { width: 18px; height: 18px; background: var(--white); }
.hier-group-toggle { transition: transform .15s ease; display: inline-block; }
.hier-group-toggle.open { transform: rotate(90deg); }
.hier-add-block-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EEF1EF; }
.hier-add-block-btn { width: 100%; text-align: center; }

/* Compact pill row for the plain-navigation hierarchy (no reorder/add/
   remove controls) — same click-to-jump rows in far less height than the
   full-width cards (a repeated complaint even after the card redesign).
   A fixed 2-column grid instead of content-width flex-wrap: every pill is
   the same width and lines up into a clean block regardless of label
   length, rather than an organic, ragged wrap (confirmed live: the
   flex-wrap version read as messy). */
.hier-tree.hier-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hier-tree.hier-pills .hier-row { padding: 6px 12px 6px 9px; border-radius: 999px; font-size: 12.5px; justify-content: flex-start; }
.hier-tree.hier-pills .hier-row .hier-icon { width: 18px; height: 18px; font-size: 10px; }
.hier-tree.hier-pills .hier-row .hier-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.builder-form {
  background: var(--white);
  border: 1px solid #EAEDEC;
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  gap: 4px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: 90px;
  min-width: 0;
}
.builder-form .field { display: grid; gap: 5px; margin-bottom: 12px; min-width: 0; }
.builder-form label { font-size: 13px; font-weight: 700; color: var(--teal-dark); }

/* Collapsible sidebar sections — a bold, larger section title sits above
   individual field labels (which stay the smaller 13px above), so it's
   obvious at a glance which one is "שם העסק" the field vs "פרטי העסק"
   the section around it. Native <details>/<summary>, not custom JS: free
   keyboard/screen-reader support and open/close state with zero wiring. */
.builder-section { border: 1px solid #EAEDEC; border-radius: 10px; margin-bottom: 14px; overflow: hidden; min-width: 0; }
.builder-section:last-child { margin-bottom: 0; }
.builder-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 16px; font-size: 14.5px; font-weight: 800; color: var(--teal-dark);
  background: var(--ice); cursor: pointer; list-style: none; user-select: none;
}
.builder-section-head::-webkit-details-marker { display: none; }
.builder-section-head::marker { content: ""; }
.builder-section-head::after {
  content: ""; width: 8px; height: 8px; flex-shrink: 0; margin-inline-end: 2px;
  border-inline-end: 2px solid var(--teal-dark); border-block-end: 2px solid var(--teal-dark);
  transform: rotate(45deg); transition: transform .2s ease;
}
.builder-section[open] > .builder-section-head::after { transform: rotate(-135deg); }
.builder-section-optional { font-size: 12px; font-weight: 600; color: var(--grey); }
/* Scoped to [open] > : Chromium hides a closed <details>'s body through an
   internal slot mechanism an author `display` can't defeat, which is why
   this never reproduced in Chromium testing — but Safari/Firefox collapse
   it via a plain UA `display:none` rule instead, which an unconditional
   `display` here DOES override (author styles always beat a normal-priority
   UA rule, regardless of specificity). That's what put a sliver of every
   closed section's content on screen, overlapping the section below it, in
   the user's own (non-Chromium) browser. */
.builder-section[open] > .builder-section-body { padding: 16px; display: grid; gap: 0; }
.builder-section-body .field:last-child { margin-bottom: 0; }
.builder-section-hint { font-size: 12px; color: var(--grey); margin: 0 0 10px; line-height: 1.6; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-improve-btn { flex-shrink: 0; white-space: nowrap; }
.ai-improve-btn:disabled { opacity: .55; cursor: default; }
.ai-limit-note { background: var(--ice); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--dark); line-height: 1.7; margin-top: 6px; }
.ai-limit-note a { color: var(--teal-dark); font-weight: 700; }
.builder-form input[type="text"], .builder-form textarea, .builder-form select {
  padding: 9px 11px; border-radius: 7px; border: 1px solid #DADFDD; font-family: inherit; font-size: 13.5px;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.builder-form textarea { resize: vertical; }
.sep { border: none; border-top: 1px solid #EDEFEE; margin: 8px 0 14px; }

.color-row { display: flex; align-items: center; gap: 12px; }
.color-row input[type="color"] { width: 44px; height: 34px; border: none; border-radius: 6px; padding: 0; cursor: pointer; background: none; flex: none; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px #DADFDD; flex: none; }

/* ---------- Per-text style controls (font/color/size/align), mounted
   next to the field that already edits that text's content ---------- */
.ts-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 18px; margin-inline-start: 6px; vertical-align: middle;
  background: var(--ice); color: var(--teal-dark); border: none; border-radius: 5px;
  font-size: 10px; font-weight: 800; font-style: italic; cursor: pointer; font-family: Georgia, serif;
  opacity: .8;
}
.ts-toggle:hover { background: #CFEAE3; opacity: 1; }
/* Deliberately quiet relative to the field label above it — smaller
   text, a muted background, and a side accent bar (not a full box) so
   it reads as "attached settings for that field" rather than a peer
   block competing with the next field's own label. The extra bottom
   margin is what actually fixed the cramped feel: 12px wasn't enough
   room between this row's own content and the next bold label. */
.ts-row {
  display: grid; gap: 7px; background: var(--grey-light); border-inline-start: 2px solid #DADFDD;
  border-radius: 0 8px 8px 0; padding: 9px 10px; margin: 4px 0 18px;
}
.ts-row-grid { display: grid; grid-template-columns: minmax(0, 1fr) 34px 60px; gap: 6px; }
.ts-row-grid select, .ts-row-grid input[type="number"] { font-size: 11.5px !important; padding: 5px 7px !important; color: var(--grey); }
.ts-row-grid input[type="color"] { width: 100%; height: 28px; border: none; border-radius: 6px; padding: 0; cursor: pointer; background: none; }
.ts-align { display: flex; gap: 4px; }
.ts-align button {
  flex: 1; padding: 4px 0; border-radius: 6px; border: 1px solid #DADFDD; background: var(--white);
  color: var(--grey); font-size: 11px; font-family: inherit; cursor: pointer;
}
.ts-align button.ts-active { background: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); }
.ts-clear { background: none; border: none; color: #B23; font-size: 11px; cursor: pointer; font-family: inherit; padding: 0; text-align: right; justify-self: start; opacity: .85; }
.ts-clear:hover { opacity: 1; text-decoration: underline; }

.photo-row { display: flex; align-items: center; gap: 14px; }
.photo-preview {
  width: 52px; height: 52px; border-radius: 50%; background: var(--ice); flex: none;
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 22px;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.photo-upload-btn { display: inline-block; }
.photo-remove { background: none; border: none; color: #B23; font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; }

.jobs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jobs-head label { font-size: 13px; font-weight: 700; color: var(--teal-dark); }
.btn-mini { background: var(--ice); color: var(--teal-dark); border: none; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.job-block { border: 1px solid #EDEFEE; border-radius: 8px; padding: 12px; margin-bottom: 12px; display: grid; gap: 8px; min-width: 0; }
.job-block-head { display: flex; justify-content: space-between; align-items: center; }
.job-remove { background: none; border: none; color: #B23; font-size: 12px; cursor: pointer; font-family: inherit; }
.job-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.job-grid input { min-width: 0; }

.builder-preview { min-width: 0; }
.preview-sticky { position: sticky; top: 90px; }
/* Was a tiny .btn-mini pill under the canvas — confirmed live it read
   as almost invisible next to everything else on the page. A real
   .btn keeps it consistent with every other button here (not a new
   style of its own) while actually being noticeable; centered under
   the canvas is the one spot on this whole screen naturally free for
   a standalone secondary action. */
.full-preview-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 16px auto 0; padding: 11px 26px; font-size: 14px;
}
#preview-doc { margin-bottom: 20px; overflow: hidden; }
#preview-doc .cv-doc { transition: transform .15s ease; }
#quote-preview { overflow: hidden; }
#quote-preview .quote-doc { transition: transform .15s ease; }

.export-panel { background: var(--ice); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.export-panel .btn { width: 100%; text-align: center; box-sizing: border-box; }
.export-panel .btn-outline-dark { background: var(--white); box-shadow: 0 2px 8px rgba(22,63,53,.1); }

.lang-switch-big { display: flex; gap: 12px; flex: none; }
.lang-big {
  display: flex; align-items: center; gap: 10px;
  background: var(--white); border: 2px solid #DDE4E1; color: var(--dark);
  padding: 12px 26px; border-radius: 40px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.lang-big .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #C7CFCB; position: relative; flex: none; transition: border-color .15s ease; }
.lang-big.active { border-color: var(--teal); background: var(--ice); color: var(--teal-dark); box-shadow: 0 6px 16px rgba(13,13,20,.14); }
.lang-big.active .dot { border-color: var(--teal); }
.lang-big.active .dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--teal); }

@media (max-width: 980px) {
  .builder-wrap { grid-template-columns: 1fr; }
  .builder-form { position: static; max-height: none; }
  .preview-sticky { position: static; }
}

@media (max-width: 640px) {
  .builder-top-row { flex-direction: column; align-items: flex-start; }
  .lang-switch-big { width: 100%; }
  .lang-big { flex: 1; justify-content: center; }
}

.cv-pdf-credit { display: none; }

@media print {
  .no-print { display: none !important; }
  body, .builder-wrap, .container, .builder-preview, .preview-sticky { all: unset; display: block; }
  #preview-doc, #quote-preview { height: auto !important; overflow: visible !important; }
  #preview-doc .cv-doc { box-shadow: none; margin: 0; width: 100% !important; transform: none !important; }
  /* fitQuotePreviewToContainer() (js/quote-render.js) sets an inline
     transform:translateX()scale() on .quote-doc to shrink the fixed
     794px-wide document into whatever the on-screen preview pane's
     width happens to be. That inline style survives into print/PDF
     unless explicitly cleared here — otherwise the printed page is a
     shrunk copy of the doc sitting inside the full A4 box, which reads
     as the content being cut off / not reaching the page's edges. */
  #quote-preview .quote-doc { box-shadow: none; margin: 0; width: 100% !important; transform: none !important; }
  @page { size: A4; margin: 0; }
  .cv-pdf-credit {
    display: block; position: fixed; bottom: 12px; inset-inline-end: 20px;
    font-family: Arial, sans-serif; font-size: 8.5pt; color: #A0A0A0;
  }
}