/* ==========================================================================
   Knitting Dreams: Section Builder
   Built on the theme's tokens (colours, fonts, buttons, cards). Loaded only on
   pages that use the Section Builder template.
   ========================================================================== */

.kd-builder { --b-sand: #F6DE8D; --b-warm: #FBF6EA; overflow-x: clip; }

/* ---- Section wrapper: background and spacing from each section's Settings. */
.kd-b {
  position: relative;
  padding-top: var(--b-pt-d, var(--section-y));
  padding-bottom: var(--b-pb-d, var(--section-y));
  background: var(--b-bg, transparent);
}
.kd-b-bg--white  { --b-bg: var(--white); }
.kd-b-bg--cream  { --b-bg: var(--b-warm); }
.kd-b-bg--lilac  { --b-bg: var(--mist); }
.kd-b-bg--sand   { --b-bg: var(--b-sand); }
.kd-b-bg--plum   { --b-bg: var(--plum); color: var(--cream); }
.kd-b-bg--plum .kd-b-title, .kd-b-bg--plum .kd-b-card-title { color: var(--cream); }
.kd-b-bg--image  { background: var(--b-bg-image) center / cover no-repeat; }
@media (max-width: 1024px) {
  .kd-b { padding-top: var(--b-pt-t, var(--b-pt-d, var(--section-y))); padding-bottom: var(--b-pb-t, var(--b-pb-d, var(--section-y))); }
}
@media (max-width: 720px) {
  .kd-b { padding-top: var(--b-pt-m, var(--section-y)); padding-bottom: var(--b-pb-m, var(--section-y)); }
}
.kd-b-notice { padding: 16px 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-2); font-size: .9rem; }

