/* Theme 3.1: the parts added in Live run 2.1 (owner notes of 30 Sep 2026). Hand-written, loaded after sbt.css on every
   new-design page. Brand colours: Sundial blue #0066CC (hover #0055AA), Sun #F5A300, Ink #1D1D1F; one font (Geist).
   Contrast (AA): #0066CC on white 5.57:1, on #F5F5F7 5.11; grey #6E6E73 on white 5.08, on #F5F5F7 4.66. */

/* ---------- Made in Canada, with a small flag (owner note 26: the /shutters/ hero) ---------- */
.sb-flag { display: inline-block; flex: none; width: 1.5em; height: .75em; border-radius: 2px; box-shadow: 0 0 0 1px rgba(29, 29, 31, .12); vertical-align: -0.06em; }
.sb-made { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2, #424245); max-width: 34em; }
.sb-made .sb-flag { position: relative; top: .1em; }
.sb-made strong { color: var(--ink, #1D1D1F); font-weight: 600; }
@media (max-width: 720px) { .sb-made { font-size: 15px; margin-top: 10px; } }

/* ---------- Legal pages the Blind Builder links to, in the new design (owner note 3) ---------- */
.sb-legal-body.sec { padding-top: 8px; }
.sb-prose { max-width: 46em; font-size: 16.5px; line-height: 1.6; color: var(--ink, #1D1D1F); }
.sb-prose > * + * { margin-top: 14px; }
.sb-prose h2 { margin-top: 36px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.sb-prose h3 { margin-top: 28px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.sb-prose h2 + *, .sb-prose h3 + * { margin-top: 10px; }
.sb-prose ul, .sb-prose ol { padding-left: 1.3em; }
.sb-prose ul { list-style: disc; }
.sb-prose ol { list-style: decimal; }
.sb-prose li + li { margin-top: 6px; }
.sb-prose li::marker { color: var(--ink-3, #6E6E73); }
.sb-prose a { color: var(--iris-text, #0066CC); text-decoration: underline; text-underline-offset: 3px; }
.sb-prose a:hover { color: var(--iris-h, #0055AA); }
.sb-prose strong { font-weight: 600; }
.sb-prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.sb-prose th, .sb-prose td { padding: 8px 10px; border-bottom: 1px solid var(--line, #E5E5EA); text-align: left; vertical-align: top; }
@media (max-width: 720px) { .sb-prose { font-size: 16px; } .sb-prose h2 { margin-top: 28px; font-size: 20px; } }

/* ---------- Become a client (owner note 5): the closing band's design, as its pair ---------- */
.sb-join .cta__copy { max-width: 640px; }
.sb-join__price { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sb-join__price .i { width: 18px; height: 18px; margin-top: 2px; color: #0066CC; flex: none; }
.sb-join__in { margin: 0; }
.sb-join__in a { color: var(--iris-text, #0066CC); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sb-join__in a:hover { color: var(--iris-h, #0055AA); }

/* ---------- In this family (owner note 24) ---------- */
.sb-fam__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.sb-fam__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-fam__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.sb-fam__card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.sb-fam__card:not(.is-here):hover { border-color: var(--line-strong); }
.sb-fam__card:focus-within { outline: 2px solid var(--iris); outline-offset: 2px; }
.sb-fam__card.is-here { background: var(--paper); }
.sb-fam__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist); overflow: hidden; }
.sb-fam__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-fam__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.sb-fam__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.sb-fam__name a { color: var(--ink); text-decoration: none; }
.sb-fam__name a::after { content: ""; position: absolute; inset: 0; }   /* the whole card opens the page */
.sb-fam__name a:focus-visible { outline: none; }
.sb-fam__here { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sb-fam__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sb-fam__feat { display: grid; gap: 6px; margin: 2px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px solid var(--line); }
.sb-fam__feat li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.sb-fam__feat .i { width: 16px; height: 16px; margin-top: 3px; color: #0066CC; flex: none; }
.sb-fam__feat strong { color: var(--ink); font-weight: 600; }
.sb-fam__good { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.sb-fam__good strong { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sb-fam__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 600; color: var(--iris-text, #0066CC); }
.sb-fam__cmp { margin: 20px 0 0; }
@media (max-width: 1024px) { .sb-fam__grid, .sb-fam__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sb-fam__grid, .sb-fam__grid--4, .sb-fam__grid--2 { grid-template-columns: 1fr; gap: 10px; }
  .sb-fam__card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .sb-fam__media { aspect-ratio: auto; min-height: 100%; }
  .sb-fam__body { padding: 12px 14px 14px; gap: 6px; }
  .sb-fam__name { font-size: 16px; }
  .sb-fam__cmp .btn { width: 100%; justify-content: center; }
}
@media (max-width: 359px) { .sb-fam__card { grid-template-columns: 88px minmax(0, 1fr); } }

/* ---------- Compare the blinds (owner note 24): pick cards, then the product-page compare table ---------- */
.sb-cp__form { display: grid; gap: 16px; }
.sb-cp__pick { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.sb-cp__legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 0; margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--ink); }
.sb-cp__count { font-size: 14.5px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sb-cp__gh { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sb-cp__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sb-cp__card { position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white); overflow: hidden; cursor: pointer; }
.sb-cp__card:hover { border-color: var(--line-strong); }
.sb-cp__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sb-cp__img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--mist); }
.sb-cp__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-cp__name { display: block; padding: 10px 40px 12px 12px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.sb-cp__tick { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--white); display: grid; place-items: center; }
.sb-cp__tick .i { width: 14px; height: 14px; stroke-width: 2.4; color: transparent; }
.sb-cp__in:checked + .sb-cp__img + .sb-cp__name + .sb-cp__tick { background: #0066CC; border-color: #0066CC; }
.sb-cp__in:checked + .sb-cp__img + .sb-cp__name + .sb-cp__tick .i { color: #FFFFFF; }
.sb-cp__card:has(.sb-cp__in:checked) { border-color: #0066CC; box-shadow: 0 0 0 2px rgba(0, 102, 204, .18); }
.sb-cp__card:has(.sb-cp__in:focus-visible) { outline: 2px solid #0066CC; outline-offset: 2px; }
.sb-cp__card:has(.sb-cp__in:disabled) { cursor: not-allowed; }
.sb-cp__card:has(.sb-cp__in:disabled) .sb-cp__img, .sb-cp__card:has(.sb-cp__in:disabled) .sb-cp__name { opacity: .55; }
.sb-cp__go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.sb-cp__msg { margin: 0; min-height: 24px; font-size: 15px; color: var(--ink-2); }
.sb-cp__result { margin-top: 24px; }
.sb-cp__hint { display: none; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14.5px; color: var(--ink-3); }
.sb-cp__hint .i { width: 16px; height: 16px; }
.sb-cp__result.is-wide .sb-cp__hint { display: flex; }
.sb-cp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); padding: 8px 12px 4px; }
.sb-cp__scroll:focus-visible { outline: 2px solid #0066CC; outline-offset: 2px; }
.sb-cp__table { width: 100%; min-width: calc(170px + var(--cols, 3) * 180px); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sb-cp__table[data-cols="2"] { --cols: 2; } .sb-cp__table[data-cols="3"] { --cols: 3; } .sb-cp__table[data-cols="4"] { --cols: 4; }
.sb-cp__cap { caption-side: top; text-align: left; padding: 8px 4px 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
/* The table's name, shown above its scrolling box so a phone never cuts it off (the caption stays for screen readers). */
.sb-cp__cap.sr-only { padding: 0; }
.sb-cp__title { margin: 0 0 12px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.sb-cp__table td.sb-cp__ask > span { color: var(--ink-3); font-style: normal; }
.sb-cp__table th, .sb-cp__table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.sb-cp__table thead th { border-bottom-color: var(--line-strong); padding-bottom: 16px; }
.sb-cp__table tbody tr:last-child th, .sb-cp__table tbody tr:last-child td { border-bottom: 0; }
.sb-cp__corner { width: 170px; }
.sb-cp__table tbody th { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.sb-cp__table td { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.sb-cp__table td > span:last-child { display: block; }
.sb-cp .pt3-colhead { display: grid; gap: 10px; color: var(--ink); text-decoration: none; }
.sb-cp .pt3-colhead__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-s); overflow: hidden; background: var(--mist); }
.sb-cp .pt3-colhead__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-cp .pt3-colhead__name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--iris-text, #0066CC); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sb-cp .pt3-dots { display: flex; gap: 5px; margin-bottom: 6px; }
.sb-cp .pt3-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-d2); }
.sb-cp .pt3-dots i.on { background: var(--ink); }
.sb-cp__fab { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; color: var(--iris-text, #0066CC); text-decoration: underline; text-underline-offset: 3px; }
.sb-cp__none { font-size: 14px; color: var(--ink-3); }
.sb-cp__note { margin-top: 14px; }
.sb-cp__note a { color: var(--iris-text, #0066CC); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  /* phones: compact cards, two a row (a small photo beside the name), so all the types fit in a short list */
  .sb-cp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sb-cp__card { grid-template-rows: none; grid-template-columns: 48px minmax(0, 1fr); align-items: center; min-height: 60px; }
  .sb-cp__img { aspect-ratio: auto; width: 48px; height: 100%; min-height: 60px; overflow: hidden; }
  .sb-cp__name { padding: 8px 34px 8px 10px; font-size: 14px; }
  .sb-cp__tick { bottom: auto; top: 50%; right: 8px; margin-top: -12px; }
  .sb-cp__name { hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 400px) {
  /* small phones: the tick sits on the photo, so the whole width beside it is for the name */
  .sb-cp__card { grid-template-columns: 44px minmax(0, 1fr); }
  .sb-cp__img { width: 44px; }
  .sb-cp__name { padding: 8px 8px 8px 9px; font-size: 13.5px; }
  .sb-cp__tick { top: 6px; right: auto; left: 10px; margin-top: 0; }
  .sb-cp__go .btn { flex: 1 1 100%; justify-content: center; }
  .sb-cp__scroll { padding: 4px 8px 2px; border-radius: var(--r); }
  .sb-cp__table { min-width: calc(128px + var(--cols, 3) * 150px); }
  .sb-cp__corner { width: 128px; }
  .sb-cp__table th, .sb-cp__table td { padding: 12px 10px; }
  .sb-cp .pt3-colhead__name { font-size: 15px; }
  .sb-cp__hint { display: flex; }
}
@media (prefers-reduced-motion: no-preference) { .sb-cp__result.is-new { animation: sb-cp-in .25s ease-out; } }
@keyframes sb-cp-in { from { opacity: .4; } to { opacity: 1; } }

/* ---------- For the trade + Motorize it (owner note 7): compact bands ---------- */
.sb-trade__box, .sb-auto__box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.sb-trade__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--paper); color: #0066CC; }
.sb-trade__ico .i { width: 24px; height: 24px; }
.sb-trade__copy, .sb-auto__copy { display: grid; gap: 6px; }
.sb-trade__copy .eyebrow { margin: 0; }
.sb-trade__h, .sb-auto__h { margin: 0; }
.sb-trade__copy p, .sb-auto__copy p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 40em; }
.sb-trade__btn { white-space: nowrap; }
.sb-auto__box { background: var(--paper); border-color: transparent; }
.sb-auto__icons { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sb-auto__icons li { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--white); color: #0066CC; }
.sb-auto__icons .i { width: 22px; height: 22px; }
.sb-auto__link { white-space: nowrap; font-weight: 600; }
@media (max-width: 900px) {
  .sb-trade__box, .sb-auto__box { grid-template-columns: auto minmax(0, 1fr); }
  .sb-trade__btn, .sb-auto__link { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
  .sb-trade__box, .sb-auto__box { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .sb-trade__btn { width: 100%; justify-content: center; white-space: normal; }
}

/* ---------- Warranty (owner note 29): a table on computers, cards on phones ---------- */
.sb-cov__t { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); overflow: hidden; }
.sb-cov__t th, .sb-cov__t td { padding: 16px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.sb-cov__t thead th { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); background: var(--paper); }
.sb-cov__t tbody tr:last-child th, .sb-cov__t tbody tr:last-child td { border-bottom: 0; }
.sb-cov__t tbody th { font-weight: 400; }
.sb-cov__cell { display: flex; align-items: center; gap: 14px; }
.sb-cov__t td { width: 40%; }
.sb-cov__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: #0066CC; flex: none; }
.sb-cov__ico .i { width: 20px; height: 20px; }
.sb-cov__what { display: grid; gap: 2px; }
.sb-cov__what strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.sb-cov__what span { font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
.sb-cov__yrs { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #EEF4FB; color: #0055AA; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sb-cov__note { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.sb-cov__foot { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; }
.sb-cov__foot .i { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.sb-cov__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.sb-cov__card { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.sb-cov__ch { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.sb-cov__ch .i { width: 22px; height: 22px; color: #0066CC; }
.sb-cov__card > p { margin: 0 0 8px; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.sb-cov__list { display: grid; gap: 8px; margin: 0; padding: 0 0 0 1.1em; list-style: disc; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.sb-cov__list li::marker { color: var(--ink-3); }
@media (max-width: 720px) {
  .sb-cov__t, .sb-cov__t tbody, .sb-cov__t tr, .sb-cov__t th, .sb-cov__t td { display: block; }
  .sb-cov__t { border: 0; border-radius: 0; background: none; }
  .sb-cov__t thead { display: none; }
  .sb-cov__t tbody { display: grid; gap: 10px; }
  .sb-cov__t tr { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
  .sb-cov__t th, .sb-cov__t td { padding: 0; border: 0; width: auto; }
  .sb-cov__cell { align-items: flex-start; }
  .sb-cov__t td { margin-top: 10px; padding-left: 54px; }
  .sb-cov__ico { width: 40px; height: 40px; }
  .sb-cov__cards { grid-template-columns: 1fr; margin-top: 20px; }
  .sb-cov__card { padding: 16px; }
}

/* ---------- A day with smart shades (Home automation): the Home page's design ---------- */
.sb-sched .smart__copy .lede { max-width: 34em; }

/* ---------- Text section ---------- */
.sb-text .wrap { display: grid; gap: 32px; }
.sb-text--media .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.sb-text__copy { display: grid; gap: 14px; max-width: 46em; }
.sb-text__body p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.sb-text__body p:last-child { margin-bottom: 0; }
.sb-text__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sb-text__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.sb-text__list .i { width: 18px; height: 18px; margin-top: 3px; color: #0066CC; flex: none; }
.sb-text__media { margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--mist); }
.sb-text__media img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .sb-text--media .wrap { grid-template-columns: 1fr; } }

/* Theme 3.1 (owner note 7): the smart-home section on the motorization page links to Home automation once it is published. */
.sb-smart-more { margin: 18px 0 0; }