/* ============================================================================
   Collection grid — tile styles
   ============================================================================
   Lifted verbatim out of the TILE_CSS template literal in js/product-tile.js,
   where it was interpolated into every hit and so shipped once per tile: 49
   identical <style> elements on a shop or search page, roughly 505 KB of
   duplicate CSS rebuilt in the browser on every search, filter change and
   page of results. No cache layer ever saw it — InstantSearch builds the
   tiles client side, after load.

   Nothing here is rewritten. Same rules, same order, same specificity; the
   only change is that the browser parses them once and caches the file. The
   move onto the rk-tile namespace happens on top of this, as its own step, so
   that any visual regression can be pinned to one change or the other.

   Load order matters: these rules were previously injected inline in the body
   and so landed after style.css. Enqueued late for the same reason.
   ============================================================================ */

  .sections_group .ais-Hits-item .mfn-li-product-row.mfn-li-product-row-image
    .image_frame .image-row .image_wrapper { box-shadow: none!important; }
  .image-row { text-decoration: none!important; }
  .image-row:hover .tile-copy { text-decoration: none!important; color: #333!important; }
  .tile-copy { text-decoration: none!important; }
  .ais-Hits-item .star-icon-outline,
  .ais-Hits-item .star-icon-filled { max-width: 20px; }
  .star-icon-outline { display: inline-block!important; }
  .star-icon-filled  { display: none!important; }
  .wishlist-star-icon { display: inline-block; }
  .wishlist-star-icon:hover .star-icon-outline { display: none!important; }
  .wishlist-star-icon:hover .star-icon-filled  { display: inline-block!important; }
  .favorite-icon-is-active .star-icon-filled  { display: block!important; }
  .favorite-icon-is-active .star-icon-outline { display: none!important; }
  .others {
    font-family: 'Blair', sans-serif!important;
    margin: 2px 0; font-size: 10px;
    letter-spacing: 2px!important; display: inline-block; color: #333!important;
  }
  .volumes-info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .volumes-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #999;
    border-radius: 50%;
    font-family: 'Futura Light BT', sans-serif;
    font-size: 11px;
    color: #999;
    cursor: pointer;
    line-height: 1;
  }
  .volumes-info-popup {
    display: none;
    position: fixed;
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 1px solid #ddd;
    padding: 14px 18px;
    font-family: 'Futura Light BT', sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #444;
    line-height: 1.5;
    width: calc(100vw - 40px);
    max-width: 300px;
    text-align: center;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
  .login-to-see-price-cta:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  .volumes-info-wrapper:hover .volumes-info-popup {
    display: block;
  }
  .ais-Hits-item .image_wrapper { position: relative; }
  .ais-Hits-item .rk-offer-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    padding: 6px 10px;
    background: rgba(244, 241, 234, 0.94);
    border: 1px solid rgba(68, 68, 68, 0.22);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    color: #4a4a4a;
    font-family: 'Futura Light BT', sans-serif;
    letter-spacing: 2px;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    border-radius: 5px !important;
  }



  /* Dynamic gallery one-by-one carousel */
  .ais-Hits-item .dynamic-gallery-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
  }
  .ais-Hits-item .dynamic-gallery-wrapper > .image-row {
    display: block;
    width: 100%;
    text-decoration: none !important;
  }
  .ais-Hits-item .dynamic-gallery-images {
    position: relative;
    width: 100%;
    line-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 5px;
    touch-action: pan-y pinch-zoom;
  }
  .ais-Hits-item .dynamic-gallery-track {
    display: flex;
    width: 100%;
    overflow: visible;
    scroll-snap-type: none;
    scrollbar-width: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  .ais-Hits-item .dynamic-gallery-track.is-dragging {
    transition: none;
  }
  .ais-Hits-item .dynamic-gallery-track::-webkit-scrollbar {
    display: none;
  }
  .ais-Hits-item .dynamic-gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px !important;
    background-color: #fff;
    touch-action: pan-y pinch-zoom;
  }
  .ais-Hits-item .dynamic-gallery-image {
    display: block;
    width: 95%;
    height: auto;
    max-width: 96%;
    object-position: center;
    max-height: 185px;
    height: 185px !important;
    object-fit: contain;
    mix-blend-mode: multiply;
    touch-action: pan-y pinch-zoom;
  }
  .ais-Hits-item .dynamic-gallery-video {
    width: 95%;
    max-width: 96%;
    height: 185px;
    position: relative;
    overflow: hidden;
    background: #000;
  }
  .ais-Hits-item .dynamic-gallery-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
  }
  .ais-Hits-item .dynamic-gallery-video-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    touch-action: pan-y pinch-zoom;
  }
  .ais-Hits-item .dynamic-gallery-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 15px;
    flex-shrink: 0;
    line-height: 0;
  }
  .ais-Hits-item .dynamic-gallery-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: rgba(68, 68, 68, 0.25);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
  }
    
  .ais-Hits-item .dynamic-gallery-dot.video-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: rgba(180, 160, 130, 0.15);
    border: 2px solid #b4a082;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    box-shadow: 0 0 0 0 rgba(180, 160, 130, 0.4);
    animation: mobileVideoGlow 2.5s ease-in-out infinite;
    padding: 0;
  }
  .ais-Hits-item .dynamic-gallery-dot.video-dot.is-active {
    background: rgba(180, 160, 130, 0.35);
    border-color: #9a8a6e;
    transform: none;
    animation: none;
    box-shadow: 0 0 0 3px rgba(180, 160, 130, 0.35);
  }
  .ais-Hits-item .dynamic-gallery-dot.video-dot.is-active::after {
    border-left-color: #9a8a6e;
  }
  .dynamic-gallery-dot.video-dot::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 8px solid #b4a082;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 3px;
  }
  .ais-Hits-item .dynamic-gallery-dot.is-active:not(.video-dot) {
    background: rgba(68, 68, 68, 0.7);
    transform: scale(1.15);
  }
  .ais-Hits-item .dynamic-gallery-dot:hover:not(.video-dot) {
    background: rgba(68, 68, 68, 0.5);
  }
  @keyframes mobileVideoGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 160, 130, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(180, 160, 130, 0); }
  }
  .ais-Hits-item .dynamic-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(68, 68, 68, 0.18);
    background: rgba(255, 255, 255, 0.92);
    color: #444;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .ais-Hits-item .dynamic-gallery-nav.prev { left: 8px; }
  .ais-Hits-item .dynamic-gallery-nav.next { right: 8px; }
  .ais-Hits-item .image_frame:hover .dynamic-gallery-nav,
  .ais-Hits-item .image_frame.hover .dynamic-gallery-nav {
    opacity: 1;
    pointer-events: auto;
  }
  .ais-Hits-item .dynamic-gallery-nav:hover {
    background: #333;
    border-color: #333;
    color: #fff;
  }
  .ais-Hits-item .dynamic-gallery-nav:disabled,
  .ais-Hits-item .image_frame:hover .dynamic-gallery-nav:disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
  }
  @media (hover: none) {
    .ais-Hits-item .dynamic-gallery-nav {
      opacity: 1;
      pointer-events: auto;
    }
  }

  
  .dynamic-gallery-wrapper {
    display: none !important;
}
/* Hide thumbnail image on mobile */
@media (max-width: 520px) {
  .dynamic-gallery-wrapper.image-row { aspect-ratio: 0 !important; }
  
  .dynamic-gallery-wrapper {
    display: flex !important;
    max-width: fit-content;
    max-height: fit-content;
    min-width: 100%;
    min-height: 216px;
    justify-content: center;
    align-items: center;
  }
  .dynamic-gallery-wrapper .main-image {
    padding: 3px;
  }
  /* Jahanshah / Royal pieces size like every other tile.

     The frame these rules made room for was switched off in f8a6e7f, but
     the sizing was kept on the grounds that it sized the tile rather than
     drew the frame. It did both: width: 36vw against a slide that is
     otherwise full width, and max-height: 240px, left Royal rugs visibly
     smaller than their neighbours with nothing around them to explain it.

     They now inherit .dynamic-gallery-wrapper .main-image above. The Royal
     label and the rest of the metadata are untouched. */
  .thumbnail-image {
    display: none !important;
  }

  .dynamic-gallery-slide.image_wrapper {
      width: 100%;
      height: 100% !important;
  }
}


