body {
    font-family: system-ui, sans-serif;
    margin: 2rem auto;
    max-width: 68rem;
    padding: 0 1rem;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border-bottom: 1px solid #ddd;
    padding: 0.5rem;
    text-align: left;
    vertical-align: top;
}

#shops {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.shop {
    background: #f4f4f4;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    font: inherit;
    padding: 0.4rem 1.2rem;
}

/* The chosen tab joins the table below it, so the two read as one surface. */
.shop.chosen {
    background: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}

.numeric {
    text-align: right;
    white-space: nowrap;
}

.old-price {
    color: #666;
    text-decoration: line-through;
}

.percent {
    color: #b00020;
    font-weight: 600;
}

/* The coupon price is what the store puts in a red block of its own, so it is set apart
   from the price anyone pays rather than reading as another figure beside it. */
.coupon {
    color: #b00020;
}

.unit-price {
    color: #666;
    display: block;
    font-size: 0.85em;
}

.valid {
    white-space: nowrap;
}


.page {
    color: #666;
}

tfoot td {
    border-bottom: none;
    color: #666;
    padding-top: 0.75rem;
}

#status.error {
    color: #b00020;
}

/* A shop missing from the offers, or showing older ones, said above them. */
#source-notes {
    background: #fff8e1;
    border: 1px solid #f0d58a;
    border-radius: 4px;
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
}

#source-notes[hidden] {
    display: none;
}

/* The two views, offers for everyone and review for the admin, linked at the top. */
.views {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* The views on the left, the language on the right. */
.topbar {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.topbar .views {
    margin-bottom: 0;
}

.language {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    padding: 0.25rem 0.5rem;
}

.views a {
    color: #555;
    text-decoration: none;
}

.views a.current {
    color: #000;
    font-weight: 600;
}

#filters {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.intro,
.muted {
    color: #666;
}

.picture {
    border: 1px solid #ddd;
    max-height: 220px;
    max-width: 220px;
}

.source {
    font-size: 0.85em;
    margin-bottom: 0.25rem;
}

.read-name {
    font-weight: 600;
}

.figures {
    margin: 0.25rem 0;
}

.problems {
    color: #b00020;
    margin: 0;
    padding-left: 1.1rem;
}

/* The fields of an offer under review, two to a row, the longer ones across both. */
.fields {
    display: grid;
    gap: 0.4rem 0.6rem;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0.6rem;
    min-width: 18rem;
}

.field {
    color: #555;
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    gap: 0.15rem;
}

.field.wide {
    grid-column: 1 / -1;
}

.field input {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #000;
    font: inherit;
    font-size: 1.15em;
    padding: 0.25rem 0.35rem;
    width: 100%;
}

.buttons {
    display: flex;
    gap: 0.5rem;
}

button.primary,
button.secondary {
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    padding: 0.3rem 0.9rem;
}

button.primary {
    background: #1a7f37;
    border-color: #1a7f37;
    color: #fff;
}

button.secondary {
    background: #f4f4f4;
}

.decided {
    margin-bottom: 0.5rem;
}

.decided.approved {
    color: #1a7f37;
}

/* Offers a person approved after they were held back. */
.by-hand {
    color: #1a7f37;
    display: block;
    font-size: 0.8em;
}

#account {
    align-items: center;
    color: #555;
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

#sign-in {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 18rem;
}

#sign-in[hidden] {
    display: none;
}

#sign-in .field input {
    border: 1px solid #ccc;
    border-radius: 3px;
    font: inherit;
    padding: 0.35rem;
}

.error {
    color: #b00020;
}

/* Search and filters, one row that wraps on a narrow screen. */
#offer-filters {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-bottom: 1rem;
}

#offer-filters[hidden] {
    display: none;
}

.control {
    color: #555;
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    gap: 0.15rem;
}

.control.search {
    flex: 1 1 14rem;
}

.control input,
.control select {
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    color: #000;
    font: inherit;
    font-size: 1.2em;
    padding: 0.3rem 0.4rem;
}

.control.search input {
    width: 100%;
}

/* A range's two ends side by side, a dash between. */
.control .range {
    align-items: center;
    display: flex;
    gap: 0.3rem;
}

.control .range input {
    width: 4.5em;
}

.check {
    align-items: center;
    display: flex;
    gap: 0.3rem;
    padding-bottom: 0.4rem;
    white-space: nowrap;
}

