/*
 * Ready-made rugs storefront.
 * Grid, card and filter rules mirror the theme's shop listing (#filter-columns-products,
 * .filter-product …) with the same values, re-scoped to .ready-made-*; drift is accepted.
 * The -prod file is a byte copy of this file: after editing, copy -dev over -prod.
 */

/* --- Shared --- */

.ready-made-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Grid (as the shop's #filter-columns-products) --- */

.ready-made-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 860px) {
    .ready-made-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1150px) {
    .ready-made-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1580px) {
    .ready-made-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

/* --- Card (as the shop's .filter-product; that class isn't reused, see ready-made-card.php) --- */

.ready-made-card {
    min-width: 0;
    margin: 0 0 40px;
    padding: 0;
}

.ready-made-card[hidden] {
    display: none;
}

.ready-made-card .heroimg {
    width: 100%;
    height: 0;
    padding-bottom: 76%;
    position: relative;
    background-color: #efefef;
    display: block;
    overflow: hidden; /* clips the image box only; the stock list is outside it */
}

.ready-made-card-body {
    padding: 0 clamp(12px, 6%, 24px);
}

.ready-made-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ready-made-card-title {
    position: relative;
    margin: 10px 0 0;
    padding: 10px 0 5px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.ready-made-card-title a {
    color: #000;
    text-decoration: none;
    display: inline-block;
}

.ready-made-card-price {
    margin: 10px 0 0;
    padding: 10px 0 5px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}

/* --- Carousel --- */

.ready-made-carousel-track {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ready-made-carousel-track::-webkit-scrollbar {
    display: none;
}

@media (hover: none) {
    .ready-made-carousel-track {
        overflow-x: auto; /* swipe on touch */
    }
}

@media (prefers-reduced-motion: reduce) {
    .ready-made-carousel-track {
        scroll-behavior: auto;
    }
}

.ready-made-carousel-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
}

.ready-made-carousel-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.ready-made-carousel-btn {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}

.ready-made-carousel-prev {
    left: 0;
}

.ready-made-carousel-next {
    right: 0;
}

/* Shown only with JS and more than one slide (the server sets data-rm-multi; the JS updates it). */
.rm-js [data-rm-multi] > .ready-made-carousel-btn {
    display: flex;
}

.ready-made-carousel-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
    box-shadow: inset 0 0 0 4px #000;
}

/* A filtered-out option's slides take no room (indexes count visible slides). */
.ready-made-carousel-slide[hidden] {
    display: none;
}

/*
 * Slider <-> "Available stock" feedback (ready-made.js adds the class for 400ms):
 * rm-flash on the image when the drop-down moves it, rm-pulse on the drop-down when the
 * slider changes it. Opacity and box-shadow only: no layout shift. Reduced motion: a
 * static highlight for the same moment, no animation.
 */
@media (prefers-reduced-motion: no-preference) {
    .ready-made-card-media.rm-flash .ready-made-carousel-track {
        animation: rm-flash .35s ease-out;
    }

    .ready-made-stock.rm-pulse .ready-made-stock-button,
    .ready-made-stock.rm-pulse .ready-made-card-option {
        animation: rm-pulse .4s ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ready-made-card-media.rm-flash::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        box-shadow: inset 0 0 0 3px #000;
        pointer-events: none;
    }

    .ready-made-stock.rm-pulse .ready-made-stock-button {
        background-color: #f2f2f2;
        box-shadow: 0 0 0 2px #000;
    }

    .ready-made-stock.rm-pulse .ready-made-card-option {
        background-color: #f2f2f2;
    }
}

@keyframes rm-flash {
    from {
        opacity: .35;
    }
    to {
        opacity: 1;
    }
}

@keyframes rm-pulse {
    0% {
        background-color: #ededed;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .55);
    }
    100% {
        background-color: #fff;
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0);
    }
}

/* --- Quick view bar (opens the quick view; a plain link to the product page otherwise) --- */

.ready-made-card-quickview {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 9px 10px;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .02em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .2s;
}

.ready-made-card-media:hover .ready-made-card-quickview,
.ready-made-card-media:focus-within .ready-made-card-quickview {
    opacity: 1;
}

.ready-made-card-quickview:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

@media (hover: none) {
    .ready-made-card-quickview {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ready-made-card-quickview {
        transition: none;
    }
}

/* --- Sale: flag over the card images, struck-through regular price (card and detail) ---
   Sale red is #ff0000 (client choice); Inter is loaded by the theme. */

.ready-made-card,
.ready-made-detail {
    --rm-sale-red: #ff0000;
}

.ready-made-sale-flag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    max-width: calc(100% - 24px);
    padding: 5px 10px;
    border: 1px solid #fff;
    background-color: var(--rm-sale-red);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none; /* swipes and clicks reach the slider */
}

