/* =============================================================================
   Mueller's Collection Pages — collection-layout.css
   Version: 1.3.8

   Page structure, toolbar, sidebar/grid layout, pagination, empty states.
   Uses a full-width, two-column desktop catalog so pool-table and shuffleboard
   photography remains large. Product and hover images share a responsive 2:1
   stage designed for 800 x 400 pixel source images.
   All classes are prefixed mrp-col-.  Mobile-first breakpoints add complexity.
   ============================================================================= */

/* ── Collection layout overrides ────────────────────────────────────────────── */
/*
 * These values intentionally override the matching defaults from
 * collection-tokens.css on collection pages. The wider container and permanent
 * two-column desktop grid keep the product photography large enough to read.
 */
:root {
  --mrp-col-page-max-width: 1920px;
  --mrp-col-page-gutter: clamp(1rem, 1.5vw, 1.75rem);
  --mrp-col-sidebar-width: 220px;
  --mrp-col-body-gap: clamp(1.25rem, 1.6vw, 1.75rem);
  --mrp-col-grid-gap: clamp(1.25rem, 1.4vw, 1.625rem);
  --mrp-col-product-card-ratio: 2 / 1;
}

/* ── Screen-reader utility ──────────────────────────────────────────────────── */
.mrp-col-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Page wrapper ───────────────────────────────────────────────────────────── */
.mrp-col-page {
  width: 100%;
  max-width: var(--mrp-col-page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mrp-col-page-gutter);
  padding-right: var(--mrp-col-page-gutter);
  padding-bottom: 4rem;
  font-family: var(--mrp-col-font-sans);
  color: var(--mrp-col-text-primary);
  background: var(--mrp-col-bg);
  box-sizing: border-box;
}

/* ── Page header ────────────────────────────────────────────────────────────── */
.mrp-col-page__header {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.25rem, 2vw, 2rem);
  border-bottom: 1px solid var(--mrp-col-border);
  margin-bottom: 1.5rem;
}

.mrp-col-page__h1 {
  font-size: var(--mrp-col-font-size-h1);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--mrp-col-text-primary);
  margin: 0 0 0.75rem;
  line-height: 1.1;
  font-family: var(--mrp-col-font-sans);
}

.mrp-col-page__intro {
  font-size: 0.9375rem;
  color: var(--mrp-col-text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 72ch;
  font-family: var(--mrp-col-font-sans);
}

/* ── Toolbar ────────────────────────────────────────────────────────────────── */
.mrp-col-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--mrp-col-border);
  margin-bottom: 1.5rem;
}

/* Filter toggle button */
.mrp-col-toolbar__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  background: transparent;
  border: 1px solid var(--mrp-col-border-strong);
  border-radius: var(--mrp-col-card-radius);
  color: var(--mrp-col-text-primary);
  font-size: var(--mrp-col-font-size-sm);
  font-weight: 500;
  font-family: var(--mrp-col-font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--mrp-col-transition), background var(--mrp-col-transition);
  min-height: 44px;
  white-space: nowrap;
}

.mrp-col-toolbar__filter-btn:hover {
  background: var(--mrp-col-bg-alt);
  border-color: var(--mrp-col-accent);
}

.mrp-col-toolbar__filter-btn:focus-visible {
  outline: 2px solid var(--mrp-col-border-focus);
  outline-offset: 2px;
}

.mrp-col-toolbar__filter-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mrp-col-toolbar__filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--mrp-col-accent);
  color: var(--mrp-col-accent-text);
  border-radius: 9px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

/* Product count */
.mrp-col-toolbar__count {
  font-size: var(--mrp-col-font-size-sm);
  color: var(--mrp-col-text-secondary);
  margin: 0;
  flex: 1;
  font-family: var(--mrp-col-font-sans);
}

/* Sort form */
.mrp-col-toolbar__sort-form {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: auto;
}

.mrp-col-toolbar__sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.4375rem 2rem 0.4375rem 0.75rem;
  background: var(--mrp-col-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6b6b'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 10px 6px;
  border: 1px solid var(--mrp-col-border-strong);
  border-radius: var(--mrp-col-card-radius);
  font-size: var(--mrp-col-font-size-sm);
  font-family: var(--mrp-col-font-sans);
  color: var(--mrp-col-text-primary);
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  transition: border-color var(--mrp-col-transition);
}

.mrp-col-toolbar__sort-select:hover {
  border-color: var(--mrp-col-accent);
}

.mrp-col-toolbar__sort-select:focus-visible {
  outline: 2px solid var(--mrp-col-border-focus);
  outline-offset: 2px;
}

/* Submit button — visible without JS; JS auto-submits on change */
.mrp-col-toolbar__sort-submit {
  padding: 0.4375rem 0.875rem;
  background: var(--mrp-col-accent);
  color: var(--mrp-col-accent-text);
  border: none;
  border-radius: var(--mrp-col-card-radius);
  font-size: var(--mrp-col-font-size-sm);
  font-family: var(--mrp-col-font-sans);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background var(--mrp-col-transition);
}

.mrp-col-toolbar__sort-submit:hover {
  background: var(--mrp-col-accent-hover);
}

.mrp-col-toolbar__sort-submit:focus-visible {
  outline: 2px solid var(--mrp-col-border-focus);
  outline-offset: 2px;
}

