/* TPS: shared breadcrumb strip — match My Account (MU 1.0.27)
   Visual source of truth: .tps-account-breadcrumbs
   Also styles theme .woocommerce-breadcrumb / .breadcrumbs via .tps-breadcrumb
*/

:root {
  /* Site boxed content width — match Flatsome .container / header (one source of truth) */
  --tps-content-width: 1240px;
  --tps-breadcrumb-width: var(--tps-content-width);
  --tps-breadcrumb-green: #008b4b;
  --tps-breadcrumb-green-hover: #006b3a;
  --tps-breadcrumb-current: #1f2937;
  --tps-breadcrumb-sep: #9ca3af;
  --tps-breadcrumb-bg: #f3f4f6;
  --tps-breadcrumb-border: #e5e7eb;
}

/* —— Strip shell (account inject + theme nav) —— */
.tps-breadcrumb,
.tps-account-breadcrumbs {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px !important;
  /* !important beats Flatsome .breadcrumbs { padding: 0 } */
  padding: 8px 14px !important;
  background: var(--tps-breadcrumb-bg) !important;
  border: 1px solid var(--tps-breadcrumb-border) !important;
  border-radius: 10px !important;
  font-family: "Be Vietnam Pro", Montserrat, sans-serif;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tps-breadcrumb-current);
}

/* Theme breadcrumbs that JS marked — detailed rules below */

