/** Shopify CDN: Minification failed

Line 37:0 All "@import" rules must come first

**/
/* ============================================================
   NuBuro [NB] Home page component system
   Ported from the Claude Design handoff (index.html).
   Self-contained: tokens on the .nb-home scope, everything namespaced
   .nb-* and scoped under .nb-home so nothing leaks into / collides with
   stock Dawn styles. Width is capped to the theme's page-width setting.
   ============================================================ */

.nb-home {
  --nb-blue: #719fb3;
  --nb-lime: #d2df46;
  --nb-blue700: #3f6b7d;
  --nb-ink: #121212;
  --nb-surface: #f3f3f3;
  --nb-dark: #242833;
  --nb-border: rgba(18, 18, 18, 0.12);
  --nb-border-strong: rgba(18, 18, 18, 0.55);
  --nb-muted: #6a6a6a;

  --nb-accent: #3f6b7d;
  --nb-accent-ink: #fff;

  --nb-radius-pill: 40px;
  --nb-shadow-hover: 0 8px 28px rgba(18, 18, 18, 0.1);
  --nb-shadow-soft: 0 2px 10px rgba(18, 18, 18, 0.05);

  font-family: "Poppins", var(--font-body-family, system-ui), sans-serif;
  color: var(--nb-ink);
  letter-spacing: 0.2px;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

.nb-home *,
.nb-home *::before,
.nb-home *::after {
  box-sizing: border-box;
}
.nb-home img {
  display: block;
  max-width: 100%;
}
.nb-home a {
  color: inherit;
  text-decoration: none;
}
.nb-home h1,
.nb-home h2,
.nb-home h3,
.nb-home h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.nb-home p {
  margin: 0;
}

/* width capped to the theme page-width setting (store gutters 50/20px) */
.nb-wrap {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding-left: 50px;
  padding-right: 50px;
}
@media (max-width: 1320px) {
  .nb-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------- primitives ---------- */
.nb-eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nb-accent);
  margin: 0;
}
.nb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--nb-radius-pill);
  padding: 15px 32px;
  border: 1.5px solid var(--nb-ink);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.nb-btn:hover {
  transform: translateY(-1px);
}
.nb-btn.p {
  background: var(--nb-ink);
  color: #fff;
}
.nb-btn.s {
  background: #fff;
  color: var(--nb-ink);
}
.nb-btn.a {
  background: var(--nb-accent);
  color: var(--nb-accent-ink);
  border-color: var(--nb-accent);
}
.nb-btn.lg {
  padding: 17px 40px;
  font-size: 14px;
}
.nb-stars {
  color: var(--nb-ink);
  letter-spacing: 1px;
  font-size: 13px;
  line-height: 1;
}
.nb-spec-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--nb-border-strong);
  color: #333;
  padding: 6px 12px;
  border-radius: var(--nb-radius-pill);
  background: #fff;
}
.nb-link-underline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nb-accent);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: gap 0.15s ease;
}
.nb-link-underline:hover {
  gap: 11px;
}
.nb-section-head {
  margin-bottom: 34px;
}
.nb-section-head .nb-eyebrow {
  margin-bottom: 12px;
}
.nb-section-head h2 {
  font-size: clamp(26px, 3.4vw, 38px);
}
.nb-divider {
  height: 1px;
  background: var(--nb-border);
  max-width: var(--page-width, 1400px);
  margin-inline: auto;
}
.nb-section {
  padding-block: clamp(48px, 7vw, 92px);
}

/* ============================================================
   Hero — editorial, chair-led
   ============================================================ */
.nb-hero {
  position: relative;
  /* Own stacking context below the sticky header (z-index:3), so the
     floating price/best-seller chips (z-index:3 locally) never paint over
     the nav bar on scroll. */
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  --hero-bg: #fff;
  --hero-fg: var(--nb-ink);
  --hero-sub: #383838;
  --hero-mat: var(--nb-accent);
  --hero-mat-fg: var(--nb-accent-ink);
  background: var(--hero-bg);
  color: var(--hero-fg);
}
.nb-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -6%;
  width: 42vw;
  height: 42vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, rgba(113, 159, 179, 0.13), transparent 70%);
  pointer-events: none;
}
.nb-hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
  min-height: min(80vh, 700px);
  /* extra breathing room above + below the hero (and its product image) */
  padding-block: clamp(56px, 8vw, 112px);
  position: relative;
  z-index: 1; /* sit above the optional background-image layer */
}

