/* ============================================================================
   CATEGORY PAGE SYSTEM
   One stylesheet for all ~80 category pages. The layout is identical across
   every category; only the text differs (supplied per-page by a data file in
   inc/data/ and rendered by inc/category-template.php). Every value here is
   lifted verbatim from the Claude Design "Standard Size Hoodie" export plus
   the agreed local adjustments (content-box width fix, 40px side padding,
   44px gallery gap, 900px reading column, TOC offset below the fixed header).

   Change the design once here and all 80 pages update.

   Fonts: fonts.css forces Inter globally with `* { font-family:Inter !important }`,
   so every element that must be Unbounded sets it with !important + a class
   selector (higher specificity than `*`) to win that back — no per-element
   .font-unbounded class needed in the markup.
   ========================================================================== */

/* ---- Root box model + page shell ---------------------------------------- */
/* The design ships no box-sizing reset (browser default content-box); GP forces
   border-box globally, which shrinks every max-width'd section's content by its
   horizontal padding. Restore content-box on this subtree so the copied
   max-width/padding values resolve exactly as they do in the design. */
.cat-page,
.cat-page *,
.cat-page *::before,
.cat-page *::after { box-sizing: content-box; }

.cat-page {
  background: #ffffff;
  color: #0d0d0d;
  font-family: 'Inter', sans-serif;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}
