/** Shopify CDN: Minification failed

Line 864:40 Unexpected "*"
Line 865:4 Expected identifier but found "%"
Line 867:13 Unexpected "/"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:nebbia-category-rail (INDEX:37) */
/* ==========================================================================
   NEBBIA · Gender-switch category rail — ported from _popular-switch.scss.
   Reused for both "Shop by category" and "Shop by activity" on the homepage:
   add two instances of this section with different tile blocks.
   ========================================================================== */
.nb-switch {
  display: inline-flex; border: 1px solid var(--nb-grey-15); border-radius: var(--nb-radius-pill);
  padding: 4px; gap: 2px; background: var(--nb-white); flex: 0 0 auto;
}
.nb-switch__seg {
  appearance: none; border: 0; cursor: pointer; background: transparent;
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-grey-50);
  padding: 11px 30px; border-radius: var(--nb-radius-pill); line-height: 1;
  transition: color var(--nb-dur) ease, background var(--nb-dur) ease;
}
.nb-switch__seg:hover { color: var(--nb-black); }
.nb-switch__seg.is-active { background: var(--nb-black); color: var(--nb-white); }

.nb-poptiles {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 38vw, 560px);
  gap: 2px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-inline: calc(-1 * var(--nb-container-pad)); padding-inline: var(--nb-container-pad);
  cursor: grab;
}
.nb-poptiles::-webkit-scrollbar { display: none; }
.nb-poptiles.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.nb-poptile { position: relative; display: flex; flex-direction: column; text-decoration: none; background: var(--nb-white); color: var(--nb-black); scroll-snap-align: start; }
.nb-poptile__media { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--nb-grey-web); }
.nb-poptile__media img, .nb-poptile__media .nb-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nb-poptile:hover .nb-poptile__media img { transform: scale(1.04); transition: transform 700ms var(--nb-ease); }
.nb-poptile__name {
  margin: 0; padding: var(--nb-space-3) var(--nb-space-3) var(--nb-space-5);
  display: flex; align-items: center; gap: 9px;
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-black);
}
.nb-poptile__name .arr { opacity: 0; transform: translateX(-6px); transition: opacity var(--nb-dur) ease, transform var(--nb-dur) var(--nb-ease); }
.nb-poptile:hover .nb-poptile__name .arr { opacity: 1; transform: none; }

@media (max-width: 600px) {
  .nb-poptiles {
    grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 2px; overflow: visible;
    scroll-snap-type: none; padding-inline: 0; cursor: default;
  }
  .nb-poptile__media { aspect-ratio: 3/4; }
}
/* END_SECTION:nebbia-category-rail */

/* START_SECTION:nebbia-contact (INDEX:38) */
/* ==========================================================================
   NEBBIA · Contact page section. Banner is copy-pasted from nebbia-faq.liquid
   on purpose (same black/red/white hero language, same full-bleed trick via
   negative margins) so the FAQ, Size Guide and Contact pages all open with
   an identical header treatment. Below that: a two-column layout — the
   native Shopify contact form on the left, a block-based "get in touch"
   list on the right (address/email/phone/etc, editable with no code).
   ========================================================================== */
.nb-contact__banner {
  background: var(--nb-black);
  color: var(--nb-white);
  text-align: center;
  padding: var(--nb-space-8) var(--nb-container-pad) var(--nb-space-7);
  margin: calc(-1 * var(--nb-space-8)) calc(-1 * var(--nb-container-pad)) var(--nb-space-7);
}
.nb-contact__kicker {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--nb-red);
  margin: 0 0 10px;
}
.nb-contact__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nb-red); flex: 0 0 auto; }
.nb-contact__title {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy);
  font-size: clamp(24px, 3vw, 34px); letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
.nb-contact__bar { width: 40px; height: 3px; background: var(--nb-red); margin: 18px auto 0; }
.nb-contact__intro {
  max-width: 560px; margin: var(--nb-space-4) auto 0;
  font-family: var(--nb-font); font-weight: var(--nb-w-regular); font-size: 14px;
  line-height: 1.7; color: var(--nb-grey-15);
}
.nb-contact__intro p { margin: 0; }

.nb-contact__grid {
  /* Columns are sized to their actual content (form maxes out at 480px,
     see .nb-contact__form below; info list doesn't need much more than
     that) rather than splitting the full 1440px container by fr-unit
     proportion -- fr columns were each stretching far past their content,
     which is what was pushing the two columns apart on wide screens.
     justify-content: center then centers that compact two-column unit
     within the section (more reliable cross-browser than sizing the grid
     itself with width: fit-content, which Safari was computing too wide --
     leaving the block hugging the left instead of landing on-center). */
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 360px); gap: var(--nb-space-7);
  align-items: start; justify-content: center; max-width: var(--nb-container); margin: 0 auto;
}
.nb-contact__col-heading {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: 15px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--nb-white);
  margin: 0 0 var(--nb-space-5);
}

/* -- Form column ---------------------------------------------------------- */
.nb-contact__form { display: flex; flex-direction: column; gap: var(--nb-space-4); max-width: 480px; }
.nb-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-4); }
.nb-contact__field { display: flex; flex-direction: column; gap: 6px; }
.nb-contact__label {
  font-family: var(--nb-font); font-weight: var(--nb-w-medium); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.nb-contact__optional { text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, 0.35); font-weight: var(--nb-w-regular); }
.nb-contact__input {
  width: 100%; height: var(--nb-control-h); padding: 0 16px; box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--nb-radius-md); color: var(--nb-white); font-family: inherit;
  font-size: 14px; outline: none;
  transition: border-color var(--nb-dur) ease, background var(--nb-dur) ease;
}
.nb-contact__input::placeholder { color: rgba(255, 255, 255, 0.5); }
.nb-contact__input:focus { border-color: var(--nb-white); background: rgba(255, 255, 255, 0.1); }
.nb-contact__input.has-error, .nb-contact__input[aria-invalid='true'] { border-color: var(--nb-red); }
.nb-contact__textarea { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.nb-contact__field-error { font-size: 11px; color: var(--nb-red); }
.nb-contact__submit { align-self: flex-start; margin-top: var(--nb-space-2); }
.nb-contact__msg {
  padding: var(--nb-space-4); border: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid var(--nb-red); border-radius: var(--nb-radius-md);
  font-family: var(--nb-font); font-size: 13px; line-height: 1.6; color: var(--nb-white);
  margin: 0;
}

/* -- Info column ------------------------------------------------------------ */
.nb-contact__info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nb-space-5); }
.nb-contact__info-item { display: flex; gap: var(--nb-space-3); align-items: flex-start; }
.nb-contact__info-icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--nb-red); margin-top: 2px; }
.nb-contact__info-icon svg { width: 100%; height: 100%; display: block; }
.nb-contact__info-copy { display: flex; flex-direction: column; gap: 4px; }
.nb-contact__info-label {
  font-family: var(--nb-font); font-weight: var(--nb-w-medium); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5);
}
.nb-contact__info-value {
  font-family: var(--nb-font); font-weight: var(--nb-w-light); font-size: 14px;
  line-height: 1.6; color: var(--nb-white); text-decoration: none;
}
a.nb-contact__info-value { transition: opacity var(--nb-dur) ease; }
a.nb-contact__info-value:hover { opacity: 0.7; text-decoration: underline; }