/* optional hero background image (behind all content), opacity set inline.
   Scoped under .nb-hero so `display:block` (0,2,0) beats Dawn base.css
   `div:empty { display:none }` (0,1,1) — the layer is an empty div. */
.nb-hero .nb-hero-bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.nb-hero-copy {
  max-width: 580px;
}
.nb-hero-copy .nb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 20px;
  color: var(--hero-fg);
}
.nb-hero-copy .nb-eyebrow .ln {
  width: 34px;
  height: 2px;
  background: var(--nb-accent);
  display: inline-block;
}
.nb-hero h1 {
  font-size: clamp(46px, 6.6vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--hero-fg);
}
.nb-hero h1 em {
  font-style: normal;
  color: var(--hero-mat);
}
.nb-hero .nb-sub {
  margin-top: 26px;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--hero-sub);
  max-width: 450px;
}
.nb-hero-cta {
  display: flex;
  gap: 13px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.nb-hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.nb-hero-meta .mi {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--hero-fg);
  opacity: 0.85;
  font-weight: 500;
}
.nb-hero-meta .vr {
  width: 1px;
  height: 26px;
  background: var(--nb-border);
}
/* When the hero has a (dark) background image, the copy/meta need white text
   for readability. Scoped to .has-bg so a plain light hero is untouched. */
.nb-hero.has-bg .nb-sub {
  color: #fff;
}
.nb-hero.has-bg .nb-hero-meta .mi {
  color: #fff;
  opacity: 1;
}
.nb-hero.has-bg .nb-hero-meta .nb-stars {
  color: #fff;
}
.nb-hero.has-bg .nb-hero-meta .vr {
  background: rgba(255, 255, 255, 0.45);
}
.nb-hero-art {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1/1;
  justify-self: end;
}
.nb-hero-art .nb-mat {
  display: block; /* beat Dawn base.css `div:empty { display:none }` */
  position: absolute;
  inset: 0;
  background: var(--hero-mat);
  transition: background 0.3s;
}
.nb-hero-art .nb-chair {
  position: absolute;
  left: 10.5%;
  right: 6.75%;
  top: 6.75%;
  bottom: 6.75%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  z-index: 2;
  transition: background 0.3s;
  box-shadow: 0 32px 60px -24px rgba(18, 18, 18, 0.45);
}
.nb-hero-art .nb-chip {
  position: absolute;
  z-index: 3;
  background: #fff;
  color: var(--nb-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
}
.nb-hero-art .nb-chip.price {
  left: -22px;
  bottom: 36px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.nb-hero-art .nb-chip.price .pn {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-muted);
}
.nb-hero-art .nb-chip.price .pv {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.nb-hero-art .nb-chip.price .nb-stars {
  font-size: 11px;
  margin-top: 2px;
}
.nb-hero-art .nb-chip.best {
  top: 26px;
  right: -18px;
  background: var(--nb-ink);
  color: #fff;
  border-radius: var(--nb-radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 9px 16px;
}
.nb-hero-art .nb-chip.best b {
  color: var(--nb-lime);
}
@media (max-width: 880px) {
  .nb-hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .nb-hero-art {
    order: -1;
    max-width: 380px;
    justify-self: center;
    margin-bottom: 8px;
  }
  .nb-hero-art .nb-chip.price {
    left: -8px;
  }
  .nb-hero-art .nb-chip.best {
    right: -6px;
  }
}

/* ---- hero schemes (tweak: wrapper modifier) ---- */
.nb-hero.scheme-surface {
  --hero-bg: var(--nb-surface);
}
.nb-hero.scheme-sage {
  --hero-bg: #e9f0f2;
  --hero-mat: var(--nb-blue700);
  --hero-mat-fg: #fff;
}
.nb-hero.scheme-ink {
  --hero-bg: var(--nb-dark);
  --hero-fg: #fff;
  --hero-sub: #c3c6cf;
  --hero-mat: var(--nb-lime);
  --hero-mat-fg: var(--nb-ink);
}
.nb-hero.scheme-ink::before {
  display: none;
}
.nb-hero.scheme-ink .nb-hero-copy .nb-eyebrow .ln {
  background: var(--nb-lime);
}
.nb-hero.scheme-ink .nb-hero-meta .vr {
  background: rgba(255, 255, 255, 0.22);
}
.nb-hero.scheme-ink .nb-btn.p {
  background: var(--nb-lime);
  color: var(--nb-ink);
  border-color: var(--nb-lime);
}
.nb-hero.scheme-ink .nb-btn.s {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.nb-hero.scheme-ink .nb-btn.s:hover {
  background: #fff;
  color: var(--nb-ink);
  border-color: #fff;
}

/* ---- hero layouts (tweak: wrapper modifier) ---- */
.nb-hero.layout-reverse .nb-hero-copy {
  order: 2;
}
.nb-hero.layout-reverse .nb-hero-art {
  order: 1;
  justify-self: start;
}
.nb-hero.layout-reverse .nb-hero-art .nb-chip.price {
  left: auto;
  right: -22px;
}
.nb-hero.layout-reverse .nb-hero-art .nb-chip.best {
  right: auto;
  left: -18px;
}
.nb-hero.layout-soft .nb-hero-art .nb-mat {
  background: var(--hero-mat);
  opacity: 0.15;
  border-radius: 50%;
  inset: 5%;
}
.nb-hero.layout-soft .nb-hero-art .nb-chair {
  inset: 4% 6% 8% 6%;
  left: 6%;
  right: 6%;
  top: 4%;
  bottom: 8%;
  background: transparent;
  box-shadow: none;
}
.nb-hero.layout-soft .nb-hero-art::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 8%;
  height: 22px;
  z-index: 1;
  background: radial-gradient(ellipse, rgba(18, 18, 18, 0.2), transparent 70%);
  filter: blur(3px);
}
.nb-hero.layout-soft .nb-hero-art .nb-chip {
  border: 1px solid var(--nb-border);
}

/* ============================================================
   Trust bar
   ============================================================ */
.nb-trustbar {
  border-top: 1px solid var(--nb-border);
  border-bottom: 1px solid var(--nb-border);
  background: #fff;
}
.nb-trustbar .nb-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 44px;
  justify-content: center;
  align-items: center;
  padding-block: 24px;
}
.nb-trustbar .nb-ti {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--nb-ink);
}
.nb-trustbar .nb-ti svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--nb-blue700);
}
.nb-trustbar .nb-ti .lf {
  font-size: 19px;
  line-height: 1;
}
.nb-trustbar .nb-sep {
  width: 1px;
  height: 22px;
  background: var(--nb-border);
}
@media (max-width: 760px) {
  .nb-trustbar .nb-sep {
    display: none;
  }
  .nb-trustbar .nb-ti {
    font-size: 14px;
  }
}

