/** Shopify CDN: Minification failed

Line 27:2 Unexpected "{"
Line 27:3 Expected identifier but found "%"
Line 27:59 Expected identifier but found "%"
Line 54:2 Unexpected "{"
Line 54:3 Expected identifier but found "%"
Line 55:79 Expected identifier but found whitespace
Line 61:3 Expected identifier but found "%"
Line 62:2 Unexpected "{"
Line 62:3 Expected identifier but found "%"
Line 149:2 Unexpected "{"
... and 4 more hidden warnings

**/
/* START_SECTION:main-collection-banner (INDEX:27) */
.rcb {
    padding-block: var(--r-section-y);
  }

  .rcb__inner {
    display: grid;
    gap: 2.8rem;
    align-items: center;
  }

  {%- comment -%} styles below only apply in overlay mode {%- endcomment -%}

  /* OVERLAY MODE: full-bleed photograph with the title on it, which is what every reference
     collection page does. The band is edge to edge, so the section's own page padding is
     removed and the text carries its own inset instead.

     The media is NOT a sibling column here, it is the ground: one grid cell holds both, and
     the text is stacked on top with grid-area rather than position:absolute, so the band's
     height is still driven by the image and nothing overlaps if the copy runs long. */
  .rcb--overlay {
    padding-block: 0;
  }
  .rcb--overlay .rcb__inner {
    display: grid;
    grid-template-areas: "stack";
    gap: 0;
    max-width: none;
    padding-inline: 0;
  }
  .rcb--overlay .rcb__media,
  .rcb--overlay .rcb__text {
    grid-area: stack;
  }
  .rcb--overlay .rcb__media {
    aspect-ratio: 3 / 2;
    position: relative;
  }
  {%- comment -%}
    THE SCRIM IS PER COLLECTION, because a single value cannot serve both ends. Measuring the
    lower left of each banner, the zone the headline sits in, white type landed at 12:1 over
    Solids and 2.9:1 over Prints. One global strength either fails the pale photographs or
    drowns the dark ones. royal.banner_scrim carries the measured figure per collection and
    falls back to 45 for anything unmeasured; the floor of 30 in the data exists so type
    always sits on something rather than floating on bare cloth.
  {%- endcomment -%}
  {%- liquid
    assign scrim_pct = collection.metafields.royal.banner_scrim.value | default: 45
    assign scrim_a = scrim_pct | divided_by: 100.0
    assign scrim_mid = scrim_pct | times: 0.38 | divided_by: 100.0
  -%}
  /* rises from the lower edge, so the top of the picture is never veiled */
  .rcb--overlay .rcb__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,{{ scrim_a }}) 0%, rgba(0,0,0,{{ scrim_mid }}) 38%, rgba(0,0,0,0) 68%);
  }
  .rcb--overlay .rcb__text {
    position: relative;
    z-index: 1;
    align-self: end;
    padding: 0 var(--r-pad-x) 3.2rem;
    max-width: 62rem;
  }
  /* named explicitly: base.css sets color directly on h1, and a direct declaration beats
     any colour inherited from an ancestor however specific that ancestor is */
  .rcb--overlay .rcb__title,
  .rcb--overlay .rcb__eyebrow,
  .rcb--overlay .rcb__desc,
  .rcb--overlay .rcb__desc > p {
    color: #fff;
  }
  .rcb--overlay .rcb__desc { max-width: 46ch; }

  @media screen and (min-width: 990px) {
    .rcb--overlay .rcb__media { aspect-ratio: 21 / 9; }
    .rcb--overlay .rcb__text { padding-bottom: 4.8rem; }
    /* the two column rule below must not win here */
    .rcb--overlay .rcb__inner { grid-template-columns: minmax(0, 1fr); }
  }

  .rcb__eyebrow {
    margin: 0 0 1.2rem;
  }

  .rcb__title {
    margin: 0;
    font-size: var(--r-h2);
    line-height: 1.12;
    letter-spacing: -0.01em;
    max-width: 18ch;
    text-wrap: balance;
  }

  .rcb__desc {
    margin-top: 1.8rem;
    max-width: 54ch;
    font-size: var(--r-body);
    line-height: 1.6;
    color: var(--r-muted);
  }

  .rcb__desc > p {
    margin: 0;
  }

  .rcb__desc > p + p {
    margin-top: 1.2rem;
  }

  /* the ratio is reserved before a byte of image arrives, so the grid below never jumps */
  .rcb__media {
    aspect-ratio: 4 / 3;
  }

  @media screen and (min-width: 990px) {
    .rcb__inner {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: 6.4rem;
    }

    .rcb__media {
      aspect-ratio: 5 / 4;
    }
  }

  /* No image: do not leave a two-column layout with one empty side. Collapse to a
     centered block with a tighter measure and more air. It has to look chosen. */
  .rcb--plain {
    padding-block: calc(var(--r-section-y) * 1.25);
  }

  {%- comment -%}
    `justify-items: center` makes the text block shrink to fit, so its width becomes whatever
    the longest line of the description happens to be. Everything inside then centres against
    THAT box rather than against the page, and the heading drifts off centre by however much
    the description's last wrap left over. Giving the block the full width of its container
    fixes the reference frame: the box is stable, so the heading and the paragraph share one
    centre line. margin-inline is explicit so the 68rem box cannot sit against the gutter if
    a later change removes .page-width.
  {%- endcomment -%}
  .rcb--plain .rcb__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 68rem;
    margin-inline: auto;
    text-align: center;
  }

  .rcb--plain .rcb__text {
    width: 100%;
  }

  .rcb--plain .rcb__title {
    max-width: 22ch;
  }

  .rcb--plain .rcb__desc {
    margin-inline: auto;
    max-width: 58ch;
  }

  .rcb--plain .r-eyebrow::after {
    margin-inline: auto;
  }
