/*
 * Components added after the first build: breadcrumbs, the size/colour picker,
 * the product long-form block, the category archive copy, the footer follow
 * block and the contact launcher. Kept in its own file so a theme rebuild
 * cannot silently overwrite it, and loaded after style.css so it inherits the
 * tokens and can override them by source order.
 *
 * The .txk-vids block (homepage YouTube strip) was removed 13 Sep 2026.
 */

/* ---------- Breadcrumbs ---------- */
.txk-crumbs { font-size: 0.82rem; color: var(--gray-500); margin: 0 0 22px; }
.txk-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.txk-crumbs li { display: flex; align-items: center; gap: 6px; }
.txk-crumbs li + li::before { content: "/"; color: var(--gray-300); }
.txk-crumbs a { color: var(--gray-500); text-decoration: none; transition: color 0.18s var(--ease-out); }
.txk-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.txk-crumbs a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.txk-crumbs [aria-current="page"] { color: var(--gray-700); font-weight: 600; }

/* ---------- Size / colour picker ---------- */
.txk-variants { margin: 0 0 20px; }
.txk-variants__group { border: 0; padding: 0; margin: 0 0 16px; }
.txk-variants__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; padding: 0; margin-bottom: 9px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
}
.txk-variants__req { color: var(--sale); }
.txk-variants__help { font-size: 0.78rem; font-weight: 600; color: var(--gray-500); }
.txk-variants__help:hover { color: var(--ink); }
.txk-variants__opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* The input stays in the accessibility tree but is visually replaced by its label. */
.txk-variants__input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.txk-variants__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 44px; padding: 0 16px;
  border: 2px solid var(--gray-300); border-radius: 10px;
  background: var(--white); color: var(--ink);
  font-size: 0.9rem; font-weight: 700; cursor: pointer; user-select: none;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.txk-variants__opt:hover { border-color: var(--gray-500); }
