@import url("../tokens/design-tokens.css");

:root {
  --collection-control-size: calc(var(--space-18) * 2);
  --collection-sort-min-width: auto;
  --collection-sidebar-width: 240px;
  --collection-list-media-width: 360px;
  --collection-list-media-width-lg: 300px;
  --collection-list-action-size: 28px;
  --collection-empty-max-width: 420px;
  --collection-breakpoint-lg: 1024px;
  --collection-breakpoint-sm: 640px;
  --collection-main-section-gap: 16px;

  --collection-color-bg: var(--color-bg);
  --collection-color-border: var(--color-border);
  --collection-color-text: var(--color-text);
  --collection-color-brand: var(--brand);
  --collection-color-overlay: color-mix(in srgb, var(--collection-color-text) 1%, transparent);
  --collection-color-text-35: color-mix(in srgb, var(--collection-color-text) 35%, transparent);
  --collection-color-text-38: color-mix(in srgb, var(--collection-color-text) 38%, transparent);
  --collection-color-text-45: color-mix(in srgb, var(--collection-color-text) 45%, transparent);
  --collection-color-text-55: color-mix(in srgb, var(--collection-color-text) 55%, transparent);
  --collection-color-text-60: color-mix(in srgb, var(--collection-color-text) 60%, transparent);
  --collection-color-text-62: color-mix(in srgb, var(--collection-color-text) 62%, transparent);
  --collection-color-text-72: color-mix(in srgb, var(--collection-color-text) 72%, transparent);
  --collection-color-text-76: color-mix(in srgb, var(--collection-color-text) 76%, transparent);
  --collection-color-text-78: color-mix(in srgb, var(--collection-color-text) 78%, transparent);
  --collection-color-text-82: color-mix(in srgb, var(--collection-color-text) 82%, transparent);
  --collection-color-text-88: color-mix(in srgb, var(--collection-color-text) 88%, transparent);
  --collection-color-text-90: color-mix(in srgb, var(--collection-color-text) 90%, transparent);
  --collection-color-text-92: color-mix(in srgb, var(--collection-color-text) 92%, transparent);
  --collection-color-track: color-mix(in srgb, var(--collection-color-text) 22%, transparent);
  --collection-color-hover: color-mix(in srgb, var(--collection-color-text) 2%, transparent);
  --collection-color-hover-strong: color-mix(in srgb, var(--collection-color-text) 3%, transparent);
  --collection-color-hover-ring: color-mix(in srgb, var(--collection-color-text) 4%, transparent);
  --collection-color-border-soft: color-mix(in srgb, var(--collection-color-text) 6%, transparent);
  --collection-color-border-mid: color-mix(in srgb, var(--collection-color-text) 8%, transparent);
  --collection-color-border-strong: color-mix(in srgb, var(--collection-color-text) 12%, transparent);
  --collection-color-border-stronger: color-mix(in srgb, var(--collection-color-text) 14%, transparent);
  --collection-color-border-hover: color-mix(in srgb, var(--collection-color-text) 18%, transparent);
  --collection-color-border-active: color-mix(in srgb, var(--collection-color-brand) 22%, transparent);
  --collection-color-brand-soft-04: color-mix(in srgb, var(--collection-color-brand) 4%, transparent);
  --collection-color-brand-soft-05: color-mix(in srgb, var(--collection-color-brand) 5%, transparent);
  --collection-color-brand-soft-06: color-mix(in srgb, var(--collection-color-brand) 6%, transparent);
  --collection-color-brand-soft-08: color-mix(in srgb, var(--collection-color-brand) 8%, transparent);
  --collection-color-brand-soft-10: color-mix(in srgb, var(--collection-color-brand) 10%, transparent);
  --collection-color-brand-75: color-mix(in srgb, var(--collection-color-brand) 75%, transparent);
  --collection-color-brand-92: color-mix(in srgb, var(--collection-color-brand) 92%, transparent);

  /* Collection typography aliases mapped to global scale */
  --collection-type-page-title-size: var(--text-page-title-size);
  --collection-type-page-title-weight: var(--text-page-title-weight);
  --collection-type-page-title-line: var(--text-page-title-line);
  --collection-type-page-title-letter: var(--text-page-title-letter);

  --collection-type-body-size: var(--text-body-size);
  --collection-type-body-weight: var(--text-body-weight);
  --collection-type-body-line: var(--text-body-line);

  --collection-type-body-small-size: var(--text-body-sm-size);
  --collection-type-body-small-weight: var(--text-body-sm-weight);
  --collection-type-body-small-line: var(--text-body-sm-line);

  --collection-type-label-size: var(--text-label-size);
  --collection-type-label-weight: var(--text-label-weight);
  --collection-type-label-line: var(--text-label-line);
  --collection-type-label-letter: var(--text-label-letter);

  --collection-type-button-size: var(--text-button-size);
  --collection-type-button-weight: var(--text-button-weight);
  --collection-type-button-line: var(--text-button-line);
  --collection-type-button-letter: var(--text-button-letter);

  --collection-type-chip-size: var(--text-chip-size);
  --collection-type-chip-weight: var(--text-chip-weight);
  --collection-type-chip-line: var(--text-chip-line);
  --collection-type-chip-letter: var(--text-chip-letter);
}
/* =========================================================
   Curattr - Collection Page (layout + collection card system)
   Collection-only stylesheet (layout, sidebar, collection cards)
   Requires: global tokens + header system in assets/styles.css
   ========================================================= */