.ready-made-sale-flag[hidden] {
    display: none;
}

.ready-made-price-was {
    color: #000;
    text-decoration: line-through;
}

.ready-made-price-now {
    margin-left: .3em;
    color: var(--rm-sale-red);
    text-decoration: none;
    background: none;
}

/* --- "Available stock" control --- */

.ready-made-stock {
    position: relative;
    margin: 10px 0 0;
}

.ready-made-stock-label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

/* One line at the design's 11px; a label too long for the card ends in an ellipsis (the
   listbox options wrap and keep the full text). */
.ready-made-stock-native,
.ready-made-stock-button {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 8px 26px 8px 10px;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    background-color: #fff;
    color: #000;
    font: inherit;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* One rug (no choice), or a grouped card filtered down to one: plain text, not a control.
   No box, border or inset: it starts on the card's text edge and runs the full width the
   drop-down takes. It wraps rather than truncates, and keeps the drop-down's 34px slot so
   the card footers still line up across a row. */
.ready-made-card-option {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 34px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ready-made-stock-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ready-made-card-option[hidden] {
    display: none;
}

.ready-made-stock-native {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
}

.ready-made-stock-button {
    position: relative;
    cursor: pointer;
}

.ready-made-stock-button[hidden] {
    display: none;
}

.ready-made-stock-chevron {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -4px;
}

.ready-made-stock-button[aria-expanded="true"] .ready-made-stock-chevron {
    transform: rotate(180deg);
}

/* Bold labels in the listbox, the button and the static box (a one-rug card prints <b> straight into .ready-made-card-option). */
.ready-made-stock-text b,
.ready-made-card-option b {
    font-weight: 700;
}

.ready-made-stock-custom {
    display: none;
}

.rm-js .ready-made-stock-custom {
    display: block;
}

.rm-js .ready-made-stock-native {
    display: none;
}

.ready-made-stock-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    max-height: 15rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-top: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .12);
}

.ready-made-stock-list[hidden] {
    display: none;
}

.ready-made-stock-list:focus {
    outline: none;
}

.ready-made-stock-list:focus-visible {
    outline: 2px solid #000;
    outline-offset: 0;
}

.ready-made-stock-list [role="option"] {
    margin: 0;
    padding: 9px 10px;
    font-size: 11px;
    line-height: 16px;
    cursor: pointer;
}

/* An option the listing's starting selection leaves out arrives hidden (the filters script then removes it). */
.ready-made-stock-list [role="option"][hidden] {
    display: none;
}

/* Selected keeps a left marker, so state isn't colour alone. */
.ready-made-stock-list [role="option"][aria-selected="true"] {
    box-shadow: inset 4px 0 0 #000;
}

.ready-made-stock-list [role="option"].is-active {
    background-color: #000;
    color: #fff;
}

.ready-made-stock-list [role="option"].is-active[aria-selected="true"] {
    box-shadow: inset 4px 0 0 #fff;
}

.ready-made-stock-button:focus-visible,
.ready-made-stock-native:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .ready-made-stock-list [role="option"].is-active {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
    .ready-made-stock-list [role="option"][aria-selected="true"] {
        border-left: 4px solid CanvasText;
    }
}

/* --- Card foot: customise line and add to cart --- */

/* Design: small customise line on the left, button on the right, one row. It wraps (stacks)
   only when the card is too narrow for both (under ~250px of foot). */
.ready-made-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 22px;
}

.ready-made-card-customise {
    flex: 1 1 110px;
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 14px;
}

.ready-made-card-customise a {
    color: inherit;
    text-decoration: underline;
}

.ready-made-add-form {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    text-align: right;
}

/* The theme's .general-black-button, trimmed for the card. */
.ready-made-card .ready-made-card-add {
    min-width: 0;
    margin: 0;
    padding: 7px 18px;
    font-size: 13px;
    white-space: nowrap;
    font-weight: 600;
    line-height: 18px;
}

.ready-made-card-add:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.ready-made-add-msg {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 16px;
    overflow-wrap: anywhere;
}

/* A card message never widens the form (which would push it onto its own row): it wraps at
   the button's width. Long cart refusals open the cart notice instead. */
.ready-made-card .ready-made-add-msg {
    width: 0;
    min-width: 100%;
}

.ready-made-add-msg:empty {
    display: none;
}

/* Spinner (as the theme's span.actionloading; its spin keyframes are redeclared here). */
.ready-made-add-form span.actionloading::after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: #767676;
    border-radius: 50%;
    animation: rm-spin 1s linear infinite;
}

@keyframes rm-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ready-made-add-form span.actionloading::after {
        animation-duration: 3s;
    }
}

/* --- View switch --- */

.ready-made-view-switch-buttons[hidden] {
    display: none;
}