td.empty {
    color: #666;
    padding: 1.5rem 0.5rem;
    text-align: center;
}

/* Offers as cards, as many to a row as fit: four on a wide screen, one on a phone. */
#offers {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

#offers[hidden] {
    display: none;
}

#offers .empty {
    color: #666;
    grid-column: 1 / -1;
    padding: 2rem 0;
    text-align: center;
}

.offer-card {
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* The picture sits in a frame of one height, whatever its shape, so the cards line up. */
.offer-photo {
    align-items: center;
    background: #f6f6f6;
    display: flex;
    height: 11rem;
    justify-content: center;
    padding: 0.5rem;
}

.offer-photo img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.no-photo {
    color: #aaa;
    font-size: 0.9em;
}

a.offer-photo {
    text-decoration: none;
}

.offer-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem;
}

.offer-meta {
    color: #666;
    display: flex;
    font-size: 0.8em;
    justify-content: space-between;
}

.offer-meta .store {
    background: #f0f0f0;
    border-radius: 3px;
    color: #333;
    font-weight: 600;
    padding: 0 0.4rem;
}

.offer-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.offer-title a {
    color: inherit;
    text-decoration: none;
}

.offer-title a:hover {
    text-decoration: underline;
}

.offer-card .size {
    color: #555;
    font-size: 0.9em;
}

/* Pushed to the foot of the card, so prices line up across a row. */
.offer-prices {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.3rem;
}

.offer-prices .now {
    font-size: 1.5rem;
    font-weight: 700;
}

.offer-prices .percent {
    background: #b00020;
    border-radius: 3px;
    color: #fff;
    padding: 0 0.35rem;
}

.offer-prices .now.percent {
    font-size: 1.3rem;
}

.offer-card .deal {
    font-size: 0.9em;
    font-weight: 600;
}

.offer-card .coupon {
    font-size: 0.9em;
}

.offer-card .unit-price,
.offer-card .valid {
    color: #666;
    font-size: 0.8em;
}

/* An offer about to end is worth hurrying for; one not yet begun is worth waiting for. */
.offer-card .valid.ending {
    color: #b00020;
    font-weight: 600;
}

.offer-card .valid.upcoming {
    color: #1a5fb4;
    font-weight: 600;
}

.offer-card .valid.ended {
    color: #999;
}

/* While the offers are read: a shop just restarted can take a while. */
#status.loading::before {
    animation: spin 0.8s linear infinite;
    border: 2px solid #ddd;
    border-radius: 50%;
    border-top-color: #555;
    content: "";
    display: inline-block;
    height: 0.9em;
    margin-right: 0.5rem;
    vertical-align: -0.1em;
    width: 0.9em;
}

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

/* How many offers each shop's tab holds under the other choices. */
.shop .tab-count {
    background: #e6e6e6;
    border-radius: 999px;
    color: #444;
    font-size: 0.75em;
    font-weight: 400;
    padding: 0.05rem 0.45rem;
}

.shop.chosen .tab-count {
    background: #222;
    color: #fff;
}

.shop.none {
    color: #999;
}

.shop:focus-visible,
.offer-card a:focus-visible,
#more:focus-visible,
#to-top:focus-visible {
    outline: 2px solid #1a5fb4;
    outline-offset: 2px;
}

button.secondary:disabled {
    cursor: default;
    opacity: 0.5;
}

/* A range whose "from" is above its "to". */
.control input[aria-invalid="true"] {
    border-color: #b00020;
    box-shadow: 0 0 0 1px #b00020;
}

#offers .empty p {
    margin: 0 0 0.75rem;
}

/* The next page of offers, for whoever reaches the end before it comes by itself. */
#more {
    display: block;
    margin: 1.5rem auto 0;
    padding: 0.5rem 1.5rem;
}

#more[hidden],
#to-top[hidden] {
    display: none;
}

#to-top {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    bottom: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.75rem;
    position: fixed;
    right: 1.25rem;
    width: 2.75rem;
}

/* A phone: the shop tabs scroll sideways rather than wrap, the filters two to a row, and
   two cards to a row with smaller photographs, so more offers fit on the screen. */
