/* =========================================================================
   Timberkids — catalog layout (tk-catalog.css)
   Everything scoped under .tk-catalog. No global/element resets; no theme
   header/nav/footer rules. Depends on tk-cards.css for --tk-* tokens + cards.
   ========================================================================= */

.tk-catalog {
  font-family:var(--tk-font);
  max-width:1340px; margin:0 auto; padding:clamp(18px,3vw,30px) clamp(16px,3vw,32px) 80px;
  color:var(--tk-ink);
}
.tk-catalog *,
.tk-catalog *::before,
.tk-catalog *::after { box-sizing:border-box; }

/* ---- head ---- */
.tk-catalog__head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:22px; border-bottom:1px solid var(--tk-line); margin-bottom:28px;
}
.tk-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.22em; color:var(--tk-wood-deep);
  margin-bottom:12px;
}
.tk-eyebrow::before { content:""; width:18px; height:2px; background:var(--tk-wood); border-radius:2px; }
.tk-catalog .tk-h1 {
  font-family:var(--tk-font); font-size:clamp(32px,5vw,52px); font-weight:900; letter-spacing:-.035em;
  line-height:1.04; margin:0; color:var(--tk-ink);
}
.tk-count { font-size:15px; font-weight:700; color:var(--tk-muted); margin-top:10px; }
.tk-count .woocommerce-result-count { margin:0; font-size:inherit; color:inherit; text-transform:none; float:none; }

/* ---- controls (sort + mobile categories trigger) ---- */
.tk-catalog__controls { display:flex; align-items:center; gap:12px; padding-bottom:4px; }
.tk-cat-trigger { display:none; }

.tk-catalog .woocommerce-ordering { margin:0; }
.tk-catalog .woocommerce-ordering select.orderby,
.tk-catalog select.orderby {
  appearance:none; -webkit-appearance:none; font-family:var(--tk-font);
  font-weight:800; font-size:14px; color:var(--tk-ink);
  background:var(--tk-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B5249' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
  background-size:16px; border:1px solid var(--tk-line-strong); border-radius:999px;
  padding:12px 44px 12px 18px; box-shadow:var(--tk-sh-rest); cursor:pointer;
  transition:border-color var(--tk-dur) var(--tk-ease);
}
.tk-catalog .woocommerce-ordering select.orderby:hover { border-color:var(--tk-wood); }

/* ---- two columns ---- */
.tk-catalog__cols { display:grid; grid-template-columns:274px 1fr; gap:clamp(24px,3vw,44px); align-items:start; }

/* ---- sidebar ---- */
.tk-sidebar { position:sticky; top:88px; max-height:calc(100vh - 112px); overflow-y:auto; overscroll-behavior:contain; }
.tk-sidebar__inner { font-family:var(--tk-font); }
.tk-sidebar__title {
  display:flex; align-items:center; gap:9px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.16em;
  color:var(--tk-ink-soft); padding:0 14px 14px; border-bottom:1px solid var(--tk-line); margin-bottom:8px;
}
.tk-sidebar__title svg { width:16px; height:16px; color:var(--tk-wood-deep); }

.tk-cat-list { list-style:none; margin:0; padding:0; }
.tk-cat { position:relative; }
.tk-cat__row { display:flex; align-items:center; }
.tk-cat__link {
  flex:1; min-width:0; display:flex; align-items:center; padding:10px 6px 10px 14px; border-radius:var(--tk-r-item);
  font-size:14.5px; font-weight:700; color:var(--tk-ink-soft) !important; text-decoration:none !important; background:none;
  transition:background var(--tk-dur) var(--tk-ease),color var(--tk-dur) var(--tk-ease),padding-left var(--tk-dur) var(--tk-ease);
}
.tk-cat__link:hover { background:var(--tk-paper-2); color:var(--tk-ink) !important; padding-left:18px; }
.tk-cat__name { word-break:break-word; }
/* count is a row-level flex sibling — always in the same column */
.tk-cat__count {
  flex:0 0 auto; min-width:22px; text-align:right; padding:0 4px;
  font-size:12px; font-weight:800; color:var(--tk-muted); font-variant-numeric:tabular-nums;
}
/* phantom spacer: aligns rows without a toggle with rows that have one */
.tk-cat__toggle-ph { flex:0 0 34px; }
/* plain chevron, no themed button box */
.tk-cat__toggle {
  width:34px; min-width:34px; flex:0 0 34px; padding:0 !important; border:0 !important; background:none !important; box-shadow:none !important;
  cursor:pointer; border-radius:var(--tk-r-item); display:grid; place-items:center; color:var(--tk-muted) !important;
  transition:background var(--tk-dur) var(--tk-ease),color var(--tk-dur) var(--tk-ease);
}
.tk-cat__toggle svg { width:15px; height:15px; display:block; transition:transform var(--tk-dur) var(--tk-ease); }
.tk-cat__toggle:hover { background:var(--tk-paper-2) !important; color:var(--tk-ink) !important; }

.tk-cat.is-active > .tk-cat__row .tk-cat__link {
  background:var(--tk-wood-soft) !important; color:var(--tk-ink) !important; font-weight:800; box-shadow:inset 3px 0 0 var(--tk-brand) !important;
}
.tk-cat.is-active > .tk-cat__row .tk-cat__count { color:var(--tk-wood-deep); }

.tk-sub { display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows 320ms var(--tk-ease); }
.tk-cat.is-open > .tk-sub { grid-template-rows:1fr; }
.tk-sub__inner { min-height:0; overflow:hidden; }
.tk-cat.is-open > .tk-cat__row .tk-cat__toggle svg { transform:rotate(90deg); }
.tk-sub a {
  display:flex; align-items:center; gap:8px;
  padding:8px 34px 8px 34px; margin:1px 0; border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--tk-muted); text-decoration:none;
  transition:background var(--tk-dur) var(--tk-ease),color var(--tk-dur) var(--tk-ease);
}
.tk-sub a { color:var(--tk-muted) !important; text-decoration:none !important; }
.tk-sub a:hover, .tk-sub a.is-active { background:var(--tk-paper-2); color:var(--tk-ink) !important; }
/* subcat name: truncate so long names don't push the count out of column */
.tk-sub__name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* subcat count: same min-width + text-align as parent .tk-cat__count */
.tk-sub__count { flex:0 0 auto; min-width:22px; text-align:right; font-size:11.5px; font-variant-numeric:tabular-nums; }

