/* All 27 EU member-state flags as CSS background swatches.
   Designed to render at 18×13 (or any aspect ratio close to 4:3) inside .swatch wrappers.
   Each flag is either a CSS-gradient approximation (for simple tricolours)
   or an inline SVG data URI (for flags with stripes + symbols). */

.f-at { background: linear-gradient(180deg, #ed2939 33%, #fff 33% 66%, #ed2939 66%); }
.f-be { background: linear-gradient(90deg, #000 33%, #fdda24 33% 66%, #ef3340 66%); }
.f-bg { background: linear-gradient(180deg, #fff 33%, #00966e 33% 66%, #d62612 66%); }
.f-hr { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'><rect width='9' height='2' y='0' fill='%23ff0000'/><rect width='9' height='2' y='2' fill='%23fff'/><rect width='9' height='2' y='4' fill='%23171796'/></svg>"); background-size: cover; }
.f-cy { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='12' fill='%23fff'/><path d='M5 4 q1 1 4 1 q3 0 4 -1 v3 h-8z' fill='%23d57800'/><path d='M7 8 l1 1 m-1-1 l1.5 -.5 m1.5 .5 l-1 1 m1 -1 l-1.5 -.5' stroke='%23006633' stroke-width='.3' fill='none'/></svg>"); background-size: cover; }
.f-cz { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'><rect width='9' height='3' fill='%23fff'/><rect width='9' height='3' y='3' fill='%23d7141a'/><polygon points='0,0 4.5,3 0,6' fill='%2311457e'/></svg>"); background-size: cover; }
.f-dk { background: #c8102e url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'><rect width='14' height='10' fill='%23c8102e'/><rect x='4' width='2' height='10' fill='%23fff'/><rect y='4' width='14' height='2' fill='%23fff'/></svg>"); background-size: cover; }
.f-de { background: linear-gradient(180deg, #000 33%, #dd0000 33% 66%, #ffce00 66%); }
.f-ee { background: linear-gradient(180deg, #0072ce 33%, #000 33% 66%, #fff 66%); }
.f-fi { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'><rect width='18' height='11' fill='%23fff'/><rect x='5' width='3' height='11' fill='%23003580'/><rect y='4' width='18' height='3' fill='%23003580'/></svg>"); background-size: cover; }
.f-fr { background: linear-gradient(90deg, #0055a4 33%, #fff 33% 66%, #ef4135 66%); }
.f-gr { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 18'><rect width='27' height='18' fill='%230d5eaf'/><rect y='2' width='27' height='2' fill='%23fff'/><rect y='6' width='27' height='2' fill='%23fff'/><rect y='10' width='27' height='2' fill='%23fff'/><rect y='14' width='27' height='2' fill='%23fff'/><rect width='10' height='10' fill='%230d5eaf'/><rect x='4' width='2' height='10' fill='%23fff'/><rect y='4' width='10' height='2' fill='%23fff'/></svg>"); background-size: cover; }
.f-hu { background: linear-gradient(180deg, #ce2939 33%, #fff 33% 66%, #477050 66%); }
.f-ie { background: linear-gradient(90deg, #169b62 33%, #fff 33% 66%, #ff883e 66%); }
.f-it { background: linear-gradient(90deg, #008c45 33%, #fff 33% 66%, #cd212a 66%); }
.f-lv { background: linear-gradient(180deg, #9e1b32 40%, #fff 40% 60%, #9e1b32 60%); }
.f-lt { background: linear-gradient(180deg, #fdb913 33%, #006a44 33% 66%, #c1272d 66%); }
.f-lu { background: linear-gradient(180deg, #ee2536 33%, #fff 33% 66%, #00a3e0 66%); }
.f-mt { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='9' height='12' fill='%23fff'/><rect x='9' width='9' height='12' fill='%23cf142b'/></svg>"); background-size: cover; }
.f-nl { background: linear-gradient(180deg, #ae1c28 33%, #fff 33% 66%, #21468b 66%); }
.f-pl { background: linear-gradient(180deg, #fff 50%, #dc143c 50%); }
.f-pt { background: linear-gradient(90deg, #006600 40%, #ff0000 40%); }
.f-ro { background: linear-gradient(90deg, #002b7f 33%, #fcd116 33% 66%, #ce1126 66%); }
.f-sk { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='4' fill='%23fff'/><rect width='18' height='4' y='4' fill='%230b4ea2'/><rect width='18' height='4' y='8' fill='%23ee1c25'/></svg>"); background-size: cover; }
.f-si { background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'><rect width='18' height='4' fill='%23fff'/><rect width='18' height='4' y='4' fill='%230000aa'/><rect width='18' height='4' y='8' fill='%23ed2939'/></svg>"); background-size: cover; }
.f-es { background: linear-gradient(180deg, #aa151b 25%, #f1bf00 25% 75%, #aa151b 75%); }
.f-se { background: #006aa7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'><rect width='16' height='10' fill='%23006aa7'/><rect x='5' width='2' height='10' fill='%23fecc00'/><rect y='4' width='16' height='2' fill='%23fecc00'/></svg>"); background-size: cover; }

/* Listing logo images — flags.css is the only stylesheet loaded on every public
   page that renders cards, so the image-fit rule lives here. Without it, the
   <img> takes its intrinsic dimensions and either overflows the rounded
   .listing-logo box or shows next to the monogram fallback. */
.listing-logo, .ph-logo, .rel-logo, .product-logo { overflow: hidden; }
.listing-logo > img, .ph-logo > img, .rel-logo > img, .product-logo > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    padding: 12%;
    box-sizing: border-box;
    background: #fff;
    display: block;
}

/* Hide the scrollbar on the sticky filter sidebar — keeps `position: sticky`
   + `overflow-y: auto` working for tall forms while removing the visible
   gutter that several per-page CSS files declare with their own colour. */
.filter-side {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;        /* legacy Edge / IE */
}
.filter-side::-webkit-scrollbar {    /* Chrome / Safari / WebKit */
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* `.listing-replaces` is the "replaces: AWS · Google Cloud" line on listing
   cards. Originally only category.css/subcategory.css/search.css styled it,
   so on alternatives-to/* and the homepage the pills collapsed into one
   unspaced run. Put the rule here so every page that loads flags.css gets
   the same look. */
.listing-replaces {
    padding: 0 18px 12px;
    font: 0.78rem var(--mono);
    color: var(--muted);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.listing-replaces .lbl { color: var(--muted); }
.listing-replaces .pkg { color: var(--ink-2); font-weight: 500; }
.listing-replaces .sep { color: var(--line-3); }