@media (max-width: 600px) {
    body {
        margin-top: 1rem;
    }

    h1 {
        font-size: 1.6rem;
        margin: 0 0 0.75rem;
    }

    #shops {
        margin-left: -1rem;
        margin-right: -1rem;
        overflow-x: auto;
        padding: 0 1rem;
        scrollbar-width: none;
    }

    .shop {
        flex: none;
        padding: 0.4rem 0.8rem;
        white-space: nowrap;
    }

    #offer-filters {
        gap: 0.6rem;
    }

    #offer-filters .control {
        flex: 1 1 40%;
        min-width: 0;
    }

    #offer-filters .control.search {
        flex-basis: 100%;
    }

    #offer-filters .control select {
        width: 100%;
    }

    .control .range input {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    #offers {
        gap: 0.6rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .offer-photo {
        height: 8rem;
    }

    .offer-info {
        padding: 0.5rem;
    }

    .offer-title {
        font-size: 0.9rem;
    }

    .offer-prices {
        gap: 0.3rem;
    }

    .offer-prices .now {
        font-size: 1.2rem;
    }
}

/* Offers' photographs to check: the page and card as evidence, then the candidates. */
#photos[hidden] {
    display: none;
}

.photo-check {
    border-bottom: 1px solid #ddd;
    padding: 1rem 0;
}

.photo-evidence,
.photo-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0;
}

.photo-evidence figure,
.photo-choices figure {
    margin: 0;
}

.page-frame {
    position: relative;
    width: 300px;
}

.page-image {
    display: block;
    width: 100%;
}

.outline {
    box-sizing: border-box;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    position: absolute;
}

.card-outline {
    border: 2px solid #1565c0;
}

.text-outline {
    border: 2px solid #b00020;
}

.candidate-outline {
    background: rgba(26, 127, 55, 0.15);
    border: 2px dashed #1a7f37;
    padding: 0 0.2rem;
    text-shadow: 0 0 2px #000;
}

.card-image {
    border: 1px solid #ddd;
    max-height: 320px;
    max-width: 320px;
}

.candidate {
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 0.3rem;
}

.candidate.published {
    border-color: #1a7f37;
}

.candidate-image {
    background: #f6f6f6;
    display: block;
    max-height: 200px;
    max-width: 220px;
}

