/*
 * Single product tabs, Matica.
 *
 * The bookworm "classic-nav" (v4) product style expects the tab list to be a
 * narrow left-hand column with the panels in a sibling .tab-content column:
 *
 *   @media (min-width: 992px) { .single-product .classic-nav ul.tabs {
 *       flex: 0 0 33.33%; max-width: 33.33%; display: block; } }
 *
 * woocommerce/single-product/tabs/tabs.php never renders that .tab-content
 * wrapper, so the list turned into a 25% wide block that .container then
 * centred with auto margins, and the panels wrapped onto the next flex line
 * underneath it. That is the "tabs stuck in the middle with the text below
 * them" layout.
 *
 * This file drops the column layout and rebuilds the section as a normal
 * horizontal tab bar with an underline indicator, in the Matica palette
 * (maroon #953132, navy #133447). CSS only, no parent theme template edits,
 * so a bookworm update cannot undo it.
 */

.single-product .woocommerce-tabs.wc-tabs-wrapper {
  --pt-navy: #133447;
  --pt-red: #953132;
  --pt-red-dark: #7b2728;
  --pt-muted: rgba(19, 52, 71, 0.58);
  --pt-line: rgba(19, 52, 71, 0.13);
  --pt-line-soft: rgba(19, 52, 71, 0.08);
}

/* the wrapper stops being a bootstrap grid row */
.single-product .woocommerce-tabs .classic-nav.row {
  display: block;
  margin-right: 0;
  margin-left: 0;
  border-top-color: var(--pt-line);
  padding-top: 3.25rem;
}

/* ---------------------------------------------------------------- tab bar */

.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: flex-end;
  /* the template hands this list .justify-content-md-center, a bootstrap
     utility that carries !important, and that is what pushed the tabs into
     the middle of the page */
  justify-content: flex-start !important;
  gap: 2rem;
  /* .woocommerce-tabs is itself a .container and already supplies the 15px
     gutter, so this inner .container's padding is removed. Without this the
     whole tab section sits 15px to the right of the product summary above it. */
  max-width: none;
  margin: 0;
  padding: 0 !important;
  border-bottom: 1px solid var(--pt-line);
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs::-webkit-scrollbar {
  display: none;
}

.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li a {
  display: inline-flex !important;
  align-items: center;
  position: relative;
  margin: 0;
  padding: 0 0 0.9rem !important;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--pt-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
/* the underline indicator sits on top of the bar's own hairline */
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--pt-red);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li a:hover,
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li a:focus-visible {
  color: var(--pt-navy);
}
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li a:hover::after {
  opacity: 0.35;
  transform: scaleX(1);
}
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li.active a,
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li.active a:hover {
  color: var(--pt-red);
}
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li.active a::after {
  opacity: 1;
  transform: scaleX(1);
}
.single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li a:focus-visible {
  outline: 2px solid var(--pt-navy);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- tab panels */

.single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel {
  max-width: none;
  margin: 0;
  padding-right: 0;
  padding-left: 0;
  padding-top: 2.25rem;
  padding-bottom: 0;
  color: var(--pt-navy);
  font-size: 1rem;
  line-height: 1.75;
}
.single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel > *:last-child {
  margin-bottom: 0;
}

.single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel--description p,
.single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel--description ul,
.single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel--description ol {
  margin-bottom: 1.15em;
  font-size: 1rem;
  line-height: 1.75;
}
.single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel--description a {
  color: var(--pt-red);
  text-decoration: underline;
  text-decoration-color: rgba(149, 49, 50, 0.35);
  text-underline-offset: 3px;
}
.single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel--description a:hover {
  color: var(--pt-red-dark);
  text-decoration-color: currentColor;
}

/* --------------------------------------------- details tab, the spec sheet */

/* the details tab ships two separate <table>s (sku/categories, then
   isbn/author/publisher). They are stacked into one continuous spec list, and
   the label column is a fixed width so both tables line up with each other. */
.single-product .woocommerce-tabs .classic-nav .product_meta {
  max-width: none;
}
.single-product .woocommerce-tabs .classic-nav .product_meta .table-responsive {
  margin-top: 0 !important;
}
.single-product .woocommerce-tabs .classic-nav .product_meta table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.single-product .woocommerce-tabs .classic-nav .product_meta tr {
  border-bottom: 1px solid var(--pt-line-soft);
  background: none !important;
}
/* only the very last row of the last table drops its rule */
.single-product .woocommerce-tabs .classic-nav .product_meta
  .table-responsive:last-child tr:last-child {
  border-bottom: 0;
}
.single-product .woocommerce-tabs .classic-nav .product_meta th,
.single-product .woocommerce-tabs .classic-nav .product_meta td {
  padding: 0.8rem 0 !important;
  border: 0;
  background: none;
  vertical-align: top;
  text-align: left;
}
.single-product .woocommerce-tabs .classic-nav .product_meta th {
  /* proportional, not a fixed px width: with a right sidebar the content
     column can be as narrow as ~340px at tablet sizes. Both tables are the
     same width, so a percentage still keeps their label columns aligned. */
  width: 25%;
  padding-right: 1.5rem !important;
  color: var(--pt-muted);
  font-size: 0.875rem;
  font-weight: 500;
}
.single-product .woocommerce-tabs .classic-nav .product_meta td {
  color: var(--pt-navy);
  font-size: 0.9375rem;
  font-weight: 500;
}
.single-product .woocommerce-tabs .classic-nav .product_meta td a {
  color: var(--pt-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(149, 49, 50, 0.28);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.single-product .woocommerce-tabs .classic-nav .product_meta td a:hover {
  color: var(--pt-red-dark);
  border-bottom-color: currentColor;
}

/* ------------------------------------------------------------------ small */

@media (max-width: 767.98px) {
  .single-product .woocommerce-tabs .classic-nav.row {
    padding-top: 2.25rem;
  }
  .single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs {
    gap: 1.5rem;
  }
  .single-product .woocommerce-tabs .classic-nav ul.tabs.wc-tabs li a {
    font-size: 0.875rem;
  }
  .single-product .woocommerce-tabs .classic-nav .woocommerce-Tabs-panel {
    padding-top: 1.75rem;
    font-size: 0.9375rem;
  }
  .single-product .woocommerce-tabs .classic-nav .product_meta th {
    width: 40%;
  }
}