/* =========================================================
   Collection subheader (sticky subbar under topbar)
   - Sticky surface: .collection-subbar
   - Controls: layout only (no sticky/background/shadow)
   ========================================================= */

/* The mount is placed right under topbar in collection.html */
.collection-subbar {
  /* Sticky under the global topbar; JS sets --topbar-offset */
  position: sticky;
  top: var(--topbar-offset, 0px);
  z-index: var(--z-index-dropdown, 150);

  /* Visuals for the subheader surface */
  background: var(--surface, #fff);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);

  /* Slimmer like category header strip */
  padding: var(--space-6, 6px) 0;
}

/* Optional: restore prior separation between bar and content if needed */
/* .collection-subbar { margin-bottom: var(--space-16, 16px); } */

/* If your JS uses [hidden] on the mount, keep it fully out of flow */
.collection-subbar[hidden] { display: none; }

/* Header search autocomplete overrides for collection pages */
.header-search .ghost-wrap {
  position: relative;
}

.page-collection #headerSearchGhost,
.page-app-collection #headerSearchGhost {
  display: none;
}

.page-collection .header-search .ghost-wrap,
.page-app-collection .header-search .ghost-wrap {
  overflow: visible;
}

.header-autocomplete-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 80;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.header-autocomplete-option {
  padding: 10px 12px;
  border-radius: 8px;
  color: #0f172a;
  font-size: var(--collection-type-body-small-size);
  line-height: var(--collection-type-body-small-line);
  cursor: pointer;
}

.header-autocomplete-option:hover {
  background: #eff6ff;
}

.header-autocomplete-option.is-active {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Controls inside the subbar must NOT behave like the legacy sticky bar */
#collectionSubbarMount .collection-controls {
  /* Align to your content/grid width */
  max-width: var(--max, 1320px);
  margin: 0 auto;
  padding-left: var(--space-24, 24px);
  padding-right: var(--space-24, 24px);

  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

/* =========================================================
   Legacy controls bar behavior (only when controls are still in <main>)
   IMPORTANT: This selector is the "kill switch" for the old sticky look
   once the node moves under #collectionSubbarMount.
   ========================================================= */

main .collection-controls {
  /* keep whatever you had before, but ONLY in main */
  position: sticky;
  top: calc(var(--topbar-offset, 0px) + var(--space-10, 10px));
  z-index: 35;
}

/* ---------------------------------------------------------
   Layout: sidebar + main
   --------------------------------------------------------- */

/* Collection controls = layout only (sticky/visuals live on .collection-subbar now) */
.collection-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10, 10px);

  /* Ensure it never "looks like a card" by default */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* If you have a left/right grouping inside controls, keep them intact */
.collection-controls .controls-left,
.collection-controls .controls-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8, 8px);
}

/* SEO header sits in main flow (above grid), not inside sticky subbar */
.page-collection .collection-seo,
.page-app-collection .collection-seo{
  /* Bring H1/H2 higher (less top air), but keep a clean gap before cards */
  margin: var(--space-4, 8px) 0 0;
  padding: 0 0 var(--collection-main-section-gap);
}

.page-collection .collection-controls .controls-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* =========================================================
   Collection SEO header (H1 + description) inside subbar
   ========================================================= */
.page-collection .collection-seo-head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  min-width: 0;
  width: 100%;
}

/* Match the homepage section-title scale on collection/app collection pages */
.page-collection .collection-seo-h1,
.page-app-collection .collection-seo-h1{
  margin: 0;
  font-size: var(--text-section-title-size);
  font-weight: var(--text-section-title-weight);
  letter-spacing: var(--text-section-title-letter);
  line-height: var(--text-section-title-line);
  color: rgba(15, 23, 42, 0.88);
}

