/** 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;
  }
}