.rm-js .ready-made-view-switch-buttons[hidden] {
    display: flex; /* JS on: shown; JS off: the default view only, no buttons */
}

.ready-made-view[hidden] {
    display: none;
}

/* === Ready-made rugs section (pb_page_content_areas_ready_made_rugs) === */

/* Width as .standard-max-width (the layout has no theme CSS file by design). */
.pb-section-ready-made-rugs .pb-section-margin-wrap {
    width: calc(100% - 40px);
    max-width: 1580px;
    margin: 0 auto;
}

.pb-section-ready-made-rugs .ready-made-section-heading {
    margin: 0 0 20px;
}

.pb-section-ready-made-rugs .ready-made-section-intro {
    max-width: 760px;
    margin: 0 0 30px;
}

.pb-section-ready-made-rugs .ready-made-section-empty {
    margin: 0 0 20px;
}

.ready-made-section-cta {
    margin: 0;
    text-align: center;
}

.ready-made-section-cta .general-black-button {
    margin: 10px 0; /* the theme's right margin would push it off-centre */
}

/* View switch: space is reserved so the buttons appearing (JS on) don't shift the grid. */
.ready-made-view-switch {
    display: flex;
    justify-content: flex-end;
    min-height: 44px;
    margin: 0 0 20px;
}

.ready-made-view-switch-buttons {
    gap: 0;
}

.ready-made-view-switch-button {
    min-width: 120px;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    font: inherit;
    font-size: 15px;
    color: #000;
    background-color: #fff;
    border: 1px solid #000;
    cursor: pointer;
}

.ready-made-view-switch-button + .ready-made-view-switch-button {
    border-left: 0;
}

.ready-made-view-switch-button[aria-pressed="true"] {
    color: #fff;
    background-color: #000;
}

.ready-made-view-switch-button:hover {
    text-decoration: underline;
}

.ready-made-view-switch-button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* --- Range page strip (#range-ready-made; grey band and padding as #range-may-also-like) --- */

#range-ready-made {
    margin: 80px 0 0; /* no bottom margin: #range-may-also-like follows with its own padding */
    padding: 80px 20px;
    background-color: #f5f5f5;
}

#range-ready-made .ready-made-strip-inner {
    max-width: 1580px;
    margin: 0 auto;
}

#range-ready-made .ready-made-strip-heading {
    margin: 0 0 30px;
    text-align: center;
}

/*
 * Track: a scroll-snap row of listing-width cards (370px, as .ready-made-listing's grid at
 * 1440px; the track's width on phones). The list's auto margins centre it while the cards
 * fit and fall to 0 when they overflow, so the start stays reachable. ready-made.js
 * toggles data-rm-overflow on the slider (ResizeObserver); no layout work on scroll.
 */
#range-ready-made .ready-made-strip-track {
    display: flex;
    container-type: inline-size;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 8px 12px; /* room for the cards' focus outlines and shadow */
    margin: -4px -8px -12px;
    scroll-padding-inline: 8px; /* snap cards to the content edge, not the padding edge */
}

.rm-js #range-ready-made .ready-made-strip-track {
    scrollbar-width: none; /* the buttons below replace it; no JS keeps the scrollbar */
}

.rm-js #range-ready-made .ready-made-strip-track::-webkit-scrollbar {
    display: none;
}

#range-ready-made .ready-made-strip-track:focus-visible {
    outline: 2px solid #000;
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    #range-ready-made .ready-made-strip-track {
        scroll-behavior: auto;
    }
}

#range-ready-made .ready-made-grid {
    display: flex;
    flex: none;
    gap: 20px;
    margin: 0 auto;
}

#range-ready-made .ready-made-card {
    flex: none;
    width: 370px;
    max-width: calc(100vw - 48px);
    margin: 0;
    scroll-snap-align: start;
    /* White panel with the rug builder's shadow (#rug-builder-settings), on the grey band. */
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px #00000040;
}

#range-ready-made .ready-made-card-body {
    padding-bottom: 24px;
}

@supports (width: 1cqi) {
    #range-ready-made .ready-made-card {
        width: min(370px, 100cqi);
        max-width: none;
    }
}

/* "Rugs we think you might also like" follows the strip: no gap, and white so the two bands
   don't merge. Only matches when the strip renders (its sibling, after it). Overrides the theme's
   inline #range-may-also-like rule by specificity. */
#range-ready-made ~ #range-may-also-like {
    margin-top: 0;
    background-color: #fff;
}

/* Outer arrows: outlined circles below the track, apart from the cards' white image arrows. */
#range-ready-made .ready-made-strip-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 30px;
}

#range-ready-made .ready-made-strip-controls[hidden] {
    display: none;
}