.page-collection .collection-seo-desc{
  margin: 0;
  width: 100%;

  font-size: var(--collection-type-body-size);
  font-weight: var(--collection-type-body-weight);
  line-height: var(--collection-type-body-line);
  color: var(--collection-color-text-62);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  max-width: none;
}

.page-collection .collection-seo-desc.is-expanded{
  -webkit-line-clamp: unset;
}

.page-collection .collection-seo-toggle{
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--collection-type-button-size);
  font-weight: var(--collection-type-button-weight);
  line-height: var(--collection-type-button-line);
  letter-spacing: var(--collection-type-button-letter);
  color: var(--collection-color-brand);
  cursor: pointer;
}

.page-collection .collection-seo-toggle:hover{ text-decoration: underline; }

.page-collection .collection-seo-meta{
  margin-top: var(--space-2);
}

.controls-title {
  font-size: var(--collection-type-label-size);
  font-weight: var(--collection-type-label-weight);
  line-height: var(--collection-type-label-line);
  letter-spacing: var(--collection-type-label-letter);
  color: var(--collection-color-text-72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controls-title:empty {
  display: none;
}

/* Search context row (next to heading) */
.search-context {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  margin-left: var(--space-12);
  font-size: var(--collection-type-body-size);
  font-weight: var(--collection-type-body-weight);
  line-height: var(--collection-type-body-line);
  color: var(--collection-color-text-62);
  white-space: nowrap;
}

.search-context-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.search-context-q {
  font-weight: var(--font-weight-bold);
  color: var(--collection-color-text-90);
}


.controls-right {
  display: flex;
  align-items: center;
  /* Optional: make right-side controls feel tighter without redesigning components */
  gap: var(--space-6, 6px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.sort-dropdown {
  position: relative;
}

.sort-dropdown .sort-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: var(--collection-control-size);
  min-width: 0;
  width: auto;
  padding: 0 var(--space-12);
  border-radius: var(--radius-lg); /* match wishlist / modern rounded rect */
  color: var(--collection-color-text-72);
  white-space: nowrap;
  cursor: pointer;
}

.sort-dropdown .sort-trigger:hover {
  border-color: var(--collection-color-border-hover);
}

.sort-dropdown .sort-trigger:focus {
  outline: none;
  border-color: var(--ring-border);
  box-shadow: var(--ring);
}

.sort-dropdown .menu-panel {
  position: absolute;
  top: calc(100% + var(--space-8));
  left: auto;
  right: 0;
  min-width: var(--collection-sort-min-width);
  width: auto;
  max-width: none;
  padding: var(--space-8);
  display: none;
  background: var(--collection-color-bg);
  border: 1px solid var(--collection-color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-index-base);
}

.sort-dropdown.is-open .menu-panel {
  display: block;
}

.sort-dropdown .menu-item {
  white-space: nowrap;
  padding: var(--space-10) var(--space-12);
}

.sort-dropdown .menu-item:hover {
  background: var(--collection-color-hover-ring);
  border-radius: var(--radius-md);
}

.sort-dropdown .menu-item.is-active {
  background: var(--collection-color-brand-soft-08);
  border-radius: var(--radius-md);
}

/* pill-btn moved to global styles.css */


.sort-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.sort-caption {
  font-size: var(--collection-type-button-size);
  font-weight: var(--collection-type-button-weight);
  line-height: var(--collection-type-button-line);
  letter-spacing: var(--collection-type-button-letter);
  color: var(--collection-color-text-72);
}

.sort-spacer {
  display: none;
}

.sort-dir-btn {
  height: var(--collection-control-size);
  padding: 0 var(--space-10);
  border-radius: var(--radius-md);
  border: 1px solid var(--collection-color-border-stronger);
  background: var(--collection-color-bg);
  font-size: var(--collection-type-button-size);
  font-weight: var(--collection-type-button-weight);
  line-height: var(--collection-type-button-line);
  letter-spacing: var(--collection-type-button-letter);
  cursor: pointer;
}

.sort-dir-btn:focus-visible {
  outline: var(--space-2) solid var(--collection-color-track);
  outline-offset: var(--space-2);
}

.sort-label {
  font-size: var(--collection-type-chip-size);
  font-weight: var(--collection-type-chip-weight);
  line-height: var(--collection-type-chip-line);
  letter-spacing: var(--collection-type-chip-letter);
  color: var(--collection-color-text-72);
  display: inline-flex;
  align-items: center;
}

.icon-toggle {
  width: var(--collection-control-size);
  height: var(--collection-control-size);
  border-radius: var(--radius-md);
  border: 1px solid var(--collection-color-border-strong);
  background: var(--collection-color-bg);
  font-size: var(--collection-type-button-size);
  font-weight: var(--collection-type-button-weight);
  line-height: var(--collection-type-button-line);
  color: var(--collection-color-text-60);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
  cursor: pointer;
}

.icon-toggle:not(:disabled):hover {
  border-color: var(--collection-color-track);
  background: var(--collection-color-hover);
  color: var(--collection-color-text-78);
}

.icon-toggle:focus-visible {
  outline: none;
  border-color: var(--ring-border);
  box-shadow: var(--ring);
}

.icon-toggle:active:not(:disabled) {
  border-color: var(--ring-border-strong);
  box-shadow: var(--ring-strong);
  background: var(--collection-color-brand-soft-04);
}

.icon-toggle.is-active {
  border-color: var(--ring-border);
  box-shadow: var(--ring);
  color: var(--collection-color-text-82);
}

.collection-wrap {
  display: grid;
  grid-template-columns: var(--collection-sidebar-width) 1fr;
  width: 100%;
  min-width: 0;
  gap: var(--space-18);
  padding: var(--space-24) 0;
}

.collection-wrap > * {
  min-width: 0;
}

/* ---------------------------------------------------------
   Sidebar (Categories + Filters)
   --------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: calc(var(--topbar-offset) + var(--space-18));
  align-self: start;
  max-height: calc(100vh - (var(--topbar-offset) + var(--collection-control-size)));
  overflow: hidden;
  /* internal scroll handled by .side-panel */
}

.page-collection .sidebar,
.page-app-collection .sidebar {
  border-right: 1px solid var(--collection-color-border-soft);
  padding-right: var(--space-12, 12px);
}

.page-collection .collection-wrap,
.page-app-collection .collection-wrap {
  column-gap: var(--space-18, 24px);
}

.page-shell .sidebar {
  top: var(--space-18);
  max-height: calc(100vh - (var(--collection-control-size) + var(--space-18)));
}

.side-panel {
  max-height: inherit;
  overflow-y: auto;
  padding-right: var(--space-6);

  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: var(--collection-color-track) transparent;
}

.side-panel::-webkit-scrollbar {
  width: var(--space-6);
}

.side-panel::-webkit-scrollbar-track {
  background: transparent;
}

.side-panel::-webkit-scrollbar-thumb {
  background: var(--collection-color-track);
  border-radius: var(--radius-sm);
}

.side-section {
  padding: var(--space-4) 0 var(--space-10);
}

/* Sidebar utility button spacing */
#categories,
#filters {
  padding-bottom: var(--space-12);
}

#categories .btn-util-block,
#filters .btn-util-block {
  margin: var(--space-12) var(--space-12) var(--space-4);
}