/* ---- Headings */
.kd-b-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.kd-b-head--center { text-align: center; margin-inline: auto; max-width: 820px; }
.kd-b-title {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
  text-wrap: balance;
}
.kd-b-intro { margin-top: 12px; color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.kd-b-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.kd-b-actions--center { justify-content: center; }
.btn--outline { border: 1px solid var(--plum); color: var(--plum); background: transparent; }
.btn--outline::before { background: var(--plum); }
.btn--outline:hover, .btn--outline:focus-visible { color: var(--cream); }

/* ---- Hero: small image left, text centre, large image right */
.kd-b--hero { padding-top: var(--b-pt-d, clamp(24px, 4vw, 56px)); }
.kd-b-hero {
  display: grid; align-items: start; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.6fr);
}
.kd-b-hero--one .kd-b-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: var(--gutter); }
.kd-b-hero--none .kd-b-hero { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.kd-b-hero-img { overflow: hidden; background: var(--mist); }
.kd-b-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-b-hero-img--left { aspect-ratio: 5 / 4.2; }
.kd-b-hero-img--right { aspect-ratio: 1 / 1.08; }
.kd-b-hero-body { padding-top: clamp(8px, 2vw, 24px); }
.kd-b-hero-title { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.05; margin-bottom: 20px; }
.kd-b-hero-title--italic { font-style: italic; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.kd-b-hero-title--normal { font-size: clamp(2rem, 4vw, 3.2rem); }
.kd-b-hero-text { color: var(--ink-2); line-height: 1.7; max-width: 46ch; }
.kd-b-hero-text p + p { margin-top: 12px; }
.kd-b-hero--none .kd-b-hero-text { margin-inline: auto; }
.kd-b-hero--none .kd-b-actions { justify-content: center; }
@media (max-width: 900px) {
  .kd-b-hero, .kd-b-hero--one .kd-b-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: var(--gutter); }
  .kd-b-hero-body { grid-column: 1 / -1; order: -1; padding-top: 0; }
  .kd-b-hero-img--left, .kd-b-hero-img--right { aspect-ratio: 4 / 5; }
  .kd-b-hero--one .kd-b-hero-img { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

/* ---- Marquee: reuses the theme's .marquee; colour and speed from settings */
.kd-b--marquee.marquee { padding: 0; border: 0; background: var(--b-bg, var(--plum)); }
.kd-b--marquee.kd-b-bg--default { --b-bg: var(--plum); }
.kd-b-marquee--dark { color: var(--ink); }
.kd-b-marquee--light { color: var(--cream); }
.kd-b--marquee .marquee-group li {
  font-style: normal; font-family: var(--serif); font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: .06em; text-transform: uppercase;
  padding-block: clamp(18px, 2.4vw, 28px); display: inline-flex; align-items: center;
}
.kd-b--marquee .marquee-group li a { color: inherit; text-decoration: none; }
.kd-b--marquee.has-sep .marquee-group li::after { display: none; }
.kd-b-marquee-sep { width: 22px; height: 22px; object-fit: contain; margin-inline: clamp(24px, 4vw, 56px); }
.kd-b-marquee--slow .marquee-track { animation-duration: 80s; }
.kd-b-marquee--fast .marquee-track { animation-duration: 28s; }

/* ---- Cards */
.kd-b-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  height: 100%; padding: clamp(24px, 2.6vw, 36px) clamp(18px, 2vw, 28px);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.kd-b-cards--outline .kd-b-card { border: 1px solid var(--line); background: var(--white); }
.kd-b-cards--filled .kd-b-card { background: var(--mist); border-radius: var(--radius-lg); }
.kd-b-cards--outline .kd-b-card:hover { border-color: var(--plum); box-shadow: 0 10px 28px -18px rgba(var(--ink-rgb), .35); }
.kd-b-card-icon { width: 64px; height: 64px; margin-bottom: 16px; }
.kd-b-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.kd-b-card-title {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: .04em; text-transform: uppercase; line-height: 1.25;
}
.kd-b-card-text { margin-top: 10px; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.kd-b-card-link { margin-top: auto; padding-top: 16px; }
.kd-b-card-badge {
  position: absolute; top: 14px; right: 14px; padding: 4px 10px; border-radius: 999px;
  background: var(--plum); color: var(--cream); font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}

/* ---- Image + content panels */
.kd-b-feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center;
  gap: clamp(28px, 5vw, 72px); position: relative; isolation: isolate;
  padding-block: clamp(32px, 5vw, 64px);
}
/* The coloured panel sits behind the text and slides under the image. */
.kd-b-feature::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 22%; right: 0; background: var(--panel-bg, transparent);
}
.kd-b-feature--img-right::before { left: 0; right: 22%; }
.kd-b-panel--cream  { --panel-bg: var(--b-warm, #FBF6EA); }
.kd-b-panel--white  { --panel-bg: var(--white); }
.kd-b-panel--lilac  { --panel-bg: var(--mist); }
.kd-b-panel--none   { --panel-bg: transparent; }
.kd-b-feature--img-right .kd-b-feature-media { order: 2; }
.kd-b-feature--no-img { grid-template-columns: minmax(0, 1fr); }
.kd-b-feature--no-img::before { left: 0; right: 0; }
.kd-b-feature--no-img .kd-b-feature-body { max-width: 720px; margin-inline: auto; text-align: center; padding-inline: var(--gutter); }
.kd-b-feature-media { aspect-ratio: 4 / 4.6; overflow: hidden; margin-left: clamp(0px, 3vw, 40px); background: var(--mist); }
.kd-b-feature--img-right .kd-b-feature-media { margin-left: 0; margin-right: clamp(0px, 3vw, 40px); }
.kd-b-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kd-b-feature-body { padding-right: clamp(0px, 3vw, 40px); }
.kd-b-feature--img-right .kd-b-feature-body { padding-right: 0; padding-left: clamp(0px, 3vw, 40px); }
.kd-b-feature-title {
  font-family: var(--serif); font-weight: 400; color: var(--ink); text-align: center;
  font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance;
}
.kd-b-feature-body > .eyebrow { text-align: center; }
.kd-b-feature-text { margin-top: 18px; color: var(--ink-2); line-height: 1.7; }
.kd-b-feature-text p + p { margin-top: 10px; }
.kd-b--feature .kd-b-items--carousel .kd-b-arrow--prev { left: 6px; }
.kd-b--feature .kd-b-items--carousel .kd-b-arrow--next { right: 6px; }
@media (max-width: 900px) {
  .kd-b-feature, .kd-b-feature--img-right { grid-template-columns: minmax(0, 1fr); padding: 0 0 28px; }
  .kd-b-feature::before, .kd-b-feature--img-right::before { left: 0; right: 0; top: 30%; }
  .kd-b-feature--img-right .kd-b-feature-media { order: 0; }
  .kd-b-feature-media, .kd-b-feature--img-right .kd-b-feature-media { margin: 0 var(--gutter); aspect-ratio: 4 / 3.4; }
  .kd-b-feature-body, .kd-b-feature--img-right .kd-b-feature-body { padding: 0 var(--gutter); }
}

/* ---- Product collections */
.kd-b-tabs {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.kd-b-tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 8px 22px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: .85rem; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.kd-b-tab:hover { border-color: var(--line); }
.kd-b-tab.is-active { background: var(--plum); color: var(--cream); }
.kd-b-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.kd-b-tab-icon { width: 22px; height: 22px; object-fit: contain; border-radius: 50%; }
.kd-b-tabpanel { animation: kd-b-fade .35s var(--ease); }
.kd-b-tabpanel[hidden] { display: none; }
@keyframes kd-b-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kd-b-products .card, .kd-b-products .card-body { text-align: center; }
.kd-b-products .card-price, .kd-b-products .card-cat { justify-content: center; text-align: center; }
.kd-b-products .card-title { font-family: var(--serif); text-transform: uppercase; letter-spacing: .03em; font-size: .98rem; }
.kd-b-hide-desc .card-desc,
.kd-b-hide-title .card-title,
.kd-b-hide-price .card-price,
.kd-b-hide-category .card-cat,
.kd-b-hide-badge .card-badge,
.kd-b-hide-button .card-actions { display: none !important; }
.kd-b-products .kd-b-arrow { top: 38%; }

/* ---- Form */
.kd-b-formgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.kd-b-form--form-right .kd-b-form-wrap { order: 2; }
.kd-b-form-side { text-align: center; }
.kd-b-form-title { font-size: clamp(1.8rem, 3.4vw, 2.9rem); }
.kd-b-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2vw, 28px); margin-top: 28px; list-style: none; padding: 0; }
.kd-b-logos li { width: clamp(56px, 6vw, 76px); height: clamp(56px, 6vw, 76px); border-radius: 50%; overflow: hidden; background: var(--white); box-shadow: 0 2px 10px rgba(var(--ink-rgb), .08); }
.kd-b-logos img { width: 100%; height: 100%; object-fit: contain; }
.kd-b-form { display: grid; gap: 14px; }
.kd-b-field { display: grid; gap: 6px; margin: 0; }
.kd-b-field label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.kd-b-field input, .kd-b-field select, .kd-b-field textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink); font: inherit; font-size: .95rem;
}
.kd-b-field textarea { min-height: 120px; resize: vertical; }
.kd-b-field input:focus, .kd-b-field select:focus, .kd-b-field textarea:focus { outline: 0; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(var(--plum-rgb), .12); }
.kd-b-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kd-b-form-msg { margin-bottom: 16px; padding: 14px 16px; border-left: 3px solid var(--plum); background: var(--mist); font-size: .92rem; }
.kd-b-form-msg--err { border-left-color: #A1332B; }
@media (max-width: 900px) {
  .kd-b-formgrid { grid-template-columns: minmax(0, 1fr); }
  .kd-b-form-side { order: -1; }
  .kd-b-form--form-right .kd-b-form-wrap { order: 0; }
}

/* ---- Embed, text, spacer */
.kd-b-embed--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.kd-b-embed--full { width: 100%; }
.kd-b-embed + .kd-b-actions { margin-top: clamp(24px, 3vw, 36px); }
.kd-b-text--narrow { max-width: 760px; margin-inline: auto; }
.kd-b-text--center { text-align: center; }
.kd-b-text .prose { margin-top: 16px; }
.kd-b-text--center .kd-b-actions { justify-content: center; }
.kd-b-spacer { height: var(--sp-d); display: flex; align-items: center; }
.kd-b-spacer .container { width: 100%; }
.kd-b-spacer hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
@media (max-width: 1024px) { .kd-b-spacer { height: var(--sp-t); } }
@media (max-width: 720px) { .kd-b-spacer { height: var(--sp-m); } }

@media (prefers-reduced-motion: reduce) {
  .kd-b-tabpanel { animation: none; }
  .kd-b-card, .kd-b-dot, .kd-b-tab { transition: none; }
}

/* ---- Spacing (1.11.0): neighbouring builder sections on the page
   background share one gap. A top spacing set by hand in a section's
   Settings still wins. ---- */
.kd-b.kd-b-bg--default + .kd-b.kd-b-bg--default { padding-top: var(--b-pt-d, 0); }
@media (max-width: 1024px) {
  .kd-b.kd-b-bg--default + .kd-b.kd-b-bg--default { padding-top: var(--b-pt-t, var(--b-pt-d, 0)); }
}
@media (max-width: 720px) {
  .kd-b.kd-b-bg--default + .kd-b.kd-b-bg--default { padding-top: var(--b-pt-m, 0); }
}
.kd-b-head { margin-bottom: clamp(24px, 3vw, 40px); }
.kd-b--hero { padding-top: var(--b-pt-d, clamp(16px, 3vw, 40px)); }