.nb-contact__map {
  margin-top: var(--nb-space-6); aspect-ratio: 16 / 9; border-radius: var(--nb-radius-md);
  overflow: hidden; background: rgba(255, 255, 255, 0.06);
}
.nb-contact__map iframe, .nb-contact__map img { width: 100%; height: 100%; border: 0; display: block; }

/* Bottom padding doubled to match nb-faq / nb-size-guide's own bump over
   the shared .nb-section default (see those files for the same comment). */
.nb-section.nb-contact { padding-bottom: calc(var(--nb-space-8) * 2); }

@media (max-width: 900px) {
  .nb-contact__grid { grid-template-columns: 1fr; justify-content: stretch; gap: var(--nb-space-8); }
  .nb-contact__form { max-width: none; }
}
@media (max-width: 680px) {
  .nb-contact__banner {
    margin: calc(-1 * var(--nb-space-6)) calc(-1 * var(--nb-container-pad)) var(--nb-space-6);
    padding: var(--nb-space-6) var(--nb-container-pad) var(--nb-space-5);
  }
  .nb-section.nb-contact { padding-bottom: calc(var(--nb-space-6) * 2); }
}
@media (max-width: 480px) {
  .nb-contact__row { grid-template-columns: 1fr; }
  .nb-contact__submit { width: 100%; }
}
/* END_SECTION:nebbia-contact */

/* START_SECTION:nebbia-faq (INDEX:39) */
/* ==========================================================================
   NEBBIA · FAQ page section. Banner mirrors the black/red/white hero
   language used elsewhere (nebbia-hero.liquid's kicker dot + heavy
   uppercase title) but is self-contained here rather than sharing hero
   markup, since this section has no media layer. Body text is white/
   translucent-white to match the site-wide black page background (Theme
   settings > Colors); category headings use the same red-left-border
   treatment as the comparison mockup shown to Kendra.
   ========================================================================== */
.nb-faq__banner {
  background: var(--nb-black);
  color: var(--nb-white);
  text-align: center;
  padding: var(--nb-space-8) var(--nb-container-pad) var(--nb-space-7);
  margin: calc(-1 * var(--nb-space-8)) calc(-1 * var(--nb-container-pad)) var(--nb-space-7);
}
.nb-faq__kicker {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--nb-red);
  margin: 0 0 10px;
}
.nb-faq__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nb-red); flex: 0 0 auto; }
.nb-faq__title {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy);
  font-size: clamp(24px, 3vw, 34px); letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
.nb-faq__bar { width: 40px; height: 3px; background: var(--nb-red); margin: 18px auto 0; }
.nb-faq__intro {
  max-width: 560px; margin: var(--nb-space-4) auto 0;
  font-family: var(--nb-font); font-weight: var(--nb-w-regular); font-size: 14px;
  line-height: 1.7; color: var(--nb-grey-15);
}
.nb-faq__intro p { margin: 0; }

.nb-faq__body { max-width: 680px; margin: 0 auto; }
.nb-faq__category {
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 16px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-white);
  border-left: 3px solid var(--nb-red); padding-left: 10px;
  margin: var(--nb-space-6) 0 var(--nb-space-2);
}
.nb-faq__category:first-child { margin-top: 0; }

.nb-faq__item { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.nb-faq__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.nb-faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--nb-space-4);
  padding: var(--nb-space-4) 2px;
  font-family: var(--nb-font); font-weight: var(--nb-w-regular); font-size: 14px;
  color: var(--nb-white);
  transition: opacity var(--nb-dur-fast) ease;
}
.nb-faq__q::-webkit-details-marker { display: none; }
.nb-faq__q:hover { opacity: 0.7; }
.nb-faq__q:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nb-focus-ring, rgba(14,15,17,0.18)); }
.nb-faq__icon {
  position: relative; flex: 0 0 auto; width: 16px; height: 16px;
  color: var(--nb-red); font-size: 16px; line-height: 1; font-weight: var(--nb-w-bold);
}
.nb-faq__icon-plus, .nb-faq__icon-minus {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.nb-faq__icon-minus { opacity: 0; }
.nb-faq__item[open] .nb-faq__icon-plus { opacity: 0; }
.nb-faq__item[open] .nb-faq__icon-minus { opacity: 1; }
.nb-faq__a {
  padding: 0 26px var(--nb-space-4) 2px;
  font-family: var(--nb-font); font-weight: var(--nb-w-light); font-size: 13.5px;
  line-height: 1.7; color: rgba(255, 255, 255, 0.6);
}
.nb-faq__a p { margin: 0 0 10px; }
.nb-faq__a p:last-child { margin-bottom: 0; }
.nb-faq__a a { color: var(--nb-white); }

.nb-faq__empty { color: rgba(255, 255, 255, 0.5); font-size: 14px; padding: var(--nb-space-4) 0; }
.nb-faq__cta { text-align: center; margin-top: var(--nb-space-7); }
.nb-faq__cta .nb-btn--ghost { color: var(--nb-white); border-color: var(--nb-white); }

/* Bottom padding doubled per Kendra's request — .nb-section (nebbia-
   foundation.css) sets padding-bottom: var(--nb-space-8) on every side
   equally; .nb-section.nb-faq (both classes, so it safely outranks the
   shared .nb-section rule regardless of stylesheet load order) bumps
   just the bottom. */
.nb-section.nb-faq { padding-bottom: calc(var(--nb-space-8) * 2); }

@media (max-width: 680px) {
  .nb-faq__banner {
    margin: calc(-1 * var(--nb-space-6)) calc(-1 * var(--nb-container-pad)) var(--nb-space-6);
    padding: var(--nb-space-6) var(--nb-container-pad) var(--nb-space-5);
  }
  .nb-section.nb-faq { padding-bottom: calc(var(--nb-space-6) * 2); }
}
/* END_SECTION:nebbia-faq */

/* START_SECTION:nebbia-footer (INDEX:40) */
/* NEBBIA · Footer — ported from _footer.scss */
.nb-footer { background: var(--nb-black); color: var(--nb-white); position: relative; overflow: hidden; border-top: 4px solid var(--nb-red); }
.nb-footer__inner { max-width: var(--nb-container); margin: 0 auto; padding: var(--nb-space-8) var(--nb-container-pad) var(--nb-space-6); }
.nb-footer__top {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--nb-space-6);
  padding-bottom: var(--nb-space-7); border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nb-footer__brand { display: flex; flex-direction: column; gap: var(--nb-space-4); max-width: 30ch; }
.nb-footer__logo { height: 20px; width: auto; align-self: flex-start; }
.nb-footer__logo-text { font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; }
.nb-footer__tag { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; }
.nb-footer__socials { display: flex; gap: 10px; }
.nb-footer__social {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  display: inline-grid; place-items: center; color: var(--nb-white); font-size: 11px; letter-spacing: 0.04em;
  text-decoration: none; transition: background var(--nb-dur) ease, transform var(--nb-dur-fast) ease, border-color var(--nb-dur) ease;
}
.nb-footer__social:hover { background: var(--nb-white); color: var(--nb-black); border-color: var(--nb-white); transform: translateY(-2px); }
.nb-footer-col__head { font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-white); margin: 0 0 var(--nb-space-4); }
.nb-footer-col__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nb-footer-col__links a { color: rgba(255,255,255,0.62); text-decoration: none; font-size: 13px; font-weight: var(--nb-w-light); letter-spacing: 0.01em; transition: color var(--nb-dur-fast) ease; }
.nb-footer-col__links a:hover { color: var(--nb-white); }
.nb-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--nb-space-4); padding-top: var(--nb-space-5); flex-wrap: wrap; }
.nb-footer__bottom-left { display: flex; align-items: center; gap: var(--nb-space-4); flex-wrap: wrap; }
.nb-footer__pay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nb-footer__pay-icon { height: 24px; width: auto; border-radius: var(--nb-radius-sm); }
.nb-footer__legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); }
.nb-footer__legal a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color var(--nb-dur-fast) ease; }
.nb-footer__legal a:hover { color: var(--nb-white); }
.nb-footer__copy { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.12em; }

