/** Shopify CDN: Minification failed

Line 242:31 Unexpected ")"
Line 243:75 Unterminated string token

**/
/*
  RKB editorial grid — full bleed, zero gutters.

  Adapted from the Independantes de Coeur editorial grid. Every image cell is
  forced to the same portrait ratio and the image covers it (cropping, never
  letterboxing or distorting), so all cells in a row are the same height.
  Directly beneath each image an info band carries the work name and a
  sub-line (price), set off by a hairline rule; sibling bands in a row share
  a baseline and read as one continuous band.

  Column count is a theme setting, applied via the --eg-columns custom
  property set inline by the section.

  Every rule is scoped under `.rkb-editorial-grid` so none of it can reach
  other sections' media — the product gallery in particular.
*/

.rkb-editorial-grid {
  /* The info band's ground and ink, plus the hairline that keeps it legible.
     These read from the active colour scheme so the band inverts correctly
     on the dark Wearable Editions page. */
  --eg-band-ground: rgb(var(--color-background));
  --eg-band-ink: rgb(var(--color-foreground));
  --eg-band-rule: rgba(var(--color-foreground), 0.16);
  --eg-columns: 4;

  display: block;
  overflow-x: hidden;
}

/* ---------- Sticky filter bar ---------- */

.rkb-editorial-grid .rkb-collection-filters,
.rkb-collection-filters {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: rgb(var(--color-background));
  /* Flush with the full-bleed tiles below. */
  padding-inline: 0;
}

/* ---------- The grid ---------- */

/* Column counts: 2 on phones, 3 on tablets and narrow windows, and the
   desktop count from the theme setting (4 unless changed). */
.rkb-editorial-grid .product-grid,
.rkb-editorial-grid .rkb-editorial-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each cell stacks its image and its own info band. In a grid row the cells
   stretch to a common height; the image is a fixed portrait ratio, so the
   band takes up the slack and sibling bands align on one baseline. */
.rkb-editorial-grid .grid__item {
  display: flex;
  flex-direction: column;
  /* A grid item's automatic minimum is its content's min-content width; keep
     it 0 so a wide image can never push the track past the viewport. */
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0;
}