#clearAllFiltersBtn {
  font-size: var(--collection-type-button-size);
  font-weight: var(--collection-type-button-weight);
  line-height: var(--collection-type-button-line);
  letter-spacing: var(--collection-type-button-letter);
  color: var(--collection-color-text-55);
}

#clearAllFiltersBtn:hover {
  color: var(--collection-color-text-82);
}

.side-title {
  font-size: var(--collection-type-label-size);
  font-weight: var(--collection-type-label-weight);
  line-height: var(--collection-type-label-line);
  letter-spacing: var(--collection-type-label-letter);
  text-transform: uppercase;
  color: var(--collection-color-text-55);
  margin: var(--space-4) 0 var(--space-6);
}

.side-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------
   Categories
   --------------------------------------------------------- */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cat-item {
  width: 100%;
  text-align: left;

  border: 1px solid transparent;
  background: transparent;

  padding: var(--space-6) var(--space-10);
  border-radius: var(--radius-md);

  /* match filter option typography */
  font-size: var(--collection-type-body-small-size);
  font-weight: var(--collection-type-body-small-weight);
  line-height: var(--collection-type-body-small-line);
  color: var(--collection-color-text-72);

  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

  /* allow label + caret layout */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.cat-item .check-count {
  flex-shrink: 0;
}

.cat-item:hover {
  background: var(--collection-color-hover-strong);
  color: var(--collection-color-text-88);
}

.cat-item.is-active {
  color: var(--collection-color-text-92);
  background: var(--collection-color-brand-soft-06);
  border-color: color-mix(in srgb, var(--collection-color-brand) 18%, transparent);
}

/* Expanded (accordion open) but NOT selected:
   subtle cue so "open" != "selected" */
.cat-item.is-open:not(.is-active) {
  background: var(--collection-color-hover);
  border-color: var(--collection-color-border-soft);
  color: var(--collection-color-text-82);
}

/* Chevron treatment: open state slightly stronger */
.cat-item.is-open:not(.is-active) .cat-caret {
  color: var(--collection-color-text-55);
}

/* Selected + open stays primary (slightly stronger than base active) */
.cat-item.is-active.is-open {
  background: var(--collection-color-brand-soft-08);
  border-color: var(--collection-color-border-active);
}

.cat-item.is-active.is-open .cat-caret {
  color: var(--collection-color-brand-75);
}
/* caret (for categories that have subcats) */
.cat-label {
  pointer-events: none;
}

.cat-caret {
  pointer-events: none;
  font-size: var(--collection-type-button-size);
  line-height: var(--collection-type-button-line);
  color: var(--collection-color-text-45);
  transform: rotate(0deg);
  transition: transform var(--transition-fast);
}

/* open state: match accordion behavior */
.cat-item.is-open .cat-caret {
  transform: rotate(90deg);
}



/* Subcategories (small indent under category) */
.subcat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-6);
  padding-left: var(--space-10);
  /* small indent (not too much) */
}