@media (max-width: 1024px) {
  .nb-footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .nb-footer__brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .nb-footer__top { grid-template-columns: 1fr 1fr; gap: var(--nb-space-6) var(--nb-space-5); }
  .nb-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* END_SECTION:nebbia-footer */

/* START_SECTION:nebbia-header (INDEX:41) */
/* ==========================================================================
   NEBBIA · Header — logo, two-column mega menu (Collections | Categories),
   transparent-over-hero on the homepage with a solid state after scroll.
   Search/account/cart reuse Dawn's own icon snippets; the cart icon links
   straight to the cart page (no slide-out drawer yet — that's a bigger
   integration with Dawn's cart-notification JS, flagged as a follow-up).
   ========================================================================== */
.nb-header {
  position: relative; z-index: 30; width: 100%;
  background: var(--nb-black); color: var(--nb-white);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nb-header__inner {
  width: 100%;
  padding: 0 var(--nb-container-pad);
  /* Was 68px — measured against the real nebbia.fitness header (same-scale
     screenshot comparison), theirs sits closer to 80-84px tall, which is what
     gives the logo/nav/icons their more generous vertical breathing room.
     Bumping this up rather than adding top/bottom padding, since everything
     inside is vertically centered off this height. */
  height: 80px; display: flex; align-items: center; gap: var(--nb-space-6);
}
.nb-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; color: currentColor; text-decoration: none; }
.nb-header__logo-img { display: block; width: auto; filter: brightness(0) invert(1); }
/* Used in the mobile-nav drawer, which has a WHITE background -- skips the
   force-solid-white filter above so the logo shows in its real colors
   instead of disappearing into the drawer's own background. */
.nb-header__logo-img--natural { filter: none; }
/* Optional mobile-only logo (nb-header__logo--mobile) is only ever present
   in the markup when a mobile logo is uploaded in theme settings, so it's
   hidden by default and only shown -- in place of the regular desktop
   logo -- once the header switches to its mobile layout below. */
.nb-header__logo--mobile { display: none; }
.nb-header__logo-text {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: 18px;
  letter-spacing: 0.04em; text-transform: uppercase; color: currentColor;
}

.nb-header__burger {
  display: none; flex: 0 0 auto; width: 32px; height: 32px; padding: 0;
  background: none; border: 0; cursor: pointer; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.nb-header__burger span { display: block; width: 20px; height: 1.5px; background: currentColor; }

.nb-header__nav { display: flex; align-items: center; gap: var(--nb-space-5); flex: 1 1 auto; }
.nb-header__navitem { position: relative; }
.nb-header__navlink {
  display: inline-flex; align-items: center; height: 68px;
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: currentColor; text-decoration: none;
}

.nb-header__mega {
  position: absolute; top: 100%; left: 0; z-index: 5;
  min-width: 420px; background: var(--nb-white); color: var(--nb-black);
  border: 1px solid var(--nb-grey-15); border-top: none; box-shadow: var(--nb-shadow-lg, 0 18px 36px rgba(0,0,0,0.14));
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--nb-dur) ease, transform var(--nb-dur) ease, visibility var(--nb-dur);
}
.nb-header__navitem:hover .nb-header__mega,
.nb-header__navitem:focus-within .nb-header__mega,
.nb-header__navitem.is-open .nb-header__mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nb-header__mega-inner { display: flex; gap: var(--nb-space-7); padding: var(--nb-space-6); }
.nb-header__mega-head {
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--nb-grey-50); margin: 0 0 var(--nb-space-3);
}
.nb-header__mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nb-header__mega-list a {
  font-size: 13.5px; color: var(--nb-black); text-decoration: none;
  transition: opacity var(--nb-dur-fast) ease;
}
.nb-header__mega-list a:hover { opacity: 0.6; }

.nb-header__scrim {
  position: fixed; inset: 68px 0 0 0; z-index: 4; background: rgba(14,15,17,0.22);
  opacity: 0; visibility: hidden; transition: opacity var(--nb-dur) ease, visibility var(--nb-dur);
  pointer-events: none;
}
.nb-header:has(.nb-header__navitem:hover) .nb-header__scrim,
.nb-header:has(.nb-header__navitem:focus-within) .nb-header__scrim,
.nb-header:has(.nb-header__navitem.is-open) .nb-header__scrim {
  opacity: 1; visibility: visible;
}