#range-ready-made .ready-made-strip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #000;
    border-radius: 50%;
    background-color: #fff;
    color: #000;
    cursor: pointer;
}

#range-ready-made .ready-made-strip-btn:hover:not([aria-disabled="true"]) {
    background-color: #000;
    color: #fff;
}

#range-ready-made .ready-made-strip-btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

#range-ready-made .ready-made-strip-btn[aria-disabled="true"] {
    opacity: .3;
    cursor: default;
}

/* "View all": the theme's black button inverted (the theme has no white one), and smaller. */
#range-ready-made .ready-made-strip-more {
    margin: 40px 0 0;
    text-align: center;
}

#range-ready-made .ready-made-strip-more-button {
    min-width: 0;
    margin: 0; /* the theme's right margin would push it off-centre */
    padding: 9px 22px;
    background-color: #fff;
    color: #000;
    font-size: 15px;
}

#range-ready-made .ready-made-strip-more-button:hover {
    background-color: #000;
    color: #fff;
}

#range-ready-made .ready-made-strip-more-button:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* === Product page and detail (also the quick view's content) === */

.ready-made-product {
    padding: 40px 0 60px;
}

.ready-made-product-notices:empty {
    display: none;
}

.ready-made-product-notices {
    margin: 0 0 24px;
}

.ready-made-product-alternatives {
    margin: 80px 0 0;
}

.ready-made-product-alternatives h2 {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
}

@media (max-width: 1023px) {
    .ready-made-product {
        padding-top: 20px;
    }

    .ready-made-product-alternatives {
        margin-top: 56px;
    }
}

/* Detail layout per the quick-view design: >= 1024px thumbnails | main image | info; below, stacked. */

.ready-made-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    color: #000;
}

.ready-made-detail-gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}

.ready-made-detail-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: #efefef;
    overflow: hidden;
}

/* No JS: a scrollable, focusable region (thumbnails stay hidden). JS on: the thumbnails drive it. */
.ready-made-detail .ready-made-carousel-track {
    overflow-x: auto;
}

.rm-js .ready-made-detail .ready-made-carousel-track {
    overflow-x: hidden;
}

@media (hover: none) {
    .rm-js .ready-made-detail .ready-made-carousel-track {
        overflow-x: auto; /* swipe */
    }
}

.ready-made-detail .ready-made-carousel-track:focus-visible {
    outline: 2px solid #000;
    outline-offset: -4px;
}

.ready-made-detail-thumbs {
    display: none;
    margin: 0;
    padding: 2px;
    list-style: none;
    gap: 10px;
    overflow-x: auto;
}

.rm-js .ready-made-detail-thumbs[hidden] {
    display: flex;
}

.ready-made-detail-thumbs li {
    flex: 0 0 72px;
    margin: 0;
    padding: 0;
}

.ready-made-detail-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #efefef;
    cursor: pointer;
}

.ready-made-detail-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.ready-made-detail-thumb[aria-current="true"]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #000;
    pointer-events: none;
}

.ready-made-detail-thumb:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

.ready-made-detail-info {
    min-width: 0;
}

