/* ==========================================================================
   LIVSDO — Collection / category page
   ========================================================================== */

/* ==========================================================================
   Collection header
   Kept deliberately restrained — the products are the page, not the banner.
   ========================================================================== */

.coll-head { padding-block: var(--s-6) var(--s-7); }
.coll-head__grid { display: grid; gap: var(--s-5); }
@media (min-width: 992px) {
  .coll-head__grid { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); align-items: end; }
}
.coll-head__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.coll-head__desc {
  margin-top: var(--s-4);
  font-size: var(--fs-base);
  color: var(--c-muted);
  max-width: 58ch;
}
.coll-head__count {
  margin-top: var(--s-4);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
/* 1.14: no photograph. The title takes the left column and the description
   the right, with the count under the title - so the text spans the page
   instead of stopping at 58ch beside an empty field. Stacked below 992px. */
.coll-head__grid--split {
  grid-template-areas: 'title' 'desc' 'count';
  gap: 0;
}
.coll-head__grid--split .coll-head__title { grid-area: title; }
.coll-head__grid--split .coll-head__desc  { grid-area: desc; max-width: 70ch; }
.coll-head__grid--split .coll-head__count { grid-area: count; }
@media (min-width: 992px) {
  .coll-head__grid--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: 'title desc' 'count desc';
    column-gap: var(--s-8);
    row-gap: 0;
    align-items: end;
  }
  .coll-head__grid--split .coll-head__desc { margin-top: 0; max-width: none; align-self: end; }
  .coll-head__grid--split .coll-head__desc > :last-child { margin-bottom: 0; }
}

.coll-head__media { overflow: hidden; background: var(--c-tint); }
.coll-head__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
@media (max-width: 991.98px) { .coll-head__media { display: none; } }

/* ==========================================================================
   Filter bar — subcategory chips + sort
   ========================================================================== */

/* Not sticky. It used to follow the scroll, which put an opaque white band
   across the middle of the grid — with the columns now butted together and
   filling their wells, that band cut straight through the photographs. It
   sits once, above the grid, and scrolls away with it.

   The z-index and the header-offset rules went with it: both existed only to
   position the bar while it was pinned. */
.filter-bar {
  background: var(--c-white);
  border-top: var(--border);
  border-bottom: var(--border);
  padding-block: var(--s-3);
  margin-bottom: var(--s-7);
}

.filter-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

/* Chips scroll horizontally rather than wrapping to a second row, so the bar
   keeps one constant height as the sticky element. Fades at the edges hint
   that there is more to reach. */
