/* ════════════════════════════════════════════════════════════
   RANKING TOOL  -  shared by the home page and the collection pages
   (scripts/ranking-tool.php). Moved out of homepage.css.
   ════════════════════════════════════════════════════════════ */
/* The colours the tool uses, set on the section so it looks the same on
   pages that do not load homepage.css. */
.rl-section { --p: #F66526; --p-txt: #C4460F; --dark: #262D35; --muted: #5E6367; --border: #DEDFE0; }

/* ═══════════════════════════════════════════════════════════
   RANKING TOOL  —  moved from index.php
   ═══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════
   RANKING TOOL
   ════════════════════════════════════ */
.rl-section { background: #f0f2f5; padding: 52px 20px 72px; }
.rl-inner { max-width: 1040px; margin: 0 auto; }
.rl-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.rl-h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--dark); margin: 0 0 6px; letter-spacing: -0.5px; }
.rl-header-meta { display: flex; gap: 10px; font-size: 0.76rem; color: var(--muted); align-items: center; flex-wrap: wrap; }
.rl-header-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rl-header-meta i { color: var(--p); }
/* Auto-fitting grid rather than a flex row: each filter gets at least
   170px, which is the width the longest option label needs, and any that
   don't fit wrap to the next line instead of being squeezed and clipped. */
.rl-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 10px; align-items: end; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.rl-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* Sort By carries the longest option text ("Best Value (litres per £)"),
   so it takes two columns rather than being the one that clips. */
