/** Shopify CDN: Minification failed

Line 168:0 Unexpected "}"

**/
@media only screen and (max-width: 767px) {
  .variations .product-form__input--color--xlarge input[type=radio] + label {
    width: 58px !important;
    height: 58px !important;
  }

  /* Reduce product title size on mobile (34px -> 20px) */
  .thb-product-detail .product-title {
    font-size: calc(var(--font-heading-scale) * 1.25rem) !important;
    line-height: calc(var(--font-heading-line-height-scale) * 1.5625rem) !important;
  }
}

/* ---- BEGIN: product card title truncation (single line + ellipsis)
   Hard character cap applied in Liquid (snippets/product-card.liquid):
     - Mobile: 22 chars  (e.g. "Stride – Lightweight...")
     - Desktop: 38 chars (e.g. "Stride – Lightweight & Breathable Sh...")
   Two <span> versions are rendered; CSS hides the wrong one per viewport.
   Line-clamp:1 stays as a safety net so anything that still doesn't fit
   in the card track gets visually clipped too.

   To change the limits: edit the two `truncate:` numbers in
   snippets/product-card.liquid (the line that renders .product-card-title).
   To revert entirely: delete the rule between BEGIN/END markers below
   AND restore the original line in product-card.liquid (single
   {{ product_card_product.title }} render with no spans).
   ---- */
.product-card .product-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  width: 100%;
}

/* Show mobile-truncated title under 768px, desktop-truncated above. */
.product-card .product-card-title__mobile {
  display: inline;
}
.product-card .product-card-title__desktop {
  display: none;
}
@media only screen and (min-width: 768px) {
  .product-card .product-card-title__mobile {
    display: none;
  }
  .product-card .product-card-title__desktop {
    display: inline;
  }
}
/* ---- END: product card title truncation ---- */

/* ──────────────────────────────────────────────────────────────────
   OBF sticky ATC — desktop centering.
   product.css makes .product-add-to-cart-sticky--info `flex: 1 1 auto`
   so the title/price block stretches and pushes the variant dropdowns
   + Add-to-cart button to the far right edge of the 1280px row.
   On desktop we want the whole cluster (image | info | variants | btn)
   tucked toward the middle with tight, even spacing — like a pill.
   Mobile keeps its existing wrapped two-row layout untouched.
   ────────────────────────────────────────────────────────────────── */
@media only screen and (min-width: 768px) {
  body .product-add-to-cart-sticky--row {
    justify-content: center;
    gap: 18px;
    max-width: 980px;
  }
  body .product-add-to-cart-sticky--info {
    flex: 0 1 auto;
    max-width: 320px;
  }
  body .product-add-to-cart-sticky--actions {
    flex: 0 0 auto;
  }
}

/* ──────────────────────────────────────────────────────────────────
   OBF footer-group background fix.
   The footer-group stacks 4 sections (newsletter, custom-liquid HR,
   footer, single-image wordmark). Newsletter and footer carry their
   own dark backgrounds; the custom-liquid divider and the OnBarefoot
   wordmark image are transparent, so the white page background was
   bleeding through and creating two horizontal white bands.
   Painting the group wrapper dark lets the transparent sections
   inherit it visually — matches the live theme.
   ───────────────────────────────────────────────────────────────── */
.shopify-section-group-footer-group {
  background: var(--color-footer-bg, var(--color-accent, #24282b));
}

/* Body / wrapper: kill any top padding/margin that pushes content down */
  body,
  #wrapper {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Top bar — scrolling-text section in header-group */
  body .shopify-section.section-scrolling-text,
  body .shopify-section.section-scrolling-text > .row,
  body .shopify-section.section-scrolling-text > .row > .columns {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body .shopify-section.section-scrolling-text .scrolling-text {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Kill the 30px inner padding marquee theme adds. Targeting both
     direction-left and direction-right variants explicitly so we beat
     the inline #shopify-section-... .scrolling-text--inner.direction-left
     rule (specificity 1,2,0 — beat with !important). */
  body .shopify-section.section-scrolling-text .scrolling-text--inner,
  body .shopify-section.section-scrolling-text .scrolling-text--inner.direction-left,
  body .shopify-section.section-scrolling-text .scrolling-text--inner.direction-right {
    padding: 6px 0 !important;
    margin: 0 !important;
  }

  /* Announcement bar (in case it ever gets enabled) */
  body .shopify-section.announcement-bar-section,
  body .shopify-section.announcement-bar-section > .row,
  body .shopify-section.announcement-bar-section .announcement-bar,
  body .shopify-section.announcement-bar-section .announcement-bar--inner {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  /* Header — force edge-to-edge */
  body .shopify-section.header-section,
  body theme-header,
  body theme-header .header,
  body theme-header .header--inner {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sticky add-to-cart bar on PDP */
  body .product-add-to-cart-sticky {
    border-radius: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body .product-add-to-cart-sticky--row {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   OBF mobile fixes — final hammer.
   1. Zero ALL margin/padding on html/body/wrapper (kill top gap).
   2. Force scrolling-text + announcement-bar edge-to-edge.
   3. Force header (theme-header) edge-to-edge.
   4. Force sticky ATC edge-to-edge with viewport-anchor positioning.
   ────────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 767px) {
  html, body, #wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* Direct children of <body> and #wrapper — kill side margins */
  body > *, #wrapper > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Top scrolling-text section — every nested wrapper */
  body .shopify-section.section-scrolling-text,
  body .shopify-section.section-scrolling-text > .row,
  body .shopify-section.section-scrolling-text > .row > .columns,
  body .shopify-section.section-scrolling-text .scrolling-text,
  body .shopify-section.section-scrolling-text .scrolling-text--inner {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  /* Restore minimal vertical padding on the inner so text doesn't touch edges */
  body .shopify-section.section-scrolling-text .scrolling-text--inner,
  body .shopify-section.section-scrolling-text .scrolling-text--inner.direction-left,
  body .shopify-section.section-scrolling-text .scrolling-text--inner.direction-right {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Announcement bar variant */
  body .shopify-section.announcement-bar-section,
  body .shopify-section.announcement-bar-section > *,
  body .shopify-section.announcement-bar-section .announcement-bar,
  body .shopify-section.announcement-bar-section .announcement-bar--inner {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }

  /* Header — kill section margin above it AND any internal width constraint */
  body .shopify-section.header-section,
  body .shopify-section-group-header-group,
  body theme-header,
  body theme-header.header,
  body theme-header .header--inner {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Sticky ATC — pin to viewport with full width */
  product-add-to-cart-sticky,
  body .product-add-to-cart-sticky,
  body product-add-to-cart-sticky.product-add-to-cart-sticky {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  body .product-add-to-cart-sticky--row {
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   OBF horizontal-overflow clamp — desktop fix (BUG-001 / BUG-002).
   The mobile media query above already clamps overflow-x on
   html/body/#wrapper, but desktop/laptop had NO such guard — so a few
   px of baseline overflow (full-bleed 100vw / GemPages sections; on
   Windows the ~17px scrollbar makes 100vw exceed the usable width)
   let the whole document scroll sideways via Shift+scroll or when the
   Women mega-menu is open, exposing white slack and shifting the page.
   `overflow-x: clip` stops horizontal scroll at ALL viewports WITHOUT
   creating a scroll container, so the sticky header and the
   viewport-width Women mega-menu keep working (unlike `overflow-x:
   hidden`, which forces overflow-y to compute as `auto` and can break
   position: sticky). Vertical scrolling is unaffected.
   To revert: delete this block.
   ────────────────────────────────────────────────────────────────── */
html, body {
  overflow-x: clip !important;
}