/* theme-extra part 2/5 (CF-46105 split of theme-extra.css, rules unchanged and in original order): ingredient links + glossary, journal cards, shop merchandising bands + filter chips, ritual page, PDP subline/eco block. */
/* ---------- Ingredient links + quick-info tooltips ---------- */
.ing-link {
  color: inherit; text-decoration: underline dotted var(--clay); text-underline-offset: 3px;
  position: relative; cursor: help;
}
.ing-link:hover, .ing-link:focus { color: var(--clay-ink); }
.ing-link::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 300px;
  background: var(--cocoa); color: var(--oat);
  font-size: .82rem; line-height: 1.45; font-weight: 400;
  padding: .6rem .85rem; border-radius: 10px;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
  z-index: 60; pointer-events: none; white-space: normal;
  box-shadow: var(--shadow-lift);
}
.ing-link:hover::after, .ing-link:focus::after { opacity: 1; visibility: visible; }
.ing-more { margin-top: 1rem; font-size: .92rem; }

/* Ingredients glossary: search + sticky A-Z nav (item 7, 2026-07-12;
   GPT-5.6 audit pass: search row + scrollable 44px A-Z row on mobile,
   real focus ring, visible result count) */
.ing-toolbar {
  position: sticky; top: 84px; z-index: 5; background: var(--oat);
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding: .75rem 0 .9rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem !important;
}
.ing-az-nav { display: flex; flex-wrap: wrap; gap: .15rem; flex: 1 1 auto; }
.ing-az-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  color: var(--cocoa); text-decoration: none; font-size: .82rem; font-weight: 600;
}
.ing-az-nav a:hover, .ing-az-nav a:focus-visible { background: var(--oat-deep); color: var(--clay-ink); }
.ing-az-nav a:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.ing-search { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; }
.ing-search input {
  font: inherit; font-size: .9rem; color: var(--cocoa); background: var(--oat-soft);
  border: 1.5px solid var(--line); border-radius: 999px; padding: .5rem 1rem; width: 220px; max-width: 100%;
}
.ing-search input:focus { border-color: var(--clay); }
.ing-search input:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.ing-count { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.ing-no-results { text-align: center; color: var(--muted); padding: 2rem 0; }
@media (max-width: 860px) {
  .ing-toolbar { top: 76px; flex-direction: column; align-items: stretch; gap: .5rem; }
  .ing-search { width: 100%; }
  .ing-search input { flex: 1 1 auto; width: auto; min-height: 44px; }
  .ing-az-nav {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  }
  .ing-az-nav::-webkit-scrollbar { display: none; }
  .ing-az-nav a { flex: 0 0 auto; min-width: 44px; height: 44px; }
}

/* CO-168: bound the alphabet strip and long ingredient/source names to the page. */
.page-ingredients .entry-content { overflow-wrap: anywhere; }
.page-ingredients .ing-az-nav { min-width: 0; max-width: 100%; }
/* ---------- Claim-keyword highlighting in product description prose ---------- */
mark.claim { background: none; font-weight: 600; padding: 0; }
mark.claim-moss { color: var(--moss-deep); }
mark.claim-clay { color: var(--clay-ink); }

/* glossary entries: anchor targets get breathing room under the sticky header */
/* Anchor offset must clear header + sticky toolbar (GPT-5.6 audit, P1 —
   90px hid the jumped-to heading under the toolbar, worst on mobile where
   the toolbar is two stacked rows). */
.entry-content [id^="ing-"] { scroll-margin-top: 150px; }
@media (max-width: 860px) { .entry-content [id^="ing-"] { scroll-margin-top: 200px; } }

/* The full alphabet toolbar is taller than the original short glossary. */
.page-ingredients .entry-content [id^="ing-"] { scroll-margin-top: 240px; }
/* ---------- Journal cards reuse (archives) ---------- */
.journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .journal-grid { grid-template-columns: 1fr; } }

/* ---------- Product accent borders in grid, per-product (see functions.php capyonsen_merch_map) ---------- */
.woocommerce ul.products li.product { position: relative; border-top: 4px solid var(--oat-deep); }
.woocommerce ul.products li.product.accent-clay  { border-top-color: var(--clay); }
.woocommerce ul.products li.product.accent-moss  { border-top-color: var(--moss); }
.woocommerce ul.products li.product.accent-petal { border-top-color: var(--petal); }
.woocommerce ul.products li.product.accent-yuzu  { border-top-color: var(--yuzu); }
.woocommerce ul.products li.product.accent-cocoa { border-top-color: var(--cocoa); }

.product-kicker {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: var(--oat-soft); color: var(--clay-ink); /* CO-34: was --clay-deep (3.69:1 on oat-soft, fails AA) */
  font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .65rem; max-width: calc(100% - 1.4rem); line-height: 1.4; overflow-wrap: anywhere;
  border-radius: 999px; box-shadow: var(--shadow-lift);
}