.subcat-item {
  width: 100%;
  text-align: left;

  border: 1px solid transparent;
  background: transparent;

  padding: var(--space-6) var(--space-10);
  border-radius: var(--radius-md);

  font-size: var(--collection-type-body-small-size);
  font-weight: var(--collection-type-body-small-weight);
  line-height: var(--collection-type-body-small-line);
  color: var(--collection-color-text-62);
  cursor: pointer;

  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.subcat-item:hover {
  background: var(--collection-color-hover-strong);
  color: var(--collection-color-text-78);
}

.subcat-item.is-active {
  color: var(--collection-color-text-90);
  background: var(--collection-color-brand-soft-05);
  border-color: color-mix(in srgb, var(--collection-color-brand) 14%, transparent);
}

/* ---------------------------------------------------------
   Filters (legacy group styles kept for compatibility)
   --------------------------------------------------------- */
.filter-group {
  padding: var(--space-6) 0 var(--space-4);
  border-top: 1px solid var(--collection-color-border-soft);
}

.filter-group:first-of-type {
  border-top: 0;
  padding-top: var(--space-2);
}

.filter-label {
  font-size: var(--collection-type-label-size);
  font-weight: var(--collection-type-label-weight);
  line-height: var(--collection-type-label-line);
  letter-spacing: var(--collection-type-label-letter);
  color: var(--collection-color-text-82);
  margin: 0 0 var(--space-8);
}


/* ---------------------------------------------------------
   Accordion shell (Categories + Filters)
   --------------------------------------------------------- */
.filters-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.acc {
  border-top: 1px solid var(--collection-color-border-soft);
  padding-top: var(--space-6);
}

.acc:first-child {
  border-top: 0;
  padding-top: 0;
}

.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: var(--space-6) var(--space-6);
  border: 0;
  background: transparent;
  cursor: pointer;

  border-radius: var(--radius-md);
}

.acc-head:hover {
  background: var(--collection-color-hover);
}

.acc-title {
  font-size: var(--collection-type-button-size);
  font-weight: var(--collection-type-button-weight);
  line-height: var(--collection-type-button-line);
  letter-spacing: var(--collection-type-button-letter);
  color: var(--collection-color-text-76);
}

.acc-chevron {
  font-size: var(--collection-type-button-size);
  line-height: var(--collection-type-button-line);
  transform: rotate(0deg);
  transition: transform var(--transition-fast);
  color: var(--collection-color-text-45);
}

.acc-head[aria-expanded="true"] .acc-chevron {
  transform: rotate(90deg);
}

.acc-panel {
  padding: 0 0 var(--space-4);
}

/* Categories accordion uses same shell */
.cat-acc {
  border-top: 0;
  padding-top: 0;
}

.cat-acc .acc-panel {
  padding-top: var(--space-2);
}

/* ---------------------------------------------------------
   Checkbox row: label + count on right
   --------------------------------------------------------- */
.check {
  display: grid;
  grid-template-columns: var(--space-16) 1fr auto;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--space-6);
  padding-right: var(--space-8);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
}

.check:hover {
  background: var(--collection-color-hover);
}

.check input {
  width: var(--space-16);
  height: var(--space-16);
}

.check-label {
  font-size: var(--collection-type-body-small-size);
  font-weight: var(--collection-type-body-small-weight);
  line-height: var(--collection-type-body-small-line);
  color: var(--collection-color-text-72);
}

.check-count {
  font-size: var(--collection-type-caption-size);
  font-weight: var(--collection-type-caption-weight);
  line-height: var(--collection-type-caption-line);
  color: var(--collection-color-brand-92);
  background: var(--collection-color-brand-soft-10);
  border: 1px solid var(--collection-color-border-active);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  min-width: 28px;
  text-align: center;
}

