.sp-store-intro {
  padding-block: 34px 0;
  color: var(--sp-ink, #153447);
}

.sp-store-intro h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 2.65rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.sp-store-intro p {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--sp-muted, #536a78);
  font-size: .9375rem;
  line-height: 1.65;
}

.sp-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 22px 0;
}

.sp-category-links a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid #d7e8f2;
  border-radius: 999px;
  background: #f4faff;
  color: var(--sp-blue, #14618d);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.sp-category-links a:hover {
  border-color: #a9cfe5;
  background: #e7f4fc;
  text-decoration: none;
}

.sp-collection {
  --sp-rail-gap: 20px;
  margin-block: 40px 0;
  min-width: 0;
  color: var(--sp-ink, #153447);
  scroll-margin-block-start: 28px;
}

.sp-collection + .sp-collection {
  margin-block-start: 48px;
}

.sp-collection .sp-collection-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  row-gap: 7px;
  margin-block-end: 18px;
}

.sp-collection .sp-collection-heading h2 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(1.35rem, 2.25vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.sp-collection .sp-collection-heading p {
  grid-column: 1;
  margin: 0;
  color: var(--sp-muted, #536a78);
  font-size: .875rem;
  line-height: 1.55;
}

.sp-collection .sp-collection-heading h2 + p {
  margin-block-start: 6px;
}

.sp-collection .sp-rail-controls {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-collection .sp-rail-controls[hidden] {
  display: none;
}

.sp-collection .sp-rail-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  border: 1px solid #cde4f2;
  border-radius: 50%;
  background: #eaf6fd;
  color: var(--sp-blue, #14618d);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.sp-collection .sp-rail-controls button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sp-collection .sp-rail-controls button:hover:not(:disabled) {
  border-color: #a5cde3;
  background: #d9eefb;
}

.sp-collection .sp-rail-controls button:disabled {
  border-color: #e4edf2;
  background: #f7fafc;
  color: #9aafbd;
  cursor: default;
}

.sp-collection .sp-rail {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #bdd6e5 transparent;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 12px;
}

.sp-collection .sp-rail::-webkit-scrollbar {
  height: 5px;
}

.sp-collection .sp-rail::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #bdd6e5;
}

.sp-collection .sp-rail-list,
.sp-collection .sp-tool-grid {
  display: grid;
  gap: var(--sp-rail-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-collection .sp-rail-list {
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--sp-rail-gap)) / 4);
}

.sp-collection .sp-tool-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-collection .sp-rail-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sp-line, #dce8ee);
  border-radius: 10px;
  background: #fff;
  scroll-snap-align: start;
  transition: border-color .15s ease;
}

.sp-collection .sp-rail-card:hover {
  border-color: #adcfe2;
}

.sp-collection .sp-card-product {
  display: block;
  border-radius: 9px 9px 0 0;
  color: var(--sp-ink, #153447);
  text-decoration: none;
}

.sp-collection .sp-card-product img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0;
  border: 0;
  border-radius: 9px 9px 0 0;
  background: #f2f9fe;
}

