/* ===================================================================
   rug-range.css — editorial skin for the range/listing template.
   Scoped under .rr-v2 so nothing leaks into other pages.
   Type: Museo Sans only (300/500/700, already declared in
   bundle-rc.css — no @font-face needed here).

   Alignment note: .rr-sechead / .rr-secrule live inside the tile
   grid's Bootstrap .row, whose -15px margins extend children 15px
   beyond the tile imagery. They carry 15px side margins so headings
   sit flush with the tiles at every width. .rr-band deliberately
   does NOT — the featured photo runs edge to edge of the row.
   =================================================================== */

.rr-v2 {
  --rr-ink: #221e1a;
  --rr-soft: #5c544b;
  --rr-muted: #938a7d;
  --rr-hair: #e0d9cc;
  --rr-accent: #cd1041;          /* brand pink, used sparingly */
  --rr-ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- page title + hero intro ---------- */
/* The page-heading h1 IS the display title (no duplicate hero title).
   Higher specificity than bundle-rc's h1 rules, both !important. */
body#listing-page #page-heading h1 {
  font-family: 'MuseoSans-300','Open Sans',sans-serif !important;
  font-size: clamp(30px, 4.4vw, 48px); line-height: 1.06;
  letter-spacing: -.01em; color: #221e1a;
}
@media (max-width: 767px) {
  /* the markup hides the visual h1 on xs (sr-only twin) - unhide it */
  body#listing-page #page-heading h1.hidden-xs { display: block !important; }
}
/* hero: full-width lead photo, intro beneath. The chip links the
   photo to its rug; dedicated landscape hero imagery drops straight
   into this slot when it exists. */
.rr-hero { margin-bottom: 4px; }
.rr-heroimg { display: block; overflow: hidden; position: relative; }
.rr-heroimg img {
  width: 100%; display: block; aspect-ratio: 21 / 8; object-fit: cover;
  transition: transform .9s var(--rr-ease);
}
.rr-heroimg:hover img { transform: scale(1.02); }
.rr-hero-chip {
  position: absolute; right: 18px; bottom: 18px; padding: 9px 16px;
  background: rgba(247,244,238,.95); color: var(--rr-ink);
  font-family: 'MuseoSans-500','Open Sans',sans-serif; font-size: 12.5px;
  letter-spacing: .04em;
}
.rr-heroimg:hover .rr-hero-chip { color: var(--rr-accent); }
.rr-hero .rr-intro { margin: 14px 0 32px; }
@media (max-width: 767px) {
  .rr-heroimg img { aspect-ratio: 4 / 3; }
  .rr-hero-chip { right: 10px; bottom: 10px; padding: 7px 12px; }
  /* hero and bands run edge to edge on mobile - the viewport
     breakout makes the element exactly viewport-wide regardless of
     container nesting and gutters */
  .rr-heroimg, .rr-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
}

.rr-hero .rr-intro {
  font-family: 'MuseoSans-300','Open Sans',sans-serif;
  font-size: 16.5px; line-height: 1.62; color: var(--rr-soft);
  max-width: 100%; margin: 0 0 22px;
}
.rr-hero .rr-intro p { margin: 0; }

/* ---------- filter bar ---------- */
/* Mobile: a horizontal scroll track with edge fades (the chevron
   blob is retired). Desktop (>1000px): wraps - nothing to scroll. */
