/* ===================================================================
   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 {
  /* depth = single source of truth: virtual/hero-ratio.asp -> cfgRangeRatio -> --rr-hero-ratio
     (emitted on rug-range.asp). Same var drives the rugadmin "Hero crop" preview. */
  width: 100%; display: block; aspect-ratio: var(--rr-hero-ratio, 21 / 8); object-fit: cover; object-position: center 100%;
}
/* Lightup, not zoom - same tile-hover tokens as the homepage tiles (virtual/head.asp:
   --tile-hover-filter-photo / -dur / -ease), single source of truth for the look. */
@media (hover: hover) {
  .rr-heroimg img { transition: filter var(--tile-hover-dur, 420ms) var(--tile-hover-ease, cubic-bezier(.22,1,.36,1)); }
  .rr-heroimg:hover img { filter: var(--tile-hover-filter-photo, contrast(1.06) saturate(1.10) brightness(1.02)); }
}
/* hero overlay shares the feature-band card style (see .rr-band-card below) */
.rr-hero .rr-intro { margin: 14px 0 32px; }
@media (max-width: 767px) {
  .rr-heroimg img { aspect-ratio: 1 / 1; }
  /* 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; }
/* Reset-filters chip - only rendered when a filter is active, sits first
   in the track so it's visible without scrolling on mobile. Outlined +
   x so it reads as "clear", not another filter pill. */
.rr-reset {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-family: 'MuseoSans-500','Open Sans',sans-serif; font-size: 13px;
  color: var(--rr-soft); padding: 6px 13px; border-radius: 100px;
  border: 1px solid var(--rr-hair); white-space: nowrap;
  text-decoration: none !important; transition: all .25s var(--rr-ease);
  scroll-snap-align: start;
}
.rr-reset:hover { color: var(--rr-ink); border-color: var(--rr-ink); }
.rr-reset .rr-reset-x { font-size: 17px; line-height: 0; margin-top: -1px; }
@media (min-width: 1001px) {
  /* desktop: compact circular x, in-flow, pushed to the far right of the
     last filter line (margin-left:auto) so it sits WITH the filters, not
     floating. Mobile keeps the in-line "x Clear" text. */
  .rr-reset {
    order: 9; margin-left: auto; gap: 0; padding: 0;
    width: 30px; height: 30px; border-radius: 50%; justify-content: center;
  }
  .rr-reset .rr-reset-t { display: none; }
  .rr-reset .rr-reset-x { font-size: 18px; margin-top: 0; }
}
.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. Tighten only the inter-group COLUMN gap
     (mobile keeps its 30px scroll spacing) so the full-label filter set fits
     one line inside the 1170px container without crunching the pills. */
  .rr-track { flex-wrap: wrap; height: auto; min-height: 56px; overflow: visible; padding: 8px 0; column-gap: 20px; row-gap: 6px; }
  .rr-fade, .rr-hint { display: none; }
}
/* Tablet & phone: drop the horizontal scroll entirely and WRAP, so every filter
   option is visible without swiping (the swipe cue was easily missed and the
   chevron read as a button). */
@media (max-width: 1000px) {
  .rr-track {
    flex-wrap: wrap; height: auto; overflow: visible;
    scroll-snap-type: none; column-gap: 22px; row-gap: 8px; padding: 10px 0;
  }
  .rr-fade, .rr-hint { display: none; }
}
/* Phones: three compact rows (label LEFT, chips wrapping beside it) so the whole
   filter stays short — the shopper sees rugs fast — while every option is a visible,
   consistent outline chip (selected = dark fill). Trim the band's fat margins too. */
