/* wildlore.cc static build — interaction layer.
   Layout and visual design live entirely in assets/index-DX3Q5lKa.css. */

/* Static pages have no React state, so filter buttons keep their markup state.
   site.js mirrors the active state with these classes. */
[data-filter].is-active {
  background-color: rgb(74 93 58);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

[data-filter]:not(.is-active) {
  background-color: #fff;
  color: rgb(107 114 128);
}

[data-filter]:not(.is-active):hover {
  color: rgb(45 45 45);
  background-color: rgb(255 255 255 / 0.8);
}

[data-product-card][hidden] {
  display: none;
}

/* Catalog cards mix products with 2–8 spec rows, so rows ended up with ragged
   card heights and dead space. Show the first three spec rows on every card,
   keep the product photo at its true shape (never crop it), and let the grid
   stretch every card in a row to the tallest one. */
[data-product-card] > div:last-child > [class*="space-y-1"] > p:nth-child(n + 4) {
  display: none;
}

/* Everything below is scoped to the catalog grid only (a .grid that contains
   data-product-card). An unscoped `div.grid > div` selector previously leaked
   into the footer's 4-column grid and squeezed it to 384px columns, which made
   the footer text overlap. */

/* Cards keep one size in every tab. A fluid grid stretches whatever sits in the
   last row (Fire Pit's 2 cards became 592px wide, Folding Bed's single card
   filled the whole row), which no longer matches All Products. The animation
   wrapper is the grid item, so pin its width to the All-Products track
   (1280px container, 3 columns, 2rem gaps) and pack it left. */
@media (min-width: 640px) {
  .grid:has(> div > [data-product-card]) > div {
    align-self: start;
  }
}

@media (min-width: 1024px) {
  .grid:has(> div > [data-product-card]) > div {
    width: 384px;
    max-width: 384px;
    justify-self: start;
    align-self: start;
  }
}

/* Hidden cards must not reserve a grid track or leave a gap behind them. */
.grid:has(> div > [data-product-card]) > div:has([data-product-card][hidden]) {
  display: none;
}

/* Filtering moves cards between rows; let the reposition animate. */
.grid:has(> div > [data-product-card]) > div {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The photo frame must hold its 4:3 shape: fixed card heights used to squeeze it
   and clip the picture, especially on taller chair shots. */
[data-product-card] > div:first-child {
  flex: 0 0 auto;
  aspect-ratio: 4 / 3;
}

[data-product-card] > div:first-child > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

[data-product-card] {
  height: auto;
  overflow: hidden;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-product-card] > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

[data-product-card] > div:last-child > .mt-3 {
  flex: 1 1 auto;
  min-height: 0;
}

/* Action row always sits on the card floor. */
[data-product-card] > div:last-child > .mt-4.flex.gap-3 {
  margin-top: auto;
}

/* The detail-page thumbnail strip is always a single row: one cell per picture,
   never wrapped onto a second row, and every cell keeps the same size as the
   four-up layout regardless of how many pictures exist. */
.wl-gallery > .grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 140px;
  grid-template-columns: none;
  justify-content: start;
  gap: 0.5rem;
}

@media (max-width: 640px) {
  .wl-gallery > .grid {
    grid-auto-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}

/* Mobile navigation drawer, opened by the header toggle button. */
.wl-mobile-nav {
  display: none;
}

.wl-mobile-nav.is-open {
  display: block;
}

@media (min-width: 768px) {
  .wl-mobile-nav {
    display: none !important;
  }
}