/* Disabled (visible but not interactive) */
.check.is-disabled {
  cursor: not-allowed;
}

.check.is-disabled .check-label {
  color: var(--collection-color-text-38);
}

.check.is-disabled .check-count {
  color: var(--collection-color-text-35);
  background: var(--collection-color-hover-strong);
  border-color: var(--collection-color-border-mid);
}

.check.is-disabled input {
  opacity: 0.55;
}

/* ---------------------------------------------------------
   Heading
   --------------------------------------------------------- */
.main h1 {
  font-size: var(--collection-type-page-title-size);
  font-weight: var(--collection-type-page-title-weight);
  line-height: var(--collection-type-page-title-line);
  margin: 0 0 var(--space-10);
  letter-spacing: var(--collection-type-page-title-letter);
  color: var(--text);
}

/* Hide only legacy placeholder heading, not SEO H1 */
.page-collection #pageTitle{
  display: none;
}

.main h1 .count {
  font-weight: var(--font-weight-medium);
  color: var(--muted);
}

/* ---------------------------------------------------------
   Grid
   --------------------------------------------------------- */
.collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-grid-gap);
  align-items: start;
  justify-content: start;
}

.collection-grid > .collection-card {
  height: 100%;
}

/* ---------------------------------------------------------
   Collection page owns layout variants only.
   Core reusable card shell/media/body/title/meta/tags belong
   to assets/styles.css.
   --------------------------------------------------------- */

body.view-list .collection-grid {
  /* List view: 1-up (more room for richer content) */
  grid-template-columns: 1fr;
}

body.view-list .collection-card {
  /* Shared full-bleed list-view shell */
  --card-radius: var(--radius-xl, 16px);
  --card-border-color: var(--stroke, rgba(15, 23, 42, 0.10));
  --card-border: 1px solid var(--card-border-color);
  --card-bg: rgba(255, 255, 255, 1);
  --card-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  --card-padding: 0;
  --card-content-padding-y: 10px;
  --card-content-padding-x: var(--space-16, 16px);
  --card-gap: var(--space-6, 6px);
  --card-divider: rgba(15, 23, 42, 0.10);
  --card-image-radius: 0;
  --card-image-bg: #fff;
  --card-image-shadow: none;
  --card-title-color: var(--collection-color-text-90);
  --card-desc-color: var(--collection-color-text-78);
  --card-meta-color: var(--muted, rgba(15, 23, 42, 0.72));
  --card-pill-gap: var(--space-8, 8px);

  position: relative;
  display: block;
  border: var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Split row */
body.view-list .list-main {
  display: grid;
  grid-template-columns: minmax(var(--collection-list-media-width), var(--collection-list-media-width)) minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
}

/* Left panel (full-bleed media lane) */
body.view-list .list-media {
  background: var(--card-bg);
  border-right: 1px solid rgba(15, 23, 42, 0.10);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
}

body.view-list .list-media-frame {
  width: 100%;
  height: 100%;
  min-height: 232px;
  border-radius: 0;
  background: var(--card-image-bg);
  border: none;
  overflow: hidden;
  box-shadow: var(--card-image-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.view-list .list-media-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: left center;
  background: #fff;
}

/* App collection list view: screenshots behave better with product UI imagery */
.page-app-collection.view-list .list-media-frame,
body.view-list .page-app-collection .list-media-frame {
  background: #f8fafc;
}

.page-app-collection.view-list .list-media-frame img,
body.view-list .page-app-collection .list-media-frame img {
  object-fit: cover;
  object-position: center center;
  background: #ffffff;
}

.page-app-collection.view-list .list-desc,
body.view-list .page-app-collection .list-desc {
  -webkit-line-clamp: 3;
}

.page-app-collection.view-list .list-pills,
body.view-list .page-app-collection .list-pills {
  row-gap: var(--space-6);
}

.page-app-collection .collection-media.is-media-missing,
body.view-list .page-app-collection .list-media-frame.is-media-missing {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 1));
}

body.view-list .page-app-collection .list-media-frame img {
  object-fit: cover;
  object-position: center center;
  background: #ffffff;
}

body.view-list .page-app-collection .list-desc {
  -webkit-line-clamp: 3;
}