/* ============================================================================
   Column density — 1, 2 or 3 per row
   ============================================================================
   Everything below is scoped to [data-cols] on .product_hits_wrapper, which
   js/collection-grid.js sets. Without that attribute nothing here applies and
   the grid behaves exactly as it did, so this is safe to ship dark.
   ============================================================================ */

/* The list is flexbox with percentage widths in style.css, restated at four
   breakpoints (32%/29%, then 46%, then column, then a 2-col grid under 520px).
   Turning it into a real grid is what makes the column count one number
   instead of four hardcoded percentages. !important appears below only where
   style.css already used it - the rest wins on specificity alone. */
:is(.product_hits_wrapper, .adv-hits)[data-cols] .ais-Hits-list,
:is(.product_hits_wrapper, .adv-hits)[data-cols] .ais-InfiniteHits-list {
  display: grid !important;
  grid-template-columns: repeat(var(--rk-cols, 3), minmax(0, 1fr));
  column-gap: var(--rk-gap, 28px);
  row-gap: var(--rk-row-gap, 56px);
  margin: 0 !important;
  justify-content: initial;
}

/* The grid owns the width now; drop the percentage basis so a tile fills its
   track instead of sizing itself. minmax(0,1fr) above keeps a wide rug from
   pushing its column past its share. */