.rkb-editorial-grid .rkb-editorial-grid__cell {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.rkb-editorial-grid .rkb-editorial-grid__media {
  /* Explicit display/position: on a product card this <span> sits inside a
     plain block <a>, not a flex row, so it can't rely on being blockified as
     a flex item — and the swapped images are positioned against it. */
  display: block;
  position: relative;
  flex: 0 0 auto;
  /* Forced portrait ratio: work is photographed at all sorts of ratios, so
     pin every cell to the same shape and let the image crop to fill.
     3:4; drop to 4:5 if it clips the pieces too hard. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: rgba(var(--color-foreground), 0.04);
}

.rkb-editorial-grid .rkb-editorial-grid__image {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Info band, one per cell ---------- */

.rkb-editorial-grid .rkb-editorial-grid__band {
  /* Same reasoning: on a product card the band is nested inside its own <a>,
     where an inline box would not apply its padding or border to the name and
     price inside it. */
  display: block;
  /* `flex: 1 1` and `min-width: 0`, not `1 0 auto`: a flex item that cannot
     shrink below its max-content width never wraps, which is why long product
     names ran across the neighbouring column. 17 Sep 2026 */
  flex: 1 1 auto;
  min-width: 0;
  /* Flush with the image edge on the left; a gap on the right so a long name
     never runs up against the next tile. */
  padding: 0.5rem 1rem 0.5rem 0;
  background-color: var(--eg-band-ground);
  color: var(--eg-band-ink);
  border-top: 1px solid var(--eg-band-rule);
  border-bottom: 1px solid var(--eg-band-rule);
}

.rkb-editorial-grid .rkb-editorial-grid__name {
  display: block;
  font-family: var(--font-heading-family);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* The sub-line under the name — materials, then price. */
.rkb-editorial-grid .rkb-editorial-grid__meta,
.rkb-editorial-grid .rkb-editorial-grid__text {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  line-height: 2;
  letter-spacing: 0.04em;
  opacity: 0.65;
}

/* ---------- Empty state + pagination ---------- */

.rkb-editorial-grid .rkb-editorial-grid__empty,
.rkb-editorial-grid .pagination-wrapper {
  padding: 4rem 1rem;
}

/* ---------- Desktop: column count from the theme setting ---------- */

@media screen and (min-width: 750px) {
  .rkb-editorial-grid .product-grid,
  .rkb-editorial-grid .rkb-editorial-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 990px) {
  .rkb-editorial-grid .product-grid,
  .rkb-editorial-grid .rkb-editorial-grid__grid {
    grid-template-columns: repeat(var(--eg-columns, 4), 1fr);
  }
}

/* ---------- Collection list (archive index) ---------- */

/* Collection names are indented 1rem, unlike the product cards' flush band:
   these tiles read as a list of places to go rather than a wall of work.
   17 Sep 2026 */
.rkb-collection-list .rkb-editorial-grid__band {
  padding-left: 1rem;
}

/* The intro sits on the same 1rem gutter as the collection banner and the
   filter row, so headings line up across the shop, the collections and the
   archive. */
.rkb-collection-list__intro {
  padding: 0 1rem 2.4rem;
}

.rkb-collection-list__heading {
  margin: 0 0 1.2rem;
}

.rkb-collection-list__text {
  max-width: 65ch;
}

/* ---------- Overrides for the stock grid and base.css ----------

   Dawn's grid is a flex grid: `.grid__item` carries `width: calc(25% - …)`
   and a `max-width`, which in a CSS grid track shrinks each cell to a
   quarter of its column — the image sat small in a wide empty cell and the
   title wrapped one word per line. The editorial grid is a CSS grid, so the
   cell must simply fill its track.

   base.css also gives `#product-grid` a top padding and, on mobile, gaps and
   side padding marked !important. Those are for the old card grid; the
   editorial grid bleeds to the edges, so they are overridden here. The
   selectors below carry the same !important with a higher specificity
   (class + ID beats ID), which is what settles it.                        */

.rkb-editorial-grid .grid__item {
  width: 100%;
  max-width: none;
  padding-bottom: 0;
}

.rkb-editorial-grid .product-grid,
.rkb-editorial-grid #product-grid {
  padding: 0 !important;
  margin: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
}

/* The card's link fills the cell so the whole tile is clickable. */
.rkb-editorial-grid .rkb-editorial-grid__cell {
  width: 100%;
}

/* The card link must not inherit the footer stylesheet's list-link padding. */
.rkb-editorial-grid .rkb-editorial-grid__cell {
  padding: 0;
}

/* ---------- Product cards: hover / swipe image swap ----------
   Ported from the IDC editorial grid 17 Sep 2026. A card renders two stacked
   images and crossfades between them; <product-image-swap> in
   assets/rkb-editorial-grid-swap.js drives it: hover on desktop, swipe on
   touch. Cards with one image are untouched. */

   band that takes up the slack) — just spread across two links instead of
   one, since the arrow <button>s between them can't nest inside an <a>. */
.rkb-editorial-grid .rkb-editorial-grid__cell--product {
  position: relative;
}

.rkb-editorial-grid .rkb-editorial-grid__media-link {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

/* display: flex (not block): band-link's only child is
   .rkb-editorial-grid__band, whose own `flex: 1 0 auto` (set above, alongside
   the rest of the shared band styling) only takes effect if band is
   actually a flex item of something — this is what stretches it to
   band-link's full width and height, edge to edge, rather than shrinking
   to fit its text. */
.rkb-editorial-grid .rkb-editorial-grid__band-link {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Both images stack exactly on top of one another for the crossfade; only
   `.is-current` is opaque. The very first image (no swap data) is the
   plain single img from blog mode — untouched by this. */
.rkb-editorial-grid .rkb-editorial-grid__cell--product .rkb-editorial-grid__image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.rkb-editorial-grid .rkb-editorial-grid__cell--product .rkb-editorial-grid__image.is-current {
  opacity: 1;
}

/* The prev/next arrows were removed 17 Sep 2026; hover and swipe remain. */


/* Long names wrap inside the tile rather than overflowing it; a single
   unbroken word breaks rather than pushing the column wider. 17 Sep 2026 */
.rkb-editorial-grid .rkb-editorial-grid__name,
.rkb-editorial-grid .rkb-editorial-grid__meta,
.rkb-editorial-grid .rkb-editorial-grid__text {
  max-width: 100%;
  overflow-wrap: break-word;
  white-space: normal;
}