/* Right content */
body.view-list .list-body {
  padding: var(--card-content-padding-y) var(--card-content-padding-x);
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 4px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
/* List cards are anchors; kill underline / default link styling */
body.view-list .collection-card {
  text-decoration: none;
  color: inherit;
}

/* Prevent visited links from changing color */
body.view-list .collection-card:visited {
  color: inherit;
}

body.view-list .list-title,
body.view-list .list-desc,
body.view-list .list-meta-mini {
  text-decoration: none;
}

/* Give description breathing room (you lost this when restructuring) */
body.view-list .list-desc {
  margin-top: 0;
  margin-bottom: 0;
}

/* List view: keep content lane separate from wishlist button */
body.view-list .list-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: var(--card-gap);
}

body.view-list .list-content {
  min-width: 0;
}

/* Bottom bar: pills + platform/theme inline, actions stay right */
body.view-list .list-meta-mini {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.view-list .list-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

body.view-list .list-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--card-title-color);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}

/* Heart stays a separate click target; keep it non-absolute in list view */
body.view-list .list-title-row .wish-btn {
  position: static;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

body.view-list .list-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}

body.view-list .list-pills {
  display: flex;
  align-items: center;
  gap: var(--card-pill-gap);
  flex-wrap: wrap;
  margin: 0;
}

/* Bottom bar (divider + layout) */
body.view-list .list-bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.10);

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px;
  align-self: end;
}

/* Left side: meta + pills inline */
body.view-list .list-left-meta {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  align-self: end;
}

body.view-list .list-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
}

body.view-list .list-meta-pills .collection-meta-badge {
  padding: 2px 8px;
  min-height: 20px;
  border-radius: 10px;
  font-size: var(--collection-type-caption-size);
  font-weight: var(--collection-type-caption-weight);
  line-height: var(--collection-type-caption-line);
}

/* Actions pinned right */
body.view-list .list-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--card-gap);
}

/* Ensure views badge doesn't try to auto-push within list bar */
body.view-list .list-actions .views-badge {
  margin-left: 0;
}

/* Footer hidden for now */
body.view-list .list-footer {
  display: none;
}

/* NOTE:
   Legacy list-view layout rules removed.
   List view now renders .list-* nodes (list-main/media/body/title/desc/pills).
   Keeping the old .collection-name/.collection-meta/.collection-highlight/.collection-tags
   padding/grid rules can cause spacing conflicts or dead CSS drift. */

/* Shared card contract owns title/media/wishlist internals.
   Collection page should not style legacy title-row wishlist patterns. */

body.view-list .collection-meta,
body.view-list .collection-highlight,
body.view-list .collection-tags,
body.view-list .collection-meta-main,
body.view-list .collection-meta-line,
body.view-list .collection-meta .collection-tags {
  margin: 0;
  padding: 0;
}

body.view-list .list-meta-pills.collection-meta,
body.view-list .list-meta-pills.collection-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

body.view-list .collection-highlight:empty,
body.view-list .collection-tags:empty {
  display: none;
}

.collection-media {
  border-radius: var(--card-image-radius);
  background: var(--card-bg);
}

/* .collection-thumb base is now in assets/styles.css */