/* END_SECTION:main-collection-banner */
/* START_SECTION:main-collection-product-grid (INDEX:28) */
/* ---------- refine bar ---------- */
  .rf {
    border-top: 1px solid var(--r-rule);
    border-bottom: 1px solid var(--r-rule);
    margin-bottom: 3.2rem;
  }

  /* MOBILE: one line, never a stacked block.
     A two-column grid of accordions put three rows of controls above the first product and
     cost most of a phone screen before anything was for sale. This is the shape the
     reference brands use: a single row of labels that scrolls sideways, and the panel for
     whichever one you tap drops underneath the bar rather than pushing it around.
     Still zero JS: <details name> gives the single-open behaviour natively. */
  /* The panel anchors to the LABEL ROW, not to .rf. .rf also wraps the product count and
     the sort control, so top:100% of it dropped the panel underneath "Sort by" and
     "Apply", several rows away from the label that opened it. */
  .rf__groups { position: relative; }

  /* NO overflow on this row, deliberately.
     It was `overflow-x: auto` to let the labels scroll. That silently broke every filter:
     the open panel is positioned against .rf, and an ancestor with a non-visible overflow
     sitting between the two clips it, so the panel opened and was cut off with nothing
     visible. Setting overflow-x also makes overflow-y compute to auto, so it clipped
     downward as well. Three or four short labels fit one line on a 390px screen; if a
     collection ever carries more they wrap to a second line, which is ugly for a moment
     rather than broken forever. */
  .rf__groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    overflow: visible;
  }

  .rf__group {
    flex: 0 0 auto;
    min-width: 0;
    border-bottom: 0;
  }

  /* scoped to mobile on purpose: this selector is more specific than the desktop
     `.rf__panel` dropdown rule below, so unscoped it would win at every width and break
     the desktop flyout */
  @media screen and (max-width: 749px) {
    .rf__group[open] > .rf__panel {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 0.8rem);
      z-index: 5;
      /* the shell tone, not the page white. On a white ground an unfilled panel read as
         loose text floating under the bar rather than as a thing that had opened. */
      background: var(--r-shell);
      border: 1px solid var(--r-rule);
      box-shadow: 0 14px 24px -18px rgba(var(--color-foreground), 0.45);
      padding: 1.6rem;
      max-height: 60vh;
      overflow-y: auto;
    }
  }

  .rf__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--r-tap);
    font-size: var(--r-small);
    letter-spacing: 0.02em;
    cursor: pointer;
    list-style: none;
  }

  .rf__summary::-webkit-details-marker {
    display: none;
  }

  .rf__summary::after {
    content: '';
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    margin-inline-start: auto;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-0.2rem) rotate(45deg);
  }

  .rf__group[open] > .rf__summary::after {
    transform: translateY(0.1rem) rotate(225deg);
  }

  .rf__on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: var(--r-sage-deep);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
  }

  .rf__panel {
    padding-bottom: 1.2rem;
  }

  .rf__values {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    column-gap: 2rem;
  }

  .rf__val {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--r-tap);
    font-size: var(--r-small);
    color: inherit;
    text-decoration: none;
  }

  .rf__val .r-sw {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
  }

  .rf__val[aria-current='true'] {
    text-decoration: underline;
    text-underline-offset: 0.4rem;
  }

  .rf__n {
    margin-inline-start: auto;
    font-size: 1.2rem;
    color: var(--r-muted);
  }

  /* A swatch-only panel is a grid of dots, not a stacked list of six lone circles.
     4.4rem cells keep the tap target at the 44px floor even though the dot is 2.8rem. */
  .rf__values--sw {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.8rem;
  }
  .rf__values--sw .rf__val {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    min-height: 0;
  }
  .rf__values--sw .rf__val[aria-current='true'] .r-sw {
    box-shadow:
      inset 0 0 0 1px rgba(var(--color-foreground), 0.22),
      0 0 0 2px rgb(var(--color-background)),
      0 0 0 3px rgb(var(--color-foreground));
  }

  .rf__count {
    margin: 0;
    display: flex;
    align-items: center;
    min-height: var(--r-tap);
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: var(--r-muted);
  }

  .rf__sort {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.2rem;
  }

  .rf__sort-label {
    font-size: 1.3rem;
    letter-spacing: 0.02em;
    color: var(--r-muted);
  }

  .rf__select,
  .rf__apply {
    min-height: var(--r-tap);
    border: 1px solid var(--r-rule-strong);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--r-small);
    padding: 0 1.4rem;
  }

  .rf__apply {
    letter-spacing: 0.04em;
    cursor: pointer;
  }

  .rf__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    padding-block: 1.2rem;
    border-top: 1px solid var(--r-rule);
  }

  .rf__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: var(--r-tap);
    padding: 0 1.4rem;
    border: 1px solid var(--r-rule-strong);
    font-size: 1.3rem;
    color: inherit;
    text-decoration: none;
  }

  .rf__pill::after {
    content: '\00d7';
    font-size: 1.6rem;
    line-height: 1;
  }

  .rf__clear {
    display: inline-flex;
    align-items: center;
    min-height: var(--r-tap);
    padding-inline: 0.4rem;
    font-size: 1.3rem;
    color: var(--r-muted);
  }

  @media screen and (min-width: 750px) {
    .rf__bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 2.4rem;
      min-height: 6.4rem;
    }

    .rf__groups {
      display: flex;
      flex-wrap: wrap;
      gap: 0 2.4rem;
    }

    .rf__group {
      position: relative;
      border-bottom: 0;
    }

    .rf__panel {
      position: absolute;
      top: 100%;
      inset-inline-start: 0;
      z-index: 6;
      min-width: 30rem;
      max-width: 46rem;
      max-height: 40rem;
      overflow-y: auto;
      padding: 1.2rem 2rem 1.6rem;
      background: rgb(var(--color-background));
      border: 1px solid var(--r-rule-strong);
      box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.10);
    }

    .rf__values {
      grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }

    .rf__count {
      margin-inline-start: auto;
      order: 2;
    }

    .rf__sort {
      order: 3;
      padding-bottom: 0;
    }
  }

  /* ---------- empty state ---------- */
  .rf__empty {
    padding-block: calc(var(--r-section-y) * 1.2);
    text-align: center;
  }

  .rf__empty-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.6rem);
    line-height: 1.2;
  }

  .rf__empty-body {
    margin: 1.2rem 0 0;
    font-size: var(--r-body);
    color: var(--r-muted);
  }
