:root{
    /* Core */
    --bg: #0f1115;
    --text: rgba(245,245,245,0.92);
    --muted: rgba(245,245,245,0.70);

    /* Surfaces */
    --panel: rgba(255,255,255,0.04);
    --panel2: rgba(255,255,255,0.06);
    --border: rgba(255,255,255,0.10);
    --shadow: rgba(0,0,0,0.45);

    /* Accents (gold-metal + emerald) */
    --gold-hi: #f8e8a6;
    --gold:    #d4af37;
    --gold-lo: #8d6b1f;
    --emerald: #145c44;

    /* Layout */
    --content-width: 1200px;
}

*{ box-sizing: border-box; }

html, body{
    height:100%;
    overflow-x: hidden;
    margin: 0;
}

body{
    background:
        radial-gradient(1200px 800px at 85% 85%, rgba(20,92,68,0.16), transparent 65%),
        radial-gradient(1000px 600px at 20% 10%, rgba(20,92,68,0.18), transparent 60%),
        radial-gradient(900px 700px at 80% 40%, rgba(212,175,55,0.10), transparent 55%),
        var(--bg);
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

input, button, textarea, select{
    font: inherit;
    color: inherit;
}

a{ color: inherit; }

/* Read by screen readers and search engines, never shown: the home's h1 (docs/web/seo.md) */
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container{
    width: min(var(--content-width), 100%);
    margin: 0 auto;
    padding: 0 clamp(14px, 3vw, 28px);
}

.page{
    min-height: 100%;
    display: block;
    padding: 0;
}

/* Topbar (brand + search): shared chrome, styled in topbar.css. */

/* Content spacing */
.sections{
    padding-top: 18px; /* keeps content off the topbar */
    padding-bottom: 40px;
    display: grid;
    gap: 26px;
}

/* Section header: a premium divider band — gold accent bar on the left, the
   results-summary's diagonal sheen behind, hairline borders top and bottom. */
.section-head{
    display: flex;
    justify-content: space-between;
    align-items: center;   /* a title without a subtitle sits level with the pager, not on its baseline */
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    padding: 12px 16px 12px 18px;
    border-radius: 12px;
    border-top: 1px solid rgba(212,175,55,0.22);
    border-bottom: 1px solid rgba(212,175,55,0.22);
    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,0.07),
            rgba(255,255,255,0.03) 45%,
            rgba(255,255,255,0.015)
        );
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    overflow: hidden;
}

.section-head::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
    box-shadow: 0 0 14px rgba(212,175,55,0.45);
}

.section-head::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(248,232,166,0.55), rgba(212,175,55,0.15) 45%, transparent);
    pointer-events: none;
}