@media (max-width: 767px) {
  .rr-filter { margin: 16px 0 20px; border-top: none; border-bottom: none; }
  .rr-track { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 2px; }
  .rr-fgroup { width: 100%; flex-direction: row; align-items: baseline; gap: 12px; }
  .rr-flabel { flex: 0 0 64px; letter-spacing: .12em; }
  .rr-pills { flex: 1 1 auto; flex-wrap: wrap; gap: 7px; }
  .rr-pill { border: 1px solid var(--rr-hair); background: #fff; padding: 7px 13px; font-size: 13px; }
  .rr-pill.on, .rr-pill.on:hover { border-color: var(--rr-ink); }
  .rr-sep { display: none; }
  .rr-reset { align-self: flex-start; }
}

/* ---------- 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; }
/* Nudge ONLY the first collection label up 8px on desktop. transform (not
   margin) so it can't be pulled into the floated tiles above - a negative
   margin collapses this flex heading (flex boxes shrink to dodge floats).
   ~ excludes every later heading, so only the first (not preceded by another
   sechead) moves; the rest stay put. */
@media (min-width: 768px) {
  .rr-v2 .rr-sechead { transform: translateY(-8px); }
  .rr-v2 .rr-sechead ~ .rr-sechead { transform: none; }
}

/* 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); }
/* Section-label link: clickable heading, styled mostly as a plain heading
   (inherits the h2 colour/size, no underline) but with a quiet chevron
   after the text - a smaller, muted cousin of the .rr-viewall arrow so it
   reuses the page's existing "this is a link" vocabulary instead of
   inventing a new one. Visible AT REST (not just on hover), since anyone
   scrolling on mobile never hovers - the chevron shifts to accent pink
   and nudges right on hover/focus as the interactive confirmation. */
.rr-v2 .rr-sechead h2 .rr-sechead-link,
.rr-v2 .rr-sechead h2 .rr-sechead-link:hover,
.rr-v2 .rr-sechead h2 .rr-sechead-link:focus {
  font: inherit !important;       /* take the h2's size/family/weight - beats any global "a" rule */
  letter-spacing: inherit;
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.rr-v2 .rr-sechead h2 .rr-sechead-link .rr-sechead-chev {
  font-size: .62em; color: var(--rr-muted);
  display: inline-block; transition: color .18s, transform .18s;
}
.rr-v2 .rr-sechead h2 .rr-sechead-link:hover .rr-sechead-chev,
.rr-v2 .rr-sechead h2 .rr-sechead-link:focus .rr-sechead-chev {
  color: var(--rr-accent); transform: translateX(3px);
}
.rr-v2 .rr-secrule { height: 1px; background: var(--rr-hair); border: 0; margin: 0 15px 30px; }

@media (max-width: 767px) {
	.rr-v2 .rr-secrule { height: 1px; background: var(--rr-hair); border: 0; margin: 0 0px 20px; }
	
}


/* ---------- 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;
}
/* image-to-caption gap = the range's 12px (.rr-cw margin-top) ONLY:
   the related composite carries an inline "margin:0 0 5%" (rscTile
   "related") and rc/style adds "#product-related .item img
   {margin-bottom:5%}" - both doubled the gap vs the range grid
   (owner 2026-07-13) */
#product-related.rr-v2 .rb-corner { margin-bottom: 0 !important; }
#product-related.rr-v2 .item img { margin-bottom: 0; }

/* Phones show ONE slide per line (owl itemsMobile [480,1]) - the
   rc/style.css 200px photo cap leaves a stamp in a full-width slide;
   let the roomset photo fill the slide there (owner 2026-07-13). */
@media (max-width: 480px) {
  /* the REAL cap (found via CDP computed-width walk, 2026-07-13):
     bundle-rc's "#product-related .item .home-product {max-width:200px}"
     boxes the whole tile. On phones the 1-per-line slide runs it at
     282px (owner 2026-07-13), centred as one block like the desktop
     treatment - image and caption stay aligned. */
  #product-related.rr-v2 .item .home-product { max-width: 282px; margin-left: auto; margin-right: auto; }
  #product-related.rr-v2 .related-product-image { width: 100%; }
  /* the readymade pages' related tiles are corner COMPOSITES carrying
     an inline 200px aspect box (RELATED_TILE_PX, rscTile "related" in
     rug-shared) - scale the box to the full slide on phones;
     !important is required to beat the inline style */
  #product-related.rr-v2 .rb-corner { width: 100% !important; padding-bottom: 100% !important; }
  /* same treatment for the pre-rendered FLOOR capture tile that replaced
     the live composite (rbCaptureFloorImg "related", 2026-07-15) - it
     carries the same inline 200px box and was sitting left in the centred
     282px card (owner 2026-07-16: "horizontally centre the image") */
  #product-related.rr-v2 .rb-rel-tile { width: 100% !important; padding-bottom: 100% !important; }
}

/* You-may-also-like arrows = the HOMEPAGE hero carousel's buttons
   VERBATIM (index.asp #owl-demo rules, owner 2026-07-13): 54px box,
   translucent plate filling it (8px radius), bold chevron flex-centred.
   Also neutralises rc/style.css's "#product-related .owl-prev
   {margin-top:-69px}" hack (this file loads later, same specificity). */
#product-related .owl-prev, #product-related .owl-next{
  margin-top:0; z-index:11; width:27px; height:27px; color:#fff;
  display:flex; align-items:center; justify-content:center;
  /* centred on the IMAGE, not the whole carousel (image is top-aligned
     in the slide; caption hangs below): tile image = 200px tall here */
  top:100px;
  transform:translateY(-50%);
}
/* flush with the CONTAINER's content edge (owner 2026-07-13): the
   carousel box spans the viewport (.row's -15px margins), so the
   container edge sits 15px in - not 0, which is the viewport edge */
#product-related .owl-prev{left:15px;} #product-related .owl-next{right:15px;left:auto;}
/* owner-picked style B at HALF size (2026-07-13): 27px soft-smoke
   plate, white chevron scaled to fit */
#product-related .owl-prev:before, #product-related .owl-next:before{
  left:0;right:0;top:0;bottom:0;width:auto;height:auto;margin:0;transform:none;border-radius:4px;
  background-color:rgba(17,17,17,.45);opacity:1;box-shadow:none;
}
#product-related .owl-prev .fa-regular, #product-related .owl-next .fa-regular{
  color:#fff;font-size:14px;top:0;left:0;right:0;
}
#product-related .owl-prev .svg-inline--fa, #product-related .owl-next .svg-inline--fa{position:relative;z-index:1;}
@media (max-width: 480px) {
  /* image = the 282px tile, top-aligned in the slide */
  #product-related .owl-prev, #product-related .owl-next{ top: 141px; }
}
/* "You may also like" heading on phones: bumped twice by the owner
   (2026-07-13), 16px base -> 18 -> 20px (matches the desktop size) */