/* ── Body: sidebar + main layout ───────────────────────────────────────────── */
/* Mobile default: single-column stacked. Desktop upgrades to CSS grid.       */
.mrp-col-body {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.mrp-col-sidebar {
  flex: 0 0 var(--mrp-col-sidebar-width);
  width: var(--mrp-col-sidebar-width);
  /* Hidden on small viewports; shown on desktop */
  display: none;
}

/* Modifier: JavaScript can add this class to collapse the sidebar on desktop */
.mrp-col-sidebar--hidden {
  display: none !important;
}

/* ── Main content area ──────────────────────────────────────────────────────── */
.mrp-col-main {
  width: auto;
  min-width: 0;
  max-width: none;
}

.mrp-col-main:focus {
  outline: none; /* tabindex="-1" programmatic focus; no visible ring needed */
}

/* ── Product grid ───────────────────────────────────────────────────────────── */
.mrp-col-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  width: 100%;
  max-width: none;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mrp-col-grid-gap);
}

.mrp-col-grid__item {
  min-width: 0;
  width: 100%;
}



/* Packages grid: always 1 column on mobile, 2 on tablet, 3 on wide desktop */
.mrp-col-grid--packages {
  grid-template-columns: minmax(0, 1fr);
}

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.mrp-col-pagination {
  margin-top: 3rem;
}

.mrp-col-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.mrp-col-pagination__item {
  /* flex item */
}

.mrp-col-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: 1px solid var(--mrp-col-border);
  border-radius: var(--mrp-col-card-radius);
  font-size: var(--mrp-col-font-size-sm);
  font-family: var(--mrp-col-font-sans);
  color: var(--mrp-col-text-primary);
  text-decoration: none;
  transition: border-color var(--mrp-col-transition), background var(--mrp-col-transition);
}

.mrp-col-pagination__page--current {
  background: var(--mrp-col-accent);
  border-color: var(--mrp-col-accent);
  color: var(--mrp-col-accent-text);
  font-weight: 600;
  cursor: default;
}

.mrp-col-pagination__page:not(.mrp-col-pagination__page--current):hover {
  background: var(--mrp-col-bg-alt);
  border-color: var(--mrp-col-border-strong);
}

.mrp-col-pagination__page:focus-visible {
  outline: 2px solid var(--mrp-col-border-focus);
  outline-offset: 2px;
}

.mrp-col-pagination__page--prev,
.mrp-col-pagination__page--next {
  font-size: 1.125rem;
  font-weight: 400;
}

/* ── No-results state ───────────────────────────────────────────────────────── */
.mrp-col-no-results {
  padding: 3rem 0;
  text-align: center;
}

.mrp-col-no-results__text {
  font-size: 1rem;
  color: var(--mrp-col-text-secondary);
  margin: 0 0 1.25rem;
  font-family: var(--mrp-col-font-sans);
}

.mrp-col-no-results__link {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: var(--mrp-col-accent);
  color: var(--mrp-col-accent-text);
  text-decoration: none;
  font-size: var(--mrp-col-font-size-sm);
  font-weight: 600;
  font-family: var(--mrp-col-font-sans);
  border-radius: var(--mrp-col-card-radius);
  transition: background var(--mrp-col-transition);
}

.mrp-col-no-results__link:hover {
  background: var(--mrp-col-accent-hover);
}

.mrp-col-no-results__link:focus-visible {
  outline: 2px solid var(--mrp-col-border-focus);
  outline-offset: 2px;
}

/* ── Packages: no sidebar, full-width page ──────────────────────────────────── */
.mrp-col-page--packages .mrp-col-body {
  display: block;
}

/* ── Responsive breakpoints ─────────────────────────────────────────────────── */

/* Tablet 640px+: 2-column product grid and 2-column package grid */
@media (min-width: 640px) {
  .mrp-col-grid:not(.mrp-col-grid--packages) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mrp-col-grid--packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Desktop 960px+: switch body to CSS grid so sidebar and main sit side-by-side.
 * The sidebar column is a fixed 220 px track; the main takes all remaining width.
 * :has() collapses the sidebar track when the sidebar is toggled hidden by JS.
 */
@media (min-width: 960px) {
  .mrp-col-body {
    display: grid;
    grid-template-columns: var(--mrp-col-sidebar-width) minmax(0, 1fr);
    gap: var(--mrp-col-body-gap);
    align-items: start;
  }

  /* Collapse the sidebar track when JS adds the --hidden modifier */
  .mrp-col-body:has(.mrp-col-sidebar--hidden) {
    grid-template-columns: minmax(0, 1fr);
  }

  .mrp-col-sidebar {
    display: block;
  }
}

/* Wide desktop 1280px+: package grid expands to 3 columns */
@media (min-width: 1280px) {
  .mrp-col-grid--packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/*
 * Wide desktop 1360px+: product grid uses exactly three equal columns.
 * Fixed tracks prevent one or two cards from stretching to fill empty space.
 * auto-fit and auto-fill are intentionally not used.
 */
@media (min-width: 1360px) {
  .mrp-col-grid:not(.mrp-col-grid--packages) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ── Body scroll lock (applied by JS when drawer opens) ─────────────────────── */
.mrp-col-body-locked {
  overflow: hidden;
}

/* ── prefers-reduced-motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mrp-col-toolbar__filter-btn,
  .mrp-col-toolbar__sort-select,
  .mrp-col-toolbar__sort-submit,
  .mrp-col-pagination__page,
  .mrp-col-no-results__link {
    transition: none;
  }
}