.tk-sidebar__cta { margin-top:18px; padding:16px; border-radius:var(--tk-r-item); background:linear-gradient(160deg,#2a221a,#3a2e22); color:#f3ece1; }
.tk-sidebar__cta b { display:block; font-size:14px; font-weight:800; margin-bottom:4px; }
.tk-sidebar__cta p { margin:0 0 12px; font-size:12.5px; font-weight:600; line-height:1.5; color:#c9bdac; }
.tk-sidebar__cta a { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--tk-brand); text-decoration:none; }
.tk-sidebar__cta a svg { width:14px; height:14px; transition:transform var(--tk-dur) var(--tk-ease); }
.tk-sidebar__cta a:hover svg { transform:translateX(3px); }

.tk-drawer-close { display:none; border:0; background:none; cursor:pointer; }

/* ---- product grid ---- */
.tk-catalog__main ul.products {
  /* 220px min => 3 cols in the ~764px main column (theme caps .tk-catalog at 1140px
     and the sidebar takes 274px); 238px only fit 2 oversized cards. */
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(16px,2.2vw,28px); margin:0; padding:0; list-style:none;
  /* natural-height cards (titles are line-clamped, not fixed-height) — align to the top so
     a short-name card doesn't stretch and open dead space under its button. */
  align-items:start;
}
.tk-catalog__main ul.products::before,
.tk-catalog__main ul.products::after { content:none; display:none; }
/* !important: WC's own `.woocommerce ul.products li.product{width:48%;float:left;margin}`
   has equal specificity and loads AFTER us (woocommerce-smallscreen), so without
   !important the cards collapse to 48% + float and fall out of the grid tracks. */
.tk-catalog__main ul.products li.product {
  width:auto !important; max-width:none !important; margin:0 !important; float:none !important; clear:none !important;
}

/* pagination */
.tk-catalog .woocommerce-pagination { margin-top:40px; text-align:center; }
.tk-catalog .woocommerce-pagination ul { display:inline-flex; gap:6px; border:0; }
.tk-catalog .woocommerce-pagination ul li { border:0; margin:0; }
.tk-catalog .woocommerce-pagination a.page-numbers,
.tk-catalog .woocommerce-pagination span.page-numbers {
  min-width:42px; height:42px; line-height:42px; padding:0 12px; border-radius:12px; font-weight:800;
  background:var(--tk-surface); box-shadow:inset 0 0 0 1px var(--tk-line-strong); color:var(--tk-ink-soft);
}
.tk-catalog .woocommerce-pagination span.current { background:var(--tk-ink); color:#fff; box-shadow:none; }

/* overlay (mobile) */
.tk-overlay {
  position:fixed; inset:0; background:rgba(36,29,21,.45); z-index:1000;
  opacity:0; visibility:hidden; transition:opacity var(--tk-dur) var(--tk-ease),visibility var(--tk-dur) var(--tk-ease);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.tk-overlay.is-open { opacity:1; visibility:visible; }

/* focus ring (scoped) */
.tk-catalog a:focus-visible,
.tk-catalog button:focus-visible,
.tk-catalog select:focus-visible { outline:2.5px solid var(--tk-brand); outline-offset:2px; border-radius:8px; }

/* ===================== responsive ===================== */
@media (max-width:1023px) {
  .tk-catalog__cols { grid-template-columns:1fr; }

  /* controls become a sticky bar; categories trigger appears */
  .tk-catalog__head { align-items:flex-start; }
  .tk-catalog__controls {
    position:sticky; top:0; z-index:30; width:100%; margin-top:14px; padding:12px 0;
    background:linear-gradient(var(--tk-paper) 72%, rgba(250,247,242,0));
  }
  .tk-cat-trigger {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:0 0 auto;
    background:var(--tk-surface) !important; border:1px solid var(--tk-line-strong); border-radius:999px;
    padding:12px 18px; font-family:var(--tk-font); font-weight:800; font-size:14px; color:var(--tk-ink) !important;
    box-shadow:var(--tk-sh-rest); cursor:pointer;
  }
  .tk-cat-trigger svg { width:17px; height:17px; color:var(--tk-wood-deep); }
  .tk-catalog__controls .woocommerce-ordering { flex:1; }
  .tk-catalog__controls select.orderby { width:100%; }

  /* sidebar -> left slide-out drawer */
  .tk-sidebar {
    position:fixed; top:0; left:0; bottom:0; width:min(86vw,340px); z-index:1001; max-height:none;
    background:var(--tk-paper); padding:20px 16px; overflow-y:auto;
    transform:translateX(-102%); transition:transform 340ms var(--tk-ease);
    box-shadow:0 24px 60px -20px rgba(36,29,21,.26);
  }
  .tk-sidebar.is-open { transform:translateX(0); }
  .tk-drawer-close {
    display:grid; place-items:center; position:absolute; top:16px; right:16px;
    width:38px; height:38px; padding:0 !important; border:0 !important; box-shadow:none !important;
    border-radius:12px; background:var(--tk-paper-2) !important; color:var(--tk-ink) !important; cursor:pointer;
  }
  .tk-drawer-close svg { width:18px; height:18px; display:block; }
  .tk-sidebar__cta { display:none; }
}
@media (max-width:560px) {
  /* phones: keep the approved 2-up grid (design screens 2-3) */
  .tk-catalog__main ul.products { grid-template-columns:repeat(2,1fr); gap:12px; }
  .tk-catalog .tk-h1 { font-size:30px; }
}
@media (max-width:359px) {
  /* tiny phones / dev-tools narrow: 1-up so cards + CTAs stay full-width (no blob) */
  .tk-catalog__main ul.products { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .tk-catalog *, .tk-sidebar, .tk-overlay { transition-duration:1ms !important; }
}