.nb-header__actions { display: flex; align-items: center; gap: var(--nb-space-4); flex: 0 0 auto; margin-left: auto; }
.nb-header__icon { position: relative; display: inline-flex; color: currentColor; text-decoration: none; }
.nb-header__icon svg { width: 19px; height: 19px; display: block; }
.nb-header__cart-count {
  position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--nb-red); color: var(--nb-white);
  font-size: 10px; font-weight: var(--nb-w-bold); display: inline-flex; align-items: center; justify-content: center;
}
.nb-header__cart-count[hidden] { display: none; }

/* Live search dropdown. <details-modal>/<details>/<summary> native semantics
   handle show/hide (no [open] gate needed here) — this CSS only positions
   and skins the panel once it's visible. Anchored off .nb-header itself
   (already position: relative, above), not Dawn's .header__search, since
   Dawn's positioning rules are written against ancestor classes this header
   doesn't have. */
/* display:inline-flex on both the custom element and <details> (not just the
   <summary>) makes each hug the visible icon's exact 19px box — without this,
   <details>'s own box comes out a few px taller than its <summary> (a browser
   quirk with the hidden panel content living behind it), which nudges this
   icon a couple pixels above the plain <a> icons it sits next to in the
   flex row. */
.nb-search { position: static; display: inline-flex; align-items: center; }
.nb-search details { display: inline-flex; align-items: center; }
.nb-search__toggle { list-style: none; cursor: pointer; }
.nb-search__toggle::-webkit-details-marker { display: none; }
.nb-search__icon { position: relative; display: inline-flex; }
.nb-search__icon--close { display: none; }
.nb-search__toggle svg { width: 19px; height: 19px; display: block; }
.nb-search details[open] .nb-search__icon--search { display: none; }
.nb-search details[open] .nb-search__icon--close { display: inline-flex; }

.nb-search-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
}
.nb-search-panel__overlay {
  position: fixed; inset: 80px 0 0 0; background: rgba(0, 0, 0, 0.5); z-index: 1;
}
.nb-search-panel__inner {
  position: relative; z-index: 2;
  background: var(--nb-black); color: var(--nb-white);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--nb-space-6) var(--nb-container-pad) var(--nb-space-7);
}
.nb-search-panel__field {
  position: relative; display: flex; align-items: center; gap: var(--nb-space-3);
  max-width: 880px; margin: 0 auto;
}
.nb-search-panel__input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0; box-shadow: none;
  color: var(--nb-white); font-family: var(--nb-font); font-weight: var(--nb-w-light);
  font-size: 20px; padding: 10px 2px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.nb-search-panel__input::placeholder { color: rgba(255, 255, 255, 0.4); }
.nb-search-panel__input:focus { border-bottom-color: var(--nb-white); outline: none; box-shadow: none; }
.nb-search-panel__input::-webkit-search-decoration,
.nb-search-panel__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nb-search-panel__reset,
.nb-search-panel__submit,
.nb-search-panel__close {
  flex: 0 0 auto; background: none; border: 0; padding: 4px; margin: 0;
  color: var(--nb-white); cursor: pointer; display: inline-flex;
}
.nb-search-panel__reset svg,
.nb-search-panel__submit svg { width: 18px; height: 18px; display: block; }
.nb-search-panel__reset.hidden { display: none; }
.nb-search-panel__close {
  position: absolute; top: var(--nb-space-6); right: var(--nb-container-pad);
}
.nb-search-panel__close svg { width: 20px; height: 20px; display: block; }

/* Results list: keep Dawn's component-predictive-search.css show/hide logic
   (predictive-search[open]/[loading] .predictive-search { display: block })
   and its item/heading styling (already dark-mode-safe via --color-*
   variables), but neutralize its own absolute-positioned "popup" box so the
   results just flow inside our panel instead of floating as a second card. */
.nb-search-panel__results {
  position: static !important; width: auto !important; left: auto !important; top: auto !important;
  max-width: 880px; margin: var(--nb-space-5) auto 0;
  max-height: 55vh; overflow-y: auto; overflow-x: hidden;
  background: transparent !important; border: none !important; box-shadow: none !important;
  /* Dawn's own popup only ever needed overflow-y, so it never had to think
     about overflow-x — but setting just overflow-y makes browsers treat
     overflow-x as "auto" too (spec behavior), and one of Dawn's own icons
     (the arrow on "Search for ...") runs a few px past our narrower panel,
     which was popping a horizontal scrollbar and clipping it. overflow-x:
     hidden here removes that. The rules below re-skin the vertical scrollbar
     itself so it reads as part of the dark panel instead of a stray light-
     grey system bar. */
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.nb-search-panel__results::-webkit-scrollbar { width: 6px; }
.nb-search-panel__results::-webkit-scrollbar-track { background: transparent; }
.nb-search-panel__results::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 3px; }
.nb-search-panel__results::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
.nb-search-panel__results .predictive-search__heading { margin-left: 0; margin-right: 0; }
.nb-search-panel__results .predictive-search__item,
.nb-search-panel__results .predictive-search__item--term { padding-left: 0; padding-right: 0; }
.nb-search-panel__results .price { color: var(--nb-red); }
/* Dawn always reserves a fixed 26.4rem-wide first column for the
   Suggestions group, assuming Products will sit beside it as a second
   column. When a search term (e.g. a common word) matches products but no
   query/collection suggestions, Dawn only renders ONE result-group — which
   is then both :first-child and :only-child — and its own :only-child rule
   (meant to let it fill the row) only resets flex-grow, not the leftover
   26.4rem flex-basis from the earlier :first-child rule, so it renders in a
   264px-wide column with a big empty gap beside it instead of using the
   full width. Forcing the basis to 100% here fixes that single-column case
   without touching the (correctly) fixed-width column in the normal
   two-column Suggestions + Products layout. */
.nb-search-panel__results .predictive-search__result-group:only-child {
  flex: 1 1 100% !important;
}
/* The "Search for ..." row's arrow icon (Dawn's .icon-arrow) renders a
   couple px larger than its own 20px .svg-wrapper box under our narrower
   panel, and with justify-content:space-between pushing it flush to the
   row's right edge, that overflow runs past the panel entirely. Forcing
   its real 14:10 viewBox size stops it overflowing (and stops it getting
   silently clipped by the results box's overflow-x: hidden above). */