.section-title{
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.2px;
    /* the results-query gold, one treatment for both headings */
    background: linear-gradient(
        100deg,
        #e6c46a,
        #c6a34a,
        #9e7a2b
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-sub{
    margin: 6px 0 0;
    color: rgba(245,245,245,0.62);
    font-size: 13.5px;
}

/* A category's or a shop's section links the name its title shows (docs/web/home-sections.md),
   discreetly: the title's gold stays, a dotted underline says the name opens something, solid on
   hover. The text is the title's gradient clipped to the glyphs, so the line takes a colour of its
   own. */
.section-link{
    text-decoration: underline dotted rgba(230,196,106,0.65);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: text-decoration-color 160ms ease;
}

.section-link:hover{
    text-decoration-style: solid;
    text-decoration-color: rgba(248,232,166,0.95);
    background-image: linear-gradient(
        100deg,
        #f8e8a6,
        #e6c46a,
        #c6a34a
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.section-link:focus-visible{
    outline: 2px solid rgba(212,175,55,0.7);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Section pager: the pages came with the page and flip in place (docs/web/home-sections.md).
   A slim pill on the header's right — hairline border, two chevrons, "2 / 6" in
   tabular figures; the chevrons pick up the gold on hover and fade at the ends. */
.pager{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: none;
    align-self: center;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,0.22);
    background: rgba(15,17,21,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.25);
}

.pager-btn{
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #eed070;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, opacity .18s ease, transform .18s ease;
}

.pager-btn svg{
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pager-btn:hover:not(:disabled){
    background: rgba(212,175,55,0.14);
    color: var(--gold-hi);
    transform: translateY(-0.5px);
}

.pager-btn:active:not(:disabled){ transform: translateY(0); }

.pager-btn:focus-visible{
    outline: 2px solid rgba(212,175,55,0.7);
    outline-offset: 1px;
}

.pager-btn:disabled{
    opacity: 0.28;
    cursor: default;
}

/* a flip that had to fetch its page: the counter breathes until it lands */
.pager.is-loading .pager-count{
    animation: pager-wait .9s ease-in-out infinite alternate;
}
@keyframes pager-wait{
    from{ opacity: 1; }
    to{ opacity: 0.45; }
}

.pager-count{
    min-width: 54px;
    padding: 0 6px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
    color: rgba(245,245,245,0.72);
    white-space: nowrap;
}

.pager-count b{
    font-weight: 600;
    color: var(--gold-hi);
}

.pager-sep{
    margin: 0 5px;
    color: rgba(212,175,55,0.55);
}

/* the flip: the incoming page settles in from a hair below */
@keyframes page-in{
    from{ opacity: 0; transform: translateY(6px); }
    to{ opacity: 1; transform: none; }
}
.cards.is-flipping .card:not([hidden]){
    animation: page-in .28s ease both;
}
@media (prefers-reduced-motion: reduce){
    .cards.is-flipping .card:not([hidden]){ animation: none; }
    .pager-btn{ transition: none; }
}

/* Cards grid */
.cards{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.card{
    position: relative;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.card-after{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
    background: linear-gradient(
        135deg,
        rgba(248,232,166,0.10),
        rgba(212,175,55,0.14),
        rgba(20,92,68,0.10)
    );
    /* mask so it becomes a thin "ring", not a full overlay */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
}

.card:hover{
    transform: translateY(-2px);
    border-color: rgba(212,175,55,0.22);
    background: rgba(255,255,255,0.04);
}

/* the picture: a link to the product's page (docs/web/product-page.md), like the title */
.card-media{
    position: relative;
    display: block;
    aspect-ratio: 10/10;
    overflow: hidden;
    padding: 3px 3px 0 3px;
    background: rgba(255,255,255,0.02);
}

/* Product shots sit whole on a white plate: `contain` keeps the original
   aspect ratio, the padding leaves an even white margin on every side. */
.card-media img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 10px;
    background: #fff;
    border-radius: 15px 15px 0 0;
}

.chip{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(212,175,55,0.25);
    background: rgba(212,175,55,0.10);
    color: rgba(248,232,166,0.92);
    font-size: 12px;
    font-weight: 700;
    display: none;
}

/* The showcase card's category (docs/web/home-sections.md): a band under the picture, the
   section's subject with the card one example of it, and its own link to the category, beside
   the card's links to the product and to the shop. One line: the longest name fits the narrowest
   card, and an ellipsis guards a longer one. */
.card-category{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 3px;
    padding: 9px 9px 9px 12px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(
        145deg,
        rgba(212,175,55,0.17),
        rgba(212,175,55,0.07) 55%,
        rgba(255,255,255,0.02)
    );
    box-shadow:
        inset 0 1px 0 rgba(248,232,166,0.30),
        inset 0 -1px 0 rgba(212,175,55,0.16);
    text-decoration: none;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.card-category-name{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14.5px;
    font-weight: 760;
    letter-spacing: -0.15px;
    line-height: 1.3;
    /* the section title's gold: the card's category reads as a heading */
    background: linear-gradient(
        100deg,
        #e6c46a,
        #c6a34a,
        #9e7a2b
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.card-category-go{
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #eed070;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease, stroke 160ms ease;
}

.card-category:hover{
    background: linear-gradient(
        145deg,
        rgba(212,175,55,0.28),
        rgba(212,175,55,0.12) 55%,
        rgba(255,255,255,0.03)
    );
    box-shadow:
        inset 0 1px 0 rgba(248,232,166,0.45),
        inset 0 -1px 0 rgba(212,175,55,0.30);
}

.card-category:hover .card-category-name{
    background-image: linear-gradient(
        100deg,
        #f8e8a6,
        #e6c46a,
        #c6a34a
    );
}

.card-category:hover .card-category-go{
    stroke: var(--gold-hi);
    transform: translateX(2px);
}

.card-category:focus-visible{
    outline: 2px solid rgba(212,175,55,0.7);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce){
    .card-category-go{ transition: none; }
}

.card-body{
    padding: 12px 12px 14px;
    display: grid;
    gap: 10px;
    flex: 1;
}

/* The price block: one link to the shop - the best price and the highest at the line's two ends,
   three circles between them, the shop line below, full card width (docs/web/product-page.md). */
.price-block{
    display: grid;
    gap: 2px;
    color: inherit;
    text-decoration: none;
}

/* The line never wraps, so no card grows: the room on either side of the circles gives way down
   to the gap, and a line that does not fit even then is scaled as a whole to the card's width
   (app.js sets data-fit and --fit). */
.price-row{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.price-row > *{
    flex: none;
}

.price-row[data-fit]{
    width: calc(100% / var(--fit));
    transform: scale(var(--fit));
    transform-origin: 0 50%;
}

/* Three circles on the prices' baseline, one size and one spacing on every card, the gradient
   running across them from the best price's gold to the highest one's copper. */
.price-dots{
    --dot: 6px;
    --dot-gap: 5px;
    display: flex;
    gap: var(--dot-gap);
}

.price-dots > span{
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: linear-gradient(90deg, #c6a34a, #e0916a) 0 0 / calc(3 * var(--dot) + 2 * var(--dot-gap)) 100%;
}

.price-dots > span:nth-child(2){ background-position-x: calc(-1 * (var(--dot) + var(--dot-gap))); }
.price-dots > span:nth-child(3){ background-position-x: calc(-2 * (var(--dot) + var(--dot-gap))); }

/* the highest price: the term the best one is measured against - as large as the best, in the
   gold's copper end, the dearer side of the same metal */
.price-max{
    font-size: 18px;
    font-weight: 820;
    letter-spacing: -0.2px;
    line-height: 1.05;
    white-space: nowrap;
    background: linear-gradient(100deg, #f0b68c, #d9805f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.price{
    font-size: 18px;
    font-weight: 820;
    letter-spacing: -0.2px;
    line-height: 1.05;
    background: linear-gradient(
        100deg,
        #e6c46a,
        #c6a34a,
        #9e7a2b
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.shop{
    color: rgba(245,245,245,0.58);
    font-size: 12.5px;
    margin-top: 4px;
}

.shop-name{
    color: rgba(120, 214, 176, 0.92);
    font-weight: 720;
    text-shadow: 0 0 8px rgba(20, 92, 68, 0.18);
    transition: filter 160ms ease, text-shadow 160ms ease, color 160ms ease;}

/* the arrow that says a link leaves the site for a shop */
.out-icon{
    width: 13px;
    height: 13px;
    margin-left: 4px;
    vertical-align: -1px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.75;
}

.attrs{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.attr{
    font-size: 11.5px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.015)
    );
    color: rgba(245,245,245,0.72);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 1px 3px rgba(0,0,0,0.35);
}

/* ------------------------- */
/* The product's block       */
/* ------------------------- */

/* The panel (docs/web/product-page.md): the product's block over the list, which stays where it
   was; the dialog scrolls, the page under it does not. */
.pv-backdrop{
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.6);
    display: grid;
    place-items: center;
    padding: 18px;
}

.pv-backdrop[hidden]{ display: none !important; }

.pv-dialog{
    width: min(1080px, 100%);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
}

/* the product's own page: the same block under the topbar */
.pv-page{
    padding-top: 18px;
    padding-bottom: 40px;
}

.pv{
    position: relative;
    padding: 0 22px 22px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #12151a;
    box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

/* the category, the actions and the close button stay in view while the panel scrolls */
.pv-top{
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0 10px;
    background: #12151a;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pv--page .pv-top{ position: static; }   /* the page's topbar is sticky already */

.pv-crumbs{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 4px;
    min-width: 0;
    font-size: 13px;
}

.pv-crumbs a{
    color: rgba(120, 214, 176, 0.92);
    font-weight: 650;
    text-decoration: none;
}

.pv-crumbs a:hover{ text-decoration: underline; }

.pv-icon{
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pv-crumbs .pv-icon{
    width: 14px;
    height: 14px;
    color: rgba(245,245,245,0.55);
}

.pv-actions{
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.pv-act{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 11px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(245,245,245,0.86);
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.pv-act:hover{
    border-color: rgba(212,175,55,0.30);
    background: rgba(212,175,55,0.06);
}

.pv-act:focus-visible, .pv-close:focus-visible{
    outline: 2px solid rgba(212,175,55,0.5);
    outline-offset: 2px;
}

/* the actions still to come: shown, dashed, with what they wait for */
.pv-act[aria-disabled="true"]{
    border-style: dashed;
    background: transparent;
    color: rgba(245,245,245,0.55);
    cursor: not-allowed;
}

.pv-act::after{
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    padding: 6px 10px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.14);
    background: #1b1f26;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    color: rgba(245,245,245,0.92);
    font-size: 12.5px;
    font-weight: 650;
    white-space: nowrap;
    pointer-events: none;
}

.pv-act[data-tip]:hover::after,
.pv-act[data-tip]:focus-visible::after,
.pv-act.tip-on::after{
    display: block;
    content: attr(data-tip);
}

.pv-act.tip-on[data-tip-now]::after{ content: attr(data-tip-now); }

.pv-close{
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    cursor: pointer;
}

.pv-head{ padding: 16px 0 14px; }

.pv-title{
    margin: 0;
    font-size: 26px;
    font-weight: 780;
    letter-spacing: -0.3px;
    line-height: 1.2;
    color: rgba(245,245,245,0.94);
}

.pv-subtitle{
    margin: 6px 0 0;
    font-size: 16.5px;
    font-style: italic;
    color: rgba(245,245,245,0.72);
}

.pv-byline{
    margin: 8px 0 0;
    font-size: 14.5px;
    font-weight: 700;
    color: rgba(120, 214, 176, 0.92);
}

.pv-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* The picture and the specifications on the left, the offers on the right, as tall as they are:
   a long list scrolls inside its column, so both columns end on one line. */
.pv-body{
    display: grid;
    grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "media offers" "specs offers" "history history";
    gap: 18px 26px;
    align-items: start;
}

.pv-media{
    grid-area: media;
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 18px;
    border-radius: 16px;
    background: #fff;
}

.pv-media img{
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    display: block;
}

/* sized by the left column only: the list scrolls rather than lengthen the row */
.pv-offers{
    grid-area: offers;
    align-self: stretch;
    contain: size;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pv-specs{ grid-area: specs; }

.pv-h2{
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 760;
    color: rgba(245,245,245,0.9);
}

.pv-count{
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(245,245,245,0.6);
}

.pv-best{
    flex: none;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(212,175,55,0.28);
    background: linear-gradient(145deg, rgba(212,175,55,0.08), rgba(255,255,255,0.02));
}

.pv-best-price{
    font-size: 28px;
    font-weight: 840;
    letter-spacing: -0.4px;
    background: linear-gradient(100deg, #e6c46a, #c6a34a, #9e7a2b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pv-best-shop{
    margin-top: 2px;
    font-size: 13.5px;
    color: rgba(245,245,245,0.62);
}

.pv-go{
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 760;
    white-space: nowrap;
    text-decoration: none;
    color: #1b1405;
    background: linear-gradient(100deg, #f0d37c, #d4af37 55%, #b08a2c);
    box-shadow: 0 6px 20px rgba(212,175,55,0.18);
}

.pv-go:hover{ filter: brightness(1.06); }

/* the wheel goes on to the page or the panel once the list has nothing left to scroll: an
   `overscroll-behavior: contain` would hold it even over a list too short to scroll */
.pv-list{
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 6px;
    padding-right: 4px;
}

.pv .offer-row{ padding: 9px 12px; }

.pv .offer-row.is-best{ border-color: rgba(212,175,55,0.30); }

.offer-end{
    display: inline-flex;
    align-items: center;
    color: rgba(245,245,245,0.55);
}

.pv-none{
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,0.14);
    color: rgba(245,245,245,0.7);
}

.pv-specs dl{
    display: grid;
    grid-template-columns: auto 1fr;
    margin: 0;
    font-size: 13.5px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.pv-specs dt, .pv-specs dd{
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pv-specs dt{
    color: rgba(245,245,245,0.62);
    background: rgba(255,255,255,0.02);
}

.pv-specs dd{
    color: rgba(245,245,245,0.9);
    font-weight: 600;
}

.pv-specs dt:last-of-type, .pv-specs dd:last-of-type{ border-bottom: 0; }

/* the history's answer beside the best offer: a low price in emerald, a dearer one in gold */
.pv-verdict{
    grid-column: 1 / -1;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.pv-verdict.is-good{
    color: rgba(150, 232, 200, 0.95);
    background: rgba(20, 92, 68, 0.22);
    border: 1px solid rgba(60, 170, 130, 0.35);
}

.pv-verdict.is-warn{
    color: #f3d38b;
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.25);
}

/* The price history: four figures and the line of the lowest price of each day, across the
   block's whole width. */
.pv-history{
    grid-area: history;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.pv-history-head{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pv-range{
    display: inline-flex;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px;
    overflow: hidden;
}

.pv-range button{
    padding: 7px 12px;
    border: 0;
    background: transparent;
    color: rgba(245,245,245,0.7);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

.pv-range button + button{ border-left: 1px solid rgba(255,255,255,0.10); }

.pv-range button.is-on{
    color: #1b1405;
    background: linear-gradient(100deg, #f0d37c, #d4af37);
}

.pv-tiles{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 8px;
}

.pv-tile{
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

.pv-tile-label{
    font-size: 12px;
    color: rgba(245,245,245,0.62);
}

.pv-tile b{
    font-size: 16.5px;
    color: rgba(245,245,245,0.94);
}

.pv-tile-sub{
    font-size: 12px;
    color: rgba(120, 214, 176, 0.85);
}

.pv-chart{
    position: relative;
    height: 240px;
}

.pv-chart svg{
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.pv-tip{
    position: absolute;
    z-index: 2;
    transform: translateY(-100%);
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: #1b1f26;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    font-size: 12.5px;
    white-space: nowrap;
    pointer-events: none;
}

.pv-tip b{
    display: block;
    font-size: 14px;
    color: rgba(245,245,245,0.95);
}

.pv-tip span{ color: rgba(245,245,245,0.62); }

.pv-note{
    margin: 6px 0 0;
    font-size: 12.5px;
    color: rgba(245,245,245,0.58);
}

.pv-sticky{ display: none; }

/* A phone: one column - the picture, the offers, the history, the specifications - the panel
   over the whole screen, and the best offer in a bar at the bottom once its block has scrolled
   away. */
@media (max-width: 760px){
    .pv-backdrop{ padding: 0; }
    .pv-dialog{
        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }
    .pv{ padding: 0 14px 14px; }
    .pv--panel{
        min-height: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    /* only the icons show; the label stays out of sight as the button's name for a screen reader */
    .pv-act-label{
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .pv-act{ padding: 0 9px; }
    .pv-title{ font-size: 21px; }
    .pv-body{
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas: "media" "offers" "history" "specs";
    }
    .pv-tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv-chart{ height: 200px; }
    .pv-media{ height: 240px; padding: 14px; }
    .pv-media img{ width: auto; height: 212px; max-width: 100%; }
    .pv-offers{ contain: none; min-height: 0; }
    .pv-list{ flex: none; overflow: visible; padding-right: 0; }
    .pv-best{ grid-template-columns: 1fr; }
    .pv-best .pv-go{ justify-content: center; }
    .pv-sticky.is-on{
        position: sticky;
        bottom: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 14px -14px -14px;
        padding: 10px 14px;
        background: rgba(18,21,26,0.97);
        border-top: 1px solid rgba(212,175,55,0.25);
    }
    .pv-sticky-offer b{
        display: block;
        font-size: 17px;
        color: rgba(245,245,245,0.94);
    }
    .pv-sticky-offer span{
        font-size: 12.5px;
        color: rgba(245,245,245,0.62);
    }
}

.offer-row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
}

.offer-shop{
    color: rgba(245,245,245,0.84);
    font-weight: 650;
    transition: color 140ms ease, text-shadow 140ms ease;
}

/* whole-row link: subtle highlight across the full line on hover */
a.offer-row{
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}

a.offer-row:hover{
    background: rgba(212,175,55,0.05);
    border-color: rgba(212,175,55,0.30);
}

a.offer-row:hover .offer-shop{
    color: rgba(150, 232, 200, 0.92);
    text-shadow: 0 0 10px rgba(20, 92, 68, 0.28);
}

a.offer-row:focus-visible{
    outline: 2px solid rgba(212,175,55,0.5);
    outline-offset: 2px;
}

.offer-price{
    background: linear-gradient(92deg, var(--gold-hi), var(--gold), var(--gold-lo));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 850;
}

/* ========================= */
/* Global Scrollbar Styling  */
/* Chrome / Edge / Safari    */
/* ========================= */

body::-webkit-scrollbar, .pv-dialog::-webkit-scrollbar, .pv-list::-webkit-scrollbar{
    width: 10px;
}

body::-webkit-scrollbar-track, .pv-dialog::-webkit-scrollbar-track, .pv-list::-webkit-scrollbar-track{
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
}

body::-webkit-scrollbar-thumb, .pv-dialog::-webkit-scrollbar-thumb, .pv-list::-webkit-scrollbar-thumb{
    background: rgba(212,175,55,0.5);
    border-radius: 999px;
    border: 2px solid rgba(15,17,21,0.9);
}

body::-webkit-scrollbar-thumb:hover, .pv-dialog::-webkit-scrollbar-thumb:hover, .pv-list::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(
        180deg,
        var(--gold-hi),
        var(--gold),
        var(--gold-hi)
    );
}

/* ========================= */
/* Scrollbar - Firefox only  */
/* (avoid overriding WebKit) */
/* ========================= */
@supports not selector(::-webkit-scrollbar) {
    body, .pv-dialog, .pv-list {
        scrollbar-width: thin;
        scrollbar-color: rgba(212, 175, 55, 0.6) rgba(255, 255, 255, 0.06);
    }
}

/* Footer: shared chrome, styled in footer.css (loaded from base.html). */

/* Responsive */

@media (max-width: 1100px){
    .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px){
    .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
    .cards{ grid-template-columns: 1fr; gap: 14px; }
}

/* ------------------------- */
/* Card typography polish    */
/* ------------------------- */

/* 1) Mai mult "air" + ritm */
.card-body{
    padding: 14px 14px 16px;
    gap: 11px;
}

/* the title: a link to the product's page (docs/web/product-page.md), like the picture */
.card-title{
    font-weight: 640;
    font-size: 14.5px;
    letter-spacing: -0.15px;
    line-height: 1.35;
    color: rgba(245,245,245,0.88);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: background 180ms ease, color 180ms ease;
}

@media (min-width: 821px){
    .cards{ gap: 14px; }
    .card-body{ padding: 14px 14px 16px; }
}

/* Each target lights up on its own: the title in gold when the pointer is on it, the shop's
   name when it is on the offer - never the whole card's. */
.card-title:hover, .card-title:focus-visible{
    background: linear-gradient(
        95deg,
        #f0d37c,
        #c6a34a,
        #8d6b1f
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.card-title:focus-visible, .card-offer:focus-visible{
    outline: 2px solid rgba(212,175,55,0.5);
    outline-offset: 2px;
    border-radius: 6px;
}

.card-offer:hover .shop-name{
    color: rgba(150, 232, 200, 0.92);
    filter: drop-shadow(0 0 6px rgba(20, 92, 68, 0.55));
    text-shadow: 0 0 12px rgba(20, 92, 68, 0.24);
}

.card-offer:hover .out-icon{ opacity: 1; }

/* ========================= */
/* No Results Panel          */
/* ========================= */

.no-results{
    margin: 8px 0 22px;
}

/* the search's summary: what the page found, above the sections (docs/web/search.md) — the
   no-results panel's kin: the same frame, the query in gold, the counts in gold */
.results-summary{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 18px;
    margin: 4px 0 -2px;
    padding: 16px 20px 15px 24px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(212,175,55,0.07),
            rgba(255,255,255,0.03) 45%,
            rgba(255,255,255,0.015)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 14px 44px rgba(0,0,0,0.30);
    overflow: hidden;
}

.results-summary::before{           /* the gold rule every section head carries */
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-lo));
    box-shadow: 0 0 14px rgba(212,175,55,0.45);
}

.results-kicker{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 10px;
    margin: 0;              /* a shop's page writes it as its h1 */
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,245,245,0.55);
}

.results-query{
    font-size: 20px;
    font-weight: 760;
    letter-spacing: -0.2px;
    text-transform: none;
    line-height: 1.2;
    background: linear-gradient(
        100deg,
        #e6c46a,
        #c6a34a,
        #9e7a2b
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.results-count{
    font-size: 13px;
    letter-spacing: 0.02em;
    color: rgba(245,245,245,0.62);
    white-space: nowrap;
}

.results-count b{
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
    background: linear-gradient(
        100deg,
        #e6c46a,
        #c6a34a,
        #9e7a2b
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.results-sep{
    margin: 0 8px;
    color: rgba(212,175,55,0.45);
}

.no-results-inner{
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 28px 26px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.02)
        );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 18px 60px rgba(0,0,0,0.35);
    text-align: center;
}

.no-results-kicker{
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,245,245,0.55);
    margin-bottom: 10px;
}

.no-results-title{
    margin: 0;
    font-size: 20px;
    font-weight: 760;
    letter-spacing: -0.2px;
}

.no-results-query{
    background: linear-gradient(
        100deg,
        #e6c46a,
        #c6a34a,
        #9e7a2b
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.no-results-sub{
    margin: 12px 0 0;
    color: rgba(245,245,245,0.65);
    font-size: 14px;
}