.rr-filter { position: relative; border-top: 1px solid var(--rr-hair); border-bottom: 1px solid var(--rr-hair); margin: 38px 0 38px; }
.rr-track {
  display: flex; align-items: center; gap: 30px; height: 56px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.rr-track::-webkit-scrollbar { display: none; }
.rr-fgroup { display: flex; align-items: center; gap: 12px; flex: none; scroll-snap-align: start; }
.rr-flabel {
  font-family: 'MuseoSans-700','Open Sans',sans-serif;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--rr-muted);
}
.rr-pills { display: flex; gap: 6px; }
.rr-pill {
  font-family: 'MuseoSans-500','Open Sans',sans-serif;
  font-size: 13px; color: var(--rr-soft); padding: 7px 14px; border-radius: 100px;
  white-space: nowrap; transition: all .25s var(--rr-ease); text-decoration: none !important;
}
.rr-pill:hover { color: var(--rr-ink); background: #ece6da; }
.rr-pill.on, .rr-pill.on:hover { background: var(--rr-ink); color: #f4f0e8; }
.rr-sep { width: 1px; height: 24px; background: var(--rr-hair); flex: none; }
.rr-fade { position: absolute; top: 0; bottom: 0; width: 52px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s; }
.rr-fade.l { left: 0;  background: linear-gradient(90deg,  #fff, rgba(255,255,255,0)); }
.rr-fade.r { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.rr-fade.rr-on { opacity: 1; }
/* scroll cue: inline SVG chevron in the markup, pure white stroke -
   immune to font fallback and pseudo-element quirks */
.rr-hint {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 25px; height: 25px; border-radius: 50%; background: var(--rr-ink);
  display: flex; align-items: center; justify-content: center;
  line-height: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
/* path is symmetric in its viewBox (2..8 of 0..10), so plain flex
   centring is true centring - no optical nudge */
.rr-hint svg { width: 9px; height: 14px; display: block; }
.rr-hint.l { left: 8px; }
.rr-hint.r { right: 8px; }
.rr-hint.rr-on { opacity: .95; }
@media (min-width: 1001px) {
  /* desktop: no scrolling - wrap */
  .rr-track { flex-wrap: wrap; height: auto; min-height: 56px; overflow: visible; padding: 8px 0; row-gap: 6px; }
  .rr-fade, .rr-hint { display: none; }
}

/* ---------- section headers (flush with tile imagery) ---------- */
.rr-v2 .rr-sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 15px 6px;
}
.rr-v2 .rr-sechead.rr-more { margin-top: 56px; }
.rr-v2 .rr-sechead.rr-first { margin-top: 6px; }

/* runner tiles: big square filling the column - rows stay level and
   flush whatever the source photo's aspect. Padded-box crop, not
   aspect-ratio: works on every WebKit (block box with a definite
   width, so the table-cell percentage-padding trap doesn't apply). */
.rr-rsqbox { display: block; position: relative; width: 100%; padding-top: 100%; overflow: hidden; }
.rr-rsqbox .rr-rsq { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.rr-v2 .rr-sechead h2 {
  font-family: 'MuseoSans-500','Open Sans',sans-serif !important;
  font-size: 23px; letter-spacing: -.005em; color: var(--rr-ink); margin: 0;
}
.rr-v2 .rr-sechead .rr-viewall {
  font-family: 'MuseoSans-500','Open Sans',sans-serif;
  font-size: 12.5px; letter-spacing: .05em; color: var(--rr-accent); white-space: nowrap;
  text-decoration: none;
}
.rr-v2 .rr-sechead .rr-viewall:hover { color: var(--rr-ink); }
.rr-v2 .rr-secrule { height: 1px; background: var(--rr-hair); border: 0; margin: 0 15px 24px; }

/* ---------- tile captions - single authority for BOTH pages -------
   Values = the catalogue's rendered look (captured, unchanged).
   Dual-scoped and ranked to beat bundle-rc's #listing rules and
   bundle's generic .product-name rules, so the identical caption
   renders on the catalogue (#listing) and the viewer's
   You-may-also-like (#product-related) with no dependence on
   ancestor utility classes (.body-content etc.). */
#listing .rr-v2 .home-product .product-name a,
#product-related.rr-v2 .home-product .product-name a {
  font-family: 'MuseoSans-700','Open Sans',sans-serif !important;
  font-size: 16px; line-height: 24px; letter-spacing: normal;
  display: block; margin: 4px 0;
  color: var(--rr-ink); text-decoration: underline;
}
#listing .rr-v2 .home-product .product-detail,
#listing .rr-v2 .home-product .product-colour,
#product-related.rr-v2 .home-product .product-detail,
#product-related.rr-v2 .home-product .product-colour {
  display: block;
  font-family: 'MuseoSans-300','Open Sans',sans-serif;
  font-size: 14px; line-height: 16px; color: var(--rr-muted);
}
#listing .rr-v2 .home-product .price,
#product-related.rr-v2 .home-product .price {
  display: block; margin-top: 2px;
  font-family: 'MuseoSans-500','Open Sans',sans-serif !important;
  font-size: 16px; line-height: 24px; color: var(--rr-ink);
}
#listing .rr-v2 .home-product .price .currency-symbol,
#product-related.rr-v2 .home-product .price .currency-symbol {
  /* inline: bundle-rc's "#product-related .item span" blockifies every
     span, splitting "from / £ / 238" onto separate lines */
  display: inline;
  font-family: 'MuseoSans-500','Open Sans',sans-serif !important;
  font-size: 16px;
}
.rr-v2 .home-product { margin-bottom: 36px; }
@media (max-width: 767px) {
  /* smaller tiles, proportionally tighter rows (also the gap above
     section headers, which is mostly this margin) */
  .rr-v2 .home-product { margin-bottom: 26px; }
}

/* ---------- featured interlude band ---------- */
/* Desktop: flush with the tile imagery (15px counters the row's
   negative margins). Mobile: full-bleed edge to edge, deliberately. */
.rr-band { position: relative; margin: 10px 0 26px; overflow: hidden; }
@media (min-width: 768px) {
  .rr-band { margin-left: 15px; margin-right: 15px; }
}
.rr-band a { display: block; position: relative; }
.rr-band img {
  width: 100%; display: block; aspect-ratio: 21 / 9; object-fit: cover;
  transition: transform .9s var(--rr-ease);
}
.rr-band:hover img { transform: scale(1.03); }
/* solid caption card - legible on any photo, CTA always visible
   (hover-only CTAs don't exist on touch) */
.rr-band-card {
  position: absolute; left: 26px; bottom: 26px; max-width: 420px;
  padding: 18px 24px; background: rgba(247,244,238,.95); color: var(--rr-ink);
}
.rr-band-k {
  display: block; font-family: 'MuseoSans-700','Open Sans',sans-serif;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rr-accent);
}
.rr-band-t {
  display: block; font-family: 'MuseoSans-300','Open Sans',sans-serif;
  font-size: 24px; margin-top: 5px; color: var(--rr-ink);
}
.rr-band-cta {
  display: inline-block; font-family: 'MuseoSans-500','Open Sans',sans-serif;
  font-size: 12.5px; letter-spacing: .05em; margin-top: 9px; color: var(--rr-ink);
  border-bottom: 1px solid var(--rr-ink);
}
.rr-band:hover .rr-band-cta { color: var(--rr-accent); border-color: var(--rr-accent); }
@media (max-width: 760px) {
  .rr-band img { aspect-ratio: 16 / 10; }
  /* card collapses to the hero-style corner chip - the photo stays
     clear; kicker + title are desktop-only */
  .rr-band-card { left: auto; right: 10px; bottom: 10px; padding: 7px 12px; max-width: none; }
  .rr-band-k, .rr-band-t { display: none; }
  .rr-band-cta { margin-top: 0; border-bottom: 0; }
}