/*
 * Product buy column: disclosure cards, spec grid, chips.
 *
 * Loaded ONLY on single product pages (see inc/assets.php) — none of this
 * applies anywhere else, so it has no business in additions.css, which loads
 * on every request.
 *
 * Each disclosure is a bordered card with a title, a one-line subtitle and a
 * chevron, all closed by default; the spec table reads as a quiet label/value
 * grid rather than a bordered table with a black header bar. The matching
 * markup lives in inc/single-product.php.
 */

.pdp__accordions {
  margin-top: 20px;
  border-top: 0;                 /* was a hairline rule above the first panel */
  display: grid;
  gap: 10px;
}
.pdp__accordions details,
.txk-faq.pdp__accordions details {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  max-width: none;
  overflow: hidden;
  transition: border-color 0.18s var(--ease-out);
}
.pdp__accordions details:hover { border-color: var(--gray-500); }
.pdp__accordions details[open] { border-color: var(--ink); }

.pdp__accordions summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  font-weight: 700; font-size: 0.95rem; color: var(--ink);
  cursor: pointer; list-style: none;
}
.pdp__accordions summary::-webkit-details-marker { display: none; }
.pdp__accordions summary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: -3px;
}
.pdp__acc-label { display: grid; gap: 2px; min-width: 0; }
.pdp__acc-label strong { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.pdp__acc-label em {
  /* gray-500 measures under 4.5:1 at this size; gray-700 clears it. */
  font-style: normal; font-weight: 500; font-size: 0.8rem; color: var(--gray-700);
}
.pdp__chev {
  width: 18px; height: 18px; flex: 0 0 auto; color: var(--gray-700);
  transition: transform 0.22s var(--ease-out);
}
.pdp__accordions details[open] .pdp__chev { transform: rotate(180deg); }

/* Panel body sits inside the card, indented to line up with the heading. */
.pdp__accordions details > :not(summary) { padding-inline: 16px; }
.pdp__accordions details > :not(summary):last-child { padding-bottom: 14px; }
.pdp__accordions .txk-specs { margin: 0 0 10px; }
.pdp__accordions details p { padding-left: 16px; padding-right: 16px; max-width: none; }

/*
 * Quiet label/value grid. The shared .txk-specs styling is a bordered table
 * with a black header bar, which is right for the long-form guides and far too
 * heavy inside a small card — so the table is re-laid-out as a grid here.
 */
.pdp__accordions .txk-specs,
.pdp__accordions .txk-specs tbody { display: block; width: 100%; max-width: none; }
.pdp__accordions .txk-specs tr {
  display: grid; grid-template-columns: 116px 1fr; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--gray-100);
}
.pdp__accordions .txk-specs tr:last-child { border-bottom: 0; }
.pdp__accordions .txk-specs th,
.pdp__accordions .txk-specs td {
  display: block; padding: 0; border: 0; font-size: 0.87rem; line-height: 1.45;
}
.pdp__accordions .txk-specs th {
  width: auto; white-space: normal; font-weight: 500; color: var(--gray-700);
}
.pdp__accordions .txk-specs td { color: var(--ink); font-weight: 600; }

/* Highlights, chips and the short description: near-black, matching the body copy. */
.pdp__highlights li { color: #1b1b1a; }
.pdp__trust span { color: var(--ink); }
.woocommerce-product-details__short-description p { color: #1b1b1a; }


/* =========================================================
   PRODUCT TABS
   ========================================================= */

/*
 * THE CLASS COLLISION.
 *
 * WooCommerce prints `panel` on every tab body:
 *   <div class="woocommerce-Tabs-panel ... panel entry-content wc-tab">
 *
 * style.css uses that exact class name for the dark homepage showcase cards:
 *   .panel      { min-height: 58vh; display: flex; justify-content: center;
 *                 border: 1px solid rgba(255,255,255,.14);
 *                 background: rgba(255,255,255,.03); padding: clamp(24px,3vw,40px) }
 *   .js .panel  { opacity: 0.38 }          <- only .is-active gets opacity 1
 *   .panel p    { color: rgba(255,255,255,.68); max-width: 46ch }
 *
 * So every product description was rendering at 38% opacity inside a
 * 58vh flex-centred glass box. The washed-out grey copy was NOT a text-colour
 * bug — the colour was correct and measured correct; the whole container was
 * translucent, which is why an earlier colour-only fix changed nothing visible.
 *
 * Fixed at the boundary rather than by re-patching properties one at a time:
 * .woocommerce-Tabs-panel exists only on WooCommerce tabs, so this blocks the
 * entire showcase component from reaching any tab — this one, the reviews tab,
 * and any tab added later. (0,3,0) beats `.js .panel` at (0,2,0), and this
 * file loads after style.css.
 */
.woocommerce-Tabs-panel.panel,
.js .woocommerce-Tabs-panel.panel,
.js .woocommerce-Tabs-panel.panel.is-active {
  opacity: 1;
  min-height: 0;
  display: block;
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  margin: 0;
}

/*
 * Tab strip. WooCommerce's default is a row of white pills with 1px borders and
 * two ::before/::after pseudo-elements per item drawing the curved-corner
 * shadows — which is what clipped the first letter of "Description" and boxed
 * it against the page. Replaced with a plain underline row.
 */
.woocommerce div.product .woocommerce-tabs { margin-top: clamp(36px, 5vw, 60px); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 30px);
  margin: 0 0 26px; padding: 0;
  border-bottom: 1px solid var(--gray-300);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.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 {
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block; padding: 0 0 12px; margin-bottom: -1px;
  font-weight: 700; font-size: 0.95rem; color: var(--gray-700);
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover {
  color: var(--ink); border-bottom-color: var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px;
}

@media (max-width: 640px) {
  .pdp__accordions .txk-specs tr { grid-template-columns: 100px 1fr; gap: 10px; }
  .pdp__accordions summary { padding: 13px 14px; }
  .pdp__accordions details > :not(summary) { padding-inline: 14px; }
  .pdp__accordions details p { padding-left: 14px; padding-right: 14px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs { gap: 20px; margin-bottom: 20px; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { font-size: 0.9rem; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp__accordions details,
  .pdp__chev,
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { transition: none; }
}