.ready-made-detail-flag {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 5px 10px;
    border: 1px solid var(--rm-sale-red);
    background-color: #fff;
    color: var(--rm-sale-red);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: .04em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ready-made-detail-title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.ready-made-detail-title:focus {
    outline: none; /* programmatic focus target in quick view */
}

.ready-made-detail-price {
    margin: 12px 0 24px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
}

.ready-made-specs {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.35;
}

.ready-made-specs > div {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    gap: 12px;
    padding: 4px 0;
}

.ready-made-specs dt {
    margin: 0;
    font-weight: 600;
}

.ready-made-specs dd {
    margin: 0;
}

/* Quick view only: the short summary as an intro between the specs and the buy block. */
.ready-made-detail-intro {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.6;
}

.ready-made-detail-intro p {
    margin: 0 0 .5em;
    font-size: inherit; /* the theme's smaller paragraph size would undercut the specs */
    line-height: inherit;
}

.ready-made-detail-intro p:last-child {
    margin-bottom: 0;
}

.ready-made-detail-buy {
    margin-top: 32px;
}

.ready-made-detail-form {
    margin: 0;
    text-align: left;
}

.ready-made-detail .ready-made-detail-add {
    min-width: 266px;
    margin: 0;
    padding: 17px 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

.ready-made-detail-add:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
}

.ready-made-detail .ready-made-add-msg {
    max-width: 30em;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.ready-made-add-msg[role="alert"] {
    color: #b3261e;
}

.ready-made-detail-sold,
.ready-made-account-notice {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.4;
}

.ready-made-detail-sold-link,
.ready-made-detail-customise {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.ready-made-detail-info > .ready-made-detail-customise {
    margin-top: 24px;
}

.ready-made-detail-info a {
    color: inherit;
    text-decoration: underline;
}

/* Page only: the about block in the info column, under the specs (where the quick view has its intro). */
.ready-made-detail-about {
    max-width: 860px; /* line length when stacked; the column is narrower from 1024px */
    margin-top: 24px;
    font-size: 14px; /* same size as the specs, like the quick view's intro */
    line-height: 1.6;
    overflow-wrap: break-word;
}

.ready-made-detail-about p,
.ready-made-detail-about li {
    font-size: inherit; /* the theme's paragraph size would not scale with the specs */
}

.ready-made-detail-about > div + div {
    margin-top: 1em;
}

.ready-made-detail-about > :first-child > :first-child {
    margin-top: 0;
}

.ready-made-detail-about > :last-child > :last-child {
    margin-bottom: 0;
}

.ready-made-detail-about img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 599px) {
    .ready-made-detail .ready-made-detail-add {
        width: 100%;
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .ready-made-detail {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 30%);
        column-gap: clamp(32px, 3.3vw, 62px);
    }

    .rm-js .ready-made-detail-gallery:not(.ready-made-detail-gallery-single) {
        grid-template-columns: clamp(96px, 8.5vw, 164px) minmax(0, 1fr);
        column-gap: clamp(16px, 1.6vw, 30px);
        align-items: start;
    }

    .rm-js .ready-made-detail-gallery:not(.ready-made-detail-gallery-single) .ready-made-detail-thumbs {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        gap: 16px;
        overflow-x: visible;
    }

    .rm-js .ready-made-detail-gallery:not(.ready-made-detail-gallery-single) .ready-made-detail-media {
        grid-column: 2;
        grid-row: 1;
    }

    .ready-made-detail-thumbs li {
        flex: 0 0 auto;
    }

    .ready-made-detail-title {
        font-size: clamp(28px, min(2vw, 3.6vh), 36px);
    }

    .ready-made-detail-price {
        margin: clamp(16px, 1.5vw, 28px) 0 clamp(24px, 2.2vw, 40px);
        font-size: clamp(22px, min(1.6vw, 2.9vh), 28px);
    }

    .ready-made-specs {
        font-size: clamp(14px, min(1.05vw, 1.9vh), 18px);
    }

    .ready-made-specs > div {
        padding: clamp(2px, min(.35vw, .55vh), 4px) 0;
    }

    .ready-made-detail-intro {
        margin-top: clamp(24px, 2.2vw, 40px);
        font-size: clamp(14px, min(1.05vw, 1.9vh), 18px);
    }

    .ready-made-detail-buy {
        margin-top: clamp(32px, 3.5vw, 66px);
    }

    .ready-made-detail .ready-made-detail-add {
        font-size: clamp(14px, min(.95vw, 1.7vh), 18px);
    }

    .ready-made-detail-about {
        margin-top: clamp(24px, 2.2vw, 40px);
        font-size: clamp(14px, min(1.05vw, 1.9vh), 18px);
    }
}

/* === Quick view === */

/* Native <dialog>; not .pb-overlaybox (the footer handler would hide it with style.display). */

html.rm-quickview-open {
    overflow: hidden;
}

/* --rm-qv-x / --rm-qv-y: the space between the box and the viewport edges. */
.ready-made-quickview {
    --rm-qv-x: clamp(24px, 4vw, 80px);
    --rm-qv-y: clamp(20px, 4vh, 48px);
    box-sizing: border-box;
    width: min(1880px, 100vw - 2 * var(--rm-qv-x));
    max-width: none;
    max-height: calc(100dvh - 2 * var(--rm-qv-y));
    margin: auto;
    padding: 0; /* the inner panel takes the padding, so a click on the dialog itself is the backdrop */
    border: 0;
    background-color: #fff;
    color: #000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
    overflow: auto;
    overscroll-behavior: contain;
}

.ready-made-quickview::backdrop {
    background-color: rgba(217, 217, 217, .7);
}

.ready-made-quickview-inner {
    position: relative;
    padding: clamp(52px, 6vh, 64px) clamp(20px, 4vw, 80px) clamp(24px, min(3vw, 4vh), 60px);
}

.ready-made-quickview-close {
    position: absolute;
    top: 8px;
    right: clamp(8px, 1.4vw, 24px);
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: #000;
    font: inherit;
    font-size: 14px;
    line-height: 24px;
    text-decoration: underline;
    cursor: pointer;
}

.ready-made-quickview-close:focus-visible {
    outline: 2px solid #000;
    outline-offset: 0;
}

.ready-made-quickview-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 40vh;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
}

.ready-made-quickview-status p {
    margin: 0;
}

.ready-made-quickview-status a {
    color: inherit;
    text-decoration: underline;
}

.ready-made-quickview-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 3px solid rgba(0, 0, 0, .1);
    border-left-color: #767676;
    border-radius: 50%;
    animation: rm-spin 1s linear infinite;
}