.filter-chips {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 2px;
  margin-inline: calc(var(--s-1) * -1);
  padding-inline: var(--s-1);
  min-width: 0;
  flex: 1;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips .chip { flex: none; scroll-snap-align: start; }

/* --- Chips as plain text ----------------------------------------------------
   The reference runs its sub-categories as bare text links, not pills. The
   markup is unchanged — these are still <button> elements with aria-pressed,
   so the filter stays a filter to a screen reader and to the keyboard; only
   the pill is taken off. The active one is marked by weight and an underline
   rather than by a filled capsule.

   .chip is shared with other pages, so every rule here is reached through
   .filter-bar and nothing else that uses a chip changes. */
.filter-bar .chip {
  padding: 0.25rem 0;
  margin-right: var(--s-5);
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  border-bottom: 1px solid transparent;
}
.filter-bar .chip:last-child { margin-right: 0; }
.filter-bar .chip:hover { color: var(--c-ink); background: none; }
.filter-bar .chip[aria-pressed="true"] {
  color: var(--c-ink);
  font-weight: 500;
  background: none;
  border-bottom-color: var(--c-ink);
}
/* The count is supporting information, so it stays quiet next to the label. */
.filter-bar .chip__count {
  color: var(--c-muted);
  font-size: var(--fs-2xs);
  background: none;
  padding: 0;
  min-width: 0;
}
.filter-bar .chip[aria-pressed="true"] .chip__count { color: var(--c-muted); }

.filter-sort { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.filter-sort__label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .filter-bar__inner { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .filter-sort { justify-content: space-between; }
  .filter-sort .select-ls { flex: 1; }
  /* The mask would clip the first chip at the viewport edge on a phone. */
  .filter-chips {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ==========================================================================
   Product grid — editorial listing
   --------------------------------------------------------------------------
   Reworked to the reference layout: four across on desktop, tall portrait
   wells with a gutter between them (butted edge to edge until 1.14), a deep row gap, and the name
   and price centred in small light type beneath. No frame, no badge, no
   quick-add — the photography carries the row and the type stays out of its
   way.

   Everything here is scoped to .coll-grid. The framed card is still what the
   home page, search and wishlist render, and those are deliberately left
   alone; only the category listing changes.

   On the crop: the reference is shot portrait, so it can fill a 1:1.4 well
   with object-fit: cover. These product shots are square (mostly 1100×1100)
   with the piece floating on a plain backdrop, and covering a portrait well
   from a square source cuts 29% off the width — which takes the ends off a
   dining table. So the well is portrait and the image is *contained* within
   it, floating the piece in the field exactly as the reference's flat shots
   do, with nothing cropped.

   The well is white rather than --c-tint for the same reason: the shots do
   not share one backdrop (sampled: most are pure #FFF, some #F7F7F7), and a
   tinted field behind a white-backed photograph draws a visible rectangle
   around it. White is the colour most of them already carry.
   ========================================================================== */

/* 1.14: SPACED, like the home page's category rows. Butted together the
   wells read as one congested strip (the review's words), so each tile now
   stands on its own with a gutter, as the home page tiles do. */
.coll-grid .pgrid { column-gap: var(--s-5); row-gap: var(--s-8); }
@media (max-width: 767.98px) { .coll-grid .pgrid { column-gap: 10px; row-gap: var(--s-6); } }

/* The image fills its well completely, so each column IS its photograph and
   there is no well colour showing around it to mismatch the neighbour. The
   backdrop below is only what shows before the image decodes; a neutral grey
   keeps that moment quiet rather than flashing blue-white. */
.coll-grid .pcard__media { background: #EDEDED; }
.coll-grid .pcard__img { object-fit: cover; }

/* Name over price, centred, rather than name-left / price-right. */
.coll-grid .pcard__body {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0;
  padding-top: var(--s-4);
  padding-inline: var(--s-3);
}
.coll-grid .pcard__name,
.coll-grid .pcard__price {
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.6;
}
.coll-grid .pcard__was { margin-top: 2px; }

/* The solo-image zoom would push the piece into the padding and read as a
   wobble at this size; the hover swap on cards that have a second shot is
   kept, which is what the reference does too. */
@media (hover: hover) and (pointer: fine) {
  .coll-grid .pcard:hover .pcard__img--solo { transform: none; }
  .coll-grid .pcard:hover .pcard__name { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
}

/* ==========================================================================
   Product grid — shared behaviour
   ========================================================================== */

/* A floor under the grid so switching filters does not collapse the page and
   snap the footer upward mid-fade. Sized to roughly one row of the square
   cards; it was 40vh when the cards were 3-up portrait and a row filled it,
   but viewport units leave a tall gap under a single short row. */
.coll-grid { min-height: 26rem; }

/* Products fade in when the filter changes, so a re-render reads as a
   transition rather than a flicker. The grid keeps its height throughout. */
.coll-grid .pgrid { animation: coll-in var(--t-med) var(--ease) both; }
@keyframes coll-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .coll-grid .pgrid { animation: none; }
}

/* ==========================================================================
   Advice & tips
   ========================================================================== */

.guides {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }

.guide { display: flex; flex-direction: column; height: 100%; }
.guide__media { overflow: hidden; background: var(--c-tint); }
.guide__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
@media (hover: hover) { .guide:hover .guide__media img { transform: scale(1.04); } }

.guide__body { padding-top: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.guide__cat {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--s-2);
}
.guide__title { font-size: var(--fs-h3); margin-bottom: var(--s-2); }
.guide:hover .guide__title { color: var(--c-blue); }
.guide__desc { font-size: var(--fs-sm); color: var(--c-muted); flex: 1; }
.guide__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink);
  align-self: flex-start;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}
.guide:hover .guide__more { color: var(--c-blue); }
.guide__more .arw { transition: transform var(--t-fast) var(--ease); }
.guide:hover .guide__more .arw { transform: translateX(3px); }

/* ==========================================================================
   Relevant categories — lifestyle tiles with an overlaid name
   ========================================================================== */

.rel-cats {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Four across on desktop, matching the product grids, so the tiles sit as a
   supporting row rather than three towers that fill the viewport. */
@media (min-width: 992px) { .rel-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rel-cat {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-navy);
  aspect-ratio: 4 / 5;
}
/* 4:5 rather than the taller 3:4 — at four across a portrait tile still reads
   as a lifestyle image without running the full height of the screen. */
@media (min-width: 992px) { .rel-cat { aspect-ratio: 4 / 5; } }

.rel-cat img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
@media (hover: hover) { .rel-cat:hover img { transform: scale(1.06); } }

/* The scrim is what makes white type legible over an unknown photograph —
   without it the overlay depends on whatever the image happens to be. */
.rel-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 24, 77, 0.85) 0%, rgba(2, 24, 77, 0.25) 45%, rgba(2, 24, 77, 0) 72%);
  transition: opacity var(--t-med) var(--ease);
}
.rel-cat:hover::after { opacity: 0.88; }

.rel-cat__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  color: var(--c-white);
}
.rel-cat__name { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.rel-cat__arrow {
  flex: none;
  transition: transform var(--t-med) var(--ease);
  color: var(--c-lime);
}
.rel-cat:hover .rel-cat__arrow { transform: translateX(4px); }