/* ==========================================================
   AV Sticky Tabs - product page styles
   Variables are injected in <head> by displayHeader hook.

   Selectors are prefixed with #product to raise specificity
   above theme defaults. !important is applied only to
   properties the admin actively configures.
   ========================================================== */

/* ----- STICKY NAVIGATION BAR ----- */
#product .product-tabs .nav-tabs,
#product .tabs .nav-tabs,
#product .product-tabcontent .nav-tabs,
.product-tabs .nav-tabs,
.tabs .nav-tabs {
  position: sticky !important;
  top: var(--avst-offset-desktop, 0) !important;
  z-index: 100;
  background: var(--avst-bg-nav, #fff) !important;
  margin: 0 !important;
  padding: var(--avst-nav-padding-y, 10px) var(--avst-nav-padding-x, 16px) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: var(--avst-tab-gap, 4px) !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  list-style: none;
}

#product .product-tabs .nav-tabs::-webkit-scrollbar,
#product .tabs .nav-tabs::-webkit-scrollbar,
#product .product-tabcontent .nav-tabs::-webkit-scrollbar,
.product-tabs .nav-tabs::-webkit-scrollbar,
.tabs .nav-tabs::-webkit-scrollbar { display: none; }

/* Nav items (li) */
#product .product-tabs .nav-tabs .nav-item,
#product .tabs .nav-tabs .nav-item,
#product .product-tabcontent .nav-tabs .nav-item,
.product-tabs .nav-tabs .nav-item,
.tabs .nav-tabs .nav-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none;
}

/* Tab buttons (a/button) */
#product .product-tabs .nav-tabs .nav-link,
#product .tabs .nav-tabs .nav-link,
#product .product-tabcontent .nav-tabs .nav-link,
#product .product-tabcontent .nav-item .nav-link,
.product-tabs .nav-tabs .nav-link,
.tabs .nav-tabs .nav-link {
  display: block !important;
  margin: 0 !important;
  padding: var(--avst-tab-padding-y, 10px) var(--avst-tab-padding-x, 20px) !important;
  color: var(--avst-color-text, #555) !important;
  background: var(--avst-bg-tab, transparent) !important;
  font-weight: 600 !important;
  font-size: var(--avst-font-size-desktop, 14px) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.3px;
  text-transform: none !important;
  border: 0 !important;
  border-radius: var(--avst-tab-radius, 6px) !important;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

#product .product-tabs .nav-tabs .nav-link:hover,
#product .tabs .nav-tabs .nav-link:hover,
#product .product-tabcontent .nav-tabs .nav-link:hover,
.product-tabs .nav-tabs .nav-link:hover,
.tabs .nav-tabs .nav-link:hover {
  color: var(--avst-color-text-active, #000) !important;
}

/* Active tab — uses both .active (Bootstrap) and .avst-active (our own) */
#product .product-tabs .nav-tabs .nav-link.active,
#product .product-tabs .nav-tabs .nav-link.avst-active,
#product .tabs .nav-tabs .nav-link.active,
#product .tabs .nav-tabs .nav-link.avst-active,
#product .product-tabcontent .nav-tabs .nav-link.active,
#product .product-tabcontent .nav-tabs .nav-link.avst-active,
.product-tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-link.avst-active,
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link.avst-active {
  color: var(--avst-color-text-active, #7bbf2a) !important;
  background: var(--avst-bg-tab-active, #ffffff) !important;
  box-shadow: 0 0 0 1px var(--avst-color-border-active, #7bbf2a) inset !important;
  border: 0 !important;
}

/* ----- TAB PANELS — all visible, stacked vertically ----- */
#product .product-tabs .tab-content > .tab-pane,
#product .tabs .tab-content > .tab-pane,
#product .product-tabcontent .tab-content > .tab-pane,
#product .product-tabcontent > .tab-content > .tab-pane,
.product-tabs .tab-content > .tab-pane,
.tabs .tab-content > .tab-pane {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  padding: 30px 0 !important;
  border-bottom: 1px solid #eee;
  scroll-margin-top: var(--avst-scroll-margin-desktop, 100px);
}

#product .product-tabs .tab-content > .tab-pane:last-child,
#product .tabs .tab-content > .tab-pane:last-child,
#product .product-tabcontent .tab-content > .tab-pane:last-child,
.product-tabs .tab-content > .tab-pane:last-child,
.tabs .tab-content > .tab-pane:last-child {
  border-bottom: none;
}

/* Injected section title */
#product .avst-section-title,
.avst-section-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 18px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 2px solid var(--avst-color-border-active, #7bbf2a) !important;
  color: #333 !important;
  text-transform: none !important;
}

/* ----- MOBILE ----- */
@media (max-width: 768px) {
  #product .product-tabs .nav-tabs,
  #product .tabs .nav-tabs,
  #product .product-tabcontent .nav-tabs,
  .product-tabs .nav-tabs,
  .tabs .nav-tabs {
    top: var(--avst-offset-mobile, 0) !important;
    padding: var(--avst-nav-padding-y-mobile, 6px) var(--avst-nav-padding-x-mobile, 10px) !important;
  }

  #product .product-tabs .nav-tabs .nav-link,
  #product .tabs .nav-tabs .nav-link,
  #product .product-tabcontent .nav-tabs .nav-link,
  #product .product-tabcontent .nav-item .nav-link,
  .product-tabs .nav-tabs .nav-link,
  .tabs .nav-tabs .nav-link {
    padding: var(--avst-tab-padding-y-mobile, 8px) var(--avst-tab-padding-x-mobile, 14px) !important;
    font-size: var(--avst-font-size-mobile, 13px) !important;
  }

  #product .product-tabs .tab-content > .tab-pane,
  #product .tabs .tab-content > .tab-pane,
  #product .product-tabcontent .tab-content > .tab-pane,
  .product-tabs .tab-content > .tab-pane,
  .tabs .tab-content > .tab-pane {
    padding: 20px 0 !important;
    scroll-margin-top: var(--avst-scroll-margin-mobile, 80px);
  }

  .avst-section-title { font-size: 18px; }
}