.nb-search-panel__results .predictive-search__item--term .icon-arrow {
  width: 14px !important; height: 10px !important; margin-left: 0 !important;
}

@media (max-width: 680px) {
  .nb-search-panel__inner { padding: var(--nb-space-5) var(--nb-container-pad) var(--nb-space-6); }
  .nb-search-panel__close { top: var(--nb-space-5); }
}

/* Transparent-over-hero (homepage only): header floats out of flow, white on
   dark photo, then swaps to the normal solid header once scrolled past it. */
.nb-header--transparent {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
  transition: background var(--nb-dur) ease, border-color var(--nb-dur) ease, box-shadow var(--nb-dur) ease;
}
.nb-header--transparent .nb-header__mega { color: var(--nb-black); }
.nb-header--transparent.is-scrolled {
  position: fixed;
  background: var(--nb-black); border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 2px 14px rgba(0,0,0,0.3);
}

@media (max-width: 900px) {
  .nb-header__burger { display: inline-flex; }
  .nb-header__nav { display: none; }
  .nb-header__inner { gap: var(--nb-space-4); position: relative; }
  /* True horizontal centering on the header bar, independent of the
     burger's width vs. the search/account/cart cluster's width. A flex
     `margin: auto` only splits the space left over BETWEEN neighboring
     flex items, so it centers the logo relative to its siblings, not the
     bar itself -- unnoticeable with the old full wordmark, but the
     burger (~32px) and the icon cluster (~89px) are different enough
     widths that it visibly drags a small logo mark off to the left, which
     is exactly the "not centered" issue this fixes. Absolute + translateX
     centers on .nb-header__inner itself instead, regardless of what sits
     on either side. Scoped to .nb-header__inner .nb-header__logo (not the
     bare class) so the mobile nav drawer's own logo -- same class, a
     different flex row next to its close button -- is left alone. */
  .nb-header__inner .nb-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  /* Swap to the dedicated mobile logo, when one's set in theme settings.
     .nb-header__logo--desktop/--mobile only exist in the markup at all
     when section.settings.mobile_logo is uploaded -- with nothing
     uploaded there, .nb-header__logo--desktop is never added to the
     regular logo link, so this rule matches nothing and the header looks
     exactly as it did before. */
  .nb-header__logo--desktop { display: none; }
  .nb-header__logo--mobile { display: inline-flex; }

  /* MOBILE OPTIMIZATION: the burger and the search/account/cart icons had
     no padding, so their actual tap area was just the glyph itself (19px
     icons, a 32px burger) -- noticeably under the ~44px minimum comfortable
     thumb target. Padding + an equal negative margin grows the real hit
     area without changing how big anything looks or shifting the header's
     layout (the negative margin cancels the padding's effect on flex
     sizing, so the logo stays centered and nothing else moves). */
  .nb-header__burger { width: 44px; height: 44px; margin: -6px; }
  .nb-header__icon { padding: 12px; margin: -12px; }
}

/* Mobile off-canvas nav */
.nb-mobile-nav {
  position: fixed; inset: 0; z-index: 100; background: var(--nb-white); color: var(--nb-black);
  transform: translateX(-100%); transition: transform var(--nb-dur) var(--nb-ease);
  overflow-y: auto;
}
.nb-mobile-nav.is-open { transform: translateX(0); }
.nb-mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--nb-space-4) var(--nb-container-pad); border-bottom: 1px solid var(--nb-grey-15);
}
.nb-mobile-nav__close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: currentColor; }
.nb-mobile-nav__body { padding: var(--nb-space-4) var(--nb-container-pad) var(--nb-space-8); }
.nb-mobile-accordion { border-bottom: 1px solid var(--nb-grey-15); }
.nb-mobile-accordion summary {
  padding: 16px 2px; font-family: var(--nb-font); font-weight: var(--nb-w-bold);
  font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.nb-mobile-accordion__body { padding: 0 2px 18px; }
.nb-mobile-accordion__label {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nb-grey-50);
  margin: 14px 0 8px;
}
.nb-mobile-accordion__body ul { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nb-mobile-accordion__body a { color: var(--nb-black); text-decoration: none; font-size: 14px; }
.nb-mobile-nav__utility { list-style: none; margin: 18px 0 0; padding: 18px 2px 0; border-top: 1px solid var(--nb-grey-15); display: flex; flex-direction: column; gap: 16px; }
.nb-mobile-nav__utility a { color: var(--nb-black); text-decoration: none; font-size: 14px; font-weight: var(--nb-w-medium); }
/* END_SECTION:nebbia-header */

/* START_SECTION:nebbia-hero (INDEX:42) */
/* ==========================================================================
   NEBBIA · Hero — full-bleed photo, everything overlaid on top
   Matches the real nebbia.fitness campaign heroes (e.g. /primal): one
   background photo, cropped to fill (object-fit: cover), with a bottom
   gradient scrim and the kicker/heading/subheading/CTA rendered as real
   HTML on top — not baked into the image. That keeps the text crisp,
   responsive and editable from the theme editor for every future banner.

   Button colour: the primary CTA here is red — a deliberate, SCOPED
   exception matching NEBBIA's own hero styling (see their "Shop Primal"
   button). It's scoped to `.nb-hero__cta .nb-btn--primary` only, so the
   site-wide rule stays intact: every other `.nb-btn--primary` (product
   rails, newsletter, footer, etc.) is still black, and red elsewhere is
   still reserved for sale tags (.nb-tag--sale).
   ========================================================================== */
.nb-hero {
  position: relative;
  /* Was clamp(520px, 86svh, 880px) — on the real nebbia.fitness /primal page
     the hero photo runs edge-to-edge down to the very bottom of the browser
     viewport (no gap before whatever comes next). Comparing same-scale
     screenshots, our old 880px cap meant the hero fell noticeably short on
     any normal laptop/desktop screen, leaving a visible white gap below it.
     Bumping to ~100svh (with a generous max so it doesn't run away on very
     tall displays) matches that true full-bleed feel. */
  min-height: clamp(560px, 100svh, 1400px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: var(--nb-white);
  overflow: hidden;
  background: var(--nb-black);
}
.nb-hero--under-header {
  margin-top: calc(-1 * var(--header-h, 80px));
  min-height: clamp(620px, 100svh, 1400px);
}
.nb-hero__media,
.nb-hero__media img { position: absolute; inset: 0; z-index: 0; }
.nb-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nb-hero__img--placeholder { display: flex; }
.nb-hero__img--placeholder svg { width: 100%; height: 100%; }
.nb-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.22) 34%, rgba(0,0,0,0) 60%);
}