.candidate figcaption {
    align-items: center;
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.check-note {
    color: #555;
    font-size: 0.85em;
    max-width: 220px;
}

/* The review grid: a tile an offer, decided with keys. */
.keys-help {
    background: #f6f6f6;
    border-radius: 6px;
    font-size: 0.9em;
    padding: 0.4rem 0.7rem;
}

.photo-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.photo-tile {
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    min-width: 0;
    padding: 0.6rem;
}

.photo-tile.focused {
    border-color: #1565c0;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.25);
}

.photo-tile .read-name {
    font-weight: 600;
    margin: 0.2rem 0 0.4rem;
}

.tile-candidates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tile-candidate {
    border: 2px solid transparent;
    border-radius: 6px;
    flex: 1 1 120px;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    padding: 0.2rem;
}

.tile-candidate.chosen {
    border-color: #1565c0;
}

.tile-candidate.published {
    background: #eaf6ec;
    border-color: #1a7f37;
}

.tile-candidate.flagged .tile-image {
    opacity: 0.45;
}

.tile-image {
    background: #f6f6f6;
    display: block;
    height: 130px;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.tile-candidate figcaption {
    align-items: flex-start;
    display: flex;
    font-size: 0.8em;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.tile-note {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #555;
    display: -webkit-box;
    overflow: hidden;
}

.tile-candidate.flagged .tile-note {
    color: #b00020;
}

kbd {
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 0.9em;
    padding: 0 0.3rem;
}

.tile-state {
    font-size: 0.85em;
    margin-top: 0.4rem;
}

.photo-detail {
    background: rgba(0, 0, 0, 0.45);
    inset: 0;
    overflow: auto;
    padding: 2rem 1rem;
    position: fixed;
    z-index: 10;
}

.photo-detail-panel {
    background: #fff;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 1100px;
    padding: 1rem;
}

/* Drawing the product on the page, where no candidate shows it. */
.page-frame.drawable {
    cursor: crosshair;
    user-select: none;
}

.photo-detail .page-frame {
    width: min(760px, 92vw);
}

.drawn-outline {
    border: 2px solid #e8710a;
    background: rgba(232, 113, 10, 0.15);
    padding: 0 0.2rem;
    text-shadow: 0 0 2px #000;
}

/* The offers page's look: a soft grey page with the filters on a white panel and the cards
   standing out from it. Kept to the offers page, so the review page stays as it is. */
.offers-page {
    --accent: #0f766e;
    --accent-soft: rgba(15, 118, 110, 0.14);
    --bar: #1f2933;
    --bar-soft: rgba(31, 41, 51, 0.16);
    --ink: #1f2933;
    --muted: #6b7280;
    --faint: #9aa1a9;
    --line: #e3e6ea;
    --line-strong: #c9cdd3;
    --field: #f8f9fa;
    --panel: #fff;
    background: #f3f4f6;
    color: var(--ink);
}

.offers-page h1 {
    letter-spacing: -0.02em;
}

.offers-page .language {
    border-color: var(--line);
    border-radius: 10px;
    cursor: pointer;
}

.offers-page #source-notes {
    border-radius: 12px;
}

/* The shops as pills, the chosen one filled. */
.offers-page #shops {
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.offers-page .shop {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    gap: 0.45rem;
    padding: 0.4rem 0.95rem;
    transition: background-color 0.15s, border-color 0.15s;
}

.offers-page .shop:hover {
    border-color: var(--line-strong);
}

.offers-page .shop.chosen {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.offers-page .shop .tab-count {
    background: #eef0f2;
    color: var(--muted);
}

.offers-page .shop.chosen .tab-count {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.offers-page .shop.none {
    color: var(--faint);
}

/* The search and filters on a panel of their own. */
.offers-page #offer-filters {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -12px rgba(16, 24, 40, 0.12);
    gap: 0.9rem 1rem;
    padding: 1rem 1.1rem;
}

.offers-page .control {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.35rem;
    letter-spacing: 0.02em;
}

.offers-page .control input,
.offers-page .control select {
    background-color: var(--field);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 400;
    height: 2.6rem;
    letter-spacing: normal;
    padding: 0 0.75rem;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.offers-page .control input::placeholder {
    color: var(--faint);
}

.offers-page .control input:hover,
.offers-page .control select:hover {
    border-color: var(--line-strong);
}

.offers-page .control input:focus,
.offers-page .control select:focus {
    background-color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* A magnifying glass inside the search box. */
.offers-page .control.search input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-position: 0.8rem 50%;
    background-repeat: no-repeat;
    background-size: 1.05rem;
    padding-left: 2.4rem;
}

.offers-page .control .range {
    color: var(--faint);
    gap: 0.35rem;
}

.offers-page .control .range input {
    width: 4.75rem;
}

.offers-page .control input[aria-invalid="true"] {
    border-color: #b00020;
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.12);
}

/* The browser's own arrow swapped for one that matches the fields. */
.offers-page .control select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 0.7rem center;
    background-repeat: no-repeat;
    background-size: 1rem;
    cursor: pointer;
    padding-right: 2.2rem;
}

/* "Valid today" as a chip that fills when on. */
.offers-page .check {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-sizing: border-box;
    color: var(--ink);
    cursor: pointer;
    gap: 0.45rem;
    height: 2.6rem;
    padding: 0 0.95rem;
    transition: background-color 0.15s, border-color 0.15s;
}

.offers-page .check:hover {
    border-color: var(--line-strong);
}

.offers-page .check input {
    accent-color: var(--accent);
    cursor: pointer;
    height: 1rem;
    margin: 0;
    width: 1rem;
}

.offers-page .check:has(input:checked) {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.offers-page .check:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.offers-page #clear {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--accent);
    font-weight: 600;
    height: 2.6rem;
    margin-left: auto;
    padding: 0 0.9rem;
    transition: background-color 0.15s;
}

.offers-page #clear:hover:not(:disabled) {
    background: var(--accent-soft);
}

.offers-page #clear:disabled {
    color: var(--muted);
    opacity: 0.45;
}

/* The discount and price ranges on a row of their own under the search, each its label and
   fields above a bar of two handles. */
.offers-page .ranges {
    border-top: 1px solid var(--line);
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    padding-top: 0.9rem;
}

.offers-page .range-control {
    flex: 1 1 16rem;
    gap: 0.5rem;
}

.offers-page .range-head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.offers-page .range-head .range input {
    height: 2.2rem;
    padding: 0 0.5rem;
    text-align: center;
    width: 4.5rem;
}

/* The bar: a track filled between the handles. Each handle's input reaches half a handle
   past the track at both ends, so a handle's centre lies on the track's end at its end. */