@media (max-width: 767px) {
  #product-related .section-title{ font-size: 20px; }
}
/* related-carousel colourway titles 2px smaller than the range grid's
   17px on desktop (owner 2026-07-13) - the 200px tiles read better
   with a lighter title */
@media (min-width: 768px) {
  #product-related.rr-v2 .rr-cw .nm{ font-size: 15px; }
}

/* You-may-also-like FOUC guard (owner 2026-07-13: "loads vertically
   then jumps to horizontal"). Until owlCarousel wraps the raw .item
   divs (init inserts .owl-wrapper), lay them out as the finished rail
   at the SAME per-width counts as the owl config in bundle.js
   (items:5, [1200,3], [700,2], [480,1]) and clip the overflow - the
   init becomes a hand-off, not a jump. Post-init the :not() stops
   matching and owl's own layout takes over; browsers without :has()
   simply keep the old behaviour. */
#shop-products:not(:has(.owl-wrapper)) { display: flex; overflow: hidden; }
#shop-products:not(:has(.owl-wrapper)) > .item { flex: 0 0 20%; min-width: 20%; padding: 0 10px; box-sizing: border-box; }
@media (max-width: 1200px) {
  #shop-products:not(:has(.owl-wrapper)) > .item { flex-basis: 33.333%; min-width: 33.333%; }
}
@media (max-width: 700px) {
  #shop-products:not(:has(.owl-wrapper)) > .item { flex-basis: 50%; min-width: 50%; }
}
@media (max-width: 480px) {
  #shop-products:not(:has(.owl-wrapper)) > .item { flex-basis: 100%; min-width: 100%; }
}
.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:32px; }
}