@media (prefers-reduced-motion: no-preference) {
    .ready-made-quickview[open] {
        animation: rm-quickview-in .2s ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ready-made-quickview-spinner {
        animation-duration: 3s;
    }
}

@keyframes rm-quickview-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (max-width: 767px) {
    .ready-made-quickview {
        --rm-qv-x: 12px;
        --rm-qv-y: 16px;
    }

    .ready-made-quickview-inner {
        padding: 52px 16px 24px;
    }
}

/* Quick view only: tighter spacing than the page, so the panel fits typical laptop heights
   (1280x720, 1366x768) without scrolling. Font sizes are shared with the page (above); from
   1024px they scale with the smaller of width and height (min(vw, vh)), so a wide but short
   window doesn't get the large sizes. */

.ready-made-detail-quick .ready-made-detail-flag {
    margin-bottom: 8px;
}

.ready-made-detail-quick .ready-made-detail-price {
    margin: 10px 0 18px;
}

.ready-made-detail-quick .ready-made-detail-intro {
    margin-top: 18px;
    line-height: 1.55;
}

.ready-made-detail-quick .ready-made-detail-buy {
    margin-top: 24px;
}

.ready-made-detail-quick .ready-made-detail-add {
    padding: 14px 30px;
}

/* Stacked (below 1024px): cap the gallery by the viewport height so image and info fit a tablet. */
@media (max-width: 1023px) {
    .ready-made-detail-quick .ready-made-detail-gallery {
        width: 100%;
        max-width: max(320px, 28dvh * 4 / 3);
        margin-inline: auto;
    }
}

@media (min-width: 1024px) {
    .ready-made-detail-quick.ready-made-detail {
        column-gap: clamp(28px, 2.8vw, 52px);
    }

    .ready-made-detail-quick .ready-made-detail-price {
        margin: clamp(8px, min(1vw, 1.8vh), 20px) 0 clamp(14px, min(1.6vw, 2.8vh), 30px);
    }

    .ready-made-detail-quick .ready-made-detail-intro {
        margin-top: clamp(14px, min(1.6vw, 2.8vh), 30px);
    }

    .ready-made-detail-quick .ready-made-detail-buy {
        margin-top: clamp(18px, min(2vw, 3.2vh), 40px);
    }
}

/* --- Cart notice: a refused add (cart rule, stock). A second native <dialog>, so it
   stacks over the quick view; the quick view's backdrop and box, .pb-overlaybox's size. --- */

.ready-made-notice {
    box-sizing: border-box;
    width: min(560px, 100vw - 32px);
    max-width: none;
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0; /* as the quick view: a click on the dialog itself is the backdrop */
    border: 0;
    background-color: #fff;
    color: #000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
    overflow: auto;
    overscroll-behavior: contain;
}

/* The box takes focus on open (so it is announced as a dialog); its controls keep their rings. */
.ready-made-notice:focus {
    outline: none;
}

.ready-made-notice::backdrop {
    background-color: rgba(217, 217, 217, .7);
}

.ready-made-notice-inner {
    padding: 30px;
}

.ready-made-notice-title {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.4px;
    text-transform: none;
}

.ready-made-notice-msg {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.5;
}

.ready-made-notice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

/* The theme's .general-black-button, trimmed as on the card. */
.ready-made-notice .ready-made-notice-cart {
    min-width: 0;
    margin: 0;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.ready-made-notice-close {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 10px 4px;
    border: 0;
    background: transparent;
    color: #000;
    font: inherit;
    font-size: 14px;
    line-height: 24px;
    text-decoration: underline;
    cursor: pointer;
}

.ready-made-notice-cart:focus-visible,
.ready-made-notice-close:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .ready-made-notice[open] {
        animation: rm-quickview-in .2s ease-out;
    }
}

@media (max-width: 767px) {
    .ready-made-notice-inner {
        padding: 24px 20px;
    }
}

/* === Filters and sort === */

/* --- Container (as the shop's section.section-product-ranges): full width up to 1920px, 15px / 30px
   sides, so the filter column sits where the shop's does and the cards get the design's width.
   The section's 1580px .standard-max-width wrap left four ~320px cards at 1600-1920px. --- */

.pb-section-ready-made-rugs-listing .pb-section-margin-wrap {
    box-sizing: border-box;
    width: auto;
    max-width: 1920px;
    padding: 0 15px;
}

@media (min-width: 1150px) {
    .pb-section-ready-made-rugs-listing .pb-section-margin-wrap {
        padding: 0 30px;
    }
}

/* --- Listing: filter column + main column (as the shop's #filter-columns) --- */

.ready-made-listing {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-gap: 0 50px;
}

.ready-made-listing-main {
    position: relative;
    min-width: 0;
    container-type: inline-size;
}

/* Columns by the space beside the filter column, not the viewport (the shop's 860/1150/1580px
   viewport steps ignore the 230px column): a card is never narrower than ~340px from three
   columns up, so the 11px stock label stays on one line. 4 columns from a 1560px main column
   (~1850px viewport), as the design at 1920px; 3 from 1060px (~1350px); 2 from 600px (~860px). */
@supports (container-type: inline-size) {
    .ready-made-listing .ready-made-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    @container (min-width: 600px) {
        .ready-made-listing .ready-made-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @container (min-width: 1060px) {
        .ready-made-listing .ready-made-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @container (min-width: 1560px) {
        .ready-made-listing .ready-made-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}

.ready-made-filters-col {
    display: none;
}

@media (min-width: 640px) {
    .ready-made-listing {
        grid-template-columns: 180px minmax(0, 1fr);
    }
    .ready-made-listing.ready-made-listing-nofilters {
        grid-template-columns: minmax(0, 1fr);
    }
    .ready-made-filters-col {
        display: block;
    }
}

/* --- Filter panel (the shop's classes, re-scoped) --- */

.ready-made-filters {
    position: relative;
}

.ready-made-filters ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.ready-made-filters li {
    position: relative; /* keeps the visually hidden checkbox inside its option */
    margin: 0;
}

.ready-made-filters-title {
    margin: 0 0 30px;
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
}

.ready-made-filters-title:focus {
    outline: none;
}

.ready-made-filters-title svg {
    width: 15px;
    height: 15px;
}

@media (min-width: 1024px) {
    .ready-made-filters-title {
        font-size: 22px;
    }
}

.ready-made-filters .filter-filtergroup {
    min-width: 0;
    margin: 0 0 30px;
    padding: 0;
    border: 0;
}

/* A fieldset doesn't collapse margins as the shop's div does: drop the last option's own margin. */
.ready-made-filters .filter-filtergroup-filteroptions:last-child > .filter-label:last-child {
    margin-bottom: 0;
}

.ready-made-filters legend {
    width: 100%;
    padding: 0;
    text-align: left; /* a legend is placed by its own text-align: keep it left in the right-aligned mobile panel */
}

.ready-made-filters .filter-filtergroup h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-align: left;
}

/* Text options. #767676 rather than the shop's #8a8a8a, so the 14px labels pass AA contrast. */
.ready-made-filters .filter-label {
    margin: 5px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    color: #767676;
    user-select: none;
}

.ready-made-filters .filter-label label {
    display: inline-block;
    cursor: pointer; /* 22px tall, 27px apart: WCAG 2.5.8 spacing exception */
}

/* Selected (the shop's .filter-active): bold and darker. #000 rather than #666, so it stands
   clearly apart from the #767676 resting colour. */
.ready-made-filters .filter-label.filter-active {
    font-weight: 700;
    color: #000;
}

/* A one-choice group with a value picked (Fibre Type, Size, Shape): the other values look as
   the shop's do once one is picked (its .disable-filter: #8a8a8a, 600, 40% opacity). They stay
   clickable. Colour is multi-select, and the shop leaves the other swatches as they are, so
   unpicked swatches keep their resting look (1px #eee ring, full opacity). */
.ready-made-filters .rm-group-active[data-rm-single] .filter-label:not(.filter-active),
.ready-made-filters .filter-label.disable-filter {
    color: #8a8a8a;
    opacity: .4;
}

/* An unavailable Size band (no rug left under the other picks: the shop's .disable-filter look,
   above). Its checkbox is disabled, so it can't be ticked or focused. Exempt from the AA text
   contrast minimum as an inactive control (WCAG 1.4.3). */
.ready-made-filters .filter-label.disable-filter label {
    cursor: default;
}

/* Colour swatches */
.ready-made-filters .filter-filtergroup-colour {
    display: flex;
    flex-wrap: wrap;
    max-width: 200px;
    justify-content: flex-start;
}

.ready-made-filters .filter-filtergroup-colour + .filter-filtergroup-filteroptions {
    margin-top: 5px;
}

.ready-made-filters .filter-filtergroup-colour li {
    box-sizing: content-box;
    width: 30px;
    height: 30px;
    margin: 5px;
    border: 1px solid #eee;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

.ready-made-filters .filter-filtergroup-colour label {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
}

.ready-made-filters .filter-filtergroup-colour li.filter-active {
    margin: 4px;
    border: 2px solid #000;
}

.ready-made-filters .filter-filtergroup-colour li.filter-tick-light {
    color: #fff;
}

.ready-made-filters .filter-filtergroup-colour li.filter-tick-dark {
    color: #000;
}

.ready-made-filters .filter-filtergroup-colour li.filter-active::after {
    content: "\2713";
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 11px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Focus ring on the option (the checkbox itself is visually hidden). */
.ready-made-filters li:focus-within {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.ready-made-filters .filter-label:focus-within {
    outline-offset: 0;
}

@supports selector(:focus-visible) {
    .ready-made-filters li:focus-within:not(:has(:focus-visible)) {
        outline: none;
    }
}

/* Clear filters: shown once something is ticked. */
.ready-made-filters .filter-reset {
    display: none;
    position: absolute;
    top: 32px;
    left: 0;
    min-height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font: inherit;
    font-size: 10px;
    line-height: 24px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

/* The shop's rule-line underline (.filter-reset::after). */
.ready-made-filters .filter-reset::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 1px;
    width: 100%;
    height: 1px;
    background-color: #000;
}

.ready-made-filters.filtersactive .filter-reset {
    display: inline-block;
}

.ready-made-filters .filter-reset:focus-visible,
.ready-made-listing-clear:focus-visible,
.ready-made-filters-done:focus-visible,
.ready-made-filters-toggle:focus-visible,
.ready-made-sort-select:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.ready-made-filters-done {
    display: none;
}

/* --- Sort row (as the shop's #ranges-view-heading-row and #filter-sort-select) --- */

.ready-made-listing-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    min-height: 44px;
    margin: 0 0 20px;
}

.ready-made-sort-select {
    max-width: 100%;
    height: 30px;
    margin: 0;
    padding: 0 4px 0 0;
    border: none;
    background: #fff;
    color: #000;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

/* The view switch sits on the sort row; its box is reserved so the buttons appearing don't shift anything. */
.ready-made-listing-switch {
    display: flex;
    justify-content: flex-end;
    min-height: 44px;
    margin-left: auto;
}

@media (min-width: 830px) {
    .ready-made-listing-head {
        margin-bottom: 40px;
    }
}

/* Mobile "Filter" button (as the shop's #filter-toggle-mobile) */
.ready-made-filters-toggle {
    position: relative;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 13px;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    font: inherit;
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
}

.ready-made-filters-toggle[aria-expanded="true"] {
    padding-left: 30px;
}

.ready-made-filters-toggle[aria-expanded="true"]::before {
    content: "\2715";
    position: absolute;
    top: 50%;
    left: 9px;
    font-size: 16px;
    transform: translateY(-50%);
}

@media (min-width: 640px) {
    .ready-made-filters-toggle {
        display: none;
    }
}

@media (max-width: 639.98px) {
    .ready-made-listing-switch {
        flex-basis: 100%;
    }

    /* The open panel overlays the grid under the sort row, right-aligned and only as wide as its
       options (as the shop's #filter-columns-filters.mobileopen). */
    .ready-made-listing.ready-made-filters-open .ready-made-filters-col {
        display: block;
        position: absolute;
        z-index: 4; /* over the card controls (2), under the sticky site header (5) */
        top: 54px;
        left: 0;
        right: 0;
        text-align: right;
        pointer-events: none; /* the grid beside the panel stays clickable */
    }

    .ready-made-filters.is-open {
        display: inline-block;
        max-width: 100%;
        box-sizing: border-box;
        padding: 15px 30px 20px;
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: -1px 1px 5px #fff;
        text-align: right;
        pointer-events: auto;
    }

    /* The shop hides the "Filter" heading in the overlay; ours stays for screen readers (it takes focus on open). */
    .ready-made-filters.is-open .ready-made-filters-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .ready-made-filters.is-open .filter-reset {
        top: 9px;
        right: 30px;
        left: auto;
    }

    .ready-made-filters.is-open .filter-filtergroup h4 {
        margin: 15px 0 10px;
    }

    .ready-made-filters.is-open .filter-filtergroup ~ .filter-filtergroup h4 {
        margin-top: 0; /* the shop's 15px collapses into the 30px group gap */
    }

    .ready-made-filters.is-open .filter-label {
        margin: 0 15px 15px 0;
    }

    .ready-made-filters.is-open .filter-filtergroup-colour {
        justify-content: flex-end;
    }

    /* Close button styled as the shop's black Filter button. */
    .ready-made-filters.is-open .ready-made-filters-done {
        display: inline-block;
        min-height: 44px;
        margin: 0;
        padding: 13px;
        border: 1px solid #000;
        border-radius: 5px;
        background-color: #000;
        color: #fff;
        font: inherit;
        font-size: 16px;
        line-height: 16px;
        cursor: pointer;
    }
}

/* --- Empty result --- */

.ready-made-listing-empty {
    margin: 0 0 40px;
}

.ready-made-listing-empty[hidden] {
    display: none;
}

.ready-made-listing-clear {
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    font: inherit;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}