.rl-filter-wide { grid-column: span 2; }
.rl-filter-group label { font-size: 0.65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.9px; }
.rl-filter-group select, .rl-filter-group input { width: 100%; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.84rem; background: #F5F5F6; color: var(--dark); outline: none; transition: border-color 0.15s; }
/* Leave room for the native dropdown arrow so the label isn't clipped. */
.rl-filter-group select { padding-right: 28px; text-overflow: ellipsis; }
.rl-filter-group select:focus, .rl-filter-group input:focus { border-color: var(--p); background: #fff; }
.rl-reset-btn { padding: 8px 14px; background: transparent; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.76rem; font-weight: 700; color: var(--muted); cursor: pointer; justify-self: start; align-self: end; white-space: nowrap; transition: border-color 0.2s, color 0.2s; }
.rl-reset-btn:hover { border-color: #dc2626; color: #dc2626; }
.rl-count { font-size: 0.78rem; color: var(--muted); margin-bottom: 14px; }

/* ── Filter panel ──────────────────────────────────────────────
   Desktop: the panel is just a passthrough wrapper and the trigger,
   panel header and apply button are all hidden. Everything that makes
   it a drawer lives in the 860px block further down. */
.rl-filter-toggle,
.rl-panel-head,
.rl-panel-apply { display: none; }
/* Feature toggles sit under the dropdowns as a single wrapping row. */
.rl-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rl-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: #fff; border: 1.5px solid var(--border); border-radius: 30px; font-size: 0.76rem; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.rl-toggle:hover { border-color: var(--brand-primary); color: var(--text-primary); }
/* A toggle that would return nothing is hidden, matching the dropdowns.
   Kept visible when already ticked so it can always be switched off. */
.rl-toggle-empty { display: none; }

/* "Show more": reveals the next page of already-rendered cards. */
.rl-more-wrap { text-align: center; margin-top: 28px; }
.rl-more-wrap[hidden] { display: none; }
.rl-more-btn {
    padding: 13px 30px; background: #fff; border: 1.5px solid var(--border);
    border-radius: 30px; font-size: 0.88rem; font-weight: 800; color: var(--dark);
    cursor: pointer; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.rl-more-btn:hover { border-color: var(--p); color: var(--p-txt); box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
.rl-more-btn i { margin-right: 7px; opacity: 0.7; }
.rl-toggle-count { font-variant-numeric: tabular-nums; opacity: 0.75; }
.rl-toggle input { accent-color: var(--brand-primary); cursor: pointer; margin: 0; width: 15px; height: 15px; }
.rl-toggle i { font-size: 0.8rem; opacity: 0.75; }
/* Checked state: :has keeps the styling on the label without extra JS,
   and browsers without it simply show the unchecked look. */
.rl-toggle:has(input:checked) { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.rl-toggle:has(input:checked) i { opacity: 1; }
/* Empty state — only revealed when the filters match nothing. */
.rl-empty { text-align: center; padding: 48px 20px; background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; }
.rl-empty i { font-size: 2rem; color: var(--border); margin-bottom: 12px; display: block; }
.rl-empty p { font-size: 0.88rem; color: var(--muted); margin: 0; }
.rl-list { display: flex; flex-direction: column; gap: 0; }
.rl-item { display: block; text-decoration: none; color: inherit; cursor: pointer; background: #fff; border: 1px solid #e2e6ea; border-radius: 12px; margin-bottom: 14px; position: relative; overflow: hidden; transition: box-shadow 0.18s, transform 0.18s; }
.rl-item:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.10); transform: translateY(-2px); }
/* Top-rank accent, matched to the badge colour. Keyed off the rank class
   rather than :nth-child so it stays with the ranked card when sorting or
   filtering reorders the list. */
.rl-item-rank1 { border-top: 3px solid #F66526; }
.rl-item-rank2 { border-top: 3px solid #1F6FB2; }
.rl-item-rank3 { border-top: 3px solid #5E6367; }
.rl-item.rank-hidden { display: none; }
.rl-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; padding: 5px 13px 5px 10px; letter-spacing: 0.2px; position: absolute; top: 0; left: 0; border-radius: 0 0 10px 0; }
.rl-badge-blue   { background: #F66526; color: #fff; }
.rl-badge-amber  { background: #1F6FB2; color: #fff; }
.rl-badge-purple { background: #5E6367; color: #fff; }
.rl-card-body { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; grid-template-rows: auto 1fr; align-items: start; padding: 48px 28px 28px; gap: 0; }
.rl-card-image { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: 28px; border-right: 1px solid #f0f0f0; }
.rl-rank-num { font-size: 1.1rem; font-weight: 900; color: #cbd5e1; letter-spacing: -0.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.rl-img { width: 220px; height: 170px; border-radius: 10px; overflow: hidden; background: #f8fafc; }
.rl-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; }
.rl-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 2.8rem; }
.rl-card-main { grid-column: 2; grid-row: 2; padding: 0 28px; flex: 1; min-width: 0; }
.rl-name { font-size: 1.12rem; font-weight: 700; color: #262D35; margin: 0 0 6px; line-height: 1.4; }
/* The title is emitted once as a direct child of the grid (.rl-name-top) so the
   mobile layout can lift it above the image. On desktop it sits in the centre
   column, first row — visually identical to when it lived inside .rl-card-main. */
.rl-name-top {
    grid-column: 2;
    grid-row: 1;
    padding: 0 28px;
    margin: 0 0 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.rl-brand { font-size: 0.78rem; color: #5E6367; margin-bottom: 8px; font-weight: 500; }
.rl-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rl-discount-tag { display: inline-flex; align-items: center; background: #dc2626; color: #fff; font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; }
.rl-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: #494E53; background: #f3f4f6; border: 1px solid #DEDFE0; padding: 3px 8px; border-radius: 4px; }
.rl-tag i { color: var(--p); font-size: 0.65rem; }
.rl-bullets-heading { font-size: 0.78rem; font-weight: 700; color: #494E53; margin: 0 0 7px; }
.rl-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.rl-bullets li { font-size: 0.84rem; color: #494E53; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.rl-bullets li::before { content: '\2713'; color: var(--p); font-weight: 700; font-size: 0.78rem; flex-shrink: 0; margin-top: 1px; }
.rl-card-right { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-left: 28px; border-left: 1px solid #f0f0f0; text-align: center; }
.rl-score-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; width: 100%; }
.rl-score-num { font-size: 2.6rem; font-weight: 900; color: #262D35; line-height: 1; letter-spacing: -1px; }
.rl-score-label { font-size: 0.75rem; font-weight: 700; color: #C4460F; margin: 4px 0 6px; }
.rl-stars { color: #1F6FB2; font-size: 0.82rem; letter-spacing: 2px; }
.rl-price-block { width: 100%; }
.rl-price { font-size: 1.85rem; font-weight: 900; color: #262D35; line-height: 1; letter-spacing: -0.5px; }
.rl-was { font-size: 1rem; color: #9E9FA1; text-decoration: line-through; margin-top: 4px; }
.rl-cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: #F66526; color: #fff; font-size: 0.92rem; font-weight: 700; padding: 14px 20px; border-radius: 10px; width: 100%; transition: background 0.15s; box-shadow: 0 3px 12px rgba(246, 101, 38,0.30); }
.rl-item:hover .rl-cta { background: #E0541A; }
/* ── Filters as a slide-up drawer on mobile ───────────────────── */
@media (max-width: 860px) {
    /* Trigger: full-width bar above the results. */
    .rl-filter-toggle {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        width: 100%; padding: 12px 16px; margin-bottom: 14px;
        background: #fff; border: 1.5px solid var(--border); border-radius: 10px;
        font-size: 0.9rem; font-weight: 800; color: var(--dark); cursor: pointer;
    }
    .rl-filter-toggle i { color: var(--p); margin-right: 6px; }
    .rl-filter-toggle-count {
        background: var(--p); color: #fff; border-radius: 20px;
        padding: 2px 9px; font-size: 0.72rem; font-weight: 800;
    }

    /* Panel: off-screen sheet until .is-open.
       Flex column so the header and the apply button pin to the top and
       bottom while only the filters between them scroll. */
    .rl-panel {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        max-height: 88vh; display: flex; flex-direction: column;
        background: #fff; border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
        transform: translateY(100%); transition: transform 0.25s ease;
        visibility: hidden;
    }
    .rl-panel.is-open { transform: translateY(0); visibility: visible; }

    /* Header pinned at the top of the sheet. */
    .rl-panel-head {
        display: flex; align-items: center; justify-content: space-between;
        flex: 0 0 auto;
        padding: 14px 16px 12px;
        background: #fff; border-bottom: 1px solid var(--border);
        font-size: 1rem;
    }
    .rl-panel-close {
        background: transparent; border: none; cursor: pointer;
        font-size: 1.15rem; color: var(--muted); padding: 4px 6px; line-height: 1;
    }

    /* The only scrolling region; min-height:0 is required or a flex child
       refuses to shrink below its content and the sheet overflows instead. */
    .rl-panel-scroll {
        flex: 1 1 auto; min-height: 0;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 0 16px;
    }

    /* Apply button pinned to the bottom, clear of the iOS home indicator. */
    .rl-panel-apply {
        display: block; flex: 0 0 auto; width: auto; margin: 0;
        padding: 14px;
        background: var(--p); color: #fff; border: none; border-radius: 10px;
        font-size: 0.95rem; font-weight: 800; cursor: pointer;
    }
    /* Wrapper padding gives the button its gutter and the safe-area inset,
       with a top border so it reads as a footer bar over scrolled content. */
    .rl-panel > .rl-panel-apply {
        margin: 0 16px calc(16px + env(safe-area-inset-bottom));
        margin-top: 12px;
    }

    /* Inside the sheet the filter bar is a plain stacked list. */
    .rl-panel .rl-filters {
        display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
        border: none; box-shadow: none; padding: 14px 0 6px; margin: 0;
    }
    .rl-panel .rl-filter-group { min-width: 0; }
    .rl-panel .rl-filters select { width: 100%; }
    /* 16px stops iOS zooming the page when a select is focused. */
    .rl-panel .rl-filter-group select,
    .rl-panel .rl-filter-group input { font-size: 16px; }
    /* Reset sits last in the markup (correct for desktop), but on mobile it
       belongs at the top of the sheet where it is reachable without
       scrolling past every filter. order:-1 moves it without changing the
       DOM, so desktop and tab order elsewhere are untouched. */
    .rl-panel .rl-reset-btn {
        grid-column: 1 / -1; width: 100%; padding: 11px;
        order: -1; margin-bottom: 2px;
    }
    .rl-panel .rl-toggles { margin: 10px 0 14px; }

    /* Backdrop, shown only while the sheet is open. */
    .rl-backdrop {
        position: fixed; inset: 0; z-index: 1199;
        background: rgba(0,0,0,0.45);
        opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
    }
    .rl-backdrop.is-open { opacity: 1; visibility: visible; }
    /* Page must not scroll behind an open sheet. */
    body.rl-no-scroll { overflow: hidden; }
}
@media (max-width: 460px) {
    .rl-panel .rl-filters { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .rl-card-body { grid-template-columns: 130px minmax(0, 1fr); grid-template-rows: auto auto auto; padding: 40px 16px 16px; }
    .rl-card-image { grid-column: 1; grid-row: 1 / 3; padding-right: 14px; }
    .rl-name-top   { grid-column: 2; grid-row: 1; padding: 0; }
    .rl-card-main  { grid-column: 2; grid-row: 2; padding: 0; }
    .rl-card-right { grid-column: 1 / 3; grid-row: 3; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; border-left: none; border-top: 1px solid #f0f0f0; padding: 14px 0 0; margin-top: 14px; gap: 10px; }
    .rl-score-box { width: auto; padding: 8px 14px; }
    .rl-price-block { text-align: left; }
    .rl-cta { width: auto; padding: 10px 20px; }
    .rl-img { width: 120px; height: 90px; }
    /* Grid children need min-width:0 or long titles/tags force the column wider. */
    .rl-card-main { min-width: 0; }
    .rl-tag, .rl-discount-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
}
@media (max-width: 440px) {
    /* Single column, visually reordered: title → full-width image → details → buy block.
       The image comes before the title in the markup, so grid-row does the reordering. */
    .rl-card-body { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 0; }
    /* Badged cards carry an absolutely-positioned trophy ribbon; reserve room
       for it. Keyed off the badge class, not :nth-child — sorting and
       filtering move the ranked cards out of the first three DOM positions,
       which left the ribbon overlapping the title. */
    .rl-item-badged .rl-card-body { padding-top: 38px; }

    /* Title first. */
    .rl-name-top {
        grid-column: 1; grid-row: 1;
        font-size: 1.05rem; line-height: 1.35;
        padding: 0;
        margin: 0 0 12px;
    }

    /* Full-bleed image band with rank badge. */
    .rl-card-image {
        grid-column: 1; grid-row: 2;
        display: block; position: relative;
        padding: 0; margin: 0 0 12px;
        border-right: none;
    }
    .rl-img {
        width: 100%; height: 190px;
        border-radius: 10px;
        background: #f1f5f9;
    }
    .rl-img img { padding: 0; object-fit: cover; }
    .rl-rank-num {
        position: absolute; top: -1px; left: -1px; z-index: 2;
        display: flex; align-items: center; justify-content: center;
        min-width: 42px; height: 34px;
        padding: 0 10px;
        font-size: 1.15rem; font-weight: 900;
        color: #94a3b8;
        background: rgba(255, 255, 255, 0.94);
        border-radius: 0 0 8px 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }

    /* Details section. */
    .rl-card-main { grid-column: 1; grid-row: 3; padding: 0; min-width: 0; }

    /* Long warranty/delivery tags must wrap. */
    .rl-card-tags { gap: 5px; }
    .rl-tag, .rl-discount-tag {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    /* Buy block: boxed score and price side by side, full-width CTA beneath.
       minmax(0, 1fr) keeps the halves even regardless of price string length. */
    .rl-card-right {
        grid-column: 1; grid-row: 4;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        column-gap: 12px; row-gap: 14px;
        border-left: none; border-top: 1px solid #f0f0f0;
        padding: 14px 0 0; margin-top: 14px;
        text-align: center;
    }
    .rl-score-box {
        width: 100%; padding: 10px 12px;
        display: flex; flex-direction: column; align-items: center;
        box-sizing: border-box;
    }
    .rl-score-num { font-size: 1.7rem; letter-spacing: -0.5px; }
    .rl-score-label { font-size: 0.68rem; margin: 2px 0 4px; }
    .rl-stars { font-size: 0.72rem; letter-spacing: 1px; }

    .rl-price-block { width: 100%; text-align: center; }
    .rl-price { font-size: 1.5rem; }
    .rl-was { font-size: 0.85rem; margin-top: 2px; }

    /* box-sizing so the padding stays inside the track — the button was
       rendering wider than the card and clipping at the right edge. */
    .rl-cta {
        grid-column: 1 / -1;
        width: 100%;
        padding: 13px 16px;
        box-sizing: border-box;
    }

    /* Two per row on narrow screens — still wide enough for the labels,
       and it keeps the filter bar from becoming a long single column. */
    .rl-filters { padding: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .rl-filter-group { min-width: 0; }
    /* Only two columns exist here, so the wide span would leave a filter
       stranded on its own row. */
    .rl-filter-wide { grid-column: span 1; }
    /* Toggles stay on one wrapping row but shrink, so five of them do not
       push the ranked list off the first screen on a phone. */
    .rl-toggle { padding: 6px 10px; font-size: 0.72rem; gap: 6px; }
    .rl-empty { padding: 32px 16px; }

    /* Tighten the run-in above the H1 — the desktop 52px reads as dead space
       on a narrow screen. */
    .rl-section { padding: 20px 20px 48px; }
    .rl-header  { margin-bottom: 14px; }
}

/* ── Collection pages (.rl-compact) ─────────────────────────────
   The tool sits straight under a short hero, so everything is tightened
   to get the filters and the first results onto the first screen, and the
   width matches the hero and the product grid (1260px). */
.rl-intro { font-size: 0.9rem; color: var(--muted); margin: 0; line-height: 1.45; max-width: 820px; }
.rl-section.rl-compact { padding: 20px 20px 36px; }
.rl-compact .rl-inner { max-width: 1260px; }
.rl-compact .rl-header { margin-bottom: 12px; align-items: flex-end; }
.rl-compact .rl-h1 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); margin: 0 0 4px; }
.rl-compact .rl-header-meta { display: none; }
/* Desktop only: below 861px the filters are the slide-up drawer. */
@media (min-width: 861px) {
    .rl-compact .rl-filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; padding: 10px 14px; margin-bottom: 8px; }
}
.rl-compact .rl-filter-group select { padding-top: 6px; padding-bottom: 6px; }
.rl-compact .rl-toggles { gap: 6px; margin-bottom: 8px; }
.rl-compact .rl-toggle { padding: 5px 11px; }
.rl-compact .rl-count { margin-bottom: 8px; }
.rl-compact .rl-item { margin-bottom: 10px; }
.rl-compact .rl-card-body { grid-template-columns: 190px minmax(0, 1fr) 200px; padding: 18px 22px 16px; }
.rl-compact .rl-item-badged .rl-card-body { padding-top: 36px; }
.rl-compact .rl-card-image { padding-right: 20px; gap: 4px; }
.rl-compact .rl-img { width: 160px; height: 118px; }
.rl-compact .rl-name-top, .rl-compact .rl-card-main { padding: 0 22px; }
.rl-compact .rl-name { font-size: 1.05rem; }
.rl-compact .rl-brand { margin-bottom: 6px; }
.rl-compact .rl-card-tags { margin-bottom: 8px; }
.rl-compact .rl-bullets-heading { display: none; }
.rl-compact .rl-bullets { flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
.rl-compact .rl-card-right { gap: 10px; padding-left: 20px; }
.rl-compact .rl-score-box { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 10px; padding: 8px 10px; box-sizing: border-box; }
.rl-compact .rl-score-num { font-size: 1.7rem; }
.rl-compact .rl-score-label { margin: 0; }
.rl-compact .rl-stars { flex-basis: 100%; font-size: 0.74rem; }
.rl-compact .rl-price { font-size: 1.55rem; }
.rl-compact .rl-cta { padding: 11px 16px; box-sizing: border-box; }
@media (max-width: 680px) {
    .rl-compact .rl-card-body { grid-template-columns: 130px minmax(0, 1fr); padding: 16px; }
    .rl-compact .rl-item-badged .rl-card-body { padding-top: 38px; }
    .rl-compact .rl-name-top, .rl-compact .rl-card-main { padding: 0; }
    .rl-compact .rl-card-image { padding-right: 14px; }
    .rl-compact .rl-img { width: 120px; height: 90px; }
    .rl-compact .rl-card-right { padding-left: 0; }
    .rl-compact .rl-score-box { width: auto; }
    .rl-compact .rl-stars { flex-basis: auto; }
}
@media (max-width: 440px) {
    .rl-section.rl-compact { padding: 14px 16px 28px; }
    .rl-compact .rl-card-body { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .rl-compact .rl-card-image { padding-right: 0; }
    .rl-compact .rl-img { width: 100%; height: 170px; }
    .rl-compact .rl-score-box { width: 100%; }
}