/* ---------- 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 30px; overflow: hidden; }
@media (min-width: 768px) {
  .rr-band {  margin-left: 15px; margin-right: 15px; }
  .rr-band { position: relative; margin-bottom: 32px; }
}
.rr-band a { display: block; position: relative; }
.rr-band img {
  width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 100%;
}
@media (hover: hover) {
  .rr-band img { transition: filter var(--tile-hover-dur, 420ms) var(--tile-hover-ease, cubic-bezier(.22,1,.36,1)); }
  .rr-band:hover img { filter: var(--tile-hover-filter-photo, contrast(1.06) saturate(1.10) brightness(1.02)); }
}
/* Photo overlay (feature bands AND the page hero): a 1:1 copy of the homepage hero
   carousel panel - title + rule + "Rug shown: x - view rug" - minus the button.
   Translucent-black box on desktop, full-width gradient-fade footer on mobile.
   Whole photo is the link, so "view rug" is styled text (not a nested anchor).
   Colours forced white with !important to beat the listing's bundle link colours. */
.rr-band-card {
  position: absolute; left: 26px; bottom: 26px; max-width: 430px;
  padding: 26px 28px; background: rgba(0,0,0,.5); border-radius: 8px; color: #fff;
}
.rr-band-t {
  display: block; font-family: 'MuseoSans-700','Open Sans',sans-serif;
  font-size: 25px; font-weight: 700; line-height: 1.2; margin: 0; color: #fff !important;
}
.rr-rule { display: block; width: 60px; height: 2px; background: #fff; margin: 14px 0; }
.rr-shown { display: block; font-size: 13px; line-height: 1.55; margin: 0; color: #fff !important; }
.rr-viewrug { color: #fff !important; text-decoration: underline; white-space: nowrap; font-size: inherit; } /* inherit beats a generic span size rule that blew the link to 15px inside 12-13px credit lines (hero, bands, collection tiles) */
@media (max-width: 760px) {
  .rr-band img { aspect-ratio: 5 / 4; }
  /* full-width gradient-fade footer (like the carousel on mobile) */
  .rr-band-card {
    left: 0; right: 0; bottom: 0; top: auto; max-width: none;
    padding: 46px 16px 16px; border-radius: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.55) 42%, rgba(0,0,0,0));
  }
  .rr-band-t { font-size: 18px; }
  .rr-rule { margin: 9px 0; }
  .rr-shown { font-size: 12px; }
}

/* ---------- scroll-in reveal (same as the homepage) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rr-v2 .rv { opacity: 0; transform: translateY(26px); transition: opacity .85s ease, transform .9s cubic-bezier(.22,.7,.2,1); }
  .rr-v2 .rv.in { opacity: 1; transform: none; }
}

/* ---------- closing CTA band (ported from the homepage .close) ---------- */
.rr-close { text-align: center; background: #FAF5F1; padding: clamp(35px,5vw,64px) 16px; }
.rr-close .rr-close-eyebrow {
  font-family: 'MuseoSans-500','Open Sans',sans-serif; font-size: 11.5px; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase; color: #7f8d6c; margin: 0 0 16px;
  white-space: nowrap; /* eyebrows never wrap (owner 2026-07-13) */
}
.rr-close .rr-close-h {
  font-family: 'MuseoSans-300','Open Sans',sans-serif; font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(30px,4.4vw,54px); line-height: 1.06; color: #24251f; max-width: 20ch; margin: 0 auto;
}
.rr-close .rr-close-lead {
  font-family: 'MuseoSans-300','Open Sans',sans-serif; font-weight: 300;
  font-size: clamp(15px,1.35vw,18px); line-height: 1.75; color: #7e8278; max-width: 58ch; margin: 16px auto 30px;
}
.rr-close .rr-close-cta {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-family: 'MuseoSans-500','Open Sans',sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .02em;
  padding: 13px 26px; border: 1px solid #24251f; border-radius: 4px; color: #24251f; background: transparent; transition: .25s;
}
.rr-close .rr-close-cta:hover { background: #24251f; color: #fff; }
.rr-close .rr-close-cta .ar { font-size: 15px; }
@media (max-width: 767px) { .rr-close { padding: 23px 16px 44px; } }
/* two columns - copy left, colour-swatch image right (equal height); stacks on mobile */
.rr-close .rr-close-promo { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px,5vw,64px); align-items: center; max-width: 1100px; margin: 0 auto; text-align: left; }
/* Align the band content with the page container at EVERY width - Bootstrap
   containers are fixed (1170/970/750), so a flat 1100px cap left the band
   content 80px+ proud of the content column below 1200px (2026-07-09). */
@media (min-width: 1200px) { .rr-close .rr-close-promo { max-width: 1140px; } }
@media (min-width: 992px) and (max-width: 1199px) { .rr-close .rr-close-promo { max-width: 940px; } }
@media (min-width: 768px) and (max-width: 991px) { .rr-close .rr-close-promo { max-width: 720px; } }
.rr-close .rr-close-copy { align-self: center; }
.rr-close .rr-close-copy .rr-close-h { max-width: none; margin: 0; }
.rr-close .rr-close-copy .rr-close-lead { max-width: 48ch; margin: 16px 0 30px; }
.rr-close .rr-close-media { border-radius: 4px; overflow: hidden; }
.rr-close .rr-close-media img { width: 100%; height: auto; aspect-ratio: 1/1; display: block; }
@media (max-width: 767px) {
  .rr-close .rr-close-promo { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .rr-close .rr-close-copy { order: 2; }
  .rr-close .rr-close-media { order: 1; }
  .rr-close .rr-close-copy .rr-close-h { max-width: 20ch; margin: 0 auto; }
  .rr-close .rr-close-copy .rr-close-lead { max-width: 58ch; margin: 16px auto 30px; }
}
/* close band meets the footer (same as the homepage, which hides this leading spacer) */
#listing-page footer > .bg-white { display: none !important; }

/* ---------- phone gutters: centre gap = page margin (2026-07-09) ----------
   Bootstrap 2-up rows put 30px between tiles but only 15px at the page
   edges - the gutter reads double the margin. Halve the column padding and
   pull the row -7.5px: outer tile edges stay at 15px, the centre gap drops
   to 15px, tiles gain the width. Siblings inside the same row compensate:
   sechead margins drop to 7.5px (text stays flush with tile imagery),
   secrule pulls -7.5px (keeps its full-width run). The hero/band are
   already viewport-bled on phones (calc(50% - 50vw)) and never shift. */
@media (max-width: 767px) {
  .rr-v2 > .row { margin-left: -7.5px; margin-right: -7.5px; }
  .rr-v2 > .row > [class*="col-"] { padding-left: 7.5px; padding-right: 7.5px; }
  .rr-v2 .rr-sechead { margin-left: 7.5px; margin-right: 7.5px; }
  .rr-v2 .rr-secrule { margin-left: -7.5px; margin-right: -7.5px; }
}

/* ---- Colourway tile caption (owner 2026-07-13) ---------------------
   Emitted by rbTailColourway (rug-shared) when a page opts in with
   rbTailMode = "colourway" - currently the range/collections pages.
   Both colour names in the light face, a thin bar of the rug's own
   pile textures, then the material + from-price fact line. Nothing
   styled as a hyperlink; the title tints the shared hover pink. */
.rr-v2 .rr-cw { display: block; margin-top: 12px; text-decoration: none !important; }
.rr-v2 .rr-cw .nm {
  display: block; font-family: 'MuseoSans-300', system-ui, sans-serif; font-weight: 400;
  font-size: 17px; color: #24251f; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 260ms cubic-bezier(.22,1,.36,1);
}
.rr-v2 .rr-cw .bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin: 7px 0 6px; max-width: 120px; }
/* bundle-rc's "#product-related .item span" blockifies every span in
   the viewer's carousel (see the currency-symbol note above) - that
   collapses the bar's flex segments to zero width. Re-flex it at ID
   specificity so the texture chips survive on the viewer too. */
#product-related.rr-v2 .rr-cw .bar { display: flex; }
.rr-v2 .rr-cw .bar i { flex: 1; background-size: cover; background-position: center; }
.rr-v2 .rr-cw .sub {
  display: block; font-size: 13px; color: #7e8278; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rr-v2 .home-product:hover .rr-cw .nm,
.rr-v2 .home-product:focus-within .rr-cw .nm { color: var(--tile-hover-pink, #d9378e); }
@media (max-width: 767px) {
  .rr-v2 .rr-cw .nm { font-size: 15px; }
}