/* Theme nav: full-width strip on PDP (matches account); hug content on shop/category title row */
body.single-product nav.woocommerce-breadcrumb.tps-breadcrumb,
body.single-product nav.breadcrumbs.tps-breadcrumb {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Shop/category: account-style strip on the title inner (crumbs + result count) */
body.tax-product_cat .shop-page-title .page-title-inner,
body.woocommerce-shop .shop-page-title .page-title-inner,
body.post-type-archive-product .shop-page-title .page-title-inner {
  background: var(--tps-breadcrumb-bg) !important;
  border: 1px solid var(--tps-breadcrumb-border) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  min-height: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.tax-product_cat .shop-page-title,
body.woocommerce-shop .shop-page-title,
body.post-type-archive-product .shop-page-title {
  background: transparent !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 1279px) {
  body.tax-product_cat .shop-page-title,
  body.woocommerce-shop .shop-page-title,
  body.post-type-archive-product .shop-page-title {
    padding: 0 12px !important;
  }
}
/* Nav inside shop strip: no nested second box */
body.tax-product_cat nav.tps-breadcrumb,
body.woocommerce-shop nav.tps-breadcrumb,
body.post-type-archive-product nav.tps-breadcrumb {
  width: auto !important;
  max-width: 100% !important;
  display: inline-block !important;
  vertical-align: middle;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.archive:not(.tax-product_cat):not(.post-type-archive-product) nav.tps-breadcrumb,
body.single-post nav.tps-breadcrumb,
body.blog nav.tps-breadcrumb {
  width: 100% !important;
  max-width: var(--tps-breadcrumb-width) !important;
  box-sizing: border-box !important;
}

/* Beat Flatsome .breadcrumbs padding/margin resets */
nav.woocommerce-breadcrumb.tps-breadcrumb,
nav.breadcrumbs.tps-breadcrumb {
  padding: 8px 14px !important;
  margin: 0 0 12px !important;
  background: var(--tps-breadcrumb-bg) !important;
  border: 1px solid var(--tps-breadcrumb-border) !important;
  border-radius: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  font-size: 13px !important;
}

/* Account list layout (unchanged structure) */
.tps-account-breadcrumbs-list,
.tps-breadcrumb-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.tps-account-crumb,
.tps-account-crumb-sep,
.tps-breadcrumb-crumb,
.tps-breadcrumb-sep {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}

.tps-account-crumb-sep,
.tps-breadcrumb-sep,
.tps-breadcrumb .divider,
.woocommerce-breadcrumb.tps-breadcrumb .divider,
.breadcrumbs.tps-breadcrumb .divider {
  margin: 0 8px !important;
  color: var(--tps-breadcrumb-sep) !important;
  font-weight: 400 !important;
  user-select: none;
}

/* Links — shop green */
.tps-account-crumb-link,
.tps-breadcrumb a,
.tps-breadcrumb .tps-breadcrumb-link,
.woocommerce-breadcrumb.tps-breadcrumb a,
.breadcrumbs.tps-breadcrumb a,
.page-title .woocommerce-breadcrumb a,
.shop-page-title .woocommerce-breadcrumb a,
.product-page-title .woocommerce-breadcrumb a,
.page-title .breadcrumbs a,
.shop-page-title .breadcrumbs a {
  color: var(--tps-breadcrumb-green) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  text-transform: none !important;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.tps-account-crumb-link:hover,
.tps-account-crumb-link:focus,
.tps-breadcrumb a:hover,
.tps-breadcrumb a:focus,
.woocommerce-breadcrumb.tps-breadcrumb a:hover,
.woocommerce-breadcrumb.tps-breadcrumb a:focus,
.page-title .woocommerce-breadcrumb a:hover,
.shop-page-title .woocommerce-breadcrumb a:hover,
.product-page-title .woocommerce-breadcrumb a:hover {
  color: var(--tps-breadcrumb-green-hover) !important;
  text-decoration: underline !important;
  outline: none;
}

/* Current page — dark */
.tps-account-crumb--current,
.tps-breadcrumb-current,
.tps-breadcrumb [aria-current="page"] {
  color: var(--tps-breadcrumb-current) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

/* —— Theme page-title chrome: tight under header, no huge gap ——
   Homepage: Flatsome usually omits crumbs — leave alone.
   Account: page-title collapsed by tps-my-account.css; inject handles crumbs. */
body:not(.home):not(.woocommerce-account) .page-title,
body:not(.home):not(.woocommerce-account) .shop-page-title,
body:not(.home):not(.woocommerce-account) .product-page-title {
  min-height: 0 !important;
  height: auto !important;
  margin-top: 8px !important;
  margin-bottom: 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* PDP: transparent wrapper; strip lives on .tps-breadcrumb nav (account-matched) */
body.single-product .page-title,
body.single-product .shop-page-title,
body.single-product .product-page-title {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  max-width: var(--tps-content-width, 1240px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* No side pad — align with header .container 1240 */
  padding: 0 !important;
  box-sizing: border-box !important;
}
@media (max-width: 1279px) {
  body.single-product .page-title,
  body.single-product .shop-page-title,
  body.single-product .product-page-title {
    padding: 0 12px !important;
  }
}

body.single-product .page-title::before,
body.single-product .page-title::after,
body.single-product .shop-page-title::before,
body.single-product .shop-page-title::after,
body.single-product .product-page-title::before,
body.single-product .product-page-title::after {
  display: none !important;
  content: none !important;
}

body.single-product .page-title .page-title-inner,
body.single-product .shop-page-title .page-title-inner,
body.single-product .product-page-title .page-title-inner {
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  align-items: center !important;
}

body.single-product .page-title-inner > .flex-col,
body.single-product .shop-page-title .page-title-inner > .flex-col,
body.single-product .product-page-title .page-title-inner > .flex-col {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

body.single-product .page-title .is-medium,
body.single-product .shop-page-title .is-medium,
body.single-product .product-page-title .is-medium {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Category / shop: keep toolbar, but crumbs get their own strip */
/* shop title-inner strip padding set in strip rules above */

body.tax-product_cat .shop-page-title .is-medium,
body.woocommerce-shop .shop-page-title .is-medium,
body.post-type-archive-product .shop-page-title .is-medium {
  margin: 0 !important;
  padding: 0 !important;
}

/* Blog / single posts with page-title crumbs */
body.single-post .page-title,
body.blog .page-title,
body.archive:not(.woocommerce):not(.tax-product_cat) .page-title {
  background: transparent !important;
  max-width: var(--tps-breadcrumb-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

/* Homepage: if crumbs somehow render, hide strip chrome (Flatsome usually omits) */
body.home .tps-breadcrumb,
body.home .woocommerce-breadcrumb,
body.home .page-title .breadcrumbs {
  /* no forced hide — Flatsome typically has no crumbs; leave layout alone */
}

@media (max-width: 899px) {
  .tps-breadcrumb,
  .tps-account-breadcrumbs,
  nav.woocommerce-breadcrumb.tps-breadcrumb,
  nav.breadcrumbs.tps-breadcrumb {
    margin: 0 0 10px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
  .tps-account-crumb,
  .tps-account-crumb-sep,
  .tps-breadcrumb-crumb,
  .tps-breadcrumb-sep,
  .tps-breadcrumb .divider {
    font-size: 12px;
  }
  .tps-account-crumb-sep,
  .tps-breadcrumb-sep,
  .tps-breadcrumb .divider {
    margin: 0 6px !important;
  }
  body.single-product .page-title,
  body.single-product .shop-page-title,
  body.single-product .product-page-title {
    margin: 6px auto 8px !important;
    padding: 0 10px !important; /* phone side inset */
  }
  body.single-product .page-title-inner > .flex-col:last-child:not(:has(a, nav, span, h1, h2, .is-large, .is-medium, .is-small)) {
    display: none !important;
  }
}