/* ---------- Shop: ritual-first merchandising bands ---------- */
.shop-hero { padding-bottom: 0; }
/* Density pass 2026-08-02: was clamp(2.5rem, 6vw, 4rem) = 40 · 64, and because
   bands alternate backgrounds every boundary showed both paddings (80px mobile,
   128px desktop). These carry a real background, so they keep their own padding
   — just less of it. Not mirrored into front-page.css: no .shop-band renders on
   the homepage (verified — that file contains no shop-band rule). */
.shop-band { padding-block: clamp(1.75rem, 4vw, 3rem); }
.shop-band:nth-of-type(even) { background: var(--oat-deep); }
.shop-band-hero { background: color-mix(in srgb, var(--clay) 10%, var(--oat)); }
.shop-band-head { text-align: center; margin-bottom: .5rem; }
.shop-band-head .motif-steam { display: block; margin: 0 auto .5rem; opacity: .8; }
.shop-band-lead { margin: 0 auto; max-width: 42em; }
.shop-base-ripple { display: flex; justify-content: center; padding-block: 1.5rem 2.25rem; opacity: .6; }

/* Shop: category filter chips (item 7, 2026-07-12; GPT-5.6 audit pass:
   44px touch targets, single scrollable row on mobile, lighter padding) */
.shop-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  padding: .6rem 1.25rem .9rem; max-width: 900px; margin: 0 auto;
  position: sticky; top: 84px; z-index: 5; background: var(--oat);
}
.shop-filter {
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--cocoa); background: var(--oat-soft); border: 1.5px solid var(--line);
  border-radius: 999px; padding: .4rem 1.1rem; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.shop-filter:hover { border-color: var(--clay); color: var(--clay-ink); }
.shop-filter:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.shop-filter.is-active { background: var(--cocoa); border-color: var(--cocoa); color: var(--oat); }
.shop-band[hidden] { display: none; }
@media (max-width: 860px) {
  .shop-filters {
    top: 76px; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: .5rem 1.25rem .7rem;
    /* subtle edge fade hinting at horizontal scroll */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .shop-filters::-webkit-scrollbar { display: none; }
  .shop-filter { flex: 0 0 auto; }
}
/* Filter-jump landing offset: header + sticky filter row (GPT-5.6 audit, P1 —
   scrollIntoView parked the band head underneath them). */
.shop-band { scroll-margin-top: 150px; }
@media (max-width: 860px) { .shop-band { scroll-margin-top: 140px; } }
/* Band names are now real h2s (audit P2) — keep the eyebrow look, a touch more weight. */
h2.shop-band-title { font-size: .92rem; font-weight: 700; margin: 0 0 1.1rem; line-height: 1.3; }
/* Two-product bands (Night Ritual, Sets) center on a narrower 2-col grid on
   desktop instead of leaving a dangling empty third column (audit P2). */
@media (min-width: 901px) {
  .woocommerce .shop-band-night-ritual ul.products,
  .woocommerce .shop-band-sets ul.products {
    grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-left: auto; margin-right: auto;
  }
}

/* Journal archive: category filter chips (item 7, 2026-07-12) */
.journal-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0 0 2rem;
}
.journal-filter {
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  min-height: 44px; display: inline-flex; align-items: center; text-decoration: none;
  color: var(--cocoa); background: var(--oat-soft); border: 1.5px solid var(--line);
  border-radius: 999px; padding: .4rem 1.1rem; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.journal-filter:hover { border-color: var(--clay); color: var(--clay-ink); }
.journal-filter:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.journal-filter.is-active, .journal-filter[aria-current="true"] { background: var(--cocoa); border-color: var(--cocoa); color: var(--oat); }
.journal-card[hidden] { display: none; }
.journal-no-results { text-align: center; color: var(--muted); }
/* "5 min read · 12 Jul 2026" metadata row (GPT-5.6 audit, P2) */
.card-meta { font-size: .78rem; color: var(--muted); letter-spacing: .03em; margin-top: auto; padding-top: .5rem; }

/* ---------- Front page: ritual strip stays 3 → 1 col (never the 2+1 wrap) ---------- */
@media (max-width: 900px) {
  .woocommerce.ritual-strip ul.products { grid-template-columns: 1fr; }
}

/* ---------- Ritual page: 4-item expanded-collection strip goes 4 → 2 → 1
   (GPT-5.6 audit, P2 — the global rules gave 3+1 on desktop and a needlessly
   long single column from 561-900px). Scoped to body.page-ritual so the
   front page's 3-item strip keeps its own behavior above. ---------- */
@media (min-width: 1001px) {
  .page-ritual .woocommerce.ritual-strip ul.products { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .page-ritual .woocommerce.ritual-strip ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-ritual .woocommerce.ritual-strip ul.products { grid-template-columns: 1fr; }
}

/* Ritual page: "More formula details" disclosure under the top-3 fact pills */
.facts-more { margin-top: .6rem; }
.facts-more summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--muted);
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  text-decoration: underline dotted var(--line); text-underline-offset: 3px;
}
.facts-more summary::-webkit-details-marker { display: none; }
.facts-more summary:hover { color: var(--clay-ink); }
.facts-more summary:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.facts-more[open] summary { margin-bottom: .3rem; }

