/* ============================================================
   Good Nutrition Only — Single Product Page Enhancements
   Category pill, sectioned tabs w/ styled nav, related carousel.
   ============================================================ */

/* Kill the shop honeycomb texture that leaks onto single-product
   pages via the global `.woocommerce-page .woocommerce` rule —
   keep the product page flat. */
body.single-product .woocommerce {
  background-image: none !important;
  background-color: transparent !important;
}

/* ---- Category pill(s) above title ---- */
.gno-product-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--gno-space-4);
}

.gno-product-cat-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 1em;
  font-family: var(--gno-font-body);
  font-size: var(--gno-fs-xs);
  font-weight: var(--gno-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gno-white);
  background: transparent;
  border: 1px solid var(--gno-border-strong);
  border-radius: var(--gno-radius-pill);
  text-decoration: none;
  transition: background var(--gno-dur) var(--gno-ease),
              border-color var(--gno-dur) var(--gno-ease);
}

.gno-product-cat-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gno-white);
  color: var(--gno-white);
}

/* ---- Stock label — hidden for now ---- */
.woocommerce div.product p.stock,
.woocommerce div.product .stock {
  display: none;
}

/* ---- Short description: hairline divider below ---- */
.woocommerce div.product .woocommerce-product-details__short-description {
  padding-bottom: var(--gno-space-5);
  border-bottom: 1px solid var(--gno-border);
}

/* ============================================================
   TABS SECTION — flat, no band
   ============================================================ */
.woocommerce div.product .woocommerce-tabs {
  clear: both;
  margin-top: var(--gno-space-8);
}

/* Tab navigation (Description / Additional information / Reviews) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gno-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--gno-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: var(--gno-space-3) var(--gno-space-5);
  font-family: var(--gno-font-heading);
  font-weight: var(--gno-fw-heading);
  font-size: var(--gno-fs-lg);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gno-gray);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--gno-dur) var(--gno-ease),
              border-color var(--gno-dur) var(--gno-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--gno-white);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--gno-white);
  border-bottom-color: var(--gno-white);
}

/* Tab panel — nested card */
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--gno-surface);
  border: 1px solid var(--gno-border);
  border-radius: var(--gno-radius-lg);
  padding: var(--gno-space-6) var(--gno-space-7);
  margin-top: var(--gno-space-5);
  color: var(--gno-text-muted);
  line-height: var(--gno-lh-body);
}
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  font-size: var(--gno-fs-xl);
  margin-bottom: var(--gno-space-4);
}
.woocommerce div.product .woocommerce-tabs .panel p {
  margin-bottom: var(--gno-space-4);
}
.woocommerce div.product .woocommerce-tabs .panel p:last-child {
  margin-bottom: 0;
}

/* Additional information — attribute table */
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td {
  padding: var(--gno-space-3) var(--gno-space-4);
  border-bottom: 1px solid var(--gno-border);
  text-align: left;
  color: var(--gno-text-muted);
  font-style: normal;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th {
  color: var(--gno-white);
  font-weight: var(--gno-fw-semibold);
  width: 32%;
}
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child td {
  border-bottom: 0;
}

/* ============================================================
   RELATED PRODUCTS — slim horizontal carousel w/ arrow controls
   ============================================================ */
.woocommerce div.product .related.products {
  clear: both;
  margin: var(--gno-space-8) 0 0;
  padding: 0;
  background: none;
  border-top: 1px solid var(--gno-border);
}

.woocommerce div.product .related.products > h2 {
  font-family: var(--gno-font-heading);
  font-size: var(--gno-fs-xl);
  font-weight: var(--gno-fw-heading);
  text-align: left;
  color: var(--gno-white);
  margin: var(--gno-space-6) 0 var(--gno-space-5);
}

/* Carousel viewport (wraps the ul via JS) + arrow controls */
.woocommerce div.product .related.products .gno-carousel { position: relative; }
.woocommerce div.product .related.products .gno-carousel.is-static .gno-carousel__nav { display: none; }
.gno-carousel__nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gno-surface);
  color: var(--gno-white);
  border: 1px solid var(--gno-border-strong);
  cursor: pointer;
  box-shadow: var(--gno-shadow);
  transition: background var(--gno-dur) var(--gno-ease),
              border-color var(--gno-dur) var(--gno-ease),
              opacity var(--gno-dur) var(--gno-ease);
}
.gno-carousel__nav:hover { background: var(--gno-black-soft); border-color: var(--gno-white); }
.gno-carousel__nav--prev { left: 6px; }
.gno-carousel__nav--next { right: 6px; }
.gno-carousel__nav[disabled] { opacity: 0; pointer-events: none; }
.gno-carousel__nav svg { width: 20px; height: 20px; }

/* Scroll-snap carousel row (replaces the shop grid) — scrollbar hidden */
.woocommerce div.product .related.products ul.products {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap;
  gap: var(--gno-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE / old Edge */
}
.woocommerce div.product .related.products ul.products::-webkit-scrollbar {
  display: none;              /* Chrome / Safari / Edge */
  width: 0;
  height: 0;
}

/* Carousel cards */
.woocommerce div.product .related.products ul.products li.product {
  flex: 0 0 220px !important;
  width: 220px !important;
  max-width: 80% !important;
  margin: 0 !important;
  padding-bottom: var(--gno-space-4) !important;
  scroll-snap-align: start;
}
.woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__title {
  padding-inline: var(--gno-space-4) !important;
  font-size: var(--gno-fs-base) !important;
}
.woocommerce div.product .related.products ul.products li.product .price {
  padding-inline: var(--gno-space-4) !important;
  font-size: var(--gno-fs-sm) !important;
}
/* No add-to-cart on related cards */
.woocommerce div.product .related.products ul.products li.product .button,
.woocommerce div.product .related.products ul.products li.product .added_to_cart {
  display: none !important;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-size: var(--gno-fs-base);
    padding: var(--gno-space-2) var(--gno-space-3);
    white-space: nowrap;
  }
  .woocommerce div.product .woocommerce-tabs .panel {
    padding: var(--gno-space-5);
    border-radius: var(--gno-radius);
  }
  .woocommerce div.product .related.products {
    margin-top: var(--gno-space-6);
  }
  .woocommerce div.product .related.products ul.products li.product {
    flex-basis: 180px !important;
    width: 180px !important;
  }
  .gno-carousel__nav { width: 36px; height: 36px; }
}