:is(.product_hits_wrapper, .adv-hits)[data-cols] .ais-Hits-item,
:is(.product_hits_wrapper, .adv-hits)[data-cols] .ais-InfiniteHits-item {
  flex-basis: auto;
  width: auto;
  max-width: none;
  margin: 0 !important;
}

/* The frame carried a fixed height (style.css: 25em, 20em under 1239px).
   That is what stopped two-up from working: with object-fit: contain the rug
   is sized by whichever axis runs out first, so doubling the column width
   while the frame stayed 400px tall just added empty space either side of an
   unchanged rug. An aspect ratio makes the frame grow with its column, so the
   rug gets bigger in both directions and two-up earns its width.

   7/8 is chosen to land near today's proportions at three-up on a typical
   desktop (~348px column against the old 400px frame = 0.87). Tune it live:
   document.querySelector('.product_hits_wrapper').style.setProperty('--rk-frame-ratio','4 / 5') */
:is(.product_hits_wrapper, .adv-hits)[data-cols] .ais-Hits-item .mfn-li-product-row.mfn-li-product-row-image .image_frame .image_wrapper,
:is(.product_hits_wrapper, .adv-hits)[data-cols] .ais-InfiniteHits-item .mfn-li-product-row.mfn-li-product-row-image .image_frame .image_wrapper {
  height: auto;
  aspect-ratio: var(--rk-frame-ratio, 7 / 8);
  /* style.css (~5341, under "Advanced Search") sets min-height: 600px
     !important on this frame. With a fixed height that only made tall boxes,
     but through an aspect ratio a minimum height becomes a minimum width -
     600 x 7/8 = 525px - so any column narrower than that had its frame
     spill out to the right, the rug sitting well right of its caption and
     the last column running off the grid. Measured at 1206px: a 525px frame
     in a 350px tile, 87px off centre. */
  min-height: 0 !important;
  max-width: 100%;
}

/* Desktop: the toggle decides. Two-up gets a wider gutter so the bigger rugs
   are not shoulder to shoulder. */
@media screen and (min-width: 1025px) {
  :is(.product_hits_wrapper, .adv-hits)[data-cols="3"] { --rk-cols: 3; --rk-gap: 28px; --rk-row-gap: 56px; }
  :is(.product_hits_wrapper, .adv-hits)[data-cols="2"] { --rk-cols: 2; --rk-gap: 64px; --rk-row-gap: 72px; }
  :is(.product_hits_wrapper, .adv-hits)[data-cols="1"] { --rk-cols: 1; --rk-gap: 0;    --rk-row-gap: 96px; }

  /* One per row needs a measure. With the frame on an aspect ratio, a rug at
     the full 1440px container would stand ~1600px tall - taller than any
     screen. 760px keeps a single piece large but whole in the viewport. Same
     !important as the margin rule above, and wins on the extra attribute. */
  :is(.product_hits_wrapper, .adv-hits)[data-cols="1"] .ais-Hits-list,
  :is(.product_hits_wrapper, .adv-hits)[data-cols="1"] .ais-InfiniteHits-list {
    max-width: 760px;
    margin: 0 auto !important;
  }
}

/* Tablet and phone: one or two per row. Three is too small to see a rug at
   these widths, so a desktop choice of three shows as two here - the same
   preference, not a separate one. Also settles the stretch between 521px and
   767px where style.css sets flex-flow: column and the grid silently drops to
   one per row. */
@media screen and (max-width: 1024px) {
  :is(.product_hits_wrapper, .adv-hits)[data-cols]     { --rk-cols: 2; --rk-gap: 10px; --rk-row-gap: 28px; }
  :is(.product_hits_wrapper, .adv-hits)[data-cols="1"] { --rk-cols: 1; --rk-gap: 0;    --rk-row-gap: 40px; }
}

/* One per row on a phone, where the tile shows the swipe gallery instead of
   the frame. The gallery pins every image to 185px tall
   (.ais-Hits-item .dynamic-gallery-image), which happens to fill a two-up
   column of ~180px but leaves a single full-width column with a small rug
   floating in a tall slide. Give the slide the same aspect ratio as the
   frame everywhere else and let the image fill it. Specificity plus
   !important to get past the 185px rule and the height: 100% !important on
   .dynamic-gallery-slide.image_wrapper. Covers both tiles: the slide is the
   same element in the old tile and in rk-tile. */
@media screen and (max-width: 520px) {
  :is(.product_hits_wrapper, .adv-hits)[data-cols="1"] .ais-Hits-item .dynamic-gallery-slide {
    height: auto !important;
    aspect-ratio: var(--rk-frame-ratio, 7 / 8);
  }
  :is(.product_hits_wrapper, .adv-hits)[data-cols="1"] .ais-Hits-item .dynamic-gallery-image {
    width: 100%;
    max-width: 100%;
    height: 100% !important;
    max-height: none;
  }
}


/* ── Advanced search's results row ─────────────────────────────────────────── */