.offers-page .range-bar {
    --low: 0%;
    --high: 100%;
    cursor: pointer;
    height: 1.75rem;
    margin: 0 10px;
    position: relative;
    touch-action: none;
}

.offers-page .range-bar::before {
    background: linear-gradient(to right, #e5e7eb var(--low), var(--bar) var(--low),
        var(--bar) var(--high), #e5e7eb var(--high));
    border-radius: 999px;
    content: "";
    height: 6px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: calc(50% - 3px);
}

.offers-page .control .range-bar input,
.offers-page .control .range-bar input:hover,
.offers-page .control .range-bar input:focus {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 20px;
    left: -10px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: calc(50% - 10px);
    width: calc(100% + 20px);
}

.offers-page .range-bar.low-on-top .low {
    z-index: 1;
}

.offers-page .range-bar input::-webkit-slider-runnable-track {
    background: transparent;
    height: 20px;
}

.offers-page .range-bar input::-moz-range-track {
    background: transparent;
}

.offers-page .range-bar input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 2px solid var(--bar);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    box-sizing: border-box;
    cursor: grab;
    height: 20px;
    pointer-events: auto;
    transition: box-shadow 0.15s;
    width: 20px;
}

.offers-page .range-bar input::-moz-range-thumb {
    background: #fff;
    border: 2px solid var(--bar);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.25);
    box-sizing: border-box;
    cursor: grab;
    height: 20px;
    pointer-events: auto;
    width: 20px;
}

.offers-page .range-bar input:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.offers-page .range-bar input:active::-moz-range-thumb {
    cursor: grabbing;
}

.offers-page .range-bar input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--bar-soft), 0 1px 3px rgba(16, 24, 40, 0.25);
}

.offers-page .range-bar input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--bar-soft), 0 1px 3px rgba(16, 24, 40, 0.25);
}

/* The bar's two ends, under it. */
.offers-page .range-scale {
    color: var(--faint);
    display: flex;
    font-size: 0.7rem;
    font-weight: 500;
    justify-content: space-between;
    margin-top: -0.2rem;
}

/* Where the offers come from, at the foot of the page, quietly. */
.offers-page .site-footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
    margin-top: 3rem;
    padding: 1.25rem 0 2rem;
}

.offers-page .site-footer p {
    margin: 0 0 0.6rem;
    max-width: 52rem;
}

.offers-page .site-footer a {
    color: var(--ink);
}

/* The cards set off the grey page. */
.offers-page .offer-card {
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.offers-page .offer-photo {
    background: #fff;
    border-bottom: 1px solid #f0f1f3;
}

/* Each shop's label in the shop's own colours: IKI's yellow, Lidl's blue, Maxima's red. */
.offers-page .offer-meta .store {
    background: #eef0f2;
    border-radius: 6px;
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    padding: 0 0.5rem;
    text-transform: uppercase;
}

.offers-page .offer-meta .store[data-store="iki"] {
    background: #ffd200;
    box-shadow: inset 0 0 0 1px rgba(120, 90, 0, 0.18);
    color: #3a2d00;
}

.offers-page .offer-meta .store[data-store="lidl"] {
    background: #0050aa;
    color: #fff;
}

.offers-page .offer-meta .store[data-store="maxima"] {
    background: #e2001a;
    color: #fff;
}

.offers-page #more {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 600;
}

.offers-page #more:hover {
    border-color: var(--line-strong);
}

.offers-page #to-top {
    border-color: var(--line);
    color: var(--ink);
}

@media (max-width: 600px) {
    .offers-page #offer-filters {
        border-radius: 14px;
        padding: 0.85rem;
        position: relative;
    }

    /* Clear in the panel's corner, level with the search's label, rather than on a row
       of its own. */
    .offers-page #clear {
        height: auto;
        padding: 0.2rem 0.5rem;
        position: absolute;
        right: 0.5rem;
        top: 0.55rem;
    }

    .offers-page .control .range input {
        width: auto;
    }

    .offers-page #offer-filters .range-control {
        flex-basis: 100%;
    }

    .offers-page .range-head .range input {
        flex: none;
        width: 4.5rem;
    }

    /* The sort beside "Valid today" where both fit, as in English; above it where the
       words are longer, rather than cut short. */
    .offers-page #offer-filters .control.sort {
        flex: 1 1 11rem;
    }

    .offers-page .check {
        justify-content: center;
    }
}