.nb-hero__overlay {
  position: relative; z-index: 2; width: 100%;
  max-width: 720px; margin: 0 auto;
  padding: 0 var(--nb-container-pad) clamp(48px, 8vw, 96px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.nb-hero__kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--nb-space-3);
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-white) !important;
}
.nb-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nb-red); flex: 0 0 auto; }
.nb-hero__title {
  font-family: var(--nb-font); font-weight: var(--nb-w-black);
  font-size: clamp(30px, 5.5vw, 68px); line-height: 0.98;
  letter-spacing: -0.02em; text-transform: uppercase; margin: 0;
  color: var(--nb-white) !important;
  overflow-wrap: normal; word-break: normal; hyphens: none;
}
.nb-hero__sub {
  margin: var(--nb-space-4) 0 0; max-width: 42ch;
  font-size: clamp(14px, 1vw, 16px); line-height: 1.55; font-weight: var(--nb-w-regular);
  color: rgba(255,255,255,0.86) !important; letter-spacing: 0.01em;
}
.nb-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nb-space-3); margin-top: var(--nb-space-5); }
/* The site-wide .nb-btn is 44px tall with 28px side padding — measured against
   the real nebbia.fitness hero (video frame comparison), their hero CTA pill
   is noticeably taller/rounder relative to its width. Scoped to the hero only
   (not touching .nb-btn globally, so every other button on the site — footer,
   product rails, newsletter — is unaffected) so this pill matches that chunkier
   proportion: taller, slightly less side padding, one notch up in type size. */
.nb-hero__cta .nb-btn { height: 52px; padding: 0 24px; font-size: 14px; }
.nb-hero__cta .nb-btn--primary {
  background: var(--nb-white); color: var(--nb-black);
  transition: background var(--nb-dur) ease, color var(--nb-dur) ease, transform var(--nb-dur-fast) ease;
}
.nb-hero__cta .nb-btn--primary:hover { background: var(--nb-red); color: var(--nb-white); }
.nb-hero__cta .nb-btn--glass-dark {
  transition: background var(--nb-dur) ease, border-color var(--nb-dur) ease, transform var(--nb-dur-fast) ease;
}
.nb-hero__cta .nb-btn--glass-dark:hover {
  background: rgba(14,15,17,0.5); border-color: rgba(255,255,255,0.5);
}

@media (max-width: 900px) {
  .nb-hero__overlay { max-width: 92%; }
}
@media (max-width: 560px) {
  .nb-hero, .nb-hero--under-header { min-height: 68svh; }
  .nb-hero__cta { flex-direction: column; align-items: stretch; width: 100%; }
  .nb-hero__cta .nb-btn { width: 100%; }
}
/* END_SECTION:nebbia-hero */

/* START_SECTION:nebbia-newsletter (INDEX:43) */
/* NEBBIA · Newsletter — ported from _newsletter.scss. Uses Shopify's native
   customer signup form (contact[tags]=newsletter) so it works out of the box;
   swap for a Klaviyo/Mailchimp embed later if you use one of those instead. */
.nb-newsletter { background: var(--nb-black); color: var(--nb-white); }
.nb-newsletter__inner {
  max-width: var(--nb-container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0;
  padding: 0 0 0 var(--nb-container-pad);
}
.nb-newsletter__copy {
  align-self: center; justify-self: center; max-width: 42ch;
  padding: var(--nb-space-7) var(--nb-space-6); display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--nb-space-3);
}
.nb-newsletter__kicker { font-family: var(--nb-font); font-weight: var(--nb-w-medium); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0; }
.nb-newsletter__title { font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: clamp(26px,3vw,42px); line-height: 0.98; letter-spacing: -0.015em; text-transform: uppercase; margin: 0; }
.nb-newsletter__text { max-width: 42ch; color: rgba(255,255,255,0.68); font-size: 14px; line-height: 1.55; margin: 0; }
.nb-newsletter__form { display: flex; gap: 10px; width: 100%; max-width: 460px; margin-top: var(--nb-space-3); flex-wrap: wrap; }
.nb-newsletter__input {
  flex: 1 1 auto; height: var(--nb-control-h, 44px); padding: 0 18px; box-sizing: border-box;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--nb-radius-md);
  color: var(--nb-white); font-family: inherit; font-size: 14px; outline: none;
  transition: border-color var(--nb-dur) ease, background var(--nb-dur) ease;
}
.nb-newsletter__input::placeholder { color: rgba(255,255,255,0.5); }
.nb-newsletter__input:focus { border-color: var(--nb-white); background: rgba(255,255,255,0.1); }
.nb-newsletter__submit { flex: 0 0 auto; }
.nb-newsletter__note { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0; }
.nb-newsletter__msg { min-height: 1em; font-size: 12px; letter-spacing: 0.02em; width: 100%; margin: 0; }
.nb-newsletter__msg.is-error, .nb-newsletter__msg.is-success { color: rgba(255,255,255,0.92); }
.nb-newsletter__media { position: relative; overflow: hidden; min-height: 300px; }
.nb-newsletter__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; filter: grayscale(1) contrast(1.04); }

@media (max-width: 760px) {
  .nb-newsletter__inner { grid-template-columns: 1fr; gap: 0; padding: 0 var(--nb-container-pad); }
  .nb-newsletter__copy { align-items: flex-start; padding: var(--nb-space-7) 0 var(--nb-space-6); order: 1; }
  .nb-newsletter__media { order: 0; min-height: 240px; margin: 0 calc(-1 * var(--nb-container-pad)); }
  .nb-newsletter__form { max-width: none; }
}
@media (max-width: 480px) {
  .nb-newsletter__form { flex-direction: column; }
  .nb-newsletter__submit { width: 100%; }
}
/* END_SECTION:nebbia-newsletter */