/* Advanced search is laid out in the page builder, with the count and the
   sort control in separate full-width rows. collection-grid.js moves the
   count into the sort row and adds the toggle, so all three sit on one line
   the way they do on every other results page: count left, toggle centred,
   sort right. .rk-has-cols-adv is added by that script. */
.rk-has-cols-adv {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  /* Nothing in the builder spaces this row: it sat 23px under Submit/Reset
     and flush on the grid, so it read as part of the search form. A clear
     break above makes it the head of the results instead; a little below
     keeps it attached to them. The product photos carry their own white
     margin, now blended to cream, so the rugs already sit lower than the
     grid's top edge - which is why the bottom gap can be this small. */
  padding-top: 56px !important;
  padding-bottom: 12px !important;
}

/* The builder gives this column a clearfix, whose ::before and ::after
   become grid cells the moment it is a grid. Not needed here. */
.rk-has-cols-adv::before,
.rk-has-cols-adv::after { display: none !important; }

/* Flex for the same reason as .adv-sort below: the builder's whitespace in
   the count's container forms an extra line that lifted the text 12px above
   the toggle and the dropdown. */
.rk-has-cols-adv > .adv-result-count {
  grid-column: 1;
  justify-self: start;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
.rk-has-cols-adv > .rk-cols-toggle   { grid-column: 2; justify-self: center; }

/* Flex rather than block: the builder leaves a whitespace text node in
   .adv-sort, which as a block forms a ~23px line under the dropdown and
   makes the box taller than the control - centring on that box sat the
   toggle 12px low. A flex container ignores whitespace-only text. */
.rk-has-cols-adv > .adv-sort {
  grid-column: 3;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Same parent-theme select margin as the results bar elsewhere. */
.rk-has-cols-adv .ais-SortBy,
.rk-has-cols-adv .ais-SortBy-select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100%;
}

/* On a phone: count and sort on the first line, toggle centred below -
   matching the other results pages. */
@media screen and (max-width: 600px) {
  .rk-has-cols-adv {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 14px;
    padding-top: 36px !important;
  }
  .rk-has-cols-adv > .adv-result-count { grid-column: 1; grid-row: 1; }
  .rk-has-cols-adv > .adv-sort         { grid-column: 2; grid-row: 1; }
  .rk-has-cols-adv > .rk-cols-toggle   { grid-column: 1 / -1; grid-row: 2; }
}


/* ── The toggle itself ───────────────────────────────────────────────────── */

/* The bar becomes a three-column grid once the toggle is in it - count left,
   toggle dead centre, sort right. Flex with space-between only centres the
   middle item when the outer two are the same width, and the sort control is
   several times wider than the count, so the toggle drifted right of centre.
   1fr / auto / 1fr centres it on the page regardless.

   .rk-has-cols is added by collection-grid.js, so the bar is only re-laid-out
   on pages that actually have the toggle; sizing pages and anywhere else that
   shares .woo-top-bar keep their flex layout. */
.woo-top-bar.rk-has-cols {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
}

.woo-top-bar.rk-has-cols > .resultcount_wrapper { grid-column: 1; justify-self: start; }
.woo-top-bar.rk-has-cols > .rk-cols-toggle      { grid-column: 2; justify-self: center; }
.woo-top-bar.rk-has-cols > .ordering_wrapper    { grid-column: 3; justify-self: end; }

/* The vertical half. The parent theme gives form selects a bottom margin,
   which made the bar taller than the line of text in it - so anything
   centred on the bar sat below the count and the sort label. Zeroing it here
   puts all three on one line; the bar's own margin keeps the space below. */
.woo-top-bar.rk-has-cols > .resultcount_wrapper,
.woo-top-bar.rk-has-cols > .ordering_wrapper,
.woo-top-bar.rk-has-cols .ais-SortBy,
.woo-top-bar.rk-has-cols .ais-Stats,
.woo-top-bar.rk-has-cols .ais-SortBy-select {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.woo-top-bar.rk-has-cols {
  margin-bottom: 20px;
}

/* The sort control must be allowed to shrink with its track, or a long
   option label pushes it across the count on a narrow screen. */
.woo-top-bar.rk-has-cols > .ordering_wrapper { min-width: 0; max-width: 100%; }
.woo-top-bar.rk-has-cols .ais-SortBy-select  { max-width: 100%; }

/* A phone cannot fit count, toggle and sort side by side. Count and sort
   keep the first row, and the toggle takes a centred row of its own. */
@media screen and (max-width: 600px) {
  .woo-top-bar.rk-has-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 14px;
  }
  .woo-top-bar.rk-has-cols > .resultcount_wrapper { grid-column: 1; grid-row: 1; }
  .woo-top-bar.rk-has-cols > .ordering_wrapper    { grid-column: 2; grid-row: 1; }
  .woo-top-bar.rk-has-cols > .rk-cols-toggle      { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

.rk-cols-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #eae5d9;
  border-radius: 4px;
}

/* Three per row is too small on tablet and phone, so that segment goes and
   the control offers one or two. */
@media screen and (max-width: 1024px) {
  .rk-cols-toggle__btn[data-cols="3"] { display: none !important; }
}

/* One per row is too big on desktop, so that segment goes there and the
   control offers two or three. Must match MODES in collection-grid.js. */
@media screen and (min-width: 1025px) {
  .rk-cols-toggle__btn[data-cols="1"] { display: none !important; }
}

/* Betheme styles every bare <button> - a brown fill on hover, borders, text
   shadow. None of that is wanted here and it is set with enough weight that
   it has to be turned off explicitly rather than just overridden. */
.rk-cols-toggle__btn,
.rk-cols-toggle__btn:hover,
.rk-cols-toggle__btn:focus,
.rk-cols-toggle__btn:active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: 0 !important;
  border-radius: 3px;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
  line-height: 0;
  color: #a8a196;
  -webkit-appearance: none;
          appearance: none;
  transition: background-color .15s ease, color .15s ease;
}

.rk-cols-toggle__btn:hover { color: #6b6459; }

/* The selected segment lifts to the page ground, the way a pressed chip does.
   Repeated across the states so the reset above cannot blank it out. */
.rk-cols-toggle__btn[aria-pressed="true"],
.rk-cols-toggle__btn[aria-pressed="true"]:hover,
.rk-cols-toggle__btn[aria-pressed="true"]:focus {
  background: #fdfaf4 !important;
  color: #2f2a24;
}

.rk-cols-toggle__btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* Hairline outlines, matching the thin rules the rest of this bar is drawn
   with. vector-effect keeps the stroke even however the box is scaled. */
.rk-cols-toggle__btn svg rect,
.rk-cols-toggle__btn svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}


/* ============================================================================
   rk-tile — the tile under its own namespace
   ============================================================================
   Written fresh rather than ported. The old tile carried Betheme's classes
   (isotope-item, mfn-li-product-row, image_frame, image_wrapper), so its
   appearance was the sum of the parent theme's product-loop rules and ~200
   lines in style.css written to override them - scattered across 2200-2900,
   5089-5513 and 7243+, and leaning on !important throughout.

   None of those selectors match this markup, so none of it applies and none
   of it has to be countered. What follows is the same look stated directly.

   Inert unless js/collection-tile.js is loaded, which happens only under
   ?feature-preview=grid.
   ============================================================================ */

.rk-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0 0 0.5em;
  text-align: center;
}