.sp-collection .sp-card-product h3 {
  margin: 15px 16px 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.sp-collection .sp-card-product:hover {
  text-decoration: none;
}

.sp-collection .sp-card-product:hover h3 {
  color: var(--sp-blue, #14618d);
}

.sp-collection .sp-card-kind {
  margin: 4px 16px 0;
  color: var(--sp-muted, #536a78);
  font-size: .78125rem;
  line-height: 1.5;
}

.sp-collection .sp-card-price {
  min-height: 23px;
  margin: 9px 16px 0;
  color: var(--sp-blue, #14618d);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.sp-collection .sp-card-price p {
  margin: 0;
}

.sp-collection .sp-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 0;
  padding: 15px 16px 16px;
}

.sp-collection .sp-card-actions-single {
  grid-template-columns: minmax(0, 1fr);
}

.sp-collection .sp-card-actions a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 4px;
  min-height: 42px;
  padding: 9px 8px;
  border: 1px solid #c9dfed;
  border-radius: 6px;
  background: #eff8fd;
  color: var(--sp-blue, #14618d);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.sp-collection .sp-card-actions:not(.sp-card-actions-single) a:first-child {
  border-color: var(--sp-blue, #14618d);
  background: var(--sp-blue, #14618d);
  color: #fff;
}

.sp-collection .sp-card-actions a:hover {
  border-color: #9ac4dd;
  background: #e1f1fb;
  text-decoration: none;
}

.sp-collection .sp-card-actions:not(.sp-card-actions-single) a:first-child:hover {
  border-color: #104e72;
  background: #104e72;
}

.sp-category-links a:focus-visible,
.sp-collection a:focus-visible,
.sp-collection button:focus-visible {
  outline: 3px solid #2689c5;
  outline-offset: 3px;
}

.sp-collection .sp-card-product:focus-visible,
.sp-collection .sp-rail:focus-visible {
  outline: 3px solid #2689c5;
  outline-offset: -3px;
}

@media (min-width: 700px) and (max-width: 1023px) {
  .sp-collection .sp-rail-list {
    grid-auto-columns: calc((100% - 2 * var(--sp-rail-gap)) / 3);
  }
}

@media (max-width: 699px) {
  .sp-store-intro {
    padding-block-start: 26px;
  }

  .sp-store-intro p {
    font-size: .875rem;
  }

  .sp-category-links {
    gap: 6px;
    margin-block-start: 18px;
  }

  .sp-category-links a {
    min-height: 42px;
    padding-inline: 12px;
    font-size: .75rem;
  }

  .sp-collection {
    --sp-rail-gap: 12px;
    margin-block-start: 30px;
  }

  .sp-collection + .sp-collection {
    margin-block-start: 34px;
  }

  .sp-collection .sp-collection-heading {
    column-gap: 12px;
    margin-block-end: 15px;
  }

  .sp-collection .sp-collection-heading p {
    font-size: .8125rem;
  }

  .sp-collection .sp-rail-controls {
    gap: 5px;
  }

  .sp-collection .sp-rail-controls button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .sp-collection .sp-rail-list {
    grid-auto-columns: 64%;
  }

  .sp-collection .sp-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-collection .sp-card-product h3 {
    margin: 12px 12px 0;
    font-size: .9375rem;
  }

  .sp-collection .sp-card-kind,
  .sp-collection .sp-card-price {
    margin-inline: 12px;
  }

  .sp-collection .sp-card-price {
    font-size: .875rem;
  }

  .sp-collection .sp-card-actions {
    gap: 6px;
    padding: 13px 12px 12px;
  }

  .sp-collection .sp-card-actions a {
    min-height: 44px;
    padding-inline: 5px;
    font-size: .78125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-collection .sp-rail {
    scroll-behavior: auto;
  }

  .sp-collection .sp-rail-card,
  .sp-collection .sp-rail-controls button,
  .sp-collection .sp-card-actions a {
    transition: none;
  }
}
.sp-home-hero{position:relative;isolation:isolate;overflow:hidden;min-height:440px;margin-top:24px!important;border-radius:14px;background:#edf7fd;border:1px solid #dfedf5;display:flex;align-items:center}.sp-home-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.sp-home-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,252,255,.92),rgba(248,252,255,.68) 40%,transparent 64%)}.sp-home-hero-content{padding:44px 48px;max-width:58%}.sp-home-hero-content .sp-eyebrow{margin:0 0 16px}.sp-home-hero-content h1{font-size:clamp(2.6rem,4.3vw,4.1rem);letter-spacing:-.045em;line-height:1.08;margin:0 0 20px;font-weight:550}.sp-home-hero-content>p:not(.sp-eyebrow){font-size:1rem;line-height:1.7;color:#42637a;max-width:340px;margin:0 0 26px}.sp-home-hero-content .wp-block-buttons{gap:12px}.sp-home-hero-content .wp-block-button__link{padding:13px 21px;font-size:.875rem}.sp-home-hero-content .is-style-outline .wp-block-button__link{border:1px solid #8fb5ca;background:rgba(255,255,255,.5);color:#153447}.sp-home-hero+.sp-store-intro{padding-top:0}.sp-research-bar{font-weight:600;letter-spacing:.025em}
@media(max-width:781px){.sp-home-hero{min-height:390px}.sp-home-hero-content{padding:34px 28px;max-width:67%}.sp-home-hero-image{object-position:60% center}.sp-home-hero-content h1{font-size:2.7rem}}
@media(max-width:599px){.sp-home-hero{min-height:420px;margin-top:16px!important}.sp-home-hero-content{padding:30px 22px;max-width:100%;width:100%}.sp-home-hero::after{background:linear-gradient(90deg,rgba(248,252,255,.94),rgba(248,252,255,.77) 48%,rgba(248,252,255,.17))}.sp-home-hero-image{object-position:65% center;opacity:.75}.sp-home-hero-content h1{font-size:2.65rem}.sp-home-hero-content>p:not(.sp-eyebrow){max-width:240px;font-size:.9375rem}.sp-home-hero-content .wp-block-buttons{flex-wrap:nowrap;gap:8px}.sp-home-hero-content .wp-block-button__link{padding:12px 13px;font-size:.8125rem;white-space:nowrap}}
.sp-collection .sp-card-actions button:disabled{display:flex;align-items:center;justify-content:center;min-height:42px;flex:1;padding:10px 6px;border:1px solid #dce8ee;border-radius:6px;background:#f5f9fc;color:#708798;font:inherit;font-size:.8125rem;cursor:default}
.sp-collection .sp-card-actions:not(.sp-card-actions-single) a{flex-direction:column;gap:3px}.sp-collection .sp-pack-amount{font-size:.76rem;font-weight:500}.sp-collection .sp-pack-saving{font-size:.68rem;font-weight:500;opacity:.85}

/* Desktop homepage uses the viewport; copy remains a readable line length. */
@media (min-width: 1024px) {
  body.home { --sp-home-gutter: clamp(32px, 4vw, 96px); --sp-home-header-height: 160px; }
  body.home.admin-bar { --sp-home-admin-height: 32px; }
  body.home .sp-home { padding-inline: 0; }
  body.home .sp-home > .sp-home-hero {
    width: 100%; max-width: none; margin: 0 !important; border: 0; border-radius: 0;
    min-height: max(520px, calc(100vh - var(--sp-home-header-height) - var(--sp-home-admin-height, 0px)));
    min-height: max(520px, calc(100svh - var(--sp-home-header-height) - var(--sp-home-admin-height, 0px)));
  }
  body.home .sp-home-hero-content {
    width: 56%; max-width: 56%; padding: 64px var(--sp-home-gutter);
  }
  body.home .sp-home-hero-content h1 { font-size: clamp(3.5rem, 5vw, 6.5rem); }
  body.home .sp-home-hero-content > p:not(.sp-eyebrow) { max-width: 28rem; font-size: 1.125rem; }
  body.home .sp-home-hero-image { object-position: center; }
  body.home .sp-home > .alignwide:not(.sp-home-hero),
  body.home .sp-header-inner { width: calc(100% - 2 * var(--sp-home-gutter)); max-width: none; }
  body.home .sp-research-bar .sp-header-notices { max-width: none; width: calc(100% - 2 * var(--sp-home-gutter)); }
  body.home .sp-home > .sp-store-intro { margin-top: 28px; }
}
@media (min-width: 1024px) and (max-width: 1100px) {
  body.home { --sp-home-header-height: 144px; }
}