.txk-variants__input:checked + .txk-variants__opt {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}
.txk-variants__input:focus-visible + .txk-variants__opt {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
/* A colour choice shows the colour as well as naming it. */
.txk-variants__opt--swatch::before {
  content: ""; width: 14px; height: 14px; margin-right: 9px;
  border-radius: 50%; border: 1px solid var(--gray-300); background: currentColor;
}
.txk-variants__opt--swatch[data-color="black"]::before { background: #0a0a0a; }
.txk-variants__opt--swatch[data-color="white"]::before { background: #ffffff; }
.txk-variants__input:checked + .txk-variants__opt--swatch::before { border-color: var(--gray-500); }
.txk-variants__fixed { font-size: 0.86rem; color: var(--gray-700); margin: 0 0 16px; }

/* An option group the buyer skipped, flagged on submit. */
.txk-variants__group.is-missing .txk-variants__opt { border-color: var(--sale); }
.txk-variants__group.is-missing .txk-variants__label { color: var(--sale); }

/* ---------- Product description: long-form type ---------- */
/*
 * Three problems this fixes, all visible on every product page:
 *
 * 1. WooCommerce prints <h2>Description</h2> INSIDE a tab that is already
 *    labelled "Description" — a redundant 37px heading pushing the copy down
 *    the page. Hidden, not removed, so the tab's own a11y labelling is intact.
 *
 * 2. Body copy ran at var(--gray-700) (#4a4a47). Against white that is legible
 *    but washed out at this size, and it made long descriptions read as grey
 *    slabs. Near-black instead — #1b1b1a on white is ~16:1, far above the 4.5:1
 *    floor, and it is what makes the page look deliberate rather than faded.
 *
 * 3. WooCommerce also puts the class `panel` on this container, and style.css
 *    has `.panel p { color: rgba(255,255,255,0.68) }` for the dark homepage
 *    panels — white on white. The selectors below are (0,2,1) so they beat it
 *    outright, which also protects any description that somehow renders without
 *    the .txk-content wrapper.
 */
.woocommerce-Tabs-panel--description > h2:first-child { display: none; }

.txk-content { color: var(--ink); }

.txk-content p,
.txk-content li,
.woocommerce-Tabs-panel.panel p,
.woocommerce-Tabs-panel.panel li {
  color: #1b1b1a;
  font-size: 1rem;
  line-height: 1.62;
  max-width: 68ch;
}
.txk-content p { margin: 0 0 1em; }
.txk-content ul,
.txk-content ol { padding-left: 1.15em; max-width: 68ch; }
.txk-content li { margin-bottom: 6px; }
.txk-content strong,
.woocommerce-Tabs-panel.panel strong { color: var(--ink); font-weight: 700; }

.txk-content h2,
.txk-content h3,
.woocommerce-Tabs-panel.panel h2,
.woocommerce-Tabs-panel.panel h3 {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.1em 0 0.5em;
}
.txk-content > :first-child { margin-top: 0; }

/*
 * FAQ accordions inside a product description had NO styling at all — bare
 * <details> with no divider and the browser's default triangle. Given the same
 * treatment as the category-archive FAQs so the two read as one system.
 */
.txk-content details.pfaq,
.woocommerce-Tabs-panel.panel details.pfaq {
  border-top: 1px solid var(--gray-300);
  max-width: 68ch;
}
.txk-content details.pfaq:last-of-type { border-bottom: 1px solid var(--gray-300); }
.txk-content details.pfaq summary {
  position: relative;
  padding: 15px 30px 15px 0;
  font-weight: 700; font-size: 0.97rem; color: var(--ink);
  cursor: pointer; list-style: none;
  transition: color 0.18s var(--ease-out);
}
.txk-content details.pfaq summary::-webkit-details-marker { display: none; }
.txk-content details.pfaq summary::after {
  content: "+";
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--gray-500);
  transition: transform 0.2s var(--ease-out);
}
.txk-content details.pfaq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.txk-content details.pfaq summary:hover::after { color: var(--ink); }
.txk-content details.pfaq summary:focus-visible {
  outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 3px;
}
.txk-content details.pfaq p { padding: 0 4px 16px 0; margin: 0; }

/* ---------- Category archive copy ---------- */
.txk-arch-intro { max-width: 72ch; margin: 0 0 30px; }
.txk-arch-intro p { color: var(--gray-700); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.txk-arch-body {
  max-width: 72ch; margin: 56px auto 0; padding-top: 40px;
  border-top: 1px solid var(--gray-300);
}
.txk-arch-block { margin-bottom: 30px; }
.txk-arch-block h2 { font-size: 1.28rem; margin: 0 0 10px; }
.txk-arch-block p { color: var(--gray-700); line-height: 1.7; margin: 0; }
.txk-arch-faq { margin-top: 40px; }
.txk-arch-faq h2 { font-size: 1.28rem; margin: 0 0 8px; }
.txk-arch-faq details { border-bottom: 1px solid var(--gray-300); }
.txk-arch-faq summary {
  padding: 17px 4px; font-weight: 700; font-size: 0.98rem;
  cursor: pointer; list-style: none;
}
.txk-arch-faq summary::-webkit-details-marker { display: none; }
.txk-arch-faq summary::after {
  content: "+"; float: right; font-weight: 400; font-size: 1.3rem; line-height: 1;
  color: var(--gray-500); transition: transform 0.2s var(--ease-out);
}
.txk-arch-faq details[open] summary::after { transform: rotate(45deg); }
.txk-arch-faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.txk-arch-faq details p { color: var(--gray-700); line-height: 1.7; padding: 0 4px 18px; margin: 0; }

/* ---------- Footer ---------- */

/*
 * The white "Chat on WhatsApp" button rendered as a blank white pill: its label
 * and icon were white on white.
 *
 * style.css has `.site-footer a { color: rgba(255,255,255,0.72) }` at
 * specificity (0,1,1), which outranks `.btn--light { color: var(--ink) }` at
 * (0,1,0). Inside the footer the anchor therefore stayed near-white while the
 * button background was white. Same failure as the WooCommerce `.woocommerce
 * img` rule that once blew up the header logo — a descendant selector quietly
 * beating a single-class one. Re-asserted here at (0,2,1).
 */
.site-footer a.btn--light { color: var(--ink); }
.site-footer a.btn--light:hover { background: transparent; color: var(--white); }

.newsletter__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__actions .btn { white-space: nowrap; }

/* X and Threads use filled glyphs rather than the stroked set around them. */
.footer-social svg[data-fill] { fill: currentColor; stroke: none; }

/*
 * A fourth footer column (Guides) was added. Scoped to the desktop range only,
 * because style.css already collapses .footer-cols to two columns at 900px and
 * this file loads after it — an unscoped rule would override that too.
 */
@media (min-width: 901px) {
  .footer-cols { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

/* ---------- Floating contact launcher (inc/chat-widget.php) ---------- */
/*
 * <details> drives this, so open/close, Escape and keyboard focus are the
 * browser's job, not ours. No JS, no third-party chat script.
 */
.txk-chat {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  font-family: var(--font);
}
.txk-chat__btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-size: 0.92rem; font-weight: 700; cursor: pointer;
  list-style: none; user-select: none;
  box-shadow: var(--shadow-lift);
  transition: transform 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.txk-chat__btn::-webkit-details-marker { display: none; }
.txk-chat__btn:hover { transform: translateY(-2px); }
.txk-chat__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.txk-chat__btn svg { width: 20px; height: 20px; flex: none; }
.txk-chat__i-close { display: none; }
.txk-chat[open] .txk-chat__i-open { display: none; }
.txk-chat[open] .txk-chat__i-close { display: block; }
.txk-chat[open] .txk-chat__label { display: none; }
.txk-chat[open] .txk-chat__btn { padding: 0 16px; }

.txk-chat__panel {
  position: absolute; right: 0; bottom: 62px; width: min(320px, calc(100vw - 36px));
  background: var(--white); color: var(--ink);
  border: 1px solid var(--gray-300); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 16px;
  animation: txk-chat-in 0.18s var(--ease-out);
}
@keyframes txk-chat-in { from { opacity: 0; transform: translateY(8px); } }

.txk-chat__intro {
  font-size: 0.86rem; color: var(--gray-700); margin: 0 0 12px; line-height: 1.5;
}
.txk-chat__opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px; border-radius: var(--radius); text-decoration: none;
  color: var(--ink); transition: background 0.15s var(--ease-out);
}
.txk-chat__opt:hover { background: var(--gray-100); }
.txk-chat__opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.txk-chat__opt svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.txk-chat__opt strong { display: block; font-size: 0.92rem; }
.txk-chat__opt em {
  /* gray-500 measured 3.5:1 here — under the 4.5:1 floor for small text. */
  display: block; font-style: normal; font-size: 0.78rem;
  color: var(--gray-700); margin-top: 2px; line-height: 1.4;
}
.txk-chat__opt--wa svg { color: #25d366; }

@media (max-width: 640px) {
  .txk-arch-body { margin-top: 40px; padding-top: 30px; }
  .txk-variants__opt { min-width: 48px; padding: 0 13px; }
  .newsletter__actions { flex-direction: column; }
  .newsletter__actions .btn { width: 100%; justify-content: center; }
  .txk-chat { right: 14px; bottom: 14px; }
  .txk-chat__btn { min-height: 48px; padding: 0 17px; }

  /* Slightly tighter heading rhythm on phones, where 2.1em is a lot of air. */
  .txk-content h2,
  .woocommerce-Tabs-panel.panel h2 { margin-top: 1.7em; font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .txk-crumbs a,
  .txk-variants__opt,
  .txk-arch-faq summary::after,
  .txk-content details.pfaq summary,
  .txk-content details.pfaq summary::after,
  .txk-chat__btn { transition: none; }
  .txk-chat__panel { animation: none; }
}