/* ── Image frame ─────────────────────────────────────────────────────────── */

/* An aspect ratio, not a height. The old frame was a fixed 25em, which is why
   widening a column never made the rug any bigger: with object-fit: contain
   the image is sized by whichever axis runs out first, so a wider column with
   a fixed-height frame just added empty space either side. */
.rk-tile__frame {
  position: relative;
  display: block;
  aspect-ratio: var(--rk-frame-ratio, 7 / 8);
  overflow: hidden;
  /* The page ground, not transparent. mix-blend-mode only blends within its
     stacking context, and on advanced search the grid sits in a page-builder
     wrap with z-index: 1 - its own context with nothing painted in it, so
     the white had nothing to multiply against and stayed white. Painting the
     ground here gives the image something to blend with wherever it sits. */
  background: var(--rk-tile-ground, #fbf7ef);
  text-decoration: none;
}

/* Two class names deep, and top/left/right/bottom spelled out beside inset.
   style.css is full of .sections_group img rules, which outrank a single
   class on position and would drop an image back into normal flow - which is
   what left the hover sitting below the main image instead of over it. */
.rk-tile .rk-tile__img {
  position: absolute;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  object-position: center;
}

/* Rug photography is shot on white. Multiply drops that white into the page
   ground so the rug sits on the cream rather than in a white box - the same
   trick the recently-viewed tiles use. It blends against the frame's own
   background, which is the page colour (see .rk-tile__frame).

   The trade: it also lightens a genuinely pale rug, since multiply cannot
   tell a white background from a white weave. */
.rk-tile .rk-tile__img--main {
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* The hover frame is a crop, not a fit - moving closer to the weave rather
   than showing a second whole rug. It fills the frame and paints over the
   main image, so no blend mode here: multiply would let the rug underneath
   show through it. */
.rk-tile .rk-tile__img--hover {
  object-fit: cover;
  mix-blend-mode: normal;
  opacity: 0;
  transform: scale(1.3);
  transition: opacity .35s ease;
  z-index: 1;
}

.rk-tile__frame:hover .rk-tile__img--hover,
.rk-tile__frame:focus-visible .rk-tile__img--hover {
  opacity: 1;
}

/* Touch screens have no hover, and leaving it in makes the crop stick after
   a tap. */
@media (hover: none) {
  .rk-tile__img--hover { display: none; }
}

/* ── Royal Collection ──────────────────────────────────────────────────────
   No frame rules of its own: the Royal and Jahanshah pieces use the same
   image frame as every other rug (as on production since the border went).
   An inset with width/height: auto used to be here, and an absolutely
   positioned <img> does not stretch between its insets - it fell back to
   the photo's own pixel size and spilled out of the frame. Only the label
   under the image (renderRoyalLabel) marks them out. */

/* ── Copy ────────────────────────────────────────────────────────────────── */

.rk-tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  color: #444;
}

.rk-tile__sku-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  line-height: normal;
}