/* ============================================================
   Categories
   ============================================================ */
.nb-cat-grid {
  display: grid;
  grid-template-columns: repeat(var(--nb-cat-cols, 5), 1fr);
  gap: 16px;
}
.nb-cat {
  display: block;
  border: 1px solid var(--nb-border);
  background: #fff;
  transition: box-shadow 0.2s, transform 0.2s;
}
.nb-cat:hover {
  box-shadow: var(--nb-shadow-hover);
  transform: translateY(-3px);
}
.nb-cat .nb-ci {
  aspect-ratio: 1/1;
  background: var(--nb-surface);
  overflow: hidden;
}
.nb-cat .nb-ci img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.nb-cat:hover .nb-ci img {
  transform: scale(1.05);
}
.nb-cat .nb-cl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14.5px;
}
.nb-cat .nb-cl .arr {
  color: var(--nb-blue700);
  transition: transform 0.2s;
}
.nb-cat:hover .nb-cl .arr {
  transform: translateX(4px);
}
@media (max-width: 880px) {
  .nb-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   Value story / brand story (shared num + media patterns)
   ============================================================ */
.nb-story {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.nb-story .nb-media {
  aspect-ratio: 4/3;
  background: var(--nb-surface);
  overflow: hidden;
}
.nb-story .nb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nb-story h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin-top: 14px;
}
.nb-story p {
  margin-top: 18px;
  font-size: 16px;
  color: #363636;
  max-width: 480px;
}
.nb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.nb-num {
  display: flex;
  gap: 36px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.nb-num b {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.nb-num span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nb-muted);
}
@media (max-width: 820px) {
  .nb-story {
    grid-template-columns: 1fr;
  }
  .nb-story .nb-media {
    order: -1;
  }
}
.nb-brand-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.nb-brand-row .nb-media {
  aspect-ratio: 3/2;
  background: var(--nb-surface);
  overflow: hidden;
}
.nb-brand-row .nb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nb-brand-row h2 {
  font-size: clamp(26px, 3.4vw, 38px);
}
.nb-brand-row p {
  margin-top: 16px;
  color: #363636;
  font-size: 15.5px;
  max-width: 460px;
}
@media (max-width: 820px) {
  .nb-brand-row {
    grid-template-columns: 1fr;
  }
  .nb-brand-row .nb-media {
    order: -1;
  }
}

/* ============================================================
   Shop the trend — product grid (reuses Dawn card-product, restyled)
   ============================================================ */
.nb-shop-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 30px;
}
.nb-prod-grid {
  display: grid;
  grid-template-columns: repeat(var(--nb-prod-cols, 5), 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .nb-prod-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 620px) {
  .nb-prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* scoped restyle of reused card-product to the flat NB look */
.nb-home .card,
.nb-home .card__inner {
  border-radius: 0;
}
.nb-home .card__inner {
  border: 1px solid var(--nb-border);
  background: #fff;
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}
.nb-home .card-wrapper:hover .card__inner {
  box-shadow: var(--nb-shadow-hover);
  transform: translateY(-3px);
}
.nb-home.nb-cards-shadow .card__inner {
  border-color: transparent;
  box-shadow: var(--nb-shadow-soft);
}

/* Same card-content fix as the PLP grid: the reused card crams name+price and
   swatches+Select into a grid, which collides multi-colour swatches with the
   Select button. Stack vertically (name, price, swatches, full-width Select). */
.nb-home .product-info-h3 {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.nb-home .product-info-h3 .empry-div {
  display: none;
}
.nb-home .product-info-h3 .custom-swatch,
.nb-home .product-info-h3 .collection-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nb-home .product-info-h3 .quick-add,
.nb-home .product-info-h3 .product-card-url-dd {
  width: 100%;
  /* extra breathing room between the colour swatches and the button */
  margin-top: 8px;
}
/* "Select" button — ink blue with white text */
.nb-home .product-info-h3 .product-card-url-dd {
  display: block;
  box-sizing: border-box;
  padding: 11px 16px;
  background: var(--nb-dark);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  border: 1.5px solid var(--nb-dark);
  border-radius: var(--nb-radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.nb-home .product-info-h3 .product-card-url-dd:hover {
  background: #1a1d26;
  border-color: #1a1d26;
  color: #fff;
}

/* ============================================================
   Quiz teaser
   ============================================================ */
.nb-quiz {
  background: var(--nb-dark);
  color: #fff;
}
.nb-quiz .nb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-block: clamp(40px, 6vw, 72px);
}
.nb-quiz .nb-eyebrow {
  color: var(--nb-lime);
}
.nb-quiz h2 {
  font-size: clamp(26px, 3.4vw, 38px);
  color: #fff;
  max-width: 520px;
  margin-top: 12px;
}
.nb-quiz p {
  margin-top: 12px;
  color: #c3c6cf;
  font-size: 15.5px;
  max-width: 520px;
}
.nb-quiz .nb-steps {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.nb-quiz .nb-steps i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nb-lime);
  font-style: normal;
}
.nb-quiz .nb-steps i:nth-child(2) {
  opacity: 0.55;
}
.nb-quiz .nb-steps i:nth-child(3) {
  opacity: 0.28;
}

/* ============================================================
   Social proof
   ============================================================ */
.nb-proof-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.nb-proof-head .big {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nb-rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nb-rev {
  border: 1px solid var(--nb-border);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nb-rev p {
  font-size: 14.5px;
  color: #2a2a2a;
  line-height: 1.6;
}
.nb-rev .nb-who {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto;
  padding-top: 6px;
}
.nb-rev .nb-who img,
.nb-rev .nb-who .nb-avatar-ph {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--nb-surface);
}
.nb-rev .nb-who .nb-avatar-ph {
  display: block;
  flex: none;
}
.nb-rev .nb-who .nm {
  font-weight: 600;
  font-size: 13px;
}
.nb-rev .nb-who .vf {
  font-size: 11px;
  color: var(--nb-muted);
}
@media (max-width: 820px) {
  .nb-rev-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Value props
   ============================================================ */
.nb-props {
  background: var(--nb-surface);
}
.nb-props-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 40px;
}
.nb-prop {
  display: flex;
  gap: 16px;
}
.nb-prop .nb-ic {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--nb-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nb-blue700);
}
.nb-prop h4 {
  font-size: 15px;
  font-weight: 600;
}
.nb-prop p {
  font-size: 13.5px;
  color: #4a4a4a;
  margin-top: 5px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .nb-props-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .nb-props-grid {
    grid-template-columns: 1fr;
  }
}