.cat-page a { color: #0d0d0d; }
.cat-page a:hover { color: #55620f; }
.cat-page summary::-webkit-details-marker { display: none; }

/* White text on the dark action buttons. As inline styles these won by default;
   as classes they must out-specify `.cat-page a { color:#0d0d0d }` and its
   :hover, which a plain single-class selector loses to (element+class beats
   class alone). */
.cat-page a.cat-btn-primary,
.cat-page a.cat-aside-cta,
.cat-page a.cat-cta-btn,
.cat-page a.cat-btn-primary:hover,
.cat-page a.cat-aside-cta:hover,
.cat-page a.cat-cta-btn:hover { color: #ffffff; }

/* White page background so the transparent rest-state header reads white
   rather than showing the site's cream body colour (matches About/Contact). */
body { background-color: #fff !important; }

/* GP/Gutenberg wrap page content in .entry-content/.inside-article with their
   own padding + max-width; this page renders full-bleed via generate_after_header
   (before #page opens), so strip that inherited spacing. */
.inside-article,
.entry-content,
.site-main .wp-block-group__inner-container { padding: 0 !important; margin: 0 !important; }
.entry-content > * { margin: 0; }

/* ---- Shared bits -------------------------------------------------------- */
/* Centered, max-width'd content container with the standard side padding. */
.cat-section { max-width: 1360px; margin: 0 auto; padding-left: clamp(24px,5vw,40px); padding-right: clamp(24px,5vw,40px); }

/* Lime uppercase badge (hero eyebrow, process/why/faq section labels). */
.cat-badge {
  display: inline-block; background: #d3fb52; color: #0d0d0d;
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 16px; margin-bottom: 20px;
}

/* ---- Hero --------------------------------------------------------------- */
.cat-hero { padding-top: clamp(56px,8vw,100px); padding-bottom: clamp(40px,6vw,72px); }
.cat-breadcrumb { font-size: 13px; color: #6b6b6b; margin-bottom: 20px; }
.cat-hero-grid { display: flex; flex-wrap: wrap; gap: clamp(32px,5vw,64px); align-items: flex-end; }
.cat-hero-col { flex: 2 1 480px; }
.cat-hero .cat-badge { margin-bottom: 24px; }
.cat-hero-title {
  font-family: 'Unbounded', sans-serif !important; font-weight: 700;
  font-size: clamp(2.2rem,5vw,4.2rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 24px;
}
.cat-hero-intro { font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.6; color: #4a4a4a; max-width: 680px; margin: 0 0 32px; }
.cat-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.cat-btn-primary {
  background: #0d0d0d; color: #ffffff; font-family: 'Unbounded', sans-serif !important;
  font-weight: 600; font-size: 14px; padding: 16px 24px; text-decoration: none; text-align: center;
}
.cat-btn-primary:hover { color: #ffffff; }
.cat-btn-outline {
  border: 1.5px solid #0d0d0d; color: #0d0d0d; font-family: 'Unbounded', sans-serif !important;
  font-weight: 600; font-size: 14px; padding: 16px 24px; text-decoration: none; text-align: center;
}
.cat-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 24px; font-size: 13px; color: #6b6b6b; }

/* ---- Gallery ------------------------------------------------------------ */
.cat-gallery { padding-top: 0; padding-bottom: clamp(64px,9vw,120px); }
.cat-gallery-intro { color: #4a4a4a; max-width: 720px; line-height: 1.6; margin: 0 0 clamp(32px,5vw,48px); }
.cat-gallery-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(24px,3vw,44px); }
.cat-gallery-cell { width: 100%; aspect-ratio: 9/16; min-width: 0; }
/* Placeholder box until a real photo is set (design tool's dashed look).
   border-box (overriding the page-wide content-box) so its width:100% INCLUDES
   its 16px padding + dashed border — otherwise the box renders ~34px wider than
   its grid cell, overlapping the gap between cards and pushing the last card
   against the screen edge. */
.cat-page .cat-imgslot,
.cat-page .cat-gallery-cell img {
  box-sizing: border-box;
}
.cat-imgslot {
  width: 100%; height: 100%; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  border: 1.5px dashed rgba(13,13,13,0.25); background: #f5f5f0; color: #6b6b6b;
  font-size: 12px; line-height: 1.5; text-align: center;
}
.cat-gallery-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; display: block; }
/* Swipe hint pill — hidden on desktop, revealed when the grid becomes a slider. */
.cat-gallery-hint {
  display: none;
  width: fit-content;
  margin: 18px auto 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: #f5f5f0;
  color: #6b6b6b;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- Article ------------------------------------------------------------ */
.cat-article { padding-top: clamp(56px,8vw,96px); }
.cat-article-grid { display: flex; flex-wrap: wrap; gap: clamp(40px,6vw,72px); align-items: flex-start; }
.cat-article-main { flex: 1 1 480px; min-width: 0; max-width: 900px; }

/* One article section. first/last selectors handle any number of sections. */
.cat-block { padding: clamp(48px,7vw,72px) 0; border-bottom: 1px solid rgba(13,13,13,0.12); }
.cat-block:first-child { padding-top: 0; }
.cat-block:last-child { border-bottom: none; padding-bottom: clamp(56px,8vw,96px); }
.cat-kicker {
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #6b6b6b; margin-bottom: 14px;
}
.cat-h2 {
  font-family: 'Unbounded', sans-serif !important; font-weight: 700;
  font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: -0.01em; margin: 0 0 20px;
}
.cat-block p { margin: 0 0 20px; line-height: 1.75; color: #333; }
.cat-block p:last-child { margin-bottom: 0; }

/* Optional fabric-style comparison table inside a block. */
.cat-table-wrap { overflow-x: auto; margin-bottom: 24px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 520px; }
.cat-table th {
  text-align: left; padding: 12px 16px; border-bottom: 2px solid #0d0d0d;
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 0.8rem;
}
.cat-table td { padding: 12px 16px; border-bottom: 1px solid rgba(13,13,13,0.14); color: #4a4a4a; }
.cat-table td:first-child { color: #0d0d0d; font-weight: 600; }
.cat-table tr:last-child td { border-bottom: none; }

/* Sticky "Quick Stats" sidebar. */
/* top:90px clears the scrolled fixed header (~64px) with a comfortable gap. (The
   old top TOC bar is gone — it's now the floating island — so the sidebar only
   has the header to clear.) */
.cat-aside { flex: 1 1 240px; min-width: 0; max-width: 320px; position: sticky; top: 90px; }
.cat-aside-label {
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #6b6b6b; margin-bottom: 20px;
}
.cat-stats { display: flex; flex-direction: column; gap: 20px; }
.cat-stat { border-top: 3px solid #d3fb52; padding-top: 14px; }
.cat-stat-value { font-family: 'Unbounded', sans-serif !important; font-weight: 700; font-size: 1.8rem; }
.cat-stat-label { font-size: 13px; color: #6b6b6b; margin-top: 4px; }
.cat-aside-cta {
  display: block; text-align: center; background: #0d0d0d; color: #ffffff;
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 13px;
  padding: 14px 20px; text-decoration: none; margin-top: 28px;
}
.cat-aside-cta:hover { color: #ffffff; }

/* ---- Full-width bands (process / why / faq) ----------------------------- */
.cat-band { padding: clamp(64px,9vw,120px) clamp(24px,5vw,40px); }
.cat-band--light { background: #f5f5f0; }
.cat-band--dark { background: #0d0d0d; color: #ffffff; }
.cat-band-inner { max-width: 1360px; margin: 0 auto; }
.cat-band-title {
  font-family: 'Unbounded', sans-serif !important; font-weight: 700;
  font-size: clamp(1.8rem,3vw,2.6rem); letter-spacing: -0.01em; margin: 0 0 clamp(32px,5vw,56px); max-width: 680px;
}

/* Process steps */
.cat-steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(24px,3vw,32px); }
.cat-step-num {
  font-family: 'Unbounded', sans-serif !important; font-weight: 700; font-size: 2rem;
  color: #d3fb52; -webkit-text-stroke: 1.5px #0d0d0d; margin-bottom: 14px;
}
.cat-step-title { font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; }
.cat-step-text { margin: 0; color: #4a4a4a; line-height: 1.6; font-size: 0.95rem; }

/* Why cards (on dark band) */
.cat-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(24px,3vw,32px); }
.cat-card { border-top: 3px solid #d3fb52; padding-top: 20px; }
.cat-card-title { font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 1.05rem; margin: 0 0 10px; }
.cat-card-text { margin: 0; color: #b8b8b8; line-height: 1.6; font-size: 0.95rem; }

/* ---- FAQ ---------------------------------------------------------------- */
.cat-faq-inner { max-width: 900px; margin: 0 auto; }
.cat-faq-title {
  font-family: 'Unbounded', sans-serif !important; font-weight: 700;
  font-size: clamp(1.8rem,3vw,2.4rem); letter-spacing: -0.01em; margin: 0 0 clamp(32px,5vw,48px);
}
.cat-faq-item { border-top: 1px solid rgba(13,13,13,0.16); padding: 20px 0; }
.cat-faq-item:last-child { border-bottom: 1px solid rgba(13,13,13,0.16); }
.cat-faq-q {
  cursor: pointer; list-style: none; font-family: 'Unbounded', sans-serif !important; font-weight: 600;
  font-size: 1rem; display: flex; justify-content: space-between; align-items: center;
}
.cat-faq-q span { color: #6b6b6b; font-size: 1.2rem; }
.cat-faq-a { margin: 14px 0 0; color: #4a4a4a; line-height: 1.7; }

/* ---- Related categories ------------------------------------------------- */
.cat-related { padding-top: clamp(56px,8vw,96px); padding-bottom: clamp(56px,8vw,96px); }
.cat-related-label {
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #6b6b6b; margin-bottom: 20px;
}
.cat-related-title {
  font-family: 'Unbounded', sans-serif !important; font-weight: 700;
  font-size: clamp(1.5rem,2.4vw,2rem); letter-spacing: -0.01em; margin: 0 0 clamp(28px,4vw,40px); max-width: 640px;
}
.cat-related-links { display: flex; flex-wrap: wrap; gap: 16px; }
.cat-related-link {
  border: 1px solid rgba(13,13,13,0.16); padding: 16px 24px;
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 0.9rem;
  text-decoration: none; flex: 1 1 220px;
}

/* ---- Final CTA ---------------------------------------------------------- */
.cat-cta { padding-top: 0; padding-bottom: clamp(64px,9vw,120px); }
.cat-cta-box {
  background: #d3fb52; padding: clamp(48px,7vw,88px) clamp(28px,5vw,64px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px;
}
.cat-cta-text { max-width: 640px; }
.cat-cta-title {
  font-family: 'Unbounded', sans-serif !important; font-weight: 700;
  font-size: clamp(1.8rem,3.4vw,2.8rem); letter-spacing: -0.01em; margin: 0 0 12px; color: #0d0d0d;
}
.cat-cta-p { margin: 0; color: #3a3a1a; font-size: 1rem; }
.cat-cta-btn {
  background: #0d0d0d; color: #ffffff; font-family: 'Unbounded', sans-serif !important;
  font-weight: 600; font-size: 15px; padding: 18px 30px; text-decoration: none; text-align: center;
}
.cat-cta-btn:hover { color: #ffffff; }

/* ---- The WP page's own default article -------------------------------- */
/* On category pages the entire page is our injected .cat-page content; the
   default WP article (now title-less, see the generate_show_title filter) is
   empty and redundant, so remove it rather than leave a blank block at the
   bottom. This stylesheet only loads on category pages, so it's safe here. */
.content-area { display: none; }

/* ---- Mobile: gallery becomes a swipeable one-at-a-time slider ---------- */
/* On desktop the gallery is a 4-up grid. On phones that grid squeezes the
   cards and their gaps to nothing, so below 768px it turns into a horizontal
   scroll-snap slider showing one card at a time with a peek of the next, plus
   the swipe-hint pill. The side gutter lives on the scroll container itself
   (not the section) so the LAST card keeps its right-hand breathing room — a
   right padding on the section wouldn't be honoured at the end of the scroll. */
@media (max-width: 768px) {
  .cat-gallery { padding-left: 0; padding-right: 0; }
  .cat-gallery-intro { padding-left: clamp(20px,5vw,40px); padding-right: clamp(20px,5vw,40px); }
  .cat-gallery-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: clamp(20px,5vw,40px);
    padding: 0 clamp(20px,5vw,40px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-gallery-grid::-webkit-scrollbar { display: none; }
  .cat-gallery-cell {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .cat-gallery-hint { display: block; }
}

/* ---- Floating "dynamic island" table of contents ----------------------- */
/* A pill fixed to the bottom-centre of the viewport. .cat-island itself is NOT
   positioned/transformed, so its fixed children resolve against the viewport;
   only .cat-island-box is transformed (for centring), and its own children are
   absolutely positioned within it, so the transform-vs-fixed trap is avoided. */
.cat-island[hidden] { display: none; }
.cat-island { box-sizing: border-box; }
.cat-island *, .cat-island *::before, .cat-island *::after { box-sizing: border-box; }

.cat-island-backdrop {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(13,13,13,0.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.cat-island.is-open .cat-island-backdrop { opacity: 1; pointer-events: auto; }

.cat-island-box {
  position: fixed; left: 50%; bottom: clamp(18px,4vw,30px);
  transform: translateX(-50%);
  z-index: 9999;
  width: min(300px, calc(100vw - 32px));
  height: 52px;
  border-radius: 26px;
  background: #0d0d0d;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 44px rgba(0,0,0,0.4);
  overflow: hidden;
  transition: width 0.45s cubic-bezier(0.22,1,0.36,1),
              height 0.45s cubic-bezier(0.22,1,0.36,1),
              border-radius 0.45s cubic-bezier(0.22,1,0.36,1);
  animation: cat-island-in 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.cat-island.is-open .cat-island-box {
  width: min(360px, calc(100vw - 24px));
  height: min(60vh, 440px);
  border-radius: 24px;
}
@keyframes cat-island-in {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* Collapsed pill contents */
.cat-island-collapsed {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: none; border: 0; cursor: pointer; color: inherit;
  text-align: left; font: inherit;
  transition: opacity 0.3s ease;
}
.cat-island.is-open .cat-island-collapsed { opacity: 0; pointer-events: none; }
.cat-island-dot { width: 8px; height: 8px; border-radius: 50%; background: #d3fb52; flex-shrink: 0; }
.cat-island-active {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: #ffffff;
}
.cat-island-ring { flex-shrink: 0; transform: rotate(-90deg); }
.cat-island-ring-bg { stroke: rgba(255,255,255,0.2); }
.cat-island-ring-fg { stroke: #d3fb52; transition: stroke-dashoffset 0.15s ease-out; }

/* Expanded panel contents */
.cat-island-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease 0.05s;
}
.cat-island.is-open .cat-island-panel { opacity: 1; pointer-events: auto; }
.cat-island-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 12px 22px;
}
.cat-island-label {
  font-family: 'Unbounded', sans-serif !important; font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.cat-island-close {
  display: flex; padding: 2px; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.5); transition: color 0.2s ease;
}
.cat-island-close:hover { color: #ffffff; }
.cat-island-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 12px; }
/* The .cat-page prefix on the colour rules is deliberate: the island sits inside
   .cat-page, whose `a { color:#0d0d0d }` (and its :hover) would otherwise paint
   these links near-black on the dark panel. .cat-page .cat-island-link out-
   specifies that so the links stay light. */
.cat-island-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.cat-page .cat-island-link { color: rgba(255,255,255,0.5); }
.cat-island-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-page .cat-island-link:hover { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.cat-page .cat-island-link.is-active { background: rgba(255,255,255,0.1); color: #ffffff; font-weight: 500; }
.cat-island-mark {
  width: 6px; height: 6px; border-radius: 50%; background: #d3fb52; flex-shrink: 0;
  transform: scale(0); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
}
.cat-island-link.is-active .cat-island-mark { transform: scale(1); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cat-island-box { animation: none; }
  .cat-island-box, .cat-island-collapsed, .cat-island-panel,
  .cat-island-backdrop, .cat-island-ring-fg, .cat-island-link, .cat-island-mark {
    transition: none;
  }
}