/* Theme 3.0: the frame's own styles (loaded last on new-design pages). Everything else is the approved
   preview's CSS, unchanged, in its load order (d12 → site → components → type → rhythm → type → a11y → brand).
   sbt- = theme 3.0 additions: WordPress glue, the fallback header, the Build a blind frame, fallbacks. */

/* WordPress wraps the template in .wp-site-blocks and spaces its children: the preview has none of that. */
.sbt-v3 .wp-site-blocks { padding: 0; }
.sbt-v3 .wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.sbt-v3 main#main { display: block; }

/* A link to a page that is not published yet: plain text for visitors, a dotted line for editors. */
.sbt-nolink { color: inherit; text-decoration: none; cursor: default; }
.sbt-nolink--editor { outline: 1px dotted #B25E00; outline-offset: 2px; }

/* A photo the Media Library does not have yet: a quiet box of the photo's shape. */
img.sbt-ph { background: #EEF0F3; }

/* ---------- the fallback header (Sundial Menu off) ---------- */
.sbt-fh { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid #E5E5EA; }
.sbt-fh__top { background: #F5F5F7; font-size: 13px; line-height: 1.4; }
.sbt-fh__topin { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.sbt-fh__line { margin: 0; color: #424245; }
.sbt-fh__tel { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: #1D1D1F; text-decoration: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.sbt-fh__tel .i, .sbt-fh__call .i, .sbt-fh__toggle .i { width: 16px; height: 16px; }
.sbt-fh__tel:hover { color: #0055AA; text-decoration: underline; }
.sbt-fh__bar { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.sbt-fh__brand { display: inline-flex; flex: none; border-radius: 6px; }
.sbt-fh__brand img { display: block; width: 161px; height: 48px; }
.sbt-fh__nav { min-width: 0; }
.sbt-fh__list { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sbt-fh__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: #1D1D1F; font-weight: 500; font-size: 15px; text-decoration: none; }
.sbt-fh__list a:hover { background: #F5F5F7; color: #0055AA; }
.sbt-fh__list a[aria-current] { color: #0066CC; box-shadow: inset 0 -2px 0 #0066CC; border-radius: 0; }
.sbt-fh__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.sbt-fh__call { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #D2D2D7; color: #0066CC; }
.sbt-fh__call:hover { border-color: #0066CC; }
.sbt-fh__toggle { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid #D2D2D7; border-radius: 10px; background: #fff; color: #1D1D1F; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.sbt-fh__toggle[aria-expanded="true"] { border-color: #0066CC; color: #0066CC; }
.sbt-fh a:focus-visible, .sbt-fh button:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; }
@media (max-width: 1279px) {
  .sbt-fh__brand img { width: 147px; height: 44px; }
  .sbt-fh__list a { padding: 0 8px; font-size: 14px; }
}
@media (max-width: 1100px) {
  .sbt-fh__bar { flex-wrap: wrap; min-height: 64px; gap: 8px 12px; padding-top: 10px; padding-bottom: 10px; }
  .sbt-fh__brand img { width: 134px; height: 40px; }
  .sbt-fh__toggle { display: inline-flex; order: 3; }
  .sbt-fh__tools { order: 2; }
  .sbt-fh__nav { order: 4; flex-basis: 100%; display: none; }
  .sbt-fh__nav.is-open { display: block; }
  .sbt-fh__list { flex-direction: column; flex-wrap: nowrap; padding: 4px 0 8px; }
  .sbt-fh__list a { display: flex; font-size: 16px; }
  .sbt-fh__list a[aria-current] { box-shadow: inset 3px 0 0 #0066CC; }
}
@media (max-width: 640px) {
  .sbt-fh__book { display: none; }   /* the phone Call / Book bar has the main button */
  .sbt-fh__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 359px) {
  .sbt-fh__brand img { width: 114px; height: 34px; }
  .sbt-fh__toggle { padding: 0 10px; }
}

/* ---------- Build a blind: the real Blind Builder inside the page frame ----------
   Theme 3.1 (owner note 4): no strip under the menu; the Builder starts right under the header with a compact top
   (16px, 12px on phones), so the Blind Builder's own compact client sign-in sits at the top of the page. */
.sbt-bb.sec { padding-top: 16px; }
.sbt-bb .wrap { display: flex; flex-direction: column; gap: 20px; }
.sbt-bb__app { min-width: 0; }
.sbt-bb__app .bb3, .sbt-bb__app .pb3 { margin-left: 0; margin-right: 0; max-width: none; width: auto; padding-top: 0; }   /* 3.1: the frame gives the top space */
.sbt-bb__side .callbox { max-width: 520px; }
@media (min-width: 1025px) {
  .sbt-bb__side { display: flex; justify-content: flex-end; }
}
@media (max-width: 720px) {
  .sbt-bb.sec { padding-top: 12px; }
}

/* A card used by the fallbacks (Samples off, Builder off, Forms off, sign-in). */
.sbt-card { max-width: 720px; padding: 24px; border: 1px solid #E5E5EA; border-radius: 16px; background: #fff; }
.sbt-card .h3 { margin: 0 0 8px; }
.sbt-card p { margin: 0 0 12px; }
.sbt-bb__off .tel-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sbt-book-off { display: flex; flex-direction: column; gap: 10px; }
.sbt-book-off p { margin: 0; }
.sbt-book-off .callbox__big { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 600; }
.sbt-book-off__em a { font-weight: 600; }
/* ---------- The real Blind Builder inside the new pages (Build a blind, Sign in): the approved look ----------
   One font (Geist), the brand colours (Sundial blue #0066CC for buttons, links and selected states, Ink #1D1D1F text)
   and a white page, by the Builder's own colour and font settings. Only on new-design pages: the old pages and the
   Builder's own page keep its look. Contrast (AA): white on #0066CC 5.57:1, #0066CC on white 5.57 and on #F5F5F7 5.11,
   grey #6E6E73 on white 5.08 and on #F5F5F7 4.66; field borders #86868B 3.6:1 (non-text 3:1). */
.sbt-v3 .bb3, .sbt-v3 .pb3 {
  --bb-ink: #1D1D1F;
  --bb-clay: #0066CC;
  --bb-clay-dark: #0055AA;
  --bb-brass: #0066CC;
  --bb-cream: #FFFFFF;
  --bb-linen: #F5F5F7;
  --bb-stone: #D2D2D7;
  --bb-mute: #6E6E73;
  --bb-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bb-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #FFFFFF;
}
.sbt-v3 .bb3 h2, .sbt-v3 .bb3 h3, .sbt-v3 .bb3 h4, .sbt-v3 .bb3 h5, .sbt-v3 .pb3 h2, .sbt-v3 .pb3 h3, .sbt-v3 .pb3 h4, .sbt-v3 .pb3 h5 { font-weight: 600; letter-spacing: -0.02em; }
.sbt-v3 .bb3 .bb3-btn, .sbt-v3 .pb3 .pb3-btn { border-radius: 12px; }
.sbt-v3 .bb3 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .sbt-v3 .bb3 select, .sbt-v3 .bb3 textarea, .sbt-v3 .pb3 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .sbt-v3 .pb3 select, .sbt-v3 .pb3 textarea { border-color: #86868B; }
.sbt-v3 .bb3 .bb3-row.is-on, .sbt-v3 .bb3 .bb3-card.is-on, .sbt-v3 .bb3 .bb3-swatch.is-on .bb3-swatch-main, .sbt-v3 .bb3 .bb3-lrow.is-on, .sbt-v3 .bb3 .bb3-cmode-btn.is-on, .sbt-v3 .pb3 .pb3-row.is-on, .sbt-v3 .pb3 .pb3-card.is-on, .sbt-v3 .pb3 .pb3-swatch.is-on .pb3-swatch-main, .sbt-v3 .pb3 .pb3-lrow.is-on, .sbt-v3 .pb3 .pb3-cmode-btn.is-on { box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.18); }
.sbt-v3 .bb3 .bb3-card.is-asking, .sbt-v3 .pb3 .pb3-card.is-asking { box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18); }
.sbt-v3 .bb3 .bb3-group-pick.is-on, .sbt-v3 .bb3 .bb3-chip.is-on, .sbt-v3 .bb3 .bb3-cmode-btn.is-on, .sbt-v3 .bb3 .bb3-crail.is-on, .sbt-v3 .pb3 .pb3-group-pick.is-on, .sbt-v3 .pb3 .pb3-chip.is-on, .sbt-v3 .pb3 .pb3-cmode-btn.is-on, .sbt-v3 .pb3 .pb3-crail.is-on { background: #EEF4FB; }
.sbt-v3 .bb3 .bb3-group-ask, .sbt-v3 .bb3 .bb3-fpick-opt.is-on, .sbt-v3 .pb3 .pb3-group-ask, .sbt-v3 .pb3 .pb3-fpick-opt.is-on { background: #EEF4FB; }
.sbt-v3 .bb3 .bb3-fpick-q:focus, .sbt-v3 .bb3 .bb3-fpick-opt:hover, .sbt-v3 .bb3 .bb3-fpick-opt:focus, .sbt-v3 .pb3 .pb3-fpick-q:focus, .sbt-v3 .pb3 .pb3-fpick-opt:hover, .sbt-v3 .pb3 .pb3-fpick-opt:focus { background: #F5F8FC; }
.sbt-v3 .bb3 .bb3-spec-tags em.is-level, .sbt-v3 .pb3 .pb3-spec-tags em.is-level { background: #F5F5F7; }
.sbt-v3 .bb3 .bb3-bar, .sbt-v3 .pb3 .pb3-bar { background: rgba(255, 255, 255, 0.96); }
.sbt-v3 .bb3 .bb3-fpick-pop, .sbt-v3 .pb3 .pb3-fpick-pop { box-shadow: 0 14px 36px rgba(29, 29, 31, 0.16); }
.sbt-v3 .bb3 .bb3-card.is-asking .bb3-group-ask, .sbt-v3 .pb3 .pb3-card.is-asking .pb3-group-ask { animation-name: sbt-bb-ask; }
@keyframes sbt-bb-ask { 50% { box-shadow: 0 0 0 6px rgba(0, 102, 204, 0.2); } }

/* Sign in: the Builder's client sign-in, open, in the approved card (heading, fields, blue button, the note under it). */
.sbt-signin__card.bb3 { padding: 24px; background: #FFFFFF; }
.sbt-signin__card .bb3-client { margin: 0; }
.sbt-signin__card .bb3-client-box { background: transparent; border: 0; border-radius: 0; }
.sbt-signin__card .bb3-client-box > summary { padding: 0 0 16px; cursor: default; }
.sbt-signin__card .bb3-client-box > summary::after { display: none; }
.sbt-signin__card .bb3-client-lead { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.sbt-signin__card .bb3-client-inner { padding: 0; gap: 16px; }
.sbt-signin__card .bb3-client-form .bb3-btn { width: 100%; min-height: 52px; }
.sbt-signin__card .sb-form__note { margin: 0; padding: 0; }
/* 3.1.2: a client who is already signed in gets "You're signed in" and the way on (Sign out is a small form). */
.sbt-signedin .sb-form__card p { margin: 0; }
.sbt-signedin .actions { margin-top: 4px; }
.sbt-signedin__out { display: inline-flex; margin: 0; }

/* The editor's note under a part that needs a look (editors only). */
.sbt-editor-note { margin: 8px 0; padding: 12px 16px; border: 1px dashed #B25E00; border-radius: 8px; background: #FFF8EC; color: #6B3900; font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.sbt-editor-note ul { margin: 6px 0 0 18px; }

/* ---------- Book: the real Sundial Forms form, in the approved Book design (d12 .form-grid / .field / .input) ---------- */
.sbt-v3 .consult-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; align-items: start; }
.sbt-v3 .consult-form > .form-row { display: contents; }
.sbt-v3 .consult-form > .form-field,
.sbt-v3 .consult-form .form-note:last-of-type,
.sbt-v3 .consult-form .consult-submit,
.sbt-v3 .consult-form .consult-form-error { grid-column: 1 / -1; }
.sbt-v3 .consult-form .form-row > .form-field { grid-column: auto; }
.sbt-v3 .consult-form > .form-field:has(#sf-help),
.sbt-v3 .consult-form > .form-field:has(#sf-products) { grid-column: auto; }
.sbt-v3 .consult-form .form-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.sbt-v3 .consult-form .form-field > label { font-size: 15px; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.sbt-v3 .consult-form .form-field > label .optional { font-weight: 400; color: var(--ink-3); font-size: 14px; }
.sbt-v3 .consult-form input[type="text"], .sbt-v3 .consult-form input[type="email"], .sbt-v3 .consult-form input[type="tel"],
.sbt-v3 .consult-form select, .sbt-v3 .consult-form textarea {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--field-line); background: var(--white);
  font: inherit; font-size: 16.5px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.sbt-v3 .consult-form textarea { min-height: 120px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.sbt-v3 .consult-form select { appearance: none; -webkit-appearance: none; background: var(--white) var(--ico-chev) right 14px center / 18px no-repeat; padding-right: 44px; }
.sbt-v3 .consult-form input:focus, .sbt-v3 .consult-form select:focus, .sbt-v3 .consult-form textarea:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 4px rgba(var(--iris-rgb), .16); }
.sbt-v3 .consult-form .form-file { padding: 16px; border-radius: 14px; border: 1.5px dashed var(--field-line); background: var(--tint-2); }
.sbt-v3 .consult-form .form-file:focus-within { border-color: var(--iris); box-shadow: 0 0 0 4px rgba(var(--iris-rgb), .16); }
.sbt-v3 .consult-form .form-file input[type="file"] { font: inherit; font-size: 15px; min-height: 44px; }
.sbt-v3 .consult-form .form-note { display: block; margin: 0; font-size: 14px; color: var(--ink-3); }
.sbt-v3 .consult-form .consult-submit {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; margin-top: 8px;
  border: 1px solid transparent; border-radius: 12px; background: var(--iris); color: var(--on-accent); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; width: auto;
}
.sbt-v3 .consult-form .consult-submit:hover { background: var(--iris-h); }
.sbt-v3 .consult-form .consult-submit:focus-visible { outline: 2px solid var(--iris); outline-offset: 3px; }
@media (max-width: 720px) {
  .sbt-v3 .consult-form { grid-template-columns: 1fr; gap: 18px; }
  .sbt-v3 .consult-form > .form-field:has(#sf-help), .sbt-v3 .consult-form > .form-field:has(#sf-products) { grid-column: 1 / -1; }
  .sbt-v3 .consult-form .consult-submit { width: 100%; }
}