/* ---------- Single product: subline, benefit strip, reviews jump ---------- */
.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--font-body); font-style: normal; font-size: 1rem; line-height: 1.55;
  color: var(--muted); margin: 0 0 .5rem;
}
.reviews-jump {
  display: inline-block; font-size: .82rem; font-weight: 600; color: var(--muted);
  text-decoration: underline dotted var(--line); text-underline-offset: 3px; margin: -.3rem 0 .5rem;
}
.reviews-jump:hover { color: var(--clay-ink); }
.benefit-strip { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .9rem 0 1.1rem; }
.benefit-strip li {
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  padding: .4rem .85rem; background: var(--oat-deep); color: var(--cocoa);
  border-radius: 999px; border: 1px solid var(--line);
}

/* ---------- Single product: two-layer ritual naming + eco data block (v2.1, 2026-07-12) ----------
   P0 fix (2026-07-12): the ritual name was rendering as the visually dominant
   heading while the real product H1 was demoted to ~18px grey — reversed here.
   Ritual name is now a small eyebrow/step label; the H1 is the primary 32-40px
   heading. */
.ritual-name-kicker {
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--clay-ink);
  margin: 0 0 .35rem; line-height: 1.3;
}
.woocommerce div.product .ritual-name-kicker + h1.product_title {
  font-family: var(--font-display); font-weight: 550;
  font-size: clamp(1.85rem, 2.6vw, 2.35rem); letter-spacing: -.01em; text-transform: none;
  color: var(--cocoa); margin: 0 0 .35rem; line-height: 1.15;
}
.eco-data-block {
  margin: .65rem 0 .2rem; padding: .65rem 0 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem;
}
/* P1 fix (2026-07-12, QA audit): can now render as two lines (natural-origin
   %, then COSMOS-certification + organic-% together) instead of one —
   width:100% so the second doesn't try to sit beside badge icons on the
   same flex row. */
.eco-data-block .eco-pct { font-size: .95rem; line-height: 1.5; font-weight: 600; margin: 0; width: 100%; }
.eco-data-block .eco-pct + .eco-pct { margin-top: .15rem; }
/* Real cert-icon badges (COSMOS + Vegan/Gluten-free/Nut-free), one row — the
   artwork already has its own label baked in ("VEGAN FRIENDLY" etc.), so no
   separate pill/text next to it (2026-07-12: went 20px -> 44px -> 64px; Daniel
   circled 44px as still too small, tested up to 64px locally and confirmed that's
   genuinely legible, not just "bigger"). */
.eco-data-block .eco-badges { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; padding: 0; margin: 0; }
.eco-data-block .eco-badges li { display: block; }
.eco-data-block .eco-badges img { display: block; width: 64px; height: 64px; }
.eco-data-block .eco-flags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; width: 100%; }
.eco-data-block .eco-flags li {
  font-size: .875rem; font-weight: 600; color: var(--cocoa); padding: .2rem .6rem;
  background: var(--oat-soft); border-radius: 999px; border: 1px solid var(--line);
}
.eco-data-block .eco-extra {
  width: 100%; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--muted); font-style: normal;
}

/* P2 fix (2026-07-12, QA audit): "View full ingredients" link near the eco/
   certification block, instead of the INCI list only being reachable by
   scrolling through the whole details tab. */
.ing-full-link {
  display: inline-flex; align-items: center; min-height: 44px; margin: .2rem 0 0; font-size: .9rem; font-weight: 600;
  color: var(--clay-ink); text-decoration: underline dotted var(--clay); text-underline-offset: 3px;
}
.ing-full-link:hover, .ing-full-link:focus-visible { color: var(--cocoa); }

/* CO-161: keep the buying introduction compact while retaining all its content. */
.woocommerce div.product .product-top-grid .summary p.price { font-size: 1.55rem; margin: 0 0 .45rem; line-height: 1.35; }
.woocommerce div.product .product-top-grid .summary .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; }
.woocommerce div.product .product-top-grid .summary .benefit-bullets { margin: 0 0 .55rem; gap: .3rem; }
.woocommerce div.product .product-top-grid .summary .benefit-bullets li { font-size: .95rem; line-height: 1.45; padding-left: 1.15rem; }
.woocommerce div.product .product-top-grid .summary .benefit-bullets li::before { width: 6px; height: 6px; }

/* Product-only spacing: header to breadcrumb, breadcrumb to gallery, and section padding. */
.single-product .section-tight { padding-top: .6rem; }
.single-product .woocommerce-wrap .woocommerce-breadcrumb { margin: 0 0 .65rem; }
.single-product .woocommerce-wrap > div.product { margin-top: .5rem; }