/* START_SECTION:nebbia-product-rail (INDEX:44) */
/* ==========================================================================
   NEBBIA · Product rail — ported from homepage/assets/scss/partials/
   _product-rail.scss. Product card: primary/hover image, title, color
   swatches (if a Color/Colour/Farba option exists), price, wishlist heart,
   and a quick-add size row wired to Shopify's real Cart AJAX API.

   One scoped simplification, flagged rather than silently missing:
   - Wishlist is localStorage-only (per browser) — no customer-account tie-in
     or a dedicated wishlist page yet.

   Color swatches use Shopify's native option-value swatch feature (Admin →
   product → Options → click a value → assign a color or image — no metafield
   or app needed) and are clickable: clicking one swaps the card photo to that
   color's own variant image (when one is set) and swaps which pre-rendered
   data-size-group is shown below, so quick-add always offers that color's
   actual sizes.

   Background: set directly here (var(--nb-black), same as sections/
   nebbia-hero.liquid already does) rather than via Dawn's Color scheme
   picker in the theme editor, per Kendra's call to leave that shared
   setting alone. The card title, active-swatch ring, "View all" link and
   section heading are all hardcoded black in the shared nb-product-card__*
   styles (nebbia-foundation.css) and .nb-btn--link/.nb-section-head__line
   above -- invisible against black -- so they're flipped to white here,
   scoped to .nb-section--rail-lead only. Same fix already shipped for the
   collection-page cards (nb-collection.css's .nb-dark-scheme rules); this
   is the homepage equivalent, just self-contained in this section's own
   stylesheet since nb-collection.css isn't (and shouldn't be) loaded here.
   ========================================================================== */
.nb-section--rail-lead { background: var(--nb-black); }
/* .nb-section-head__line's own base color in nebbia-foundation.css is now
   the red accent (#ee302d), not black -- already visible against this
   section's black background, so no override needed here any more. Left
   removed rather than kept-but-unused so it doesn't quietly win back over
   a future color change to the base rule. */
.nb-section--rail-lead .nb-btn--link { color: var(--nb-white); }
.nb-section--rail-lead .nb-btn--link::after { background: var(--nb-white); }
.nb-section--rail-lead .nb-product-card__name { color: var(--nb-white); }
.nb-section--rail-lead .nb-product-card__swatch--active { outline-color: var(--nb-white); }
.nb-rail { position: relative; }
.nb-rail__empty { color: var(--nb-grey-50); font-size: 14px; padding: var(--nb-space-4) 0; }
.nb-rail__viewport {
  display: grid; grid-auto-flow: column;
  /* Was minmax(192px, 1fr) — the 1fr let a single card stretch to fill the
     whole row when a collection only has a few products in it (e.g. right
     after an import, before it's fully stocked), and since the media above
     is a fixed 3:4 aspect ratio, that also blew the image up to thousands of
     pixels tall, pushing the title/price/quick-add way off-screen. A capped
     max keeps cards a consistent size regardless of how many products are in
     the collection — extra space next to a short rail is left empty instead
     of being force-fed into one giant card. */
  grid-auto-columns: minmax(192px, 220px);
  gap: var(--nb-space-2); overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-inline: calc(-1 * var(--nb-container-pad));
  padding-inline: var(--nb-container-pad); padding-bottom: var(--nb-space-2);
  cursor: grab;
}
.nb-rail__viewport::-webkit-scrollbar { display: none; }
.nb-rail__viewport > .nb-product-card { scroll-snap-align: start; }
.nb-rail__viewport img, .nb-rail__viewport a { -webkit-user-drag: none; user-select: none; }
.nb-rail__viewport.is-grabbing { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
@media (min-width: 1024px) {
  .nb-rail__viewport { grid-auto-columns: minmax(280px, 340px); }
}
.nb-rail__btn {
  width: 44px; height: 44px; border-radius: var(--nb-radius-pill);
  border: 1.5px solid var(--nb-grey-15); background: var(--nb-white); color: var(--nb-black);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 5;
  box-shadow: var(--nb-shadow-sm); transition: border-color var(--nb-dur) ease, opacity var(--nb-dur) ease;
}
.nb-rail__btn:hover { border-color: var(--nb-black); }
.nb-rail__btn[disabled] { opacity: 0; pointer-events: none; }
.nb-rail__btn--prev { left: 6px; }
.nb-rail__btn--next { right: 6px; }
@media (max-width: 1023px), (hover: none) { .nb-rail__btn { display: none; } }

/* NOTE: all .nb-product-card*/.nb-size-* rules used to live here, but
   {% stylesheet %} is SECTION-SCOPED in Shopify — it only loads on pages
   that render this exact section, so none of it was reaching the
   collection/search grid (snippets/nb-collection-card.liquid), which reuses
   the same card markup and class names. Moved to nebbia-foundation.css
   (loaded globally via layout/theme.liquid) so both the homepage rail and
   the collection/search pages get it. Keep any future card CSS changes in
   nebbia-foundation.css, not here. */
/* END_SECTION:nebbia-product-rail */

/* START_SECTION:nebbia-size-guide (INDEX:45) */
/* ==========================================================================
   NEBBIA Size Guide. Same black/red/white system as nebbia-faq.liquid's
   banner — kicker dot, heavy uppercase title, red bar. The compression
   tiers are the centerpiece: Kendra's recolored wordmark art sized big
   and stacked, editorial-poster style, rather than hiding them behind
   tabs like the reference site — a stronger visual moment, and the art
   already does the labeling so no redundant heading is needed per tier.
   ========================================================================== */
.nb-sizeguide__banner {
  background: var(--nb-black);
  color: var(--nb-white);
  text-align: center;
  padding: var(--nb-space-8) var(--nb-container-pad) var(--nb-space-7);
  margin: calc(-1 * var(--nb-space-8)) calc(-1 * var(--nb-container-pad)) var(--nb-space-8);
}
.nb-sizeguide__kicker {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 11px;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--nb-red);
  margin: 0 0 10px;
}
.nb-sizeguide__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nb-red); flex: 0 0 auto; }
.nb-sizeguide__title {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy);
  font-size: clamp(26px, 3.4vw, 38px); letter-spacing: 0.05em; text-transform: uppercase;
  margin: 0; text-wrap: balance;
}
.nb-sizeguide__bar { width: 40px; height: 3px; background: var(--nb-red); margin: 18px auto 0; }
.nb-sizeguide__intro {
  max-width: 560px; margin: var(--nb-space-4) auto 0;
  font-family: var(--nb-font); font-weight: var(--nb-w-regular); font-size: 14px;
  line-height: 1.7; color: var(--nb-grey-15);
}
.nb-sizeguide__intro p { margin: 0; }
.nb-sizeguide__intro-highlight {
  margin: var(--nb-space-3) 0 0;
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 13px;
  letter-spacing: 0.02em; color: var(--nb-red);
}