.rk-tile__sku,
.rk-tile__dims,
.rk-tile__price {
  font-family: 'Blair', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: #333;
  margin: 2px 0;
}

.rk-tile__dims,
.rk-tile__price {
  font-family: 'Futura Light BT', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  color: #444;
  line-height: 23px;
}

.rk-tile__price {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rk-tile__title {
  max-width: 400px;
  margin: 0 auto;
  font-family: 'Futura Light BT', serif;
  font-size: 18px;
  font-weight: normal;
  line-height: 23px;
  letter-spacing: 0;
  color: #444;
  overflow: hidden;
}

.rk-tile__title a,
.rk-tile__title a:hover,
.rk-tile__title a:focus {
  color: #333;
  text-decoration: none;
}

/* ── Mobile swipe gallery ────────────────────────────────────────────────── */

/* Desktop shows the frame and its hover crop; the swipe gallery is a phone
   affordance only. Same 520px line the old tile used. */
.rk-tile__gallery { display: none; }

/* The gallery's slides paint white (.ais-Hits-item .dynamic-gallery-slide),
   which the multiplied image cannot blend away. Same ground as the frame. */
.rk-tile .dynamic-gallery-slide { background-color: var(--rk-tile-ground, #fbf7ef); }

@media screen and (max-width: 520px) {
  .rk-tile__frame  { display: none; }
  .rk-tile__gallery {
    display: block;
    position: relative;
  }
  .rk-tile__gallery-link {
    display: block;
    text-decoration: none;
  }

  /* A tile with a video gets a play button among its gallery dots, taller
     than the dots themselves, which pushed everything under it ~6px below
     its neighbour. A fixed-height row keeps the copy of every tile level. */
  .rk-tile .dynamic-gallery-dots {
    height: 22px !important;
    margin-top: 10px !important;
    align-items: center;
  }
}

/* ── Tile copy, sized by the tile ─────────────────────────────────────────
   The copy is sized for a desktop column (an 18px title, 14-16px bold
   availability labels). What matters is how wide the tile is, not the
   window: two across on a 600px tablet is a 240px tile, two across on a
   phone 170px, one across on a phone 340px - and a phone-width media query
   left the first of those at full desktop size. So the tile is a container
   and the copy steps down by its own width. */
.rk-tile { container-type: inline-size; container-name: rk-tile; }

/* Medium: ~250-420px wide. One across on a phone, two on a tablet. */
@container rk-tile (max-width: 420px) {
  .rk-tile__body  { margin-top: 12px; gap: 3px; }
  .rk-tile__sku   { font-size: 10px; letter-spacing: 2px; }
  .rk-tile__title { font-size: 15px; line-height: 1.4; }
  .rk-tile__dims  { font-size: 12px; line-height: 1.4; color: #6b6459; }
  .rk-tile__price { font-size: 14px; line-height: 1.4; }
  /* Styled inline by product-tile.js, hence !important. */
  .rk-tile .available-to-ship,
  .rk-tile .onhold-label,
  .rk-tile .out-of-stock,
  .rk-tile .product-tile-onhold-info-wrapper,
  .rk-tile .product-tile-onhold-info-wrapper * {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
}

/* Small: two across on a phone. Title held to two lines so the tiles in a
   row stay level. */
@container rk-tile (max-width: 260px) {
  .rk-tile__body  { margin-top: 10px; gap: 3px; }
  .rk-tile__sku   { font-size: 9px; letter-spacing: 1.5px; }
  .rk-tile__title {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .rk-tile__dims  { margin: 0; font-size: 11px; line-height: 1.4; }
  .rk-tile__price { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; }
  .rk-tile .available-to-ship,
  .rk-tile .onhold-label,
  .rk-tile .out-of-stock,
  .rk-tile .product-tile-onhold-info-wrapper,
  .rk-tile .product-tile-onhold-info-wrapper * {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .rk-tile .onhold-info-wrapper,
  .rk-tile .onhold-info {
    width: 14px !important;
    height: 14px !important;
    font-size: 9px !important;
    line-height: 14px !important;
  }
}

/* "The Jahanshah Collection" on one line, with its info mark beside it.
   It is a 37px script face (24px under 767px in style.css) and wrapped to
   two lines in anything narrower than ~280px. Scaled to the tile instead:
   the line measures about 6.2x its font size, and the mark takes ~25px -
   19px in a two-across phone tile, 30px at most on desktop. */
.rk-tile__body > div:has(> .royal-collection-label) {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  max-width: 100%;
}
.rk-tile .royal-collection-label {
  white-space: nowrap;
  font-size: clamp(12px, calc((100cqi - 30px) / 6.4), 30px) !important;
  text-underline-offset: 3px;
}
.rk-tile .royal-collection-info {
  margin: 0 !important;
  flex: 0 0 auto;
}

/* The results pages had no side gutter on a phone - the section wrapper is
   padding 0, so the hero, the results bar and the grid all ran to the
   screen edge. 16px either side, matching the gutter the rest of the site
   keeps on mobile. */
@media screen and (max-width: 767px) {
  .section_wrapper.default-woo-list {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }

  /* Phones: 12px. At 16 a two-across tile lost 8px of a ~170px column to
     the edges, and the rugs are what the screen is for. */
  @media (max-width: 520px) {
    .section_wrapper.default-woo-list {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }

  /* style.css pads these two by 33px each side on mobile, from before the
     page had a gutter; on top of the 16px above they sat 49px in, well
     inside the hero and the grid. Level with them now. */
  .section_wrapper.default-woo-list .woo-content-wrapper .category-description,
  .section_wrapper.default-woo-list .woo-top-bar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The sort control was 16px Sanomat, larger than anything else in the
     bar. The count beside it stays on one line. */
  .woo-top-bar.rk-has-cols .ais-SortBy-select,
  .rk-has-cols-adv .ais-SortBy-select {
    font-size: 13px !important;
    height: 32px !important;
  }
  .woo-top-bar.rk-has-cols .resultcount_wrapper,
  .rk-has-cols-adv > .adv-result-count {
    font-size: 12px;
    white-space: nowrap;
  }
}


/* ── Docked bar ──────────────────────────────────────────────────────────
   The slim copy of the results bar that follows the visitor down a long
   page of results (built in collection-grid.js). One line: Filters, the
   count and any active filter tags left, the density toggle centred, sort
   right - the same places as the bar it stands in for. Its top is set from
   the header's height in script. */
.rk-dock {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 29;
  background: var(--rk-tile-ground, #fbf7ef);
  border-bottom: 1px solid #e9e3d6;
  transform: translateY(-6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* While the dock is down, the sticky header's drop shadow fell across its
   top edge and the pair read as two separate strips. The dock's own
   hairline is the edge now. */
html.rk-dock-shown #Top_bar,
html.rk-dock-shown #Top_bar.is-sticky,
html.rk-dock-shown #Header_wrapper,
html.rk-dock-shown #Header {
  box-shadow: none !important;
}

.rk-dock.is-docked {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}

.rk-dock__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  height: 52px;
  box-sizing: border-box;
  max-width: 100%;
}

.rk-dock__left {
  display: flex;
  align-items: center;
  min-width: 0;
}

.rk-dock__right {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

/* Hairline between the parts of the left group, as in a breadcrumb. */
.rk-dock__count {
  flex: 0 0 auto;
  padding: 0 16px;
  border-left: 1px solid #ddd5c6;
  font-size: 13px;
  line-height: 18px;
  color: #6b6459;
  white-space: nowrap;
}

/* Betheme styles every bare <button> - a brown fill on hover, borders,
   text shadow - with enough weight that it has to be switched off. */
.rk-dock__filters,
.rk-dock__filters:hover,
.rk-dock__filters:focus,
.rk-dock__filters:active,
.rk-totop,
.rk-totop:hover,
.rk-totop:focus,
.rk-totop:active,
.rk-dock__pill,
.rk-dock__pill:hover,
.rk-dock__pill:focus,
.rk-dock__pill:active {
  margin: 0;
  border: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

/* A text control in the type of the hero's labels rather than a filled
   block: it is a way back to the filters, not the main action here. */
.rk-dock__filters,
.rk-dock__filters:hover,
.rk-dock__filters:focus,
.rk-dock__filters:active {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 16px 0 0 !important;
  background: transparent !important;
  color: #2f2a24 !important;
  font-family: 'Blair', sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.rk-dock__filters:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rk-dock__filters svg,
.rk-totop svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The theme gives selects a full-width boxed look; this one sits like the
   sort control in the bar above - a hairline underline. */
.rk-dock__sort {
  width: auto !important;
  max-width: 230px;
  min-width: 150px;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 22px 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #2f2a24 !important;
  border-radius: 0 !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f2a24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 14px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  color: #2f2a24 !important;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
}

/* Active filter tags, after the count. One row that scrolls sideways
   rather than wrapping, so the dock keeps its height. */
.rk-dock__pills {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
  padding-left: 16px;
  border-left: 1px solid #ddd5c6;
  overflow-x: auto;
  scrollbar-width: none;
}
.rk-dock__pills::-webkit-scrollbar { display: none; }
.rk-dock--has-pills .rk-dock__pills { display: flex; }

/* The × sits in the flow, centred on the text, rather than pinned to a
   corner the way the tags in the page do. */
.rk-dock__pill,
.rk-dock__pill:hover,
.rk-dock__pill:focus,
.rk-dock__pill:active {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 10px 0 12px !important;
  border-radius: 4px !important;
  background: #eae5d9 !important;
  color: #5e5e5e !important;
  font-family: Blair, sans-serif;
  font-size: 9px !important;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.rk-dock__pill:hover { background: #e0d9ca !important; color: #2f2a24 !important; }

.rk-dock__pill svg {
  display: block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: .7;
}

.rk-totop,
.rk-totop:hover,
.rk-totop:focus,
.rk-totop:active {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 29;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border-radius: 50%;
  background: #2f2a24 !important;
  color: #fbf7ef !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.rk-totop.is-shown {
  opacity: .88;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.rk-totop.is-shown:hover { opacity: 1; }

/* Phone: Filters, toggle and sort on the first line, and "Showing x-y of z"
   under them, from the left edge - where you are in the list matters most when the
   list is a long scroll. The tags stay with the real bar. The left group
   is unwrapped (display: contents) so Filters and the count can each take
   their own place in the grid. */
@media screen and (max-width: 767px) {
  .rk-dock__inner {
    column-gap: 10px;
    row-gap: 12px;
    height: auto;
    padding: 12px 12px 12px;
    width: auto !important;
    margin-left: 0 !important;
  }
  .rk-dock__left { display: contents; }
  .rk-dock__filters { grid-column: 1; grid-row: 1; justify-self: start; }
  .rk-dock .rk-cols-toggle { grid-column: 2; grid-row: 1; }
  .rk-dock__right { grid-column: 3; grid-row: 1; }
  .rk-dock__count {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    padding: 0;
    border-left: 0;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .2px;
    color: #2f2a24;
  }
  .rk-dock__pills,
  .rk-dock--has-pills .rk-dock__pills { display: none; }
  /* Only as wide as its text. Filling the column put a long underline on
     the right against the short word Filters on the left, and the toggle,
     though centred, looked pushed over. */
  .rk-dock__sort {
    min-width: 0;
    width: auto !important;
    max-width: 100%;
    font-size: 13px !important;
  }
  .rk-totop,
  .rk-totop:hover,
  .rk-totop:focus,
  .rk-totop:active {
    right: 14px;
    bottom: 18px;
    width: 38px;
    height: 38px;
  }
}

/* The filter tags above the results: the × in line with the label and
   centred on it, like the copies in the dock, instead of pinned into the
   top-right corner where it sat high and crowded the text. The old hover
   turned the tag dark brown under grey text; a step darker reads better.
   Covers both style.css and advanced-search-2026.css, which each carry a
   copy of the tag styles. */
.active-filters-pills .filter-pill,
.active-filters-pills .filter-pill:hover,
.active-filters-pills .filter-pill:focus {
  gap: 8px;
  height: 26px;
  padding: 0 10px 0 14px !important;
  border-radius: 4px !important;
  background: #eae5d9;
  line-height: 1;
}
.active-filters-pills .filter-pill:hover { background: #e0d9ca; color: #2f2a24; }

.active-filters-pills .filter-pill .pill-x {
  position: static;
  width: auto;
  height: auto;
  font-size: 12px;
  line-height: 1;
}
.active-filters-pills .filter-pill .pill-x svg { display: block; }


/* Wishlist list menu (logged in): opens leftwards when collection-grid.js
   finds it would run off the right edge - the right-hand column on a
   phone. Anchored to the heart's right edge instead of its left. */
.rk-tile ul.yith-wcwl-dropdown.rk-dd-flip {
  left: auto !important;
  right: 0 !important;
}

/* Smaller on a phone: the desktop size (Sanomat at ~16px) filled most of a
   two-across tile with two rows of menu. */
@media screen and (max-width: 767px) {
  /* One class deeper than style.css's own rules, which otherwise tie on
     specificity and win or lose on stylesheet order. */
  .rk-tile .yith-wcwl-add-button ul.yith-wcwl-dropdown {
    min-width: 160px !important;
  }
  .rk-tile .yith-wcwl-add-button ul.yith-wcwl-dropdown li,
  .rk-tile .yith-wcwl-add-button ul.yith-wcwl-dropdown li a {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  .rk-tile .yith-wcwl-add-button ul.yith-wcwl-dropdown li a {
    padding: 6px 8px !important;
  }
  /* The "+" before Create a new list is an inline 20px span. */
  .rk-tile .yith-wcwl-add-button ul.yith-wcwl-dropdown li a span {
    font-size: 14px !important;
  }
}

/* The stand-in heart shown until the real wishlist button loads (see
   renderWishlistIcon in product-tile.js): faded, and not clickable, since
   it does nothing yet. */
.wishlist-pending {
  display: inline-flex;
  opacity: .45;
  pointer-events: none;
}
.wishlist-pending img {
  display: block;
  width: 20px;
  height: 20px;
}