.collection-media .wish-btn {
  top: var(--card-overlay-inset);
  right: var(--card-overlay-inset);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Grid (thumbnail) view: positioning only (visual style from global styles.css) */
.collection-media .views-badge {
  position: absolute;
  right: var(--card-overlay-inset);
  left: auto;
  bottom: var(--card-overlay-inset);
  z-index: var(--z-index-base);
}

.collection-meta .views-badge { margin-left: auto; }

.collection-highlight {
  font-size: var(--collection-type-body-small-size);
  font-weight: var(--collection-type-body-small-weight);
  line-height: var(--collection-type-body-small-line);
  color: var(--card-desc-color);

  display: -webkit-box;
  -webkit-line-clamp: var(--card-desc-line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;

  margin-top: var(--space-2);
  padding: 0 var(--card-content-pad-x);
}

.collection-tags .views-badge {
  margin-left: auto;
}

/* ---------------------------------------------------------
   Load more
   --------------------------------------------------------- */
.load-more {
  margin: var(--collection-list-action-size) auto 0;
  display: block;
}


/* =========================================================
   Empty state (collection)
   ========================================================= */
.collection-empty {
  margin: var(--space-56) auto;
  padding: 0 var(--space-16);
  text-align: center;
}

/* Empty state spacing */
.collection-empty {
  padding: var(--space-48) var(--space-16) var(--space-64);
}

/* Ensure clear filters button doesn't feel cramped */
.collection-empty .btn-util {
  margin-top: var(--space-16);
}

.collection-empty .empty-inner {
  max-width: var(--collection-empty-max-width);
  margin: 0 auto;
}

.collection-empty .empty-title {
  font-size: var(--collection-type-body-size);
  font-weight: var(--collection-type-body-weight);
  line-height: var(--collection-type-body-line);
  color: var(--collection-color-text-82);
}

.collection-empty .empty-desc {
  margin-top: var(--space-6);
  font-size: var(--collection-type-body-small-size);
  font-weight: var(--collection-type-body-small-weight);
  line-height: var(--collection-type-body-small-line);
  color: var(--collection-color-text-60);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: var(--collection-breakpoint-lg)) {
  body.view-list .list-main {
    grid-template-columns: minmax(var(--collection-list-media-width-lg), var(--collection-list-media-width-lg)) minmax(0, 1fr);
  }

  .collection-wrap {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .page-collection .sidebar,
  .page-app-collection .sidebar {
    border-right: 0;
    padding-right: 0;
  }

  .side-panel {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .main {
    width: 100%;
    min-width: 0;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .controls-right {
    gap: var(--space-4);
  }

  .sort-control {
    gap: var(--space-4);
  }

  .sort-caption {
    margin-right: 2px;
  }

  .sort-dropdown .sort-trigger {
    padding: 0 12px;
    gap: 6px;
  }

  .sort-dropdown .menu-panel {
    min-width: 180px;
  }

  /* Mobile: stack media on top */
  body.view-list .list-main {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body.view-list .list-media {
    border-right: 0;
    border-bottom: 1px solid var(--stroke);
    padding: 0;
    min-height: 188px;
  }

  body.view-list .list-media-frame {
    min-height: 188px;
  }

  .collection-wrap {
    display: block;
    padding: var(--space-16) 0;
  }

  .collection-grid {
    grid-template-columns: 1fr;
    gap: var(--card-grid-gap);
  }
}

/* =========================================================
   Sidebar: Curation block (inside Categories accordion)
   ========================================================= */
.cat-curation {
  /* Make it feel like subcats, not a separate component */
  padding: var(--space-4) 0 var(--space-6);
  margin: var(--space-4) 0 var(--space-8);
  border-bottom: 0;
  /* subcat indentation */
  padding-left: var(--space-10);
}

.cat-curation-title {
  /* Match the global label token */
  font-size: var(--collection-type-label-size);
  font-weight: var(--collection-type-label-weight);
  line-height: var(--collection-type-label-line);
  letter-spacing: var(--collection-type-label-letter);
  text-transform: none;
  color: var(--collection-color-text-55);
  padding: var(--space-6) var(--space-10);
  margin: 0 0 var(--space-2);
}

.cat-curation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Match subcat visual weight */
  font-size: var(--collection-type-body-small-size);
  font-weight: var(--collection-type-body-small-weight);
  line-height: var(--collection-type-body-small-line);
  color: var(--collection-color-text-62);
}

.cat-curation-item .cat-star {
  color: var(--collection-color-text-35);
  font-size: var(--collection-type-caption-size);
  line-height: var(--collection-type-caption-line);
}

/* Active state should feel identical to subcat active */
.cat-curation-item.is-active {
  color: var(--collection-color-text-90);
  background: var(--collection-color-brand-soft-05);
  border-color: color-mix(in srgb, var(--collection-color-brand) 14%, transparent);
}

.cat-curation-item.is-active .cat-star {
  color: var(--collection-color-brand-92);
}








/* =========================================================
   Collection alignment contract (stores + apps)
   Fix: prevent inner centering from making grid/cards look "not left aligned"
   ========================================================= */

/* Ensure the main column uses the full available width of the right pane */
.page-collection .collection-wrap > .main {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}

.page-wishlist .collection-wrap > .main,
.page-user .collection-wrap > .main {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}

.page-app-collection .collection-wrap > .main {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
}

/* Ensure SEO header doesn't re-center itself inside main */
.page-collection .collection-seo,
.page-collection .collection-seo-head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.page-wishlist .collection-grid {
  justify-content: start;
}

.page-app-collection .collection-grid {
  justify-content: start;
}

/* Sort dropdown: JS toggles .is-open on .menu-panel */
.sort-dropdown .menu-panel {
  display: none;
}
.sort-dropdown .menu-panel.is-open {
  display: block;
}

/* =========================
   Mobile Layout Fix (Collection)
   ========================= */

@media (max-width: 768px) {

  /* Stack layout instead of sidebar + main */
  .collection-wrap {
    display: block;
  }

  /* Hide sidebar completely on mobile */
  .sidebar {
    display: none !important;
  }

  /* Ensure main takes full width */
  .main {
    width: 100%;
    min-width: 0;
  }

  /* Mobile should be single-column */
  .collection-grid {
    grid-template-columns: 1fr;
    gap: var(--card-grid-gap);
  }

  .collection-controls {
    padding-left: 12px;
    padding-right: 12px;
  }
}