/**
 * colors.css - /colors/ index page (colors_list view)
 *
 * Scoped to ColorRenderer::renderColorsListPageContent(). Loaded
 * conditionally by renderStylesheets() only when $view === 'colors_list',
 * same pattern as coupons.css. All classes are prefixed `clr-` to avoid
 * any collision with existing site.css / component classes.
 */

.clr-hero{padding:.25rem 0 1.25rem;}
.clr-hero .clr-eyebrow{color:var(--bs-primary);text-transform:uppercase;font-weight:700;letter-spacing:.18em;font-size:.7rem;margin-bottom:.5rem;}
.clr-hero h1{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;line-height:1.15;margin:0 0 .5rem;}
.clr-hero .clr-lede{color:var(--bs-secondary-color,#6c757d);max-width:640px;margin-bottom:.75rem;}
.clr-hero-stats{font-size:.9rem;color:var(--bs-secondary-color,#6c757d);}
.clr-hero-stats strong{color:var(--bs-body-color,#212529);}

/* "Most shopped" quick-link strip — top colors by real product count.
   Not framed as "trending" since we have no time-series signal for that;
   this is an honest read of the same count data used everywhere else. */
.clr-popular-strip{background:var(--bs-tertiary-bg,#f8f9fa);border-radius:.7rem;padding:.85rem 1.1rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;}
.clr-popular-strip .clr-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--bs-primary);white-space:nowrap;display:flex;align-items:center;gap:.35rem;}
.clr-popular-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--bs-border-color,#dee2e6);border-radius:999px;padding:.28rem .65rem .28rem .28rem;font-size:.82rem;font-weight:600;color:var(--bs-body-color,#212529);}
.clr-popular-chip:hover{border-color:var(--bs-primary);color:var(--bs-primary);}
.clr-popular-chip .clr-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.08);flex-shrink:0;}

/* Controls: family filter chips + sort toggle */
.clr-controls-bar{background:var(--bs-body-bg,#fff);border-bottom:1px solid var(--bs-border-color,#dee2e6);padding:1rem 0;margin-bottom:1.25rem;}
.clr-controls-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;}

/* Family filter chips - SEO-friendly links */
.clr-family-chips{display:flex;flex-wrap:wrap;gap:.4rem;flex:1;}
.clr-family-chip{padding:.4rem .85rem;border-radius:999px;background:var(--bs-tertiary-bg,#f8f9fa);color:var(--bs-body-color,#212529);font-size:.82rem;font-weight:600;border:1px solid var(--bs-border-color,#dee2e6);transition:.15s;white-space:nowrap;text-decoration:none;}
.clr-family-chip:hover{background:var(--bs-secondary-bg,#e9ecef);border-color:var(--bs-primary);}
.clr-family-chip.active{background:var(--bs-primary);color:#fff;border-color:var(--bs-primary);}
.clr-family-chip .clr-count{opacity:.75;font-weight:400;margin-left:.15rem;}

/* Sort links - text links instead of buttons */
.clr-sort-links{display:flex;align-items:center;gap:.25rem;font-size:.85rem;flex-shrink:0;}
.clr-sort-link{color:var(--bs-secondary-color,#6c757d);text-decoration:none;padding:.25rem .5rem;border-radius:.25rem;transition:.15s;}
.clr-sort-link:hover{color:var(--bs-primary);}
.clr-sort-link.active{color:var(--bs-primary);font-weight:600;}
.clr-sort-sep{color:var(--bs-border-color,#dee2e6);}

/* Swatch grid */
.clr-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}

.clr-result-count{font-size:.85rem;color:var(--bs-secondary-color,#6c757d);margin-bottom:.75rem;}

/* Swatch grid — one dataset replaces the old Top Colors / Browse by Family / Color Index triple-listing */
.clr-swatch-grid.clr-list-mode{grid-template-columns:1fr;gap:.4rem;}
.clr-swatch-tile{position:relative;border-radius:.7rem;overflow:hidden;aspect-ratio:1/1;display:block;border:1px solid rgba(0,0,0,.06);transition:transform .18s ease, box-shadow .18s ease;text-decoration:none;}
.clr-swatch-tile:hover{transform:translateY(-4px);box-shadow:0 14px 30px -12px rgba(0,0,0,.25);}
.clr-swatch-tile .clr-scrim{position:absolute;inset:auto 0 0 0;height:56%;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);}
.clr-swatch-tile .clr-info{position:absolute;left:.7rem;right:.7rem;bottom:.6rem;color:#fff;}
.clr-swatch-tile .clr-info .clr-name{font-weight:700;font-size:.9rem;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.35);}
.clr-swatch-tile .clr-info .clr-count-label{font-size:.74rem;opacity:.9;}
.clr-swatch-tile .clr-hover-cta{position:absolute;top:.6rem;right:.6rem;background:rgba(255,255,255,.92);color:#1a1d20;border-radius:999px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:.8rem;opacity:0;transform:translateX(4px);transition:.18s;}
.clr-swatch-tile:hover .clr-hover-cta{opacity:1;transform:translateX(0);}
/* Light-color tiles (white, ivory, pale yellow…) need dark text + a light-side scrim for contrast */
.clr-swatch-tile.clr-is-light .clr-info{color:#1a1d20;}
.clr-swatch-tile.clr-is-light .clr-info .clr-name{text-shadow:none;}
.clr-swatch-tile.clr-is-light .clr-scrim{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.8) 100%);}
.clr-swatch-tile.clr-is-light .clr-hover-cta{background:rgba(26,29,32,.88);color:#fff;}

/* List-dot is only used in list-mode (a small color circle before the name);
   hidden by default so it doesn't show up as a stray dot in grid-mode tiles. */
.clr-swatch-tile .clr-list-dot{display:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.1);flex-shrink:0;}

/* List view — compact row instead of a big color tile, for text-scanning */
.clr-swatch-grid.clr-list-mode .clr-swatch-tile{aspect-ratio:auto;display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;background:var(--bs-body-bg,#fff);border:1px solid var(--bs-border-color,#dee2e6);}
.clr-swatch-grid.clr-list-mode .clr-swatch-tile .clr-list-dot{display:block;}
.clr-swatch-grid.clr-list-mode .clr-swatch-tile .clr-scrim,
.clr-swatch-grid.clr-list-mode .clr-swatch-tile .clr-hover-cta{display:none;}
.clr-swatch-grid.clr-list-mode .clr-swatch-tile .clr-info{position:static;color:var(--bs-body-color,#212529);display:flex;align-items:baseline;gap:.5rem;flex:1;}
.clr-swatch-grid.clr-list-mode .clr-swatch-tile .clr-info .clr-name{text-shadow:none;}
.clr-swatch-grid.clr-list-mode .clr-swatch-tile .clr-info .clr-count-label{color:var(--bs-secondary-color,#6c757d);}

.clr-empty-state{display:none;text-align:center;padding:3rem 1rem;color:var(--bs-secondary-color,#6c757d);}
.clr-empty-state.clr-show{display:block;}
.clr-empty-state i{font-size:2rem;margin-bottom:.5rem;display:block;color:var(--bs-border-color,#dee2e6);}

@media (max-width: 767.98px){
  .clr-controls-inner{flex-direction:column;align-items:stretch;}
  .clr-family-chips{justify-content:flex-start;}
  .clr-sort-links{width:100%;justify-content:center;}
  .clr-swatch-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem;}
}