/* END_SECTION:main-collection-product-grid */
/* START_SNIPPET:royal-card (INDEX:100) */
/* Royal product card.
   Base classes are in assets/royal.css, which this file does not own and does not repeat.
   These are the rules that file does not carry. */

.r-cardw { display: block; }

/* Live price on top, previous price under it on its own line. --r-muted is 0.68 alpha on the
   foreground, which still clears 4.5:1; going paler would fail. No red: the strike, the word
   "Was" and the badge are already three independent signals, so nothing here depends on
   colour alone. */
.r-card__meta { font-variant-numeric: tabular-nums; }
.r-card__now { display: block; }
.r-card__was {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.2rem;
  color: var(--r-muted);
  text-decoration: line-through;
}

/* Markdown badge. .r-media is already position:relative in royal.css, so it is the
   positioning context and no wrapper is needed. Neutral by design: it sits on collection
   grids and white rows as well as inside the clay sale band, so it takes the page's own
   ink rather than a sale colour, and the sale section overrides it locally. */
.r-badge {
  position: absolute;
  z-index: 1;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.5rem 0.9rem;
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  border: 1px solid rgba(var(--color-foreground), 0.5);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

/* The swatch row is a row of real links, so every dot needs a hit box. A full 4.8rem per dot
   would be 28.8rem across six, wider than a 58vw card on a 390px phone, so the target settles
   at 3rem by 3.2rem and the row absorbs the gap instead of adding to it. This is the one spot
   the 4.8rem floor is not met, and it is a geometric limit rather than a preference. */
.r-cardw .r-swatches { gap: 0; }
.r-sw__hit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 3.2rem;
  text-decoration: none;
  border-radius: 50%;
}
.r-sw__hit:focus-visible {
  outline: 2px solid rgb(var(--color-foreground));
  outline-offset: -2px;
}
/* the shade the shopper is already on, marked so the row reads as a position and not a menu */
.r-sw__hit[aria-current] .r-sw {
  outline: 1px solid rgba(var(--color-foreground), 0.55);
  outline-offset: 2px;
}
/* END_SNIPPET:royal-card */