.nb-sizeguide__block { max-width: 900px; margin: 0 auto var(--nb-space-8); }
.nb-sizeguide__block--flush { max-width: none; }
.nb-sizeguide__h2 {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: 20px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--nb-white);
  text-align: center; margin: 0 0 var(--nb-space-5);
}
.nb-sizeguide__h2--left { text-align: left; margin-bottom: var(--nb-space-3); }
.nb-sizeguide__note {
  text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.55);
  margin: var(--nb-space-4) 0 0;
}
.nb-sizeguide__note strong { color: var(--nb-white); }

/* How to measure */
.nb-measure-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-4);
}
.nb-measure-item {
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--nb-radius-md);
  padding: var(--nb-space-4); display: flex; flex-direction: column; gap: 6px;
}
.nb-measure-item__label {
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--nb-red);
}
.nb-measure-item__desc {
  font-family: var(--nb-font); font-weight: var(--nb-w-regular); font-size: 13.5px;
  line-height: 1.6; color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 680px) {
  .nb-measure-grid { grid-template-columns: 1fr; }
}

/* Women's / Men's fit guidance */
.nb-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-7); }
.nb-fit-col__intro {
  font-family: var(--nb-font); font-size: 13.5px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.75); margin: 0 0 var(--nb-space-4);
}
.nb-fit-col__sub {
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--nb-white);
  margin: 0 0 var(--nb-space-2);
}
.nb-fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nb-fit-list li {
  font-family: var(--nb-font); font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.85); padding-left: 20px; position: relative;
}
.nb-fit-list li::before {
  content: '→'; position: absolute; left: 0; top: 0; color: var(--nb-red); font-weight: var(--nb-w-bold);
}
@media (max-width: 680px) {
  .nb-fit-grid { grid-template-columns: 1fr; gap: var(--nb-space-6); }
}

/* Compression & Fit Levels */
.nb-compression__head { max-width: 640px; margin: 0 auto var(--nb-space-7); padding: 0 var(--nb-container-pad); }
.nb-compression__intro {
  text-align: center; font-family: var(--nb-font); font-size: 13.5px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}
.nb-compression__intro p { margin: 0 0 8px; }
.nb-compression__intro p:last-child { margin-bottom: 0; }

.nb-tier {
  max-width: 960px; margin: 0 auto var(--nb-space-8);
  padding: 0 var(--nb-container-pad);
}
.nb-tier__art { text-align: center; margin-bottom: var(--nb-space-5); }
.nb-tier__img {
  width: 100%; max-width: 640px; height: auto; display: inline-block;
}
.nb-tier__art-placeholder {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: 48px;
  text-transform: uppercase; color: var(--nb-white); margin: 0;
}
.nb-tier__body {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--nb-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: var(--nb-space-5);
}
.nb-tier__desc p {
  font-family: var(--nb-font); font-size: 13.5px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.75); margin: 0 0 8px;
}
.nb-tier__desc p:last-child { margin-bottom: 0; }
.nb-tier__note { color: var(--nb-white) !important; font-weight: var(--nb-w-medium); }
.nb-tier__common-label {
  display: block; font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-red); margin-bottom: 8px;
}
.nb-tier__common-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nb-tier__common-list li {
  font-family: var(--nb-font); font-size: 13px; color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 680px) {
  .nb-tier__body { grid-template-columns: 1fr; gap: var(--nb-space-4); }
}

/* Between sizes */
.nb-between__intro {
  text-align: center; font-family: var(--nb-font); font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65); margin: 0 0 var(--nb-space-5);
}
.nb-between-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nb-space-4); }
.nb-between-card {
  border: 1.5px solid var(--nb-red); border-radius: var(--nb-radius-md);
  padding: var(--nb-space-5); text-align: center;
  display: flex; flex-direction: column; gap: var(--nb-space-2);
}
.nb-between-card__label {
  font-family: var(--nb-font); font-weight: var(--nb-w-medium); font-size: 12.5px;
  letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.7);
}
.nb-between-card__result {
  font-family: var(--nb-font); font-weight: var(--nb-w-heavy); font-size: 15px;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--nb-white);
}
@media (max-width: 680px) {
  .nb-between-grid { grid-template-columns: 1fr; }
}

/* Flagship */
.nb-flagship {
  border-left: 3px solid var(--nb-red); padding-left: var(--nb-space-5);
}
.nb-flagship__kicker {
  display: block; font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--nb-red); margin-bottom: var(--nb-space-2);
}
.nb-flagship__intro {
  font-family: var(--nb-font); font-size: 13.5px; line-height: 1.7;
  color: rgba(255, 255, 255, 0.75); margin: 0 0 var(--nb-space-3);
}
.nb-flagship__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nb-flagship__list li {
  font-family: var(--nb-font); font-size: 13px; color: rgba(255, 255, 255, 0.85);
  padding-left: 18px; position: relative;
}
.nb-flagship__list li::before { content: '—'; position: absolute; left: 0; color: var(--nb-red); }

/* Need help */
.nb-help { text-align: center; }
.nb-help__intro {
  max-width: 480px; margin: 0 auto var(--nb-space-4);
  font-family: var(--nb-font); font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.75);
}
.nb-help__contact {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: var(--nb-space-5);
}
.nb-help__link {
  font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 14px;
  color: var(--nb-white); text-decoration: underline;
}
.nb-help__store {
  font-family: var(--nb-font); font-size: 13px; color: rgba(255, 255, 255, 0.6);
}
.nb-help__cta { color: var(--nb-white); border-color: var(--nb-white); }
/* END_SECTION:nebbia-size-guide */

/* START_SECTION:nebbia-usp-bar (INDEX:46) */
/* NEBBIA · USP / trust bar — ported from _usp-bar.scss */
.nb-usp { background: var(--nb-black); color: var(--nb-white); }
.nb-usp__grid {
  max-width: var(--nb-container); margin: 0 auto; padding: var(--nb-space-7) var(--nb-container-pad);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--nb-space-5);
}
.nb-usp__item { display: flex; align-items: center; gap: 16px; }
.nb-usp__icon {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22); display: inline-grid; place-items: center;
  font-size: 20px; color: var(--nb-white);
}
.nb-usp__txt { display: flex; flex-direction: column; gap: 3px; }
.nb-usp__label { font-family: var(--nb-font); font-weight: var(--nb-w-bold); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; }
.nb-usp__sub { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.01em; line-height: 1.4; }
@media (max-width: 900px) { .nb-usp__grid { grid-template-columns: repeat(2, 1fr); gap: var(--nb-space-6) var(--nb-space-5); } }
@media (max-width: 480px) { .nb-usp__grid { grid-template-columns: 1fr; } }
/* END_SECTION:nebbia-usp-bar */